/* ==========================================================
   Do-matik – Design-Tokens & Grundstyles (Design System 2.0, 2026-10-19, Plan: .claude/design-system-2.md)
   Dunkel ist der Grundlook (gate.js setzt data-theme immer), Hell per Umschalter im Header.

   Farbbedeutung (Variante 2):
     Blau      = Interaktion: Knöpfe, Links, aktive Navigation, Auswahl, Fokus
     Türkis    = Lernfortschritt, Kompetenz, Merksätze (--progress)
     Grün      = richtig/geschafft · Gold = XP, Münzen, Belohnung (nie für Warnungen)
     Orange    = Warnung, „Wiederholung fällig“ · Rot = Fehler · Violett = nur Episch
   Neutrale Flächen bleiben neutral, bis ein Zustand eine Farbe rechtfertigt.

   Ebenen: 1. --color-* (Rohwerte je Modus)  2. semantische Rollen (--background, --surface-elevated,
   --text-secondary, --interactive-primary, --focus-ring, --progress, --reward …)  3. alte Namen
   (--bg, --surface, --primary …) als Aliase, damit alle Seiten-CSS-Dateien unverändert mitziehen.
   ========================================================== */

/* ---------- Schrift Inter (lokal, keine externen Fonts – Datenschutz) ----------
   Eine variable Datei für alle Stärken 400–800 (fonts/inter/InterVariable.woff2, Inter 4.1 von rsms/inter, SIL OFL –
   Lizenz liegt daneben). Ist Inter auf dem Gerät installiert, wird diese genommen. swap: Text sofort lesbar. */
@font-face {
  font-family: "Inter";
  src: local("Inter Variable"), local("InterVariable"), url("../fonts/inter/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* IBM Plex Mono (fonts/ibm-plex-mono, SIL OFL, Lizenz daneben) – Akzentschrift für Labels, Nummern, Kennungen (--font-label).
   Nur der Schnitt Medium liegt vor; der Bereich 400–700 verhindert künstlich verdickte Buchstaben. */
@font-face {
  font-family: "IBM Plex Mono";
  src: local("IBM Plex Mono Medium"), local("IBMPlexMono-Medium"), url("../fonts/ibm-plex-mono/IBMPlexMono-Medium-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Lilita One (fonts/lilita-one, SIL OFL, Lizenz daneben) – Kartenschrift der Spielwelt (--font-karte), rund und kräftig wie die Tierbilder.
   Nur ein Schnitt (Latin); der Bereich 100–900 verhindert künstlich verdickte Buchstaben. Nur für Karten, nie für Bedienung oder Fließtext. */
@font-face {
  font-family: "Lilita One";
  src: url("../fonts/lilita-one/LilitaOne-Regular-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Hell (Standard seit 2026-10-22, neutral nach Apple-Vorbild; vorher Variante C 2026-10-19 mit warmem Off-White), Blau als einzige Akzentfarbe ----------
   Seite #F5F5F7 · Flächen #FFF · Sekundärflächen #EFEFF2 · Text #1D1D1F · Rahmen #D2D2D7 · Akzent Blau #0066CC (Knöpfe und Links).
   Kontraste (WCAG AA): Text ≈ 16 : 1 · leiser Text ≈ 5,1 : 1 · Weiß auf Blau 5,6 : 1 · Blau als Text 5,2 : 1 (jeweils auf #F5F5F7).
   Alle Farb-Tokens dieses Blocks werden im Dunkelmodus überschrieben → Änderungen hier betreffen nur Hell. */
:root {
  /* Seit 2026-10-22 neutral wie Apple (Hell ist jetzt Standard): kühles Hellgrau statt warmem Off-White, Text fast schwarz.
     Vorher #F5F4F0 / #F0EFEA / #E8E7E1 / #F4F3EF, Rahmen #D3D5D1 / #AEB2AE, Text #19212B / #353D45 / #575F67. */
  /* Seit 2026-10-22 (Stil „Do-matik“, Nutzer-Entscheidung): eigene, leicht bläuliche Neutraltöne statt Apple-Grau
     (vorher #F5F5F7 / #EFEFF2 / #E6E6EA, Rahmen #D2D2D7 / #AEAEB2 / #E5E5EA, Text #1D1D1F / #3A3A3C / #6A6A70). */
  --color-bg: #f3f5f8;              /* Seite: kühles Hellgrau */
  --color-bg-soft: #edf0f4;         /* Sekundärflächen, Abschnittswechsel, Footer, Flächen in Applets */
  --color-bg-deep: #e3e7ed;         /* Bildflächen, Fortschritts-Spur */
  --color-surface: #ffffff;         /* Hauptflächen (Karten, Aufgaben, Dialoge) */
  --color-surface-raised: #f3f5f8;  /* sekundäre Flächen in einer Fläche (Optionen, Tipps) */
  --color-border: #d3d9e1;
  --color-border-strong: #a9b2be;   /* z. B. Sekundär-Knopf */
  --color-divider: #e3e8ee;         /* dezente Trennlinien in Listen und Abschnitten */
  --color-text: #141b26;            /* Blau-Schwarz */
  --color-text-secondary: #333c49;  /* Beschreibungen, Hilfstexte mit Gewicht */
  --color-text-muted: #5d6675;      /* Metadaten, Brotkrumen, Labels: ≈ 5,5 : 1 auf #F3F5F8 */

  /* Seit 2026-10-22 EINE Akzentfarbe Blau wie Apple/Microsoft (vorher Grün #176B5B als Aktion, Blau #245D91 nur für Links):
     Knöpfe, Links, Auswahl, aktive Navigation, Fokus. Grün bedeutet nur noch „richtig/geschafft“ (--color-success). */
  --color-primary: #0066cc;         /* Weiß darauf 5,6 : 1, als Text auf #F5F5F7 5,2 : 1 */
  --color-laser: #e6007e;           /* Laserpointer: Magenta mit Leuchten, weit weg von den Stiftfarben Blau und Rot (Schreibfläche, Beamer-Stift) */
  --color-primary-strong: #004f9e;
  --color-primary-soft: #e8f1fc;
  --color-on-primary: #ffffff;
  --color-link: #0066cc;
  --color-link-soft: #e8f1fc;
  --color-electric: #0066cc;        /* Glanz/Schatten (nur noch Belohnungsmomente) */
  --color-cyan: #0a6a84;            /* Cyan als Text/Label/Fokus (2026-10-11 dunkler: Kontrast ≥ 4.5 : 1) (#00b8d9 nur als Deko: --color-cyan-hell) */
  --color-cyan-hell: #12a8c9;
  --color-purple: #7c3aed;
  --color-gold: #8f5b0a;           /* Text auf hellem Grund (Kontrast) */
  --color-gold-bright: #f5b83d;
  --color-bronze: #a0602a;          /* Sammelkarten (js/karten.js) */
  --color-silver: #7a8699;
  --color-pink: #db2777;
  --color-success: #15803d;   /* 2026-10-11 dunkler: als Text ≥ 4.5 : 1 */
  --color-success-soft: #dcf5e6;
  --color-warning: #b45309;         /* Orange, klar getrennt von Gold/XP (2026-10-19) */
  --color-danger: #dc2626;
  --color-danger-soft: #fde4e4;
  --color-progress: #0a7c86;        /* Türkis: Lernfortschritt, Merksätze (Text ≥ 4,5 : 1 auf Weiß) */
  --color-progress-soft: #e0f3f3;

  /* Lernkästen (Iteration 2, 2026-10-19): Farbe nur als Linie, Label oder Hauch – Erklärungen bleiben neutral */
  --color-lk-info: #3c6c99;         /* Information, Hilfe, Leitfrage: gedämpftes Blau */
  --color-lk-uebung: #0a7c86;       /* Interaktion, Übung, Merksatz: Türkis */
  --color-lk-entdecken: #b07a16;    /* Forscherauftrag, Entdecken: warmes Gelb (Linie) */
  --color-lk-entdecken-flaeche: #fcf6e6;
  --color-lk-fehler: #b34848;       /* typische Fehler, Korrektur: gedämpftes Rot */
  --color-lk-fehler-flaeche: #fbf2f1;
  --color-lk-reflexion: #868c8f;    /* Vermutung, Denkpause, Vorhersage: neutral */

  /* Welten (Jahrgangsstufen) */
  --stufe-if6: #0d9488;
  --stufe-mi9: #7c3aed;
  --stufe-mi10: #ea580c;
  --stufe-ef: #2f6feb;
  --stufe-q1: #db2777;
  --stufe-q2: #149443;              /* etwas satter: große Schrift ≥ 3 : 1 auf Ice Blue */
  --fach-mathe: var(--color-primary);  /* Mathe-Auswahl/Aktion = Akzentblau */
  --color-on-hell: #101b35;         /* dunkle Schrift auf immer hellen Flächen (Gold, Münzen, Geldscheine) – in beiden Modi gleich */

  /* Schatten nur für echte Ebenen (Dropdown, Dialog, Toast, Lupe): --shadow-lift bzw. --shadow-overlay.
     Flächen (Karten, Panels, Aufgaben) haben Rand statt Schatten – --shadow-card bleibt als Name, ist aber leer. */
  --shadow-card: 0 0 0 transparent;
  --shadow-lift: 0 1px 2px rgb(25 33 43 / 0.06), 0 8px 20px rgb(25 33 43 / 0.08);
  --glow-strength: 12%;            /* wie stark Glows durchscheinen (im Hellen zurückhaltend) */
  --halo: rgb(52 120 246 / 0.12);  /* Halo hinter Maskottchen & Hero */
  --rays: rgb(52 120 246 / 0.035); /* Hintergrundstrahlen – nur atmosphärisch */
  --rays-karte: rgb(52 120 246 / 0.09);  /* Strahlen hinter Figuren auf Karten – im Hellen kräftiger als im Hero */
  /* Kopfleiste fast weiß über der Ice-Blue-Seite */
  --header-bg: color-mix(in srgb, var(--color-surface) 80%, transparent);   /* 2026-10-21: sichtbar durchscheinend (Glas), vorher 92 % */
  /* Tiere: nur ein feiner farbiger Schatten, kein Neon-Schein */
  --figur-schatten: drop-shadow(0 8px 18px rgb(20 80 180 / 0.12)) drop-shadow(0 0 8px rgb(0 190 230 / 0.10));
  /* Panels der Wissenswelt (im Dunkeln: Navy mit feiner Cyan-Kontur, hier: weiße Karte) */
  --panel-bg: var(--color-surface);
  --panel-border: var(--border-subtle);   /* 2026-11-01: feiner als --border (Ruhe), Eingaben behalten --border */
  --panel-glow: 0 0 0 transparent;
  --page-bg: var(--color-bg);

  /* Code-Editor (in beiden Modi dunkel, neutrales Graphit statt Navy) & PAKO-Stadt */
  --code-bg: #1b2024;
  --code-text: #dfe3e1;
  --code-kw: #ff9e64;
  --code-m: #e8c56a;
  --code-s: #9ece6a;
  --code-n: #7dcfff;
  --code-c: #8a959b;
  /* Code am Beamer (2026-10-25, Nutzerwunsch): Fläche schlicht dunkel wie die Seiten (Verlauf auf Wunsch entfernt), Methoden lila, Typen hellblau */
  --code-flaeche: var(--code-bg);
  --code-hell: #e8eef8;
  --code-fn: #c9a2ff;
  --code-typ: #67c8ff;
  /* Java-Editor und Konsole (2026-11-01): im Hellmodus hell, im Dunkelmodus dunkel (Syntaxfarben nur hier, `.ed`/`.ide__konsole` in lernen.css) */
  --ed-bg: #f6f8fb;
  --ed-text: #1d2733;
  --ed-gutter: #8b95a5;
  --ed-kw: #b8460e;
  --ed-m: #8a5a00;
  --ed-s: #2f7d32;
  --ed-n: #0b6a99;
  --ed-c: #6b7684;
  --ed-caret: #1d2733;
  --ed-sel: rgb(10 100 200 / 0.22);
  --ed-zeile: rgb(212 160 20 / 0.20);
  --welt-bg: #eef0f3;
  --welt-linie: #d3d8e0;
  --pako-licht: #ffe27a;            /* Scheinwerferkegel von PAKO (3D-Ansicht) */

  color-scheme: light;
}

/* ---------- Dunkel (seit 2026-10-22 Nebenmodus, neutral wie Apple): Seite #121214 · Flächen #1D1D20 · Sekundär #27272B ·
   Text #F5F5F7 · Rahmen #3A3A3F · Akzent Blau #4D9FFF (vorher Anthrazit mit Mint-Akzent).
   Nur EIN Block: js/gate.js setzt data-theme auf jeder Seite vor dem ersten Zeichnen.
   .thema-dunkel: Prüfungstafel und Entwicklungs-Feier bleiben auch im Hellmodus dunkel (Duell/Runde haben eigene Farben). */
:root[data-theme="dark"], .thema-dunkel {
  /* Seit 2026-10-22 neutral wie Apple (vorher Anthrazit mit Grünstich #15191C/#20262A, Akzent Mint #75C9AD) */
  --color-bg: #121214;
  --color-bg-soft: #19191c;   /* sichtbarer Abschnittswechsel (section--soft) */
  --color-bg-deep: #0c0c0e;
  --color-surface: #1d1d20;   /* Karten klar vom Seitenhintergrund getrennt */
  --color-surface-raised: #27272b; /* Arbeitsflächen, Hover, aktive Navigation */
  --color-border: #3a3a3f;
  --color-border-strong: #5a5a61;
  --color-divider: #2c2c31;
  --color-text: #f5f5f7;
  --color-text-secondary: #d2d2d7;
  --color-text-muted: #a1a1a8;
  --color-primary: #4d9fff;   /* helles Blau, dunkle Schrift darauf ≈ 7 : 1 */
  --color-laser: #ff4db0;
  --color-primary-strong: #85bcff;
  --color-primary-soft: #16263d;
  --color-on-primary: #0a1424;
  --color-link: #4d9fff;      /* seit 2026-10-23 = --color-primary: ein Akzentblau für Knöpfe, Links, Navigation und Fokus (vorher #6aafff) */
  --color-link-soft: #16263d;
  --color-electric: #4d9fff;
  --color-cyan: #6fcfe0;
  --color-cyan-hell: #5fd0ef;
  --color-purple: #a98bff;
  --color-gold: #ffcb47;
  --color-gold-bright: #ffcb47;
  --color-bronze: #d08a4e;
  --color-silver: #c3cbd8;
  --color-pink: #ff5cbf;
  --color-success: #5cd69b;
  --color-success-soft: #1c3329;
  --color-warning: #ff9f43;       /* Orange statt Gold (vorher #ffcb47 = gleich XP) */
  --color-danger: #ff7a8a;
  --color-danger-soft: #3a2226;
  --color-progress: #5cc8c0;
  --color-progress-soft: #1d3233;
  --color-lk-info: #86b3db;
  --color-lk-uebung: #5cc8c0;
  --color-lk-entdecken: #d9a94a;
  --color-lk-entdecken-flaeche: #262319;
  --color-lk-fehler: #e08585;
  --color-lk-fehler-flaeche: #2a2123;
  --color-lk-reflexion: #7d878b;
  --stufe-if6: #2ee0d0;
  --stufe-mi9: #a98bff;
  --stufe-mi10: #ff8a5c;
  --stufe-ef: #4f9dff;
  --stufe-q1: #ff5cbf;
  --stufe-q2: #4ee68a;
  --akzent-tuerkis: #5cc8c0;
  --akzent-gruen: #82cf8c;
  --akzent-bernstein: #eba54e;
  --akzent-violett: #b39cf0;
  --akzent-koralle: #ee8b73;
  --akzent-blau: #7db5ea;
  /* Textmarker (2026-10-22): gedämpfte Flächen, heller Text bleibt lesbar (≥ 6 : 1) */
  --marker-gelb: #735f16;
  --marker-tuerkis: #1f5754;
  --marker-blau: #24476b;
  --marker-violett: #483c70;
  --marker-koralle: #6a392d;
  --marker-gruen: #2c5534;
  /* Fach-Farbband: im Dunkeln satter, Übergang deutlicher */
  --fach-band-mathe-a: #2a2312;
  --fach-band-mathe-b: #2f1c14;
  --fach-band-informatik-a: #0f2827;
  --fach-band-informatik-b: #0e1f2c;
  --spiel-band-schaetzen-a: #2e2010;
  --spiel-band-schaetzen-b: #2e1a12;
  --spiel-band-luege-a: #2e1620;
  --spiel-band-luege-b: #2a1729;
  --spiel-band-knobel-a: #221a33;
  --spiel-band-knobel-b: #1b1c35;
  --spiel-band-netz-a: #10222e;
  --spiel-band-netz-b: #131d33;
  --stift: #c3cad6;
  /* Icon-Töne Swift-Reihe (2026-10-22): Blau → Blaugrün → Salbei → Oliv, auf #121214/#1d1d20 ≥ 6,7 : 1 */
  --ikon-petrol: #4dbcc2;
  --ikon-salbei: #86bf8f;
  --ikon-bernstein: #c2bb57;
  --ikon-lavendel: #a994cb;
  --ikon-schiefer: #62a9ea;
  --ikon-koralle: #c98073;
  --ikon-fehler: #e08585;
  --shadow-card: 0 0 0 transparent;
  --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.35), 0 16px 36px rgb(0 0 0 / 0.32);
  --glow-strength: 20%;
  --halo: rgb(77 159 255 / 0.14);
  --rays: rgb(205 205 210 / 0.03);
  --rays-karte: var(--rays);
  --panel-bg: var(--color-surface);
  --panel-border: var(--border-subtle);   /* 2026-11-01: feiner als --border (Ruhe), Eingaben behalten --border */
  --panel-glow: 0 0 0 transparent;
  --page-bg: var(--color-bg);     /* flach, ohne Navy-Verlauf */
  --header-bg: color-mix(in srgb, var(--color-bg) 82%, transparent);   /* 2026-10-21: vorher 94 % */
  --code-bg: #101315;
  --ed-bg: #1b2024;
  --ed-text: #dfe3e1;
  --ed-gutter: #5d6784;
  --ed-kw: #ff9e64;
  --ed-m: #e8c56a;
  --ed-s: #9ece6a;
  --ed-n: #7dcfff;
  --ed-c: #8a959b;
  --ed-caret: #fff;
  --ed-sel: rgb(125 170 255 / 0.35);
  --ed-zeile: rgb(232 197 106 / 0.16);
  --welt-bg: #cdd3dc;
  --welt-linie: #b5bcc8;
  --pako-licht: #ffe27a;
  color-scheme: dark;
}

/* ---------- Früher: Spielfelder (Duell, Runde) mit festem Navy-Satz. Seit 2026-10-20 setzt gate.js data-theme-fest nicht mehr
   (Spiele folgen Hell/Dunkel); der Block bleibt nur, falls eine Seite den festen Satz wieder braucht. ----------
   Variante C ist ein Redesign der Lernplattform; die Spiele bleiben ausdrücklich unverändert (Farben und Rundungen von vor 2026-10-19). */
:root[data-theme-fest] {
  --color-bg: #0d1728;
  --color-bg-soft: #111d31;
  --color-bg-deep: #0a1220;
  --color-surface: #17243a;
  --color-surface-raised: #1e2e48;
  --color-border: #31445f;
  --color-border-strong: #455d80;
  --color-divider: #31445f;
  --color-text: #edf3fa;
  --color-text-secondary: #c3cedc;
  --color-text-muted: #a9b8cc;
  --color-primary: #69b4ff;
  --color-laser: #ff4db0;
  --color-primary-strong: #9ccdff;
  --color-primary-soft: #1a3354;
  --color-on-primary: #0d1728;
  --color-link: #69b4ff;
  --color-link-soft: #1a3354;
  --color-electric: #69b4ff;
  --color-cyan: #5fd0ef;
  --color-success: #33e6a6;
  --color-success-soft: #0f3a33;
  --color-danger: #ff6b8a;
  --color-danger-soft: #3d1630;
  --color-progress: #4fd1c5;
  --color-progress-soft: #12353d;
  --halo: rgb(58 160 255 / 0.22);
  --rays: rgb(90 160 255 / 0.04);
  --panel-bg: #17243a;
  --panel-border: #31445f;
  --page-bg: radial-gradient(1200px 600px at 80% -10%, #16284a 0%, transparent 60%), #0d1728;
  --header-bg: color-mix(in srgb, #0d1728 92%, transparent);
  --code-bg: #050918;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
}

/* ---------- Themenunabhängige Tokens, semantische Rollen & Aliase ---------- */
:root, .thema-dunkel {
  /* Semantische Rollen (Design System 2.0) – neue Regeln nutzen diese Namen */
  --background: var(--color-bg);
  --surface-elevated: var(--color-surface-raised);   /* Antwortoptionen, sekundäre Flächen */
  --surface-selected: var(--color-primary-soft);     /* gewählt, aktiv */
  --surface-sunken: var(--color-bg-soft);            /* Unterteilung innerhalb einer Fläche */
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-secondary);
  --border-default: var(--color-border);
  --border-strong: var(--color-border-strong);
  --border-divider: var(--color-divider);
  --interactive-primary: var(--color-primary);
  --interactive-hover: var(--color-primary-strong);
  --interactive-pressed: color-mix(in srgb, var(--color-primary-strong) 82%, #000);   /* gedrückt = eine Stufe dunkler */
  /* Hover wie Apple/Microsoft (2026-10-22, design-vorbilder.md §2c): nie anheben, vergrößern oder leuchten –
     Karten und Kacheln bekommen nur einen dunkleren Umriss (outline: var(--hover-umriss); outline-offset: -1.5px) */
  --hover-rand: color-mix(in srgb, var(--color-text) 40%, var(--color-border));
  --hover-umriss: 1.5px solid var(--hover-rand);
  /* Karopapier (2026-10-22, Startseiten-Hero): feine Linien aus der Textfarbe, folgt Hell/Dunkel; 24 px ≈ 5-mm-Kästchen */
  --karo-linie: color-mix(in srgb, var(--color-text) 6%, transparent);
  --karo-groesse: 24px;
  /* Marker-System (2026-10-22): Fachfarbe Mathematik gelb, Informatik blau; Violett nur für die übergeordnete Lernbotschaft
     (Hero-Unterstrich, fachneutrale Wörter). Klassen .marker--mathe / .marker--informatik / .marker--botschaft */
  --marker-mathe: var(--marker-gelb);
  --marker-informatik: var(--marker-blau);
  --marker-botschaft: var(--marker-violett);
  --unterstrich-botschaft: var(--akzent-violett);
  /* Antwortfarben der Klassenspiele (2026-10-25, wie Kahoot, js/klassenspiel.js): je Antwort Farbe + Form + Buchstabe,
     seit 2026-10-25 Apple-Systemfarben (Grundfarben wie Kahoot: Rot, Blau, Gelb, Grün), Grün leicht abgedunkelt, Gelb mit dunkler Schrift,
     damit weiße fette Schrift ≥ 3 : 1 hat (große Schrift). Ausnahme von „Grün nur richtig“: hier ist Grün eine Antwortfarbe,
     „richtig“ zeigt die Auflösung über Haken und das Zurücktreten der anderen Kacheln, nie über die Farbe. */
  --wahl-1: #ff3b30;   /* Dreieck, Apple Rot */
  --wahl-2: #007aff;   /* Raute, Apple Blau */
  --wahl-3: #ffcc00;   /* Kreis, Apple Gelb (Nutzer 2026-10-25 statt Orange), mit dunkler Schrift */
  --wahl-3-schrift: #1d1d1f;
  --wahl-3-ton: #a87f00;   /* Gelb als Form auf hellem Grund (falsche Kachel, andere Taste), sonst zu blass */
  --spiel-orange: #e07000; /* Spielfarbe von Schätz mal (Uhr-Ring, Marker), Gelb wäre auf Weiß zu blass */
  --wahl-4: #2a9a48;   /* Quadrat, Apple Grün (abgedunkelt) */
  --wahl-5: #af52de;   /* Stern, Apple Lila */
  --wahl-6: #0c8da8;   /* Sechseck, Apple Türkis (abgedunkelt) */
  --wahl-7: #ff2d55;   /* Kreuz, Apple Pink */
  --wahl-8: #5856d6;   /* Mond, Apple Indigo */
  --wahl-schrift: #ffffff;
  /* Auswahl-Unterstrich als gerade Linie (2026-10-22): eine Hintergrundebene statt inset-Schatten, der den runden Ecken folgte.
     Nutzung: background: var(--linie-unten), <Flächenfarbe>; */
  --linie-unten: linear-gradient(var(--nav-aktiv), var(--nav-aktiv)) 50% 100% / calc(100% - 2 * var(--radius-sm)) 2px no-repeat;
  /* dasselbe senkrecht links (aktiver Punkt in Seitennavigationen, z. B. Kapitel-Navigation der Reihen) */
  --linie-links: linear-gradient(var(--nav-aktiv), var(--nav-aktiv)) 0 50% / 2px calc(100% - 2 * var(--radius-sm)) no-repeat;
  --link: var(--color-link);                        /* Links, Navigation, aktiver Lernkontext (Variante C) */
  --link-soft: var(--color-link-soft);
  /* Iteration 3 (2026-10-19): EINE Akzentfarbe für aktive Navigation und primäre Interaktionen (Kopfzeile, Kapitel-Navigation,
     Spiel-Navigation, aktuelle Reihe). Blau bleibt nur für Textlinks im Fließtext und den Tastatur-Fokus. */
  --nav-aktiv: var(--interactive-primary);
  --nav-aktiv-soft: var(--surface-selected);
  /* Tonfläche für Antworten und Werkzeuge (seit 2026-10-31): Text 7 % in die Fläche gemischt, hell und dunkel sichtbar (--surface-sunken ist dunkel dunkler als die Fläche) */
  --ton: color-mix(in srgb, var(--text) 7%, var(--surface));
  --ton-hover: color-mix(in srgb, var(--text) 12%, var(--surface));
  /* Ruhe und Hierarchie (2026-11-01, Nutzerauftrag „Apple-nahe Ruhe, kein Redesign“): leichtere Tonfläche für gruppierte Listen
     und Tabellenköpfe, feinere Ränder an Flächen. Rollen-Namen aus dem Auftrag als Aliase, damit neue Regeln sie direkt nutzen können. */
  --ton-leicht: color-mix(in srgb, var(--text) 4.5%, var(--surface));
  --border-subtle: color-mix(in srgb, var(--color-border) 70%, var(--color-surface));   /* Flächen (.card, .panel, .task) */
  --surface-secondary: var(--color-bg-soft);
  --text-tertiary: var(--color-text-muted);
  --accent: var(--color-primary);
  --trenner: color-mix(in srgb, var(--text) 10%, var(--surface));   /* Trennlinie auf Tonflächen, hell und dunkel sichtbar */
  --focus-ring: var(--color-link);
  --progress: var(--color-progress);
  --progress-soft: var(--color-progress-soft);
  --reward: var(--color-gold-bright);                 /* Flächen, Balken */
  --reward-text: var(--color-gold);                   /* Text (im Hellen dunkleres Gold) */

  /* Form: Bedienelemente bleiben fast eckig (Knöpfe, Eingaben, Antwortoptionen, Chips 3/4 px), Flächen sind weich.
     --radius-pill ist ebenfalls fast eckig (Chips, Zähler, Balken); echte Kreise nur mit 50 % bzw. --radius-rund
     (Fortschrittsringe, Begleiter, Spielfiguren). */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-knopf: 6px;   /* Knöpfe, Eingaben, einzelne Antwortoptionen, Reiter (2026-11-01, Nutzer; vorher 3/4 px). Prüfen: node .claude/knopf-radien.mjs */
  --radius-lg: 10px;   /* Container innerhalb einer Fläche: Applet-Bühnen, Dialoge, Sprechblasen (seit 2026-10-22, vorher 4) */
  --radius-pill: 4px;
  --radius-rund: 999px;
  /* Staffel (Nutzer 2026-10-22, erweitert am selben Tag): alle Flächen wie die Kacheln der Startseite –
     .card/.panel, Aufgaben (.task), Lernkästen (Denkpause, Vermutung, Merkkasten …), Applet-Rahmen. Darin --radius-lg, Bedienelemente klein. */
  --radius-flaeche: 14px;
  --radius-kachel: 24px;   /* große Kacheln auf Übersichtsseiten (Startseite, 2026-10-22, Vorbild Apple/Microsoft 24–28 px) */
  /* Weltbilder (Hero, Atlas, Weltseiten, Karten): etwas entsättigt und dunkler – wirkt wie Artwork statt Bonbon */
  --welt-filter: saturate(0.72) brightness(0.86) contrast(1.06);
  --shadow-overlay: var(--shadow-lift);              /* nur Dropdown, Dialog, Toast */

  /* Abstände (4-/8-px-Raster) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;     /* 64 px (2026-11-01, vorher 72): Raster 4/8/12/16/24/32/48/64 */
  --gap-inline: var(--space-2);     /* Elemente in einer Zeile (Icon + Text, Knopfgruppen) */
  --gap-stack: var(--space-4);      /* zusammengehörige Blöcke untereinander */
  --gap-section: var(--space-7);    /* Abschnitte */
  --pad-surface: 1.5rem;            /* Innenabstand von Flächen (24 px, seit 2026-11-01 vorher 20) */
  --control-h: 44px;                /* Knöpfe, Eingaben: Touchfläche */
  --control-h-klein: 36px;

  /* Bewegung */
  --transition-fast: 150ms ease;
  --transition-normal: 220ms var(--ease-ruhig);   /* Panels, Aufklappen (2026-11-01, vorher 280 ms) */
  --ease-ruhig: cubic-bezier(.2, 0, 0, 1);         /* ruhig auslaufend, kein Nachfedern */
  --dauer-hover: 150ms;                            /* Hover, Reiter, Auswahl */
  --dauer-panel: 220ms;                            /* Aufklappen, Dialoge */
  --transition-slow: 500ms cubic-bezier(.2, .8, .2, 1);

  /* Glows – nur für Belohnungsmomente (Kartenfund, Entwicklung) und Spieltische, nie an normalen Knöpfen oder Karten */
  --shadow-neon: 0 0 0 1px color-mix(in srgb, var(--color-cyan) 55%, transparent), 0 0 22px color-mix(in srgb, var(--color-cyan) var(--glow-strength), transparent);
  --glow-primary: 0 6px 20px color-mix(in srgb, var(--color-electric) var(--glow-strength), transparent);
  --glow-gold: 0 0 18px color-mix(in srgb, var(--color-gold-bright) var(--glow-strength), transparent);
  --glow-cyan-soft: 0 0 0 1px color-mix(in srgb, var(--color-cyan) 45%, transparent), 0 0 18px color-mix(in srgb, var(--color-cyan) 22%, transparent);
  --gold-verlauf: linear-gradient(180deg, #ffe07a 0%, #ffc23a 55%, #f0a21f 100%);

  /* Typografie: Inter für alles Lesbare (UI + Lerntext). Seit 2026-10-21 (Apple-Design-Prüfung) auch Eyebrows, Labels und
     Nummern in Inter (--font-label = --font): Monospace war an zu vielen Stellen, die kein Code sind, und verschwamm in
     Informatik mit echtem Code. IBM Plex Mono bleibt nur als bewusster Akzent (--font-akzent: getipptes Wort auf der
     Startseite, große Einheiten-Nummern). --font-mono ist die Code-Schrift der Editoren und Quelltexte.
     Kein Google-Fonts-Abruf (Datenschutz). */
  --font: "Inter", "Inter Variable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font);
  --font-label: var(--font);
  --font-akzent: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --font-karte: "Lilita One", var(--font);
  /* Druck-Arbeitsblätter Kl. 5–8 (2026-10-27): Schulbuchschrift, schmaler als Inter, klare Ziffern, auf jedem Schulrechner vorhanden (kein Laden) */
  --font-blatt: Arial, Helvetica, "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace;
  /* Skala (7 Stufen): Seite, Bereich, Komponente, Lerntext, UI, Hilfe, Metadaten – nichts kleiner als --fs-meta */
  /* Feste Regel seit 2026-10-22 (Nutzer, Vorbild Apple): Überschriften heben sich durch einen deutlichen Größensprung ab, nicht durch Fettung –
     H2 rund doppelt so groß wie der Fließtext, alle Überschriften höchstens halbfett (--fw-titel), nie fett/extra-fett */
  --fs-h1: clamp(2.25rem, 1.6rem + 2vw, 3rem);         /* 36–48 px  Seitenüberschrift (vorher 32–40) */
  --fs-h2: clamp(1.75rem, 1.4rem + 1.1vw, 2.25rem);    /* 28–36 px  Bereichsüberschrift (vorher 24–28) */
  --fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);    /* 20–24 px  Komponentenüberschrift (vorher 18–21) */
  --fs-h4: 1.0625rem;                                  /* 17 px */
  --fs-lern: 1.0625rem;                                /* 17 px     Fließtext, Aufgaben, Antwortoptionen */
  --fs-ui: 0.9375rem;                                  /* 15 px     Knöpfe, Navigation, Beschriftungen */
  --fs-hilfe: 0.875rem;                                /* 14 px     Hilfstexte */
  --fs-meta: 0.8125rem;                                /* 13 px     Metadaten, Status, Labels */
  --text-lern: var(--fs-lern);
  --text-ui: var(--fs-ui);
  /* Vier Schriftstärken – seit 2026-10-22 nach Apple-Vorbild etwas leichter (halbfett 650 → 600, fett 750 → 700):
     Fließtext normal, Betonung sparsam; wirkt ruhiger, Hierarchie kommt aus der Größe */
  --fw-normal: 400;
  --fw-mittel: 500;
  --fw-halbfett: 600;
  --fw-fett: 700;
  --fw-titel: 600;   /* alle Überschriften (h1–h4, Hero, Abschnittstitel) */
  --lh-lern: 1.6;   /* 2026-11-01 vorher 1.7: kompakter, wirkt ruhiger */
  --lh-ui: 1.35;
  --lh-titel: 1.15;
  --lesebreite: 60ch;          /* angenehme Zeilenlänge für längere Lerntexte: rund 70–75 Zeichen (2026-10-21, vorher 70ch ≈ 90 Zeichen) */
  /* Icon-Größen je Einsatz – nie eigene px-Werte, immer diese Stufen */
  --icon-status: 18px;         /* Statusanzeigen */
  --icon-nav: 22px;            /* Navigation, Menüs, Kopfzeile */
  --icon-inhalt: 26px;         /* Aufgaben- und Inhaltstypen, Menü-Einträge */
  --icon-reihe: 34px;          /* Unterrichtsreihen, Kapitel */
  --icon-kachel: 56px;         /* Startseiten-Kacheln */
  --icon-auszeichnung: 72px;   /* Siegel, Auszeichnungen */

  --maxw: 1140px;
  --maxw-weit: 1480px;          /* Startseite, Atlas, Begleiter: Welt bekommt viel Fläche */
  --header-h: 44px;   /* Kopfzeile wie Apple (2026-10-22, vorher 52 bzw. 64 px); Klickflächen darin 44 px hoch */

  /* Wissensregionen und Stufenfarben: nur als kleine Kennung (Punkt, Linie, Segment), nicht als Text- oder Flächenfarbe */
  --region-mathematik: #ff4fb8;
  --region-zahlen-algebra: #ff5c9a;
  --region-funktionen: #ff6fd2;
  --region-geometrie: #ffb02e;
  --region-stochastik: #b37bff;
  --region-analysis: #ffd04d;
  --region-informatik: #38c8ff;
  --region-algorithmik: #4aa8ff;
  --region-programmierung: #3ad7ff;
  --region-daten: #8f7bff;
  --region-logik-automaten: #2fe3a0;
  --region-netzwerke: #62b6ff;
  --region-ki: #8a6bff;
  --region-zentrum: #ffcb47;
  /* Kapitel-Akzente (Feinschliff 2026-10-19): unterscheiden nur Einheiten-Karten und ihre Illustrationen, nie Text-/Flächenfarbe der Seite */
  /* 2026-10-20: Türkis, Grün, Bernstein einen Hauch dunkler – als Nummern-/Eyebrow-Text vorher < 4,5 : 1, jetzt ≥ 5 : 1 auf Off-White */
  --akzent-tuerkis: #18737a;
  --akzent-gruen: #367540;
  --akzent-bernstein: #955b0b;
  --akzent-violett: #6e52a8;
  --akzent-koralle: #b84a35;
  --akzent-blau: #2c65a6;
  /* Textmarker (2026-10-22, Vorbild Apple Schulbildung): helle Pastelltöne wie echte Leuchtstifte, dunkler Text darauf.
     Nur Kapitel-Akzente – nie Grün/Rot/Gold der Rückmeldungen und Belohnungen (Farbe = Bedeutung). */
  --marker-gelb: #f7df74;
  --marker-tuerkis: #a6e2dc;
  --marker-blau: #b6d3f5;
  --marker-violett: #d7c9f6;
  --marker-koralle: #f6c0b1;
  --marker-gruen: #c2e5c6;
  /* Fach-Farbband (2026-10-23, design.md „Erkennungszeichen“): ein Band je Fachseite, Übergang kaum sichtbar.
     Mathe warm (Sand → Apricot), Informatik kühl (Türkis → Petrol); nie Knöpfe, Links, Status */
  --fach-band-mathe-a: #fbf3dc;
  --fach-band-mathe-b: #fbe7d9;
  --fach-band-informatik-a: #e3f3f1;
  --fach-band-informatik-b: #dfebf1;
  /* Spiel-Farbband (2026-10-25): Hintergrund der vier Klassenspiele wie das Fach-Farbband, je Spiel zwei nahe Pastelltöne
     passend zur Spielfarbe: Schätz mal Pfirsich → Apricot, Zwei Wahrheiten Rosé → Flieder, Knobelrunde Lavendel → Veilchen,
     Begriffsnetz Eisblau → Himmelblau */
  --spiel-band-schaetzen-a: #fdeedb;
  --spiel-band-schaetzen-b: #fce2d3;
  --spiel-band-luege-a: #fce6e8;
  --spiel-band-luege-b: #f6e3f1;
  --spiel-band-knobel-a: #efe7fb;
  --spiel-band-knobel-b: #e5e5fa;
  --spiel-band-netz-a: #e0f1f6;
  --spiel-band-netz-b: #dfe8f8;
  --stift: #3b4352;   /* Handschrift/Stiftstrich: Graphit */
  /* Icon-System (2026-10-19): gedämpfte semantische Akzente, im Hellen dunkler gesetzt (Kontrast ≥ 3 : 1 auf Off-White) */
  --icon-strich: 1.5;   /* Swift-Stil (2026-10-22): dünne Linien ohne Fläche */
  /* Swift-Reihe (2026-10-22): Blau (schiefer), Blaugrün (petrol), Salbei, Oliv (bernstein); ≥ 3,9 : 1 auf Seite, Fläche, soft */
  --ikon-petrol: #0f7c86;
  --ikon-salbei: #4a835a;
  --ikon-bernstein: #76741a;
  --ikon-lavendel: #745d9f;
  --ikon-schiefer: #1f72bd;
  --ikon-koralle: #a35647;
  --ikon-fehler: #b4453b;
  /* Die fünf Elemente (Elementarhüter, Elementekreis): gedeckt, in beiden Modi gleich */
  --element-holz: #4f9a5c;
  --element-feuer: #d4553a;
  --element-erde: #b98a45;
  --element-metall: #8f99a8;
  --element-wasser: #2f8fbf;
  /* Revierkampf-Karten (css/revierkarten.css, 2026-10-25), in beiden Modi gleich: Rand je Seltenheit (hell, Grund, dunkel),
     Schein, Kartentinte und Stärke-Scheibe (hell, Grund, dunkel, Rand; grün gestärkt, rot geschwächt) */
  --ks-normal-a: #e6e9ed; --ks-normal-b: #8b939d; --ks-normal-c: #3c424a;
  --ks-selten-a: #d6f0ff; --ks-selten-b: #3f8fe0; --ks-selten-c: #12458f;
  --ks-legendaer-a: #fff3c4; --ks-legendaer-b: #e0aa3a; --ks-legendaer-c: #8a5a0e;
  --ks-wesen-a: #ecdcff; --ks-wesen-b: #9a6be0; --ks-wesen-c: #3d1873;
  --ks-schein-selten: rgb(63 143 224 / .45);
  --ks-schein-legendaer: rgb(224 170 58 / .55);
  --ks-schein-wesen: rgb(154 107 224 / .6);
  --ks-tinte: #1b2128;
  --ks-staerke: #ff9a2e, #f07a12, #c45300, #8f3800;
  --ks-staerke-hoch: #7ee05a, #3fae2a, #22781a, #134d0e;
  --ks-staerke-tief: #ff6a5a, #e0382a, #a51d14, #6e0f0a;
  --border-w: 1px;

  /* Alte Namen → neue Tokens (von allen Seiten-CSS-Dateien genutzt) */
  --bg: var(--color-bg);
  --bg-soft: var(--color-bg-soft);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-raised);
  --border: var(--color-border);
  --text: var(--color-text);
  --text-muted: var(--color-text-muted);
  --primary: var(--color-primary);
  --primary-strong: var(--color-primary-strong);
  --primary-soft: var(--color-primary-soft);
  --on-primary: var(--color-on-primary);
  --sakura: var(--color-pink);
  --sakura-soft: color-mix(in srgb, var(--color-pink) 16%, var(--color-surface));
  --success: var(--color-success);
  --success-soft: var(--color-success-soft);
  --warning: var(--color-warning);
  --xp: var(--color-gold-bright);
  --error: var(--color-danger);
  --error-soft: var(--color-danger-soft);
  --radius-s: var(--radius-sm);
  --radius: var(--radius-flaeche);   /* alter Name für Applet-Rahmen und Kästen (.task, .kontext, Simulationen) */
  --radius-l: var(--radius-lg);
  --shadow: var(--shadow-card);
  --shadow-pop: var(--shadow-lift);   /* früher Manga-Versatzschatten */
}

.thema-dunkel { color: var(--text); }

/* ---------- Reset & Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--page-bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-lern);
  font-weight: 400;
  line-height: 1.6;
  /* Notbremse zum Formelschutz in js/site.js: eine Formel, die länger als die ganze Zeile ist, darf doch umbrechen statt überzustehen */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  /* eindeutige Buchstaben (2026-10-21): kleines l mit Bogen (cv05), großes I mit Querstrichen (cv08) – „Il1“ sind sonst
     kaum zu unterscheiden, wichtig in Informatik; beide Varianten sind in fonts/inter/InterVariable.woff2 enthalten */
  font-feature-settings: "cv05", "cv08";
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
main { flex: 1; }
fieldset { min-width: 0; }   /* Browser-Standard min-content lässt Formulare auf dem Handy über den Rand laufen */
img, svg { max-width: 100%; display: block; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: color-mix(in srgb, var(--link) 78%, var(--text)); }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.2;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
/* Hierarchie über Größe (seit 2026-10-22 alle Überschriften halbfett, keine fetten Titel) */
/* Laufweite (2026-10-22, Apple-Vorbild): je größer, desto enger – Inter schaltet bei großer Schrift selbst auf die Display-Form (opsz) */
h1 { font-size: var(--fs-h1); font-weight: var(--fw-titel); letter-spacing: -0.03em; line-height: 1.1; }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-titel); letter-spacing: -0.024em; line-height: 1.15; }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-titel); letter-spacing: -0.01em; line-height: 1.3; }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-titel); line-height: 1.35; }
p { margin: 0 0 1em; text-wrap: pretty; }
/* Betonung und Tabellenköpfe halbfett statt Browser-„bold“ 700 (2026-10-22, gleiche Regel wie Überschriften) */
strong, b, th { font-weight: var(--fw-halbfett); }
code, kbd { font-family: var(--font-mono); font-size: 0.92em; }
/* Wurzel wie im Heft auf allen Seiten (js/site.js › wurzelnSetzen; gleiche Regeln wie css/mathe.css): Strich über dem ganzen Radikanden */
.mx-wurzel { display: inline-flex; align-items: stretch; white-space: nowrap; line-height: 1.15; vertical-align: baseline; }
.mx-wurzel__z { display: inline-block; width: 0.62em; overflow: hidden; -webkit-text-fill-color: transparent; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 24' preserveAspectRatio='none'%3E%3Cpath d='M0.6 14.2 L2.9 12.9 L6.1 22.6 L11.3 0.8 L12 0.8' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 24' preserveAspectRatio='none'%3E%3Cpath d='M0.6 14.2 L2.9 12.9 L6.1 22.6 L11.3 0.8 L12 0.8' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.mx-wurzel__r { border-top: max(1.5px, 0.07em) solid currentColor; padding: 0.08em 0.1em 0 0.06em; }
.mx-wurzel__r .gap { margin-top: 0.15em; }
.mx-wurzel__r { align-self: baseline; }   /* Grundlinie vom Radikanden, nicht vom Haken (sonst rutscht √ mit Bruch darin nach unten) */
/* Programmcode aus dem Fließtext als eigener Block (js/site.js › codeBloecke) */
code.code-zeilen, .kapitel code.code-zeilen, .task code.code-zeilen {
  display: block; width: fit-content; max-width: 100%; box-sizing: border-box; margin: 0.5rem 0; padding: 0.6rem 0.9rem;
  white-space: pre; overflow-x: auto; font-size: 0.88rem; font-weight: 400; line-height: 1.55;
  background: var(--code-bg); color: var(--code-text); border: 1px solid var(--border); border-radius: var(--radius-s);
}
.options code.code-zeilen, .kapitel .options code.code-zeilen { margin: 0.2rem 0; }
/* Keine Ligaturen: >=, <=, != und == sollen wie in BlueJ als einzelne Zeichen erscheinen, nicht als ≥ ≤ ≠ */
html, input, textarea, select, button { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
/* Fokus überall gleich (3 px Blau, 2 px Abstand) – nie outline: none ohne gleichwertigen Ersatz */
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-primary) 35%, transparent); }
html { scrollbar-color: var(--color-border-strong) transparent; }
/* Feinschliff 2026-10-20: Platz für den Scrollbalken immer freihalten – sonst springen Kopfzeile und Inhalt beim Wechsel
   zwischen kurzen und langen Seiten um die Balkenbreite zur Seite */
