/* ==========================================================
   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;
}

/* ---------- Hell (Variante C, 2026-10-19): warmes Off-White, Grün als Primäraktion, Blau für Links/Navigation ----------
   Seite #F5F4F0 (bis 2026-10-19 #F7F6F2) · Flächen #FFF · Sekundärflächen #F0EFEA · Text #19212B · Rahmen #D8DAD8 · Primär #176B5B · Links #245D91.
   Kontraste (WCAG AA): Text 15 : 1 · Sekundärtext 5,0 : 1 · Weiß auf Primär 6,2 : 1 · Link 6,3 : 1 (jeweils auf #F7F6F2).
   Alle Farb-Tokens dieses Blocks werden im Dunkelmodus überschrieben → Änderungen hier betreffen nur Hell. */
:root {
  --color-bg: #f5f4f0;              /* warmes Off-White, nicht beige (2026-10-20 einen Hauch dunkler: weiße Karten heben sich klarer ab) */
  --color-bg-soft: #f0efea;         /* Sekundärflächen, Abschnittswechsel, Footer, Flächen in Applets */
  --color-bg-deep: #e8e7e1;         /* Bildflächen, Fortschritts-Spur */
  --color-surface: #ffffff;         /* Hauptflächen (Karten, Aufgaben, Dialoge) */
  --color-surface-raised: #f4f3ef;  /* sekundäre Flächen in einer Fläche (Optionen, Tipps) */
  --color-border: #d3d5d1;          /* Iteration 2: klarer erkennbar */
  --color-border-strong: #aeb2ae;   /* z. B. Sekundär-Knopf */
  --color-divider: #e3e3de;         /* dezente Trennlinien in Listen und Abschnitten */
  --color-text: #19212b;
  --color-text-secondary: #353d45;  /* Beschreibungen, Hilfstexte mit Gewicht (9,9 : 1) */
  --color-text-muted: #575f67;      /* Metadaten, Brotkrumen, Mono-Labels: 6,0 : 1 auf #F7F6F2, 5,3 : 1 auf #F0EFEA */

  --color-primary: #176b5b;         /* Primäraktion: gedecktes Grün (Weiß darauf 6,2 : 1) */
  --color-primary-strong: #115244;
  --color-primary-soft: #e4efea;
  --color-on-primary: #ffffff;
  --color-link: #245d91;            /* Links, Navigation, aktiver Lernkontext */
  --color-link-soft: #e7eef5;
  --color-electric: #176b5b;        /* 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 = Interaktionsblau (Design System 2.0, Variante 2: Türkis gehört dem Lernfortschritt) */
  --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) 92%, transparent);
  /* 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(--color-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;
  --welt-bg: #eef0f3;
  --welt-linie: #d3d8e0;

  color-scheme: light;
}

/* ---------- Dunkel (Grundlook, Variante C 2026-10-19): neutrales Anthrazit wie ein Code-Editor, kein Marineblau ----------
   Seite #15191C · Flächen #1E2428 · Sekundär #272D31 · Text #F1F2EF · Rahmen #3A4246 · Primär Mint #75C9AD · Links #85BCE8.
   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 {
  --color-bg: #15191c;
  --color-bg-soft: #1b2023;   /* sichtbarer Abschnittswechsel (section--soft) */
  --color-bg-deep: #101315;
  --color-surface: #20262a;   /* Iteration 2: Karten klarer vom Seitenhintergrund getrennt */
  --color-surface-raised: #2a3135; /* Arbeitsflächen, Hover, aktive Navigation */
  --color-border: #3c4549;
  --color-border-strong: #566065;
  --color-divider: #30383c;
  --color-text: #f1f2ef;
  --color-text-secondary: #d0d5d6;
  --color-text-muted: #aab3b7;
  --color-primary: #75c9ad;
  --color-primary-strong: #9addc6;
  --color-primary-soft: #213430;
  --color-on-primary: #10201b;
  --color-link: #85bce8;
  --color-link-soft: #222f3a;
  --color-electric: #75c9ad;
  --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;
  --ikon-petrol: #65bdb5;
  --ikon-salbei: #83b995;
  --ikon-bernstein: #d5a052;
  --ikon-lavendel: #a994cb;
  --ikon-schiefer: #7fa5bf;
  --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(117 201 173 / 0.14);
  --rays: rgb(200 210 205 / 0.03);
  --rays-karte: var(--rays);
  --panel-bg: var(--color-surface);
  --panel-border: var(--color-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) 94%, transparent);
  --code-bg: #101315;
  --welt-bg: #cdd3dc;
  --welt-linie: #b5bcc8;
  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-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);
  --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);
  --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 (Variante C, 2026-10-19): konsequent rechteckig – Controls 3, Karten/Aufgaben/Container 4.
     --radius-pill ist seit Variante C 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-lg: 4px;
  --radius-pill: 4px;
  --radius-rund: 999px;
  /* 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: 4.5rem;
  --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.25rem;           /* Innenabstand von Flächen */
  --control-h: 44px;                /* Knöpfe, Eingaben: Touchfläche */
  --control-h-klein: 36px;

  /* Bewegung */
  --transition-fast: 150ms ease;
  --transition-normal: 280ms ease;
  --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), IBM Plex Mono als Akzent (--font-label) für Eyebrows,
     Kapitel-/Reihennummern, Stufenkennungen und Zahlen wie „225 / 250 XP“ – nie für längere Texte.
     --font-mono bleibt 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: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --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 */
  --fs-h1: clamp(2rem, 1.4rem + 1.6vw, 2.5rem);        /* 32–40 px  Seitenüberschrift */
  --fs-h2: clamp(1.5rem, 1.25rem + 0.7vw, 1.75rem);    /* 24–28 px  Bereichsüberschrift */
  --fs-h3: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem);   /* 18–21 px  Komponentenüberschrift */
  --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 */
  --fw-normal: 400;
  --fw-mittel: 500;
  --fw-halbfett: 650;
  --fw-fett: 750;
  --lh-lern: 1.7;
  --lh-ui: 1.35;
  --lh-titel: 1.15;
  --lesebreite: 70ch;          /* angenehme Zeilenlänge für längere Lerntexte */
  /* 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: 64px;

  /* 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;
  /* Icon-System (2026-10-19): gedämpfte semantische Akzente, im Hellen dunkler gesetzt (Kontrast ≥ 3 : 1 auf Off-White) */
  --icon-strich: 1.75;
  --ikon-petrol: #2c837b;
  --ikon-salbei: #4b835a;
  --ikon-bernstein: #9c6a22;
  --ikon-lavendel: #745d9f;
  --ikon-schiefer: #46708e;
  --ikon-koralle: #a35647;
  --ikon-fehler: #b4453b;
  /* Die fünf Elemente (Elementarhüter, Tierkreis-Runde): gedeckt, in beiden Modi gleich */
  --element-holz: #4f9a5c;
  --element-feuer: #d4553a;
  --element-erde: #b98a45;
  --element-metall: #8f99a8;
  --element-wasser: #2f8fbf;
  --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-md);
  --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.65;
  -webkit-font-smoothing: antialiased;
  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, Stärke nur zwei Stufen: H1 fett, H2–H4 halbfett */
