/*
  Inklish — Gestaltung.

  Dieselben Grundwerte wie Buchstabenteuer und Zahbenteuer, damit sich alle
  drei Apps wie eine anfühlen. Die Werte sind Befund, nicht Geschmack:
  erhöhter Buchstaben- und Wortabstand halbiert die Lesefehler bei Dyslexie
  (Zorzi u. a. 2012, PNAS), die Schriftart selbst trägt nichts bei. Verdana,
  viel Luft, kein Blocksatz, keine Kursive, keine Versalien. Kein Rot: „noch
  nicht" ist kein Alarm. Das gilt für englischen Text genauso; ein englisches
  Wort ist für das Kind ein neues Schriftbild und braucht dieselbe Luft.

  Übernommen sind nur die allgemeinen Bausteine. Was eine Übungsform braucht,
  kommt mit ihr dazu — und zwar in einen eigenen Abschnitt, damit man später
  sieht, was wozu gehört.
*/
:root {
  --grund: #FAF7F0; --grund-tief: #F2EDE2; --karte: #FFFDF8;
  --text: #1A1A1A; --text-leise: #5A5248; --linie: #E2D9C8;
  --wald: #2F5D4A; --wald-hell: #E6EFE9; --tinte: #23324A;
  --kupfer: #A6542A; --kupfer-hell: #FBEDE4; --gold: #B8860B; --gold-hell: #FBF3DC;
  --gelungen: #2F6B45; --nochnicht: #8A5A2B;
  --zeichenabstand: 0.08em; --wortabstand: 0.16em; --zeilenhoehe: 1.6; --schriftgroesse: 19px;
  --radius: 14px;
  --schatten: 0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(60,45,25,.07);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; background: var(--grund); color: var(--text);
  font-family: Verdana, Arial, "DejaVu Sans", Tahoma, sans-serif;
  font-size: var(--schriftgroesse); line-height: var(--zeilenhoehe);
  letter-spacing: var(--zeichenabstand); word-spacing: var(--wortabstand);
  -webkit-text-size-adjust: 100%;
}
body { min-height: 100dvh; }
p, li, td, th { text-align: left; hyphens: none; }
h1, h2, h3 { line-height: 1.3; letter-spacing: .02em; word-spacing: .04em; margin: 0 0 .6em; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
button { font: inherit; letter-spacing: inherit; word-spacing: inherit; color: inherit; }
.huelle { max-width: 48rem; margin: 0 auto; padding: 18px 16px 48px; }

/* ---------------------------------------------------------------- Kopf */
.kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 16px;
  background: var(--karte); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 20; }
.kopf .marke { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--wald); font-size: .95rem; }
.kopf .marke img { width: 34px; height: 34px; }
.kopf .luecke { flex: 1; }
.kopf nav { display: flex; flex-wrap: wrap; gap: 4px; }
.kopf nav button, .kopf nav a { border: 0; background: none; padding: 6px 10px; border-radius: 10px; cursor: pointer;
  font-size: .85rem; color: var(--text-leise); text-decoration: none; }
.kopf nav .an { background: var(--wald-hell); color: var(--wald); font-weight: 700; }
.kopf .fassung { font-size: .65rem; color: var(--text-leise); letter-spacing: 0; }

/* ---------------------------------------------------------------- Bausteine */
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: 18px; margin-bottom: 16px; }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px;
  padding: 10px 22px; border-radius: 14px; border: 2px solid var(--wald); background: var(--wald); color: #fff;
  font-weight: 700; cursor: pointer; text-decoration: none; touch-action: manipulation; }
.knopf.leise { background: var(--karte); color: var(--wald); }
.knopf.klein { min-height: 42px; padding: 6px 14px; font-size: .9rem; }
.knopf.gross { min-height: 64px; font-size: 1.15rem; padding: 12px 32px; }
.knopf:disabled { opacity: .45; cursor: default; }
.knopf.gold { background: var(--gold); border-color: var(--gold); }
.reihe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.reihe.mitte { justify-content: center; }
.leise { color: var(--text-leise); }
.klein { font-size: .85rem; }
.versteckt { display: none !important; }

/* Tinte spricht */
.tinte { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 14px; }
.tinte img { width: 56px; height: 56px; flex: none; }
.blase { position: relative; background: var(--karte); border: 1px solid var(--linie); border-radius: 16px;
  padding: 10px 14px; box-shadow: var(--schatten); flex: 1; }