html { scrollbar-gutter: stable; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  /* Sanfte Ersatzbewegung (2026-10-26, Apple-Design-Prüfung): Bewegung entfällt, Rückmeldung bleibt als kurzes Überblenden.
     Bedienelemente wechseln Farbe/Fläche weich, Einblend-Animationen werden zu reinem Einblenden ohne Gleiten oder Skalieren. */
  :where(a, button, .btn, input, select, textarea, .mc__opt, .order__item, .card, .panel, .status) {
    transition-property: color, background-color, border-color, box-shadow, opacity !important; transition-duration: 150ms !important; transition-timing-function: ease !important; }
  .xp-pop, .entw-feier__neu img { animation-duration: 200ms !important; animation-delay: 0s !important; }
  /* Die zugehörigen @keyframes stehen am Dateiende – sie müssen nach den normalen Fassungen kommen, sonst gelten diese */
}

/* Drück-Rückmeldung (2026-10-21, Apple-Design-Prüfung): sofort beim Berühren, nicht erst beim Loslassen – wichtig fürs iPad,
   wo es kein Hover gibt. Kleine Bedienelemente sinken ein (eigene Eigenschaft „scale“, stört vorhandene transforms nicht),
   breite Zeilen (Antwortoptionen, Navigation) bekommen nur eine Fläche. iOS braucht dafür einen touchstart-Listener (js/site.js).
   Reduzierte Bewegung: nur die Fläche. */
html { -webkit-tap-highlight-color: transparent; }
:where(.btn, .s2-klasse, .s2-fach button, .segment > button, .tool-btn, .theme-schalter, .menu-btn, .held-chip, .xp-pill, .hn-link,
  .nav-griff, .hilfe-griff, a.s2-karte, a.welt-kachel, a.card):not(:disabled, [aria-disabled="true"]):active { scale: 0.97; }
:where(a.s2-karte, a.st-karte, a.card):not([aria-disabled="true"]):active { scale: 0.985; }
:where(.mc__opt, .order__item, .kn-kap, .kn-subs a, .hn-drop__panel a, .site-nav a):active { background: var(--surface-selected); }
@media (prefers-reduced-motion: reduce) { :where(*):active { scale: none; } }
/* Fähigkeiten der Tierkarten als gemalte Medaillons (2026-10-21, js/duell/symbole.js → img.sym--bild): das Medaillon bringt
   eigenen Ring und Farbe mit, darum füllt es die Fassung ganz und deren dunkle bzw. helle Fläche entfällt. Legendäre zweite
   Fähigkeit behält einen goldenen Ring. */
img.sym--bild { display: block; object-fit: contain; }
.k2__faeh-sym:has(> img.sym--bild), .k3__plakette:has(> img.sym--bild),
.regeln__faeh li > span:first-child:has(> img.sym--bild), .regel-faeh li > span:first-child:has(> img.sym--bild) {
  background: none; border-color: transparent; padding: 0; }
.k2__faeh-sym:has(> img.sym--bild) { box-shadow: none; }
.k3__plakette:has(> img.sym--bild) { border: 0; box-shadow: 0 .8cqi 1.4cqi rgb(0 0 0 / .45); }
.k2__faeh--zweite .k2__faeh-sym:has(> img.sym--bild) { box-shadow: 0 0 0 .5cqi #e8c25a; }
.k3__plakette--zweite:has(> img.sym--bild) { box-shadow: 0 0 0 1cqi #e8c25a, 0 .8cqi 1.4cqi rgb(0 0 0 / .45); }
.k2__faeh-sym > img.sym--bild, .k3__plakette > img.sym--bild,
.regeln__faeh li > span:first-child > img.sym--bild, .regel-faeh li > span:first-child > img.sym--bild { width: 100%; height: 100%; }
/* Hell/Dunkel-Wechsel als kurze Überblendung (js/site.js, View Transition) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: ease-out; }

/* ---------- Layout-Helfer ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 720px) { .container { padding-inline: 28px; } }
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--soft { background: var(--bg-soft); }
/* Mathe-Seiten (2026-10-21, Apple-Design-Prüfung): Labels, Nummern und Eyebrows in Inter statt Code-Schrift – Monospace
   gehört zur Informatik; Ziffern gleich breit (tabular-nums) nur in Tabellen, kleine Labels bekommen etwas Luft.
   Nicht am ganzen body (2026-10-27): In Inter macht tnum auch Bindestrich und Komma breit („Geld - Labor“, „3 , 20“). */
body[data-fach="mathe"] table { font-variant-numeric: tabular-nums; }
/* kleine Labels in Inter: etwas Luft (kleine Schrift will leicht positive Laufweite) */
.eyebrow { letter-spacing: 0.01em !important; }
.section-head { max-width: 640px; margin-bottom: 2.25rem; }
.section-head p { color: var(--text-muted); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-label); font-size: var(--fs-meta); font-weight: var(--fw-mittel); letter-spacing: 0; text-transform: none; line-height: var(--lh-ui);
  color: var(--text-tertiary); margin-bottom: 0.75rem;   /* Tertiär (2026-11-01, vorher --text-secondary) */
}
/* Erkennungszeichen Schrägstrich (Stil „Do-matik“, 2026-10-22): vor jedem Hinweis über einer Überschrift ein „/“ in Akzentblau,
   wie im „Lerne /…“ der Startseite. Nur das Zeichen in Code-Schrift (Kennung), der Text bleibt Inter (CLAUDE.md);
   Mathe-Seiten ohne Code-Schrift. Hinweise mit eigenem Symbol bekommen keinen Strich. */
.eyebrow:not(:has(> .icon, > img, > svg))::before, .kapitel__eyebrow::before, .s3-eyebrow::before, .s2-karte__leit::before {
  content: "/"; margin-right: 0.35em; font-family: var(--font-akzent); font-weight: var(--fw-normal); color: var(--nav-aktiv); opacity: 0.75;
}
.eyebrow:not(:has(> .icon, > img, > svg))::before { margin-right: 0; }   /* .eyebrow hat schon gap */
body[data-fach="mathe"] :is(.eyebrow, .kapitel__eyebrow, .pfad > *)::before { font-family: var(--font-label); }
/* Pfad als Zeile über dem Seitenkopf (D.pfad in js/site.js, 2026-10-22): „/ Mathematik / Klasse 7 / Brüche“ */
.pfad { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0 0 var(--space-4); font-size: var(--fs-ui); line-height: 1.4; color: var(--text-secondary); }
.pfad > * { white-space: nowrap; }
.pfad a { color: var(--text-secondary); text-decoration: none; }
.pfad a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; }
.pfad > [aria-current] { color: var(--text); font-weight: var(--fw-mittel); }
/* Safari (iPad, 2026-10-25) brach „Klasse 5“ trotz Platz um: letzter Teil bleibt ganz, umbrechen darf er erst auf schmalen Geräten */
@media (max-width: 600px) { .pfad > [aria-current] { white-space: normal; } }
.pfad > *::before { content: "/"; display: inline-block; margin: 0 0.45em; font-family: var(--font-akzent); color: var(--nav-aktiv); opacity: 0.75; }
.pfad > :first-child::before { margin-left: 0; }

/* ---------- Lerntext: ruhige Lesefläche ----------
   Längere Texte in Reihen (Kapitel, Story, Aufgaben, Merkkästen) mit großzügiger Zeilenhöhe und begrenzter Zeilenlänge.
   :where() = Gewicht 0 → jede spezielle Regel (Lückentext, Comic-Sprechblase, Tabelle …) behält Vorrang. */
