/* neu.css — Neue Optik des Zahlenfelds (Standard), wie die neue Oberfläche des Rechenfelds
   (../Rechenfeld-Web/neu.css, Vorbild: Rechnen mit Köpfchen): weiße Fläche ohne schwarze Leisten,
   eine Kopfzeile mit Pillen-Umschaltern und runden Knöpfen (Strichsymbole), Kindertexte in
   „Avela Buch“, Zahlen in Grundschrift.
   Alles gilt nur unter html[data-design="neu"]; styles.css bleibt die klassische iOS-Optik.
   Beschreibung und Entscheidungen: docs/design-neu.md. */

/* „Avela Buch“: eigene Andika-Ableitung, SIL OFL 1.1 (Lizenz in assets/fonts/), wie Köpfchen. */
@font-face { font-family: 'Avela Buch'; src: url('assets/fonts/AvelaBuch-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Avela Buch'; src: url('assets/fonts/AvelaBuch-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* Inhalte, die es nur in einer der beiden Optiken gibt */
html:not([data-design="neu"]) .nur-neu { display: none !important; }
html[data-design="neu"] .nur-klassisch { display: none !important; }

html[data-design="neu"] {
  /* Grundgröße wie Köpfchen: ≈ 23 px auf dem iPad quer, an Breite UND Höhe gekoppelt;
     Knöpfe 2,6-mal so groß (≈ 60 px). */
  --zb-b0: clamp(14px, min(calc((100vw - 32px) * .0205), calc((100vh - 32px) * .0295)), 28px);
  --zb-b: var(--zb-b0);
  --zb: calc(2.6 * var(--zb-b));
  --rand: calc(1.7 * var(--zb-b));
  --rot: #B9494A; --blau: #1A4766;
  --gelb: #F4B63F; --gelb-dunkel: #c47f00; --gruen: #2F7D5B;
  --tinte: #1D2631; --grau-text: #5f6874; --linie: #dde2e8; --grund: #F4F5F7;
  --knopf: #e6ebf1; --pille: #e9edf2; --kasten: #eef1f4;
  --schatten-klein: 0 .1em .45em rgba(10, 20, 40, .09);
  --schatten: 0 .3em 1.6em rgba(10, 20, 40, .16);
  --f-kind: 'Avela Buch', 'Grundschrift', system-ui, -apple-system, sans-serif;
  --sb-breite: calc(10.6 * var(--zb-b));
  /* Stellenwertfarben (app.updateColorButtons setzt die gewählten) */
  --farbe-z: #1A4766; --farbe-e: #3F8B81; --farbe-h: #992727;
}
html[data-design="neu"] body { font-family: var(--f-kind); color: var(--tinte); background: #fff; }

/* Die schwarzen Leisten gibt es nicht; ihre Knöpfe stehen in der Kopfzeile (app.applyDesign). */
html[data-design="neu"] #navbar,
html[data-design="neu"] #toolbar { display: none !important; }

/* ---------------------------------------------------------------- Kopfzeile -- */
/* Immer eine Zeile: app.passeKopfzeileAn() lässt erst das Wort „Forschen“ weg (.kz-wort) und
   verkleinert dann alles darin gleichmäßig (--kz-f); alle Maße hängen an --zb-b. Erst wenn die
   Knöpfe kleiner als 28 px würden (Handy hochkant), bricht sie um (.kz-umbruch). */
html[data-design="neu"] #kopfzeile {
  --zb-b: calc(var(--zb-b0) * var(--kz-f, 1));
  --zb: calc(2.6 * var(--zb-b));
  flex: 0 0 auto; position: relative; z-index: 40;
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
  gap: calc(.4 * var(--zb-b)) calc(.6 * var(--zb-b));
  /* rechts Platz für die Drei-Punkte-Knöpfe, die oben rechts schweben (--kz-platz, app.passeKopfzeileAn) */
  padding: calc(.5 * var(--zb-b) + env(safe-area-inset-top, 0px)) var(--kz-platz, calc(1.1 * var(--zb-b)))
    calc(.25 * var(--zb-b)) calc(1.1 * var(--zb-b));
  background: #fff;
}
/* Eingebettet ohne Werkzeuge (Matheforscher ui=minimal): keine leere Zeile stehen lassen */
html[data-design="neu"] #kopfzeile.kz-leer { display: none; }
html[data-design="neu"] #kopfzeile .kz-aus { display: none !important; }
.kz-gruppe { display: flex; flex: none; flex-wrap: nowrap; align-items: center; gap: calc(.4 * var(--zb-b)); }
.kz-rechts { justify-content: flex-end; }
html[data-design="neu"] #kopfzeile.kz-umbruch { flex-wrap: wrap; }
html[data-design="neu"] #kopfzeile.kz-umbruch .kz-gruppe { flex: 0 1 auto; flex-wrap: wrap; min-width: 0; }

/* Runde Knöpfe (Werkzeuge): hellgrau, Strichsymbol, gedrückt etwas kleiner */
html[data-design="neu"] #kopfzeile :is(.tb-btn, .nav-btn) {
  flex: none; width: var(--zb); height: var(--zb); min-width: 0; padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: var(--knopf); color: var(--tinte);
  display: grid; place-items: center; gap: 0; font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html[data-design="neu"] #kopfzeile :is(.tb-btn, .nav-btn) > .sym { width: calc(.46 * var(--zb)); height: calc(.46 * var(--zb)); display: block; pointer-events: none; }
html[data-design="neu"] #kopfzeile :is(.tb-btn, .nav-btn):active { transform: scale(.95); background: var(--knopf); }
html[data-design="neu"] #kopfzeile :is(button, .segmented button):focus-visible { outline: 3px solid var(--gelb-dunkel); outline-offset: 2px; }
/* Eingeschaltet (Blitzblick) gelb wie die Wahl-Knöpfe in Köpfchen */
html[data-design="neu"] #kopfzeile #btnBlitzblick.selected { background: var(--gelb); color: #3b2a00; }
/* Was im Zahlenraum gerade nicht wirkt (Blitzblick im ZR 1000, Hunderterfarbe darunter), wird blass */
html[data-design="neu"] #kopfzeile .gedimmt { opacity: .35; }
/* Bildschirmaufnahme: im Menü „Ein- oder Ausblenden“; während der Aufnahme als roter Stopp-Knopf hier */
html[data-design="neu"] #kopfzeile #btnVideo:not(.recording) { display: none; }
html[data-design="neu"] #kopfzeile #btnVideo.recording { background: #f3dcdc; color: var(--rot); }
/* Forschen: Lupe; mit Wort, wenn die Zeile dafür Platz hat (app.passeKopfzeileAn) */
html[data-design="neu"] #kopfzeile #btnForscher .nav-lbl { display: none; }
html[data-design="neu"] #kopfzeile.kz-wort #btnForscher {
  width: auto; border-radius: 999px; grid-auto-flow: column; gap: .4em;
  padding: 0 calc(.85 * var(--zb-b)) 0 calc(.7 * var(--zb-b));
}
html[data-design="neu"] #kopfzeile.kz-wort #btnForscher > .sym { width: calc(1.2 * var(--zb-b)); height: calc(1.2 * var(--zb-b)); }
html[data-design="neu"] #kopfzeile.kz-wort #btnForscher .nav-lbl { display: inline; font: 700 calc(.9 * var(--zb-b))/1 var(--f-kind); }
/* Rückgängig: gesperrt, solange es nichts zurückzunehmen gibt */
html[data-design="neu"] #kopfzeile #btnUndo:disabled { opacity: .35; cursor: default; }
html[data-design="neu"] #kopfzeile #btnUndo:disabled:active { transform: none; }

/* Zahlenraum: Pille mit Wort und kleinem Pfeil (öffnet das Menü) */
html[data-design="neu"] #kopfzeile #btnZR {
  width: auto; min-width: calc(3.4 * var(--zb-b)); border-radius: 999px; background: var(--pille);
  grid-auto-flow: column; gap: .15em; padding: 0 calc(.5 * var(--zb-b)) 0 calc(.85 * var(--zb-b));
  font: 700 calc(.95 * var(--zb-b))/1 var(--f-kind);
}
html[data-design="neu"] #kopfzeile #btnZR > .sym { width: calc(1.05 * var(--zb-b)); height: calc(1.05 * var(--zb-b)); color: var(--grau-text); }

/* Umschalter als Pille: gewählt weiß mit leichtem Schatten */
html[data-design="neu"] #kopfzeile .segmented {
  display: inline-flex; flex: none; height: var(--zb); box-sizing: border-box;
  gap: calc(.12 * var(--zb-b)); padding: calc(.22 * var(--zb-b));
  background: var(--pille); border-radius: 999px;
}
html[data-design="neu"] #kopfzeile .segmented button {
  width: auto; min-width: calc(2.2 * var(--zb-b)); padding: 0 calc(.55 * var(--zb-b));
  border: 0; border-radius: 999px; background: transparent; color: var(--tinte);
  display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html[data-design="neu"] #kopfzeile .segmented button.selected { background: #fff; box-shadow: var(--schatten-klein); }
