/* Tafelkiste – Erscheinungsbild für die interaktive Tafel
   Ziel: Promethean ActivPanel 9 Premium 86" (3840 × 2160, Querformat 16:9).
   Stil: hell und ruhig, weiche Flächen statt Rahmen, klare Farbe nur dort, wo gehandelt wird.
   Layout: Jede Ansicht füllt genau einen Bildschirm, nichts scrollt (außer im Lehrerbereich).
   Oben: Anzeige (Kinder schauen). Unten: alles, was Kinder antippen (in ihrer Reichweite).
   Alle Größen hängen an der Bildschirmgröße (rem), damit es auf jeder Auflösung gleich aussieht. */

/* Schriften liegen im Ordner fonts/ (keine fremden Server). Poppins: SIL Open Font License. */
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Medium.ttf") format("truetype"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Bold.ttf") format("truetype"); font-weight: 700 800; font-display: swap; }

:root {
  /* Dunkle „Tafel“: helle Mitlaute, gelbe Selbstlaute */
  --papier: #171A33;          /* Hintergrund */
  --punkte: #252A4E;          /* feines Punkteraster wie im Heft */
  --flaeche: #232749;         /* Karten */
  --tinte: #F3F4FF;           /* Text, Mitlaute */
  --grau: #9EA3C7;            /* Nebentext */
  --linie: #363C6A;           /* feine Trennlinien */
  --dunkel: #161936;          /* Schrift auf hellen/farbigen Flächen */
  --flaeche-tief: #1B1F3E;    /* vertiefte Felder (leere Etagen, Zehnerfeld) */
  --rand-hell: #4E5596;       /* Ränder von Feldern und Würfeln */
  --gedimmt: #5F6590;         /* noch nicht freigeschaltet, aus */
  --akzent-text: var(--akzent-text);     /* Text auf ruhigen Knöpfen */
  --automat-licht: #22265A;
  --textur: none;             /* Oberfläche des Hintergrunds */
  /* Handlungsfarben (Namen bleiben, die Werte sind neu) */
  --petrol: #6C76F5;          /* Auswahl, Hauptfarbe */
  --petrol-tief: #4B53D6;
  --petrol-hell: #2E3466;
  --nacht: #0F1129;           /* Automat */
  --nacht-tief: #090A1C;
  --sonne: #FF8552;           /* Aktionsknopf (Koralle) */
  --sonne-tief: #E8643A;
  --sonne-hell: #4A3024;
  --fenster: #10132E;
  /* Didaktische Farben */
  --vokal: #FFD23F;           /* Selbstlaute gelb */
  --vokal-hell: #FFD23F;
  --rot: #FF5A6E;
  --blau: #5B9BFF;
  --echt: #2BC48A;
  --echt-hell: #183F31;
  --quatsch: #B57BFF;
  --quatsch-hell: #33264F;
  --warn: #FF6B7F;
  --warn-hell: #46202A;
  --karton: #D9BE8E;
  --karton-tief: #A9844E;
  --weiss: #FFFFFF;
  /* Schatten */
  --schatten-1: 0 .05rem .15rem rgba(0, 0, 0, .25), 0 .3rem .9rem rgba(0, 0, 0, .22);
  --schatten-2: 0 .1rem .3rem rgba(0, 0, 0, .25), 0 .9rem 2.2rem rgba(0, 0, 0, .35);
  /* Schrift */
  --f-titel: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-ui: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-kind: "KleeLokal", "Kleekinderalpha", "Andika", Verdana, "Poppins", sans-serif;
  --skala: 1;
  --rund-s: .7rem;
  --rund-m: 1.1rem;
  --rund-l: 1.6rem;
  color-scheme: dark;
}
/* 1 rem = 1/80 der Bildschirmbreite (bzw. 1/45 der Höhe, falls die knapper ist).
   1920×1080 → 24 px · 3840×2160 → 48 px · Laptop 1280×800 → 16 px */
html { font-size: calc(clamp(14px, min(1.25vw, 2.22vh), 60px) * var(--skala)); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background-color: var(--papier);
  background-image: var(--textur), radial-gradient(var(--punkte) .09rem, transparent .1rem);
  background-size: auto, 1.6rem 1.6rem;
  color: var(--tinte); font-family: var(--f-ui); font-size: 1rem; font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; overflow: hidden;
}
textarea, input { -webkit-user-select: text; user-select: text; }
button { font-family: var(--f-ui); font-weight: 600; cursor: pointer; border: 0; border-radius: var(--rund-s); color: inherit; touch-action: manipulation;
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease, opacity .15s; }
button:active:not(:disabled) { transform: scale(.97); }
button:disabled { cursor: default; }
:focus-visible { outline: .2rem solid var(--petrol); outline-offset: .15rem; }
.v { color: var(--vokal); }
body.ohne-vokalfarbe .v { color: inherit; }
.kind { font-family: var(--f-kind); }
.leer { color: var(--grau); font-weight: 400; font-family: var(--f-ui); font-size: 1rem; }