:where(.kapitel, .reihe-content, .task, .story) :where(p, li, dd) { line-height: var(--lh-lern); }
:where(.kapitel, .reihe-content) :where(p, li) { max-width: var(--lesebreite); }
:where(.kapitel, .reihe-content) :where(.comic, table, .karten-raster, .kontext) :where(p, li) { max-width: none; }
.muted { color: var(--text-muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Buttons (Design System 2.0) ----------
   Eine Priorität pro Knopf: .btn (Primär, gefüllt Blau) · .btn--ghost (Sekundär, Rand) · .btn--text (Tertiär, nur Text) ·
   .btn--icon (nur Symbol, 44 × 44) · .btn--gefahr (Löschen u. ä.) · .btn--gold (Belohnung annehmen, sparsam).
   .btn--cyan ist seit 2026-10-19 gleich .btn--ghost (Türkis gehört dem Lernfortschritt).
   Keine Schatten, kein Anheben; Zustände: Hover = Fläche (Ghost füllt sich in Textfarbe), gedrückt = eine Stufe dunkler,
   Fokus = Ring, gewählt = aria-pressed/aria-selected, laden = aria-busy. */
.btn {
  --btn-bg: var(--interactive-primary);
  --btn-fg: var(--on-primary);
  --btn-rand: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: var(--control-h); padding: 0.55em 1.35em; border-radius: var(--radius-knopf); border: 1px solid var(--btn-rand);
  background: var(--btn-bg); color: var(--btn-fg);
  font: inherit; font-weight: var(--fw-halbfett); font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; box-shadow: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), scale 120ms ease;
}
.btn:hover { background: var(--interactive-hover); color: var(--btn-fg); }
.btn:active { background: var(--interactive-pressed); }
/* Sekundär: Rand zwischen --border und --border-strong (2026-11-01, vorher --border-strong), damit Primärknöpfe allein führen */
.btn--ghost, .btn--cyan { --btn-bg: transparent; --btn-fg: var(--text); --btn-rand: color-mix(in srgb, var(--border-strong) 55%, var(--border)); }
/* Umrandeter Knopf: beim Hover nur leichte Tonfläche, Schrift bleibt Textfarbe (seit 2026-11-01; vorher Füllung in Textfarbe,
   die bei Seitenregeln mit eigener Schriftfarbe Schwarz auf Schwarz ergab – nie wieder dunkel füllen) */
.btn--ghost:hover, .btn--cyan:hover { background: var(--ton-hover); color: var(--text); border-color: var(--border-strong); }
.btn--ghost:active, .btn--cyan:active { background: color-mix(in srgb, var(--text) 18%, var(--surface)); color: var(--text); border-color: var(--border-strong); }
.btn--icon:active, .btn--gefahr:active { filter: brightness(0.92); }
.btn--text { --btn-bg: transparent; --btn-fg: var(--link); min-height: 0; padding: 0.25em 0.1em; font-weight: var(--fw-mittel); }
.btn--text:hover { background: transparent; color: var(--link); text-decoration: underline; }
.btn--icon { --btn-bg: transparent; --btn-fg: var(--text); --btn-rand: transparent; width: var(--control-h); padding: 0; }
.btn--icon:hover { background: var(--surface-elevated); color: var(--text); }
.btn--icon .icon { width: var(--icon-nav); height: var(--icon-nav); }
.btn--gefahr { --btn-bg: transparent; --btn-fg: var(--error); --btn-rand: color-mix(in srgb, var(--error) 55%, var(--border)); }
.btn--gefahr:hover { background: var(--error-soft); color: var(--error); border-color: var(--error); }
/* Belohnung annehmen (Kartenfund, Feier) – flaches Gold, eine pro Bereich */
.btn--gold { --btn-bg: var(--reward); --btn-fg: var(--color-on-hell); --btn-rand: transparent; }
.btn--gold:hover { background: color-mix(in srgb, var(--reward) 86%, #fff); color: var(--color-on-hell); }
.btn[aria-pressed="true"], .btn[aria-selected="true"] { --btn-bg: var(--surface-selected); --btn-fg: var(--text); --btn-rand: var(--interactive-primary); }
.btn--small { min-height: var(--control-h-klein); padding: 0.35em 0.85em; font-size: var(--fs-ui); }
.btn--big { padding: 0.75em 1.6em; font-size: var(--fs-lern); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; filter: none; }
.btn[aria-busy="true"] { cursor: progress; opacity: 0.75; }

/* ---------- Flächen ----------
   .card und .panel sind seit 2026-10-19 dieselbe Fläche (Rand statt Schatten, 8 px); .card bringt nur den Innenabstand mit.
   Regel: innerhalb einer Fläche keine weitere umrandete Fläche – unterteilen mit Trennlinie oder --surface-sunken. */
.card, .panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-flaeche);   /* seit 2026-10-22 wie die Kacheln der Startseite; Bedienelemente bleiben klein */
  box-shadow: none;
}
.card { padding: 1.5rem; }
/* Etappen-Nummer als eigene Zeile über dem Titel statt „1 · Titel“ (2026-10-21) */
h3 > .etappe-nr { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; font-family: var(--font-label); font-size: var(--fs-meta);
  font-weight: var(--fw-mittel); letter-spacing: 0.01em; line-height: var(--lh-ui); color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Glas-Panel über Weltbildern (Hero, Atlas, Lernort): etwas transparenter, mit Unschärfe dahinter */
.panel--glas {
  background: color-mix(in srgb, var(--color-bg-deep) 62%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
}

/* Sprechblase (z. B. für Tipps) */
.bubble {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1.1rem;
}
.bubble::after {
  content: ""; position: absolute; left: 26px; bottom: -8px;
  width: 14px; height: 14px; background: var(--surface-2);
  border-right: 1px solid var(--color-border-strong); border-bottom: 1px solid var(--color-border-strong);
  transform: rotate(45deg);
}

/* Segment-Schalter (Iteration 3, 2026-10-19): gemeinsamer Baustein für Filter und Tabs – zusammenhängende Leiste,
   gewählt = Primärfläche + Akzentlinie unten + Gewicht (nicht nur Farbe). Knöpfe mit aria-pressed bzw. aria-selected. */
/* ---------- Textmarker und Unterstrich (2026-10-22) ----------
   <mark class="marker">Wort</mark> (Farbe: class="marker marker--blau" …, Standard Gelb) und
   <span class="unterstrich unterstrich--violett">Wort</span> (handgezogene Linie, nur kurze Wortgruppen in einer Zeile).
   Zeichnen sich einmal auf, sobald sie ins Bild kommen (js/site.js setzt .ist-gezeichnet), reduzierte Bewegung: sofort.
   Sparsam: höchstens eine Stelle pro Überschrift bzw. die Fachbegriffe eines Merkkastens. */
.marker {
  /* Stil „Do-matik“ (2026-10-22): gerader Leuchtstift-Balken auf der unteren Worthälfte wie im Heft, statt Pille (Apple) */
  /* 2026-10-22 verfeinert: flacher (38 statt 46 % der Zeilenhöhe), liegt hinter dem unteren Drittel der Buchstaben,
     ragt nur 0,04 em über das Wort hinaus (Polster 0,08 em, Rand −0,04 em) */
  --mk: var(--marker-gelb);
  --mk-hoehe: 38%;
  padding: 0 0.08em; margin: 0 -0.04em; color: inherit;
  border-radius: 2px;
  background: linear-gradient(var(--mk), var(--mk)) no-repeat 0 86% / 0% var(--mk-hoehe);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 620ms cubic-bezier(0.33, 0.7, 0.2, 1);
}
.marker.ist-gezeichnet { background-size: 100% var(--mk-hoehe); }
.marker--tuerkis { --mk: var(--marker-tuerkis); }
.marker--blau { --mk: var(--marker-blau); }
.marker--violett { --mk: var(--marker-violett); }
.marker--koralle { --mk: var(--marker-koralle); }
.marker--gruen { --mk: var(--marker-gruen); }
.marker--mathe { --mk: var(--marker-mathe); }
.marker--informatik { --mk: var(--marker-informatik); }
.marker--botschaft { --mk: var(--marker-botschaft); }
/* Fachbegriffe in Merkkästen (js/site.js setzt die Klasse): Textfarbe statt Grün, damit der Marker allein hervorhebt */
.marker.marker--begriff { color: var(--text); padding-inline: 0.12em; }
.unterstrich { --ul: var(--akzent-violett); position: relative; white-space: nowrap; }
.unterstrich::after {
  content: ""; position: absolute; left: -0.04em; right: -0.04em; bottom: -0.2em; height: 0.26em; pointer-events: none;
  background: var(--ul);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5C38 4 78 9.5 118 6.2S176 3.6 198 6.8' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5C38 4 78 9.5 118 6.2S176 3.6 198 6.8' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  clip-path: inset(0 100% 0 0); transition: clip-path 620ms cubic-bezier(0.33, 0.7, 0.2, 1);
}
.unterstrich.ist-gezeichnet::after { clip-path: inset(0 0 0 0); }
.unterstrich--tuerkis { --ul: var(--akzent-tuerkis); }
.unterstrich--blau { --ul: var(--akzent-blau); }
.unterstrich--koralle { --ul: var(--akzent-koralle); }
.unterstrich--bernstein { --ul: var(--akzent-bernstein); }
.unterstrich--gruen { --ul: var(--akzent-gruen); }
@media (prefers-reduced-motion: reduce) { .marker, .unterstrich::after { transition: none; } }
@media (scripting: none) { .marker { background-size: 100% var(--mk-hoehe); } .unterstrich::after { clip-path: none; } }

/* Handschrift und Stiftstrich (2026-10-23, js/handschrift.js, design.md „Erkennungszeichen“): Graphit wie ein Bleistift, kein Knopf-Blau.
   Strichstärke je Zeichen über --sw (skalierte Zeichen; vector-effect würde das Aufzeichnen mit pathLength verkürzen).
   Jeder Pfad zeichnet sich einmal mit Versatz --d auf, sobald js/site.js ist-gezeichnet setzt; danach Stillstand.
   Unsichtbar bis zum Start, damit die runde Strichkappe vorher keinen Punkt zeigt. */
.handschrift, .stiftstrich { display: block; overflow: visible; color: var(--stift); pointer-events: none; }
.handschrift path, .stiftstrich path {
  fill: none; stroke: currentColor; stroke-width: var(--sw, 1.8); stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0;
}
.stiftstrich path { stroke-width: 1.75; }
/* Umkreistes Wort (js/site.js, D.umkreisen): Kreis liegt hinter dem Text, ragt über den Rand hinaus, Lage und Größe misst das Skript;
   Farbe Graphit, an Fehlerstellen (Stolpersteine, Fehler finden, Bug-Jagd) Koralle */
.umkreist { position: relative; isolation: isolate; }
span.umkreist { display: inline-block; white-space: nowrap; }
.umkreist > .stiftstrich--kreis { position: absolute; max-width: none; z-index: -1; }
.umkreist--koralle > .stiftstrich--kreis { color: var(--akzent-koralle); }
.stiftstrich--kreis path { stroke-width: 2; }
.stiftstrich--gespiegelt { transform: scaleX(-1); }
.handschrift .hs-haken { color: var(--color-success); stroke: var(--color-success); stroke-width: 2; }
:is(.handschrift, .stiftstrich).ist-gezeichnet path { opacity: 1; stroke-dashoffset: 0;
  transition: opacity 0s linear var(--d, 0ms), stroke-dashoffset var(--dauer, 300ms) cubic-bezier(0.45, 0.05, 0.3, 1) var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) { :is(.handschrift, .stiftstrich).ist-gezeichnet path { transition: none; } }
@media (scripting: none), print { .handschrift path, .stiftstrich path { opacity: 1; stroke-dashoffset: 0; } }
@media print { .marker { background-size: 100% var(--mk-hoehe); } .unterstrich::after { clip-path: none; } }
/* Firefox ignoriert Seitenumbrüche in Flex-Eltern (2026-11-02: Seite 2 der Arbeitsblätter rutschte auf Seite 1), darum im Druck kein Flex am body */
@media print { body { display: block; min-height: 0; overflow: visible; } }

/* Regler (2026-10-31): alle Schieberegler mindestens 36 px hoch (Finger 44 px), Standardfarbe Blau; Applets dürfen eigene accent-color setzen (:where = keine Spezifität) */
:where(input[type="range"]) { min-height: var(--control-h-klein); cursor: pointer; accent-color: var(--interactive-primary); }
@media (pointer: coarse) { :where(input[type="range"]) { min-height: var(--control-h); } }

.segment { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: calc(var(--radius-knopf) + 2px); background: var(--surface-sunken); border: 1px solid var(--border-subtle); }
.segment > button {
  display: inline-flex; align-items: center; gap: 0.4em; min-height: var(--control-h-klein); padding: 0.25rem 0.75rem; border: 0; border-radius: var(--radius-knopf);
  background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--fs-hilfe); font-weight: var(--fw-mittel); cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.segment > button:hover { background: var(--surface); color: var(--text); }
.segment > button[aria-pressed="true"], .segment > button[aria-selected="true"] {
  background: var(--linie-unten), var(--surface); color: var(--text); font-weight: var(--fw-halbfett); box-shadow: 0 0 0 1px var(--border-subtle);
}
.segment > button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; position: relative; z-index: 1; }
@media (pointer: coarse) { .segment > button { min-height: var(--control-h); } }

/* Chips & Badges */
.chip {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.25em 0.7em; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: var(--fs-meta); font-weight: var(--fw-halbfett); color: var(--text-muted);
}
.xp-badge {
  display: inline-flex; align-items: center; gap: 0.3em; white-space: nowrap;
  padding: 0.2em 0.65em; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-gold-bright) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-gold-bright) 35%, transparent);
  color: var(--reward-text); font-weight: var(--fw-halbfett); font-size: var(--fs-meta); font-family: var(--font-label); font-variant-numeric: tabular-nums;
}
.lv-badge {
  display: inline-flex; align-items: center; gap: 0.3em; white-space: nowrap;
  padding: 0.2em 0.6em; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-cyan) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-cyan) 35%, transparent);
  color: var(--color-cyan); font-weight: var(--fw-halbfett); font-size: var(--fs-meta); font-family: var(--font-label);
}

/* Status-Marke (Text + Farbe, nie nur Farbe) */
.status {
  display: inline-flex; align-items: center; gap: 0.35em; white-space: nowrap;
  padding: 0.15em 0.55em; border-radius: var(--radius-sm);
  font-size: var(--fs-meta); font-weight: var(--fw-mittel); letter-spacing: 0; text-transform: none; line-height: var(--lh-ui);
  color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border);
}
/* Feste Zustände (D.status in site.js, 2026-10-11): Nicht begonnen (neutral) · In Arbeit (Türkis) · Abgeschlossen (Grün) ·
   Wiederholung fällig (Orange) · Gesperrt · Bald verfügbar – Gold bleibt XP/Belohnungen vorbehalten */
.status .status__icon { width: var(--icon-status); height: var(--icon-status); flex: none; }
/* Feinschliff 2026-10-20: „Nicht begonnen“ ist der Normalfall → ohne Kasten, nur Icon + Text; begonnene Zustände behalten ihre Fläche */
.status--neu { color: var(--text-muted); background: transparent; border-color: transparent; padding-inline: 0; }
.status--gesperrt { color: var(--text-muted); background: var(--surface-2); border-color: var(--border); }
.status--gesperrt .status__icon, .status--bald .status__icon { opacity: .75; }
.status--bald { color: var(--text-muted); background: transparent; border: 1px dashed var(--border); }
/* In Arbeit = Lernfortschritt → Türkis (Variante 2) */
.status--aktiv { color: color-mix(in srgb, var(--progress) 72%, var(--text)); background: color-mix(in srgb, var(--progress) 10%, var(--surface)); border-color: color-mix(in srgb, var(--progress) 40%, transparent); }
.status--wiederholen { color: color-mix(in srgb, var(--color-warning) 62%, var(--text)); background: color-mix(in srgb, var(--color-warning) 12%, var(--surface)); border-color: color-mix(in srgb, var(--color-warning) 40%, transparent); }
/* Statustext mit Textfarbe gemischt: in Hell dunkler, in Dunkel heller – so bleibt der Kontrast ≥ 4.5 : 1 */
.status--fertig { color: color-mix(in srgb, var(--color-success) 62%, var(--text)); background: color-mix(in srgb, var(--color-success) 12%, var(--surface)); border-color: color-mix(in srgb, var(--color-success) 35%, transparent); }

/* Halo-Hintergrund mit dezenten Strahlen (früher „Speedlines“) */
.speedlines {
  background:
    radial-gradient(55% 70% at 72% 45%, var(--halo), transparent 70%),
    repeating-conic-gradient(from 0deg at 72% 45%, transparent 0deg 7deg, var(--rays) 7deg 8deg),
    var(--bg);
}

/* Maskottchen im Halo (freigestellte Bilder aus images/helden/frei/) */
.mascot-frame { position: relative; display: grid; place-items: center; isolation: isolate; }
.mascot-frame::before {
  content: ""; position: absolute; inset: 4%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, var(--halo) 0 45%, transparent 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-cyan) 22%, transparent);
}
.mascot-frame::after {
  content: ""; position: absolute; left: 16%; right: 16%; bottom: 3%; height: 13%; border-radius: 50%; z-index: -1;
  border: 2px solid color-mix(in srgb, var(--color-cyan) 60%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--color-cyan) var(--glow-strength), transparent);
}
.mascot-frame img { filter: drop-shadow(0 10px 24px rgb(0 0 0 / 0.35)); }
/* Hellmodus: Tiere nur mit feinem farbigem Schatten (--figur-schatten) statt dunklem Schlagschatten.
   Ausgenommen: Spielbereiche (.thema-dunkel bleiben dunkel), gesperrte Welten (Graustufen) und Shiny-Begleiter (eigener Filter). */
:root[data-theme="light"] .mascot-frame:not(.thema-dunkel *) img:not(.ist-shiny):not(.icon),
:root[data-theme="light"] .stufe-card:not(.is-locked) .stufe-card__img img,
:root[data-theme="light"] .hero__figur:not(.ist-shiny) { filter: var(--figur-schatten); }

/* ---------- Icons (eigene Do-matik-Icons; in JS D.icon, SVG-Linien-Icons siehe Icon-System weiter unten) ----------
   Ersetzen die Standard-Emojis. Größe folgt der Schrift (1.5em), Stufen: .icon--gross (Prozess, Kopf von Kästen). */
/* doppelte Klasse = bewusst stärker als allgemeine Bildregeln wie „.hero__art img { width: 88% }“ oder
   „.mascot-frame img { filter … }“ – sonst würden Icons in solchen Bereichen riesig bzw. schweben/Schatten erben.
   Eigene Größen: „.bereich .icon“ (gleich stark, später geladen) oder .icon--gross. */
.icon.icon {
  display: inline-block; width: 1.5em; height: 1.5em; max-width: none; flex: none; object-fit: contain;
  vertical-align: -0.42em; animation: none; filter: none;
}
.icon.icon--gross { width: var(--icon-reihe); height: var(--icon-reihe); vertical-align: middle; }
/* ---------- Icon-System (Variante C, 2026-10-19): SVG-Linien-Icons aus D.icon('ui-…') in js/site.js ----------
   Linie in currentColor, gleichmäßige Strichstärke, runde Enden; .f = dezente Duotone-Fläche. Ton-Klassen setzen die
   semantische Farbe, icon--neutral nimmt sie wieder weg (z. B. in Statusanzeigen: Farbe kommt vom Status).
   icon--flaeche = Bereichsicon mit transparenter Fläche (12 %), kleiner Radius, kein Schatten. */
.icon.icon--ui { width: 1.25em; height: 1.25em; vertical-align: -0.24em; fill: none; stroke: currentColor; stroke-width: var(--icon-strich);
  stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.icon--ui .f { fill: currentColor; fill-opacity: 0.16; stroke: none; }
.icon--ui .v { fill: currentColor; }   /* kleine Vollflächen (Punkt, Abspiel-Dreieck, Krone) */
.icon--petrol { color: var(--ikon-petrol); }
.icon--salbei { color: var(--ikon-salbei); }
.icon--bernstein { color: var(--ikon-bernstein); }
.icon--lavendel { color: var(--ikon-lavendel); }
.icon--schiefer { color: var(--ikon-schiefer); }
.icon--koralle { color: var(--ikon-koralle); }
.icon--fehler { color: var(--ikon-fehler); }
.icon.icon--neutral { color: inherit; }
.icon.icon--flaeche { width: 2.25rem; height: 2.25rem; padding: 0.36rem; border-radius: var(--radius-md); vertical-align: middle;
  background: color-mix(in srgb, currentColor 12%, transparent); }
.icon--flaeche:not(.icon--petrol, .icon--salbei, .icon--bernstein, .icon--lavendel, .icon--schiefer, .icon--koralle, .icon--fehler) { color: var(--text-secondary); }

/* ---------- 2.5D-Begleiter: Bewegung aus den 2D-Bildern ----------
   [data-tiefe="<Grad>"]  kippt zur Maus: js/site.js setzt dort --rx/--ry und --mx/--my (−1 … 1); nur Maus, nicht bei
                          reduzierter Bewegung. Kinder nutzen die Werte: .tiefe-kippen (kippt), .tiefe-vorn/.tiefe-hinten (Parallaxe).
   .beg-atmen             Leerlauf-Atmen – nur Spielbereiche (Begleiter, Arena), nie in Lektionen.
   .beg-r--jubel|frust|zeigt|denkt  einmalige Reaktion (Klasse neu setzen = erneut abspielen).
   Animiert werden die Einzel-Eigenschaften translate/scale/rotate – so stören sie kein vorhandenes transform. */
[data-tiefe] { --rx: 0deg; --ry: 0deg; --mx: 0; --my: 0; }
.tiefe-kippen { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform var(--transition-slow); }
.is-kippt.tiefe-kippen, .is-kippt .tiefe-kippen { transition: transform 140ms ease-out; }
.tiefe-vorn { translate: calc(var(--mx) * 9px) calc(var(--my) * 7px); transition: translate var(--transition-slow); }
.tiefe-hinten { translate: calc(var(--mx) * -6px) calc(var(--my) * -5px); transition: translate var(--transition-slow); }
.is-kippt .tiefe-vorn, .is-kippt .tiefe-hinten { transition: translate 140ms ease-out; }
.beg-atmen { transform-origin: 50% 100%; animation: beg-atmen 3.2s ease-in-out infinite; }
.beg-r--jubel, .beg-r--frust, .beg-r--zeigt, .beg-r--denkt { transform-origin: 50% 100%; }
.beg-r--jubel { animation: beg-jubel 520ms cubic-bezier(.3, .7, .4, 1); }
.beg-r--frust { animation: beg-frust 380ms ease-in-out; }
.beg-r--zeigt { animation: beg-zeigt 460ms ease-out; }
.beg-r--denkt { animation: beg-denkt 460ms ease-out; }
@keyframes beg-atmen { 50% { translate: 0 -4px; scale: 1.012 0.992; } }
@keyframes beg-jubel { 18% { scale: 1.08 0.88; } 45% { translate: 0 -16%; scale: 0.94 1.08; } 72% { translate: 0 0; scale: 1.06 0.92; } }
@keyframes beg-frust { 20% { translate: -5% 0; rotate: -2deg; } 40% { translate: 4% 0; rotate: 2deg; } 60% { translate: -3% 0; rotate: 0deg; } 80% { translate: 2% 0; } }
@keyframes beg-zeigt { 50% { translate: 4% 0; rotate: 3deg; } }
@keyframes beg-denkt { 50% { rotate: -3deg; } }

/* Fortschrittsbalken */
.progress { height: 6px; border-radius: 2px; background: var(--color-bg-deep); overflow: hidden; border: 0; }
.progress > span {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: var(--bar, var(--progress));
  transition: width 400ms var(--ease-ruhig);   /* 2026-11-01 vorher 0,6 s: kurz und ruhig */
}
/* XP-/Level-Balken sind Belohnung (Gold), Lernfortschritt bleibt Türkis */
.xp-pop .progress, .s2-begleiter__fuss .progress { --bar: var(--reward); }

/* Micro-Feedback: „+10 XP“ kurz einblenden */
.xp-pop { animation: xp-pop 400ms cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes xp-pop { from { transform: translateY(6px) scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 100;
  transform: translate(-50%, 150%);
  background: var(--color-surface-raised); color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 0.7rem 1.2rem; border-radius: var(--radius-md); font-weight: var(--fw-halbfett); font-size: var(--fs-ui);
  box-shadow: var(--shadow-overlay);
  transition: transform 0.3s ease; max-width: calc(100vw - 32px);
}
.toast.is-visible { transform: translate(-50%, 0); }

/* Lupe für Diagramme (js/site.js): Knopf „🔍 Vergrößern“ + bildschirmfüllender Dialog */
.lupe-knopf {
  display: flex; margin: 0.4rem 0 0 auto; padding: 0.25rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-meta); font-weight: var(--fw-halbfett); cursor: zoom-in;
  transition: border-color var(--transition-fast, 150ms), color var(--transition-fast, 150ms);
}
.lupe-knopf:hover, .lupe-knopf:focus-visible { border-color: var(--primary); color: var(--primary-strong); }
.lupe-knopf--nach { margin: 0.4rem 0 1.2rem; }
.lupe-dialog {
  width: min(96vw, 1600px); max-width: none; max-height: 94vh; padding: 0; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-overlay);
}
.lupe-dialog::backdrop { background: rgb(0 0 0 / 0.7); }
.lupe-dialog__kopf {
  position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.5rem 0.8rem; background: var(--surface); border-bottom: 1px solid var(--border); font-size: var(--fs-ui); font-weight: var(--fw-halbfett);
}
.lupe-dialog__inhalt { padding: 1rem; overflow: auto; }
.lupe-dialog__inhalt > * { margin: 0 auto; }
.lupe-dialog__inhalt svg { display: block; width: 100%; height: auto; max-height: calc(94vh - 5rem); }
.lupe-dialog__inhalt [class*="scroll"] { overflow: visible; }
.lupe-dialog__html { zoom: 1.6; }

/* ==========================================================
   Begleiter-Bühne: sichtbare Ausrüstung überall (js/begleiter.js D.begleiterBuehne)
   Aura (gekauft, Meister-Aura ab Denk-Rang 9, Set-Aura) · Anstecker der angelegten Kosmetik · Titel.
   Auch .pd-figur im Begleiter-Bereich nutzt data-aura-item + .beg-buehne__aura.
   ========================================================== */
.beg-buehne { position: relative; display: grid; place-items: center; isolation: isolate; aspect-ratio: 1; width: 100%; }
.beg-buehne > .beg-img { position: relative; z-index: 1; width: 86%; height: auto; filter: drop-shadow(0 8px 16px rgb(0 0 0 / 0.35)); }
.beg-buehne__aura { position: absolute; inset: 6%; border-radius: 50%; z-index: 0; pointer-events: none; }
.beg-buehne[data-selten="selten"] > .beg-buehne__aura { box-shadow: 0 0 28px color-mix(in srgb, var(--color-cyan) 35%, transparent); }
.beg-buehne[data-selten="episch"] > .beg-buehne__aura { box-shadow: 0 0 32px color-mix(in srgb, var(--color-purple) 40%, transparent); }
.beg-buehne[data-selten="legendaer"] > .beg-buehne__aura { box-shadow: 0 0 38px color-mix(in srgb, var(--color-gold-bright) 45%, transparent); }
.beg-buehne__zeichen { position: absolute; z-index: 2; right: 2%; bottom: 4%; display: flex; flex-direction: column; gap: 2px; }
.beg-buehne__zeichen span {
  width: 1.55em; height: 1.55em; display: grid; place-items: center; font-size: 0.8rem; border-radius: 50%;
  background: var(--color-surface); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-card);
}
.beg-buehne__zeichen span[data-selten="selten"] { border-color: var(--color-cyan); }
.beg-buehne__zeichen span[data-selten="episch"] { border-color: var(--color-purple); }
.beg-buehne__zeichen span[data-selten="legendaer"] { border-color: var(--color-gold-bright); }
.beg-buehne__titel {
  position: absolute; z-index: 2; bottom: -0.4rem; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: var(--fs-meta); font-weight: var(--fw-halbfett); padding: 0.1rem 0.55rem; border-radius: var(--radius-pill);
  background: var(--color-surface); border: 1px solid var(--color-gold-bright); color: var(--color-gold);
}
.beg-buehne--klein .beg-buehne__zeichen span { font-size: 0.65rem; }
.beg-buehne--mini .beg-buehne__zeichen { display: none; }
/* Auren (Kosmetik ohne Vorteil) */
[data-aura-item] > .beg-buehne__aura { inset: 0; }
[data-aura-item="aura-kirschblueten"] > .beg-buehne__aura { background: radial-gradient(circle, color-mix(in srgb, var(--color-pink) 30%, transparent) 30%, transparent 68%),
  radial-gradient(circle at 20% 25%, var(--color-pink) 0 3px, transparent 4px), radial-gradient(circle at 80% 30%, var(--color-pink) 0 3px, transparent 4px),
  radial-gradient(circle at 70% 85%, var(--color-pink) 0 2px, transparent 3px), radial-gradient(circle at 15% 75%, var(--color-pink) 0 2px, transparent 3px); }
[data-aura-item="aura-gluehwuermchen"] > .beg-buehne__aura { background: radial-gradient(circle at 25% 20%, var(--color-gold-bright) 0 3px, transparent 6px),
  radial-gradient(circle at 78% 35%, var(--color-gold-bright) 0 2px, transparent 5px), radial-gradient(circle at 60% 88%, var(--color-gold-bright) 0 3px, transparent 6px),
  radial-gradient(circle at 12% 62%, var(--color-gold-bright) 0 2px, transparent 5px), radial-gradient(circle, color-mix(in srgb, var(--color-gold-bright) 18%, transparent) 30%, transparent 65%);
  animation: aura-flackern 3s ease-in-out infinite; }
[data-aura-item="aura-polarlicht"] > .beg-buehne__aura { background: conic-gradient(from 0deg, color-mix(in srgb, var(--color-cyan) 40%, transparent), color-mix(in srgb, var(--color-purple) 40%, transparent),
  color-mix(in srgb, var(--color-success) 30%, transparent), color-mix(in srgb, var(--color-cyan) 40%, transparent)); filter: blur(14px); animation: aura-drehen 14s linear infinite; }