html[data-design="neu"] #kopfzeile .segmented button:active { transform: scale(.95); }
/* Anordnung: Pille wie der Zahlenraum — das Bildchen der gewählten Anordnung (design.js miniFeld) und
   ein kleiner Pfeil; Antippen öffnet das Menü mit allen drei (app.buildAnordnungMenu). */
html[data-design="neu"] #kopfzeile #btnAnordnung {
  align-items: center; gap: .1em; cursor: pointer; padding: 0 calc(.5 * var(--zb-b)) 0 calc(.3 * var(--zb-b));
}
html[data-design="neu"] #kopfzeile #btnAnordnung button:not(.selected) { display: none; }
html[data-design="neu"] #kopfzeile #btnAnordnung button.selected { background: transparent; box-shadow: none; min-width: 0; padding: 0 calc(.2 * var(--zb-b)); }
html[data-design="neu"] #kopfzeile #btnAnordnung .anordnung-pfeil { flex: none; width: calc(1.05 * var(--zb-b)); height: calc(1.05 * var(--zb-b)); color: var(--grau-text); pointer-events: none; }
html[data-design="neu"] #kopfzeile #btnAnordnung:active { transform: scale(.97); }
html[data-design="neu"] .mini-bild { width: calc(4.3 * var(--zb-b)); height: auto; display: block; pointer-events: none; }
html[data-design="neu"] .menu .mini-bild { width: calc(6 * var(--zb-b)); flex: none; }

