/* Zahlendreher — schlicht: dezent einfarbiger Grund, Inhalt in der Mitte, große Flächen, Schrift Avela Text. */

@font-face { font-family: 'Avela Text'; src: url('../assets/fonts/AvelaText-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Avela Text'; src: url('../assets/fonts/AvelaText-Medium.ttf') format('truetype'); font-weight: 500 600; font-display: swap; }
@font-face { font-family: 'Avela Text'; src: url('../assets/fonts/AvelaText-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  --bg: rgb(242, 241, 229);
  --fg: rgb(41, 43, 52);
  --leise: rgba(41, 43, 52, .55);
  --karte: #fff;
  --weiss: #fff;
  --linie: rgba(41, 43, 52, .12);
  --linie-stark: rgba(41, 43, 52, .28);
  --knopf-schatten: 0 1px 3px rgba(41, 43, 52, .09);   /* weiße Knöpfe: kein Ring, nur ein Hauch Schatten */
  /* Stellenfarben wie in „Zahlen und Stellenwerte“ */
  --e: rgb(63, 139, 129);
  --z: rgb(26, 71, 102);
  --h: rgb(153, 39, 39);
  --ok: rgb(90, 160, 95);
  --ok-bg: rgb(220, 240, 205);
  --err: rgb(214, 88, 88);
  --err-bg: rgb(255, 222, 222);
  --hl: rgb(236, 159, 11);
  --hl-bg: rgb(253, 241, 214);
  --holz: rgb(230, 196, 138);
  --holz-rand: rgb(150, 110, 55);
  --schrift: 'Avela Text', 'Avenir Next', system-ui, sans-serif;
  --ui: 'Avela Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --rand-oben: max(env(safe-area-inset-top), var(--fensterknoepfe-hoehe, 0px));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font-family: var(--ui); font-size: 17px;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation; overscroll-behavior: none;
}
#app { min-height: 100%; display: flex; flex-direction: column;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { opacity: .35; cursor: default; }
button:focus-visible { outline: 3px solid var(--hl); outline-offset: 2px; }
.icon { width: 1.4em; height: 1.4em; display: block; flex: none; }
h2 { font-size: 15px; font-weight: 500; color: var(--leise); text-transform: uppercase; letter-spacing: .06em; margin: 28px 0 8px; }

/* ------------------------------------------------ Knöpfe */
/* Symbolknöpfe: Symbol in einem hellen Kreis */
.rund { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--weiss);
  box-shadow: var(--knopf-schatten); transition: transform .12s ease; }
.rund .icon { width: 24px; height: 24px; }
.rund.klein { width: 42px; height: 42px; }
.rund.klein .icon { width: 21px; height: 21px; }
.rund:active { transform: scale(.92); background: var(--karte); }
.leise { color: var(--leise); }
.rund.leise { color: rgba(41, 43, 52, .72); }
.primaer {
  min-height: 60px; padding: 0 30px; border-radius: 999px; background: var(--fg); color: #fff;
  font-size: 21px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.primaer .icon { width: 28px; height: 28px; }
.primaer:active { transform: scale(.97); }
.chip {
  min-height: 48px; padding: 6px 16px; border-radius: 16px; background: var(--weiss);
  box-shadow: var(--knopf-schatten); display: inline-flex; align-items: center; gap: 8px; font-size: 17px;
}
/* auf weißen Karten trägt der Chip den Hintergrund statt eines Rands */
:is(.karte, .ebene-karte, .meldung-karte) :is(.chip:not(.an), .rund) { background: var(--bg); box-shadow: none; }
.chip.an { box-shadow: 0 0 0 2.5px var(--fg); font-weight: 500; }
.chip-icon .icon { width: 24px; height: 24px; }
.segmente { display: inline-flex; background: var(--karte); border-radius: 999px; padding: 4px; flex-wrap: wrap; justify-content: center; }
.segment { min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 17px; white-space: nowrap; }
.segment.an { background: var(--fg); color: #fff; font-weight: 500; }
.segmente.klein .segment { min-height: 40px; padding: 0 14px; font-size: 15px; }
@media (max-width: 480px) { .segmente.klein .segment { padding: 0 11px; font-size: 14px; } }

/* ------------------------------------------------ Kopfzeile */
.kopf { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; min-height: 60px;
  padding: calc(var(--rand-oben) + 6px) 8px 0 max(8px, var(--fensterknoepfe-breite, 0px)); }
.kopf-mitte { display: flex; justify-content: center; }
.kopf-titel { font-size: 18px; font-weight: 500; color: var(--leise); }
.kopf-rechts { display: flex; justify-content: flex-end; }

/* ------------------------------------------------ Start */
.start { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(16px, 3vh, 28px);
  padding: calc(var(--rand-oben) + 20px) 16px 28px; }
.start-ecke { position: absolute; top: calc(var(--rand-oben) + 12px); right: max(14px, env(safe-area-inset-right)); display: flex; gap: 10px; z-index: 2; }
.start-kopf { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.logo { position: relative; width: 1.24em; height: 1em; font: 400 clamp(76px, 15vmin, 128px)/1 var(--schrift); cursor: pointer; }
.logo-ziffer { position: absolute; top: 0; transition: left .75s cubic-bezier(.55, 0, .25, 1), color .75s ease; }
.logo-ziffer:first-child { left: 0; color: var(--z); animation: bogen-oben-a .75s cubic-bezier(.55, 0, .25, 1); }
.logo-ziffer:last-child { left: .64em; color: var(--e); animation: bogen-unten-a .75s cubic-bezier(.55, 0, .25, 1); }
.logo.gedreht .logo-ziffer:first-child { left: .64em; color: var(--e); animation-name: bogen-oben-b; }
.logo.gedreht .logo-ziffer:last-child { left: 0; color: var(--z); animation-name: bogen-unten-b; }
@keyframes bogen-oben-a { 50% { transform: translateY(-.2em) scale(1.04); } }
@keyframes bogen-oben-b { 50% { transform: translateY(-.2em) scale(1.04); } }
@keyframes bogen-unten-a { 50% { transform: translateY(.14em) scale(.96); } }
@keyframes bogen-unten-b { 50% { transform: translateY(.14em) scale(.96); } }
.app-name { font: 500 22px/1.2 var(--schrift); color: var(--fg); letter-spacing: .01em; }
.zr-wahl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.zr-label { font-size: 16px; color: var(--leise); }
.zr .segment { min-width: 72px; font-size: 19px; }

.start-kacheln { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.95fr) minmax(0, 1fr); gap: 20px; width: min(1140px, 100%); align-items: stretch; }
.karte { background: var(--weiss); border-radius: 30px; padding: 26px 22px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  box-shadow: 0 1px 2px rgba(41, 43, 52, .05), 0 12px 32px rgba(41, 43, 52, .07); transition: transform .18s ease, box-shadow .18s ease; }
button.karte { justify-content: center; }
button.karte:active { transform: scale(.975); box-shadow: 0 1px 2px rgba(41, 43, 52, .05), 0 4px 14px rgba(41, 43, 52, .06); }
.karte-titel { font: 500 25px/1.2 var(--schrift); }
.karte-unter { font-size: 15px; color: var(--leise); text-align: center; }
.bild-entdecken { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 8px; }
.be-zahl .mini-zahl { font-size: 56px; }
.bild-detektiv { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.bd-zahl { font: 400 46px/1 var(--schrift); display: inline-flex; }
.bd-lupe { position: relative; width: 118px; height: 118px; }
.bd-lupe::before { content: ''; position: absolute; left: 22px; top: 22px; width: 59px; height: 59px; border-radius: 50%; background: rgba(236, 159, 11, .14); }
.bd-lupe .bd-zahl { position: absolute; left: 51.5px; top: 51.5px; transform: translate(-50%, -50%); font-size: 36px; }
.bd-glas { position: absolute; inset: 0; color: var(--fg); }
.bd-glas .icon { width: 100%; height: 100%; stroke-width: 1.5; }

.karte-ueben { gap: 12px; padding: 22px 22px 18px; }
.wahl-block { display: flex; align-items: center; gap: 12px; width: 100%; }
.wahl-label { width: 38px; flex: none; text-align: right; font-size: 15px; color: var(--leise); }
.wahl-reihe { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
/* Gewählt: in der Einerfarbe getönt, ohne schweren Rahmen; nicht gewählt: blass auf hellem Grund */
.wahl { position: relative; background: color-mix(in srgb, var(--bg) 55%, var(--weiss)); border-radius: 20px; padding: 12px 6px 10px; min-height: 108px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 6px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.wahl:active { transform: scale(.96); }
.wahl.an { background: color-mix(in srgb, var(--e) 16%, var(--weiss)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--e) 38%, transparent); }
.wahl-bild { flex: 1; display: grid; place-items: center; width: 100%; transition: opacity .15s ease; }
.wahl:not(.an) .wahl-bild { opacity: .38; }
.wahl-name { font-size: 14px; color: var(--leise); transition: color .15s ease; }
.wahl:not(.an) .wahl-name { color: rgba(41, 43, 52, .4); }
.wahl.an .wahl-name { color: var(--fg); }
.wahl-haken { position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; border-radius: 50%; background: var(--e); color: #fff;
  display: grid; place-items: center; transform: scale(0); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.wahl-haken .icon { width: 15px; height: 15px; stroke-width: 3; }
.wahl.an .wahl-haken { transform: scale(1); }
.wahl-flaeche { position: relative; width: 100%; display: flex; flex-direction: column; }
.wahl-luecke { height: 58px; }
.pfeile { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; color: var(--fg); opacity: .42; }
.pfeil { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mini-zahl { font: 400 42px/1 var(--schrift); display: inline-flex; }
.mini-wort { font: 400 15px/1.15 var(--schrift); text-align: center; overflow-wrap: anywhere; padding: 0 2px; }
.mini-icon .icon { width: 40px; height: 40px; stroke-width: 1.6; }
.mini-material { display: block; overflow: visible; }
.mini-material .raster { stroke: rgba(255, 255, 255, .5); stroke-width: .07; }
.los-zeile { display: flex; justify-content: center; margin-top: 4px; }
.los { min-width: 180px; }
.hinweis-klein { font-size: 14px; color: var(--leise); min-height: 1.2em; text-align: center; }
@media (max-width: 860px) {
  .start-kacheln { grid-template-columns: 1fr 1fr; }
  .karte-ueben { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 480px) {
  .start { padding-top: calc(var(--rand-oben) + 44px); }
  .karte { padding: 18px 12px; border-radius: 24px; }
  .karte-ueben { padding: 16px 12px 14px; }
  .wahl-block { gap: 6px; }
  .wahl-label { width: 30px; font-size: 13px; }
  .wahl-reihe { gap: 7px; }
  .wahl { min-height: 86px; border-radius: 16px; padding: 8px 3px 7px; }
  .mini-zahl { font-size: 32px; }
  .mini-wort { font-size: 10.5px; }
  .mini-icon .icon { width: 30px; height: 30px; }
  .wahl-name { font-size: 11.5px; }
  .wahl-luecke { height: 46px; }
  .bd-zahl { font-size: 34px; }
  .bd-lupe { transform: scale(.8); margin: -12px; }
  .be-zahl .mini-zahl { font-size: 42px; }
  .karte-titel { font-size: 21px; }
  .karte-unter { font-size: 13px; }
  /* alles auf einen Blick: kleineres Logo, knappe Abstände, Entdecken/Detektiv ohne Untertitel */
  .start { gap: 14px; padding-top: calc(var(--rand-oben) + 30px); padding-bottom: 18px; }
  .logo { font-size: 60px; }
  .app-name { font-size: 19px; }
  .karte-entdecken, .karte-detektiv { padding: 14px 10px 12px; gap: 6px; }
  .karte-entdecken .karte-unter, .karte-detektiv .karte-unter { display: none; }
  .bild-entdecken { gap: 6px; margin-bottom: 2px; --mm-h: 40px; }
  .be-zahl .mini-zahl { font-size: 32px; }
  .bild-detektiv { margin-bottom: 2px; height: 76px; }
  .bd-lupe { transform: scale(.66); margin: -20px; }
}

/* ------------------------------------------------ Zahl und Wort */
.zahlanzeige { font: 400 clamp(56px, 12vmin, 140px)/1 var(--schrift); display: flex; justify-content: center; gap: .04em; }
.zahlanzeige.gross { font-size: clamp(76px, 17vmin, 190px); }
.zahlanzeige.riesig { font-size: clamp(80px, 18vmin, 200px); }
.zahlanzeige .ziffer { position: relative; display: inline-flex; flex-direction: column; align-items: center; transition: opacity .18s, transform .18s; }
.zahlanzeige .ziffer.gruppe { margin-left: .28em; }
.zahlanzeige .ziffer .kuerzel { font: 500 clamp(14px, 2.6vmin, 22px)/1 var(--ui); opacity: .8; margin-bottom: .1em; }
/* Beim Sprechen: Die gemeinte Ziffer bekommt einen Leuchtfleck, die anderen bleiben, wie sie sind –
   würden sie blass, schaute man genau dorthin, wo sich etwas ändert (zur 4 statt zur 7) */
.zahlanzeige .zw { display: block; position: relative; isolation: isolate; }
.zahlanzeige .zw:not(.zw-alt)::before { content: ''; position: absolute; inset: .04em -.1em -.02em; z-index: -1; border-radius: .2em;
  background: var(--hl-bg); box-shadow: inset 0 0 0 .035em rgba(236, 159, 11, .7); opacity: 0; transform: scale(.82);
  transition: opacity .18s, transform .22s cubic-bezier(.3, 1.4, .5, 1); }
.zahlanzeige .ziffer.an .zw::before { opacity: 1; transform: none; }
.zahlanzeige .zw-alt { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; pointer-events: none; }
.zahlanzeige.mini { font-size: 30px; }
.wortanzeige { font: 400 clamp(26px, 5.2vmin, 54px)/1.25 var(--schrift); text-align: center; overflow-wrap: anywhere; width: 100%; }
.wortanzeige.gross { font-size: clamp(30px, 6.5vmin, 66px); }
.wortanzeige.neben { font-size: .62em; opacity: .85; margin-top: .35em; }
.woerter { display: flex; flex-direction: column; align-items: center; width: 100%; font: 400 clamp(26px, 5.2vmin, 54px)/1.25 var(--schrift); }
.woerter .wortanzeige:not(.neben) { font-size: 1em; }
.teil { transition: background-color .18s, box-shadow .18s; border-radius: .18em; text-decoration: underline transparent .08em; text-underline-offset: .15em; }
.wortanzeige.fugen .teil { margin: 0 .05em; }
/* wie bei den Ziffern: Der gemeinte Wortteil wird wie mit dem Textmarker hinterlegt, nichts wird blass */
.wortanzeige.hervorhebung .teil.an, .wortanzeige.hervorhebung .gruppe-teil.an { background-color: var(--hl-bg); box-shadow: 0 0 0 .06em var(--hl-bg); }
.wortanzeige.hervorhebung .gruppe-teil.an .teil { background-color: transparent; box-shadow: none; }
.teil.jetzt, .gruppe-teil.jetzt { text-decoration-color: var(--hl); }
.gruppe-teil .teil { text-decoration: none; }

/* ------------------------------------------------ Material */
.material { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.entdecken-material, .verbund-material, .reiz-material, .hilfsmaterial, .antwort-material, .einst-vorschau { position: relative; }
.material .reihe { display: flex; align-items: stretch; gap: 22px; }
.material .spalte { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; transition: opacity .2s; }
.material .spalte .kopf { margin-bottom: auto; }
.material .kopf { font: 500 19px/1 var(--ui); min-height: 18px; padding: 0; display: block; }
.material .koerper { border-radius: 12px; transition: background-color .18s, box-shadow .18s; }
.material.hervorhebung .spalte.an > .koerper { background-color: var(--hl-bg); box-shadow: 0 0 0 8px var(--hl-bg), 0 0 0 10px rgba(236, 159, 11, .5); }
.material.hervorhebung .gemischt g[data-stelle].an { filter: drop-shadow(0 0 3px rgba(236, 159, 11, .95)) drop-shadow(0 0 6px rgba(236, 159, 11, .6)); }
.material .kopf, .material g[data-stelle] { transition: opacity .18s, filter .18s; }
.material .spalte.puls .koerper { animation: puls .75s ease-in-out; }
.material .spalte.wackeln { animation: wackeln .35s; }
.material.tafel .reihe { gap: 0; background: var(--weiss); border-radius: 12px; box-shadow: 0 0 0 2px var(--linie-stark); align-items: stretch; }
.material.tafel .spalte { padding: 0 10px 10px; gap: 10px; justify-content: flex-start; }
.material.tafel .spalte + .spalte { border-left: 2px solid var(--linie-stark); }
.material.tafel .kopf { width: calc(100% + 20px); text-align: center; padding: 8px 0; border-bottom: 2px solid var(--linie-stark); }
.material.tafel .knoepfe { margin-top: auto; }
.mat-svg { display: block; overflow: visible; transform-origin: 50% 100%; }
:is(.mat-svg, .flug-teil) .raster { stroke: rgba(255, 255, 255, .5); stroke-width: .06; }
.material.neutral :is(.mat-svg, .flug-teil) .raster { stroke: rgba(80, 50, 10, .3); }
:is(.mat-svg, .flug-teil) .rahmen { fill: none; stroke: var(--linie-stark); stroke-width: .08; }
:is(.mat-svg, .flug-teil) .rahmen.voll { fill: #fff; }
/* Bündeln/Entbündeln: fliegende Teile über dem Material */
.material .flug { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.material .flug-teil { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: visible; will-change: transform; }
/* Legen-Knöpfe in einer Reihe, weiß ohne Rand: ▮ blass und rot durchgestrichen (weg), ▮ und ▮▮▮▮▮
   (dazu, auch zum Herausziehen); Größe --knopf aus dem Platz je Spalte (layout()), in engen Spalten
   untereinander */
.knoepfe { display: grid; grid-template-columns: auto auto auto; gap: calc(var(--knopf, 16px) * .5); justify-content: center; align-items: center;
  width: max-content; }
.legen-knopf { display: inline-flex; align-items: center; justify-content: center; min-width: 3.6em; height: 3.6em; padding: 0 .8em;
  border-radius: 1.8em; background: var(--weiss); box-shadow: var(--knopf-schatten); font-size: var(--knopf, 16px); transition: transform .12s ease; }
.legen-knopf:active { transform: scale(.94); }
.legen-knopf .durch { position: relative; display: grid; place-items: center; min-width: 1.6em; min-height: 1.6em; }
.legen-knopf .durch .mini-teile { opacity: .45; }
.legen-knopf .durch::after { content: ''; position: absolute; left: 50%; top: 50%; width: 2.3em; height: .2em; border-radius: .1em;
  background: var(--err); box-shadow: 0 0 0 .06em var(--weiss); transform: translate(-50%, -50%) rotate(-40deg); }
.legen-knopf.dazu { touch-action: none; }
/* Die Knöpfe sitzen mittig auf dem unteren Rand ihrer Stelle: von hier wird eingefügt. Das Material
   lässt unten Platz für die überstehende Hälfte. */
.material.mit-knoepfen { padding-bottom: calc(var(--knopf, 16px) * 1.8 + 6px); }
.material.eng.mit-knoepfen { padding-bottom: calc(var(--knopf, 16px) * 1.6 + 6px); }
.material.legen .knoepfe { margin-bottom: calc(var(--knopf, 16px) * -1.8 - 14px); }
.material.eng.legen .knoepfe { margin-bottom: calc(var(--knopf, 16px) * -1.6 - 12px); }
.material.tafel .knoepfe { margin-bottom: calc(var(--knopf, 16px) * -1.8 - 10px); }
.material.tafel .legen-knopf { background: color-mix(in srgb, var(--stelle, var(--fg)) 12%, var(--weiss)); }   /* weiße Tafel */
.material.eng.tafel .knoepfe { margin-bottom: calc(var(--knopf, 16px) * -1.6 - 8px); }
.zug-geist { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(41, 43, 52, .25)); }
.zug-geist .mini-teile { display: block; }
.mini-teile { display: block; flex: none; overflow: visible; }
.material.eng .knoepfe { grid-template-columns: auto; }
.material.eng .legen-knopf { height: 3.2em; min-width: 3.2em; padding: 0 .6em; }
.material.eng .legen-knopf.fuenf { order: -2; }
.material.eng .legen-knopf.dazu:not(.fuenf) { order: -1; }
.material.eng.legen .reihe { gap: 8px; }
.material.eng.legen .spalte { min-width: 64px; padding: 10px 8px 12px; border-radius: 18px; }
.material.eng.tafel .spalte { padding: 0 4px 8px; }
.material.eng.tafel .kopf { width: calc(100% + 8px); }
.material.legen .reihe { gap: 14px; align-self: stretch; }   /* Felder nutzen die ganze Höhe: viel Ablagefläche */
.material.legen .spalte { min-width: 124px; padding: 12px 15px 14px; border-radius: 22px; background: var(--weiss);
  background: color-mix(in srgb, var(--stelle, var(--weiss)) 8%, var(--weiss)); box-shadow: 0 1px 2px rgba(41, 43, 52, .06); }
.material.richtig .reihe { filter: drop-shadow(0 0 6px var(--ok)); }
.material.falsch { animation: wackeln .35s; }
.material.gesperrt .knoepfe { visibility: hidden; }
.material.korrigiert.legen .spalte { background: color-mix(in srgb, var(--hl) 12%, var(--weiss)); transition: background .3s; }
@keyframes puls { 0%, 100% { transform: scale(1); filter: none; } 45% { transform: scale(1.06); filter: drop-shadow(0 0 8px var(--hl)); } }
@keyframes wackeln { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ------------------------------------------------ Entdecken */
.entdecken { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 4px 16px 18px; min-height: 0; }
.entdecken-oben { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.entdecken-oben .zahlanzeige .ziffer { cursor: pointer; }
.entdecken-oben .woerter { cursor: pointer; }
.entdecken-material { flex: 0 1 clamp(260px, 46vh, 520px); width: min(1100px, 100%); min-height: 200px; }
.werkzeuge { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.werkzeug { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 76px; padding: 4px; color: var(--fg); }
.werkzeug > span:first-child { width: 56px; height: 56px; border-radius: 50%; background: var(--weiss); display: grid; place-items: center;
  box-shadow: var(--knopf-schatten); transition: transform .12s ease; }
.werkzeug .icon { width: 27px; height: 27px; }
.werkzeug-name { font-size: 13px; color: var(--leise); }
.werkzeug:active > span:first-child { transform: scale(.92); background: var(--karte); }

/* ------------------------------------------------ Ebenen und Meldungen */
.ebene, .meldung { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  padding: calc(var(--rand-oben) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px); background: rgba(242, 241, 229, .86);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: einblenden .18s ease-out; }
.ebene-karte, .meldung-karte { position: relative; background: var(--weiss); border-radius: 28px; padding: 28px 24px 24px;
  max-width: min(1000px, 100%); max-height: 100%; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 18px;
  box-shadow: 0 0 0 1px var(--linie), 0 12px 40px rgba(0, 0, 0, .10); }
.ebene-zu { position: absolute; top: 8px; right: 8px; }
.ebene-text, .meldung-text { font-size: 21px; line-height: 1.35; text-align: center; margin: 0; max-width: 34em; }
.meldung.hinweis { align-items: flex-end; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; }
.meldung.hinweis .meldung-karte { pointer-events: auto; border-top: 6px solid var(--hl); }
.meldung.richtig .meldung-karte { border-top: 6px solid var(--ok); }
.meldung.loesung .meldung-karte { border-top: 6px solid var(--z); }
.meldung.korrektur .meldung-karte { border-top: 6px solid var(--hl); }
.meldung-kopf .haken { color: var(--ok); }
.meldung-kopf .icon { width: 44px; height: 44px; stroke-width: 2.6; }
.meldung-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.weiter { width: 64px; height: 64px; padding: 0; position: relative; }
/* Ring füllt sich, bis die nächste Aufgabe kommt (Dauer = NACHLAUF in ueben.js) */
@property --fortschritt { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.weiter.zaehlt::before { content: ''; position: absolute; inset: -7px; border-radius: 50%;
  background: conic-gradient(var(--ok) var(--fortschritt), var(--linie) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  animation: fortschritt 4.5s linear forwards; }
@keyframes fortschritt { to { --fortschritt: 100%; } }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }

.verbund { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.verbund-kopf { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.verbund.kompakt .zahlanzeige { font-size: clamp(54px, 10vmin, 96px); }
/* Karten in der Rückmeldung: Platz für alle Karten untereinander, bei vielen Stellen kleiner */
.verbund .stellenkarten { font-size: min(clamp(40px, 7vmin, 72px), calc(30vh / (var(--zeilen, 2) * 1.36))); cursor: pointer; }
.verbund.kompakt .woerter, .verbund.kompakt .wortanzeige:not(.neben) { font-size: clamp(22px, 4vmin, 38px); }
.verbund-material { width: min(560px, 80vw); height: clamp(120px, 24vh, 230px); display: flex; }
.vergleich { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.vergleich-teil { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vergleich-titel { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 16px; color: var(--leise); }
.vergleich-marke { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--fg); }
.vergleich-marke.ok { background: var(--ok-bg); color: var(--ok); }
.vergleich-marke .icon { width: 20px; height: 20px; stroke-width: 2.4; }
.vergleich-mitte { align-self: center; color: var(--leise); }
.vergleich-mitte .icon { width: 40px; height: 40px; }
.vergleich-mitte.gleich { font: 400 52px/1 var(--schrift); padding-bottom: 40px; }
.vergleich .verbund-material { width: min(400px, 80vw); }
.vergleich .verbund .stellenkarten { font-size: min(clamp(34px, 5.8vmin, 60px), calc(22vh / (var(--zeilen, 2) * 1.36))); }
.verbund.eigene { transform: scale(.92); transform-origin: top center; }
@media (max-width: 480px) {
  /* beide Zahlen nebeneinander: Vergleich auf einen Blick, Weiter-Knopf bleibt sichtbar */
  .vergleich { flex-wrap: nowrap; gap: 10px; width: 100%; }
  .vergleich-teil { flex: 1 1 0; min-width: 0; }
  .vergleich .verbund-material { width: 100%; height: clamp(90px, 18vh, 150px); }
  .vergleich .verbund.kompakt .zahlanzeige { font-size: 48px; }
  .vergleich .verbund .stellenkarten { font-size: min(30px, calc(20vh / (var(--zeilen, 2) * 1.36))); }
  .vergleich .verbund.kompakt .woerter, .vergleich .verbund.kompakt .wortanzeige:not(.neben) { font-size: 18px; }
  .vergleich-mitte { display: none; }
  .ebene-karte, .meldung-karte { padding: 22px 12px 18px; gap: 14px; }
  .ebene-text, .meldung-text { padding-inline: 40px; font-size: 19px; }
}

/* ------------------------------------------------ Üben */
.fortschritt { --punkt: clamp(15px, 2.3vmin, 21px); display: flex; gap: calc(var(--punkt) * .55) var(--punkt); flex-wrap: wrap; justify-content: center; }
/* Fünfergruppen: innen enger, zwischen den Gruppen weiter; umbrochen wird nur zwischen Gruppen */
.fortschritt .fuenfer { display: flex; gap: calc(var(--punkt) * .4); }
:is(.fortschritt, .runde-aufgabe) .punkt { display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--weiss); font-weight: 700; line-height: 1; }
:is(.fortschritt, .runde-aufgabe) .punkt .icon { width: 74%; height: 74%; stroke-width: 3.2; }
.fortschritt .punkt { width: var(--punkt); height: var(--punkt); border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--linie-stark); font-size: calc(var(--punkt) * .72); }
.fortschritt .punkt.jetzt { box-shadow: inset 0 0 0 calc(var(--punkt) * .2) var(--fg); animation: punkt-auf .22s cubic-bezier(.2, .8, .2, 1); }
.fortschritt .punkt.neu { animation: punkt-auf .26s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes punkt-auf { from { transform: scale(.4); } }
.fortschritt .punkt.direkt { background: var(--ok); box-shadow: none; }
.fortschritt .punkt.hilfe { background: var(--hl); box-shadow: none; }
.fortschritt .punkt.offen { box-shadow: inset 0 0 0 calc(var(--punkt) * .2) var(--hl); }
/* Kopfzeile beim Üben: Bildchen von → nach und Punkte nebeneinander; passt es nicht, untereinander */
.kopf-uebung { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px clamp(18px, 4vw, 44px); padding: 4px 0; }
.kopf-uebung > .fortschritt { flex: 0 0 auto; max-width: 100%; }
.ueben { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 4vh, 44px); padding: 8px 16px 28px; }
.auftrag { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 19px; color: var(--leise); text-align: center; min-height: 1.3em; cursor: pointer; max-width: 640px; }
/* Die Anweisung steht oben unter der Kopfzeile; die Aufgabe bleibt in der Mitte des übrigen Raums */
.ueben > .auftrag { margin-top: clamp(2px, 1.2vh, 14px); }
.ueben > .aufgabe-oben { margin-top: auto; }
.ueben > .aufgabe-unten { margin-bottom: auto; }
.auftrag-bilder { display: flex; align-items: center; gap: 8px; --mm-h: 28px; }
.auftrag-bilder:active { transform: scale(.96); }
.auftrag-bild { min-width: 60px; height: 46px; padding: 0 10px; border-radius: 14px; background: var(--weiss); display: grid; place-items: center;
  box-shadow: 0 1px 2px rgba(41, 43, 52, .06); color: var(--fg); }
.auftrag-bild .mini-zahl { font-size: 30px; }
.auftrag-bild .mini-wort { font-size: 12px; }
.auftrag-bild .mini-icon .icon { width: 28px; height: 28px; }
.auftrag-pfeil { color: var(--leise); }
.auftrag-pfeil .icon { width: 20px; height: 20px; }
@media (max-width: 480px) {
  .auftrag-bilder { --mm-h: 24px; gap: 6px; }
  .auftrag-bild { min-width: 52px; height: 40px; padding: 0 8px; border-radius: 12px; }
  .auftrag-bild .mini-zahl { font-size: 26px; }
  .auftrag-bild .mini-wort { font-size: 11px; }
  .auftrag-bild .mini-icon .icon { width: 24px; height: 24px; }
}
.streifen { display: flex; align-items: center; justify-content: center; gap: 10px 14px; flex-wrap: wrap; padding: 10px 18px; border-radius: 18px;
  color: var(--fg); font-size: 19px; line-height: 1.3; background: var(--weiss); box-shadow: inset 4px 0 0 var(--hl), 0 1px 2px rgba(41, 43, 52, .06); }
.streifen.korrektur { background: var(--hl-bg); box-shadow: none; }
.streifen b { font-weight: 600; }
.streifen-symbol .icon { width: 26px; height: 26px; color: var(--hl); }
.streifen .chip { min-height: 44px; }
.aufgabe-oben { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.aufgabe-unten { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.reiz-material { width: min(900px, 100%); height: clamp(150px, 30vh, 320px); display: flex; }
.hilfsmaterial { width: min(520px, 100%); height: clamp(90px, 16vh, 160px); display: flex; opacity: .95; }
.antwort-material { width: min(1000px, 100%); height: clamp(200px, 44vh, 540px); display: flex; }
.hoeren { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.abspielen { width: 128px; height: 128px; border-radius: 50%; background: var(--karte); display: grid; place-items: center; }
.abspielen .icon { width: 60px; height: 60px; stroke-width: 1.6; }
.abspielen.klein { width: 84px; height: 84px; }
.abspielen.klein .icon { width: 40px; height: 40px; }
.abspielen.spielt { animation: ring 1.2s ease-out infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(236, 159, 11, .55); } 100% { box-shadow: 0 0 0 22px rgba(236, 159, 11, 0); } }
.zerlegt-knopf { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; padding: 8px 16px 8px 12px; border-radius: 999px;
  background: var(--weiss); box-shadow: var(--knopf-schatten); }
.zerlegt-knopf .icon { width: 22px; height: 22px; }
.pruefen { width: 76px; height: 76px; padding: 0; }
.pruefen .icon { width: 36px; height: 36px; stroke-width: 2.4; }
.pruefen.ok { background: var(--ok); transition: background .2s; }
.runde-fertig { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.runde-punkte { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 10px; max-width: 640px; }
.runde-aufgabe { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 52px; }
.runde-aufgabe:nth-child(5n):not(:last-child) { margin-right: 14px; }      /* Fünfergruppen wie in der Leiste */
.runde-aufgabe .punkt { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--linie-stark); font-size: 20px; }
.runde-aufgabe .punkt.direkt { background: var(--ok); box-shadow: none; }
.runde-aufgabe .punkt.hilfe { background: var(--hl); box-shadow: none; }
.runde-aufgabe .punkt.offen { box-shadow: inset 0 0 0 3.5px var(--hl); }
.zweit { min-height: 60px; padding: 0 30px; border-radius: 999px; background: var(--weiss); font-size: 21px; font-weight: 500;
  box-shadow: var(--knopf-schatten); display: inline-flex; align-items: center; }
.zweit:active { transform: scale(.97); }
.gross-haken { color: var(--ok); }
.gross-haken .icon { width: 96px; height: 96px; stroke-width: 2; }

/* Schreibfeld */
.schreibfeld { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.feld-links { display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* Breite Bildschirme: Tastatur neben den Kästchen, damit alles ohne Scrollen passt */
@media (min-width: 700px) and (min-aspect-ratio: 1/1) { .schreibfeld.mit-tasten { flex-direction: row; gap: 36px; } }
.kaestchen-reihe { display: flex; gap: var(--l); justify-content: center; }
.kaestchen-spalte { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.kaestchen-spalte .kuerzel { font: 500 19px/1 var(--ui); color: var(--leise); }
/* so groß, wie Breite und Höhe erlauben: Kinder schreiben Ziffern 2–3 cm groß */
.schreibfeld { --l: clamp(8px, 1.6vw, 16px);
  --k: clamp(44px, min(calc((100vw - 48px - (var(--n, 2) - 1) * var(--l)) / var(--n, 2)), calc(22vh / 1.18)), 160px); }
.schreibfeld.frei { --k: clamp(34px, min(calc((100vw - 40px - (var(--n, 4) - 1) * var(--l)) / var(--n, 4)), 18vh), 118px); }
.kaestchen { position: relative; width: var(--k); height: calc(var(--k) * 1.18); background: var(--weiss); border-radius: 16px;
  box-shadow: 0 0 0 3px var(--rand, var(--linie-stark)); touch-action: none; overflow: hidden; transition: box-shadow .2s, background .2s; }
.frei .kaestchen { border-radius: 4px; box-shadow: 0 0 0 1.5px var(--linie-stark);
  background-image: linear-gradient(var(--linie) 1px, transparent 1px), linear-gradient(90deg, var(--linie) 1px, transparent 1px);
  background-size: 50% 50%; background-position: -1px -1px; }
.kaestchen canvas { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .3s; }
.kaestchen .erkannt { position: absolute; inset: 0; display: grid; place-items: center; font: 400 calc(var(--k) * .86)/1 var(--schrift); pointer-events: none; }
.kaestchen.erkannt-neu canvas { opacity: .25; }
.kaestchen.unsicher .erkannt { opacity: .55; }
.kaestchen.leuchtet { box-shadow: 0 0 0 3px var(--rand, var(--linie-stark)), 0 0 0 10px rgba(236, 159, 11, .55); }
.mit-tasten .kaestchen.gewaehlt { box-shadow: 0 0 0 3px var(--rand, var(--linie-stark)), 0 0 0 8px rgba(41, 43, 52, .16); }
.schreibfeld.richtig .kaestchen { background: var(--ok-bg); }
.schreibfeld.korrigiert .kaestchen { background: var(--hl-bg); }
.schreibfeld.fliegt .kaestchen { overflow: visible; }
.schreibfeld.fliegt .kaestchen-spalte, .schreibfeld.fliegt .kaestchen { z-index: 1; }
.schreibfeld.falsch .kaestchen-reihe, .wortbausteine.falsch .wort-zeile { animation: wackeln .35s; }
.schreibfeld.gesperrt, .wortbausteine.gesperrt { pointer-events: none; }
.schreibfeld.gesperrt :is(.tastatur, .feld-werkzeuge), .wortbausteine.gesperrt .vorrat { opacity: .35; transition: opacity .2s; }
.feld-werkzeuge { display: flex; gap: 6px; }
.feld-werkzeuge button { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--weiss);
  box-shadow: var(--knopf-schatten); }
.feld-werkzeuge .icon { width: 23px; height: 23px; }
.tastatur { display: none; }
.mit-tasten .tastatur { display: grid; grid-template-columns: repeat(3, 76px); gap: 8px; }
.schreibfeld.mit-tasten { --k: clamp(64px, 13vmin, 124px); }
.schreibfeld.frei.mit-tasten { --k: clamp(44px, min(10vmin, calc((100vw - 90px) / 8)), 96px); }
.aufgabe-unten:has(.schreibfeld.mit-tasten) > .pruefen { display: none; }
.taste { height: 56px; border-radius: 16px; background: var(--karte); font: 400 32px/1 var(--schrift); display: grid; place-items: center; }
.taste.loeschen { font-family: var(--ui); font-size: 24px; color: var(--leise); }
.taste.fertig { background: var(--fg); color: #fff; }
.taste.fertig .icon { width: 30px; height: 30px; stroke-width: 2.4; }
.taste:active { background: rgba(0, 0, 0, .06); }

/* Wortbausteine */
.wortbausteine { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.wort-zeile { min-height: 72px; min-width: min(560px, 90%); padding: 8px; border-bottom: 3px solid var(--linie-stark);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; transition: gap .2s ease; }
.vorrat { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 760px; }
.stein { min-height: 58px; padding: 0 18px; border-radius: 14px; background: var(--karte); font: 400 clamp(24px, 4vmin, 34px)/1 var(--schrift); }
.stein.benutzt { opacity: .2; }
.stein.gelegt { box-shadow: 0 0 0 1.5px var(--linie-stark); }
.wortbausteine.richtig .wort-zeile { border-color: var(--ok); gap: 0; }
.wortbausteine.richtig .stein.gelegt, .wortbausteine.korrigiert .stein.gelegt { border-radius: 0; box-shadow: none; transition: border-radius .2s, background .2s; }
.wortbausteine.richtig .stein.gelegt { background: var(--ok-bg); }
.wortbausteine.korrigiert .stein.gelegt { background: var(--hl-bg); }
.wortbausteine:is(.richtig, .korrigiert) .stein.gelegt:first-child { border-top-left-radius: 14px; border-bottom-left-radius: 14px; }
.wortbausteine:is(.richtig, .korrigiert) .stein.gelegt:last-child { border-top-right-radius: 14px; border-bottom-right-radius: 14px; }
.wortbausteine.korrigiert .wort-zeile { gap: 0; border-color: var(--hl); }

/* Mikrofon */
.mikrofon { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mikro { width: 128px; height: 128px; border-radius: 50%; background: var(--fg); color: #fff; display: grid; place-items: center; }
.mikro .icon { width: 56px; height: 56px; stroke-width: 1.7; }
.mikrofon.hoert .mikro { background: var(--err); animation: ring 1.2s ease-out infinite; }
.mikro-text { font: 400 clamp(22px, 4vmin, 34px)/1.2 var(--schrift); min-height: 1.2em; color: var(--leise); text-align: center; }
.mikrofon.richtig .mikro { background: var(--ok); }
.selbst { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.selbst-wahl { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Kontrastaufgabe: zwei Zahlen (Zahlwörter) zur Wahl */
.zahlwahl { display: flex; gap: clamp(14px, 3vw, 32px); justify-content: center; flex-wrap: wrap; }
.wahl-option { min-width: clamp(150px, 24vw, 250px); padding: 14px 26px 18px; border-radius: 28px; background: var(--weiss); display: grid; place-items: center;
  box-shadow: 0 1px 2px rgba(41, 43, 52, .06), 0 0 0 1.5px var(--linie); transition: transform .15s ease, box-shadow .2s, opacity .3s, background .3s; }
.wahl-option:active { transform: scale(.97); }
.wahl-option .zahlanzeige { font-size: clamp(64px, 13vmin, 140px); pointer-events: none; }
.wahl-option .wortanzeige { font-size: clamp(24px, 4.4vmin, 42px); pointer-events: none; }
.zahlwahl.als-wort .wahl-option { min-width: min(300px, 80vw); min-height: 96px; }
.wahl-option.gewaehlt { box-shadow: 0 0 0 3px var(--fg); }
.wahl-option.richtig { box-shadow: 0 0 0 4px var(--ok), 0 6px 18px rgba(90, 160, 95, .22); background: color-mix(in srgb, var(--ok-bg) 45%, var(--weiss)); }
.wahl-option.weg { opacity: .28; }
.zahlwahl.gesperrt { pointer-events: none; }
@media (max-width: 480px) {
  .zahlwahl:not(.als-wort) { flex-wrap: nowrap; width: 100%; }
  .zahlwahl:not(.als-wort) .wahl-option { min-width: 0; flex: 1 1 0; padding: 10px 8px 14px; }
}

/* Stellenwertkarten: gleich hohe Zeilen (Karte 1.22em), jede Karte rechtsbündig in ihrer Zeile --reihe;
   übereinander liegen heißt: dieselbe Zeile */
.stellenkarten { font: 400 clamp(36px, 7vmin, 72px)/1 var(--schrift); width: fit-content; margin-inline: auto;
  display: grid; grid-template-rows: repeat(var(--zeilen, 1), 1.22em); row-gap: .14em; }
.stellenkarten .stk-karte { grid-area: var(--reihe, 1) / 1; justify-self: end; }
/* Rückmeldung: Stapel in der Mitte, zum Sprechen auseinander (--versatz in Zeilen) und wieder zusammen */
.stellenkarten.gestapelt { grid-template-rows: calc(var(--zeilen, 1) * 1.36em - .14em); align-items: center; }
.stellenkarten.gestapelt .stk-karte { transform: translateY(calc(var(--versatz, 0) * 1.36em));
  transition: transform .48s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, background-color .2s; }
@media (prefers-reduced-motion: reduce) { .stellenkarten.gestapelt .stk-karte { transition: none; } }
.stk-karte { display: flex; background: var(--weiss); border-radius: .16em; padding: .12em 0 .1em;
  box-shadow: 0 0 0 2px var(--stelle, var(--linie-stark)), 0 4px 10px rgba(41, 43, 52, .12); transition: box-shadow .2s, background-color .2s; }
.stk-karte.verdeckt { visibility: hidden; }
.stk-z { width: .66em; text-align: center; font-variant-numeric: tabular-nums; transition: opacity .18s; }
.stk-karte.an { background: var(--hl-bg); box-shadow: 0 0 0 2.5px var(--stelle, var(--fg)), 0 0 0 8px rgba(236, 159, 11, .4); }
.karten-buehne { display: grid; place-items: center; width: min(760px, 82vw); min-height: calc(var(--zeilen, 2) * 1.38em + .2em); padding: 12px 8px 4px;
  font-size: min(clamp(46px, 9vmin, 104px), calc(56vh / (var(--zeilen, 2) * 1.38 + .2))); }
.karten-buehne .stellenkarten { font-size: 1em; }
.hilfskarten { font-size: min(clamp(30px, 5.4vmin, 54px), calc(34vh / (var(--zeilen, 2) * 1.38 + .2))); padding: 6px 0; display: grid; place-items: center; min-height: calc(var(--zeilen, 2) * 1.38em + .2em); }
.hilfskarten .stellenkarten { font-size: 1em; }
/* Karten neben der Aufgabe, damit die Antwort nicht nach unten rutscht; schmal nur neben dem
   (dann kleineren) Lautsprecher */
@media (min-width: 700px) and (min-aspect-ratio: 1/1) {
  .aufgabe-oben:has(> .hilfskarten) { flex-direction: row; justify-content: center; gap: 40px; }
  .aufgabe-oben:has(> .hilfskarten) > .reiz-material { flex: 1 1 0; }
}
@media (max-width: 699px), (max-aspect-ratio: 1/1) {
  .aufgabe-oben:has(> .hoeren):has(> .hilfskarten) { flex-direction: row; justify-content: center; gap: clamp(14px, 5vw, 36px); }
  .aufgabe-oben:has(> .hilfskarten) .abspielen { width: 84px; height: 84px; }
  .aufgabe-oben:has(> .hilfskarten) .abspielen .icon { width: 40px; height: 40px; }
}
@media (max-width: 480px) and (max-height: 740px) {
  .hilfskarten { font-size: min(26px, calc(30vh / (var(--zeilen, 2) * 1.38 + .2))); padding: 0; }
}
/* Material als Vorlage: Karten immer daneben, das Material wird dafür schmaler */
.aufgabe-oben:has(> .reiz-material):has(> .hilfskarten) { flex-direction: row; justify-content: center; align-items: center; gap: clamp(10px, 3vw, 40px); }
.aufgabe-oben:has(> .hilfskarten) > .reiz-material { flex: 1 1 0; min-width: 0; }

/* Zahlenstrich: Marken über dem Strich, Zahlen darunter */
.zahlenstrich { width: min(640px, 100%); padding: 0 30px; margin: 0 auto; color: var(--fg); }
.zs-marken { position: relative; height: 62px; }
.zs-marke { position: absolute; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.zs-marke .zahlanzeige.mini { font-size: 26px; }
.zs-marke.hoch { bottom: 0; }
.zs-marke.hoch .zs-pin { height: 46px; }
.zs-pin { width: 3px; height: 14px; border-radius: 2px; background: var(--ok); }
.zs-marke.andere .zs-pin { background: var(--leise); }
.zs-linie { position: relative; height: 16px; border-top: 2.5px solid var(--fg); }
.zs-strich { position: absolute; top: 0; width: 1.5px; height: 6px; background: var(--linie-stark); transform: translateX(-50%); }
.zs-strich.mittel { height: 9px; }
.zs-strich.gross { height: 13px; width: 2px; background: rgba(41, 43, 52, .55); }
.zs-beschriftung { position: relative; height: 18px; font-size: 13px; color: var(--leise); }
.zs-wert { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
@media (max-width: 480px) { .zs-wert.neben { display: none; } .zahlenstrich { padding: 0 22px; } }

/* Detektiv */
.detektiv { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 16px; }
.antwort-knopf { min-height: 72px; min-width: 190px; padding: 0 26px; border-radius: 999px; background: var(--karte); font-size: 22px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.antwort-knopf .icon { width: 30px; height: 30px; }
.antwort-knopf.ja .icon { color: var(--ok); stroke-width: 2.6; }
.antwort-knopf.nein .icon { color: var(--err); }
.antwort-knopf:active { transform: scale(.97); }

/* ------------------------------------------------ Rückblick und Einstellungen */
.rueckblick, .einstellungen { width: min(820px, 100%); margin: 0 auto; padding: 8px 18px 40px; }
.rueckblick > .segmente { margin: 6px auto 0; display: flex; width: fit-content; }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 20px; }
.kennzahl { background: var(--karte); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--leise); }
.kennzahl b { font-size: 30px; color: var(--fg); font-weight: 500; }
.balken-zeile { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(80px, 1fr) auto; gap: 12px; align-items: center; padding: 7px 0; font-size: 15px; }
.balken { height: 10px; border-radius: 5px; background: var(--linie); overflow: hidden; }
.balken-fuell { height: 100%; background: var(--z); border-radius: 5px; }
.balken-wert { font-size: 13px; color: var(--leise); text-align: right; min-width: 70px; }
.fehlerliste { display: flex; flex-direction: column; gap: 6px; }
.fehler-zeile { display: grid; grid-template-columns: 70px 24px 1fr auto; align-items: baseline; gap: 8px; background: var(--karte); border-radius: 12px; padding: 8px 14px; }
.fz-zahl, .fz-antwort { font: 400 26px/1 var(--schrift); }
.fz-antwort { color: var(--err); }
.fz-pfeil, .fz-richtung { color: var(--leise); font-size: 13px; }
.leer { text-align: center; color: var(--leise); margin-top: 60px; }
.rueckblick-fuss { display: flex; justify-content: center; margin-top: 30px; }
/* Hinweise zur Förderung: Befund, darunter die Fördermöglichkeit */
.foerder { background: var(--karte); border-radius: 18px; padding: 14px 18px 16px; margin: 10px 0; box-shadow: inset 4px 0 0 var(--z); }
.foerder-titel { font-size: 17px; font-weight: 600; }
.foerder-befund { margin: 6px 0 6px; font-size: 15px; line-height: 1.4; }
.foerder-tipp { margin: 0; font-size: 15px; line-height: 1.45; color: var(--leise); }
.foerder-fuss { font-size: 13px; color: var(--leise); margin: 8px 4px 0; line-height: 1.4; }
.einst-zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linie); flex-wrap: wrap; }
.einst-text { flex: 1 1 260px; }
.einst-titel { font-size: 17px; }
.einst-unter { font-size: 14px; color: var(--leise); margin-top: 2px; }
.einst-vorschau { height: 120px; display: flex; margin: 10px 0 4px; }
.schalter { width: 56px; height: 34px; border-radius: 17px; background: var(--linie-stark); position: relative; transition: background .2s; flex: none; }
.schalter .knauf { position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.schalter.an { background: var(--ok); }
.schalter.an .knauf { transform: translateX(22px); }
.impressum { text-align: center; color: var(--leise); font-size: 13px; margin-top: 30px; }
.haelt { animation: halten 2s linear; }
@keyframes halten { from { box-shadow: inset 0 0 0 0 var(--linie-stark); } to { box-shadow: inset 0 0 0 24px var(--linie-stark); } }

@media (max-width: 480px) {
  .zr .segment { padding: 0 10px; min-width: 0; font-size: 17px; }
  /* sieben Werkzeuge in einer Zeile */
  .werkzeuge { gap: 0; flex-wrap: nowrap; width: 100%; }
  .werkzeug { min-width: 0; flex: 1 1 0; padding: 2px 0; }
  .werkzeug > span:first-child { width: 44px; height: 44px; }
  .werkzeug .icon { width: 23px; height: 23px; }
  .werkzeug-name { font-size: 11.5px; }
  .entdecken { gap: 10px; }
}
/* Hinweis oder Korrektur im Auftrag: auf dem Handy enger, damit die Antwort ohne Scrollen bleibt */
@media (max-width: 480px) {
  .ueben:has(.streifen) { gap: 12px; padding-bottom: 16px; }
  .streifen { font-size: 17px; padding: 8px 14px; gap: 8px 12px; }
}
@media (max-height: 640px) {
  .ueben { gap: 14px; }
  .abspielen, .mikro { width: 96px; height: 96px; }
}

/* ------------------------------------------------ Weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  .logo-ziffer { animation: none !important; }
  .ebene, .meldung { animation: none; }
  .material.falsch, .material .spalte.wackeln, .schreibfeld.falsch .kaestchen-reihe, .wortbausteine.falsch .wort-zeile { animation: farbpuls .5s; }
  .material .spalte.puls .koerper { animation: none; }
  .abspielen.spielt, .mikrofon.hoert .mikro { animation: none; box-shadow: 0 0 0 6px rgba(236, 159, 11, .45); }
  .weiter.zaehlt::before { animation-duration: 4.5s; }
}
@keyframes farbpuls { 50% { filter: drop-shadow(0 0 5px var(--err)); } }

/* ------------------------------------------------ Bildschirmwechsel (View Transitions) */
::view-transition-group(*) { animation-duration: 340ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }

/* ------------------------------------------------ Geringe Höhe (iPad quer, iPad mini, iPhone SE) */
/* Entdecken: feste Höhe, damit das Material schrumpft (flex-shrink), statt dass die Seite wächst */
#app:has(> .entdecken) { height: 100%; }
/* Passt es trotzdem nicht, wird gescrollt, ohne dass oben etwas verschwindet */
.start, .ueben, .entdecken { justify-content: safe center; }
/* Material als Vorlage: Material und Schreibkästchen teilen sich die Höhe */
.ueben:has(.reiz-material) .schreibfeld:not(.frei) {
  --k: clamp(44px, min(calc((100vw - 48px - (var(--n, 2) - 1) * var(--l)) / var(--n, 2)), calc(16vh / 1.18)), 160px); }
@media (max-height: 780px) {
  .ueben { gap: clamp(10px, 2.4vh, 20px); padding-bottom: 14px; }
  .aufgabe-oben, .aufgabe-unten { gap: 12px; }
  .abspielen { width: 100px; height: 100px; }
  .abspielen .icon { width: 48px; height: 48px; }
  .pruefen { width: 64px; height: 64px; }
  .reiz-material { height: clamp(130px, 26vh, 320px); }
  .antwort-material { height: clamp(190px, 33vh, 380px); }
  .schreibfeld:not(.frei) { --k: clamp(44px, min(calc((100vw - 48px - (var(--n, 2) - 1) * var(--l)) / var(--n, 2)), calc(18vh / 1.18)), 160px); }
  .start { gap: 12px; padding-top: calc(var(--rand-oben) + 12px); padding-bottom: 14px; }
  .entdecken { gap: 10px; padding-bottom: 10px; }
}
/* Startseite zweispaltig auf kleinem iPad hochkant (768 × 1024): knappere Abstände */
@media (min-width: 481px) and (max-width: 860px) and (max-height: 1060px) {
  .start { gap: 14px; padding-top: calc(var(--rand-oben) + 12px); padding-bottom: 16px; }
}
/* iPad hochkant mit Tastatur: Die Tasten stehen unter den Kästchen, das Vorlage-Material wird flacher */
@media (min-width: 481px) and (max-aspect-ratio: 1/1) {
  .ueben:has(.mit-tasten) .reiz-material { height: clamp(150px, 20vh, 260px); }
}
/* Handy mit Tastatur: kleinerer Lautsprecher, damit Hinweisstreifen und Tasten Platz haben */
@media (max-width: 480px) {
  .ueben:has(.mit-tasten) .abspielen { width: 96px; height: 96px; }
  .ueben:has(.mit-tasten) .abspielen .icon { width: 46px; height: 46px; }
  /* getippte Ziffern brauchen keine Schreibfläche */
  .mit-tasten .kaestchen-reihe { --k: 60px; }
  .ueben:has(.mit-tasten) .taste { height: 48px; }
  .ueben:has(.mit-tasten) .reiz-material { height: clamp(110px, 20vh, 200px); }
  .ueben:has(.mit-tasten):has(.streifen) { gap: 10px; }
}
/* Handy mit wenig Höhe (iPhone SE): Tastatur und Kästchen knapper, „zerlegt“ neben dem Lautsprecher,
   Startseite dichter */
@media (max-width: 480px) and (max-height: 740px) {
  .hoeren { flex-direction: row; gap: 10px; }
  .ueben .abspielen, .ueben:has(.mit-tasten) .abspielen { width: 84px; height: 84px; }
  .ueben .abspielen .icon, .ueben:has(.mit-tasten) .abspielen .icon { width: 40px; height: 40px; }
  .feld-werkzeuge button { width: 44px; height: 44px; }
  /* Tastatur: Kästchen und Werkzeuge in einer Zeile, Tasten flacher */
  .schreibfeld.mit-tasten:not(.frei) .feld-links { flex-direction: row; align-items: flex-end; }
  .mit-tasten .tastatur { grid-template-columns: repeat(3, 68px); gap: 6px; }
  .mit-tasten .kaestchen-reihe { --k: 52px; }
  .ueben:has(.mit-tasten) .taste { height: 42px; font-size: 27px; }
  .ueben:has(.mit-tasten) .reiz-material { height: clamp(96px, 16vh, 160px); }
  .ueben:has(.streifen), .ueben:has(.mit-tasten):has(.streifen) { gap: 8px; }
  .ueben:has(.streifen) .abspielen, .ueben:has(.mit-tasten):has(.streifen) .abspielen { width: 72px; height: 72px; }
  .ueben:has(.mit-tasten):has(.streifen) .taste { height: 40px; }
  .logo { font-size: 46px; }
  .start { gap: 10px; padding-top: calc(var(--rand-oben) + 8px); padding-bottom: 8px; }
  .wahl { min-height: 74px; }
  .wahl-luecke { height: 36px; }
  .karte-ueben { gap: 8px; }
  .bild-entdecken { --mm-h: 30px; }
  .bild-detektiv { height: 60px; }
}
/* Hinweis oder Karten bei Material als Vorlage: Das Material gibt Höhe ab, die Stellenkästchen
   der Stütze bleiben so groß wie vorher die Rechenkästchen */
.ueben:has(.streifen) .reiz-material { max-height: 24vh; }
.ueben:has(.hilfskarten) .schreibfeld:not(.frei) {
  --k: clamp(44px, min(calc((100vw - 48px - (var(--n, 2) - 1) * var(--l)) / var(--n, 2)), calc(11vh / 1.18)), 120px); }
@media (max-height: 740px) {
  .ueben:has(.streifen) .reiz-material { max-height: 13vh; }
}

/* ------------------------------------------------ Kinderprofile und Studie */
input { font: inherit; color: inherit; -webkit-user-select: text; user-select: text; }
.feld-text { min-height: 54px; width: min(340px, 100%); padding: 0 18px; border: 0; border-radius: 16px; background: var(--bg);
  box-shadow: inset 0 0 0 1.5px var(--linie-stark); font-size: 21px; outline: none; }
.feld-text:focus { box-shadow: inset 0 0 0 2.5px var(--e); }
.feld-text.code { width: 9.5em; padding: 0 12px; text-transform: uppercase; letter-spacing: .06em; text-align: center; }
.feld-text.kurz { width: 5ch; text-align: center; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--hl-bg); color: var(--fg); font-weight: 500; font-size: 19px; }
.avatar.gast { background: var(--linie); color: var(--leise); }
.avatar.neu { background: var(--weiss); color: var(--leise); box-shadow: inset 0 0 0 1.5px var(--linie-stark); }
.avatar .icon { width: 58%; height: 58%; }
/* Start: wer übt, oben links (die Ecke rechts gehört Rückblick und Einstellungen) */
.start-profil { position: absolute; top: calc(var(--rand-oben) + 12px); left: max(14px, env(safe-area-inset-left)); z-index: 2;
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 16px 4px 4px; border-radius: 999px;
  background: var(--weiss); box-shadow: var(--knopf-schatten); font-size: 17px; max-width: 46vw; }
.start-profil-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-profil:active { transform: scale(.97); }
/* Wer übt? Große Kacheln, die gewählte in der Einerfarbe getönt */
.profil-karte { width: min(680px, 100%); }
.profil-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 148px)); justify-content: center; gap: 14px; width: 100%; }
/* Segmente auf weißen Karten: Grund in der Hintergrundfarbe, sonst verschwinden sie */
.ebene-karte .segmente { background: var(--bg); }
.profil-kachel { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 8px 14px; border-radius: 22px;
  background: var(--bg); font-size: 19px; min-width: 0; }
.profil-kachel.an { background: rgba(63, 139, 129, .16); }
.profil-kachel .avatar { width: 68px; height: 68px; font-size: 32px; }
.profil-kachel:active { transform: scale(.97); }
.profil-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profil-hinweis, .studie-hinweis, .studie-text { font-size: 14px; color: var(--leise); margin: -6px 0 0; text-align: center; }
.studie-text { font-size: 16px; margin: 0; max-width: 32em; }
.studie-hinweis.ok { color: var(--ok); }
/* Einwilligung: Text zum Lesen in einem eigenen, scrollbaren Feld */
.studie-karte { width: min(660px, 100%); align-items: stretch; }
.studie-karte > .ebene-text, .studie-karte > .primaer, .studie-karte > .studie-hinweis { align-self: center; }
.einwilligung { max-height: 34vh; overflow: auto; background: var(--bg); border-radius: 16px; padding: 12px 16px; font-size: 14px; line-height: 1.45;
  -webkit-user-select: text; user-select: text; }
.einwilligung b { display: block; margin-top: 10px; font-weight: 500; }
.einwilligung p { margin: 4px 0 0; white-space: pre-line; }
.studie-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.studie-haken { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.35; }
.studie-haken input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--e); }
.kind-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linie); flex-wrap: wrap; }
.einst-absatz { margin: 0 0 6px; }
.studie-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.studie-status { padding: 2px 0 8px; }
.studie-bestaetigen { display: flex; flex-direction: column; gap: 16px; }
.studie-bestaetigen > .primaer, .studie-karte > .meldung-knoepfe { align-self: center; }
.studie-karte .zweit { background: var(--bg); box-shadow: none; }