[data-aura-item="aura-sonnenkranz"] > .beg-buehne__aura, [data-aura-item="set-dimensionen"] > .beg-buehne__aura {
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--color-gold-bright) 45%, transparent) 0deg 6deg, transparent 6deg 20deg);
  -webkit-mask: radial-gradient(circle, transparent 32%, #000 38%, transparent 70%); mask: radial-gradient(circle, transparent 32%, #000 38%, transparent 70%);
  animation: aura-drehen 24s linear infinite; }
/* Lernspur-Auren (api/katalog.php LERNSPUR) */
[data-aura-item="aura-siegelkranz"] > .beg-buehne__aura { background: repeating-conic-gradient(from 15deg, color-mix(in srgb, var(--color-pink) 40%, transparent) 0deg 10deg, transparent 10deg 45deg);
  -webkit-mask: radial-gradient(circle, transparent 36%, #000 42%, transparent 66%); mask: radial-gradient(circle, transparent 36%, #000 42%, transparent 66%); animation: aura-drehen 30s linear infinite; }
[data-aura-item="aura-meisterschaft"] > .beg-buehne__aura { background: radial-gradient(circle, color-mix(in srgb, var(--color-success) 24%, transparent) 30%, transparent 66%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-gold-bright) 60%, transparent), 0 0 30px color-mix(in srgb, var(--color-success) 35%, transparent); animation: aura-pulsieren 3.6s ease-in-out infinite; }
[data-aura-item="aura-zahlen"] > .beg-buehne__aura { background: repeating-radial-gradient(circle, color-mix(in srgb, var(--color-cyan) 30%, transparent) 0 2px, transparent 2px 16px);
  -webkit-mask: radial-gradient(circle, #000 35%, transparent 70%); mask: radial-gradient(circle, #000 35%, transparent 70%); }
[data-aura-item^="meister-"] > .beg-buehne__aura { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-cyan) 70%, transparent), 0 0 40px color-mix(in srgb, var(--color-cyan) 45%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--color-cyan) 22%, transparent) 30%, transparent 66%); animation: aura-pulsieren 3.2s ease-in-out infinite; }
[data-aura-item="set-wanderer"] > .beg-buehne__aura { background: radial-gradient(circle, color-mix(in srgb, var(--color-success) 28%, transparent) 30%, transparent 66%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-success) 60%, transparent); animation: aura-pulsieren 4s ease-in-out infinite; }
[data-aura-item="set-strukturen"] > .beg-buehne__aura { background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-purple) 30%, transparent) 0 2px, transparent 2px 14px),
  repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-purple) 30%, transparent) 0 2px, transparent 2px 14px);
  -webkit-mask: radial-gradient(circle, #000 40%, transparent 70%); mask: radial-gradient(circle, #000 40%, transparent 70%); }
@keyframes aura-drehen { to { transform: rotate(360deg); } }
@keyframes aura-pulsieren { 50% { opacity: 0.6; transform: scale(1.04); } }
@keyframes aura-flackern { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .beg-buehne__aura { animation: none !important; } }
/* Keine Leuchteffekte an Begleitern (Nutzer 2026-10-11): kein Stufen-Leuchten (data-entw), keine Auren/Seltenheits-Schimmer –
   die Entwicklung zeigen die Stufenbilder und die Größe (css/held.css --beg-gross). */
.beg-buehne__aura { display: none; }

/* Stufen-Fenster (2026-10-11, js/site.js stufenHinweis): gesperrte Reihe zeigt nur den Hinweis; außerhalb des Fensters Hinweis „ohne XP“ */
#inhalt.ist-gesperrt > :not(.stufen-sperre) { display: none !important; }
.stufen-sperre { padding-block: var(--space-4, 1rem); }
.stufen-sperre__karte { max-width: 560px; margin: 3rem auto; padding: 1.6rem 1.5rem; display: grid; gap: 0.6rem; justify-items: start; }
.stufen-sperre__karte h1 { margin: 0; font-size: 1.5rem; }
.stufen-sperre__karte p { margin: 0 0 0.4rem; }
/* Gastansicht zum Testen (?gast=1, js/site.js) */
.gast-leiste { position: fixed; left: 1rem; bottom: 1rem; z-index: 90; margin: 0; padding: 0.5rem 0.85rem; max-width: calc(100% - 2rem);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-lift);
  font-size: var(--fs-ui); }
.gast-leiste a { margin-left: 0.4rem; }
.stufen-sperre__hinweis { margin: 0 0 1rem; max-width: none; padding: 0.7rem 1rem; border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--fs-ui); }

/* ---------- Ton „erwachsen“ für alle Seiten (Nutzer-Vorgabe 2026-10-08) ----------
   Weltbilder, Landschaften, Inseln und Symbole gedämpft (--welt-filter), keine Dauer-Schwebe-/Dreh-Animationen.
   Die Begleiter selbst bleiben farbig. :root erhöht die Gewichtung, damit Seiten-CSS (später geladen) das nicht überschreibt. */
:root .atlas__bild, :root .atlas__wolken, :root .stufe-hero__szene img, :root .stufe-card__inseln, :root .stufe-card__wolken,
:root .lernort-buehne__ort, :root .region-buehne img, :root .kreis__orbit, :root .kreis__insel, :root .kreis__plattform,
:root .beg-buehne-gross > img, :root .welt-kachel img, :root .menue-kacheln img, :root .atlas-orte img, :root .mst-kap__symbol {
  filter: var(--welt-filter);
}
:root .stufe-hero__landmarke, :root .stufe-hero__art img, :root .lernort-buehne__ort, :root .region-buehne img, :root .kreis__orbit,
:root .atlas-nebel, :root .beg-buehne-gross__glow { animation: none; }
/* Glow-Lichtscheine nur noch als Hauch */
:root .stufe-card__glow, :root .stufe-hero__glow, :root .lernort-buehne__glow, :root .kreis__glow, :root .beg-buehne-gross__glow { opacity: 0.28; }
/* ================= Begleiter auf allen Seiten (js/begleiter-ereignisse.js) =================
   Entwicklungs-Feier: kurz (≈ 2 s) und überspringbar; „Überspringen“ setzt .ist-fertig (sofort neue Form).
   html.beg-ruhig = „Begleiter-Animationen reduzieren“: keine Bewegung, kleinere Figuren in Lektionen. */
.entw-feier {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-content: center; justify-items: center; gap: 0.4rem; padding: 1rem;
  text-align: center; background: color-mix(in srgb, var(--color-bg-deep) 94%, transparent); color: var(--color-text);
}
.entw-feier h2 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 0.2rem 0; color: var(--color-gold-bright); }
.entw-feier h2 small { font-size: 0.5em; color: var(--color-text-muted); }
.entw-feier__text { margin: 0.6rem 0 0; font-size: 1.1rem; }
.entw-feier__stand { margin: 0; font-weight: var(--fw-halbfett); }
.entw-feier__knoepfe { display: flex; gap: 0.5rem; justify-content: center; margin-top: 0.4rem; }
.entw-feier__buehne { position: relative; width: min(70vw, 280px); aspect-ratio: 1; }
.entw-feier__buehne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.entw-feier__alt img { animation: entw-alt 1.1s ease-in forwards; }
.entw-feier__neu img { opacity: 0; animation: entw-neu 0.8s 0.9s ease-out forwards; }
@keyframes entw-alt { 0% { filter: brightness(1); } 40%, 60% { filter: brightness(0) drop-shadow(0 0 18px var(--color-cyan)); transform: scale(1); } 85% { filter: brightness(8); transform: scale(1.08); opacity: 1; } 100% { filter: brightness(8); transform: scale(1.1); opacity: 0; } }
@keyframes entw-neu { 0% { opacity: 0; transform: scale(0.85); filter: brightness(6); } 100% { opacity: 1; transform: scale(1); filter: none; } }
.entw-feier__neu img.ist-shiny { animation-name: entw-neu-shiny; }
@keyframes entw-neu-shiny { 0% { opacity: 0; transform: scale(0.85); filter: brightness(6); } 100% { opacity: 1; transform: scale(1); filter: hue-rotate(150deg) saturate(1.35); } }
.entw-feier.ist-fertig .entw-feier__alt, .beg-ruhig .entw-feier__alt { display: none; }
.entw-feier.ist-fertig .entw-feier__neu img, .beg-ruhig .entw-feier__neu img { animation: none; opacity: 1; }
.entw-feier.ist-fertig .entw-feier__neu img.ist-shiny, .beg-ruhig .entw-feier__neu img.ist-shiny { filter: hue-rotate(150deg) saturate(1.35); }
.entw-feier.ist-fertig [data-entw-skip], .beg-ruhig .entw-feier [data-entw-skip] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .entw-feier__alt { display: none; }
  .entw-feier__neu img, .entw-feier__neu img.ist-shiny { animation: none; opacity: 1; }
}
/* Ruhige Darstellung: keine Begleiter-Bewegung, kleinere Reaktions-Bilder in Lektionen */
.beg-ruhig .beg-atmen, .beg-ruhig .beg-r--jubel, .beg-ruhig .beg-r--frust, .beg-ruhig .beg-r--zeigt, .beg-ruhig .beg-r--denkt,
.beg-ruhig .reaktion.is-neu { animation: none !important; }
.beg-ruhig .task__feedback .reaktion, .beg-ruhig .tipps .reaktion { width: 40px; height: 40px; }
.beg-ruhig .vorhersage .reaktion, .beg-ruhig .halt-form .reaktion { width: 56px; height: 56px; }
.beg-ruhig .checkpoint__done .reaktion { width: 72px; height: 72px; }

/* Elementfarbe je Element (Elementarhüter u. a.): <… data-element="holz|feuer|erde|metall|wasser"> setzt --element */
[data-element="holz"] { --element: var(--element-holz); }
[data-element="feuer"] { --element: var(--element-feuer); }
[data-element="erde"] { --element: var(--element-erde); }
[data-element="metall"] { --element: var(--element-metall); }
[data-element="wasser"] { --element: var(--element-wasser); }

/* Touch (iPad): kein Doppeltipp-Zoom (Zwei-Finger-Zoom bleibt), in Aufgaben kein iOS-Kontextmenü beim langen Drücken –
   langes Drücken wird dort zum Rechtsklick (js/touch.js) */
html { touch-action: manipulation; }
.task, .q-app { -webkit-touch-callout: none; }

/* Markierstift und Laserpointer in Beamer-Ansichten (js/stift.js; Informatik js/beamer.js, Mathe Einstieg js/mathe.js) */
/* Folien am iPad (js/folien-touch.js, beide Beamer): nur senkrecht rollen und Zoomen bleiben beim Browser, kein Markieren beim Halten */
.ist-touch > .beamer__buehne, .ist-touch > .mathe-beamer__folie { touch-action: pan-y pinch-zoom; overscroll-behavior: contain; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.beamer.ist-touch, .mathe-beamer.ist-touch { overflow: hidden; }
.ist-touch > .beamer__buehne :is(input, textarea), .ist-touch > .mathe-beamer__folie :is(input, textarea) { -webkit-user-select: text; user-select: text; }
.folien-schwarz { position: absolute; inset: 0; z-index: 20; background: rgb(0 0 0); }
.folien-uebersicht { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; background: var(--color-bg); color: var(--color-text); }
.folien-uebersicht__kopf { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); font-weight: var(--fw-titel); }
.folien-uebersicht__raster { flex: 1; overflow: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--space-4); align-content: start; padding: var(--space-4); }
.folien-kachel { position: relative; display: block; width: 100%; aspect-ratio: var(--seite, 4 / 3); padding: 0; overflow: hidden; cursor: pointer; text-align: left; font: inherit; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.folien-kachel.ist-aktuell { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary); }
.folien-kachel__innen { position: absolute; top: 0; left: 0; display: block; flex: none; overflow: hidden; transform-origin: 0 0; pointer-events: none; container-type: inline-size; padding: 1.4rem 3vw; }
.folien-kachel__innen .bq__code { visibility: hidden; }   /* Freischaltcode nicht vorab, die Übersicht läuft oft mit über den Beamer */
.folien-kachel__nr { position: absolute; left: var(--space-2); bottom: var(--space-2); z-index: 1; min-width: 1.8em; padding: 0 0.4em; text-align: center; font-size: 0.85rem; font-variant-numeric: tabular-nums;
  color: var(--color-text-muted); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.stift-flaeche { position: absolute; left: 0; width: 100%; pointer-events: none; z-index: 3; touch-action: none; }
.stift-flaeche.ist-an { pointer-events: auto; cursor: crosshair; }
.stift-flaeche.ist-laser { cursor: pointer; }
.stift-flaeche.ist-radierer { cursor: cell; }
.stift-flaeche--laser { z-index: 4; pointer-events: none; }
[data-stift][aria-pressed="true"] { outline: 2px solid var(--color-danger); outline-offset: 2px; }
[data-stift][hidden] { display: none; }
/* Farben und Stärken, nur im Stift-Modus eingeblendet */
.stift-optionen { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.stift-optionen[hidden], .stift-wahl[hidden] { display: none; }
.stift-wahl { min-width: 2.25rem; justify-content: center; }
.stift-wahl[aria-pressed="true"] { outline: 2px solid var(--color-text); outline-offset: 2px; }
.stift-punkt { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--punkt-farbe, currentColor); }
.stift-punkt--staerke { width: var(--punkt-groesse); height: var(--punkt-groesse); }

/* Schreibfläche für Rechnungen mit dem Apple Pencil (js/schreibflaeche.js; Mathe Teil A, Teil C, Trainer, Kapitel-Check) */
.sf-schalter { margin: var(--space-3) 0; }
.sf-schalter__knopf .sf__sym { width: 1.1em; height: 1.1em; }
/* Platz wählen: rechts neben oder unter der Aufgabe (2026-10-25, nur wo opt.daneben) */
.sf-schalter__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sf-schalter__lage { display: inline-flex; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.sf-schalter__lage[hidden] { display: none !important; }
.sf-schalter__wahl { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.25rem; padding: 0 0.6rem; border: 0; background: var(--color-surface);
  color: var(--color-text-muted); font: inherit; font-size: var(--fs-hilfe); cursor: pointer; }
.sf-schalter__wahl + .sf-schalter__wahl { border-left: 1px solid var(--color-border); }
.sf-schalter__wahl:hover { color: var(--color-text); }
.sf-schalter__wahl[aria-pressed="true"] { background: var(--color-primary-soft); color: var(--color-primary); }
.sf-schalter__wahl:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.sf-schalter__wahl .sf__sym { width: 1.1em; height: 1.1em; }
.sf { margin-top: var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); overflow: hidden; overflow: clip; container-type: inline-size; }   /* clip statt hidden: sonst klebt die Leiste nicht */
.sf[hidden] { display: none; }
/* Gruppen bleiben beisammen, umgebrochen wird nur zwischen ihnen; Verlauf rechts (2026-10-25) */
/* Leiste klebt beim Scrollen (Nutzer-Wunsch 2026-11-03) bis das Blatt endet: oben in der Scrollspalte (--sf-leiste-top: 0, css/mathe.css), sonst unter der Kopfzeile.
   Immer eine Zeile; ist es zu schmal, wischt man sie waagerecht, Rückgängig/Wiederholen bleiben rechts stehen. */
.sf__leiste { position: sticky; top: var(--sf-leiste-top, var(--header-h)); z-index: 3; display: flex; flex-wrap: nowrap; align-items: center; column-gap: var(--space-4); padding: 0.4rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface-raised);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.sf__leiste::-webkit-scrollbar { display: none; }
.sf__gruppe { display: flex; flex: none; flex-wrap: nowrap; align-items: center; gap: 0.15rem; }
.sf__gruppe--verlauf { margin-left: auto; position: sticky; right: 0; padding-left: var(--space-2); background: var(--color-surface-raised); }
.sf__gruppe + .sf__gruppe:not(.sf__gruppe--verlauf) { padding-left: var(--space-2); border-left: 1px solid var(--color-border); }

.sf__knopf { display: inline-flex; align-items: center; gap: 0.35rem; min-width: var(--control-h); min-height: var(--control-h); padding: 0 0.65rem; border: 1px solid transparent; border-radius: var(--radius-knopf);
  background: transparent; color: var(--color-text); font: inherit; font-size: var(--fs-ui); font-weight: var(--fw-halbfett); cursor: pointer; justify-content: center; }
.sf__knopf:hover:not(:disabled) { background: var(--color-bg-soft); }
.sf__knopf[aria-pressed="true"] { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); }
.sf__knopf:disabled { opacity: 0.4; cursor: default; }
.sf__sym { width: 22px; height: 22px; flex: none; }
.sf__farbe { width: 44px; height: 44px; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; }
.sf__farbe::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--sf-farbe); box-shadow: 0 0 0 1px var(--color-border-strong); }
.sf__farbe[aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--color-surface-raised), 0 0 0 4px var(--sf-farbe); }
.sf__punkt { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sf__staerke.is-dick .sf__punkt { width: 11px; height: 11px; }
/* schmale Fläche (Spalte neben der Aufgabe): nur Symbole, der Name steht im Tooltip – passt so in eine Zeile ab etwa 640 px */
@container (max-width: 1360px) {
  .sf__knopf > span[aria-hidden] { display: none; }
  .sf__knopf { min-width: 40px; padding: 0 0.3rem; }
  .sf__farbe { width: 32px; }
  .sf__leiste { column-gap: var(--space-2); }
}
/* Karopapier (5-mm-Kästchen wie im Heft), Farben aus den Tokens */
/* Blatt (2026-11-03): .sf__blatt ist das Sichtfenster, .sf__bogen das Karoblatt darin (wächst nach unten und rechts, js/schreibflaeche.js).
   Das Scrollen bleibt im Fenster (overscroll-behavior), die Seite bewegt sich nicht mit. */
.sf__blatt { position: relative; width: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  background-color: var(--color-surface); }
.sf__skala { position: relative; min-width: 100%; min-height: 100%; }   /* Zoom (js/schreibflaeche.js): Größe = Bogen × Zoom, der Bogen wird skaliert */
.sf__bogen { position: absolute; left: 0; top: 0; transform-origin: 0 0;
  background-image: linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 22px 22px; background-position: -1px -1px; }
.sf__blatt.is-radierer { cursor: cell; }
.sf__leinwand { position: absolute; inset: 0; display: block; touch-action: none; }
/* Pencil gesehen: der Finger verschiebt das Blatt nativ in beide Richtungen, den Pencil hält js/schreibflaeche.js per touchstart vom Scrollen ab */
.sf__blatt.is-stift, .sf__blatt.is-stift .sf__bogen, .sf__blatt.is-stift .sf__leinwand { touch-action: pan-x pan-y; }
.sf__oben { pointer-events: none; }
/* Bild der Aufgabe (Graph, Skizze): liegt unter der Leinwand, Stift und Radierer erreichen es nicht; left/top/Größe setzt js/schreibflaeche.js */
.sf__bildlage { position: absolute; display: block; max-width: none; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sf__bildlage[hidden], .sf__knopf[hidden] { display: none; }
/* Auswahl (Lasso): Kopieren und Löschen schweben unter der Auswahl; js/schreibflaeche.js setzt left/top */
.sf__auswahl { position: absolute; z-index: 2; display: flex; gap: 0.15rem; padding: 0.15rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface-raised); touch-action: manipulation; cursor: default; }
.sf__auswahl[hidden] { display: none; }
.sf__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0.35rem 0.6rem; border-top: 1px solid var(--color-border); font-size: var(--fs-hilfe); }
.sf__mehr .sf__sym { width: 1em; height: 1em; }   /* Knöpfe im Fuß (Alles löschen, Als Bild) */
.sf__fuss-knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
@media print { .sf-schalter, .sf { display: none !important; } }

/* Begriffe zum Anklicken (js/begriffe.js, geladen über js/site.js) */
.begriff { display: inline; padding: 0; margin: 0; font: inherit; color: inherit; background: none; border: 0; border-bottom: 2px dotted var(--color-primary); cursor: help; }
.begriff:hover, .begriff[aria-expanded="true"] { color: var(--color-primary); }
.begriff:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.begriff-karte { position: absolute; z-index: 60; width: min(300px, calc(100vw - 16px)); padding: var(--space-3); font-size: var(--fs-hilfe, 0.95rem); line-height: 1.5;
  color: var(--color-text); background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); }
.begriff-karte p { margin: 0 0 var(--space-2); }
.begriff-karte__titel { font-weight: 600; color: var(--color-primary); }
.begriff-karte__bild svg { display: block; width: 100%; max-width: 180px; height: auto; margin: 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.begriff-karte__bild .f { fill: var(--color-primary-soft); stroke: var(--color-primary); }
.begriff-karte__bild .d { stroke-dasharray: 4 3; opacity: 0.7; }
.begriff-karte__bild .p { fill: currentColor; }
.begriff-karte__bild text { fill: currentColor; stroke: none; font: 11px var(--font-label, sans-serif); }
@media print { .begriff { border-bottom: 0; } .begriff-karte { display: none; } }


/* Ersatz-Vollbild (js/vollbild.js, 2026-10-22): wo der Browser kein Vollbild anbietet (Firefox/Chrome auf dem iPad),
   liegt das Spiel fest über der ganzen Seite; Kopf, Fuß und Seiten-Scrollen treten zurück */
.vollbild-ersatz { position: fixed; inset: 0; z-index: 90; width: auto; height: 100vh; height: 100dvh; margin: 0; overflow: auto; overscroll-behavior: contain; }
html.hat-vollbild:has(.vollbild-ersatz), html.hat-vollbild:has(.vollbild-ersatz) body { overflow: hidden; }
html.hat-vollbild #site-header, html.hat-vollbild .site-footer { display: none; }

/* Langes Drücken (2026-10-27, Nutzer, iPad): kein Bild-Menü und keine Markierung auf Bildern und Bedienelementen;
   in Spielen (Revierkampf, Duell, Klassenspiele) markiert langes Drücken gar nichts, Eingabefelder ausgenommen */
img, svg, button, .btn, [role="button"], summary, label { -webkit-touch-callout: none; -webkit-user-drag: none; }
button, .btn, [role="button"], summary { -webkit-user-select: none; user-select: none; }
main.rk, main.tk, .ks-app, .gross, .vorschau, .kraft-info { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
:is(main.rk, main.tk, .ks-app) :is(input, textarea, [contenteditable="true"]) { -webkit-user-select: text; user-select: text; }

/* ---------- Seitenleisten (2026-10-25, js/site.js D.rechteLeiste / D.seitenPfeil) ----------
   Ganze Bildschirmbreite nutzen: links die Kapitel-Navigation, rechts eine schmale Leiste mit „Wissen und Hilfen“ (Spalte, bleibt offen)
   und „Nachschlagen“ (Schublade, schließt immer). Ein- und ausgeklappt wird mit runden Pfeilen mittig an der Kante, die beim Scrollen
   in der Mitte des Fensters stehen bleiben. */
:root { --rl-w: 44px; }
.rl { display: none; }
.rl__knopf[hidden] { display: none !important; }
@media (min-width: 901px) {
  body.hat-rl > main { margin-right: var(--rl-w); }
  .rl {
    position: fixed; z-index: 72; top: var(--header-h); right: 0; bottom: 0; width: var(--rl-w);
    display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; padding: 0.5rem 0.3rem;
    background: var(--surface); border-left: 1px solid var(--border-divider, var(--border));
  }
  /* Aufräumliste 2 (2026-11-01): nur Icons, keine senkrechte Schrift; Name als Tooltip und aria-label (js/site.js D.rechteLeiste) */
  .rl__knopf {
    display: grid; place-items: center; width: 100%; height: 36px; padding: 0;
    border: 0; border-radius: var(--radius-knopf); background: none; color: var(--text-secondary);
    font: inherit; font-size: var(--fs-meta); font-weight: var(--fw-mittel); cursor: pointer;
  }
  .rl__knopf > span:not(.icon) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rl__knopf .icon { width: var(--icon-status); height: var(--icon-status); color: var(--nav-aktiv); }
  .rl__knopf:hover { background: var(--surface-2); color: var(--text); }
  .rl__knopf[aria-expanded="true"] { background: color-mix(in srgb, var(--nav-aktiv) 10%, transparent); color: var(--nav-aktiv); font-weight: var(--fw-halbfett); }
  .rl__knopf:focus-visible, .seiten-pfeil:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
  .rl:not(:has(.rl__knopf:not([hidden]))) { display: none; }
}
@media (max-width: 900px) {
  /* Handy: kleine Knöpfe unten links (rechts liegt „☰ Kapitel“) */
  .rl { position: fixed; z-index: 44; left: 12px; bottom: 12px; display: flex; gap: 0.4rem; }
  .rl__knopf { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius-knopf);
    background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-meta); font-weight: var(--fw-halbfett); box-shadow: var(--shadow-overlay); }
  .rl__knopf--hilfen { display: none; }   /* schmal stehen die Hilfen ohnehin unter dem Kapitel */
}
.seiten-pfeil {
  position: fixed; z-index: 46; top: 50%; display: none; place-items: center; width: 30px; height: 30px; margin-top: -15px; padding: 0;
  border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--nav-aktiv); cursor: pointer;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent), 0 2px 8px color-mix(in srgb, var(--text) 8%, transparent);
  transition: left 200ms ease, right 200ms ease, background 150ms;
}
.seiten-pfeil svg { width: 18px; height: 18px; transition: transform 200ms ease; }
.seiten-pfeil:hover { background: var(--nav-aktiv); color: var(--on-primary); border-color: var(--nav-aktiv); }
.seiten-pfeil[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .seiten-pfeil, .seiten-pfeil svg { transition: none; } }

/* Reduzierte Bewegung: Einblenden ohne Gleiten/Skalieren (Regeln oben bei „Sanfte Ersatzbewegung“) – muss hinter den normalen @keyframes stehen */
@media (prefers-reduced-motion: reduce) {
  @keyframes xp-pop { from { opacity: 0; } to { opacity: 1; } }
  @keyframes entw-neu { from { opacity: 0; } to { opacity: 1; } }
  @keyframes entw-neu-shiny { from { opacity: 0; } to { opacity: 1; filter: hue-rotate(150deg) saturate(1.35); } }
}

/* Prüfungsreif je Trainer (2026-10-26, D.reifHtml in js/store.js): Linie mit drei Punkten (Erkennungszeichen „Linie mit Punkt am Ende“),
   erreichte Punkte und Strecke in Türkis (Lernfortschritt). Status steht immer auch als Text daneben bzw. im title. */
.reif { display: inline-flex; align-items: center; gap: 0.55rem; vertical-align: middle; }
.reif__linie { position: relative; flex: none; display: inline-flex; align-items: center; gap: 0.9rem; }
.reif__linie::before, .reif__linie::after { content: ""; position: absolute; left: 0.25rem; top: 50%; height: 1.5px; margin-top: -0.75px; }
.reif__linie::before { right: 0.25rem; background: var(--border-strong); }
.reif__linie::after { width: 0; background: var(--akzent-tuerkis); }
.reif[data-stufe="2"] .reif__linie::after { width: 1.4rem; }
.reif[data-stufe="3"] .reif__linie::after { width: 2.8rem; }
.reif__linie i { position: relative; z-index: 1; width: 0.5rem; height: 0.5rem; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid var(--border-strong); background: var(--surface); }
.reif[data-stufe="1"] i:nth-child(-n+1), .reif[data-stufe="2"] i:nth-child(-n+2), .reif[data-stufe="3"] i {
  border-color: var(--akzent-tuerkis); background: var(--akzent-tuerkis); }
.reif__text { font-size: var(--fs-meta); color: var(--text-muted); }
/* Prüfungsreif in der Kapitelübersicht: Mathe-Kapitelkarte (js/mathe.js) und Informatik-Reihennavigation (js/kurs.js) */
.mst-trainer:has(.reif) { flex-wrap: wrap; row-gap: 0.25rem; }
.mst-trainer:has(.reif) > span:first-child { flex: 1 1 0; min-width: 0; }   /* Pfeil bleibt in der ersten Zeile */
.mst-trainer .reif { order: 3; flex-basis: 100%; font-weight: var(--fw-normal, 400); }   /* eigene Zeile unter „Trainer zur …“ */
.kn-kap.kn-trainer:has(.kn-reif) { grid-template-columns: 24px 1fr auto auto; }