/* Farben: drei Farbtupfer H, Z, E in einer Pille */
html[data-design="neu"] #kopfzeile .tb-farben {
  display: flex; flex: none; align-items: center; height: var(--zb); box-sizing: border-box;
  gap: calc(.3 * var(--zb-b)); padding: 0 calc(.42 * var(--zb-b));
  background: var(--pille); border-radius: 999px;
}
html[data-design="neu"] #kopfzeile .color-btn {
  width: calc(1.75 * var(--zb-b)); height: calc(1.75 * var(--zb-b)); padding: 0;
  border: calc(.18 * var(--zb-b)) solid #fff; box-shadow: var(--schatten-klein);
  font: 700 calc(.68 * var(--zb-b))/1 var(--f-kind); color: #fff;
}
html[data-design="neu"] #kopfzeile .color-btn:active { transform: scale(.94); }

/* Navigationsleiste per Einstellung aus: ihre Knöpfe (data-nav) und die Sammelbox ruhen */
html[data-design="neu"].ohne-nav #kopfzeile [data-nav],
html[data-design="neu"].ohne-nav .sb-lasche,
html[data-design="neu"].ohne-nav #sammelbox { display: none !important; }
html[data-design="neu"] #navReveal {
  top: calc(.5 * var(--zb-b) + env(safe-area-inset-top, 0px)); right: calc(1.1 * var(--zb-b));
  width: var(--zb); height: var(--zb); border: 0; border-radius: 50%;
  background: var(--knopf); color: var(--tinte); box-shadow: none; font: 700 var(--zb-b)/1 var(--f-kind);
}
html[data-design="neu"] #navbar.nav-revealed { padding-right: 0; }
html[data-design="neu"] #mf-reveal-btn {
  top: calc(.5 * var(--zb-b)); bottom: auto; right: calc(1.1 * var(--zb-b));
  width: var(--zb); height: var(--zb); border: 0; background: var(--knopf); box-shadow: none; color: var(--tinte);
}

/* -------------------------------------------------------------- Darstellungen -- */
html[data-design="neu"] #stack { padding: calc(.25 * var(--zb-b)) var(--rand) calc(.2 * var(--zb-b)); }
html[data-design="neu"] #actionViewContainer {
  margin: 0 var(--rand) calc(.9 * var(--zb-b) + env(safe-area-inset-bottom, 0px));
}
html[data-design="neu"] #actionViewContainer.versteckt { margin: 0 var(--rand); }
@media (max-width: 760px) {
  html[data-design="neu"] #stack { padding-left: calc(1.2 * var(--zb-b)); padding-right: calc(1.2 * var(--zb-b)); }
  html[data-design="neu"] #actionViewContainer { margin-left: calc(1.2 * var(--zb-b)); margin-right: calc(1.2 * var(--zb-b)); }
}

/* --------------------------------------------------------- Menüs und Fenster -- */
html[data-design="neu"] :is(.menu, .popover, .popover.dark) {
  background: #fff; color: var(--tinte); border-radius: calc(.9 * var(--zb-b));
  box-shadow: var(--schatten); padding: calc(.4 * var(--zb-b));
}
html[data-design="neu"] .menu .menu-item {
  font: 700 calc(.8 * var(--zb-b))/1.2 var(--f-kind); color: var(--tinte);
  border-radius: calc(.55 * var(--zb-b)); padding: .5em .8em; gap: .6em; min-height: calc(2.1 * var(--zb-b));
}
html[data-design="neu"] .menu .menu-item:hover { background: var(--grund); }
html[data-design="neu"] .menu .menu-item .check { width: 1em; color: var(--gruen); }
html[data-design="neu"] .menu .mini-zr { width: calc(2.4 * var(--zb-b)); height: auto; flex: none; }
html[data-design="neu"] #palettePopover button { border-color: #fff !important; box-shadow: var(--schatten-klein); }

/* Ein- oder Ausblenden: helle Karte, Zeilen mit Bildchen und Schalter, darunter was früher in der
   Navigationsleiste stand */
