/* ============================================================
   schoolday-trainer — Design-System

   WICHTIGSTE REGEL: niemals Farben hartkodieren. Ausschliesslich
   die Variablen aus :root verwenden. Der Darkmode ist ein zweiter
   Variablensatz unter @media (prefers-color-scheme: dark) — wer
   eine Farbe direkt hinschreibt, baut eine Stelle, die im Dunkeln
   falsch aussieht. Das gilt auch fuer Verlaeufe: die stehen
   deshalb ebenfalls als Variable hier (--start-bg, --bonus-verlauf).
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  color-scheme: light;

  /* ---------- Neutrale Flächen ----------
     Benannt wie in schoolday, damit man zwischen beiden Projekten nicht
     umdenken muss — und damit sich ein Thema von dort übertragen lässt. */
  --bg: #FAF7F2;
  --surface: #FFFFFF;
  --surface-alt: #FFFFFF;
  --border: #E5E7EB;
  --border-strong: #C9CDD4;
  --text: #1F2937;
  /* Sekundärtext bewusst dunkler als im Vorgänger (#9CA3AF): auf Weiß
     kam das nur auf 2,5:1 — für 13px zu wenig. */
  --text-muted: #5E6878;
  --accent: #C2410C;
  --accent-text: #FFFFFF;
  --header-bg: #2B2A28;
  --header-text: #F3F1ED;
  --header-quiet: rgba(255, 255, 255, 0.62);
  --header-fill: rgba(255, 255, 255, 0.14);
  --tastatur-bg: #F1EEE9;
  --shadow: 0 2px 8px rgba(0,0,0,0.06);
  --start-bg: linear-gradient(180deg, #FAF7F2 0%, #FFF7ED 100%);

  /* Ein Radius, zwei Größen. Vorher standen hier fünfzehn verschiedene. */
  --radius: 14px;
  --radius-gross: 20px;
  --radius-klein: 8px;

  /* ---------- Akzente als TEXT ---------- */
  --orange: #FB923C;
  --orange-dunkel: #C2410C;
  --rot: #DC2626;
  --gruen: #059669;
  --blau: #2563EB;
  --gelb: #FCD34D;
  --gelb-dunkel: #B45309;
  --lila: #7C3AED;
  --lila-dunkel: #5B21B6;
  --platzhalter: #4B5563;

  /* ---------- Akzente als FLÄCHE ----------
     Nicht dasselbe wie oben: Akzente werden im Dunkeln heller, damit sie
     als Text tragen. Genau das macht sie als Fläche unbrauchbar — weiß
     auf hellgrün ist nicht zu lesen. Flächen bleiben deshalb kräftig. */
  --auf-flaeche: #FFFFFF;
  --fl-orange: #C2410C;
  --fl-orange-2: #9A3412;
  --fl-lila: #7C3AED;
  --fl-lila-2: #5B21B6;
  --fl-gruen: #047857;
  --fl-rot: #DC2626;
  --fl-blau: #2563EB;

  /* Fachfarben — seit die Kacheln nur noch eine Kante tragen, gelten sie
     in jedem Thema. */
  --fach-mathe: #2563EB;
  /* "-schrift" ist eine Rolle, keine Farbe: der Ton, der AUF der Karte
     lesbar ist. Im Hellen ist das der dunklere, im Dunkeln der hellere.
     Solange das Token "-dunkel" hiess, erbten die dunklen Themen den
     dunkelblauen Wert und setzten ihn auf eine dunkle Karte — 1,1:1. */
  --fach-mathe-schrift: #1E40AF;
  --fach-deutsch: #047857;
  --fach-deutsch-schrift: #064E3B;
  --fach-englisch: #DB2777;
  --fach-englisch-schrift: #9D174D;

  /* ---------- Getönte Flächen ---------- */
  --hinweis-bg: #FEF3C7;
  --bonus-bg: #FFFBEB;
  --richtig-bg: #D1FAE5;
  --falsch-bg: #FEE2E2;
  --taste-loeschen-bg: #E0E7FF;
  --bonus-verlauf: linear-gradient(135deg, #FEF3C7 0%, #FED7AA 100%);
  --zifferngruppe-bg: rgba(251, 146, 60, 0.08);
  --balken-spur: rgba(255, 255, 255, 0.28);
  --schleier: rgba(0, 0, 0, 0.6);

  /* Das Stellenwertgitter leitet sich ab und passt damit zu jedem Thema. */
  --karo-bg: var(--surface);
  --karo-rand: var(--border-strong);
  --karo-strich: var(--text);
  --karo-kopf-bg: var(--border);
  --karo-kopf-text: var(--text-muted);

  --schatten-orange: 0 6px 20px rgba(194, 65, 12, 0.22);
  --schatten-lila: 0 4px 12px rgba(124, 58, 237, 0.28);
  --schatten-gruen: 0 2px 8px rgba(5, 150, 105, 0.3);
  --schatten-rot: 0 4px 12px rgba(220, 38, 38, 0.3);
  --schatten-taste: 0 1px 3px rgba(0, 0, 0, 0.1);

  /* Masse — an den Breakpoints weiter unten kleiner gesetzt */
  --karo-groesse: 56px;
  --karo-schrift: 28px;
  --karo-header-schrift: 14px;
  --karo-header-hoehe: 36px;
  --taste-hoehe: 56px;
  --taste-schrift: 24px;
  --buchstabe-hoehe: 46px;
  --buchstabe-schrift: 19px;

  --safe-oben: env(safe-area-inset-top, 0px);
  --safe-unten: env(safe-area-inset-bottom, 0px);
}

/* ============= DUNKLE SEMANTIK =============
   Gilt für jedes dunkle Thema und für den Standard, wenn das Gerät
   dunkel steht. Nur Akzente und getönte Flächen — die neutralen
   Flächen bringt jedes Thema selbst mit. */
/* Bewusst OHNE :where(): das setzt die Spezifität auf null, und dann
   überstimmt :root diesen Satz — die dunklen Themen bekämen helle
   Tönungen mit hellem Text darauf. Mit Attributwähler liegt er über
   :root und unter den Themenblöcken darunter. */
html[data-theme="taher"],
html[data-theme="tiefsee"] {
  --fach-mathe: #60A5FA;
  --fach-mathe-schrift: #93C5FD;
  --fach-deutsch: #34D399;
  --fach-deutsch-schrift: #6EE7B7;
  --fach-englisch: #F472B6;
  --fach-englisch-schrift: #F9A8D4;
  --orange-dunkel: #FDBA74;
  --rot: #F87171;
  --gruen: #34D399;
  --blau: #93C5FD;
  --gelb-dunkel: #FBBF24;
  --lila: #A78BFA;
  --lila-dunkel: #7C3AED;
  --platzhalter: #A7B0BE;
  --fl-lila: #6D28D9;
  --fl-lila-2: #4C1D95;
  --fl-rot: #B91C1C;
  --fl-blau: #1D4ED8;
  --hinweis-bg: #3D3013;
  --bonus-bg: #33290F;
  --richtig-bg: #10382B;
  --falsch-bg: #43201F;
  --taste-loeschen-bg: #253252;
  --bonus-verlauf: linear-gradient(135deg, #3D3013 0%, #4A2D14 100%);
  --zifferngruppe-bg: rgba(251, 146, 60, 0.12);
  --balken-spur: rgba(255, 255, 255, 0.22);
  --schleier: rgba(0, 0, 0, 0.7);
  --schatten-orange: 0 6px 20px rgba(0, 0, 0, 0.45);
  --schatten-lila: 0 4px 12px rgba(0, 0, 0, 0.45);
  --schatten-gruen: 0 2px 8px rgba(0, 0, 0, 0.4);
  --schatten-rot: 0 4px 12px rgba(0, 0, 0, 0.4);
  --schatten-taste: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ============= THEMEN =============
   Ein Thema setzt nur die neutralen Flächen. Alles andere leitet sich
   ab oder kommt aus den Sätzen darüber. Übernommen aus schoolday,
   damit beide Apps dieselben Farben kennen. */

/* Das Haus bei Nacht — warmes Dunkelgrau und Kupfer, wie taher.de. */
html[data-theme="taher"] {
  color-scheme: dark;
  --bg: #3A3937;
  --surface: #46443F;
  --surface-alt: #403E3A;
  --border: #57544E;
  --border-strong: #706C65;
  --text: #F3F1ED;
  --text-muted: #BDB8B0;
  --accent: #DCB18E;
  --accent-text: #241F1A;
  --header-bg: #2B2A28;
  --header-text: #F3F1ED;
  --tastatur-bg: #333230;
  --shadow: 0 1px 2px rgba(0,0,0,.28), 0 4px 16px rgba(0,0,0,.24);
  --start-bg: #3A3937;
}

/* Dasselbe Haus bei Tageslicht. */
html[data-theme="taher-hell"] {
  color-scheme: light;
  --bg: #E6E3DD;
  --surface: #F7F5F1;
  --surface-alt: #FFFFFF;
  --border: #D5D1C9;
  --border-strong: #B3AEA4;
  --text: #2A2724;
  --text-muted: #5F5A53;
  --accent: #9A5A2F;
  --accent-text: #FFFFFF;
  --header-bg: #2B2A28;
  --header-text: #F3F1ED;
  --tastatur-bg: #DEDAD2;
  --shadow: 0 1px 2px rgba(58,57,55,.08), 0 4px 16px rgba(58,57,55,.09);
  --start-bg: #E6E3DD;
}

html[data-theme="tiefsee"] {
  color-scheme: dark;
  --bg: #04252B;
  --surface: #073540;
  --surface-alt: #0A4250;
  --border: #10586A;
  --border-strong: #1A7286;
  --text: #E4F6F8;
  --text-muted: #A8D5DC;
  --accent: #FF7A59;
  --accent-text: #2B0D02;
  --header-bg: #021A1F;
  --header-text: #E4F6F8;
  --tastatur-bg: #052C34;
  --shadow: 0 1px 2px rgba(0,10,12,.5), 0 4px 16px rgba(0,10,12,.4);
  --start-bg: #04252B;
}

html[data-theme="minze"] {
  color-scheme: light;
  --bg: #E4F2EA;
  --surface: #FFFFFF;
  --surface-alt: #EFF8F3;
  --border: #C9E2D5;
  --border-strong: #A4CAB7;
  --text: #0F2619;
  --text-muted: #456052;
  --accent: #0C6A4D;
  --accent-text: #FFFFFF;
  --header-bg: #0A2A20;
  --header-text: #FFFFFF;
  --tastatur-bg: #D8EAE0;
  --shadow: 0 1px 2px rgba(15,60,40,.07), 0 4px 16px rgba(15,60,40,.08);
  --start-bg: #E4F2EA;
}

html[data-theme="beere"] {
  color-scheme: light;
  --bg: #F5CFE0;
  --surface: #FDF3F8;
  --surface-alt: #FFFFFF;
  --border: #E3AAC6;
  --border-strong: #C97FA5;
  --text: #3A0F24;
  --text-muted: #7A3153;
  --accent: #A81B5E;
  --accent-text: #FFFFFF;
  --header-bg: #2B0A1B;
  --header-text: #FFD9EA;
  --tastatur-bg: #EFC2D6;
  --shadow: 0 1px 2px rgba(90,20,50,.12), 0 4px 16px rgba(90,20,50,.1);
  --start-bg: #F5CFE0;
}

/* Ohne gewähltes Thema folgt die App dem Gerät. Die Einschränkung auf
   :not([data-theme]) ist wichtig: sonst überstimmte die Systemeinstellung
   eine ausdrückliche Wahl. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --bg: #12151A;
    --surface: #1E242C;
    --surface-alt: #232A34;
    --border: #353D49;
    --border-strong: #4A5464;
    --text: #E7EAEE;
    --text-muted: #949CA9;
    --accent: #FDBA74;
    --accent-text: #241F1A;
    --header-bg: #0C0E12;
    --header-text: #E7EAEE;
    --tastatur-bg: #1A1F26;
    --shadow: 0 2px 8px rgba(0,0,0,0.35);
    --start-bg: linear-gradient(180deg, #12151A 0%, #1B1712 100%);

    --fach-mathe: #60A5FA;
    --fach-mathe-schrift: #93C5FD;
    --fach-deutsch: #34D399;
    --fach-deutsch-schrift: #6EE7B7;
    --fach-englisch: #F472B6;
    --fach-englisch-schrift: #F9A8D4;
    --orange-dunkel: #FDBA74;
    --rot: #F87171;
    --gruen: #34D399;
    --blau: #93C5FD;
    --gelb-dunkel: #FBBF24;
    --lila: #A78BFA;
    --lila-dunkel: #7C3AED;
    --platzhalter: #A7B0BE;
    --fl-lila: #6D28D9;
    --fl-lila-2: #4C1D95;
    --fl-rot: #B91C1C;
    --fl-blau: #1D4ED8;
    --hinweis-bg: #3D3013;
    --bonus-bg: #33290F;
    --richtig-bg: #10382B;
    --falsch-bg: #43201F;
    --taste-loeschen-bg: #253252;
    --bonus-verlauf: linear-gradient(135deg, #3D3013 0%, #4A2D14 100%);
    --zifferngruppe-bg: rgba(251, 146, 60, 0.12);
    --balken-spur: rgba(255, 255, 255, 0.22);
    --schleier: rgba(0, 0, 0, 0.7);
    --schatten-orange: 0 6px 20px rgba(0, 0, 0, 0.45);
    --schatten-lila: 0 4px 12px rgba(0, 0, 0, 0.45);
    --schatten-gruen: 0 2px 8px rgba(0, 0, 0, 0.4);
    --schatten-rot: 0 4px 12px rgba(0, 0, 0, 0.4);
    --schatten-taste: 0 1px 3px rgba(0, 0, 0, 0.5);
  }
}

/* ============= SCHRIFTEN =============
   Dieselben wie in schoolday, selbst gehostet: Archivo fürs Wortzeichen,
   IBM Plex Sans für Text, IBM Plex Mono für die Kleinlabels. Zusammen
   100 KB, offline verfügbar, kein fremder Server. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("fonts/archivo-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
}

@media (max-width: 480px) {
  :root {
    --karo-groesse: 40px;
    --karo-schrift: 22px;
    --karo-header-schrift: 11px;
    --karo-header-hoehe: 28px;
    --taste-hoehe: 48px;
    --taste-schrift: 22px;
    --buchstabe-hoehe: 42px;
    --buchstabe-schrift: 17px;
  }
}
@media (max-width: 380px) {
  :root {
    --karo-groesse: 36px;
    --karo-schrift: 20px;
    --buchstabe-hoehe: 38px;
    --buchstabe-schrift: 15px;
  }
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ============= ZEICHEN =============
   Alle Symbole sind Linien-SVG aus zeichen.js. Sie messen 1em, damit
   die font-size der Umgebung weiter die Groesse bestimmt — die Regeln
   darunter mussten beim Umstieg von Emoji auf SVG nicht angefasst
   werden. Die Farbe kommt ueber currentColor, also aus dem Thema.
   ============================================================ */
.zeichen {
  width: 1em;
  height: 1em;
  display: block;
  flex-shrink: 0;
  /* Optisch mittig: die Grundlinie der Schrift liegt tiefer als die
     Mitte des Quadrats, sonst haengt jedes Zeichen neben seinem Text. */
  vertical-align: -0.145em;
}
/* Wo Zeichen und Text nebeneinander in einem Textfluss stehen. */
.zeichen.im-fluss { display: inline-block; }

/* ============= ANSICHTEN =============
   Genau eine Ansicht traegt .aktiv. Umgeschaltet wird in kern.js
   ueber ansichtZeigen(); kein Router, keine Adresszeile — die App
   laeuft auch als Symbol auf dem Home-Bildschirm ohne Zurueck-Taste. */
.ansicht { display: none; flex-direction: column; overflow: hidden; }
/* min-height: 0 ist noetig, damit der Inhalt INNEN scrollt statt die
   Ansicht zu strecken — sonst schoebe eine lange Aufgabe die Tastatur
   aus dem Bild. */
.ansicht.aktiv { display: flex; flex: 1; min-height: 0; }

.blaettern {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(28px + var(--safe-oben)) 24px calc(32px + var(--safe-unten));
  background: var(--start-bg);
}

/* ============= WORTZEICHEN =============
   Archivo, eng gesperrt, klein geschrieben, darunter die Messlatte aus
   Akzentstück und Linie — dieselbe Handschrift wie auf taher.de und im
   schoolday-Login. Auf dunklem Grund, wie die Leiste in den anderen
   Ansichten: damit sieht jede Ansicht oben gleich aus. */
.marke {
  background: var(--header-bg);
  color: var(--header-text);
  padding: calc(16px + var(--safe-oben)) 20px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.marke-inhalt { flex: 1; min-width: 0; }
.marke-wort {
  font-family: Archivo, "Helvetica Neue", sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.045em;
}
.marke-suffix { color: var(--header-quiet); }
.marke-latte { display: flex; height: 2px; margin: 9px 0 8px; }
.marke-latte-akzent { flex: 0 0 74px; background: var(--accent); }
.marke-latte-rest { flex: 1; background: var(--header-fill); }
.marke-unterzeile {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--header-quiet);
}
.marke .stufe-chip {
  background: var(--header-fill);
  border-color: transparent;
  color: var(--header-text);
  box-shadow: none;
}
@media (max-width: 380px) {
  .marke-wort { font-size: 26px; }
  .marke-latte-akzent { flex-basis: 64px; }
}

/* ============= KOPFBEREICH DER STARTANSICHTEN ============= */
.kopf {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
}
.kopf-text { flex: 1; min-width: 0; }
.kopf-titel {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.kopf-titel .akzent { color: var(--orange-dunkel); }
.kopf-untertitel { font-size: 16px; color: var(--text-muted); margin-top: 4px; }

/* Profil-Chip oben rechts — zeigt, wer gerade uebt, und wechselt per Tipp */
.stufe-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px 7px 8px;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.stufe-chip:active { transform: scale(0.97); }
.stufe-chip-icon { font-size: 24px; }
.stufe-chip-name { font-weight: 700; font-size: 15px; }

.zurueck-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.zurueck-knopf {
  background: var(--border);
  border: none;
  width: 44px; height: 44px;
  border-radius: var(--radius);
  font-size: 22px;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.zurueck-knopf:active { transform: scale(0.94); }

/* ============= PROFILAUSWAHL ============= */
.stufe-wahl {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 24px calc(32px + var(--safe-unten));
  background: var(--start-bg);
  overflow-y: auto;
}
.stufe-wahl .kopf-titel { font-size: 40px; text-align: center; }
.stufe-wahl .kopf-untertitel { text-align: center; margin-bottom: 32px; }
.stufe-liste { display: grid; gap: 14px; max-width: 460px; width: 100%; margin: 0 auto; }
.stufe-karte {
  background: var(--surface);
  border: 3px solid transparent;
  border-radius: var(--radius-gross);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.stufe-karte:active { transform: scale(0.98); }
.stufe-karte.aktiv { border-color: var(--orange); }
.stufe-karte-icon { font-size: 44px; }
.stufe-karte-info { flex: 1; min-width: 0; }
.stufe-karte-name { font-size: 24px; font-weight: 800; }
.stufe-karte-zeile { font-size: 14px; color: var(--text-muted); margin-top: 2px; }

/* ============= PUNKTE-BANNER ============= */
/* Der Punktestand ist eine Anzeige, keine Aktion — seit die Fachkacheln
   ruhig sind, wäre eine volle Farbfläche hier das Lauteste auf dem
   Bildschirm. */
.punkte-banner {
  background: var(--surface);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow);
}
.punkte-label { font-size: 14px; color: var(--text-muted); margin-bottom: 2px; }
.punkte-zahl { font-size: 34px; font-weight: 900; color: var(--accent); }
.punkte-pokal { font-size: 50px; }

/* ============= FACH-KACHELN ============= */
.fach-liste { display: grid; gap: 14px; margin-bottom: 24px; }
/* Die Fachfarbe trägt eine KANTE, keine Fläche — wie die Werke auf
   taher.de. Drei kräftige Verläufe nebeneinander waren zu laut, und die
   Farbcodierung geht dabei nicht verloren: Ben findet Englisch weiter,
   ohne zu lesen. */
.fach-karte {
  --fach-farbe: var(--blau);
  --fach-farbe-schrift: var(--blau);
  background: var(--surface);
  color: var(--text);
  border-left: 5px solid var(--fach-farbe);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.fach-karte:active { transform: scale(0.98); }
.fach-karte-icon { font-size: 40px; flex-shrink: 0; }
.fach-karte-info { flex: 1; min-width: 0; }
.fach-karte-name { font-size: 23px; font-weight: 800; }
.fach-karte-zeile { font-size: 14px; color: var(--text-muted); margin-top: 3px; }
.fach-karte-pfeil { font-size: 26px; color: var(--text-muted); }
/* Fortschrittsbalken in der Kachel */
.fach-balken {
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  margin-top: 10px;
  overflow: hidden;
}
.fach-balken-fuellung { height: 100%; background: var(--fach-farbe); border-radius: 3px; }

/* ============= BLATT-KARTEN ============= */
.blatt-liste { display: grid; gap: 14px; margin-bottom: 26px; }
.blatt-karte {
  background: var(--surface);
  border-radius: var(--radius-gross);
  padding: 16px 16px;
  box-shadow: var(--shadow);
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.blatt-karte.generiert { border-left: 4px solid var(--accent); }
/* Das Blatt des Tages soll man beim Aufklappen sofort sehen. */
.blatt-karte.heute { border-left: 4px solid var(--fl-orange); background: var(--bonus-bg); }
.blatt-karte:active { transform: scale(0.98); }
.blatt-medaille { font-size: 32px; flex-shrink: 0; }
.blatt-info { flex: 1; min-width: 0; }
.blatt-tag {
  font-size: 12px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
  /* Eine Zeile, notfalls gekürzt: "GYMNASIUM · 1. HALBJAHR" brach neben
     dem Druckknopf um und schob die Karte auseinander. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.blatt-name { font-size: 19px; font-weight: 700; margin-top: 3px; }
.blatt-status { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.blatt-karte.erledigt .blatt-status { color: var(--gruen); font-weight: 600; }
.blatt-karte.angefangen .blatt-status { color: var(--orange-dunkel); font-weight: 600; }
.blatt-pfeil { font-size: 26px; color: var(--text-muted); flex-shrink: 0; }
.blatt-karte.erledigt .blatt-pfeil { color: var(--gruen); }

/* Ein Punkt pro Aufgabe — auf einen Blick sichtbar, was noch offen ist */
.status-punkte { display: flex; gap: 3px; margin-top: 8px; flex-wrap: wrap; }
.status-punkt {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0;
}
.status-punkt.richtig { background: var(--fl-gruen); color: var(--auf-flaeche); }
.status-punkt.richtig::after { content: '✓'; font-size: 10px; font-weight: bold; }
.status-punkt.falsch { background: var(--fl-rot); color: var(--auf-flaeche); }
.status-punkt.falsch::after { content: '✕'; font-size: 10px; font-weight: bold; }
.status-punkt.angefangen { background: var(--fl-orange); }
.status-punkt.bonus {
  background: var(--gelb); border: 1.5px solid var(--gelb-dunkel);
  width: 18px; height: 18px;
}
.status-punkt.bonus.richtig { background: var(--gelb); border-color: var(--gelb-dunkel); }
.status-punkt.bonus.richtig::after { content: '★'; color: var(--gelb-dunkel); font-size: 12px; }
.status-punkt.bonus.falsch::after { content: '★'; color: var(--rot); font-size: 12px; }

/* ============= GROSSE KNOEPFE ============= */
.grossknopf {
  border: none;
  width: 100%;
  padding: 17px 22px;
  border-radius: var(--radius);
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  color: var(--accent-text);
  cursor: pointer;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Alle Hauptknöpfe tragen die Themenfarbe — so ist das gewählte Thema
     überall sichtbar, und es liegen nicht drei verschiedene Farbflächen
     übereinander. Unterschieden werden sie am Zeichen davor. */
  background: var(--accent);
  box-shadow: var(--shadow);
}
.grossknopf:active { transform: scale(0.98); }
.grossknopf .icon { font-size: 21px; }

.fuss { margin-top: auto; padding-top: 16px; }
.stiller-knopf {
  width: 100%;
  background: transparent;
  border: 2px solid var(--border);
  color: var(--text-muted);
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.stiller-knopf:active { background: var(--falsch-bg); border-color: var(--rot); color: var(--rot); }

.leer-hinweis {
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 24px;
}

/* ============= AUFGABEN-ANSICHT ============= */
/* Die Tastatur liegt seit dem Vokabelkasten NICHT mehr in der
   Aufgabenansicht, sondern als Geschwister daneben — beide Bereiche
   teilen sie sich. Deshalb hier keine feste Hoehe mehr. */
.tastatur { flex-shrink: 0; }

/* In schoolday ist die dunkle Kopfzeile in JEDEM Thema gleich — sie ist
   dort das Wiedererkennungszeichen. Der Trainer hält es genauso. */
.leiste {
  display: flex;
  align-items: center;
  padding: calc(12px + var(--safe-oben)) 18px 12px;
  background: var(--header-bg);
  color: var(--header-text);
  gap: 12px;
}
.leiste .zurueck-knopf { background: var(--header-fill); color: var(--header-text); }
.leiste .leiste-fortschritt { color: var(--header-quiet); }
.leiste-info { flex: 1; min-width: 0; }
.leiste-name { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leiste-fortschritt { font-size: 13px; color: var(--text-muted); margin-top: 1px; }
.pruefen-knopf {
  background: var(--fl-gruen);
  color: var(--auf-flaeche);
  border: none;
  padding: 12px 18px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: var(--schatten-gruen);
}
.pruefen-knopf:active { transform: scale(0.95); }
.pruefen-knopf.gesperrt { background: var(--border); color: var(--text-muted); box-shadow: none; cursor: default; }
.pruefen-knopf.nochmal { background: var(--fl-orange); box-shadow: var(--schatten-orange); }
.pruefen-knopf.fertig { background: var(--fl-gruen); }

.balken { height: 4px; background: var(--border); }
.balken-fuellung {
  height: 100%;
  background: linear-gradient(90deg, var(--fl-orange) 0%, var(--fl-orange-2) 100%);
  transition: width 0.3s;
}

.aufgabe-inhalt {
  flex: 1;
  overflow-y: auto;
  padding: 22px 20px 30px;
  -webkit-overflow-scrolling: touch;
}
.aufgabe-titel {
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  margin-bottom: 10px;
}
.aufgabe-zeile {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px; margin-bottom: 16px;
}
.aufgabe-frage-text { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; }
/* Fliesstext-Frage (Deutsch, Englisch, Sachaufgaben) — kleiner und mit Zeilenabstand */
.aufgabe-satz {
  font-size: 22px; font-weight: 700; line-height: 1.45;
  margin-bottom: 18px;
}
.aufgabe-satz .betont {
  background: var(--hinweis-bg);
  border-bottom: 3px solid var(--gelb-dunkel);
  /* Nur 2px seitlich: bei 4px sah ein direkt folgendes Fragezeichen
     aus, als stuende ein Leerzeichen davor. */
  padding: 0 2px; border-radius: 4px;
}
.aufgabe-hinweis { font-size: 14px; color: var(--text-muted); margin-bottom: 18px; line-height: 1.5; }
.aufgabe-hinweis b { color: var(--text); }

.rueckmeldung {
  padding: 13px 15px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-weight: 700;
  font-size: 15px;
  display: flex; align-items: center; gap: 10px;
}
.rueckmeldung.gut { background: var(--richtig-bg); color: var(--gruen); border: 1.5px solid var(--gruen); }
.rueckmeldung.erster { background: var(--hinweis-bg); color: var(--gelb-dunkel); border: 1.5px solid var(--gelb); }
.rueckmeldung.zweiter { background: var(--falsch-bg); color: var(--rot); border: 1.5px solid var(--rot); }

/* ============= EINGABEFELDER ============= */
/* Ziffernfelder (ein Zeichen, Sprung zum naechsten) */
.zifferngruppe {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--zifferngruppe-bg); border-radius: var(--radius);
}
.ziffernfeld {
  width: 50px; height: 60px;
  background: var(--bonus-bg);
  border: 2.5px dashed var(--orange);
  border-radius: var(--radius-klein);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800;
  cursor: pointer; color: var(--text);
}
.ziffernfeld.aktiv { background: var(--hinweis-bg); border-style: solid; animation: blinken 1s ease-in-out infinite; }
.ziffernfeld.richtig { background: var(--richtig-bg); border-color: var(--gruen); border-style: solid; color: var(--gruen); }
.ziffernfeld.falsch { background: var(--falsch-bg); border-color: var(--rot); border-style: solid; color: var(--rot); }
@media (max-width: 480px) {
  .ziffernfeld { width: 40px; height: 50px; font-size: 24px; }
  .aufgabe-frage-text { font-size: 25px; }
  .aufgabe-satz { font-size: 19px; }
}
@media (max-width: 380px) {
  .ziffernfeld { width: 36px; height: 46px; font-size: 22px; }
}

/* Breites Antwortfeld (Kopfrechnen, Vokabeln, Diktat) */
.antwort-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.antwortfeld {
  flex: 1;
  min-height: 62px;
  padding: 14px 18px;
  font-size: 26px;
  font-weight: 800;
  border: 2.5px solid var(--orange);
  border-radius: var(--radius);
  background: var(--surface-alt);
  text-align: center;
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  word-break: break-word;
}
.antwortfeld.leer { color: var(--platzhalter); font-weight: 600; }
.antwortfeld.aktiv { background: var(--hinweis-bg); animation: blinken 1s ease-in-out infinite; }
.antwortfeld.richtig { background: var(--richtig-bg); border-color: var(--gruen); color: var(--gruen); }
.antwortfeld.falsch { background: var(--falsch-bg); border-color: var(--rot); color: var(--rot); }
.antwortfeld.text { font-size: 24px; letter-spacing: 0.5px; }
.einheit-label { font-weight: 700; font-size: 20px; flex-shrink: 0; }

/* Luecke im Satz (Einheiten, Lueckentext) */
.luecke {
  display: inline-block;
  min-width: 96px; min-height: 50px;
  padding: 3px 12px;
  background: var(--bonus-bg);
  border: 2.5px dashed var(--orange);
  border-radius: var(--radius-klein);
  text-align: center;
  font-weight: 700;
  cursor: pointer;
  line-height: 42px;
  vertical-align: middle;
}
.luecke.leer { color: var(--platzhalter); }
.luecke.aktiv { background: var(--hinweis-bg); border-style: solid; animation: blinken 1s ease-in-out infinite; }
.luecke.richtig { background: var(--richtig-bg); border-color: var(--gruen); border-style: solid; color: var(--gruen); }
.luecke.falsch { background: var(--falsch-bg); border-color: var(--rot); border-style: solid; color: var(--rot); }
@media (max-width: 480px) {
  .luecke { min-width: 70px; min-height: 42px; padding: 2px 10px; line-height: 36px; }
}
.satz-mit-luecke {
  font-size: 26px; font-weight: 700;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 14px; line-height: 1.5;
}
@media (max-width: 480px) { .satz-mit-luecke { font-size: 20px; gap: 6px; } }

/* Auswahlaufgaben — grosse Flaechen, mit dem Daumen zu treffen */
.auswahl-liste { display: grid; gap: 10px; margin-bottom: 8px; }
/* Zwei mal zwei — nur in der Blitzrunde und nur bei kurzen Antworten.
   In der Aufgabenansicht bleibt es bei einer Spalte: dort wird gelesen
   und nicht auf Zeit getippt, und die Buchstaben A–D stehen so auch
   auf dem gedruckten Blatt untereinander. */
.auswahl-liste.raster { grid-template-columns: 1fr 1fr; }
.auswahl-option.spiel-option {
  justify-content: center;
  text-align: center;
  min-height: 76px;
  padding: 14px 12px;
}
.auswahl-option {
  background: var(--surface);
  border: 2.5px solid var(--border);
  border-radius: var(--radius);
  padding: 17px 18px;
  font-size: 19px;
  font-weight: 700;
  font-family: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  display: flex; align-items: center; gap: 12px;
}
.auswahl-option:active { transform: scale(0.99); }
.auswahl-option .marke {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--border);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800;
}
.auswahl-option.gewaehlt { border-color: var(--orange); background: var(--bonus-bg); }
.auswahl-option.gewaehlt .marke { border-color: var(--orange); background: var(--fl-orange); color: var(--auf-flaeche); }
.auswahl-option.richtig { border-color: var(--gruen); background: var(--richtig-bg); color: var(--gruen); }
.auswahl-option.richtig .marke { border-color: var(--gruen); background: var(--fl-gruen); color: var(--auf-flaeche); }
.auswahl-option.falsch { border-color: var(--rot); background: var(--falsch-bg); color: var(--rot); }
.auswahl-option.falsch .marke { border-color: var(--rot); background: var(--fl-rot); color: var(--auf-flaeche); }

/* Vorlesen — die Stimme steckt im Betriebssystem, es braucht keine Audiodatei */
.vorlesen-knopf {
  background: var(--taste-loeschen-bg);
  color: var(--blau);
  border: none;
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.vorlesen-knopf:active { transform: scale(0.97); }
.vorlesen-knopf .lautsprecher { font-size: 24px; }
.vorlesen-knopf.spricht { background: var(--hinweis-bg); color: var(--gelb-dunkel); }

/* ============= STELLENWERT-GITTER (Mathe) ============= */
.gitter-container {
  overflow-x: auto; padding-bottom: 12px; margin-bottom: 20px;
  -webkit-overflow-scrolling: touch;
}
.gitter {
  display: inline-block;
  background: var(--karo-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  overflow: hidden;
}
.gitter-zeile { display: flex; }
.gitter-zelle {
  width: var(--karo-groesse); height: var(--karo-groesse);
  border-right: 1px solid var(--karo-rand);
  border-bottom: 1px solid var(--karo-rand);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--karo-schrift); font-weight: 600;
  background: var(--karo-bg);
  position: relative;
}
.gitter-zelle:last-child { border-right: none; }
.gitter-zeile:last-child .gitter-zelle { border-bottom: none; }
.gitter-zelle.kopf {
  background: var(--karo-kopf-bg); color: var(--karo-kopf-text);
  font-size: var(--karo-header-schrift); font-weight: 700;
  height: var(--karo-header-hoehe);
}
.gitter-zelle.vorgegeben { color: var(--text); font-weight: 700; }
.gitter-zelle.eingabe { background: var(--bonus-bg); cursor: pointer; color: var(--text); }
.gitter-zelle.eingabe.aktiv {
  background: var(--hinweis-bg);
  box-shadow: inset 0 0 0 3px var(--orange);
  animation: blinken 1s ease-in-out infinite;
  z-index: 2;
}
.gitter-zelle.eingabe.richtig { background: var(--richtig-bg); color: var(--gruen); box-shadow: inset 0 0 0 2px var(--gruen); }
.gitter-zelle.eingabe.falsch { background: var(--falsch-bg); color: var(--rot); box-shadow: inset 0 0 0 2px var(--rot); }
.gitter-zelle.minus { color: var(--rot); font-weight: 700; }
.gitter-zelle.strich-oben { border-top: 2.5px solid var(--karo-strich); }

@keyframes blinken {
  0%, 100% { box-shadow: inset 0 0 0 3px var(--orange); }
  50% { box-shadow: inset 0 0 0 3px var(--gelb); }
}

/* ============= BONUS-KASTEN ============= */
.bonus-kasten {
  background: var(--bonus-verlauf);
  border-radius: var(--radius);
  padding: 20px;
  border: 2px solid var(--orange);
  margin-bottom: 16px;
}
.bonus-titel { font-size: 17px; font-weight: 800; color: var(--gelb-dunkel); margin-bottom: 8px; }

/* ============= AUFGABEN-NAVIGATION ============= */
.aufgaben-nav {
  display: flex; gap: 8px;
  padding: 10px 18px;
  background: var(--surface-alt);
  border-top: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-knopf {
  flex-shrink: 0;
  min-width: 50px; height: 42px;
  border-radius: var(--radius-klein);
  border: 2px solid var(--border);
  background: var(--surface-alt);
  font-weight: 700; font-size: 15px; font-family: inherit;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.nav-knopf.aktiv { background: var(--fl-orange); color: var(--auf-flaeche); border-color: var(--fl-orange-2); }
.nav-knopf.bearbeitet { border-color: var(--blau); color: var(--blau); }
.nav-knopf.richtig { background: var(--fl-gruen); color: var(--auf-flaeche); border-color: var(--fl-gruen); }
.nav-knopf.falsch { background: var(--falsch-bg); color: var(--rot); border-color: var(--rot); }
.nav-knopf.aktiv.richtig, .nav-knopf.aktiv.falsch { box-shadow: 0 0 0 3px var(--orange); }
.nav-knopf.bonus { min-width: 56px; }

/* ============= TASTATUREN ============= */
.tastatur {
  background: var(--tastatur-bg);
  padding: 10px 14px calc(18px + var(--safe-unten));
  border-top: 1px solid var(--border);
  display: none;
}
.tastatur.aktiv { display: block; }
.tastatur-info {
  font-size: 13px; color: var(--text-muted);
  text-align: center; margin-bottom: 8px; font-weight: 600;
}
.tasten-block { display: none; }
.tasten-block.aktiv { display: block; }

/* Ziffern */
.ziffern-reihe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 8px; }
.taste {
  height: var(--taste-hoehe);
  border: none; border-radius: var(--radius);
  background: var(--surface-alt);
  font-size: var(--taste-schrift); font-weight: 700; font-family: inherit;
  cursor: pointer;
  box-shadow: var(--schatten-taste);
  color: var(--text);
  transition: transform 0.08s, background 0.08s;
}
.taste:active { transform: scale(0.95); background: var(--gelb); }
.taste.spezial { background: var(--border); color: var(--text); }
.taste.minus { background: var(--falsch-bg); color: var(--rot); }
.taste.weiter { background: var(--fl-orange); color: var(--auf-flaeche); grid-column: span 2; }
.taste.loeschen { background: var(--taste-loeschen-bg); color: var(--blau); }

/* Buchstaben — zehn Spalten, damit QWERTZ-Reihen unveraendert passen */
.buchstaben-reihe {
  display: grid; grid-template-columns: repeat(10, 1fr);
  gap: 5px; margin-bottom: 5px;
}
.buchstabe {
  height: var(--buchstabe-hoehe);
  border: none; border-radius: var(--radius-klein);
  background: var(--surface-alt);
  font-size: var(--buchstabe-schrift); font-weight: 700; font-family: inherit;
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--schatten-taste);
  padding: 0;
  transition: transform 0.08s, background 0.08s;
}
.buchstabe:active { transform: scale(0.93); background: var(--gelb); }
.buchstabe.breit-2 { grid-column: span 2; }
.buchstabe.breit-4 { grid-column: span 4; }
.buchstabe.umschalt { background: var(--border); font-size: 17px; }
.buchstabe.umschalt.an { background: var(--fl-blau); color: var(--auf-flaeche); }
.buchstabe.loeschen { background: var(--taste-loeschen-bg); color: var(--blau); }
.buchstabe.weiter { background: var(--fl-orange); color: var(--auf-flaeche); font-size: 15px; }

@media (max-width: 480px) {
  .tastatur { padding: 8px 8px calc(12px + var(--safe-unten)); }
  .ziffern-reihe { gap: 6px; margin-bottom: 6px; }
  .buchstaben-reihe { gap: 4px; margin-bottom: 4px; }
}

/* ============= MODALE ============= */
.modal-hintergrund {
  position: fixed; inset: 0;
  background: var(--schleier);
  display: none; align-items: center; justify-content: center;
  z-index: 1000; padding: 20px;
}
.modal-hintergrund.aktiv { display: flex; }
.modal-karte {
  background: var(--surface-alt);
  border-radius: var(--radius-gross);
  padding: 28px 24px;
  max-width: 460px; width: 100%;
  max-height: 88vh; overflow-y: auto;
  text-align: center;
  animation: aufpoppen 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes aufpoppen {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.modal-icon { font-size: 56px; margin-bottom: 10px; }
.modal-pokal { font-size: 90px; margin-bottom: 8px; animation: hopsen 0.8s ease-in-out infinite alternate; }
@keyframes hopsen { from { transform: translateY(0); } to { transform: translateY(-12px); } }
.modal-titel { font-size: 28px; font-weight: 900; margin-bottom: 8px; }
.modal-punkte {
  font-size: 56px; font-weight: 900; color: var(--accent);
  margin: 14px 0; letter-spacing: -2px;
}
.modal-punkte .von { font-size: 24px; color: var(--text-muted); font-weight: 600; letter-spacing: 0; }
.modal-text { font-size: 16px; color: var(--text-muted); margin-bottom: 22px; line-height: 1.5; }
.modal-knopf {
  width: 100%;
  padding: 15px;
  background: var(--accent);
  color: var(--accent-text);
  border: none; border-radius: var(--radius);
  font-size: 17px; font-weight: 700; font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.modal-knopf:active { transform: scale(0.97); }

.modal-knopf.sekundaer { background: var(--border); color: var(--text); box-shadow: none; margin-top: 8px; }
/* Rot bleibt Rot — der Löschknopf trägt nicht die Themenfarbe, und
   weiß darauf statt der Akzentschrift: die ist in dunklen Themen selbst
   dunkel und käme auf Rot nur auf 2,5:1. */
.modal-knopf.gefahr {
  background: var(--fl-rot);
  color: var(--auf-flaeche);
  box-shadow: var(--schatten-rot);
}

/* ============= GENERATOR-FORMULAR ============= */
.gen-formular { text-align: left; margin: 18px 0; }
.gen-feld { margin-bottom: 15px; }
.gen-label {
  display: block; font-size: 12px; color: var(--text-muted);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.gen-optionen { display: flex; gap: 6px; flex-wrap: wrap; }
.gen-option {
  padding: 10px 13px;
  border: 2px solid var(--border);
  background: var(--surface-alt);
  border-radius: var(--radius-klein);
  font-weight: 600; font-size: 14px; font-family: inherit;
  color: var(--text);
  cursor: pointer;
}
.gen-option.aktiv { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.gen-eingabe {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-klein);
  font-size: 16px; font-family: inherit;
  background: var(--surface-alt);
  color: var(--text);
}
.gen-eingabe:focus { outline: none; border-color: var(--lila); }

.konfetti {
  position: fixed; top: -20px;
  width: 12px; height: 12px;
  pointer-events: none; z-index: 999;
}

@keyframes wackeln {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}


/* ============= VOKABELKASTEN ============= */
#fachBereiche:empty { display: none; }


.einheit-liste { display: grid; gap: 12px; }
.einheit-karte {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
  cursor: pointer;
  display: flex; align-items: center; gap: 14px;
}
.einheit-karte:active { transform: scale(0.99); }
.einheit-karte.alle { border: 2px dashed var(--border); box-shadow: none; background: transparent; }
.einheit-ring {
  width: 46px; height: 46px; border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  color: var(--text);
  /* Der Ring zeigt den Anteil der sitzenden Vokabeln — der Winkel wird
     im Skript als --anteil gesetzt. */
  background: conic-gradient(var(--fl-gruen) calc(var(--anteil) * 1%), var(--border) 0);
  position: relative;
}
.einheit-ring span {
  position: absolute; inset: 5px;
  border-radius: 50%;
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.einheit-karte.alle .einheit-ring span { background: var(--bg); }
.einheit-info { flex: 1; min-width: 0; }
.einheit-name { font-size: 18px; font-weight: 700; }
.einheit-zeile { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* Karteikarte zum Umdrehen */
.karteikarte {
  background: var(--surface);
  border: 2.5px solid var(--border);
  border-radius: var(--radius-gross);
  min-height: 190px;
  padding: 26px 22px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.karteikarte-seite { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.karteikarte-wort { font-size: 30px; font-weight: 800; line-height: 1.2; word-break: break-word; }
.karteikarte-hinweis { font-size: 15px; color: var(--text-muted); }
.karteikarte-tipp { font-size: 13px; color: var(--text-muted); }
.karteikarte.umgedreht { border-color: var(--fach-englisch); }

.karten-steuerung { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.karten-steuerung .zurueck-knopf { width: 52px; }
.karten-zaehler { flex: 1; text-align: center; font-weight: 700; color: var(--text-muted); }

/* Richtung und Wortliste */
.richtung-wahl { display: flex; gap: 8px; margin-bottom: 18px; }
.richtung-knopf {
  flex: 1;
  padding: 12px 10px;
  border: 2px solid var(--border);
  background: var(--surface-alt);
  border-radius: var(--radius);
  font-size: 14px; font-weight: 700; font-family: inherit;
  color: var(--text);
  cursor: pointer;
}
.richtung-knopf.aktiv { background: var(--fl-blau); color: var(--auf-flaeche); border-color: var(--fl-blau); }
/* Mit dem dritten Knopf ("Sprechen") wird eine Zeile zu eng. */
.richtung-wahl { flex-wrap: wrap; }
.richtung-knopf { flex: 1 1 42%; }

/* ---- Sprechen statt schreiben ---- */
.mikro-knopf {
  width: 100%;
  border: 2.5px solid var(--accent);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  padding: 22px 20px;
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}
.mikro-knopf .mikro-zeichen { width: 30px; height: 30px; color: var(--accent); }
.mikro-knopf:active { background: var(--surface-alt); }
/* Während zugehört wird: die Farbfläche macht ohne Worte klar, dass
   das Mikrofon gerade an ist. Ein Kind soll nie im Zweifel sein. */
.mikro-knopf.hoert {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
  animation: pochen 1.1s ease-in-out infinite;
}
.mikro-knopf.hoert .mikro-zeichen { color: var(--accent-text); }
@keyframes pochen {
  from { box-shadow: 0 0 0 0 var(--fl-orange); }
  to   { box-shadow: 0 0 0 14px transparent; }
}

/* Was die Erkennung verstanden hat — steht immer da, auch bei einem
   Treffer. Sonst wirkt ein abgelehntes Wort willkürlich. */
.gehoert {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 15px;
  border-radius: var(--radius);
  background: var(--surface-alt);
  border: 2px solid var(--border);
  margin-bottom: 14px;
}
.gehoert-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.gehoert-wort { font-size: 21px; font-weight: 700; }
.gehoert.richtig { border-color: var(--gruen); background: var(--richtig-bg); }
.gehoert.richtig .gehoert-wort { color: var(--gruen); }
.gehoert.falsch { border-color: var(--rot); background: var(--falsch-bg); }
.gehoert.falsch .gehoert-wort { color: var(--rot); }

.wortliste { display: grid; gap: 6px; margin-top: 8px; }
.wortzeile {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: var(--surface);
  border-radius: var(--radius-klein);
  font-size: 15px;
}
.wortzeile .en { font-weight: 700; flex: 1; min-width: 0; }
.wortzeile .de { color: var(--text-muted); flex: 1; min-width: 0; text-align: right; }
.wort-fach {
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: var(--radius-klein);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  background: var(--border); color: var(--text-muted);
}
.wort-fach.sitzt { background: var(--fl-gruen); color: var(--auf-flaeche); }
.wort-fach.fast { background: var(--fl-orange); color: var(--auf-flaeche); }

.abfrage-frage { font-size: 15px; color: var(--text-muted); margin-bottom: 6px; font-weight: 600; }
.abfrage-wort { font-size: 32px; font-weight: 800; margin-bottom: 18px; line-height: 1.2; }
.abfrage-loesung { font-size: 20px; font-weight: 700; }

/* ============= KNOPF AUF DER BLATT-KARTE ============= */
.karten-aktion {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: var(--radius-klein);
  border: 2px solid var(--border);
  background: var(--surface-alt);
  font-size: 18px; font-family: inherit;
  color: var(--text);
  cursor: pointer;
}
.karten-aktion:active { transform: scale(0.94); background: var(--hinweis-bg); }
@media (max-width: 380px) {
  .blatt-karte { gap: 8px; padding: 16px 14px; }
  .karten-aktion { width: 34px; height: 34px; font-size: 16px; }
}

/* ============= ARBEITSBLATT ============= */
/* Am Bildschirm unsichtbar; sichtbar nur beim Drucken — oder im
   Zweitfenster (?drucken=…), das die Home-Bildschirm-App aufmacht. */
#druckblatt { display: none; }
.modal-text.warnung { color: var(--rot); font-weight: 600; }

.dr-kopf { border-bottom: 2px solid var(--text); padding-bottom: 10px; margin-bottom: 18px; }
.dr-titel { font-size: 21px; font-weight: 800; }
.dr-unterzeile { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.dr-namenszeile {
  display: flex; align-items: flex-end; gap: 8px;
  margin-top: 14px; font-size: 13px;
}
.dr-feld { flex: 1; border-bottom: 1px solid var(--text); height: 17px; }
.dr-feld.kurz { flex: 0 0 110px; }

.dr-aufgabe { margin-bottom: 14px; break-inside: avoid; page-break-inside: avoid; }
.dr-aufgabe.bonus { border: 1.5px solid var(--text); border-radius: var(--radius-klein); padding: 10px 12px; }
.dr-aufgabe-kopf { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.dr-label { font-weight: 800; font-size: 15px; }
.dr-typ { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }
.dr-koerper { padding-left: 22px; }
.dr-frage { font-size: 15px; line-height: 1.5; margin-bottom: 8px; }
.dr-frage.dr-gross { font-size: 20px; font-weight: 700; }
.dr-frage .betont { background: none; border-bottom: 1.5px solid var(--text); padding: 0; }

.dr-antwort { display: flex; align-items: center; gap: 8px; }
.dr-kasten {
  display: inline-block;
  /* 118 x 45 px sind gedruckt 31 x 12 mm. Bemessen nach dem, was ein
     Fünftklässler mit stumpfem Bleistift hineinschreibt: eine Ziffer
     wird 5-7 mm hoch, dazu Luft nach oben und unten. 32 px (8,5 mm)
     waren zu wenig — die Ziffer berührte den Rand. */
  min-width: 118px; height: 45px;
  border: 1.5px solid var(--text);
  border-radius: var(--radius-klein);
  vertical-align: middle;
}
.dr-einheit { font-size: 15px; font-weight: 700; }
.dr-luecke {
  display: inline-block;
  min-width: 121px; height: 26px;
  border-bottom: 1.5px solid var(--text);
  vertical-align: baseline;
}
/* Ein Satz mit Lücke braucht mehr Zeilenabstand: das eingetragene Wort
   stieße sonst an die Zeile darüber. 2,5 ergibt gedruckt rund 10 mm —
   die Lineatur, die Klasse 5 im Heft hat. */
.dr-frage.dr-mit-luecke { line-height: 2.5; }
.dr-linien { margin-top: 4px; }
/* 38 px sind 10 mm — Lineatur 9 mm plus etwas Luft. Vorher standen hier
   26 px (6,9 mm), also WENIGER als im Schulheft. */
.dr-linie { border-bottom: 1px solid var(--text-muted); height: 38px; }
/* Nur Luft zum Rechnen — eine Linie darunter sähe aus, als gehörte
   sie zur Aufgabe. */
.dr-platz { }

.dr-optionen { display: grid; gap: 5px; }
.dr-option { display: flex; align-items: center; gap: 10px; font-size: 15px; padding: 3px 0; }
.dr-kaestchen {
  flex-shrink: 0;
  /* 21 px = 5,6 mm. Ein Kreuz mit stumpfer Mine braucht das. */
  width: 21px; height: 21px;
  border: 1.5px solid var(--text);
  border-radius: 3px;
}
.dr-option-marke { font-weight: 700; }
.dr-vermerk { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }

.dr-rechnung { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.dr-rechnung-text { font-size: 19px; font-weight: 700; }

.dr-gitter { display: inline-block; border: 1px solid var(--text); }
.dr-gitterzeile { display: flex; }
.dr-zelle {
  /* 28 px = 7,4 mm, also größer als das Karo 5 mm im Rechenheft. */
  width: 28px; height: 28px;
  border-right: 1px solid var(--text-muted);
  border-bottom: 1px solid var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600;
}
.dr-zelle:last-child { border-right: none; }
.dr-gitterzeile:last-child .dr-zelle { border-bottom: none; }
.dr-zelle.kopf { font-size: 9px; font-weight: 700; height: 18px; color: var(--text-muted); }
.dr-zelle.strich { border-top: 1.5px solid var(--text); }

.dr-loesungen { break-before: page; page-break-before: always; padding-top: 10px; }
.dr-loesungsliste { margin-top: 12px; display: grid; gap: 6px; }
.dr-loesungszeile { display: flex; gap: 10px; font-size: 14px; }
.dr-loesungszeile .dr-label { min-width: 26px; }

@media print {
  /* Papier hat eigene Farben. Statt überall !important zu streuen,
     bekommt der Druck seinen eigenen Variablensatz — wie der Darkmode
     auch. Damit bleibt die Regel „keine Farbe außerhalb von :root"
     unangetastet. */
  :root {
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --surface-alt: #FFFFFF;
    --text: #000000;
    --text-muted: #555555;
    --border: #BBBBBB;
  }
  @page { margin: 16mm 14mm; }
  html, body { height: auto; overflow: visible; background: var(--surface); }
  .ansicht, .tastatur, .modal-hintergrund, .konfetti { display: none !important; }
  #druckblatt { display: block !important; padding: 0; }
  .dr-kopf { break-after: avoid; page-break-after: avoid; }
}


/* ============= STIMMENAUSWAHL ============= */
.stiller-knopf.abstand { margin-top: 8px; }
.stimmen-liste { display: grid; gap: 6px; margin-bottom: 10px; }
.stimme-zeile {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  cursor: pointer;
}
.stimme-zeile.aktiv { border-color: var(--fl-blau); background: var(--taste-loeschen-bg); }
.stimme-info { flex: 1; min-width: 0; text-align: left; }
.stimme-name { font-weight: 700; font-size: 15px; }
.stimme-zusatz { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.stimme-probe {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: var(--radius-klein); border: none;
  background: var(--fl-blau); color: var(--auf-flaeche);
  font-size: 15px; font-family: inherit;
  cursor: pointer;
}
.stimme-probe:active { transform: scale(0.94); }
.stimme-tipp {
  font-size: 13px; line-height: 1.55;
  color: var(--text);
  background: var(--hinweis-bg);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
  text-align: left;
}

/* ============= SPIELE ============= */


.spiel-karte {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
  margin-bottom: 12px;
}
.spiel-karte:active { transform: scale(0.99); }
.spiel-icon { font-size: 34px; flex-shrink: 0; }
.spiel-info { flex: 1; min-width: 0; }
.spiel-name { font-size: 19px; font-weight: 800; }
.spiel-text { font-size: 13px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.spiel-best { font-size: 13px; font-weight: 700; color: var(--accent); margin-top: 5px; }

.spiel-frage {
  font-size: 24px; font-weight: 800; line-height: 1.3;
  margin-bottom: 18px; text-align: center;
}
.spiel-wort {
  font-size: 34px; font-weight: 900;
  text-align: center; margin: 22px 0 26px;
  word-break: break-word;
}
.spiel-meldung {
  margin-top: 14px; padding: 12px 14px;
  border-radius: var(--radius); font-weight: 700; font-size: 15px; text-align: center;
}
.spiel-meldung.gut { background: var(--richtig-bg); color: var(--gruen); }
.spiel-meldung.schlecht { background: var(--falsch-bg); color: var(--rot); }

/* Aufleuchten nach einem Tipp — ohne Rückmeldung kein Spiel */
@keyframes aufleuchten-gut { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.treffer {
  border-color: var(--gruen) !important;
  background: var(--richtig-bg) !important;
  color: var(--gruen) !important;
  animation: aufleuchten-gut 0.3s;
}
.daneben {
  border-color: var(--rot) !important;
  background: var(--falsch-bg) !important;
  color: var(--rot) !important;
  animation: wackeln 0.3s;
}

/* Paare */
.paare-feld { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.paar-karte {
  min-height: 62px;
  padding: 12px 10px;
  border: 2.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 16px; font-weight: 700; font-family: inherit;
  cursor: pointer;
  word-break: break-word;
  transition: opacity 0.25s, transform 0.1s;
}
.paar-karte.en { border-style: dashed; }
.paar-karte.gewaehlt { border-color: var(--orange); background: var(--bonus-bg); }
.paar-karte.weg { opacity: 0; pointer-events: none; }
.paar-karte:active { transform: scale(0.97); }

/* Zahlenstrahl */
.strahl {
  position: relative;
  height: 96px;
  margin: 26px 0 8px;
  cursor: pointer;
}
.strahl-linie {
  position: absolute; left: 0; right: 0; top: 44px;
  height: 4px; border-radius: 2px;
  background: var(--text);
}
.strahl-strich {
  position: absolute; top: 36px;
  width: 2px; height: 12px;
  background: var(--text-muted);
  transform: translateX(-1px);
}
.strahl-strich.gross { top: 30px; height: 24px; background: var(--text); }
.strahl-zahl {
  position: absolute; top: 60px;
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  transform: translateX(-50%);
  white-space: nowrap;
}
.strahl-marke {
  position: absolute; top: 18px;
  width: 4px; height: 56px; border-radius: 2px;
  transform: translateX(-2px);
}
.strahl-marke.gut { background: var(--gruen); }
.strahl-marke.schlecht { background: var(--rot); }
.strahl-marke.richtig {
  background: var(--blau);
  top: 8px; height: 76px;
  opacity: 0.85;
}

/* Körbe */
.koerbe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.korb {
  min-height: 74px;
  border: 2.5px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 17px; font-weight: 700; font-family: inherit;
  cursor: pointer;
}
.korb:active { transform: scale(0.97); }


/* ============= SCHRIFTBILD =============
   Dieselbe Staffelung wie in schoolday und auf taher.de: Archivo für
   alles, was Überschrift ist, IBM Plex Mono für die gesperrten
   Kleinlabels, IBM Plex Sans für den Rest. */
.kopf-titel,
.stufe-karte-name,
.punkte-zahl,
.fach-karte-name,
.blatt-name,
.aufgabe-frage-text,
.modal-titel,
.modal-punkte,
.einheit-name,
.karteikarte-wort,
.abfrage-wort,
.spiel-name,
.spiel-wort,
.spiel-frage,
.leiste-name {
  font-family: Archivo, "Helvetica Neue", sans-serif;
  letter-spacing: -0.02em;
}
.blatt-tag,
.aufgabe-titel,
.gen-label,
.tastatur-info,
.spiel-best,
.karteikarte-seite,
.dr-typ {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

/* ============= FARBAUSWAHL ============= */
.themen-liste { display: grid; gap: 8px; margin: 18px 0; text-align: left; }
.thema-zeile {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  cursor: pointer;
}
.thema-zeile.aktiv { border-color: var(--accent); }
.thema-probe {
  flex-shrink: 0;
  display: flex;
  width: 52px; height: 34px;
  border-radius: var(--radius-klein);
  overflow: hidden;
  border: 1px solid var(--border-strong);
}
.thema-streifen { flex: 1; }
.thema-info { flex: 1; min-width: 0; }
.thema-name { font-weight: 700; font-size: 15px; }
.thema-text { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.thema-haken { flex-shrink: 0; font-weight: 800; color: var(--accent); font-size: 17px; }

/* ---- Zeichen in vorhandenen Bausteinen ---- */

/* Rueckmeldung und Hinweis setzen ihr Zeichen vor den Satz. Der Text
   steht in einem eigenen <span>, damit mehrzeiliger Text nicht unter
   das Zeichen laeuft. */
.rueckmeldung .zeichen { width: 20px; height: 20px; }
.aufgabe-hinweis {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.aufgabe-hinweis .zeichen {
  width: 17px; height: 17px;
  margin-top: 2px;
  color: var(--gelb-dunkel);
}

/* Die stillen Knoepfe im Fuss tragen jetzt ein Zeichen. */
.stiller-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.stiller-knopf .zeichen { width: 17px; height: 17px; }

/* Das Fachzeichen nimmt die Fachfarbe an — dieselbe, die auch die
   Kante der Karte traegt. */
.fach-karte-icon { color: var(--fach-farbe-schrift); }

/* Der Blattzustand: erledigte Blaetter gruen, laufende in der
   Themenfarbe, unberuehrte still. Frueher machten das vier
   verschiedene Emoji. */
.blatt-medaille { color: var(--text-muted); }
.blatt-karte.erledigt .blatt-medaille { color: var(--gruen); }
.blatt-karte.angefangen .blatt-medaille { color: var(--accent); }
.blatt-karte.heute .blatt-medaille { color: var(--accent); }

.modal-icon { color: var(--accent); display: flex; justify-content: center; }
.modal-icon .zeichen { width: 52px; height: 52px; }
.modal-pokal .zeichen { width: 84px; height: 84px; margin: 0 auto; }
/* Der Punktestand: das Zeichen traegt die Themenfarbe wie die Zahl
   daneben, sonst ist es der lauteste Strich auf der Startseite. */
.punkte-pokal { color: var(--accent); }
.punkte-pokal .zeichen { width: 40px; height: 40px; }
.stufe-chip-icon .zeichen { width: 22px; height: 22px; }

/* Der Knopf auf der Blatt-Karte: der Drucker sitzt mittig. */
.karten-aktion {
  display: flex;
  align-items: center;
  justify-content: center;
}
.karten-aktion .zeichen { width: 19px; height: 19px; }