/* ---------- Ruhe und Hierarchie (2026-11-01, Nutzerauftrag „Apple-nahe Ruhe, kein Redesign“) ----------
   Nur Darstellung: weiche Zustandswechsel an Reitern und Navigation (Hover 150 ms, keine Bewegung),
   Tertiärtexte leiser. Bei reduzierter Bewegung greift die Regel oben (nur Farbe/Fläche, 150 ms). */
:where(.kn-kap, .kn-subs a, .wk__ansicht button, .wk__einheit, .hn-link, .site-nav a, .mc__opt, .tabelle tbody tr, .db-tab td.db-fk) {
  transition: background-color var(--dauer-hover) ease, color var(--dauer-hover) ease, border-color var(--dauer-hover) ease;
}

/* ==========================================================
   (Stand 2026-10-22 abends: zentrierte Köpfe, neu hochgeladen)
   Do-matik – Seitenbausteine: Header, Footer, Dialog, Startseite,
   Stufenseiten, Login, Reihen-Kopf
   ========================================================== */

/* ---------- Skip-Link ---------- */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--primary); color: var(--on-primary); padding: 0.5rem 1rem; border-radius: var(--radius-s);
}
.skip-link:focus { top: 12px; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--text); }
.logo:hover { color: var(--text); }
/* Logo-Schriftzug als Bild, je Modus eine Fassung (js/site.js): Hell = dunkle Schrift, Dunkel = weiße Schrift mit Leuchten.
   Die Dunkel-Fassung hat durch das Leuchten mehr Rand → etwas höher + negativer Rand, damit der Schriftzug gleich groß wirkt
   und die Kopfleiste nicht höher wird. */
/* 2026-10-16: neues, breiteres Logo (do-matik-neu-*) → 28 px statt 36 px, passt zur Navigationsschrift */
.logo__bild { display: block; height: 28px; width: auto; transition: filter var(--transition-fast); }
/* Redesign 2.0: Dunkel-Fassung ohne eingebranntes Leuchten (aus der Hell-Fassung, Schriftzug hell; alte Datei do-matik-dunkel.webp) */
.logo__bild--dunkel { display: none; height: 28px; }
:root[data-theme="dark"] .logo__bild--hell { display: none; }
:root[data-theme="dark"] .logo__bild--dunkel { display: block; }
/* Darüberfahren (Nutzer-Wunsch 2026-10-19): Schriftzug wird grün (--color-primary). Grüne Fläche mit dem Logo als Maske
   über dem Bild; lädt die Maske nicht (z. B. file://), bleibt die Fläche unsichtbar und das Logo normal. */
:is(.site-header, .site-footer) .logo { position: relative; }
:is(.site-header, .site-footer) .logo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--transition-fast);
  background: var(--color-primary);
  -webkit-mask: url("../images/logo/do-matik-logo-hell.webp") center / 100% 100% no-repeat;
  mask: url("../images/logo/do-matik-logo-hell.webp") center / 100% 100% no-repeat;
}
:is(.site-header, .site-footer) .logo:is(:hover, :focus-visible)::after { opacity: 1; }
/* 2026-10-19: in Header und Footer kleiner (Nutzer-Wunsch) */
.site-header .logo__bild--hell, .site-header .logo__bild--dunkel,
.site-footer .logo__bild--hell, .site-footer .logo__bild--dunkel { height: 22px; }
@media (max-width: 420px) {
  .site-header .logo__bild--hell, .site-header .logo__bild--dunkel { height: 20px; }
}
/* 375 px (iPhone): Logo etwas kleiner, sonst ragt der Menü-Knopf über den Rand */
@media (max-width: 400px) {
  .site-header .logo__bild--hell, .site-header .logo__bild--dunkel { height: 18px; }
}

/* ---------- Header (Redesign 2.0, 2026-10-11, Anhang/Domatik Design/Entwurf_Herosection.png) ----------
   Logo · Mathematik ▾ · Informatik ▾ · Meine Welt ▾ · Spiele | Suche · XP · Sonne/Mond · Profil.
   Ruhige Leiste ohne Neon: Kartenfarbe, 1px-Rand, aktiver Punkt mit Akzentrahmen. Unter 1100px: Menü-Knopf. */
#site-header { min-height: var(--header-h); position: sticky; top: 0; z-index: 50; }
.site-header {
  position: relative; background: var(--header-bg);
  /* 2026-10-22: Unschärfe wird bei jedem Scroll-Schritt neu berechnet – kleiner Radius, ohne Sättigung (vorher blur(18px) saturate(1.4)) */
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-divider); box-shadow: none;
}
/* Touch-Geräte (iPad, Tablets): deckend statt Glas, dort ruckelte das Scrollen sichtbar */
@media (hover: none) {
  .site-header { background: var(--color-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Geräte-Einstellungen „Transparenz reduzieren“ und „Mehr Kontrast“: deckende Kopfzeile, bei Kontrast mit kräftiger Linie (2026-10-21) */
@media (prefers-reduced-transparency: reduce) {
  .site-header, .panel--glas { background: var(--color-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .site-header, .panel--glas { background: var(--color-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header { border-bottom-color: var(--border-strong); }
}
.site-header__inner { height: var(--header-h); display: flex; align-items: center; gap: 1.25rem; max-width: var(--maxw-weit); }
.site-header__inner > .logo { flex-shrink: 0; }
.hn-svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.haupt-nav { display: flex; align-items: center; gap: 0.25rem; min-width: 0; }
.hn-drop { position: relative; }
.hn-link {
  display: inline-flex; align-items: center; gap: 0.3rem; height: 38px; padding: 0 0.8rem; border-radius: var(--radius-knopf); cursor: pointer;
  color: var(--text); background: none; border: 1px solid transparent; font: inherit; font-weight: var(--fw-halbfett); font-size: var(--fs-ui);
  white-space: nowrap; text-decoration: none; transition: background var(--transition-fast), border-color var(--transition-fast);
}
.hn-link:hover { color: var(--text); background: var(--color-bg-soft); }
/* Variante C: aktiver Bereich ohne Rahmen – feine Linie unten; Iteration 3: in der einheitlichen Akzentfarbe (--nav-aktiv) */
.hn-link[aria-current], .hn-link[aria-expanded="true"] { color: var(--text); background: var(--color-bg-soft); box-shadow: inset 0 -2px 0 var(--nav-aktiv); }
.hn-pfeil { width: 15px; height: 15px; transition: transform var(--transition-fast); }
.hn-link[aria-expanded="true"] .hn-pfeil { transform: rotate(180deg); }

.hn-drop__panel {
  position: absolute; z-index: 70; top: calc(100% + 8px); left: 0; min-width: 230px; padding: 0.6rem;
  background: var(--color-surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lift);
  transform-origin: top left;   /* klappt aus dem Knopf heraus auf (js/site.js klappe(), 2026-10-21) */
}
.hn-drop__panel[hidden] { display: none; }
.hn-drop__titel { margin: 0.1rem 0.4rem 0.45rem; font-family: var(--font-label); font-size: var(--fs-meta); letter-spacing: 0.02em; text-transform: none; color: var(--text-muted); }
.hn-drop__alle { display: block; margin: 0.45rem 0.4rem 0.1rem; font-size: var(--fs-hilfe); font-weight: var(--fw-halbfett); text-decoration: none; color: var(--primary); }
.hn-klassen { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hn-klassen a {
  display: block; padding: 0.45rem 0.65rem; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text); font-size: var(--fs-ui); white-space: nowrap;
}
/* Gruppiert (2026-10-21): „Klasse“ und „Oberstufe“ mit kleiner Überschrift, kompakte Kacheln mit Zahl bzw. EF/Q1/Q2
   (mindestens 44 px, auch fürs iPad); mehr Abstand vor der zweiten Gruppe statt einer Trennlinie */
.hn-drop__panel .hn-klassen, .site-nav .hn-klassen { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.hn-drop__panel:not(.hn-drop__panel--welt):not(.hn-drop__panel--xp) { min-width: 0; width: max-content; max-width: calc(100vw - 32px); }
.hn-drop__panel .hn-klassen { flex-wrap: nowrap; }
.hn-klassen a {
  display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 0.7rem;
  border: 1px solid var(--border); font-variant-numeric: tabular-nums; font-weight: var(--fw-mittel);
}
.hn-drop__titel--weiter { margin-top: 0.85rem !important; }
.site-nav .hn-drop__titel { margin-inline: 0.3rem; }
.hn-klassen a:hover { background: var(--color-bg-soft); color: var(--text); }
.hn-klassen a[aria-current] { background: var(--linie-unten), var(--nav-aktiv-soft); color: var(--text); font-weight: var(--fw-halbfett); box-shadow: none; }
.hn-drop__panel--welt { min-width: 300px; }
.hn-welt { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hn-welt a { display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0.55rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); }
.hn-welt .icon { width: var(--icon-inhalt); height: var(--icon-inhalt); flex: none; }
.hn-welt .icon.icon--flaeche { width: 2.1rem; height: 2.1rem; padding: 0.34rem; }
.hn-welt strong { display: block; font-size: var(--fs-ui); line-height: 1.2; }
.hn-welt small { display: block; font-size: var(--fs-meta); color: var(--text-muted); line-height: 1.25; }
.hn-welt a:hover { background: var(--color-bg-soft); color: var(--text); }
/* Feinschliff 2026-10-20: aktueller Eintrag wie in den Klassen-Menüs (Akzentfläche + Linie links) */
.hn-welt a[aria-current] { background: var(--linie-links), var(--nav-aktiv-soft); color: var(--text); box-shadow: none; }
/* Kompakt (2026-10-21): Meine Welt als Kacheln in zwei Spalten (Icon neben Name), Merksätze/Tests/Startseite als Fußleiste */
.hn-welt--kacheln { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 4px; }
.hn-welt--kacheln a { gap: 0.55rem; min-height: 48px; padding: 0.4rem 0.5rem; border: 1px solid var(--border); }
.hn-welt--kacheln .icon.icon--flaeche { width: 1.9rem; height: 1.9rem; padding: 0.3rem; }
.hn-welt--kacheln strong { font-size: var(--fs-hilfe); min-width: 0; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.hn-welt--kacheln a[aria-current] { box-shadow: inset 0 0 0 1px var(--nav-aktiv); border-color: var(--nav-aktiv); }
.hn-welt-fuss { list-style: none; margin: 0.6rem 0 0; padding: 0.5rem 0 0; display: flex; gap: 4px; border-top: 1px solid var(--border); }
.hn-welt-fuss li { flex: 1 1 0; min-width: 0; }
.hn-welt-fuss a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; min-height: 44px; padding: 0.35rem 0.3rem;
  border-radius: var(--radius-sm); text-decoration: none; color: var(--text-secondary); font-size: var(--fs-meta); text-align: center;
}
.hn-welt-fuss .icon { width: var(--icon-inhalt); height: var(--icon-inhalt); flex: none; }
.hn-welt-fuss .icon.icon--flaeche { width: 1.7rem; height: 1.7rem; padding: 0.28rem; }
.hn-welt-fuss strong { font-weight: var(--fw-mittel); line-height: 1.2; }
.hn-welt-fuss a:hover { background: var(--color-bg-soft); color: var(--text); }
.hn-welt-fuss a[aria-current] { background: var(--nav-aktiv-soft); color: var(--text); }
.hn-drop__panel--welt { width: 26rem; max-width: calc(100vw - 32px); }

.site-header__actions { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; flex-shrink: 0; }
/* Suche */
.hn-suche { position: relative; width: clamp(180px, 18vw, 280px); }
.hn-suche input {
  width: 100%; height: 38px; padding: 0 2.2rem 0 0.85rem; border-radius: var(--radius-knopf); font: inherit; font-size: var(--fs-hilfe);
  color: var(--text); background: var(--color-bg-soft); border: 1px solid var(--border);
}
.hn-suche input::placeholder { color: var(--text-muted); }
.hn-suche input:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 22%, transparent); }
.hn-suche input::-webkit-search-cancel-button { display: none; }
.hn-suche__lupe { position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.hn-suche__liste {
  position: absolute; z-index: 70; top: calc(100% + 6px); left: 0; right: 0; min-width: 280px; margin: 0; padding: 0.35rem; list-style: none;
  background: var(--color-surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lift);
}
.hn-suche__liste[hidden] { display: none; }
.hn-suche__liste a { display: block; padding: 0.4rem 0.55rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); }
.hn-suche__liste a:hover, .hn-suche__liste a:focus { background: var(--color-bg-soft); color: var(--text); }
.hn-suche__liste strong { display: block; font-size: var(--fs-ui); }
.hn-suche__liste small { display: block; font-size: var(--fs-meta); color: var(--text-muted); }
.hn-suche__leer { padding: 0.5rem; font-size: var(--fs-hilfe); color: var(--text-muted); }
/* XP-Anzeige + Lernfortschritt */
.xp-pill {
  display: inline-flex; align-items: center; gap: 0.45rem; height: 38px; padding: 0 0.75rem 0 0.45rem; border-radius: var(--radius-sm); cursor: pointer;
  font: inherit; font-weight: var(--fw-halbfett); font-size: var(--fs-hilfe); white-space: nowrap; color: var(--text);
  background: transparent; border: 1px solid transparent;   /* Variante C: XP sichtbar, aber ohne eigenen Goldrahmen */
}
.xp-pill .icon { width: var(--icon-nav); height: var(--icon-nav); }
.xp-pill__lv { padding: 0.1rem 0.4rem; border-radius: var(--radius-sm); font-family: var(--font-label); font-size: var(--fs-meta); background: var(--color-bg-soft); color: var(--text-secondary); }
/* XP im Level + Balken bis zum nächsten Level (Entwurf_Unterrichtsreihe: „Lv 12 · 1.680 / 2.000 XP“) */
.xp-pill__werte { display: grid; gap: 3px; min-width: 0; }
.xp-pill__zahl { font-family: var(--font-label); font-size: var(--fs-meta); line-height: 1; font-variant-numeric: tabular-nums; }
.xp-pill__balken { display: block; width: 100%; min-width: 84px; height: 5px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--color-gold-bright) 18%, var(--border)); }
.xp-pill__balken[hidden] { display: none; }
.xp-pill__balken i { display: block; height: 100%; border-radius: inherit; background: var(--reward); transition: width var(--transition-base, 300ms) ease; }
.xp-pill:hover, .xp-pill[aria-expanded="true"] { background: var(--color-bg-soft); }
/* Angemeldet nicht vierfach (2026-10-21, Apple-Design-Prüfung): statt Stern + „Lv 8“-Kasten + „140 / 275 XP“ + Balken nur
   „Level 8“ über dem Balken. Die genauen XP stehen im Fenster beim Antippen und im Tooltip. Gäste: Stern + XP-Summe wie bisher. */
.xp-pill:has(.xp-pill__lv:not([hidden])) { display: inline-grid; grid-template-columns: auto; align-content: center; gap: 4px; padding-inline: 0.6rem; }
.xp-pill:has(.xp-pill__lv:not([hidden])) > .icon,
.xp-pill__lv:not([hidden]) ~ .xp-pill__werte .xp-pill__zahl { display: none; }
.xp-pill__lv:not([hidden]) { padding: 0; background: none; font-family: var(--font); font-size: var(--fs-meta); font-weight: var(--fw-halbfett); line-height: 1; color: var(--text); }
.hn-drop__panel--xp { left: auto; right: 0; width: 300px; padding: 0.9rem 1rem; transform-origin: top right; }
.xp-pop__kopf { display: flex; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.5rem; font-size: var(--fs-ui); }
.xp-pop__kopf span { font-weight: var(--fw-halbfett); color: var(--primary); }
.xp-pop__rest { margin: 0.4rem 0 0; font-size: var(--fs-meta); color: var(--text-muted); }
.xp-pop__titel { margin: 0.8rem 0 0.35rem; font-weight: var(--fw-halbfett); font-size: var(--fs-hilfe); }
.xp-pop__wege { list-style: none; margin: 0 0 0.6rem; padding: 0; display: grid; gap: 0.3rem; font-size: var(--fs-meta); }
.xp-pop__wege li { display: flex; align-items: center; gap: 0.45rem; }
.xp-pop__wege .icon { width: 1.3rem; height: 1.3rem; }
/* Hell/Dunkel: nur ein Symbol – das Ziel (Nutzer-Vorgabe 2026-10-11): im Hellmodus der Mond, im Dunkelmodus die Sonne */
.theme-schalter {
  display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: var(--radius-sm); cursor: pointer;
  background: transparent; border: 1px solid transparent;
}
.theme-schalter[hidden] { display: none; }
.theme-schalter__teil { display: none; grid-area: 1 / 1; place-items: center; }
.theme-schalter img { width: 24px; height: 24px; object-fit: contain; }
/* Icon-System 2026-10-19: Sonne/Mond als Linien-Icon in Textfarbe – keine helle Kachel mehr im Dunkelmodus */
.theme-schalter .icon { width: 22px; height: 22px; color: var(--text); }
:root:not([data-theme-current="dark"]) .theme-schalter .i-dunkel,
[data-theme-current="dark"] .theme-schalter .i-hell { display: grid; }
.theme-schalter:hover { background: var(--color-bg-soft); border-color: var(--border); }
/* Profil */
.held-chip {
  display: inline-flex; align-items: center; gap: 0.45rem; height: 38px; white-space: nowrap; padding: 0 0.9rem; border-radius: var(--radius-sm);
  font-weight: var(--fw-halbfett); font-size: var(--fs-hilfe); background: transparent; color: var(--text); border: 1px solid transparent;
  text-decoration: none; transition: border-color var(--transition-fast);
}
.held-chip:hover, .held-chip.is-aktiv { background: var(--color-bg-soft); color: var(--text); }
/* Feinschliff 2026-10-20: aktiver Profil-Bereich wie aktive Hauptnavigation (Linie unten in --nav-aktiv) */
.held-chip.is-aktiv { box-shadow: none; background-image: linear-gradient(var(--nav-aktiv), var(--nav-aktiv)); background-repeat: no-repeat;
  background-position: 50% 100%; background-size: calc(100% - 2 * var(--radius-sm)) 2px; }
.held-chip--profil { padding: 0 0.85rem 0 0.25rem; gap: 0.55rem; }
/* Fokus in der Kopfzeile: nur bei Tastaturbedienung, dünn in der Akzentfarbe (kein Ring nach Mausklick) */
.site-header :is(button, a, input):focus:not(:focus-visible) { outline: none; }
.site-header :is(button, a):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-knopf); box-shadow: none; }
.held-chip__bild { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; flex: none; background: var(--color-bg-soft); border: 1px solid var(--border); }
.held-chip__bild--leer { display: grid; place-items: center; }
.held-chip__text { display: grid; line-height: 1.15; }
.held-chip__text strong { font-size: var(--fs-hilfe); max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
.held-chip__text small { font-size: var(--fs-meta); font-weight: var(--fw-halbfett); color: var(--text-muted); }
.held-chip__text small .icon { width: 1.1em; height: 1.1em; vertical-align: -0.2em; }
.held-chip__muenzen { color: var(--color-gold); }
/* Werkzeug-Knöpfe (auch in Seiten genutzt) */
.tool-btn {
  width: 38px; height: 38px; border-radius: var(--radius-knopf); display: inline-grid; place-items: center;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color var(--transition-fast);
}
.tool-btn:hover { border-color: var(--primary); }
.tool-btn[hidden] { display: none; }
a.tool-btn { text-decoration: none; font-size: 1.05rem; line-height: 1; }
.tool-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tool-btn .icon { width: var(--icon-nav); height: var(--icon-nav); vertical-align: middle; }
.tool-btn--linie { color: var(--text-muted); background: transparent; border-color: transparent; }
.tool-btn--linie:hover { color: var(--primary); }
.tool-btn__text { display: none; }
@media (min-width: 1480px) {
  .tool-btn--text { width: auto; border-radius: var(--radius-knopf); padding: 0 0.8rem 0 0.65rem; gap: 0.35rem; grid-auto-flow: column; }
  .tool-btn__text { display: inline; font-size: var(--fs-hilfe); font-weight: var(--fw-halbfett); }
}
/* Fach-Umschalter auf anderen Seiten (z. B. Startseiten-Reiter) */
.fach-wahl { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--color-bg-deep); }
.fach-wahl a { padding: 0.25rem 0.8rem; font-size: var(--fs-meta); font-weight: var(--fw-halbfett); border-radius: var(--radius-pill); color: var(--text); text-decoration: none; }
.fach-wahl a[aria-current="true"] { background: var(--color-surface); color: var(--text); box-shadow: 0 0 0 1px var(--border-strong); }
.fach-wahl a:not([aria-current]):hover { background: var(--color-primary-soft); color: var(--text); }
/* Menü (schmale Bildschirme) */
.menu-btn {
  display: none; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-knopf); cursor: pointer;
  border: 1px solid var(--border); background: var(--color-surface); color: var(--text);
}
.menu-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { border-color: var(--primary); }
.site-nav {
  position: absolute; z-index: 60; top: calc(var(--header-h) - 2px); right: 16px;
  width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - var(--header-h) - 16px); overflow-y: auto; padding: 0.9rem;
  border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--border); box-shadow: var(--shadow-lift);
  transform-origin: top right;   /* Menü-Knopf sitzt rechts (js/site.js klappe()) */
}
.site-nav[hidden] { display: none; }
/* Fach-Umschalter und Stufen in einer Reihe (2026-10-21): Klasse und Oberstufe nur durch einen größeren Abstand getrennt */
.site-nav__fach { display: flex; width: 100%; margin-top: 0.75rem; }
.site-nav__fach > button { flex: 1 1 0; }
.site-nav__stufen { display: flex; flex-wrap: wrap; gap: 4px 0.9rem; margin-top: 0.6rem; }
[data-menue-stufen][hidden] { display: none; }
.site-nav .hn-suche { width: 100%; }
.menue-titel { margin: 0.9rem 0.3rem 0.35rem; font-family: var(--font-label); font-size: var(--fs-meta); letter-spacing: 0.02em; text-transform: none; color: var(--text-muted); }

/* Mittlere Breite: zu wenig Platz für Navigation + volles Suchfeld (überlappte „Meine Welt“) → Suche als Lupe,
   die sich beim Antippen über die rechten Knöpfe aufklappt */
@media (max-width: 1360px) and (min-width: 1101px) {
  .site-header__actions { position: relative; }
  .site-header__actions > .hn-suche { width: 38px; flex: none; }
  .site-header__actions > .hn-suche input { padding: 0; color: transparent; cursor: pointer; }
  .site-header__actions > .hn-suche input::placeholder { color: transparent; }
  .site-header__actions > .hn-suche .hn-suche__lupe { right: 50%; transform: translate(50%, -50%); }
  .site-header__actions > .hn-suche:focus-within { position: absolute; z-index: 80; right: 0; top: 50%; transform: translateY(-50%); width: min(340px, 40vw); }
  .site-header__actions > .hn-suche:focus-within input { padding: 0 2.2rem 0 0.85rem; color: var(--text); cursor: text; background: var(--color-surface); }
  .site-header__actions > .hn-suche:focus-within input::placeholder { color: var(--text-muted); }
  .site-header__actions > .hn-suche:focus-within .hn-suche__lupe { right: 0.7rem; transform: translateY(-50%); }
  .hn-link { padding: 0 0.6rem; }
}
@media (max-width: 1100px) {
  .haupt-nav, .site-header__actions > .hn-suche { display: none; }
  .menu-btn { display: inline-grid; }
}
@media (max-width: 640px) {
  .site-header__inner { gap: 0.5rem; }
  .site-header__actions { gap: 0.35rem; }
  .held-chip__text, .held-chip__anmelden { display: none; }
  .held-chip, .held-chip--profil { padding: 0 0.45rem; }
  .held-chip--profil { padding: 0.2rem; }
  .xp-pill { padding: 0 0.55rem 0 0.35rem; gap: 0.35rem; }
  /* Handy: Level + Balken bleiben, die Zahl steht im Fenster beim Antippen */
  .xp-pill__lv:not([hidden]) ~ .xp-pill__werte .xp-pill__zahl { display: none; }
  .xp-pill__balken { min-width: 44px; }
}
@media (max-width: 420px) {
  .site-header__actions { gap: 0.25rem; }
  .xp-pill__lv[hidden] ~ .xp-pill__werte { display: none; }
  .xp-pill .icon { width: 1.3rem; height: 1.3rem; }
  /* schmale Handys (390 px): Stern weg, kürzerer Balken – sonst wird der Menü-Knopf abgeschnitten */
  .xp-pill:has(.xp-pill__lv:not([hidden])) > .icon { display: none; }
  .xp-pill__balken { min-width: 30px; }
  /* Abmelden steht dann nur auf der Begleiterseite (Profilbild führt dorthin) – sonst ist die Leiste zu breit */
  .site-header [data-abmelden-kopf] { display: none; }
  .hn-drop__panel--xp { position: fixed; top: calc(var(--header-h) + 4px); left: 16px; right: 16px; width: auto; }
  .save-btn__label { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hn-drop__panel, .site-nav { animation: none; } .hn-pfeil { transition: none; } }

/* ---------- Footer ---------- */
/* Verzeichnis wie Apple (2026-10-22): hellgraue Fläche, kleine halbfette Spaltentitel, Links 13 px grau,
   Hover nur dunkler + Unterstrich; darunter die Rechtszeile, durch eine Haarlinie getrennt */
.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--border-divider);
  background: var(--color-bg-soft);
  padding-block: clamp(2rem, 4vw, 3rem) 1.25rem;
  font-size: 0.8125rem; line-height: 1.45; color: var(--text-secondary);
}
.fuss-verzeichnis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.75rem 2rem; padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.fuss-titel { margin: 0 0 0.7rem; font-size: 0.8125rem; font-weight: var(--fw-halbfett); color: var(--text); }
.site-footer .fuss-spalte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.site-footer .fuss-spalte a { color: var(--text-secondary); text-decoration: none; }
.site-footer .fuss-spalte a:hover { color: var(--text); text-decoration: underline; }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem; color: var(--text-muted); font-size: 0.75rem;
  padding-top: 1rem; border-top: 1px solid var(--border-divider);
}
.site-footer__bottom .logo { flex: none; }
.site-footer__bottom .logo--zeichen { height: auto; padding: 0; color: var(--text-muted); }   /* nur das DO-Zeichen, klein wie die Rechtszeile (2026-10-22) */
.site-footer__bottom .logo--zeichen svg { width: 26px; }
.site-footer .logo--zeichen::after { content: none; }
.site-footer__bottom > .fuss-recht { margin-right: auto; }
/* Lerneinheiten: nur die Rechtszeile, ohne Verzeichnis (2026-10-31) */
.site-footer--schmal { padding-block: 1rem; }
.site-footer--schmal .site-footer__bottom { padding-top: 0; border-top: 0; }
@media (max-width: 600px) {
  .fuss-verzeichnis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
}
.site-footer__bottom a { color: var(--text-muted); }
.footer-link { padding: 0; border: 0; background: none; color: var(--text-muted); font: inherit; text-decoration: underline; cursor: pointer; }
.footer-link:hover { color: var(--text); }

/* ---------- Sichern-Dialog ---------- */
.save-dialog { width: min(520px, calc(100vw - 32px)); padding: 1.6rem; color: var(--text); margin: auto; }
.save-dialog::backdrop { background: rgb(10 14 24 / 0.55); backdrop-filter: blur(2px); }
.save-dialog h2 { font-size: 1.4rem; margin-right: 2rem; }
.save-dialog__close { position: absolute; top: 0.8rem; right: 0.8rem; margin: 0; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); cursor: pointer; font-size: 1rem;
}
.field { display: grid; gap: 0.35rem; margin: 1rem 0 1.2rem; font-weight: var(--fw-halbfett); font-size: var(--fs-ui); }
.field input {
  font: inherit; font-weight: 400; padding: 0.7rem 0.9rem; border-radius: var(--radius-knopf);
  border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text);
}
.field input:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 22%, transparent); }   /* Fokusring wie Suche und Passwortfeld (2026-10-23) */
.save-dialog__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.save-dialog__load { cursor: pointer; }
.save-dialog__load:focus-within { outline: 3px solid var(--primary); outline-offset: 2px; }
.save-dialog__info { margin-top: 1.4rem; padding: 0.9rem 1rem; border-radius: var(--radius-s); background: var(--primary-soft); font-size: var(--fs-ui); }
.save-dialog__info p { margin: 0 0 0.3rem; }
.save-dialog__info ol { margin: 0; padding-left: 1.2rem; }