html[data-design="neu"] .popover.dark {
  padding: calc(.75 * var(--zb-b)) calc(.9 * var(--zb-b)); width: auto;
  min-width: min(92vw, calc(17 * var(--zb-b))); max-width: 92vw; max-height: 84vh;
}
html[data-design="neu"] .popover.dark h3 { font: 700 clamp(18px, 1.02 * var(--zb-b), 24px)/1.2 var(--f-kind); margin-bottom: .4em; }
html[data-design="neu"] .check-row {
  color: var(--tinte); font: 400 clamp(16px, .86 * var(--zb-b), 21px)/1.25 var(--f-kind);
  padding: .22em 0; gap: .7em;
}
html[data-design="neu"] .check-row .dot { display: none; }
html[data-design="neu"] .check-row .vs-label { flex: 1; display: inline-flex; align-items: center; gap: .6em; min-width: 0; }
html[data-design="neu"] .vs-sym { width: 2.4em; height: 1.6em; flex: none; color: var(--tinte); }
/* Schalter wie in iOS, aber grün wie die übrigen Wahl-Knöpfe (zeigt nur den Zustand der Zeile) */
.vs-schalter {
  position: relative; flex: none; width: 2.55em; height: 1.55em; border-radius: 999px;
  background: rgba(120, 120, 128, .28); transition: background .25s;
}
.vs-schalter::after {
  content: ''; position: absolute; top: .12em; left: .12em; width: 1.31em; height: 1.31em; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s;
}
.check-row.an .vs-schalter { background: var(--gruen); }
.check-row.an .vs-schalter::after { transform: translateX(1em); }
html[data-design="neu"] .popover-trenner { border-top-color: var(--linie); margin: .45em 0; }
html[data-design="neu"] .sym .sym-z { fill: var(--farbe-z); }
html[data-design="neu"] .sym .sym-e { fill: var(--farbe-e); }
html[data-design="neu"] .sym .sym-h { fill: var(--farbe-h); }
html[data-design="neu"] .sym tspan.sym-z { fill: var(--farbe-z); }
html[data-design="neu"] .sym tspan.sym-e { fill: var(--farbe-e); }
/* Die Knöpfe bestimmen die Breite des Fensters nicht mit (width 0 + min-width 100 %): Sie brechen in
   der Breite der Zeilen um und füllen jede Reihe. */
#viewSettingsMehr { display: flex; flex-wrap: wrap; gap: .45em; width: 0; min-width: 100%; margin-top: .6em; padding-top: .7em; border-top: 1px solid var(--linie); }
.vs-mehr {
  display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: .45em; border: 0; border-radius: 999px;
  background: var(--knopf); color: var(--tinte); cursor: pointer; white-space: nowrap;
  font: 700 clamp(14px, .72 * var(--zb-b), 17px)/1 var(--f-kind); padding: .62em .9em .62em .7em;
}
.vs-mehr .sym { width: 1.35em; height: 1.35em; flex: none; }
.vs-mehr:active { transform: scale(.96); }
.vs-mehr[hidden] { display: none; }