h1 { font-size: var(--fs-h1); font-weight: var(--fw-fett); letter-spacing: -0.025em; line-height: var(--lh-titel); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-halbfett); letter-spacing: -0.02em; line-height: 1.22; }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-halbfett); letter-spacing: -0.01em; line-height: 1.3; }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-halbfett); line-height: 1.35; }
p { margin: 0 0 1em; text-wrap: pretty; }
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; }
/* 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; }
}

/* ---------- 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); }
.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-secondary); margin-bottom: 0.75rem;
}

/* ---------- 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, 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.2em; border-radius: var(--radius-sm); 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);
}
.btn:hover { background: var(--interactive-hover); color: var(--btn-fg); }
.btn:active { background: var(--interactive-hover); filter: brightness(0.94); }
.btn--ghost, .btn--cyan { --btn-bg: transparent; --btn-fg: var(--text); --btn-rand: var(--border-strong); }
.btn--ghost:hover, .btn--cyan:hover { background: var(--surface-elevated); color: var(--text); border-color: var(--interactive-primary); }
.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-md);
  box-shadow: none;
}
.card { padding: 1.5rem; }
/* 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. */
.segment { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--border); }
.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-sm);
  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(--surface); color: var(--text); font-weight: var(--fw-halbfett); box-shadow: inset 0 -2px 0 var(--nav-aktiv), 0 0 0 1px var(--border);
}
.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); }