/* ---------- Zurück-Link ---------- */
.back { display: block; width: fit-content; margin-bottom: 1rem; font-weight: var(--fw-halbfett); text-decoration: none; color: var(--text-muted); }
.back:hover { color: var(--c, var(--primary)); }

/* ---------- Startseite: Hero ---------- */
.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem); overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.5rem; align-items: center; }
.hero h1 { font-size: clamp(2.1rem, 4.8vw, 3.4rem); }
.hero__accent { color: var(--color-cyan); }
.hero__lead { font-size: 1.15rem; color: var(--text-muted); max-width: 540px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.hero__art { max-width: 460px; justify-self: center; width: 100%; aspect-ratio: 1; }
.hero__art img { width: 88%; height: auto; animation: float 7s ease-in-out infinite; }
.hero__bubble { position: absolute; top: 6%; left: -4%; z-index: 1; font-weight: var(--fw-halbfett); font-size: var(--fs-ui); }
@keyframes float { 50% { transform: translateY(-8px); } }

/* Ferien-Countdown im Hero (HUD-Kästchen) */
.hero__timer { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; align-items: stretch; }
.ferien-timer {
  display: inline-grid; gap: 0.35rem; padding: 0.8rem 1.1rem; align-content: start;
  border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-cyan) 35%, var(--border)); box-shadow: var(--shadow-card);
}
.ferien-timer[hidden] { display: none; }
.ferien-timer p { margin: 0; }
.ferien-timer__label { font-size: var(--fs-meta); font-weight: var(--fw-halbfett); letter-spacing: 0.02em; text-transform: none; color: var(--color-cyan); }
.ferien-timer__zeit { display: flex; gap: 0.5rem; }
.ferien-timer__zeit span {
  display: grid; justify-items: center; min-width: 3.6rem; padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm); background: var(--color-bg-deep); border: 1px solid var(--border);
}
.ferien-timer__zeit strong { font-family: var(--font-label); font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ferien-timer__zeit small { font-size: var(--fs-meta); color: var(--text-muted); text-transform: none; letter-spacing: 0.02em; }
.ferien-timer__info { font-size: var(--fs-meta); color: var(--text-muted); }
.ferien-timer.is-ferien { border-color: color-mix(in srgb, var(--color-gold-bright) 50%, var(--border)); }
.ferien-timer.is-ferien .ferien-timer__label { color: var(--color-gold); }
/* Klausur-Countdown: Violett (wichtiger Termin), am Klausurtag golden */
.klausur-timer { border-color: color-mix(in srgb, var(--color-purple) 45%, var(--border)); }
.klausur-timer .ferien-timer__label { color: var(--color-purple); }
.klausur-timer.is-heute { border-color: color-mix(in srgb, var(--color-gold-bright) 55%, var(--border)); }
.klausur-timer.is-heute .ferien-timer__label { color: var(--color-gold); }
/* Im Hero kompakt als schmale Zeile, damit der Hauptknopf „Jahrgangsstufe wählen“ im Vordergrund bleibt */
.hero__timer { margin-top: 1.2rem; gap: 0.6rem; }
.hero__timer .ferien-timer {
  grid-template-columns: auto auto; align-items: center; column-gap: 0.9rem; row-gap: 0.1rem;
  padding: 0.45rem 0.6rem 0.45rem 0.85rem; background: transparent; box-shadow: none;
}
.hero__timer .ferien-timer__label { grid-column: 1; font-size: var(--fs-meta); }
.hero__timer .ferien-timer__info { grid-column: 1; font-size: var(--fs-meta); }
.hero__timer .ferien-timer__zeit { grid-column: 2; grid-row: 1 / span 2; gap: 0.3rem; }
.hero__timer .ferien-timer__zeit span { min-width: 2.5rem; padding: 0.15rem 0.35rem; }
.hero__timer .ferien-timer__zeit strong { font-size: 1.05rem; }
.hero__timer .ferien-timer__zeit small { font-size: var(--fs-meta); }
/* Ferien als ruhige Textzeile (2026-10-11): kein Kasten, keine Uhr – Klausur-Countdown bleibt als Kästchen */
.ferien-timer.ferien-timer--zeile, .hero__timer .ferien-timer.ferien-timer--zeile {
  display: inline-flex; padding: 0; border: 0; background: none; box-shadow: none;
}
.ferien-timer__zeile { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: var(--fs-hilfe); color: var(--text-muted); }
.ferien-timer__zeile strong { color: var(--text); font-weight: var(--fw-halbfett); }
.ferien-timer__zeile .icon { width: 1.15rem; height: 1.15rem; opacity: .8; }
.ferien-timer__zeile .ferien-timer__info { font-size: inherit; }

/* ---------- Widgets: binäre Uhr, Informatik-Kalender ---------- */
.section--tight { padding-block: 0 clamp(2.5rem, 5vw, 4rem); }
.widget-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; }

/* Binäre Uhr: 6 Stellenwert-Spalten, eine Zeile je Std/Min/Sek */
.uhr__hinweis { font-size: var(--fs-ui); margin: 0 0 0.8rem; }
.uhr { display: grid; gap: 0.45rem; width: fit-content; max-width: 100%; }
.uhr__zeile { display: grid; grid-template-columns: 2.6rem repeat(6, 1.9rem) 2.4rem; gap: 0.4rem; align-items: center; }
.uhr__kopf span { text-align: center; font: 700 0.72rem var(--font-label); color: var(--text-muted); }
.uhr__name { font-size: var(--fs-meta); font-weight: var(--fw-halbfett); color: var(--text-muted); text-transform: none; letter-spacing: 0.02em; }
.uhr__zeile i {
  width: 1.9rem; aspect-ratio: 1; border-radius: 50%;
  background: var(--color-bg-deep); border: 1px solid var(--color-border-strong);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.uhr__zeile i.an {
  background: radial-gradient(circle at 40% 35%, #b9f5ff, var(--color-cyan) 60%);
  border-color: var(--color-cyan); box-shadow: 0 0 10px color-mix(in srgb, var(--color-cyan) 55%, transparent);
}
.uhr__wert { font: 800 1.05rem var(--font-label); text-align: right; font-variant-numeric: tabular-nums; visibility: hidden; }
.uhr.zeigt-werte .uhr__wert { visibility: visible; }
.uhr__knopf { margin-top: 0.9rem; }
@media (max-width: 380px) {
  .uhr__zeile { grid-template-columns: 2.2rem repeat(6, 1.55rem) 2rem; gap: 0.3rem; }
  .uhr__zeile i { width: 1.55rem; }
}
.widget { padding: 1.2rem 1.4rem; }
.widget .eyebrow { margin-bottom: 0.6rem; }
.kal { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.kal li { display: grid; gap: 0.1rem; padding-left: 0.8rem; border-left: 3px solid var(--border); }
.kal li.ist-heute { border-left-color: var(--color-gold-bright); }
.kal__wann { font-weight: var(--fw-halbfett); font-size: var(--fs-ui); color: var(--color-cyan); }
.kal li.ist-heute .kal__wann { color: var(--color-gold); }
.kal__wann small { font-weight: 500; color: var(--text-muted); margin-left: 0.3rem; }
.kal__text { font-size: var(--fs-ui); line-height: 1.45; }
.kal__info { font-size: var(--fs-hilfe); line-height: 1.45; color: var(--text-muted); }
.kal[hidden] { display: none; }  /* sonst überschreibt display:grid das hidden-Attribut */
/* Aufgeklappte Termine scrollen im Kasten, damit er nicht weit über die binäre Uhr hinauswächst */
.kal--mehr { margin-top: 0.7rem; max-height: 14rem; overflow-y: auto; overscroll-behavior: contain; padding-right: 0.4rem; scrollbar-width: thin; }
.kal__knopf { margin-top: 0.9rem; }


/* ---------- Stufenkarten ---------- */
/* Jede Stufe ist eine „Welt“ mit eigenem Tierkreis-Begleiter */
.stufen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.5rem; }
.stufe-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); color: var(--text); text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-card);
  /* 2.5D: Anheben (--hub) + Kippen zur Maus (--rx/--ry aus site.js) */
  --hub: 0px;
  transform: perspective(900px) translateY(var(--hub)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}