/* ---------- Rahmen: Kopf + eine Bildschirmseite ---------- */
#app { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.kopf { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .8rem 1.4rem .5rem; padding-top: calc(.8rem + env(safe-area-inset-top, 0px)); }
.kopf-links { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.kopf-rechts { display: flex; align-items: center; gap: .6rem; position: relative; }
.kopf h1 { margin: 0; font-family: var(--f-titel); font-weight: 700; font-size: 1.45rem; letter-spacing: -.01em; color: var(--tinte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Wortmarke mit kleinem Bausteine-Zeichen */
.marke { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--f-titel); font-weight: 700; font-size: 1.7rem; letter-spacing: -.02em; line-height: 1; color: var(--tinte); }
.marke::before { content: ""; width: 1.9rem; height: 1.9rem; border-radius: .55rem; flex: none;
  background:
    linear-gradient(var(--sonne), var(--sonne)) 0 0 / 46% 46% no-repeat,
    linear-gradient(var(--vokal), var(--vokal)) 100% 0 / 46% 46% no-repeat,
    linear-gradient(var(--petrol), var(--petrol)) 0 100% / 46% 46% no-repeat,
    linear-gradient(var(--echt), var(--echt)) 100% 100% / 46% 46% no-repeat; }
.zurueck { display: inline-flex; align-items: center; gap: .3rem; background: var(--flaeche); color: var(--tinte); text-decoration: none; font-weight: 600; font-size: 1.05rem; padding: .55rem 1.2rem .55rem .9rem; border-radius: 999px; box-shadow: var(--schatten-1); }
.zurueck:active { transform: scale(.97); }
.rund { width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--flaeche); border: 0; box-shadow: var(--schatten-1); color: var(--tinte); display: grid; place-items: center; position: relative; touch-action: none; }
.rund svg { width: 1.3rem; height: 1.3rem; }
.zahnrad { color: var(--grau); }
.zahnrad .ring { position: absolute; inset: -.25rem; width: 3.3rem; height: 3.3rem; transform: rotate(-90deg); pointer-events: none; }
.zahnrad .ring circle { fill: none; stroke: var(--petrol); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 126; stroke-dashoffset: 126; }
.zahnrad.haelt .ring circle { transition: stroke-dashoffset 1.2s linear; stroke-dashoffset: 0; }
.tipp { position: absolute; top: 3.4rem; right: 0; background: var(--tinte); color: var(--weiss); font-size: .8rem; padding: .35rem .7rem; border-radius: 999px; white-space: nowrap; z-index: 5; }
.inhalt { min-height: 0; width: 100%; padding: .4rem 1.4rem 1.1rem; padding-bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
.ansicht-lehrer .inhalt { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Start und Fachseiten ---------- */
.start { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1.4rem; }
.lernstand { background: var(--flaeche); border-radius: var(--rund-l); box-shadow: var(--schatten-1); padding: .7rem 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.leiste-titel { font-family: var(--f-titel); font-weight: 600; color: var(--grau); font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; margin-right: .3rem; }
.leiste { display: flex; flex-wrap: wrap; gap: .45rem; }
.lb { font-family: var(--f-kind); font-size: 2.2rem; line-height: 1.1; padding: .1rem .7rem; border-radius: var(--rund-s); background: var(--papier); }
.lb.vok { color: var(--vokal); background: rgba(255, 210, 63, .12); }
.leiste.klein .lb { font-size: 1.6rem; padding-inline: .45rem; }
body.ohne-vokalfarbe .lb.vok { color: inherit; background: var(--papier); }
/* Kacheln sitzen unten – dort, wo Kinder hinreichen */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); grid-auto-rows: min(24rem, 100%); gap: 1.4rem; align-content: end; min-height: 0; }
.kachel { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; text-decoration: none; border-radius: 2rem; padding: 1.2rem; color: var(--weiss); min-height: 0; transition: transform .15s ease, box-shadow .15s ease; isolation: isolate; }
.kachel::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; right: -18%; top: -30%; border-radius: 50%; background: rgba(255, 255, 255, .13); z-index: -1; }
.kachel::after { content: ""; position: absolute; width: 40%; aspect-ratio: 1; left: -10%; bottom: -18%; border-radius: 50%; background: rgba(255, 255, 255, .08); z-index: -1; }
.kachel:active { transform: scale(.98); }
.kachel svg { width: auto; height: min(58%, 12rem); max-width: 80%; filter: drop-shadow(0 .4rem .6rem rgba(0, 0, 0, .12)); }
.kachel span { font-family: var(--f-kind); font-size: 2.2rem; text-align: center; line-height: 1.15; }
.kachel.petrol { background: linear-gradient(150deg, #6A75F4 0%, #4C55DA 55%, #343BAE 100%); box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, .4); }
.kachel.sonne { background: linear-gradient(150deg, #FFA27A 0%, var(--sonne) 50%, #F0602F 100%); color: var(--dunkel); box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, .4); }
.kachel.sonne svg path { stroke: var(--weiss); }
.ic-t { font-family: var(--f-kind); font-size: 26px; fill: var(--tinte); }
.ic-t.v, .ic-t .v { fill: var(--vokal); }
/* Symbole: weiße Felder werden auf blauen Kacheln zu kleinen Tafeln */
.kachel.petrol svg rect[fill="#fff"] { fill: var(--nacht); }
.kachel.petrol .ic-t { fill: #F3F4FF; }
.kachel.petrol .ic-t.v, .kachel.petrol .ic-t .v { fill: #FFD23F; }
.kachel.sonne .ic-t { fill: var(--dunkel); }
.kachel.sonne .ic-t.v, .kachel.sonne .ic-t .v { fill: var(--weiss); }
.ic-gross { font-size: 40px; }
/* Fächerübersicht: wenige, große Kacheln mittig */
.start-frage { margin: 0; text-align: center; font-family: var(--f-kind); font-size: 3rem; color: var(--tinte); }
.kacheln.faecher { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 30rem)); justify-content: center; }
.kacheln.faecher .kachel span { font-size: 3rem; }

/* ---------- Gemeinsame Bausteine ---------- */
.knopfreihe { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.dreh { background: linear-gradient(180deg, #FFA27A, var(--sonne)); color: var(--dunkel); font-family: var(--f-titel); font-weight: 700; font-size: 2.1rem; letter-spacing: -.01em; line-height: 1.1; padding: .65rem 2.8rem; border-radius: 999px;
  box-shadow: 0 .55rem 1.4rem rgba(255, 133, 82, .35), inset 0 -.2rem 0 rgba(0, 0, 0, .12); }
.dreh:disabled { opacity: .45; box-shadow: none; }
.zweit { background: var(--flaeche); color: var(--akzent-text); font-size: 1.3rem; padding: .65rem 1.5rem; border-radius: 999px; box-shadow: var(--schatten-1); }
.zweit:disabled { opacity: .45; }
.ablage { background: var(--flaeche); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: var(--rund-l); box-shadow: var(--schatten-1); padding: .5rem 1.1rem; display: flex; align-items: center; gap: 1rem; min-height: 0; overflow: hidden; }
.zaehler { display: flex; align-items: center; gap: 1rem; font-weight: 600; color: var(--grau); white-space: nowrap; flex: none; }
.zaehler b { font-family: var(--f-titel); font-weight: 700; font-size: 1.6rem; font-variant-numeric: tabular-nums; margin-left: .25rem; }
.z-echt b { color: var(--echt); } .z-quatsch b { color: var(--quatsch); }
.leise { background: var(--papier); color: var(--grau); padding: .35rem .9rem; font-size: .85rem; border-radius: 999px; flex: none; }
.wortchips { display: flex; flex-wrap: nowrap; gap: .5rem; overflow: hidden; flex: 1; min-width: 0; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.wortchips > span:not(.leer) { font-family: var(--f-kind); font-size: 1.9rem; line-height: 1.25; padding: 0 .85rem; border-radius: 999px; background: var(--papier); white-space: nowrap; flex: none; }
.wortchips .echt { background: var(--echt-hell); color: var(--echt); }
.wortchips .quatsch { background: var(--quatsch-hell); color: var(--quatsch); }
.wortchips .echt .v, .wortchips .quatsch .v { color: inherit; }

/* ---------- Slotmaschine ---------- */
.slot { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .9rem; }
.automat { position: relative; background: radial-gradient(120% 90% at 50% 0%, var(--automat-licht) 0%, var(--nacht) 60%, var(--nacht-tief) 100%); border-radius: 2rem; padding: 1.2rem 1.5rem 1.2rem; box-shadow: 0 1.2rem 2.6rem rgba(25, 26, 69, .28); display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto auto; gap: .5rem; min-height: 0; }
.walzen { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 1.1rem; min-height: 0; }
.walze { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center; gap: .3rem; min-width: 0; min-height: 0; }
.fenster { position: relative; width: 100%; height: 100%; min-height: 5rem; background: var(--fenster); border-radius: var(--rund-l); overflow: hidden; border: 0; cursor: pointer; container-type: size;
  box-shadow: inset 0 .5rem 1rem rgba(0, 0, 0, .45), inset 0 -.5rem 1rem rgba(0, 0, 0, .45), 0 0 0 .2rem rgba(255, 255, 255, .10); transition: box-shadow .15s; }
.fenster::before, .fenster::after { content: ""; position: absolute; left: 0; right: 0; height: 20%; z-index: 2; pointer-events: none; }
.fenster::before { top: 0; background: linear-gradient(var(--fenster), transparent); }
.fenster::after { bottom: 0; background: linear-gradient(transparent, var(--fenster)); }
.band { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.feld { display: flex; align-items: center; justify-content: center; font-family: var(--f-kind); font-size: 7rem; font-size: min(68cqh, 30cqw); line-height: 1; white-space: nowrap; color: var(--tinte); }
.walze.gehalten .fenster { box-shadow: inset 0 .5rem 1rem rgba(0, 0, 0, .45), 0 0 0 .3rem var(--sonne), 0 0 1.6rem rgba(255, 133, 82, .5); }
.halte { font-weight: 600; font-size: .85rem; color: var(--sonne); min-height: 1.2em; line-height: 1.2; text-transform: uppercase; letter-spacing: .08em; }
.bogen { width: 66%; height: 1.3rem; border: .22rem solid var(--petrol); border-top: 0; border-radius: 0 0 999px 999px; opacity: .95; }
body.ohne-boegen .bogen { visibility: hidden; }
.wortzeile { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .15em; font-family: var(--f-kind); font-size: 2.6rem; line-height: 1.2; color: var(--weiss); min-height: 1.2em; }
.wortzeile .v { color: var(--vokal-hell); }
body.ohne-vokalfarbe .wortzeile .v { color: inherit; }
.wortzeile .punkt { color: var(--sonne); }
.wortzeile .pfeil { margin-left: .6em; opacity: .9; }
.frage { margin: 0; text-align: center; color: rgba(255, 255, 255, .7); font-size: 1rem; font-weight: 500; }
.hinweis-hell { margin: 0; text-align: center; color: var(--sonne); font-weight: 600; }
.urteil { font-size: 1.35rem; padding: .75rem 1.6rem; border-radius: 999px; color: var(--weiss); }
.urteil.echt { background: var(--echt); box-shadow: 0 .5rem 1.2rem rgba(18, 162, 106, .35); }
.urteil.quatsch { background: var(--quatsch); box-shadow: 0 .5rem 1.2rem rgba(154, 79, 214, .35); }
.urteil:disabled { opacity: .3; box-shadow: none; }

/* ---------- Bühnen (Rutsche, Schüttelbox, Blitzblick) ---------- */
.rutsche { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: .8rem; }
.buehne { position: relative; background: var(--flaeche); border-radius: 2rem; box-shadow: var(--schatten-2); padding: .5rem; min-height: 0; display: flex; justify-content: center; }
.buehne svg { height: 100%; width: 100%; display: block; }
.leiter line { stroke: var(--petrol); stroke-width: 9; stroke-linecap: round; }
.plattform { fill: var(--petrol); }
.bahn-schatten { fill: none; stroke: var(--sonne-tief); stroke-width: 34; stroke-linecap: round; transform: translateY(6px); opacity: .55; }
.bahn { fill: none; stroke: var(--sonne); stroke-width: 30; stroke-linecap: round; }
.bahn-glanz { fill: none; stroke: #FFC4A8; stroke-width: 6; stroke-linecap: round; transform: translateY(-7px); }
.stuetze { stroke: var(--linie); stroke-width: 9; stroke-linecap: round; }
.haus { fill: var(--petrol-hell); stroke: none; }
.haus-schild { font-family: var(--f-ui); font-size: 20px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; fill: var(--grau); }
.buchst { font-family: var(--f-kind); font-size: 130px; fill: var(--tinte); transition: opacity .25s; }
.buchst.v { fill: var(--vokal); }
body.ohne-vokalfarbe .buchst.v, body.ohne-vokalfarbe .vf { fill: var(--tinte); }
.vf { fill: var(--vokal); }
.platz { font-family: var(--f-ui); font-size: 90px; font-weight: 600; fill: var(--linie); }
.sprech { position: absolute; top: .8rem; right: 1.4rem; font-family: var(--f-kind); font-size: 3.2rem; line-height: 1.1; white-space: nowrap; }
.sprech .pfeil { color: var(--grau); margin-inline: .3em; }
/* Bedienfeld unten: Auswahl links, Knöpfe rechts */
.bedien { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem 1.2rem; align-items: center; }
.bedien .chipreihe { grid-column: 1; }
.bedien .knopfreihe { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.chipreihe { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.reihe-titel { font-family: var(--f-titel); font-weight: 600; color: var(--grau); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; width: 7rem; }
.bchip { font-family: var(--f-kind); font-weight: 400; font-size: 2.3rem; min-width: 3.6rem; padding: .1rem .7rem; background: var(--flaeche); border: 0; border-radius: var(--rund-m); box-shadow: var(--schatten-1); line-height: 1.15; }
.bchip.vchip { color: var(--vokal); }
body.ohne-vokalfarbe .bchip.vchip { color: inherit; }
.bchip.an { background: var(--petrol); color: var(--weiss); box-shadow: 0 .45rem 1rem rgba(59, 71, 201, .35); }
.ablage.schmal { padding-block: .35rem; }

/* ---------- Mathe: gemeinsam ---------- */
/* Rechnung/Rückmeldung unter der Bühne, z. B. 7 = 3 + 4 */
.rechnung { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .3em; font-family: var(--f-kind); font-size: 3.2rem; line-height: 1.1; min-height: 1.1em; }
.rechnung .l { color: var(--rot); }
.rechnung .r { color: var(--blau); }
.rechnung .leer { align-self: center; }
.rechnung .hinweis { align-self: center; margin-left: .5em; font-family: var(--f-ui); font-weight: 600; font-size: 1.2rem; padding: .35rem 1rem; border-radius: 999px; background: var(--sonne-hell); color: var(--sonne); }
.rechnung .hinweis.alle { background: var(--echt); color: var(--weiss); }

/* ---------- Schüttelbox ---------- */
.schuettel { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: .8rem; }
.schuettel-oben { display: grid; grid-template-columns: minmax(0, 1fr) 14rem; gap: 1.2rem; min-height: 0; }
.schuettel-oben.ohne-haus { grid-template-columns: minmax(0, 1fr); }
.box-buehne { background: var(--flaeche); border-radius: 2rem; box-shadow: var(--schatten-2); padding: .7rem; min-height: 0; display: flex; }
.box-buehne svg { width: 100%; height: 100%; display: block; }
.box { fill: var(--karton); stroke: var(--karton-tief); stroke-width: 8; }
.wand { stroke: var(--karton-tief); stroke-width: 10; stroke-linecap: round; }
.chip { fill: var(--rot); stroke: rgba(0, 0, 0, .14); stroke-width: 3; transition: transform .16s ease-out; }
.chip.rechts { fill: var(--blau); }
.chip.mitte { fill: var(--sonne); }
#box { transform-box: fill-box; transform-origin: center; }
#box.wackelt { animation: wackeln .15s linear infinite; }
@keyframes wackeln {
  25% { transform: translate(-12px, 4px) rotate(-1.5deg); }
  75% { transform: translate(12px, -4px) rotate(1.5deg); }
}
.einfarbig .chip.rechts { fill: var(--rot); }
.einfarbig .rechnung .l, .einfarbig .rechnung .r, .einfarbig .etage span { color: inherit; }
/* Zahlenhaus: Dach mit der Zahl, eine Etage pro Zerlegung */
.zahlenhaus { display: grid; grid-template-rows: auto; grid-auto-rows: minmax(0, 1fr); min-height: 0; filter: drop-shadow(0 .6rem 1.2rem rgba(29, 27, 58, .10)); }
.dach { height: 4.5rem; background: var(--petrol); clip-path: polygon(50% 0, 100% 100%, 0 100%); display: flex; align-items: flex-end; justify-content: center; color: var(--weiss); font-family: var(--f-kind); font-size: 2.4rem; line-height: 1.2; }
.etage { display: grid; grid-template-columns: 1fr 1fr; border: .12rem solid var(--petrol-hell); border-top: 0; background: var(--flaeche); min-height: 0; }
.etage:nth-child(2) { border-top: .12rem solid var(--petrol-hell); }
.etage span { display: flex; align-items: center; justify-content: center; font-family: var(--f-kind); font-size: 1.7rem; line-height: 1; min-height: 0; overflow: hidden; }
.etage span + span { border-left: .12rem solid var(--petrol-hell); }
.etage .l { color: var(--rot); }
.etage .r { color: var(--blau); }
.zahlenhaus.viele .etage span { font-size: 1.1rem; }
.etage.leer { background: var(--flaeche-tief); }
.zahlenhaus.voll .etage { background: var(--echt-hell); }
.etage.neu, .zahlenhaus.voll .etage.neu { background: var(--sonne-hell); }

/* ---------- Blitzblick ---------- */
.blitz { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto; gap: .8rem; }
.blitz-buehne { position: relative; background: var(--flaeche); border-radius: 2rem; box-shadow: var(--schatten-2); padding: 1.3rem; min-height: 0; display: flex; overflow: hidden; }
.blitz-buehne .bild { flex: 1; min-width: 0; min-height: 0; }
.blitz-buehne svg { width: 100%; height: 100%; display: block; }
.blitz-buehne .deckel { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-titel); font-weight: 700; font-size: 9rem; color: var(--petrol-hell);
  background: radial-gradient(circle at 50% 50%, var(--flaeche) 0%, var(--flaeche-tief) 100%); }
.blitz-buehne:not(.verdeckt) .deckel, .blitz-buehne.verdeckt .bild { visibility: hidden; }
.zelle { fill: var(--flaeche-tief); stroke: var(--rand-hell); stroke-width: 4; }
.pkt { fill: var(--rot); }
.pkt.zwei { fill: var(--blau); }
.wuerfel { fill: var(--flaeche-tief); stroke: var(--rand-hell); stroke-width: 6; }
.auge { fill: var(--tinte); }
.zahlenleiste { flex-direction: column; flex-wrap: nowrap; }
.zreihe { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.zahlenleiste.zwei .zchip { font-size: 2.2rem; min-width: 4.6rem; }
.fuenfer { stroke: var(--petrol); stroke-width: 10; stroke-linecap: round; }
.zchip { font-family: var(--f-kind); font-weight: 400; font-size: 2.8rem; min-width: 4.4rem; padding: .1rem .7rem; background: var(--flaeche); border: 0; border-radius: var(--rund-m); box-shadow: var(--schatten-1); line-height: 1.15; }
.zchip:disabled { opacity: .45; }
.zchip.an { background: var(--petrol); color: var(--weiss); box-shadow: 0 .45rem 1rem rgba(59, 71, 201, .35); }
.zahlwahl .zchip { font-size: 2rem; min-width: 3.4rem; }
.zahlwahl .zchip.zufall { font-family: var(--f-ui); font-weight: 600; font-size: 1.15rem; padding: .6rem 1rem; }
.zchip.falsch { color: var(--warn); background: var(--warn-hell); box-shadow: inset 0 0 0 .15rem var(--warn); }
.zchip.richtig { background: var(--echt); color: var(--weiss); opacity: 1; box-shadow: 0 .45rem 1rem rgba(18, 162, 106, .35); }

/* ---------- Lehrerbereich (darf scrollen) ---------- */
.ansicht-lehrer body, .ansicht-lehrer { background-image: none; }
.lehrer { display: flex; flex-direction: column; gap: 1rem; max-width: 52rem; margin: 0 auto; padding-bottom: 2rem; -webkit-user-select: text; user-select: text; font-weight: 400; }
.lehrer-intro { margin: 0; color: var(--grau); }
.karte { background: var(--flaeche); border-radius: var(--rund-l); box-shadow: var(--schatten-1); padding: 1.1rem 1.3rem; display: flex; flex-direction: column; gap: .75rem; scroll-margin-top: .8rem; }
.karte h2 { margin: 0; font-family: var(--f-titel); font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; color: var(--tinte); }
.hilfe { margin: 0; color: var(--grau); font-size: .88rem; line-height: 1.5; max-width: 68ch; }
.folge { display: flex; flex-wrap: wrap; gap: .4rem; }
.fchip { font-family: var(--f-kind); font-weight: 400; font-size: 1.5rem; min-width: 2.6rem; padding: .05rem .5rem; background: var(--papier); color: var(--gedimmt); border: 0; border-radius: var(--rund-s); }
.fchip.an { background: var(--petrol-hell); color: var(--tinte); }
.fchip.an.vok { color: var(--vokal); }
.stand { margin: 0; }
.stand .kind { font-size: 1.3rem; }
details summary { cursor: pointer; font-weight: 600; color: var(--akzent-text); padding-block: .2rem; }
details[open] { display: flex; flex-direction: column; gap: .5rem; }
textarea, select, input[type=range] { font-family: var(--f-ui); font-size: 1rem; }
textarea { width: 100%; padding: .6rem .7rem; border-radius: var(--rund-s); border: .1rem solid var(--linie); background: var(--papier); color: var(--tinte); resize: vertical; }
textarea:focus, select:focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 .2rem var(--petrol-hell); }
select { padding: .5rem .7rem; border-radius: var(--rund-s); border: .1rem solid var(--linie); background: var(--papier); color: var(--tinte); font-weight: 600; }
input[type=text], input[type=password], input[type=number] { font-family: var(--f-ui); font-size: 1rem; padding: .5rem .7rem; border-radius: var(--rund-s); border: .1rem solid var(--linie); background: var(--papier); color: var(--tinte); }
.reihe { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.schalter { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.schalter label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; cursor: pointer; }
.schalter input { width: 1.2rem; height: 1.2rem; accent-color: var(--petrol); }
.feldtitel { font-weight: 600; }
.knopf { background: var(--petrol); color: var(--weiss); padding: .55rem 1.1rem; font-size: .95rem; display: inline-flex; align-items: center; border-radius: 999px; box-shadow: 0 .35rem .9rem rgba(0, 0, 0, .3); }
.knopf.hell { background: var(--petrol-hell); color: var(--akzent-text); box-shadow: none; border: 0; }
.knopf.warnung { background: var(--warn-hell); color: var(--warn); box-shadow: none; border: 0; }
.datei { position: relative; overflow: hidden; cursor: pointer; border-radius: 999px; font-weight: 600; }
.datei input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.segment { display: inline-flex; gap: .2rem; padding: .2rem; background: var(--papier); border-radius: 999px; }
.segment button { border-radius: 999px; background: transparent; color: var(--grau); padding: .4rem 1.1rem; font-size: .95rem; }
.segment button[aria-pressed="true"] { background: var(--petrol); color: var(--weiss); box-shadow: var(--schatten-1); }
.vorschau { display: flex; flex-direction: column; gap: .3rem; line-height: 1.5; }
.vorschau .kind { font-size: 1.15rem; }
.probe { margin: 0; font-family: var(--f-kind); font-size: 1.9rem; }
.meldung { margin: 0; color: var(--echt); font-weight: 600; }
.bestaetigen { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; background: var(--warn-hell); padding: .7rem .9rem; border-radius: var(--rund-m); }
input[type=range] { width: min(16rem, 60vw); accent-color: var(--petrol); }

/* Hochformat / schmale Fenster (z. B. Laptop-Fenster, Handy): Bedienfeld stapeln */
@media (max-aspect-ratio: 4/3) {
  html { font-size: calc(clamp(14px, 2.2vw, 40px) * var(--skala)); }
  .bedien { grid-template-columns: minmax(0, 1fr); }
  .bedien .knopfreihe { grid-column: 1; grid-row: auto; flex-direction: row; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .kachel, .dreh, .chip, button { transition: none; }
  #box.wackelt { animation: none; }
  .zahnrad.haelt .ring circle { transition: none; }
}

/* Ton-Knopf im Modul: durchgestrichen und blass, wenn aus */
.rund.ton { color: var(--akzent-text); }
.rund.ton.aus { color: var(--gedimmt); }
.buchst.k .vf, .buchst .vf { fill: var(--vokal); }

/* ---------- Hintergründe (Lehrerbereich → Darstellung → Hintergrund) ---------- */
/* Grüne Kreidetafel: mattes Grün, leichte Kreidespuren, Holzrahmen */
body.thema-gruen {
  --papier: #2E4A3A;
  --punkte: transparent;
  --flaeche: #3A5A47;
  --flaeche-tief: #26402F;
  --tinte: #F5F8F1;
  --grau: #B8CBBD;
  --linie: #507260;
  --dunkel: #17261C;
  --rand-hell: #6F9580;
  --gedimmt: #7A9886;
  --akzent-text: #D6ECDD;
  --petrol: #4F8DD6;
  --petrol-tief: #3A6FB0;
  --petrol-hell: #46685A;
  --nacht: #213A2B;
  --nacht-tief: #162A1E;
  --automat-licht: #2F5140;
  --fenster: #1D3326;
  --sonne-hell: #5A4632;
  --echt-hell: #2E5A40;
  --quatsch-hell: #4B4560;
  --warn-hell: #5C3438;
  --textur:
    radial-gradient(ellipse 60% 40% at 18% 22%, rgba(255, 255, 255, .06), transparent 70%),
    radial-gradient(ellipse 50% 35% at 78% 68%, rgba(255, 255, 255, .05), transparent 70%),
    radial-gradient(ellipse 35% 25% at 55% 15%, rgba(255, 255, 255, .035), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Holzrahmen wie an der echten Tafel */
body.thema-gruen #app, body.thema-schiefer #app { box-shadow: inset 0 0 0 .55rem #8A5A32, inset 0 0 0 .7rem #6B4424, inset 0 0 2.4rem rgba(0, 0, 0, .35); }
body.thema-gruen .kopf, body.thema-schiefer .kopf { padding-top: calc(1.2rem + env(safe-area-inset-top, 0px)); padding-inline: 1.9rem; }
body.thema-gruen .inhalt, body.thema-schiefer .inhalt { padding-inline: 1.9rem; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
body.thema-gruen .ansicht-lehrer, body.thema-schiefer .ansicht-lehrer { box-shadow: none; }

/* Schiefertafel: dunkles Grau-Grün */
body.thema-schiefer {
  --papier: #2C3133;
  --punkte: transparent;
  --flaeche: #383E41;
  --flaeche-tief: #22272A;
  --tinte: #F4F5F2;
  --grau: #B5BCBC;
  --linie: #4E5658;
  --dunkel: #1A1D1F;
  --rand-hell: #6E7779;
  --gedimmt: #747C7E;
  --akzent-text: #D5DEE0;
  --petrol: #4F8DD6;
  --petrol-tief: #3A6FB0;
  --petrol-hell: #46505A;
  --nacht: #212628;
  --nacht-tief: #181C1E;
  --automat-licht: #33393C;
  --fenster: #1C2022;
  --sonne-hell: #4F4033;
  --echt-hell: #2A4D3C;
  --quatsch-hell: #463F55;
  --warn-hell: #553236;
  --textur:
    radial-gradient(ellipse 55% 40% at 25% 30%, rgba(255, 255, 255, .045), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Auswahl-Buchstaben als Paar (Mm, Aa): etwas breiter, Selbstlaute bleiben auch ausgewählt gelb */
.bchip { white-space: nowrap; }
.bchip.vchip.an { color: var(--vokal); }
body.ohne-vokalfarbe .bchip.vchip.an { color: var(--weiss); }

/* Hell: die frühere helle Fassung. Gelb ist auf Weiß schwer lesbar,
   darum bekommen die Selbstlaute hier einen feinen dunkelgelben Rand. */
body.thema-hell {
  --papier: #F3F4FA;
  --punkte: #DFE2F0;
  --flaeche: #FFFFFF;
  --flaeche-tief: #F7F8FC;
  --tinte: #1D1B3A;
  --grau: #6A6E87;
  --linie: #E3E5F0;
  --dunkel: #1D1B3A;
  --rand-hell: #C9CDEB;
  --gedimmt: #A3A7BE;
  --akzent-text: #3B47C9;
  --petrol: #3B47C9;
  --petrol-tief: #2A2F8F;
  --petrol-hell: #E8EAFB;
  --nacht: #24265E;
  --nacht-tief: #191A45;
  --automat-licht: #34378A;
  --fenster: #FFFFFF;
  --sonne-hell: #FFE8DE;
  --vokal: #F5B800;
  --vokal-hell: #FFD23F;
  --rot: #E0344B;
  --blau: #2F6FE4;
  --echt: #12A26A;
  --echt-hell: #DFF5EA;
  --quatsch: #9A4FD6;
  --quatsch-hell: #F1E7FB;
  --warn: #E0344B;
  --warn-hell: #FDECEE;
  --karton: #F1DDB8;
  --karton-tief: #C29A5E;
  --schatten-1: 0 .05rem .15rem rgba(29, 27, 58, .06), 0 .3rem .9rem rgba(29, 27, 58, .06);
  --schatten-2: 0 .1rem .3rem rgba(29, 27, 58, .06), 0 .9rem 2.2rem rgba(29, 27, 58, .10);
  color-scheme: light;
}
body.thema-hell .v, body.thema-hell .lb.vok, body.thema-hell .bchip.vchip:not(.an), body.thema-hell .fchip.an.vok {
  text-shadow: 0 0 .04em #9A6B00, 0 0 .04em #9A6B00, 0 0 .04em #9A6B00;
}
body.thema-hell .wortzeile .v, body.thema-hell .kachel .v { text-shadow: none; }
body.thema-hell .buchst.v, body.thema-hell .vf, body.thema-hell .ic-t.v { stroke: #9A6B00; stroke-width: 3px; paint-order: stroke; stroke-linejoin: round; }
body.thema-hell .kachel .ic-t.v { stroke: none; }
body.thema-hell .lb.vok { background: #FFF6D6; }
body.thema-hell.ohne-vokalfarbe .v, body.thema-hell.ohne-vokalfarbe .lb.vok, body.thema-hell.ohne-vokalfarbe .bchip.vchip { text-shadow: none; }
body.thema-hell.ohne-vokalfarbe .buchst.v, body.thema-hell.ohne-vokalfarbe .vf { stroke: none; }
body.thema-hell .rund.ton.aus { color: var(--gedimmt); }
/* Schüttelbox: Platzhalter, solange das Ergebnis noch nicht gezeigt wird */
.rechnung .raten { display: inline-block; min-width: 1.4em; text-align: center; border-bottom: .12em dashed currentColor; line-height: 1; opacity: .8; }

/* ---------- Lehrerbereich: Navigation links, eine Seite rechts ---------- */
.lehrer { display: grid; grid-template-columns: 15rem minmax(0, 46rem); gap: 1.6rem; max-width: 64rem; align-items: start; }
.lseiten { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.lnav { position: sticky; top: 0; display: flex; flex-direction: column; gap: .2rem; background: var(--flaeche); border-radius: var(--rund-l); box-shadow: var(--schatten-1); padding: .7rem; }
.lnav-punkt { text-align: left; background: transparent; color: var(--tinte); font-weight: 600; font-size: .95rem; padding: .55rem .8rem; border-radius: var(--rund-s); }
.lnav-punkt.unter { padding-left: 1.4rem; font-weight: 500; }
.lnav-punkt[aria-current="page"] { background: var(--petrol); color: var(--weiss); }
.lnav-gruppe { margin: .7rem .8rem .15rem; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); }
.lnav-trenner { height: .1rem; background: var(--linie); margin: .6rem .4rem; }
@media (max-aspect-ratio: 4/3) {
  .lehrer { grid-template-columns: minmax(0, 1fr); }
  .lnav { position: static; flex-direction: row; flex-wrap: wrap; }
  .lnav-gruppe, .lnav-trenner { display: none; }
  .lnav-punkt.unter { padding-left: .8rem; }
}
/* Zwei kleine Knöpfe nebeneinander unter dem Hauptknopf (z. B. Zufall · Neu) */
.knopfpaar { display: flex; gap: .6rem; }
.knopfpaar > button { flex: 1; white-space: nowrap; }

/* ---------- Silbenrutsche: freie Kästen ---------- */
.haus.frei { fill: none; stroke: var(--linie); stroke-width: 3; stroke-dasharray: 10 8; }
.buchst.wartet { transition: opacity .2s; }

/* ---------- Blitzlesen ---------- */
.lesen { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: .8rem; }
.lesen-buehne { position: relative; background: var(--flaeche); border-radius: 2rem; box-shadow: var(--schatten-2); min-height: 0; display: grid; place-items: center; overflow: hidden; padding: 1rem; }
.lesewort { font-family: var(--f-kind); font-size: 11rem; line-height: 1.15; white-space: nowrap; display: flex; align-items: flex-end; gap: .04em; }
.lesewort .silbe { position: relative; padding-bottom: .12em; }
.lesewort .silbe::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: .14em; border: .035em solid var(--petrol); border-top: 0; border-radius: 0 0 999px 999px; opacity: 0; transition: opacity .3s; }
.lesen-buehne.offen .silbe::after { opacity: 1; }
body.ohne-boegen .lesewort .silbe::after { display: none; }
.lesen-buehne .deckel { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-titel); font-weight: 700; font-size: 9rem; color: var(--petrol-hell); background: radial-gradient(circle at 50% 50%, var(--flaeche) 0%, var(--flaeche-tief) 100%); }
.lesen-buehne:not(.verdeckt) .deckel, .lesen-buehne.verdeckt .lesewort { visibility: hidden; }
.lesen-frage { margin: 0; font-size: 1.3rem; font-weight: 600; color: var(--grau); }
/* Silbenrutsche: Anzahl wählen (oben links in der Bühne), wartende Laute kleiner */
.anzahlwahl { position: absolute; top: .8rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: .6rem; font-size: .85rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); }
.anzahlwahl .segment button { font-size: 1.3rem; padding: .3rem 1rem; }
.buchst.klein { font-size: 92px; }
.haus.wartend { opacity: .75; }
.haus.ergebnis { fill: var(--petrol-hell); stroke: var(--petrol); stroke-width: 4; }
/* Silbenrutsche: Anzahl und Tempo oben in der Mitte der Bühne */
.rutsch-wahl { position: absolute; top: .8rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 1.4rem; }
.rutsch-wahl .wahl { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); }
.rutsch-wahl .segment button { font-size: 1.05rem; padding: .3rem .9rem; text-transform: none; letter-spacing: 0; }
.halt { fill: var(--petrol); opacity: .8; }
.buchst.ergebnis { transition: none; }
/* Silbenrutsche: Buchstaben auf der Rutsche antippen → groß/klein */
.buchst.wartet { cursor: pointer; pointer-events: bounding-box; }
.lesen-frage .beutel { margin-left: .8rem; font-size: 1rem; font-weight: 500; padding: .2rem .7rem; border-radius: 999px; background: var(--flaeche); color: var(--grau); white-space: nowrap; }
/* Slotmaschine ohne Bewertung: nur drehen und lesen */
.slot.ohne-urteil .urteil, .slot.ohne-urteil .frage, .slot.ohne-urteil .ablage { display: none; }