/* ---------- Geometrisches Hintergrundsystem (Iteration 3, 2026-10-19) ----------
   EIN Muster für die Motivations- und Kopfbereiche: feine 45°-Linien mit großem Abstand, zwei dünne Kreisbögen, optional Rasterpunkte.
   Reines CSS (keine Bilddatei), Farbe aus --muster-linie (Hell: helles Neutralgrau, Dunkel: etwas helleres Anthrazit) – fällt erst
   beim genauen Hinsehen auf. Liegt als ::before hinter dem Inhalt (pointer-events: none) und läuft zur Textseite hin aus.
   Einsatz: Startseiten-Hero, Stufenkopf, Begleiter-Hauptkarte, Kopf der Kartensammlung, Spiele-Übersicht, Belohnungsmomente.
   NIE hinter Lerntexten, Aufgaben, Code-Editoren, Eingaben, Applets, Tabellen oder Diagrammen.
   Varianten: .muster-geo--voll (ganze Fläche, z. B. Karte), .muster-geo--punkte (zusätzlich Rasterpunkte), .muster-geo--ohne-kreis.
   .muster-raster ist der alte Name (Startseite, Stufenkopf) und zeigt dasselbe Muster. */
:root { --muster-staerke: 6%; }
:root[data-theme="dark"], .thema-dunkel { --muster-staerke: 5%; }
.muster-geo, .muster-raster { position: relative; isolation: isolate; }
.muster-geo::before, .muster-raster::before, .stufe-hero::before {
  /* Bausteine hier (nicht auf :root), damit Position/Abstand je Bereich überschreibbar bleiben */
  --muster-linie: color-mix(in srgb, var(--color-text) var(--muster-staerke), transparent);
  --muster-punkt: color-mix(in srgb, var(--color-text) calc(var(--muster-staerke) * 1.6), transparent);
  --muster-kreise:
    radial-gradient(circle at var(--muster-x, 84%) var(--muster-y, 38%), transparent 0 149.5px, var(--muster-linie) 150px 151px, transparent 151.5px 229.5px,
      var(--muster-linie) 230px 231px, transparent 231.5px);
  --muster-linien: repeating-linear-gradient(45deg, transparent 0 calc(var(--muster-abstand, 36px) - 1px), var(--muster-linie) calc(var(--muster-abstand, 36px) - 1px) var(--muster-abstand, 36px));
  --muster-punkte: radial-gradient(circle, var(--muster-punkt) 0 1px, transparent 1.5px);
  content: ""; position: absolute; z-index: -1; inset: 0 0 0 auto; width: min(58%, 760px); pointer-events: none;
  background-image: var(--muster-kreise), var(--muster-linien);
  -webkit-mask: linear-gradient(90deg, transparent, #000 60%); mask: linear-gradient(90deg, transparent, #000 60%);
}
.muster-geo--voll::before { inset: 0; width: auto; -webkit-mask: none; mask: none; border-radius: inherit; }
.muster-geo--punkte::before { background-image: var(--muster-kreise), var(--muster-punkte), var(--muster-linien); background-size: auto, 24px 24px, auto; }
.muster-geo--ohne-kreis::before { background-image: var(--muster-linien); }
@media (max-width: 900px) {
  .muster-geo::before, .muster-raster::before, .stufe-hero::before { width: 100%; --muster-x: 92%; --muster-y: 20%; -webkit-mask: linear-gradient(90deg, transparent 20%, #000); mask: linear-gradient(90deg, transparent 20%, #000); }
  .muster-geo--voll::before { -webkit-mask: none; mask: none; }
}
@media print { .muster-geo::before, .muster-raster::before, .stufe-hero::before { display: none; } }

/* ---------- Randmuster links/rechts (2026-10-20, Vorbild: Pokémon-Website) ----------
   Ton in Ton: nahtlose Kachel 480 × 480 aus 14 parallelen 45°-Bahnen (24 px Abstand), Linien in fünf festen Breiten
   (2/4/8/20–28 px), drei Ringe als Knoten, ein Punkt. Reines CSS: Kachel als Maske, Farbe aus --rm-farbe (Textfarbe mit wenig Deckkraft).
   Zweite Maske blendet die Mitte aus, das Muster läuft zum Inhalt hin weich aus. Auf allen Seiten außer Lernseiten: js/site.js setzt data-rand-muster an <main id="inhalt"> (Ausnahmen dort).
   Kachel ändern: Bahnen in .claude/rand-kachel.mjs anpassen, `node .claude/rand-kachel.mjs`, ausgegebene url(...) bei --rm-kachel einsetzen. */
main[data-rand-muster] { position: relative; isolation: isolate; }
main[data-rand-muster]::before {
  --rm-farbe: color-mix(in srgb, var(--color-text) 5%, transparent);
  --rm-breite: clamp(260px, calc((100% - var(--maxw-weit)) / 2 + 160px), 620px);
  --rm-kachel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480'%3E%3Cg id='m' fill='none' stroke='%23000'%3E%3Cpath d='M40 -22.86L300 -282.86' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M0 85.71L108.69 -22.97' stroke-width='2'/%3E%3Cpath d='M131.31 -45.6L480 -394.29' stroke-width='2'/%3E%3Ccircle cx='120' cy='-34.29' r='11' stroke-width='3'/%3E%3Ccircle cx='120' cy='-34.29' r='4' fill='%23000' stroke='none'/%3E%3Cpath d='M320 -200L560 -440' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M170 18.57L470 -281.43' stroke-width='28' stroke-linecap='round'/%3E%3Cpath d='M-60 282.86L118.69 104.17' stroke-width='2'/%3E%3Ccircle cx='130' cy='92.86' r='11' stroke-width='3'/%3E%3Ccircle cx='130' cy='92.86' r='4' fill='%23000' stroke='none'/%3E%3Cpath d='M0 291.43L480 -188.57' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M250 75.71L430 -104.29' stroke-width='2'/%3E%3Ccircle cx='250' cy='75.71' r='6' fill='%23000' stroke='none'/%3E%3Cpath d='M380 14.29L650 -255.71' stroke-width='20' stroke-linecap='round'/%3E%3Cpath d='M0 428.57L318.69 109.89' stroke-width='2'/%3E%3Cpath d='M341.31 87.26L480 -51.43' stroke-width='2'/%3E%3Ccircle cx='330' cy='98.57' r='11' stroke-width='3'/%3E%3Ccircle cx='330' cy='98.57' r='4' fill='%23000' stroke='none'/%3E%3Cpath d='M90 372.86L230 232.86' stroke-width='4'/%3E%3C/g%3E%3Cuse href='%23m' x='-960' y='-960'/%3E%3Cuse href='%23m' x='-960' y='-480'/%3E%3Cuse href='%23m' x='-960' y='0'/%3E%3Cuse href='%23m' x='-960' y='480'/%3E%3Cuse href='%23m' x='-960' y='960'/%3E%3Cuse href='%23m' x='-480' y='-960'/%3E%3Cuse href='%23m' x='-480' y='-480'/%3E%3Cuse href='%23m' x='-480' y='0'/%3E%3Cuse href='%23m' x='-480' y='480'/%3E%3Cuse href='%23m' x='-480' y='960'/%3E%3Cuse href='%23m' x='0' y='-960'/%3E%3Cuse href='%23m' x='0' y='-480'/%3E%3Cuse href='%23m' x='0' y='480'/%3E%3Cuse href='%23m' x='0' y='960'/%3E%3Cuse href='%23m' x='480' y='-960'/%3E%3Cuse href='%23m' x='480' y='-480'/%3E%3Cuse href='%23m' x='480' y='0'/%3E%3Cuse href='%23m' x='480' y='480'/%3E%3Cuse href='%23m' x='480' y='960'/%3E%3Cuse href='%23m' x='960' y='-960'/%3E%3Cuse href='%23m' x='960' y='-480'/%3E%3Cuse href='%23m' x='960' y='0'/%3E%3Cuse href='%23m' x='960' y='480'/%3E%3Cuse href='%23m' x='960' y='960'/%3E%3C/svg%3E");
  --rm-seiten: linear-gradient(90deg, #000 0, #000 calc(var(--rm-breite) * 0.45), transparent var(--rm-breite),
    transparent calc(100% - var(--rm-breite)), #000 calc(100% - var(--rm-breite) * 0.45), #000 100%);
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--rm-farbe);
  -webkit-mask: var(--rm-kachel) 0 0 / 480px 480px repeat, var(--rm-seiten);
  -webkit-mask-composite: source-in;
  mask: var(--rm-kachel) 0 0 / 480px 480px repeat, var(--rm-seiten);
  mask-composite: intersect;
}
:root[data-theme="dark"] main[data-rand-muster]::before, .thema-dunkel main[data-rand-muster]::before { --rm-farbe: color-mix(in srgb, var(--color-text) 4%, transparent); }
@media (max-width: 1100px) { main[data-rand-muster]::before { display: none; } }
@media print { main[data-rand-muster]::before { display: none; } }
/* Kopfbereiche lassen das Randmuster durchscheinen und zeigen ihr eigenes Rastermotiv dann nicht mehr (sonst zwei Muster übereinander) */
@media (min-width: 1101px) {
  main[data-rand-muster] .stufe-hero, main[data-rand-muster] .s2-hero { background: transparent; }
  main[data-rand-muster] .stufe-hero::before, main[data-rand-muster] .muster-raster::before { display: none; }
}

/* 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 0.6s ease;
}
/* 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.8rem 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; }
.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; }
/* Iteration 3: rundes Ausschnitt-Muster hinter den Figuren (Kreise mittig, kleiner Radius über --muster-abstand) */
.entw-feier__buehne.muster-geo::before { inset: -18%; --muster-x: 50%; --muster-y: 50%; border-radius: 50%;
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent); mask: radial-gradient(closest-side, #000 55%, transparent); }
.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 Teil A js/mathe.js) */
.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--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; }

/* Schreibfläche für Rechnungen mit dem Apple Pencil (js/schreibflaeche.js; Mathe Teil C Heftaufgaben, Trainer, Probearbeit) */
.sf-schalter { margin: var(--space-3) 0; }
.sf-schalter__knopf .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; }
.sf[hidden] { display: none; }
.sf__leiste { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding: 0.4rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface-raised); }
.sf__gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.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-sm);
  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; }
/* Karopapier (5-mm-Kästchen wie im Heft), Farben aus den Tokens */
.sf__blatt { position: relative; width: 100%; cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  background-color: var(--color-surface);
  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; }
.sf__oben { pointer-events: 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; }
@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; } }