.stufe-card.is-kippt .stufe-card__img img { transition: transform var(--transition-normal), translate 140ms ease-out; }
.stufe-card.is-kippt { transition: transform 140ms ease-out, border-color var(--transition-normal), box-shadow var(--transition-normal); }
.stufe-card:hover, .stufe-card:focus-visible {
  --hub: -4px; border-color: var(--c); color: var(--text);
  box-shadow: 0 0 0 1px var(--c), 0 14px 34px color-mix(in srgb, var(--c) var(--glow-strength), transparent);
}
.stufe-card__img {
  /* feste Rasterzeile (100 %), damit height: % am Bild greift – sonst wird das Motiv in voller Breite gezeichnet und oben/unten
     abgeschnitten. Motiv unten angesetzt: oben bleibt Platz für Status und Level. */
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; display: grid; grid-template-rows: minmax(0, 100%);
  place-items: end center; padding-bottom: 3%;
  background:
    radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--c) 34%, transparent), transparent 58%),
    repeating-conic-gradient(from 0deg at 50% 60%, transparent 0deg 9deg, var(--rays-karte) 9deg 10deg),
    var(--color-bg-deep);
}
.stufe-card__img img {
  height: 80%; width: auto; max-width: 92%; object-fit: contain; transform-origin: 50% 100%;
  transition: transform var(--transition-normal), translate var(--transition-slow);
  filter: drop-shadow(0 8px 16px rgb(0 0 0 / 0.45));
}
.stufe-card.is-locked .stufe-card__img img { filter: grayscale(0.8) brightness(0.6) drop-shadow(0 8px 16px rgb(0 0 0 / 0.45)); }
/* Design-Pass 2: Eingang in eine Wissenswelt (Ebenen aus js/start.js) – höheres Bild, weniger leere Fläche */
.stufe-card__img { aspect-ratio: 4 / 3; isolation: isolate;
  background: radial-gradient(70% 60% at 50% 62%, color-mix(in srgb, var(--c) 30%, #12195a), #080d26 78%); }
.stufe-card__img > img { grid-area: 1 / 1; }
.stufe-card__img .stufe-card__inseln { position: absolute; inset: 4% -10% auto; width: 120%; max-width: none; height: auto; opacity: 0.55; z-index: -2; filter: none; }
.stufe-card__img .stufe-card__glow { position: absolute; left: 12%; top: 14%; width: 76%; max-width: none; height: auto; opacity: 0.5; mix-blend-mode: screen; z-index: -1; filter: none; transition: opacity var(--transition-normal); }
.stufe-card__img .stufe-card__tier { height: 88%; }
.stufe-card__img .stufe-card__wolken { position: absolute; left: -8%; right: -8%; bottom: -12%; width: 116%; max-width: none; height: auto; opacity: 0.45; mix-blend-mode: screen; pointer-events: none; filter: none; }
.stufe-card:hover .stufe-card__glow { opacity: 0.85; }
.stufe-card.is-locked .stufe-card__img .stufe-card__inseln, .stufe-card.is-locked .stufe-card__img .stufe-card__wolken,
.stufe-card.is-locked .stufe-card__img .stufe-card__glow { filter: grayscale(1); opacity: 0.25; }
.stufe-card__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Weltkarten im Stil der Tierkreis-Karten (js/start.js, Nutzer-Wunsch 2026-10-08) ----------
   Format 63 : 88 wie eine Sammelkarte, Maße in cqw (wachsen mit der Kartenbreite). Rahmen je Seltenheit = Fortschritt der Welt:
   normal (silber, matt) · selten (blau) · einzigartig (gold, Funkeln) · mythisch (Regenbogen, schimmert). */
@property --winkel { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.stufen-grid:has(.welt-karte) { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 1.8rem 1.4rem; }
.welt-karte {
  --rahmen: linear-gradient(150deg, #c3c9d2, #9aa2ae 50%, #868e9b); --zier: #aab3c0; --glow: rgb(200 210 225 / 0.25);
  position: relative; display: block; width: 100%; max-width: 340px; justify-self: center; align-self: start; aspect-ratio: 63 / 88; container-type: inline-size;
  /* Kein padding/radius in cqw am Container selbst – cqw bezieht sich dort auf den Vorfahren (bei großen Fenstern riesig).
     Die Rahmenbreite entsteht über den Abstand des Innenteils (cqw = Kartenbreite). */
  padding: 0; border-radius: var(--radius-lg); background: var(--rahmen); color: #e8ecf6; text-decoration: none;
  box-shadow: 0 18px 36px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.06);
  --hub: 0px; transform: perspective(900px) translateY(var(--hub)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.welt-karte:hover, .welt-karte:focus-visible { --hub: -5px; color: #fff; box-shadow: 0 26px 50px rgb(0 0 0 / 0.65), 0 0 28px var(--glow); }
.welt-karte.is-kippt { transition: transform 140ms ease-out, box-shadow var(--transition-normal); }
.welt-karte--selten { --rahmen: linear-gradient(150deg, #c6ecff, #2c6df0 35%, #d6f1ff 52%, #1e3fae 75%, #7cc8ff); --zier: #4d9bff; --glow: rgb(70 160 255 / 0.45); }
.welt-karte--einzigartig { --rahmen: linear-gradient(150deg, #fff6c9, #d29a12 32%, #fffbe6 50%, #a46d08 72%, #ffd968); --zier: #f0b429; --glow: rgb(255 200 70 / 0.5); }
.welt-karte--mythisch { --rahmen: conic-gradient(from var(--winkel), #b46cff, #ff5fd2, #ffd36b, #5ee7ff, #7c5cff, #b46cff); --zier: #c48bff; --glow: rgb(190 110 255 / 0.6);
  animation: welt-karte-kreisen 6s linear infinite; }
@keyframes welt-karte-kreisen { to { --winkel: 360deg; } }
.welt-karte__innen {
  position: absolute; inset: 3cqw; display: flex; flex-direction: column; gap: 2cqw; padding: 2.6cqw 2.8cqw 2.4cqw; border-radius: 2.6cqw;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, #1d2740) 0%, #0f1424 38%, #0b0f1c 100%);
  box-shadow: inset 0 0 0 0.5cqw rgb(0 0 0 / 0.35), inset 0 0 0 0.9cqw color-mix(in srgb, var(--zier) 45%, transparent);
}
.welt-karte__kopf { display: flex; align-items: center; gap: 2.4cqw; }
.welt-karte__kuerzel { flex: none; min-width: 11cqw; height: 9.5cqw; padding: 0 1.8cqw; border-radius: 2cqw; display: grid; place-items: center;
  font-family: Georgia, "Times New Roman", serif; font-weight: var(--fw-halbfett); font-size: 4.4cqw; white-space: nowrap; color: #0b0f1c; background: var(--rahmen); }
.welt-karte__name { flex: 1; min-width: 0; line-height: 1.08; }
.welt-karte__name b { display: block; font-size: 6cqw; font-weight: var(--fw-halbfett); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0.4cqw 0 rgb(0 0 0 / 0.5); }
.welt-karte__name small { display: block; margin-top: 0.6cqw; font-family: var(--font-mono); font-size: 3.1cqw; letter-spacing: 0.12em; text-transform: uppercase; color: #94a0b8; }
.welt-karte__zeichen { flex: none; width: 11.5cqw; height: 11.5cqw; border-radius: 50%; display: grid; place-items: center;
  font-family: "Yu Gothic", "Meiryo", "Hiragino Sans", "Noto Sans JP", serif; font-weight: var(--fw-halbfett); font-size: 6.2cqw; color: #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 85%, #fff), color-mix(in srgb, var(--c) 40%, #000) 75%);
  box-shadow: 0 0 0 0.6cqw rgb(0 0 0 / 0.4), 0 0 0 1cqw var(--zier); text-shadow: 0 0.3cqw 0.6cqw rgb(0 0 0 / 0.6); }
/* Bildfenster: dieselben Ebenen wie zuvor (Inseln → Lichtschein → Tier → Wolken) */
.welt-karte__bild.stufe-card__img { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; border-radius: 1.8cqw; padding-bottom: 2%;
  box-shadow: 0 0 0 0.7cqw rgb(0 0 0 / 0.55), 0 0 0 1.2cqw var(--zier); }
.welt-karte__bild .stufe-card__tier { height: 92%; }
.welt-karte:hover .welt-karte__bild .stufe-card__tier { transform: scale(1.05); }
.welt-karte__status { position: absolute; top: 2.4cqw; left: 2.4cqw; z-index: 1; font-size: 2.9cqw; }
.welt-karte__typ { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 3.5cqw; line-height: 1.35;
  font-style: italic; color: #b9c2d6; text-align: center; padding: 0 1cqw; min-height: calc(3.5cqw * 1.35 * 2); }
.welt-karte__werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.welt-karte__werte > span { display: grid; gap: 0.3cqw; padding: 1.4cqw 1.6cqw; border-radius: 1.6cqw; text-align: center;
  background: rgb(255 255 255 / 0.05); border: 1px solid rgb(255 255 255 / 0.08); }
.welt-karte__werte small { font-family: var(--font-mono); font-size: 2.6cqw; letter-spacing: 0.1em; text-transform: uppercase; color: #94a0b8; }
.welt-karte__werte b { font-size: 4.6cqw; font-variant-numeric: tabular-nums; color: #fff; }
.welt-karte__balken { display: block; height: 1.4cqw; border-radius: 1cqw; background: rgb(255 255 255 / 0.09); overflow: hidden; }
.welt-karte__balken span { display: block; height: 100%; width: 0; background: var(--c); border-radius: inherit; transition: width 0.6s ease; }
.welt-karte__fuss { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 2.9cqw;
  letter-spacing: 0.08em; text-transform: uppercase; color: #94a0b8; }
.welt-karte__fuss [data-stufe-seltenheit] { color: var(--zier); font-weight: var(--fw-halbfett); }
.welt-karte__los { color: var(--c); font-weight: var(--fw-halbfett); text-transform: none; letter-spacing: 0.02em; font-family: var(--font); font-size: 3.4cqw; }
.welt-karte:hover .welt-karte__los { text-decoration: underline; text-underline-offset: 3px; }
/* Funkeln/Schimmer erst ab „einzigartig“ */
.welt-karte--einzigartig .welt-karte__bild::after, .welt-karte--mythisch .welt-karte__bild::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 0.16) 45%, transparent 60%); mix-blend-mode: screen; }
.welt-karte.is-locked { --rahmen: linear-gradient(150deg, #5d6472, #3c424e); }
.welt-karte.is-locked .stufe-card__tier { filter: grayscale(0.8) brightness(0.55); }
@media (prefers-reduced-motion: reduce) { .welt-karte--mythisch { animation: none; } }
.stufe-card__los { font-weight: var(--fw-halbfett); color: var(--c); }
.stufe-card:hover .stufe-card__los { text-decoration: underline; text-underline-offset: 3px; }
.stufe-card__status { position: absolute; top: 0.7rem; left: 0.7rem; z-index: 1; }
.stufe-card__body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.stufe-card__head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.stufe-card__head h3 { margin: 0; font-size: 1.45rem; color: var(--c); }
.stufe-card__name { margin: 0; font-weight: var(--fw-halbfett); }
.stufe-card__desc { font-size: var(--fs-ui); margin: 0 0 0.5rem; flex: 1; }
.stufe-card__meta { margin: 0.2rem 0 0; font-size: var(--fs-hilfe); color: var(--text-muted); display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }

/* ---------- So lernst du hier ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.step { position: relative; padding: 1.6rem 1.5rem 1.2rem; }
.step__nr { position: absolute; top: 1rem; right: 1.2rem; font-family: var(--font-label); font-weight: var(--fw-halbfett); font-size: 1.6rem; color: var(--border); }
.center-cta { text-align: center; margin-top: 2.5rem; }

/* ---------- Spielstand ---------- */
.continue { display: grid; grid-template-columns: 220px 1fr; overflow: hidden; }
.continue__stats {
  padding: 1.6rem; border-right: 1px solid var(--border);
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--color-gold-bright) 14%, transparent), transparent 70%), var(--primary-soft);
}
.continue__xp { font-size: 3rem; font-weight: var(--fw-halbfett); line-height: 1; font-family: var(--font-display); color: var(--color-gold); }
.continue__xp small { font-size: 1rem; margin-left: 0.3rem; color: var(--text-muted); }
.continue__main { padding: 1.6rem 1.8rem; }
.continue__main h2 { font-size: 1.5rem; }

/* ---------- Bottom-CTA ---------- */
.bottom-cta { background-color: var(--primary-soft); text-align: center; }
.bottom-cta__inner { max-width: 640px; }
.bottom-cta p { color: var(--text-muted); font-size: 1.1rem; }

@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__art { max-width: 280px; order: -1; }   /* Mobil: Figur klein, Inhalt bleibt vorn */
  .hero__bubble { display: none; }
  .steps { grid-template-columns: 1fr; }
  .continue { grid-template-columns: 1fr; }
  .continue__stats { border-right: 0; border-bottom: 1px solid var(--border); }
}

/* ---------- Stufenseite (Welt) ---------- */
.stufe-hero { padding-block: clamp(2rem, 5vw, 3.5rem); border-bottom: 1px solid var(--border); overflow: hidden; }
.stufe-hero__inner { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 2.5rem; align-items: center; }
.stufe-hero__lead { font-size: 1.12rem; color: var(--text-muted); max-width: 520px; }
.stufe-hero__stats { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.stufe-hero__bar { max-width: 420px; margin-top: 1rem; }
.stufe-hero__art { width: min(100%, 340px); aspect-ratio: 1; justify-self: center; }
.stufe-hero__art img { width: 80%; height: auto; }
/* Redesign 2.0 (2026-10-11): ruhiger Stufen-Kopf ohne Weltbild-Ebenen – Text links, Welt-Tier (Meister-Form) rechts,
   dezenter Lichtschein in der Weltfarbe. Alte Ebenen (Himmel, Inseln, Landmarken, Wolken) archiviert. */
/* Variante C (2026-10-19): kompakter Kopf ohne Lichtschein (Linienmuster 2026-10-25 entfernt) */
.stufe-hero { position: relative; isolation: isolate; min-height: 0; display: grid; align-items: center; padding-block: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--color-bg); }
.stufe-hero .stufe-hero__inner { position: relative; }
.stufe-hero h1 { margin-bottom: 0.4rem; }
.stufe-hero__art { width: min(100%, 380px); filter: drop-shadow(0 14px 20px rgb(0 0 0 / 0.28)); }
.stufe-hero__art img { width: 100%; height: auto; }
.stufe-hero__los { margin: 0.3rem 0 1rem; }
/* „Dein Stand“ rechts im Stufen-Kopf (ersetzt Welt-Tier und den Kasten „Aktuelle Reihe“, 2026-10-11) */
.stufe-stand { display: grid; gap: 0.9rem; padding: 1.1rem 1.2rem; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.stufe-stand__kopf { display: flex; align-items: center; gap: 1rem; }
.stufe-stand__ring {
  --p: 0; flex: none; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--progress) calc(var(--p) * 1%), var(--color-bg-soft) 0);
}
.stufe-stand__ring > span { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: var(--color-surface); line-height: 1.05; }
.stufe-stand__ring strong { font-family: var(--font-label); font-weight: var(--fw-mittel); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.stufe-stand__ring small { font-size: var(--fs-meta); color: var(--text-muted); }
.stufe-stand__titel { margin: 0 0 0.35rem; font-weight: var(--fw-halbfett); }
.stufe-stand__werte { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.stufe-stand__aktuell {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.8rem; border-radius: var(--radius-md); text-decoration: none; color: var(--text);
  background: var(--color-surface-raised); border: 1px solid var(--border); border-left: 2px solid var(--nav-aktiv);
}
.stufe-stand__aktuell:hover { color: var(--text); border-color: var(--nav-aktiv); }
.stufe-stand__symbol { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: none; }
.stufe-stand__symbol .icon { width: var(--icon-inhalt); height: var(--icon-inhalt); }
.stufe-stand__text { display: grid; gap: 0.1rem; flex: 1; min-width: 0; }
.stufe-stand__text small { font-size: var(--fs-meta); font-weight: var(--fw-halbfett); color: var(--text-muted); text-transform: none; letter-spacing: 0.02em; }
.stufe-stand__text strong { font-size: 0.98rem; }
.stufe-stand__text .muted { font-size: var(--fs-meta); }
.stufe-stand__wege { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.stufe-stand__wege a { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-hilfe); font-weight: var(--fw-mittel); text-decoration: none; color: var(--text); }
.stufe-stand__wege a:hover { text-decoration: underline; }
.stufe-stand__wege .icon { width: 1.3rem; height: 1.3rem; }
.stufe-hero--ruhig { min-height: 0; }
/* Lernort-Bühne: aktuelle Mission als Übergang von der Welt in den Unterricht (js/stufe.js) */
.lernort-buehne { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; max-width: 980px; margin: 0 0 2.4rem;
  padding: 1rem 1.6rem 1rem 1rem; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--c) 45%, var(--panel-border));
  background: radial-gradient(60% 90% at 25% 50%, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%), var(--panel-bg);
  box-shadow: var(--shadow-lift), 0 0 30px color-mix(in srgb, var(--c) 14%, transparent); }
.lernort-buehne__bild { position: relative; display: grid; place-items: center; min-height: 240px; }
.lernort-buehne__bild img { grid-area: 1 / 1; max-width: 100%; }
/* Icon der Reihe auf Fläche in Regionsfarbe (statt Lernort-Insel) */
.lernort-buehne__bild--icon { min-height: 220px; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: radial-gradient(70% 80% at 50% 100%, color-mix(in srgb, var(--r, var(--c)) 34%, transparent), transparent 70%), var(--color-bg-soft); }
.lernort-buehne__bild--icon .icon { width: 120px; height: 120px; }
.lernort-buehne__ort { width: 100%; max-height: 300px; object-fit: contain; filter: drop-shadow(0 16px 22px rgb(0 0 20 / 0.5)); animation: welt-schweben 11s ease-in-out infinite; }
.lernort-buehne__text h2 { margin: 0 0 0.3rem; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.lernort-buehne__text .eyebrow { color: var(--c); }
.lernort-buehne__stand { display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-hilfe); color: var(--text-muted); }
@media (max-width: 760px) { .lernort-buehne { grid-template-columns: 1fr; padding: 1rem; } .lernort-buehne__bild { min-height: 180px; } }

/* Quest-Stationen: Regionssymbole und Status-Symbole, leuchtender Pfad */
.quest__symbol { width: 72%; height: 72%; object-fit: contain; }
.quest--locked .quest__symbol { filter: grayscale(0.9) brightness(0.6); }
.quest__st { display: inline-block; width: 1.35em; height: 1.35em; object-fit: contain; vertical-align: -0.35em; }
.map-legend img.quest__st { margin-right: 0.15rem; }
.notice { margin-bottom: 2.8rem; max-width: 620px; }
.map-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 1.5rem; max-width: 820px; margin-bottom: 1.6rem; }
.map-title { margin: 0; }
.map-legend { display: flex; gap: 1rem; font-size: var(--fs-hilfe); margin: 0; }

/* Quest-Karte: vertikaler Pfad mit Knoten */
.quest-map { --node: 48px; list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 0.9rem; max-width: 820px; }
.quest-map::before {
  content: ""; position: absolute; left: calc(var(--node) / 2 - 1px); top: 18px; bottom: 120px; width: 2px; border-radius: 2px;
  /* ruhiger Pfad (2026-10-11): schlichte Linie in Rahmenfarbe, kein Leuchten, kein Farbverlauf */
  background: var(--color-border-strong);
}
.quest-start { display: grid; grid-template-columns: var(--node) 1fr; }
.quest-start__node {
  justify-self: center; position: relative; z-index: 1;
  padding: 0.25rem 0.7rem; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--c); color: var(--c);
  font-family: var(--font-label); font-size: var(--fs-meta); font-weight: var(--fw-mittel); text-transform: none;
}
.quest {
  position: relative; display: grid; grid-template-columns: var(--node) 1fr auto; align-items: center; gap: 1rem;
  color: var(--text); text-decoration: none; border-radius: var(--radius);
}
.quest:hover { color: var(--text); }
.quest__node {
  position: relative; z-index: 1; width: var(--node); height: var(--node); display: grid; place-items: center; font-size: 1.3rem;
  background: var(--background); border: 2px solid var(--border-strong); border-radius: 50%;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.quest__check {
  position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--fs-meta); font-weight: var(--fw-halbfett);
  background: var(--color-success); color: var(--color-bg-deep); border: 2px solid var(--bg);
}
/* Design System 2.0 (2026-10-19): Reihe = Zeile an der Linie, keine eigene Karte; Zustand über Knoten-Form + Statustext */
.quest__body {
  display: grid; gap: 0.15rem; background: none; border: 0; border-radius: var(--radius-md); padding: 0.5rem 0.75rem;
  transition: background var(--transition-fast);
}
a.quest:hover .quest__body { background: var(--surface); }
a.quest:hover .quest__title { color: var(--nav-aktiv); }
.quest:focus-visible { outline-offset: 4px; }
.quest__nr { font-family: var(--font-label); font-size: var(--fs-meta); font-weight: var(--fw-mittel); letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.quest__title { font-weight: var(--fw-halbfett); font-size: 1.0625rem; transition: color var(--transition-fast); }
.quest__status .status { padding: 0; border: 0; background: none; }
.quest__kurz { font-size: var(--fs-ui); color: var(--text-muted); }
.quest__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; margin-top: 0.35rem; font-size: var(--fs-meta); color: var(--text-muted); }

/* Zustände */
/* abgeschlossen zurückhaltend (grüner Haken), aktuell deutlich (blauer Ring, ohne Puls/Leuchten) */
/* Formen: nicht begonnen = Ring · aktuell = kräftiger blauer Ring + Hof · abgeschlossen = grüner Ring + Haken · gesperrt = gestrichelt */
.quest.is-done .quest__node { border-color: var(--color-success); }
/* Variante C: aktuelle Reihe = dezente Fläche + schmale Akzentlinie links, Knoten ohne Hof (Iteration 3: --nav-aktiv statt Blau) */
.quest.is-current .quest__node { border-color: var(--nav-aktiv); border-width: 2px; box-shadow: none; }
.quest.is-current .quest__body { background: var(--surface); box-shadow: inset 2px 0 0 var(--nav-aktiv); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.quest.is-current .quest__nr { color: var(--nav-aktiv); }
@keyframes quest-puls { from { transform: scale(0.95); opacity: 0.8; } to { transform: scale(1.3); opacity: 0; } }
.quest--locked .quest__node { background: var(--background); border-style: dashed; border-color: var(--border-strong); font-size: 1.1rem; box-shadow: none; }
.quest--locked .quest__body { background: none; box-shadow: none; }
.quest--locked .quest__title, .quest--locked .quest__nr { color: var(--text-muted); }

/* Kapitel: eigene Abschnitte mit kurzem Pfad, untereinander unabhängig */
.map-hinweis { max-width: 820px; margin: -0.8rem 0 1.4rem; font-size: var(--fs-ui); }
.quest-kapitel-liste { display: grid; gap: 2rem; max-width: 820px; }
.quest-kapitel { padding: 1.25rem 0 0; border-top: 1px solid var(--border-strong); }
.quest-kapitel.is-done { border-top-color: var(--color-success); }
.quest-kapitel__kopf {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.3rem 0.9rem; margin-bottom: 1rem;
}
.quest-kapitel__icon { width: var(--icon-reihe); height: var(--icon-reihe); display: grid; place-items: center; font-size: 1.4rem; }
.quest-kapitel__nr { margin: 0; font-family: var(--font-label); font-size: var(--fs-meta); font-weight: var(--fw-mittel); letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.quest-kapitel__kopf > .status { padding: 0; border: 0; background: none; font-family: var(--font-label); }
.quest-kapitel__text h3 { margin: 0; font-size: 1.25rem; }
.quest-kapitel__bar { grid-column: 1 / -1; height: 4px; border: 0; }
.quest-map--kapitel { max-width: none; }
.quest-map--kapitel::before { top: 24px; bottom: 24px; }
.quest-map--kapitel:has(> li:only-child)::before { display: none; }
.quest-kapitel-liste > .quest-boss { margin-top: 0.4rem; }
.quest-kapitel__icon img { width: 100%; height: 100%; object-fit: contain; }

/* Wissensprüfung am Ende des Pfads (2026-10-11): Elementarhüter, ruhiger Rahmen; Elementfarbe nur als Schein hinter der Figur */
.quest-boss { margin-top: 0.8rem; }
.boss {
  position: relative; display: grid; grid-template-columns: 180px 1fr; gap: 1.4rem; align-items: center;
  padding: 1.2rem 1.4rem; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card);
}
.quest-boss.is-ready .boss { border-color: color-mix(in srgb, var(--color-primary) 55%, var(--border)); }
.boss__art { position: relative; aspect-ratio: 1; display: grid; place-items: center; isolation: isolate; }
.boss__art::before {
  content: ""; position: absolute; inset: 6%; border-radius: 50%; z-index: -1;
  background: none;   /* Variante C: Figur ohne Lichtschein, die Prüfung selbst steht im Vordergrund */
}
/* 2026-10-22 ohne Schlagschatten (wirkte bei 180 px wie ein Schleier um die Figur); gesperrt nur leicht entsättigt, voll deckend */
.boss__art img { width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.quest-boss:not(.is-ready) .boss__art img { filter: saturate(0.75); }
.boss__platzhalter { display: none; }
.boss__art.is-leer::after {
  content: ""; position: absolute; inset: 8%; border-radius: 50%; border: 2px dashed var(--border); z-index: -1;
}
.boss__art.is-leer .boss__platzhalter { display: block; color: var(--text-muted); font-size: var(--fs-meta); font-weight: var(--fw-halbfett); text-align: center; padding: 1rem; }
.boss__label { margin: 0 0 0.2rem; font: 500 var(--fs-meta) var(--font-label); text-transform: none; color: var(--text-secondary); }
.boss__text h3 { font-size: 1.45rem; margin-bottom: 0.3rem; }
.boss__text .progress { max-width: 360px; margin-top: 0.4rem; }
.boss__meta { margin: 0.7rem 0 0; }

@media (max-width: 860px) {
  .stufe-hero__inner { grid-template-columns: 1fr; }
  .stufe-hero__art { width: min(55%, 220px); order: -1; }
}
@media (max-width: 560px) {
  .quest-map { --node: 40px; }
  .quest { grid-template-columns: var(--node) 1fr; gap: 0.75rem; }
  .quest__node { font-size: 1.25rem; }
  .quest__status { grid-column: 2; }
  .boss { grid-template-columns: 1fr; text-align: center; padding: 1.2rem; }
  .boss__art { width: 150px; justify-self: center; }
  .boss__text .progress { margin-inline: auto; }
}

/* ---------- Login ---------- */
/* Passwortseite im Startseiten-Stil (2026-10-22): Karo-Raster wie im Hero (.mit-karo), zur Mitte hin sichtbar und nach außen
   ausgeblendet, weiße Fläche läuft ins Hellgrau aus; Karte mit großer Rundung wie die Startseiten-Karten. */
.gate {
  min-height: calc(100vh - var(--header-h)); display: grid; place-items: center; padding-block: 3rem;
  overflow: hidden;
  --karo-maske: radial-gradient(ellipse 70% 60% at 50% 50%, rgb(0 0 0 / 0.5) 0%, #000 45%, transparent 100%);
  background: radial-gradient(ellipse 80% 70% at 50% 45%, var(--color-surface) 40%, var(--color-bg));
}
/* Kein Tier im Hintergrund der Passwortseite (Nutzer 2026-10-11) */
.gate__card { width: min(440px, 100%); padding: 2.25rem 2rem 1.75rem; text-align: center; margin-inline: auto; box-shadow: var(--shadow); }
.gate__card h1 { font-size: var(--fs-h2); font-weight: var(--fw-titel); margin: 0.25rem 0 0.5rem; }
.gate__card .eyebrow { justify-content: center; }
.gate__field { display: block; margin-top: 1.5rem; }
.gate__field input {
  width: 100%; font: inherit; font-size: 1.05rem; text-align: center;
  padding: 0.8rem 1rem; border-radius: var(--radius-knopf);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.gate__field input:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 22%, transparent); }
.gate__error { color: var(--error); font-weight: var(--fw-halbfett); font-size: var(--fs-ui); margin: 0.7rem 0 0; }
.gate__btn { width: 100%; margin-top: 1rem; }
.gate__recht { margin: 1rem 0 0; font-size: .85rem; }
.gate__recht a + a { margin-left: .75rem; }
.shake { animation: shake 0.35s; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

/* ---------- Rechtliches ---------- */
.legal { max-width: 760px; }
.legal h2 { font-size: 1.3rem; margin-top: 2rem; }

/* ---------- Reihen-Kopf & Kapitel-Navigation ---------- */
.reihe-hero { padding-block: clamp(2rem, 5vw, 3.2rem) 2rem; border-bottom: 1px solid var(--border); }
.reihe-hero__sub { font-size: 1.15rem; color: var(--text-muted); max-width: 640px; }
.chapters {
  position: sticky; top: var(--header-h); z-index: 40;
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.chapters ol { list-style: none; margin: 0; padding: 0.55rem 0; display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: thin; counter-reset: kap; }
.chapters a {
  counter-increment: kap;
  display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap;
  padding: 0.35rem 0.8rem 0.35rem 0.4rem; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); text-decoration: none; font-size: var(--fs-hilfe); font-weight: var(--fw-halbfett);
}
.chapters a::before {
  content: counter(kap);
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c, var(--primary)); color: var(--bg); font-size: var(--fs-meta); font-weight: var(--fw-halbfett);
}
.chapters a:hover { border-color: var(--c, var(--primary)); }
.reihe-content { max-width: 880px; padding-bottom: 4rem; }
.reihe-content section[id] { scroll-margin-top: calc(var(--header-h) + 64px); }

/* ---------- Reihen-Navigation links (Kurs-Layout und ältere Reihen, js/reihe-nav.js) ---------- */
/* Neugestaltung 2026-10-25 (Nutzer-Vorgabe, Vorbild Apple-Seitenleisten): drei klar getrennte Ebenen statt „alles sieht gleich aus“.
   Etappe = Oberkapitel mit runder blauer Nummer und viel Luft davor, Kapitel = Name mit Nummernfeld (aktiv dunkel gefüllt),
   Unterkapitel = kurze Schritte (Einstieg, Werkstatt, Sicherung) mit Kreisnummer, aktiv als weiße Karte auf der grauen Leiste.
   Keine farbigen Kanten, keine Linien-Einrückung. */
.kurs__nav, .rn__nav { background: var(--surface-sunken); }
.kn-gruppe {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; column-gap: 0.6rem; row-gap: 0.1rem;
  margin: 1.75rem 0 0.35rem; padding: 0 0.55rem; border: 0;
  font-size: var(--fs-meta); font-weight: var(--fw-normal); letter-spacing: 0; text-transform: none; color: var(--text-muted); line-height: 1.35;   /* Aufräumliste 3 (2026-11-01): leiser Abschnittskopf, gleich gesetzt wie .kn-trenner */
}
.kn-gruppe:first-child { margin-top: 0.3rem; }
.kn-gruppe > span:first-child:not(.kn-gruppe__nr) { font-family: var(--font-label); font-size: var(--fs-meta); font-weight: var(--fw-mittel); color: var(--text-muted); }
.kn-gruppe__nr {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ton); color: var(--text-secondary);
  font-family: var(--font-label); font-size: 0.72rem; font-weight: var(--fw-halbfett); line-height: 1;
}
.kn-kap {
  display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 0.6rem; min-height: 38px;
  padding: 0.35rem 0.55rem; border-radius: var(--radius-md); color: var(--text); text-decoration: none;
  font-size: var(--fs-ui); font-weight: var(--fw-mittel); line-height: var(--lh-ui);
}
.kn-kap:hover { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); }
.kn-nr {
  width: 24px; height: 22px; display: grid; place-items: center; border-radius: var(--radius-sm);
  background: transparent; box-shadow: inset 0 0 0 1px var(--trenner); color: var(--text-muted);   /* 2026-11-01 leiser, aktiv bleibt dunkel gefüllt */
  font-family: var(--font-label); font-size: var(--fs-meta); font-weight: var(--fw-halbfett);
}
.kn-kap.is-active { background: none; color: var(--text); font-weight: var(--fw-titel); box-shadow: none; }
.kn-kap.is-active .kn-nr { background: var(--text); color: var(--bg); box-shadow: none; }
.kn-ok { color: var(--success); font-weight: var(--fw-halbfett); }
.kn-ok .icon { width: var(--icon-status); height: var(--icon-status); vertical-align: -0.15em; }
/* Unterkapitel: Schritte unter dem Kapitelnamen, ohne Linie */
.kn-subs { list-style: none; margin: 0.15rem 0 0.6rem calc(0.55rem + 30px); padding: 0; display: grid; gap: 0.15rem; }
.kn-subs[hidden] { display: none; }
.kn-subs a {
  display: grid; grid-template-columns: 20px 1fr; gap: 0.55rem; min-height: 34px; align-items: center; padding: 0.3rem 0.55rem; border-radius: var(--radius-lg);
  color: var(--text-secondary); text-decoration: none; font-size: var(--fs-hilfe); line-height: 1.35;
}
.kn-subs a > span:first-child {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor;
  color: var(--text-muted); font-family: var(--font-label); font-size: 0.7rem; font-weight: var(--fw-halbfett); padding: 0;
}
.kn-subs a:hover { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); }
.kn-subs a[aria-current="page"] {
  background: var(--surface); color: var(--text); font-weight: var(--fw-halbfett); box-shadow: none;   /* 2026-11-01: weiße Fläche ohne Schatten */
}
.kn-subs a[aria-current="page"] > span:first-child { color: var(--text); }
.kn-optional { display: inline-block; margin-left: 0.35rem; padding: 0; border: 0;
  font-family: var(--font-label); font-size: var(--fs-meta); font-weight: var(--fw-mittel); text-transform: none; color: var(--text-muted); vertical-align: baseline; }
.kn-trenner { position: relative; margin: 1.75rem 0.55rem 0.35rem; border-top: 0; text-align: left; }   /* 2026-11-01: Gruppe über Abstand statt gestrichelter Linie */
.kn-trenner span { position: relative; padding: 0; color: var(--text-muted);
  font-family: inherit; font-size: var(--fs-meta); font-weight: var(--fw-normal); line-height: 1.35; text-transform: none; white-space: nowrap; }
.kn-kap:has(.kn-optional) { color: var(--text-secondary); }
/* Gesperrt: lesbar in Sekundärfarbe + Schloss statt halbtransparent */
.kn-kap.is-gesperrt, .kn-subs a.is-gesperrt { color: var(--text-muted); font-weight: var(--fw-normal); }
.kn-kap.is-gesperrt .kn-ok .icon { opacity: 0.7; }
.kn-kap.is-gesperrt .kn-ok { font-size: 0.8rem; }
.kn-subs a.is-gesperrt { cursor: not-allowed; grid-template-columns: 20px 1fr auto; }
.kn-sub-schloss { margin-left: auto; padding-left: 0.4rem; flex-shrink: 0; }
.kn-sub-schloss .icon { width: var(--icon-xs, 14px); height: var(--icon-xs, 14px); opacity: 0.7; }
/* Gesperrte Etappe: nur die Kopfzeile mit Kapitelzahl und Schloss (js/kurs.js) */
.kn-gruppe.is-zu { color: var(--text-muted); }
.kn-gruppe.is-zu .kn-gruppe__nr { background: var(--border-strong); }
.kn-gruppe .kn-gruppe__zu { grid-column: 2; margin-left: 0; display: inline-flex; align-items: center; gap: 0.3rem;
  font-style: normal; font-size: var(--fs-meta); font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.kn-gruppe .kn-gruppe__zu[hidden], .kn-kap[hidden] { display: none; }
.kn-gruppe__zu .icon { width: var(--icon-status); height: var(--icon-status); opacity: 0.6; }
.kn-kap.kn-neu { animation: kn-auf 300ms ease-out; }
@keyframes kn-auf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .kn-kap.kn-neu { animation: kn-auf 200ms ease-out !important; }
  @keyframes kn-auf { from { opacity: 0; } to { opacity: 1; } }
}

/* Einklappen: am PC runder Pfeil mittig an der Kante (.seiten-pfeil--nav, js/reihe-nav.js), am Handy Knopf oben + schwebender Knopf */
.nav-einklappen {
  position: sticky; top: 0; z-index: 1; display: none; align-items: center; gap: 0.4rem; width: 100%;
  margin: -0.4rem 0 0.4rem; padding: 0.45rem 0.5rem; border: 0; border-radius: var(--radius-s);
  background: var(--surface-sunken); color: var(--text-muted); font: inherit; font-size: var(--fs-meta); font-weight: var(--fw-halbfett); cursor: pointer;
}
.nav-einklappen:hover { background: var(--surface-2); color: var(--text); }
.nav-griff {
  position: fixed; z-index: 45; display: none; align-items: center; gap: 0.5rem;
  border: 0; background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-card);
  font: inherit; font-size: var(--fs-ui); font-weight: var(--fw-halbfett); letter-spacing: 0.04em; cursor: pointer;
}
.nav-griff:hover { background: var(--interactive-hover); color: var(--on-primary); }
/* Breiten: wächst mit dem Bildschirm (27-Zoll-Monitor), --nav-w steuert Raster und Pfeil */
:is(.kurs, .rn-seite):not(.nav-zu) { --nav-w: clamp(240px, 15vw, 300px); }
@media (min-width: 901px) {
  .nav-zu { --nav-w: 0px; }
  .nav-zu .kurs__nav, .nav-zu .rn__nav { visibility: hidden; overflow: hidden; padding: 0; border: 0; }
  .nav-zu .kurs__menu { display: none; }
  .nav-zu .kurs__main { padding-left: 3.2rem; }
  .nav-zu .rn > .reihe-content { padding-left: max(3.2rem, var(--gutter, 16px)); }
  .seiten-pfeil--nav { display: grid; left: max(8px, calc(var(--nav-w) - 15px)); }
  .nav-zu > .seiten-pfeil--nav svg { transform: rotate(180deg); }
}

/* Ältere Reihen (Blöcke + Lektionen): Navigation links statt Leiste oben */
.rn { max-width: none; display: grid; grid-template-columns: var(--nav-w, 250px) minmax(0, 1fr); align-items: start; }
.rn__nav {
  position: sticky; top: var(--header-h); max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  padding: 1rem 0.6rem 2.5rem; border-right: 1px solid var(--border); scrollbar-width: thin;
}
.rn > .reihe-content { width: 100%; }
.rn .reihe-content section[id], .rn .lektion[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
@media (max-width: 900px) {
  .rn { grid-template-columns: minmax(0, 1fr); }
  .rn__nav {
    position: fixed; z-index: 60; top: var(--header-h); left: 0; bottom: 0; width: min(310px, 86vw); max-height: none;
    background: var(--bg); border-right: 1px solid var(--border); box-shadow: var(--shadow-overlay);
    transform: translateX(-105%); transition: transform 0.25s ease; visibility: hidden;
  }
  .nav-open .rn__nav { transform: none; visibility: visible; }
  .nav-einklappen { display: flex; }
  /* Handy: Knopf unten rechts öffnet die Navigation; gleitet beim Weiterlesen nach unten weg (js/reihe-nav.js, 2026-10-21) */
  .nav-griff {
    display: flex; writing-mode: horizontal-tb; top: auto; transform: none; left: auto; right: 12px; bottom: 12px; padding: 0.55rem 0.9rem;
    border-radius: var(--radius-pill); box-shadow: var(--shadow-overlay);
    transition: transform 220ms cubic-bezier(.2, .8, .2, 1), opacity 220ms ease;
  }
  .nav-griff.ist-weg { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
  main:has(> .nav-griff) { padding-bottom: 4.5rem; }
  .nav-open > .nav-griff { display: none; }
  /* nur EIN Kapitel-Knopf: der schwebende bleibt beim Scrollen erreichbar, der in der Kopfleiste entfällt */
  main:has(> .nav-griff) .kurs__menu { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rn__nav { transition: none; } }

/* ---------- Navigation der Spielwelt (D.spielNav, js/begleiter.js): Begleiter, Trainingshalle, Hüter, Album, Spiele ---------- */
.spiel-nav { margin: 0 0 1.2rem; }
.spiel-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.spiel-nav a {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.85rem 0.25rem 0.3rem; border-radius: var(--radius-pill); text-decoration: none;
  color: var(--color-text); background: var(--panel-bg); border: 1px solid var(--panel-border); font-weight: var(--fw-halbfett); font-size: var(--fs-ui);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.spiel-nav__bild { width: 1.9rem; height: 1.9rem; object-fit: contain; }
@media (max-width: 640px) {
  .spiel-nav { overflow-x: auto; margin-inline: -16px; padding: 0 16px 0.3rem; scrollbar-width: none; }
  .spiel-nav ul { flex-wrap: nowrap; width: max-content; }
  .spiel-nav a { font-size: var(--fs-hilfe); }
}
.spiel-nav a:hover { border-color: var(--color-primary); color: var(--color-text); }
.spiel-nav a[aria-current="page"] { border-color: var(--nav-aktiv); background: var(--nav-aktiv-soft); }
.spiel-nav small { color: var(--color-text-muted); font-weight: 500; }
/* ---------- Hellmodus für Spielwelt-Flächen (Nutzer-Wunsch 2026-10-11: „nicht stimmig“) ----------
   Begleiter-Bühne, Album-Sammlung, Kartenfunde folgen dem Modus. Dunkel bleiben nur die Spielfelder (arena/duell|gogyo),
   die Entwicklungs-Feier und die Hüter-Kampfbühne mit Hintergrundbild. */
/* Design System 2.0: Bühne in beiden Modi ruhige Fläche (css/held.css), hier nur der weichere Schatten der Figur */
:root:not([data-theme-current="dark"]) .beg-buehne-gross__figur img { filter: drop-shadow(0 14px 18px rgb(23 38 61 / 0.28)); }
:root:not([data-theme-current="dark"]) .beg-buehne-gross__glow, :root:not([data-theme-current="dark"]) .beg-buehne-gross__partikel { mix-blend-mode: multiply; opacity: 0.18; }
:root:not([data-theme-current="dark"]) .beg-buehne-gross__hinweis { background: rgb(255 255 255 / 0.9); color: var(--color-text); }
/* Album: Sammlung und neue Funde als helle Fläche – die Karten selbst behalten ihr Papier-Design */

/* Ranglisten (2026-10-19, js/rangliste.js): Begleiter-Seite, Spiele, Lehrerbereich */
.rangliste-box { margin-top: 1.5rem; }
.rangliste-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0; }
.rangliste-mehr { margin-top: 0.9rem; }
.rangliste { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.rangliste__zeile { display: grid; grid-template-columns: 2.4rem auto 1fr auto; align-items: center; gap: 0.6rem;
  padding: 0.35rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--color-surface); min-width: 0; }
.rangliste__zeile.ist-vorn .rangliste__platz { color: var(--color-gold); }
.rangliste__zeile.ist-ich { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); }
.rangliste__platz { font-weight: var(--fw-halbfett); text-align: right; font-variant-numeric: tabular-nums; }
.rangliste__bild { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; }
.rangliste__bild img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rangliste__name { min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.rangliste__name small { color: var(--color-text-muted); font-size: var(--fs-meta); }
.rangliste__wert { font-weight: var(--fw-halbfett); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rangliste__luecke { text-align: center; color: var(--color-text-muted); line-height: 1; }
.rangliste__hinweis, .rangliste__mein { font-size: var(--fs-hilfe); margin: 0.3rem 0; }

/* ---------- Rechtliches (datenschutz/, 2026-10-20) ----------
   Lesespalte max. 800 px; oben „Auf einen Blick“ als Panel, Abschnitte nur mit Trennlinie (keine Fläche in der Fläche). */
.recht { max-width: 800px; }
.recht p, .recht li { line-height: var(--lh-lern); }
.recht ul { padding-left: 1.3rem; margin: 0 0 0.9rem; }
.recht li { margin-bottom: 0.35rem; }
.recht__kurz { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.recht__kurz li { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; padding: 1rem 1.1rem; line-height: var(--lh-ui); border-left: 1px solid var(--border-divider); }
.recht__kurz li:first-child { border-left: 0; }
.recht__kurz .muted { font-size: var(--fs-hilfe); }
@media (max-width: 719px) {
  .recht__kurz li { border-left: 0; border-top: 1px solid var(--border-divider); }
  .recht__kurz li:first-child { border-top: 0; }
}
.recht__inhalt { margin: 0 0 2rem; }
.recht__inhalt .eyebrow { margin-bottom: 0.4rem; }
.recht__inhalt ol { margin: 0; padding-left: 1.4rem; columns: 2 14rem; column-gap: 2rem; }
.recht__inhalt li { margin-bottom: 0.2rem; }
.recht__abschnitt { padding-top: 1.75rem; margin-top: 1.75rem; border-top: 1px solid var(--border-divider); scroll-margin-top: 5rem; }
.recht__abschnitt h2 { font-size: 1.3rem; margin: 0 0 0.75rem; display: flex; align-items: baseline; gap: 0.6rem; }
.recht__nr { font-family: var(--font-label); font-size: var(--fs-meta); font-weight: var(--fw-mittel); color: var(--text-secondary); min-width: 1.4rem; }
.recht__hinweis { padding: 0.9rem 1.1rem; border-left: 3px solid var(--link); background: var(--surface-sunken); border-radius: var(--radius-sm); }
.recht__stand { font-size: var(--fs-meta); margin-top: 1.5rem; }


/* ==========================================================
   Kopfzeile schlank (2026-10-22, Vorbild apple.com, Nutzerwunsch)
   44 px hoch (--header-h, seit 2026-10-22 wie Apple; Menüpunkte jetzt 13 px in Textfarbe), nur das DO-Zeichen statt Schriftzug (js/site.js logoZeichen), früher Menüpunkte 14 px normal in
   Sekundärfarbe, Suche immer als Lupe, rechts kleine Symbole. Klickflächen bleiben 44 px (iPad).
   Steht am Ende der Datei und gewinnt damit gegen die älteren Header-Regeln oben.
   ========================================================== */
.logo--zeichen { display: inline-grid; place-items: center; height: 44px; padding: 0 0.25rem; color: var(--text); transition: color var(--transition-fast); }
.logo--zeichen svg { display: block; width: 36px; height: auto; }
.logo--zeichen:hover, .logo--zeichen:focus-visible { color: var(--nav-aktiv); }
.site-header .logo--zeichen::after { content: none; }
/* 2026-10-22: Kopfzeile so breit wie Inhalt und Seitenfuß (--maxw statt --maxw-weit), Logo-Innenabstand ausgeglichen –
   DO-Zeichen steht bündig über der linken Inhaltskante (Nutzer: „Logo weiter rechts“) */
.site-header__inner { gap: 1.5rem; max-width: var(--maxw); }
.site-header__inner > .logo--zeichen { margin-left: -0.25rem; }
.haupt-nav { gap: 0.1rem; }
.hn-link {
  /* 2026-10-22: 13 px wie die Links im Seitenfuß, volle Textfarbe statt Grau (Nutzer: „nicht schwarz“) */
  height: 44px; padding: 0 0.75rem; font-size: var(--fs-meta); font-weight: var(--fw-mittel); letter-spacing: 0.005em;
  color: var(--text); background: none;
}
/* Hover wie Apple (2026-10-22): Schrift dunkler + feiner Unterstrich unter dem Text; aktiv/offen = Unterstrich in --nav-aktiv */
.hn-link { position: relative; }
.hn-link::after { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 6px; height: 2px; border-radius: 1px;
  background: var(--nav-aktiv); opacity: 0; transition: opacity var(--transition-fast); }
.hn-link:hover { color: var(--text); background: none; }
.hn-link:hover::after { opacity: 1; background: var(--hover-rand); height: 1px; }
.hn-link[aria-current], .hn-link[aria-expanded="true"] { color: var(--text); background: none; box-shadow: none; }
.hn-link[aria-current]::after, .hn-link[aria-expanded="true"]::after { opacity: 1; background: var(--nav-aktiv); height: 2px; }
.hn-pfeil { width: 13px; height: 13px; opacity: 0.7; }
.site-header__actions { gap: 0.2rem; }
/* Rechts nur Symbole bzw. ganz kurze Texte, alle gleich hoch */
.xp-pill, .theme-schalter, .held-chip, .menu-btn, .site-header .tool-btn { height: 44px; }
.xp-pill { font-weight: var(--fw-mittel); color: var(--text); font-size: var(--fs-meta); }
.xp-pill:hover, .xp-pill[aria-expanded="true"] { color: var(--text); }
.xp-pill .icon { width: 18px; height: 18px; }
.theme-schalter { width: 44px; }
.theme-schalter .icon { width: 19px; height: 19px; color: var(--text-secondary); }
.theme-schalter:hover { border-color: transparent; }
.theme-schalter:hover .icon { color: var(--text); }
.held-chip { font-weight: var(--fw-mittel); color: var(--text); font-size: var(--fs-meta); padding: 0 0.6rem; }
.held-chip__text strong { font-size: var(--fs-meta); }
/* Helle Schrift auf Dunkel wirkt von selbst kräftiger: dort normale Stärke, im Hellen 500, damit 13 px schwarz statt grau wirken */
:root[data-theme="dark"] :is(.hn-link, .xp-pill, .held-chip) { font-weight: var(--fw-normal); }
.held-chip:hover, .held-chip.is-aktiv { color: var(--text); }
.held-chip__bild { width: 28px; height: 28px; }
.held-chip__text strong { font-weight: var(--fw-mittel); }
.menu-btn { width: 44px; border-color: transparent; background: none; }
/* Suche: immer als Lupe (vorher nur 1101–1360 px), klappt beim Antippen über die rechten Symbole auf */
@media (min-width: 1101px) {
  .site-header__actions { position: relative; }
  .site-header__actions > .hn-suche { width: 44px; flex: none; }
  .site-header__actions > .hn-suche input { height: 44px; padding: 0; color: transparent; cursor: pointer; background: transparent; border-color: transparent; }
  .site-header__actions > .hn-suche input:hover { background: var(--color-bg-soft); }
  .site-header__actions > .hn-suche input::placeholder { color: transparent; }
  .site-header__actions > .hn-suche .hn-suche__lupe { right: 50%; transform: translate(50%, -50%); color: var(--text-secondary); }
  .site-header__actions > .hn-suche:focus-within { position: absolute; z-index: 80; right: 0; top: 50%; transform: translateY(-50%); width: min(360px, 40vw); }
  .site-header__actions > .hn-suche:focus-within input { height: 40px; padding: 0 2.2rem 0 0.85rem; color: var(--text); cursor: text; background: var(--color-surface); border-color: var(--border); }
  .site-header__actions > .hn-suche:focus-within input::placeholder { color: var(--text-muted); }
  .site-header__actions > .hn-suche:focus-within .hn-suche__lupe { right: 0.7rem; transform: translateY(-50%); }
}
@media (max-width: 400px) { .logo--zeichen svg { width: 32px; } }

/* Darstellung (2026-10-22): Hell | Dunkel im Seitenfuß und im Menü statt Sonne/Mond in der Kopfzeile */
.site-footer .darstellung { font-size: var(--fs-meta); }
.site-footer .darstellung > button { font-size: var(--fs-meta); min-height: 32px; padding: 0.2rem 0.6rem; }
.site-nav .darstellung { display: flex; width: 100%; }
.site-nav .darstellung > button { flex: 1 1 0; justify-content: center; }

/* ==========================================================
   Stufenseite Informatik (js/stufe.js), Stil „Do-matik“ seit 2026-10-22 – wie die Startseite (css/start3.css):
   weißes Kopf-Band (Pfad, Titel, Stand-Zeile, Leitkarte), hellgraues Band mit Kapiteln als Karten-Raster, Wissensprüfung.
   Karten: 14 px, feiner Rand + zarter Schatten, Motiv mit 6 px Innenrand; Hover nur dunklerer Rand (design.md „Hover“).
   ========================================================== */
/* Bänder seit 2026-10-22 (Nutzerwunsch) knapper: 40–64 statt 48–96 px */
.st-band { padding-block: clamp(2.5rem, 5vw, 4rem); }
.st-band--weiss { background: var(--color-surface); padding-top: clamp(2rem, 4vw, 3rem); }
.st-band--grau { background: var(--color-bg); }
.st-titel { margin: 0; font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4rem); font-weight: var(--fw-titel); letter-spacing: -0.03em; line-height: 1.05; }
.st-lead { max-width: 46ch; margin: clamp(1.25rem, 0.6rem + 1.4vw, 1.75rem) 0 0;   /* Abstand zum großen Titel mitwachsend (2026-10-25, war 1rem) */ font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); line-height: 1.4; color: var(--text-secondary); }
.st-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin: 1.75rem 0 0; font-size: var(--fs-ui); color: var(--text-secondary); }
.st-stand__wert strong { color: var(--text); font-weight: var(--fw-halbfett); }
.st-stand__balken { width: 140px; }
.st-wege { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin: 0.75rem 0 0; font-size: var(--fs-ui); }
.st-wege a { text-decoration: none; }
.st-wege a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
/* gesperrter Weg (z. B. ZP10 vor dem zweiten Halbjahr): sichtbar, nicht anklickbar, Grund klein darunter */
.st-wege__aus { color: var(--text-muted); cursor: not-allowed; text-align: center; }
.st-wege__grund { display: block; font-size: var(--fs-hilfe); }
.st-leit { margin-top: clamp(2rem, 4vw, 3rem); }
.st-hinweis { margin: 0 0 clamp(1.25rem, 2.5vw, 2rem); color: var(--text-muted); font-size: var(--fs-hilfe); }

/* Kopf-Band mit Karo und Diagramm (2026-10-22, wie der Startseiten-Hero): Raster oben verankert und nach unten ausgeblendet,
   Weiß läuft unten ins Hellgrau der Kapitel aus; rechts neben Titel und Satz ein Diagramm des Fachs (js/stufe.js Ablaufplan,
   js/mathe.js Parabel), Ursprung auf einer Rasterkreuzung (50 % + 456 px, 72 px ab oben). Erst ab 1440 px, darunter fehlt der Platz. */
.st-band--kopf {
  --karo-pos: calc(50% + var(--karo-groesse) / 2 - 0.5px) -0.5px;
  --karo-maske: radial-gradient(ellipse 80% 100% at 50% 0%, #000 30%, transparent 100%);
  background: linear-gradient(var(--color-surface) 65%, var(--color-bg));
  overflow-x: clip;
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
/* Naht Kopf → Kapitel knapp (2026-10-22): Leitkarte und erster Kapitelkopf rund 80 statt 190 px auseinander */
.st-band--kopf + .st-band--grau { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
/* Fach-Farbband (2026-10-23, wie Startseite css/start3.css): Kapitel-/Reihen-Band der Stufenseiten, oben weich aus dem Hellgrau des Kopfs */
.st-band[data-fach] {
  background: linear-gradient(var(--color-bg), transparent 9rem), linear-gradient(135deg, var(--band-a), var(--band-b));
}
.st-band[data-fach="mathe"] { --band-a: var(--fach-band-mathe-a); --band-b: var(--fach-band-mathe-b); }
.st-band[data-fach="informatik"] { --band-a: var(--fach-band-informatik-a); --band-b: var(--fach-band-informatik-b); }
/* Kopf zentriert wie die Startseite (2026-10-22, Nutzerwunsch): Pfad, Titel, Satz, Stand und Wege auf der Mittelachse,
   die Leitkarte bleibt breit; das Diagramm rückt dafür nach außen (50 % + 456 px) und erscheint erst ab 1440 px */
.st-band--kopf > .container > :is(.pfad, .st-stand, .st-wege) { justify-content: center; }
.st-band--kopf > .container > :is(.st-titel, .st-lead) { text-align: center; margin-inline: auto; }
.st-bild { position: absolute; left: calc(50% + 456px); top: 72px; z-index: -1; display: none; pointer-events: none; }
/* hier die eine Illustration des Kopfs (nicht Hintergrund wie im Startseiten-Hero): Linien deutlicher, Formen zart gefüllt */
.sz-bild.st-bild {
  --sz-linie: color-mix(in srgb, var(--text) 32%, transparent);
  --sz-weg: color-mix(in srgb, var(--akzent-blau) 80%, transparent);
}
.sz-bild.st-bild :is(.sz-kante, .sz-kurve) { stroke-width: 1.5; }
.sz-bild.st-bild .sz-flaeche { fill: color-mix(in srgb, var(--akzent-blau) 9%, var(--color-surface)); }
@media (min-width: 1440px) { .st-bild { display: block; } }
/* iPad quer (1160–1439 px, Nutzerwunsch 2026-10-22): etwas kleiner und näher an der Mitte, rechts neben der Einleitung (±302 px) */
@media (min-width: 1160px) and (max-width: 1439px) { .st-bild { display: block; width: 216px; height: auto; left: calc(50% + 336px); } }
@media print { .st-bild { display: none; } }
/* Drahtkörper-Schiene (2026-10-23, js/drahtkoerper.js): unsichtbare Spur vom Kopf bis zum Kapitel-Band. Bis 1559 px steht der Würfel
   wie das Diagramm neben dem Titel; ab 1560 px sitzt die Spur im freien Rand neben dem Inhalt und der Würfel bleibt beim Scrollen
   im Bild (sticky), bis die Kapitel beginnen – dort scrollt er mit dem Band weg. Die Lage kommt allein aus CSS. */
.koerper-schiene { position: absolute; left: calc(50% + 456px); top: 72px; bottom: 0; width: 264px; z-index: -1; display: none; pointer-events: none; }
.koerper-schiene > .st-bild { position: static; display: block; width: 100%; height: auto; }
@media (min-width: 1440px) { .koerper-schiene { display: block; } }
@media (min-width: 1160px) and (max-width: 1439px) { .koerper-schiene { display: block; width: 216px; left: calc(50% + 336px); } }
@media (min-width: 1560px) {
  .koerper-schiene { left: calc(50% + var(--maxw) / 2 + 24px); width: min(240px, calc(50% - var(--maxw) / 2 - 48px)); }
  .koerper-schiene > .st-bild { position: sticky; top: calc(var(--header-h) + 48px); }
}
@media print { .koerper-schiene { display: none; } }

/* ---------- Karopapier und Diagramm-Bausteine (2026-10-22), gemeinsam für Startseite (css/start3.css) und Stufenseiten ----------
   .mit-karo: feines Raster aus der Textfarbe (Tokens --karo-linie, --karo-groesse in style.css), Lage über --karo-pos
   (Standard: eine Linie genau durch die Mitte – 50 % rechnet mit der Kachelmitte, daher halbe Kachel minus halbe Linie),
   Ausblenden über --karo-maske. Ohne roten Rand oder Papierstruktur. */
.mit-karo { position: relative; isolation: isolate; }
.mit-karo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--karo-linie) 1px, transparent 1px),
    linear-gradient(to bottom, var(--karo-linie) 1px, transparent 1px);
  background-size: var(--karo-groesse) var(--karo-groesse);
  background-position: var(--karo-pos, calc(50% + var(--karo-groesse) / 2 - 0.5px) calc(50% + var(--karo-groesse) / 2 - 0.5px));
  -webkit-mask-image: var(--karo-maske, none);
          mask-image: var(--karo-maske, none);
}
@media print { .mit-karo::before { content: none; } }
/* .sz-bild: schlichtes Diagramm als SVG (Achsen, Kurven, Graphen, Ablaufpläne), Koordinaten Vielfache von 24 = Raster.
   Linien fast neutral, Farbe nur für Weg und markierte Punkte; kein Schatten, kein Leuchten. Einschalten mit D.szene (js/site.js):
   Bild blendet ein, Linien (.zieh, pathLength=1) zeichnen sich mit Versatz --d einmal ein, .sz-erscheint blendet ein; danach Stillstand.
   Einheitlich: Achsen/Hilfslinien 1 px, gezeichnete Linien 1,25 px, Knoten und Punkte r = 4 */
.sz-bild {
  --sz-linie: color-mix(in srgb, var(--text) 17%, transparent);
  --sz-weg: color-mix(in srgb, var(--akzent-blau) 60%, transparent);
  overflow: visible; opacity: 0; transition: opacity 900ms ease;
}
.sz-bild.ist-aktiv { opacity: 1; }
.sz-bild :is(.sz-achse, .sz-kante, .sz-kurve, .sz-hilfe) { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sz-bild .sz-achse { stroke: var(--sz-linie); stroke-width: 1; }
.sz-bild :is(.sz-kante, .sz-kurve) { stroke-width: 1.25; }
.sz-bild .sz-kante { stroke: var(--sz-linie); }
.sz-bild :is(.sz-kante--weg, .sz-kurve) { stroke: var(--sz-weg); }
.sz-bild .sz-kante--violett { stroke: color-mix(in srgb, var(--akzent-violett) 70%, transparent); }
.sz-bild .sz-hilfe { stroke: var(--sz-linie); stroke-width: 1; stroke-dasharray: 2 4; }
/* Drahtkörper (js/drahtkoerper.js): verdeckte Kanten gestrichelt wie im Schrägbild, verdeckte Ecken zurückgenommen */
.sz-bild .sz-kante--verdeckt { stroke-dasharray: 3 4; opacity: 0.7; }
.sz-bild .sz-knoten--verdeckt { opacity: 0.45; }
/* Rechnernetz: hintere Leitungen blasser statt gestrichelt, Server als kleine Kästchen */
.sz-bild .sz-kante--hinten { opacity: 0.4; }
.sz-bild .sz-server { fill: var(--color-surface); stroke: color-mix(in srgb, var(--text) 45%, transparent); stroke-width: 1.5; }
.sz-bild .sz-server--weg { fill: var(--akzent-blau); stroke: none; }
.sz-bild .sz-wegzug { fill: none; }
/* Ball auf der Bahn (2026-10-25): läuft mit dem Scrollen über Kanten bzw. Weg; Endzustand des Automaten mit zweitem Ring */
.sz-bild .sz-ball { fill: var(--akzent-blau); stroke: var(--color-surface); stroke-width: 1.5; }
.sz-bild .sz-ring { fill: none; stroke: color-mix(in srgb, var(--text) 28%, transparent); stroke-width: 1.25; }
.sz-bild .sz-weg { fill: none; stroke: none; }
.sz-bild .sz-knoten { fill: var(--color-surface); stroke: color-mix(in srgb, var(--text) 28%, transparent); stroke-width: 1.25; }
.sz-bild .sz-knoten--weg { fill: var(--akzent-blau); stroke: none; }
.sz-bild .sz-punkt { fill: var(--akzent-blau); }
.sz-bild .sz-punkt--violett { fill: var(--akzent-violett); }
.sz-bild .sz-punkt--tuerkis { fill: var(--akzent-tuerkis); }
/* beim Ausschalten ohne Versatz zurück, während das Bild ausblendet */
.sz-bild .zieh { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1400ms cubic-bezier(0.33, 0.7, 0.2, 1); }
.sz-bild.ist-aktiv .zieh { stroke-dashoffset: 0; transition-delay: var(--d, 0ms); }
.sz-bild .sz-erscheint { opacity: 0; transition: opacity 500ms ease; }
.sz-bild.ist-aktiv .sz-erscheint { opacity: 1; transition-delay: var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) { .sz-bild, .sz-bild .zieh, .sz-bild .sz-erscheint { transition: none; } }

.st-kapitel + .st-kapitel, .st-kapitel + .st-pruefung { margin-top: clamp(2.5rem, 4.5vw, 3.5rem); }
.st-kapitel__kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 1.5rem; }
.st-kapitel__kopf .eyebrow { margin-bottom: 0.4rem; }
.st-kapitel__kopf h2 { margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: var(--fw-titel); letter-spacing: -0.02em; line-height: 1.1; }
.st-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.st-karte {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden; color: var(--text); text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--radius-flaeche); background: var(--color-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent), 0 2px 6px color-mix(in srgb, var(--text) 5%, transparent);
  transition: border-color var(--transition-fast);
}
a.st-karte:hover { color: var(--text); border-color: var(--hover-rand); }
:root[data-theme="dark"] .st-karte { box-shadow: none; }
.st-karte__motiv {
  display: grid; place-items: center; width: calc(100% - 12px); aspect-ratio: 16 / 9; margin: 6px 6px 0; border-radius: calc(var(--radius-flaeche) - 6px);
  /* feste Breite: Safari (iPad) dehnt aspect-ratio-Flächen in Flex-Spalten sonst über den rechten Rand */
  background: color-mix(in srgb, var(--k) 9%, var(--color-surface));
}
.st-karte__motiv svg { display: block; width: 62%; height: auto; }
.st-karte__text { display: grid; gap: 0.35rem; padding: 1.1rem 1.25rem 0.35rem; }
.st-karte__nr { font-size: var(--fs-meta); font-weight: var(--fw-halbfett); color: var(--k); }
.st-karte__text strong { font-size: 1.2rem; font-weight: var(--fw-titel); line-height: 1.25; letter-spacing: -0.01em; }
.st-karte__kurz { font-size: var(--fs-hilfe); line-height: 1.45; color: var(--text-secondary); }
.st-karte__unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem;
  margin-top: auto; padding: 1rem 1.25rem 1.15rem; font-size: var(--fs-meta); color: var(--text-muted); }
.st-karte.ist-bald { border-style: dashed; background: transparent; box-shadow: none; }
.st-karte.ist-bald .st-karte__motiv { background: transparent; opacity: 0.55; }
.st-karte.ist-bald .st-karte__nr { color: var(--text-muted); }

/* Leitkarte: aktuelle bzw. nächste Reihe breit, Text links, Motiv rechts */
.st-karte--leit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto 1fr auto; grid-template-areas: "text motiv" "pfeil motiv" "unten motiv"; }
.st-karte--leit .st-karte__text { grid-area: text; align-content: start; gap: 0.5rem; padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem) 0; }
.st-karte__leit { font-size: var(--fs-meta); font-weight: var(--fw-mittel); color: var(--nav-aktiv); }
.st-karte__leit::before { content: "/"; margin-right: 0.35em; font-family: var(--font-akzent); font-weight: var(--fw-normal); opacity: 0.75; }
.st-karte--leit .st-karte__text strong { font-size: clamp(1.6rem, 1.15rem + 1.3vw, 2.25rem); line-height: 1.12; letter-spacing: -0.02em; }
.st-karte--leit .st-karte__kurz { font-size: var(--fs-lern); }
.st-karte--leit .st-karte__unten { grid-area: unten; align-self: end; padding: 1.25rem clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem); }
.st-karte--leit .st-karte__motiv { grid-area: motiv; margin: 6px; aspect-ratio: auto; min-height: clamp(200px, 19vw, 256px); }
/* kompakter seit 2026-10-23 wie die Leitkarte der Startseite (start3.css): weniger Luft um Text und Heftblatt, Blatt in Originalgröße */
.st-karte--leit .st-karte__motiv .heft-probe { padding: clamp(0.75rem, 1.5vw, 1.25rem); }
.st-karte--leit .st-karte__motiv svg { width: 50%; }

/* Heftausschnitt statt Motiv (2026-10-23, js/handschrift.js D.heftProbe, design.md „Produkt zeigen“): weißes Blatt mit Karo in der
   Kapitelfläche, oben die Aufgabe in Druckschrift, darunter die Lösung in Handschrift mit grünem Haken. Gilt auch für die Startseite. */
.heft-probe { display: grid; place-items: center; width: 100%; height: 100%; padding: clamp(1rem, 3vw, 2rem); }
.heft-probe__blatt {
  --karo-maske: linear-gradient(#000, #000);
  display: grid; gap: 1.1rem; width: min(100%, 27rem); padding: 1.25rem 1.5rem 1.4rem; text-align: left;
  background: var(--color-surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.heft-probe__aufgabe { font-size: var(--fs-hilfe); line-height: 1.45; color: var(--text-secondary); text-wrap: pretty; }
.heft-probe__loesung { display: block; min-width: 0; }
/* SVGs im Blatt behalten ihre eigene Größe (width/height-Attribute) gegen die Motiv-Regel width: 50 % */
.st-karte--leit .st-karte__motiv .heft-probe svg { width: auto; max-width: 100%; height: auto; }
/* Informatik-Ausschnitt (2026-10-23): Zeile(n) tippen sich wie im Editor, danach Ergebnis mit grünem Haken.
   Code-Block = Container im Blatt (--radius-lg); Platzhalter hält die Höhe, getippter Text liegt darüber. */
.heft-probe__code {
  display: grid; gap: 0.15rem; padding: 0.65rem 0.85rem; font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.5;
  background: var(--color-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text);
}
.hp-zeile { display: grid; white-space: pre-wrap; overflow-wrap: anywhere; }
.hp-platz, .hp-getippt { grid-area: 1 / 1; }
.hp-platz { visibility: hidden; }
.hp-getippt.ist-cursor::after { content: ""; display: inline-block; width: 0.55em; height: 1.1em; margin-left: 1px; vertical-align: -0.2em; background: var(--akzent-blau); opacity: 0.7; }
.heft-probe__ergebnis { display: flex; align-items: center; gap: 0.55rem; min-height: 1.6rem; font-size: var(--fs-hilfe); color: var(--text);
  opacity: 0; transition: opacity 400ms ease; }
.heft-probe--code.ist-fertig .heft-probe__ergebnis { opacity: 1; }
.hp-haken { flex: none; overflow: visible; }
.hp-haken path, .hp-spur { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms cubic-bezier(0.45, 0.05, 0.3, 1) 150ms; }
.hp-haken path { stroke: var(--color-success); stroke-width: 2; transition-duration: 320ms; transition-delay: var(--hp-haken, 150ms); }
.ist-fertig .hp-haken path, .ist-fertig .hp-spur { stroke-dashoffset: 0; }
.heft-probe--code:has(.hp-feldreihe, .hp-quadrat) { --hp-haken: 1100ms; }
.hp-text { font-weight: var(--fw-mittel); }
.hp-feldreihe, .hp-quadrat { display: block; overflow: visible; }
.hp-zelle { fill: var(--color-surface); stroke: color-mix(in srgb, var(--text) 22%, transparent); }
.hp-spur { stroke: color-mix(in srgb, var(--akzent-blau) 70%, transparent); stroke-width: 1.5; }
.hp-wand { stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.hp-roboter { fill: var(--akzent-blau); transition: transform 900ms cubic-bezier(0.45, 0.05, 0.3, 1) 150ms; }
.ist-fertig .hp-feldreihe .hp-roboter { transform: translateX(calc(var(--n) * 24px)); }
.hp-roboter--fest { transition: none; }
.hp-h1 { font-size: 1.35rem; font-weight: var(--fw-titel); letter-spacing: -0.01em; }
.hp-rot { color: var(--akzent-koralle); }
.hp-link { color: var(--link); text-decoration: underline; text-underline-offset: 0.2em; }
.hp-farbfeld { display: block; width: 7rem; height: 2.2rem; border-radius: var(--radius-sm); background: var(--akzent-koralle); }
.hp-reihe { display: flex; gap: 0.5rem; }
.hp-reihe i { display: block; width: 2.6rem; height: 1.1rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--akzent-blau) 22%, var(--color-surface)); border: 1px solid var(--border); }
@media (prefers-reduced-motion: reduce) { .heft-probe__ergebnis, .hp-haken path, .hp-spur, .hp-roboter { transition: none; } }
/* Stiftstrich: Pfeil vom Text der Leitkarte hinüber zum Heftausschnitt, nur im zweispaltigen Aufbau */
.st-karte--leit, .s2-karte--leit { position: relative; }
/* Seit 2026-10-23 eigene Gridzeile „pfeil“ zwischen Text und Statuszeile statt absoluter Lage über der Statuszeile (dort überdeckte
   er „0 / 5 gemeistert“): rechtsbündig in der Textspalte, ragt nur in den leeren oberen Innenabstand der Statuszeile (1rem < 1,25rem),
   Status, Themenzahl und Balken bleiben frei. Zeilen und Bereiche: .st-karte--leit hier, .s2-karte--leit in start3.css */
.st-karte__pfeil { grid-area: pfeil; justify-self: end; align-self: end; width: 80px; height: auto; margin: 0 1rem -1rem 0; position: relative; z-index: 1; }
@media (max-width: 1000px) { .st-karte__pfeil { display: none; } }

/* Wissensprüfung als breite Karte im selben Stil */
.st-pruefung .boss { border-radius: var(--radius-flaeche); box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent), 0 2px 6px color-mix(in srgb, var(--text) 5%, transparent); }
.st-pruefung.is-ready .boss { border-color: color-mix(in srgb, var(--color-primary) 55%, var(--border)); }
.st-pruefung:not(.is-ready) .boss__art img { filter: saturate(0.75); }
/* Zuschnitt (2026-10-22): die Hüter stehen im Bild (720 px) unten, das obere Viertel ist leer – Bildfläche 4 : 3 unten verankert,
   dadurch erscheint die Figur rund 20 % größer; der Wasser-Hüter füllt das ganze Quadrat und bleibt quadratisch.
   Bild absolut gesetzt und auf die Figur zugeschnitten (Figur im Bild x 18–702, y ≥ 200 bis 701): 105,3 % breit, um 2,6 % nach links
   und um den leeren Rand unten (19 px = 2,64 %) nach unten verschoben – Füße bleiben drin, die Figur sitzt oben bündig ohne Leerraum */
.st-pruefung .boss { grid-template-columns: 220px 1fr; }
.st-pruefung .boss__art { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.st-pruefung .boss__art img { position: absolute; left: -2.6%; bottom: 0; width: 105.3%; height: auto; max-width: none; max-height: none; transform: translateY(2.64%); }
.st-pruefung .boss[data-element="wasser"] .boss__art { aspect-ratio: 1; }
@media (max-width: 640px) { .st-pruefung .boss { grid-template-columns: 1fr; } .st-pruefung .boss__art { width: 200px; } }
.st-pruefung .boss__text h2 { margin: 0 0 0.3rem; font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem); font-weight: var(--fw-titel); letter-spacing: -0.015em; }
.st-pruefung .boss__text .eyebrow { margin-bottom: 0.3rem; }

@media (max-width: 900px) {
  .st-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .st-karte--leit { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "motiv" "text" "unten"; }
  .st-karte--leit .st-karte__motiv { margin: 6px 6px 0; min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .st-raster { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* Ruhigerer Kopf der Stufenseiten und Mathe-Stufen (2026-11-01): niedriger, damit die Inhalte früher sichtbar sind */
.st-band--kopf { padding-top: clamp(1rem, 2.5vw, 2rem); padding-bottom: clamp(1rem, 2vw, 1.5rem); }
.st-band--kopf .st-titel { font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); }
.st-band--kopf .st-lead { margin-top: 0.75rem; font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.2rem); }
.st-band--kopf .st-stand { margin-top: 1rem; }
.st-band--kopf .st-wege { margin-top: 0.4rem; }
.st-band--kopf .st-leit { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.st-kapitel--einzeln + .st-kapitel { margin-top: clamp(2.5rem, 4.5vw, 3.5rem); }