/* Fenster (Einstellungen, Teilen, Forscherkarten, Eltern-Zugang) */
html[data-design="neu"] .sheet { background: rgba(29, 38, 49, .35); }
html[data-design="neu"] .sheet-card,
html[data-design="neu"] .sheet-card.dark { background: #fff; color: var(--tinte); border-radius: calc(1 * var(--zb-b)); box-shadow: var(--schatten); }
html[data-design="neu"] .sheet-head h2 { font: 700 calc(1.3 * var(--zb-b))/1.2 var(--f-kind); }
/* „Fertig“, „Drucken“: Pillen statt blauer iOS-Schrift; „Fertig“ der Einstellungen grün wie Rechentablett */
html[data-design="neu"] .close-btn {
  border-radius: 999px; background: var(--knopf); color: var(--tinte);
  font: 700 16px/1 var(--f-kind); padding: 10px 18px;
}
html[data-design="neu"] .close-btn:active { transform: scale(.96); }
html[data-design="neu"] #settingsClose { background: var(--gruen); color: #fff; box-shadow: var(--schatten-klein); }

/* Teilen */
html[data-design="neu"] #teilenSheet .sheet-card { width: min(460px, 94vw); }
html[data-design="neu"] .teilen-body { padding: 4px 20px 22px; }
html[data-design="neu"] .teilen-qr { border: 1px solid var(--linie); border-radius: 14px; }
html[data-design="neu"] .teilen-link { border: 1px solid var(--linie); background: var(--grund); color: var(--tinte); border-radius: 12px; }
html[data-design="neu"] .teilen-btn { border-radius: 999px; font: 700 15px/1 var(--f-kind); padding: 12px 18px; background: var(--blau); }
html[data-design="neu"] .teilen-btn-secondary { background: var(--knopf); color: var(--tinte); }

/* Einstellungen (js/einstellungen.js) wie Rechentablett und Rechenfeld: „Fertig“, Reiter mit Symbol,
   Zeilen aus kleinem Bild, Titel, einem Satz und Schalter; Auswahlen als Bildknöpfe. Texte in
   Systemschrift wie dort, Wörter für Kinder (Reiter, Knöpfe) in Avela. */
html[data-design="neu"] #settingsSheet .sheet-card { width: min(720px, 94vw); height: min(92vh, 760px); max-height: none; }  /* feste Höhe: Reiterwechsel springt nicht */
html[data-design="neu"] #settingsSheet .sheet-head { padding: 18px 20px 10px 22px; gap: 12px; }
html[data-design="neu"] #settingsSheet .sheet-head h2 { font: 700 24px/1.2 var(--f-kind); }
.einst-reiter { display: flex; gap: 4px; padding: 0 12px 8px; border-bottom: 1px solid var(--linie); flex: none; }
.einst-reiter button {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 0; border-radius: 12px; background: none; color: var(--grau-text); cursor: pointer;
  padding: 8px 4px 7px; font: 700 13.5px/1.15 var(--f-kind);
}
.einst-reiter button .sym { width: 24px; height: 24px; }
.einst-reiter button[aria-selected="true"] { background: #e7f0eb; color: var(--gruen); }
html[data-design="neu"] #settingsBody { flex: 1; padding: 4px 22px 22px; font-family: system-ui, -apple-system, sans-serif; color: var(--tinte); }
.einst-gruppe[hidden] { display: none; }
.einst-hinweis { margin: 14px 0 2px; font-size: 14px; line-height: 1.4; color: var(--grau-text); }
.einst { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--linie); }
.einst-gruppe > .einst:first-child, .einst-hinweis + .einst { border-top: 0; }
.einst[hidden] { display: none; }
.einst-bild {
  flex: none; width: 84px; height: 64px; border-radius: 12px; background: var(--grund);
  display: grid; place-items: center; overflow: hidden;
}
.einst-bild > svg { width: 100%; height: 100%; display: block; }
.einst-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.einst-text > b { font-size: 16px; line-height: 1.25; font-weight: 650; }
.einst-text > small { font-size: 13.5px; line-height: 1.4; color: var(--grau-text); }
.einst .uiswitch { flex: none; }
/* Block: Titel und Satz über einer Reihe Bildknöpfe */
.einst.block { flex-direction: column; align-items: stretch; gap: 10px; }
.seg-bild { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; }
.seg-bild button {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
  border: 2px solid transparent; border-radius: 12px; background: var(--grund); color: var(--tinte); cursor: pointer;
  padding: 10px 6px 8px; font: 700 14px/1.2 var(--f-kind);
}
.seg-bild button[aria-checked="true"] { border-color: var(--gruen); background: #fff; color: var(--gruen); }
.seg-bild-bild { display: grid; place-items: center; }
.optik .seg-bild { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
.optik .seg-bild-bild > svg { width: 100%; max-width: 150px; height: auto; display: block; }
.stepper {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: 6px;
  background: var(--knopf); border-radius: 999px; padding: 3px;
}
.stepper button {
  width: 34px; height: 34px; border: 0; border-radius: 50%; background: #fff; color: var(--tinte); cursor: pointer;
  font: 700 20px/1 var(--f-kind); box-shadow: 0 1px 2px rgba(10, 20, 40, .12);
}
.stepper button:disabled { opacity: .35; cursor: default; }
.st-wert { min-width: 7.5em; text-align: center; font: 600 15px/1 var(--f-kind); }
.st-wert b { font-family: Grundschrift, var(--f-kind); font-weight: 400; font-size: 1.25em; }
.einst-links { display: flex; flex-wrap: wrap; gap: 8px; }
.einst-links a {
  border-radius: 999px; background: var(--knopf); color: var(--tinte); text-decoration: none;
  font: 700 14px/1 var(--f-kind); padding: 9px 14px;
}
.einst-info-text { font-size: 14px; line-height: 1.5; color: var(--tinte); }
.einst-info-text h4 { font-size: 15px; margin: 12px 0 4px; }
.einst-info-text :is(ul, ol) { padding-left: 20px; margin: 4px 0; }
.einst-info-text details summary { cursor: pointer; color: var(--gruen); font-weight: 650; margin-top: 8px; }
@media (max-width: 520px) {
  .einst-bild { width: 64px; height: 50px; }
  .einst-reiter button { font-size: 12px; }
}
html[data-design="neu"] .uiswitch.on { background: var(--gruen); }
html[data-design="neu"] .alert-card { background: #fff; border-radius: calc(1 * var(--zb-b)); box-shadow: var(--schatten); }
html[data-design="neu"] .alert-card h3 { font: 700 calc(.85 * var(--zb-b))/1.3 var(--f-kind); display: flex; align-items: center; justify-content: center; gap: .35em; }
html[data-design="neu"] .alert-card h3 .sym { width: 1.1em; height: 1.1em; }
html[data-design="neu"] .alert-card p { font-family: var(--f-kind); font-size: calc(.72 * var(--zb-b)); }
html[data-design="neu"] .alert-card input { border-radius: 12px; border-color: var(--linie); font-family: 'Grundschrift', var(--f-kind); }
html[data-design="neu"] .alert-buttons button { border-radius: 999px; background: var(--knopf); font: 700 calc(.72 * var(--zb-b)) var(--f-kind); color: var(--tinte); }
html[data-design="neu"] .alert-buttons .primary { background: var(--blau); color: #fff; }

/* Einführung (Overlay, geteiltes js/overlay.js): Schrift und Kasten wie Köpfchen */
html[data-design="neu"] .ov-text {
  font: 400 calc(.92 * var(--zb-b))/1.35 var(--f-kind); background: rgba(29, 38, 49, .84);
  border-radius: calc(.6 * var(--zb-b)); padding: .5em 1.05em;
}

/* Forscherkarten: Karte in der Köpfchen-Optik */
html[data-design="neu"] #forscherKarte { border-radius: calc(.9 * var(--zb-b)); box-shadow: 0 .2em 1.2em rgba(10, 20, 40, .12); }
html[data-design="neu"] .fk-titel { font-family: var(--f-kind); }
html[data-design="neu"] :is(.fk-knopf, .fk-wortknopf, .fk-chip, .fk-neu, .fk-kachel) { font-family: var(--f-kind); }
html[data-design="neu"] .fk-kachel { background: var(--grund); }
html[data-design="neu"] .fk-rund { background: var(--knopf); }
/* „Zeig mal“-Untertitel unter der Kopfzeile (app.js setzt --kopf-h) */
html[data-design="neu"] .zm-untertitel { top: calc(var(--kopf-h, 80px) + 10px); font-family: var(--f-kind); background: rgba(29, 38, 49, .86); }
html[data-design="neu"] .zm-blase { font-family: var(--f-kind); }

/* Zeichnen (geteiltes js/zeichnen.js): heller Grund statt Dunkelgrau */
html[data-design="neu"] .archiv-zeichnen-root { background: #dfe4ea; }

/* ------------------------------------------------------- Sammelbox (Leiste) -- */
/* Querformat: Spalte rechts neben dem Arbeitsbereich (schiebt ihn zur Seite statt ihn zu verdecken);
   Hochformat und schmale Fenster: Band darunter. js/sammelbox.js. */
html[data-design="neu"] #hauptbereich { position: relative; }
html[data-design="neu"] #sammelbox {
  flex: 0 0 0px; min-width: 0; min-height: 0; overflow: hidden; visibility: hidden;
  background: var(--kasten); border-radius: calc(.9 * var(--zb-b));
  font: 400 var(--zb-b)/1.3 var(--f-kind); color: var(--tinte);
  margin: 0 var(--rand); transition: flex-basis .3s ease, visibility 0s linear .3s;
}
html[data-design="neu"] #sammelbox.offen {
  visibility: visible; box-shadow: 0 .2em 1.2em rgba(10, 20, 40, .14);
  flex-basis: min(34vh, calc(12 * var(--zb-b))); margin-bottom: calc(.6 * var(--zb-b));
  transition: flex-basis .3s ease, visibility 0s;
}
.sb-innen { height: 100%; display: flex; flex-direction: column; }
.sb-kopf { flex: none; display: flex; align-items: center; gap: .3em; padding: .45em .45em .3em .75em; }
.sb-titel { flex: 1; min-width: 0; font-weight: 700; font-size: .92em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-rund {
  flex: none; width: calc(1.75 * var(--zb-b)); height: calc(1.75 * var(--zb-b)); padding: 0; border: 0;
  border-radius: 50%; background: #fff; color: var(--tinte); display: grid; place-items: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sb-rund .sym { width: calc(.92 * var(--zb-b)); height: calc(.92 * var(--zb-b)); }
.sb-rund:active { transform: scale(.95); }
.sb-liste {
  flex: 1; min-height: 0; display: flex; gap: .55em; padding: .2em .55em .6em;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; scrollbar-width: thin;
}
.sb-eintrag {
  position: relative; flex: none; display: flex; flex-direction: column; background: #fff;
  border-radius: .7em; padding: .35em .35em .3em; box-shadow: var(--schatten-klein);
  height: 100%; width: auto; max-width: calc(14 * var(--zb-b));
}
.sb-bild {
  flex: 1; min-height: 0; display: block; padding: 0; border: .06em solid #e6eaef; border-radius: .5em;
  overflow: hidden; background: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sb-bild img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; pointer-events: none; }
.sb-bild:active { transform: scale(.98); }
.sb-eintrag.neu .sb-bild { opacity: 0; }
.sb-fuss { flex: none; display: flex; align-items: center; gap: .25em; margin-top: .3em; }
.sb-text { flex: 1; min-width: 0; font: 700 .7em/1.2 var(--f-kind); color: var(--grau-text); padding-left: .2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-text .sb-zahl-text { font: 400 1.25em/1 Grundschrift, var(--f-kind); color: var(--tinte); }
.sb-knopf {
  flex: none; width: calc(1.5 * var(--zb-b)); height: calc(1.5 * var(--zb-b)); padding: 0; border: 0;
  border-radius: 50%; background: var(--kasten); color: var(--tinte); display: grid; place-items: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sb-knopf .sym { width: calc(.84 * var(--zb-b)); height: calc(.84 * var(--zb-b)); }
.sb-knopf.sicher { background: var(--rot); color: #fff; }
.sb-leer { margin: .3em .8em; color: var(--grau-text); font-size: .8em; }
:is(.sb-rund, .sb-knopf, .sb-bild, .sb-lasche):focus-visible { outline: 3px solid var(--gelb-dunkel); outline-offset: 2px; }
@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  html[data-design="neu"] #sammelbox { margin: calc(.25 * var(--zb-b)) 0 calc(.9 * var(--zb-b)); }
  html[data-design="neu"] #sammelbox.offen {
    flex-basis: var(--sb-breite); margin-right: calc(1.1 * var(--zb-b)); margin-bottom: calc(.9 * var(--zb-b));
  }
  /* Inhalt in fester Breite: beim Ein- und Ausblenden wird er nur verdeckt, nicht umbrochen */
  .sb-innen { width: var(--sb-breite); }
  .sb-liste { flex-direction: column; overflow-x: hidden; overflow-y: auto; }
  .sb-eintrag { height: auto; width: auto; max-width: none; }
  .sb-bild { flex: none; }
  .sb-bild img { width: 100%; height: auto; }
}

/* Lasche am rechten Rand des Arbeitsbereichs (Position setzt js/sammelbox.js) */
.sb-lasche {
  position: absolute; z-index: 19; right: 0; top: 50%; transform: translateY(-50%);
  width: calc(1.65 * var(--zb-b)); padding: .5em 0 .45em; border: 0; border-radius: .9em 0 0 .9em;
  background: var(--knopf); color: var(--tinte); display: flex; flex-direction: column; align-items: center; gap: .15em;
  font: 700 calc(.75 * var(--zb-b))/1 var(--f-kind); cursor: pointer; box-shadow: var(--schatten-klein);
  -webkit-tap-highlight-color: transparent;
}
.sb-lasche .sym { width: 1.55em; height: 1.55em; }
.sb-lasche[hidden] { display: none; }
html:not([data-design="neu"]) .sb-lasche { display: none !important; }

/* ------------------------------------- Sammelbox, ausführliche Ansicht (archiv.js) -- */
html[data-design="neu"] .archiv-root { background: var(--grund); border-radius: calc(1 * var(--zb-b)); box-shadow: var(--schatten); font-family: var(--f-kind); color: var(--tinte); }
html[data-design="neu"] .archiv-head { background: #fff; color: var(--tinte); min-height: calc(var(--zb) + .6 * var(--zb-b)); padding: 0 calc(.6 * var(--zb-b)); border-bottom: 1px solid var(--linie); }
html[data-design="neu"] .archiv-title { font: 700 calc(1 * var(--zb-b))/1.2 var(--f-kind); }
html[data-design="neu"] .archiv-btn {
  width: calc(2.1 * var(--zb-b)); height: calc(2.1 * var(--zb-b)); min-width: 0; border-radius: 50%;
  background: var(--knopf); color: var(--tinte);
}
html[data-design="neu"] .archiv-btn .sym { width: calc(1.05 * var(--zb-b)); height: calc(1.05 * var(--zb-b)); fill: none; }
html[data-design="neu"] .archiv-btn:active { background: var(--knopf); transform: scale(.95); }
html[data-design="neu"] .archiv-size { accent-color: var(--blau); }
html[data-design="neu"] .archiv-grid { padding: calc(.5 * var(--zb-b)); gap: calc(.5 * var(--zb-b)); }
html[data-design="neu"] .archiv-tile { border-radius: calc(.6 * var(--zb-b)); padding: .3em .3em .25em; box-shadow: var(--schatten-klein); }
html[data-design="neu"] .archiv-img { border-radius: calc(.4 * var(--zb-b)); background: #fff; border: 1px solid #e6eaef; }
.archiv-text { display: block; padding: .3em .2em .05em; font: 400 calc(.8 * var(--zb-b))/1.2 Grundschrift, var(--f-kind); color: var(--tinte); text-align: left; }
html[data-design="neu"] .archiv-empty { font-family: var(--f-kind); color: var(--grau-text); }
html[data-design="neu"] :is(.archiv-dialog, .archiv-action) { background: #fff; border-radius: calc(1 * var(--zb-b)); font-family: var(--f-kind); }
html[data-design="neu"] :is(.archiv-dialog-title, .archiv-action-title) { font-size: calc(.85 * var(--zb-b)); }
html[data-design="neu"] :is(.archiv-dialog-buttons, .archiv-action-buttons) { background: transparent; gap: .4em; padding: 0 1em 1em; }
html[data-design="neu"] :is(.archiv-dialog-buttons, .archiv-action-buttons) button {
  border-radius: 999px; background: var(--knopf); font: 700 calc(.72 * var(--zb-b)) var(--f-kind); color: var(--tinte); min-height: calc(2.1 * var(--zb-b));
}
html[data-design="neu"] .archiv-danger { color: #fff !important; background: var(--rot) !important; }

/* Pfeildarstellung: Kärtchen mit Bild und Wort brauchen etwas mehr Höhe (pfeilview.js, Entwurf 124 px) */
html[data-design="neu"] #pfeilContainer { flex: 0 1 124px; min-height: 64px; }

/* ------------------------------------------------------- Ablauf-Aufnahme -- */
/* js/ablauf.js (wie im Rechenfeld): Während der Aufnahme ein roter Punkt mit Zeit in der Kopfzeile
   (Antippen beendet sie); langes Drücken der Kamera füllt einen roten Ring und startet sie. Beim
   Abspielen sperrt eine unsichtbare Fläche die App, Fingerpunkte und Spuren zeigen, wo gedrückt und
   gezogen wurde. */
html[data-design="neu"] #kopfzeile .ablauf-knopf {
  display: inline-flex; align-items: center; gap: calc(.32 * var(--zb-b)); height: var(--zb); flex: none;
  padding: 0 calc(.62 * var(--zb-b)) 0 calc(.55 * var(--zb-b)); border: 0; border-radius: 999px; cursor: pointer;
  background: #fde7e5; color: #a8231b; font: 700 calc(.78 * var(--zb-b))/1 var(--f-kind); font-variant-numeric: tabular-nums;
}
html[data-design="neu"] #kopfzeile .ablauf-knopf[hidden] { display: none; }
.ablauf-punkt { width: .62em; height: .62em; border-radius: 50%; background: #d93025; animation: ablauf-puls 1.2s ease-in-out infinite; }
.ablauf-stopp { width: .62em; height: .62em; border-radius: 2px; background: currentColor; margin-left: .15em; }
@keyframes ablauf-puls { 50% { opacity: .35; } }
html[data-design="neu"] #btnScreenshot.haelt { animation: ablauf-halten .65s linear forwards; }
@keyframes ablauf-halten { from { box-shadow: inset 0 0 0 0 #d93025; } to { box-shadow: inset 0 0 0 4px #d93025; } }
.ablauf-sperre { position: fixed; inset: 0; z-index: 900; }
.ablauf-finger { position: fixed; inset: 0; z-index: 1100; pointer-events: none; } /* über allem, auch über der Leiste */
.ablauf-spur { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ablauf-spur polyline { fill: none; stroke: rgba(29, 38, 49, .5); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; transition: opacity .7s; }
.ablauf-spur polyline.los { opacity: 0; }
/* Fingerpunkt wie bei „Zeig mal“, aber kräftiger: dunkler Ring mit Mittelpunkt und weißem Saum, damit er
   auf hellen wie auf farbigen Knöpfen deutlich über ihnen liegt. Kurz vor dem Drücken steht er
   schon blass da (blendet ein, ohne Hinbewegung), beim Drücken wird er dunkel, drückt ein, die Welle läuft. */
.ablauf-kreis {
  position: absolute; left: 0; top: 0; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%;
  box-sizing: border-box; background: rgba(255, 255, 255, .3); border: 3.5px solid rgba(29, 38, 49, .55);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 3px 10px rgba(0, 0, 0, .28);
  animation: ablauf-ein .15s ease-out; transition: opacity .6s, background-color .12s, border-color .12s;
}
.ablauf-kreis::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: rgba(29, 38, 49, .45); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
  transition: background-color .12s;
}
.ablauf-kreis::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid rgba(29, 38, 49, .55); opacity: 0; }
.ablauf-kreis.drueckt { border-color: rgba(29, 38, 49, .95); background: rgba(29, 38, 49, .16); animation: ablauf-eindruecken .24s ease-out; }
.ablauf-kreis.drueckt::before { background: rgba(29, 38, 49, .95); }
.ablauf-kreis.drueckt::after { animation: ablauf-welle .7s ease-out forwards; }
.ablauf-kreis.los { opacity: 0; }
@keyframes ablauf-ein { from { opacity: 0; } }
@keyframes ablauf-eindruecken { 40% { scale: .84; } }
@keyframes ablauf-welle { from { opacity: 1; } to { inset: -28px; opacity: 0; } }
.ablauf-leiste {
  /* Über der Kopfzeile (beim Abspielen ohnehin gesperrt): unten lägen die Knöpfe zum Verändern darunter */
  position: fixed; left: 50%; top: max(8px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 910;
  display: flex; align-items: center; gap: 10px; width: min(720px, calc(100vw - 24px)); box-sizing: border-box;
  padding: 7px 10px; border-radius: 999px; background: #fff; box-shadow: var(--schatten), 0 0 0 1px var(--linie); font-family: var(--f-kind);
}
.ablauf-rund {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--knopf); color: var(--tinte);
}
.ablauf-leiste > .ablauf-rund:first-child { background: var(--gruen); color: #fff; }
.ablauf-rund .sym { width: 22px; height: 22px; }
.ablauf-balken {
  position: relative; flex: 1; min-width: 60px; height: 30px; cursor: pointer;
  background: linear-gradient(var(--knopf), var(--knopf)) center / 100% 10px no-repeat; border-radius: 5px;
}
.ablauf-fuellung { position: absolute; left: 0; top: 10px; height: 10px; border-radius: 5px; background: var(--gruen); }
.ablauf-zeit { flex: none; font: 700 15px/1 var(--f-kind); color: var(--grau-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ablauf-pille {
  flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--knopf); color: var(--tinte); font: 700 15px/1 var(--f-kind); padding: 11px 14px; white-space: nowrap;
}
.ablauf-pille .sym { width: 18px; height: 18px; }
@media (max-width: 600px) { .ablauf-pille > span, .ablauf-zeit { display: none; } }
/* Sammelbox: Film-Kärtchen mit Abspiel-Zeichen und Dauer */
.sb-film .sb-bild { position: relative; }
.sb-film-marke {
  position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; pointer-events: none;
  padding: 4px 9px 4px 6px; border-radius: 999px; background: rgba(29, 38, 49, .8); color: #fff; font: 700 12px/1 var(--f-kind);
}
.sb-film-marke .sym { width: 13px; height: 13px; }