.blase.gut { border-color: var(--gelungen); background: var(--wald-hell); }
.blase.hinweis { border-color: var(--gold); background: var(--gold-hell); }
.blase .hoeren { float: right; margin: -4px -6px 4px 8px; }
.hoeren { border: 0; background: var(--wald-hell); color: var(--wald); border-radius: 50%; width: 44px; height: 44px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.hoeren svg { width: 22px; height: 22px; }
.hoeren.spielt { background: var(--wald); color: #fff; }

/* ---------------------------------------------------------------- Start */
.welten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 10px 0 18px; }
@media (max-width: 640px) { .welten { grid-template-columns: 1fr; } }
.welt { border: 3px solid var(--linie); border-radius: var(--radius); background: var(--karte); padding: 0; cursor: pointer;
  overflow: hidden; text-align: left; }
.welt img { width: 100%; aspect-ratio: 16/9; display: block; object-fit: cover; }
.welt .name { padding: 8px 12px 0; font-weight: 700; }
.welt .zeile { padding: 0 12px 10px; font-size: .8rem; color: var(--text-leise); }
.welt.an { border-color: var(--wald); box-shadow: 0 0 0 3px var(--wald-hell); }

/* ---------------------------------------------------------------- Einheit */
.fortschritt { display: flex; gap: 6px; justify-content: center; margin: 4px 0 14px; }
.fortschritt span { width: 14px; height: 14px; border-radius: 50%; background: var(--linie); }
.fortschritt span.fertig { background: var(--wald); }
.fortschritt span.jetzt { background: var(--gold); }
.szene { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 10px; }
.szene .motiv { width: 46%; max-width: 260px; aspect-ratio: 16/9; border-radius: 12px; border: 1px solid var(--linie); background: var(--grund-tief); }
.szene .figuren { display: flex; gap: 4px; }
.szene .figuren img { width: 52px; height: 52px; }
.text { margin: 6px 0 10px; }
.text .satz { display: block; padding: 2px 6px; margin: 0 -6px 2px; border-radius: 8px; }
.text .satz.frage { font-weight: 700; margin-top: 8px; }
.text .satz.liest { background: var(--gold-hell); }
.text .wort.liest { background: var(--gold); color: #fff; border-radius: 4px; }

/* Eingabefeld (auch die PIN-Anzeige) und Tastenfeld */
.feld { min-width: 92px; min-height: 56px; padding: 6px 12px; border: 2px solid var(--linie); border-radius: 12px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; cursor: pointer; letter-spacing: .04em; }
.feld.aktiv { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-hell); }
.feld.leer { color: var(--text-leise); font-weight: 400; }
.feld.ok { border-color: var(--gelungen); background: var(--wald-hell); }
.tasten { display: grid; grid-template-columns: repeat(4, 64px); gap: 8px; margin: 10px 0; }
.tasten button { height: 58px; border-radius: 12px; border: 1px solid var(--linie); background: var(--karte); font-size: 1.3rem;
  font-weight: 700; cursor: pointer; touch-action: manipulation; }
.tasten button.zeichen { background: var(--wald-hell); color: var(--wald); }
.tasten button:active { background: var(--grund-tief); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.chips button { min-height: 48px; padding: 4px 14px; border-radius: 12px; border: 2px solid var(--wald); background: var(--wald-hell);
  color: var(--wald); font-weight: 700; cursor: pointer; }

/* Anmeldung */
.kacheln { display: flex; flex-wrap: wrap; gap: 12px; }
.kachel { min-width: 140px; min-height: 90px; border: 2px solid var(--linie); border-radius: var(--radius); background: var(--karte);
  font-size: 1.3rem; font-weight: 700; cursor: pointer; }
.kachel.probe { border-style: dashed; color: var(--text-leise); font-weight: 400; }
.pin { font-size: 2rem; letter-spacing: .4em; text-align: center; min-height: 56px; }
input[type=text], input[type=password], input[type=number], select { font: inherit; padding: 8px 10px; border: 1px solid var(--linie);
  border-radius: 10px; background: #fff; }

/* Verwaltung */
.tabelle { border-collapse: collapse; width: 100%; font-size: .85rem; letter-spacing: .02em; word-spacing: .02em; }
.tabelle th, .tabelle td { border-bottom: 1px solid var(--linie); padding: 6px 8px; vertical-align: top; }
.tabelle th { text-align: left; color: var(--text-leise); font-weight: 700; }
.ampel { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: .8rem; font-weight: 700; }
.ampel.sicher { background: var(--wald-hell); color: var(--gelungen); }
.ampel.teilweise { background: var(--gold-hell); color: var(--gold); }
.ampel.noch_nicht { background: var(--kupfer-hell); color: var(--nochnicht); }
.punkte span { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 3px; background: var(--kupfer-hell); border: 1px solid var(--nochnicht); }
.punkte span.ja { background: var(--gelungen); border-color: var(--gelungen); }
.reiter { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.reiter button { border: 1px solid var(--linie); background: var(--karte); padding: 6px 12px; border-radius: 10px; cursor: pointer; font-size: .85rem; }
.reiter button.an { background: var(--wald); color: #fff; border-color: var(--wald); }
.hinweiszeile { font-size: .8rem; color: var(--text-leise); }

/* ================================================================ Aufgabenformen
   (public/js/aufgabe.js, Schaufenster public/formen.html)

   Englische Wörter in Übungen groß und mit Luft wie in Buchstabenteuer
   (.uebungswort dort: 2.1rem, Zeichenabstand .10em). Das Wort selbst steht
   normal, die Stolperstelle fett in Kupfer auf hellem Grund: So trägt nicht
   die Farbe allein die Markierung. Keine Kursive, keine Versalien.
   Knöpfe in Aufgaben mindestens 52 px hoch (iPad, Antippen statt Ziehen).
*/
.aufgabe .hoeren { width: 52px; height: 52px; }
.aufgabe .hoeren svg { width: 24px; height: 24px; }
.aufgabe .hoeren.gross { width: 76px; height: 76px; }
.aufgabe .hoeren.gross svg { width: 36px; height: 36px; }
.aufgabe .knopf.klein { min-height: 52px; }
.aufgabe .reihe { margin: 10px 0; }
.aufgabe .reihe.mitte { justify-content: center; }
.aufgabe .anweisung .tinte { margin-bottom: 8px; }
.aufgabe .fuss:not(:empty) { margin-top: 18px; }
.aufgabe .rueck .tinte { margin: 14px 0 0; }
.tinte.klein { margin: 6px 0 10px; }
.tinte.klein img { width: 40px; height: 40px; }
.tinte.klein .blase { font-size: .9rem; padding: 8px 12px; }
.blase { line-height: 1.55; }
.aufgabe .blase { display: flex; flex-direction: row-reverse; align-items: center; gap: 12px; padding: 8px 10px 8px 16px; }
.aufgabe .blase .hoeren { float: none; margin: 0; }
.aufgabe .blasentext { flex: 1; }
.aufgabe .blasentext > div + div { margin-top: 4px; }
.blase.nochnicht { border-color: var(--nochnicht); background: var(--kupfer-hell); }

/* Schrift der Übungen */
.wortgross { font-size: 2.1rem; font-weight: 400; letter-spacing: .10em; line-height: 1.35; word-break: break-word; }
.satzgross { font-size: 1.45rem; letter-spacing: .06em; word-spacing: .22em; line-height: 1.7; }
.stolper { color: var(--kupfer); font-weight: 700; background: var(--kupfer-hell); border-radius: 5px; padding: 0 .06em; }
/* Wo die Eingabe abwich: braune, dicke Unterstreichung, fett. */
.fehlerstelle { font-weight: 700; color: var(--nochnicht); border-bottom: 4px solid var(--nochnicht); }
.deutsch { color: var(--text-leise); font-size: .9rem; }
.aufgabe .haupt > .deutsch, .satzfeld + .reihe + .deutsch { text-align: center; }
.de-gross { font-size: 1.5rem; font-weight: 700; color: var(--tinte); text-align: center; padding: 10px 6px; }
.wortblock { text-align: center; margin: 12px 0 6px; }
.stufe { margin-top: 4px; }

/* Bilder: Emoji in quadratischer Kachel, Figuren 96 px, Zahlen groß */
.bildfeld { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 4px 0 8px; }
.bildfeld .deutsch { font-size: .95rem; }
.bild.emoji, .bild.zahlbild { display: inline-flex; align-items: center; justify-content: center; width: 104px; height: 104px;
  border-radius: 18px; background: var(--grund-tief); border: 1px solid var(--linie); font-size: 64px; line-height: 1; letter-spacing: 0; }
.bild.zahlbild { font-size: 52px; font-weight: 700; color: var(--tinte); }
.bild.figurbild { width: 96px; height: 96px; }
.bildfeld.gross .bild.emoji, .bildfeld.gross .bild.zahlbild { width: 136px; height: 136px; font-size: 84px; }
.bildfeld.gross .bild.figurbild { width: 128px; height: 128px; }

/* Englische Zeile mit Hörknopf */
.enzeile { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.satzfeld { background: var(--grund); border: 1px solid var(--linie); border-radius: 12px; padding: 14px 16px; margin: 10px 0;
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; text-align: center; }
.satzfeld.ok { border: 2px solid var(--gelungen); background: var(--wald-hell); }
.satzfeld.gezeigt { border: 2px solid var(--gelungen); background: var(--karte); }
.lesefeld { margin: 8px 0 14px; }
.beispiel { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--linie); text-align: center; }
.beispiel .deutsch { margin-top: 4px; }
.nachsprechen { margin-top: 8px; }
.hoerplatz { margin: 6px 0 12px; }

/* Wahlen */
.wahlen { display: grid; gap: 12px; margin: 12px 0 4px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wahlen.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wahlen.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wahlen.spalte { grid-template-columns: 1fr; max-width: 34rem; margin-left: auto; margin-right: auto; }
.wahlen.reihe-wahl { display: flex; flex-wrap: wrap; justify-content: center; }
@media (max-width: 640px) { .wahlen.n3, .wahlen.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wahl { position: relative; min-height: 64px; padding: 10px 14px; border: 3px solid var(--linie); border-radius: var(--radius);
  background: var(--karte); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-weight: 700; touch-action: manipulation; box-shadow: var(--schatten); }
.wahl.mitbild { min-height: 150px; }
.wahl .wahltext { font-size: 1.05rem; line-height: 1.35; }
.wahl.wortwahl { min-height: 64px; flex: 1; }
.wahl.wortwahl .wahltext { font-size: 1.45rem; font-weight: 400; letter-spacing: .06em; }
.wahl.janein { min-height: 72px; font-size: 1.15rem; }
.wahl:disabled { cursor: default; }
.wahl.richtig { border-color: var(--gelungen); background: var(--wald-hell); color: var(--gelungen); }
.wahl.richtig .wahltext { font-weight: 700; }
.wahl.richtig::after, .graphemkachel.richtig::after { content: '✓'; position: absolute; top: 4px; right: 8px; font-size: 1.2rem;
  font-weight: 700; color: var(--gelungen); line-height: 1.2; }
.wahl.nochnicht, .graphemkachel.nochnicht { border-color: var(--nochnicht); border-style: dashed; background: var(--kupfer-hell); color: var(--nochnicht); }
.wahl.aus, .graphemkachel.aus { opacity: .5; }
.wahlzeile { display: flex; align-items: center; gap: 10px; }
.wahlen.reihe-wahl .wahlzeile { min-width: 11rem; }

/* Lücke im Satz */
.lueckenkasten { display: inline-block; min-width: 3.4em; height: 1.35em; vertical-align: -0.2em; margin: 0 .15em;
  border: 2px dashed var(--gold); border-radius: 8px; background: var(--gold-hell); text-align: center; line-height: 1.2; }
.lueckenkasten.gefuellt { min-width: 0; height: auto; padding: 0 .3em; border-style: solid; font-weight: 700; vertical-align: baseline; }
.lueckenkasten.richtig { border-color: var(--gelungen); background: var(--wald-hell); color: var(--gelungen); }
.lueckenkasten.gezeigt { border-color: var(--gelungen); background: var(--karte); color: var(--gelungen); }

/* Kacheln: Wort legen */
.ablage, .kachelpool { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0; }
.ablage { min-height: 78px; padding: 8px; border-radius: 14px; background: var(--grund); border: 1px solid var(--linie); }
.ablage.ok { border: 2px solid var(--gelungen); background: var(--wald-hell); }
.ablage .platz { width: 56px; height: 62px; border-bottom: 3px solid var(--linie); }
.buchstabe { width: 56px; height: 62px; border-radius: 12px; border: 2px solid var(--wald); background: var(--karte); color: var(--text);
  font-size: 1.9rem; letter-spacing: 0; cursor: pointer; touch-action: manipulation; display: inline-flex; align-items: center; justify-content: center; }
.buchstabe.gelegt { background: var(--wald-hell); }
.ablage.ok .buchstabe { border-color: var(--gelungen); color: var(--gelungen); font-weight: 700; }
.buchstabe.weg { visibility: hidden; }
.buchstabe.wackeln { animation: wackeln .35s; }
@keyframes wackeln { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .buchstabe.wackeln { animation: none; outline: 3px dashed var(--nochnicht); } }
.vorlage { text-align: center; margin: 8px 0; }
.abschreibzeile { margin-top: 8px; }

/* Schreiben */
.schreibfeld { margin: 6px 0; }
.eingabezeile { display: flex; gap: 10px; align-items: stretch; justify-content: center; flex-wrap: wrap; }
input.wortfeld { font: inherit; font-size: 1.9rem; letter-spacing: .10em; text-align: center; width: min(100%, 22rem); min-height: 72px;
  padding: 10px 14px; border: 2px solid var(--linie); border-radius: 14px; background: #fff; color: var(--text); }
input.wortfeld:focus { outline: none; border-color: var(--wald); box-shadow: 0 0 0 3px var(--wald-hell); }
.eingabezeile .knopf { min-height: 72px; }
.loesungsbox { text-align: center; margin: 10px auto; padding: 10px 14px; max-width: 30rem; border-radius: 14px; border: 2px solid var(--gelungen); background: var(--karte); }
.loesungsbox.ok { background: var(--wald-hell); }

/* Ordnen */
.auftrag { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--gold-hell);
  border: 1px solid var(--gold); font-weight: 700; margin: 6px 0 12px; }
.satzbau, .teile { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.satzbau { min-height: 84px; padding: 10px; border: 2px dashed var(--linie); border-radius: 14px; background: var(--grund); margin: 8px 0 14px; }
.satzbau .platzhalter { color: var(--linie); font-size: 1.6rem; }
.teil { min-height: 56px; padding: 6px 18px; border-radius: 12px; border: 2px solid var(--wald); background: var(--karte);
  font-size: 1.35rem; letter-spacing: .05em; cursor: pointer; touch-action: manipulation; }
.teil.gelegt { background: var(--wald-hell); }
.teil.weg { visibility: hidden; }

/* Laute */
.graphem { text-align: center; font-size: 2.6rem; font-weight: 700; color: var(--kupfer); letter-spacing: .08em; margin: 0 0 8px; }
.wortkarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 12px 0 8px; }
.wortkarte { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; min-height: 52px;
  border: 2px solid var(--linie); border-radius: var(--radius); background: var(--karte); cursor: pointer; touch-action: manipulation; }
.wortkarte .bild.emoji, .wortkarte .bild.zahlbild { width: 64px; height: 64px; font-size: 40px; border-radius: 12px; }
.wortkarte .bild.leer { height: 64px; }
.wortkarte .kartenwort { font-size: 1.5rem; letter-spacing: .08em; }
.wortkarte .deutsch { font-size: .8rem; }
.wortkarte.gehoert { border-color: var(--gelungen); background: var(--wald-hell); }
.wortkarte.gehoert::after { content: '✓'; position: absolute; top: 4px; right: 8px; color: var(--gelungen); font-weight: 700; }
.hoerpunkte { display: flex; justify-content: center; gap: 8px; margin: 8px 0; }
.hoerpunkte span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--wald); background: var(--karte); }
.hoerpunkte span.voll { background: var(--wald); }
.graphemkasten { display: inline-block; min-width: 1.7em; height: 1.2em; vertical-align: -0.15em; margin: 0 .08em; border: 2px dashed var(--gold);
  border-radius: 8px; background: var(--gold-hell); }
.graphemkasten.gefuellt { min-width: 0; height: auto; vertical-align: baseline; border: 0; padding: 0 .06em; color: var(--kupfer);
  font-weight: 700; background: var(--kupfer-hell); }
.graphemwahl { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 14px 0 4px; }
.graphemkachel { position: relative; min-width: 104px; min-height: 84px; padding: 8px 18px; border: 3px solid var(--wald); border-radius: var(--radius);
  background: var(--karte); font-size: 2rem; letter-spacing: .08em; cursor: pointer; touch-action: manipulation; box-shadow: var(--schatten); }
.graphemkachel.richtig { border-color: var(--gelungen); background: var(--wald-hell); color: var(--gelungen); font-weight: 700; }
.ganzeswort { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ganzeswort .pfeil { font-size: 1.6rem; color: var(--text-leise); }

/* Geschichte */
.szenentitel { text-align: center; margin: 4px 0 10px; }
.neuwoerter { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.neuwort { display: inline-flex; align-items: baseline; gap: 8px; min-height: 52px; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--gold);
  background: var(--gold-hell); cursor: pointer; }
.neuwort .en { font-weight: 700; }
.neuwort .de { font-size: .85rem; color: var(--text-leise); }
.geschichtstext { font-size: 1.3rem; letter-spacing: .06em; word-spacing: .2em; line-height: 1.8; margin: 8px 0 12px; }
.geschichtstext .satz { display: flex; align-items: flex-start; gap: 10px; padding: 4px 8px; margin: 0 -8px 4px; border-radius: 10px; }
.geschichtstext .satz .hoeren { margin-top: 2px; }
.geschichtstext.einzeln .satz { cursor: pointer; border: 2px dashed var(--linie); margin: 0 0 6px; }
.geschichtstext .satzinhalt { flex: 1; }
.geschichtstext .deutsch { font-size: .95rem; letter-spacing: .02em; word-spacing: .05em; line-height: 1.5; }
.deutschknopf { flex: none; align-self: center; min-height: 52px; padding: 4px 12px; border-radius: 10px; border: 1px solid var(--linie);
  background: var(--karte); color: var(--text-leise); font-size: .85rem; letter-spacing: .02em; cursor: pointer; }
.knopf.leise.an { background: var(--wald-hell); }
.frage { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--linie); }
.aufgabe .szene { justify-content: center; }
.aufgabe .szene .figuren img { width: 60px; height: 60px; }

/* ---------------------------------------------------------------- Einheit (app.js) */
.einheit-oben { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.balken { flex: 1; height: 12px; border-radius: 6px; background: var(--linie); overflow: hidden; }
.balken-innen { height: 100%; background: var(--wald); border-radius: 6px; transition: width .4s ease; }
@media (prefers-reduced-motion: reduce) { .balken-innen { transition: none; } }
.abschnitt { margin: 0 0 8px; }
.abschnitt-text { display: flex; align-items: center; gap: 10px; color: var(--text-leise); font-size: .9rem; }
.abschnitt-text .hoeren { width: 36px; height: 36px; }
.seitenreihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; }
@media (max-width: 640px) { .seitenreihe { grid-template-columns: 1fr; } }
.seitenzahl { border: 2px solid var(--linie); border-radius: 12px; padding: 8px 12px; background: var(--karte); }
.seitenzahl .zahl { font-weight: 700; color: var(--wald); }
.ichkann li { margin: 4px 0; }
.wortchips { display: flex; flex-wrap: wrap; gap: 6px; }
.wortchip { border: 2px solid var(--linie); background: var(--karte); border-radius: 10px; padding: 4px 10px; min-height: 40px; cursor: pointer; font-size: .9rem; }
.wortchip.sicher { border-color: var(--gelungen); background: var(--wald-hell); color: var(--gelungen); font-weight: 700; }
.wortchip.gut { border-color: var(--gold); background: var(--gold-hell); }
.wortchip.uebt { border-color: var(--linie); }
.wortchip.neu { color: var(--text-leise); cursor: default; min-width: 40px; }

/* Dialog: Zeilen wie ein Gespräch, Quill links, die Person rechts. */
.dialogort { text-align: center; color: var(--text-leise); margin: 4px 0 8px; }
.dialog { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 12px; }
.dialogzeile { display: flex; align-items: flex-start; gap: 10px; max-width: 92%; }
.dialogzeile.person { align-self: flex-end; flex-direction: row-reverse; text-align: right; }
.dialogzeile .sprecherbild { flex: 0 0 44px; display: flex; justify-content: center; }
.dialogzeile .sprecherbild .bild.emoji { font-size: 34px; line-height: 44px; }
.dialoginhalt { background: var(--grund); border: 1px solid var(--linie); border-radius: 12px; padding: 8px 12px; }
.dialogzeile.person .dialoginhalt .enzeile { justify-content: flex-end; }
.sprechername { font-size: .85em; color: var(--text-leise); margin-bottom: 2px; }
.dialogtext { font-size: 1.25em; }
.dialogluecke { font-size: 1.4em; letter-spacing: .2em; min-width: 4em; }
.dialogluecke.gefuellt { letter-spacing: normal; font-size: inherit; }
.dialogzeile.offen .dialoginhalt { border-style: dashed; }