/* Teil von DER · DIE · DAS — https://der-die-das-ananas.com/
   Reine CSS-Datei, kein Praeprozessor: wird per <link rel="stylesheet">
   geladen, funktioniert deshalb unveraendert lokal (file://) und auf
   Netlify. */

  /* ============================================================
     GRUNDEINSTELLUNGEN / DESIGN-SYSTEM
     ============================================================ */
  :root {
    /* Design-Angleichung an die Ananas-Vorlage (Next.js-Startseite):
       warmweißer Hintergrund, dunkles, fast schwarzes Ink statt
       Blaugrau, wärmere Grautöne, schwarze Buttons/Akzente statt
       Graublau. --brand-green/--brand-red/--brand-yellow sind die
       Markenfarben 1:1 aus der Vorlage (globals.css), für Akzente,
       Icon-Badges, Karten-Farbtöne und Dekor gedacht. */
    --bg: #fffefb;
    --paper: #fffefb;
    /* --card ist das reine Weiß der Karten. Es war vorher ueberall als
       #fff fest eingebaut. Als eigene Variable, weil es im dunklen
       Modus etwas HELLER sein muss als der Hintergrund, waehrend es im
       hellen Modus etwas DUNKLER wirkt als --bg. Zwei Rollen, die man
       nicht mit derselben Farbe abdecken kann. */
    --card: #ffffff;
    /* Die Flaeche hinter den schwebenden Karten. War als #faf9f5 fest
       eingebaut und hat deshalb den dunklen Modus komplett ausgehebelt:
       der Kopf wurde dunkel, die Seite blieb hell. */
    /* ============================================================
       HINTERGRUNDBILDER (Kundenwunsch 06.09.2026)
       ============================================================
       Bo hat vier Bilder gezeichnet: je eines fuer den
       Willkommen-Bildschirm und fuer die Lernbereiche, jeweils
       hell und dunkel.

       ALS VARIABLE, nicht fest im Selektor -- sonst muesste die
       Regel unten dreimal dastehen (hell, Geraet dunkel, Knopf
       dunkel) und beim naechsten Bild vergisst man eine
       (Fehlerliste O2 / Punkt 101).

       WARUM WEBP: Bos Vorlagen sind 4K-PNG mit 3,5 bis 4,5 MB.
       Als WebP sind es 38 bis 49 KB -- rund hundertmal kleiner,
       bei gleicher Groesse (3840 x 2160) und ohne sichtbaren
       Verlust. Am 06.09.2026 wurde der Start von 1,91 MB auf
       0,30 MB gebracht; ein 4-MB-Hintergrund haette das
       zunichte gemacht.
       Kann ein sehr alter Browser kein WebP, bleibt einfach die
       Flaechenfarbe stehen -- nichts geht kaputt.
       ============================================================ */
    --hg-start:    url("/assets/hintergrund/hintergrund-start-hell.webp");
    --hg-bereiche: url("/assets/hintergrund/hintergrund-bereiche-hell.webp");

    --flaeche: #faf9f5;
    --text: #181818;
    /* Schrift auf den schwarzen Hauptknoepfen. Im dunklen Modus werden
       diese Knoepfe hell, dann muss die Schrift dunkel werden --
       deshalb eine eigene Variable statt festem #fff. */
    --accent-text: #ffffff;
    /* Barrierefreiheit (Phase 6, weiterhin gültig): --muted, --muted-2
       und --green-text/--red-text bleiben gegenüber weißem/warmweißem
       Hintergrund auf mindestens 4.5:1 Kontrast (WCAG AA für normalen
       Fließtext) — die reinen Markenfarben --brand-green/--brand-yellow
       bestehen diesen Test für Fließtext NICHT (nur 3.2:1 bzw. 1.7:1)
       und werden deshalb bewusst nur dekorativ (Icons, Badges, Punkte,
       Kartenfarbtöne), nie als Textfarbe, eingesetzt. */
    --muted: #6b6b6b;
    --muted-2: #565656;
    --border: #e8e5df;
    --btn-bg: #fafaf8;
    --btn-border: #e4e1db;
    --btn-hover: #f2f0ea;
    --btn-active: #e9e6de;
    --accent: #1c1c1c;
    --accent-hover: #333333;

    --brand-green: #08a63c;
    --brand-red: #ec1023;
    --brand-yellow: #ffb800;

    --green-bg: #e8f8ee;
    --green-border: #34a853;
    --green-text: #1a7c36;

    --red-bg: #fdecec;
    --red-border: #e5484d;
    --red-text: #c62828;

    /* ============================================================
     DAS SEITENMASS -- EINE STELLE FUER DIE GANZE SEITE
     ============================================================
     Kundenwunsch 05.09.2026 (Design-Audit): "The website should
     look like one professionally designed system."

     Vorher hatte jeder Bildschirm seine eigene Zahl. Gemessen bei
     1440 px gab es SECHS verschiedene Startpunkte fuer die
     Ueberschrift (61, 161, 193, 221, 303, 598) und VIER
     Inhaltsbreiten (860, 1080, 1120, 1200, dazu 1400 in der App).

     Jetzt gibt es zwei Zahlen, und alles rechnet damit.

     DIESELBEN NAMEN UND WERTE STEHEN IN wort.css.
     Wer eine Zahl aendert, aendert BEIDE Dateien -- sonst laufen
     App und feste Seiten wieder auseinander.
     ============================================================ */
  --seite-max: 1120px;
  --seite-pad: clamp(14px, 4vw, 40px);

  /* Abstands-Leiter. Keine krummen Einzelwerte mehr. */
  --abstand-xs: 4px;
  --abstand-s: 8px;
  --abstand-m: 16px;
  --abstand-l: 24px;
  --abstand-xl: 32px;
  --abstand-2xl: 48px;

  /* Ueberschriften. Eine Groesse fuer alle Seitentitel.
     Der Willkommens-Hero behaelt bewusst seine eigene, groessere
     Schrift -- das ist ein Werbebild, keine Inhaltsseite. */
  --titel-gross: clamp(28px, 5vw, 40px);
  --titel-mittel: clamp(21px, 3vw, 26px);

  /* ============================================================
     SEITENKOPF -- Ueberschrift und Unterzeile oben auf der Seite.
     ============================================================
     Kundenwunsch 05.09.2026: "these textes must look similar and
     please let some space to top and bottom of them".
     Gemessen war der Abstand Kopfleiste -> Ueberschrift vorher:
       /alphabet/            8 px
       /lernen-von-null/     8 px
       Geschichtenseite      8 px
       #alltag              36 px  (dazu ein gruener Kasten)
       /hoeren-und-lesen/   40 px
       /spielen/            40 px
       Fach-Auswahl         52 px
     Fuenf verschiedene Werte. Jetzt gilt ueberall dasselbe.

     DIESELBEN DREI WERTE STEHEN IN wort.css.
     Wer einen aendert, aendert beide -- sonst laufen App und feste
     Seiten wieder auseinander (Fehlerliste O16, Q10).
     ============================================================ */
  --kopf-oben: 48px;    /* Kopfleiste   -> Ueberschrift */
  --kopf-mitte: 10px;   /* Ueberschrift -> Unterzeile   */
  --kopf-unten: 32px;   /* Unterzeile   -> erster Block */

  --radius-pill: 999px;
    /* 07.09.2026 von 28 auf 16 px (Bo: "too curvy, too big radius").
       Diese eine Zahl bestimmt die Ecken ALLER Karten im Lernspiel:
       die Spielkarten, die Bereichskarten und vor allem die
       Fachkarten in jedem Spiel (.chapter-card).
       DIESELBE ZAHL STEHT IN wort.css -- dort gilt sie fuer die
       festen Seiten (Geschichten, Kurse, /spielen/, /bereiche/).
       Wer eine aendert, muss die andere mitaendern, sonst haben
       Lernspiel und feste Seiten verschieden runde Ecken. */
    --radius-card: 16px;
    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 10px;

    --shadow-btn: 0 3px 12px rgba(24, 24, 24, 0.05);
    --shadow-btn-hover: 0 10px 24px rgba(24, 24, 24, 0.09);
    --shadow-card: 0 18px 40px rgba(31, 40, 24, 0.07);

    /* Die drei leichten Schatten, die vorher als feste rgba-Werte im
       ganzen Blatt standen. Im dunklen Modus muessen sie kraeftiger
       sein, sonst sieht man sie auf dunklem Grund gar nicht. */
    --schatten-fein: rgba(16, 24, 40, 0.04);
    --schatten-mittel: rgba(16, 24, 40, 0.06);
    --schatten-stark: rgba(16, 24, 40, 0.18);

    /* Farben der Lernbereich-Karten. Stehen als Variablen hier,
       damit sie im dunklen Modus umgeschaltet werden koennen --
       vorher waren sie fest im Blatt und die Karten blieben nachts
       hell, mit unlesbarer Schrift darauf. */
    --k-artikel-bg: #eef9f1;
    --k-artikel-rand: #cdeed9;
    --k-artikel-bgh: #e4f4e9;
    --k-artikel-randh: #bfe6cd;
    --k-artikel-akzent: #1a7c36;
    --k-vokabel-bg: #fffaf0;
    --k-vokabel-rand: #f3e2b8;
    --k-vokabel-bgh: #fff5e3;
    --k-vokabel-randh: #ecd8a3;
    --k-vokabel-akzent: #b7791f;
    --k-plural-bg: #f2f7ff;
    --k-plural-rand: #cfe1fb;
    --k-plural-bgh: #e8f1ff;
    --k-plural-randh: #bcd6f8;
    --k-plural-akzent: #1a5fb4;
    --k-satzbau-bg: #fef5f4;
    --k-satzbau-rand: #f6d6d2;
    --k-satzbau-bgh: #fdebe9;
    --k-satzbau-randh: #f0c6c1;
    --k-satzbau-akzent: #c62828;
    --k-verben-bg: #fff6ef;
    --k-verben-rand: #f7ddc6;
    --k-verben-bgh: #ffefe2;
    --k-verben-randh: #f2d0b3;
    --k-verben-akzent: #c2620f;
    --k-fall-bg: #f5f6f7;
    --k-fall-rand: #dcdfe4;
    --k-fall-bgh: #eef0f2;
    --k-fall-randh: #cdd2d8;
    --k-fall-akzent: #5a5f66;
    --k-praep-bg: #dff3f1;
    --k-praep-rand: #b3ddd7;
    --k-praep-bgh: #d2eeeb;
    --k-praep-randh: #9cd3cb;
    --k-praep-akzent: #0f766e;
    --k-adj-bg: #f0e9fa;
    --k-adj-rand: #d6c6ee;
    --k-adj-bgh: #e8ddf7;
    --k-adj-randh: #c8b3e7;
    --k-adj-akzent: #8b39ab;
    --k-perfekt-bg: #fce9f3;
    --k-perfekt-rand: #f3c8de;
    --k-perfekt-bgh: #fbdeed;
    --k-perfekt-randh: #eeb4d1;
    --k-perfekt-akzent: #b0356f;
    --k-trennbar-bg: #eef6d9;
    --k-trennbar-rand: #d3e5a8;
    --k-trennbar-bgh: #e7f2c9;
    --k-trennbar-randh: #c6dc93;
    --k-trennbar-akzent: #4d7c0f;
    /* HOEREN: eigenes Blau-Tuerkis. Bewusst blauer als das Mint
       der Praepositionen, damit die zehn Karten unterscheidbar
       bleiben. */
    --k-hoeren-bg: #ddeff7;
    --k-hoeren-rand: #b3dced;
    --k-hoeren-bgh: #d0e9f4;
    --k-hoeren-randh: #9bd0e6;
    --k-hoeren-akzent: #0d6b7a;

    /* Buchstaben in den Karten-Symbolen. Die Kachel darunter ist
       var(--card) und wird nachts dunkel -- diese Farben muessen
       dann mitgehen, sonst verschwindet die Schrift. */
    --sym-die: #c62828;
    --sym-das: #b7791f;
    --sym-fall-den: #1a5fb4;
    --sym-fall-dem: #92600a;
    --sym-praep-dat: #1a5fb4;
    --sym-adj-e: #1a7c36;
    --sym-adj-en: #c2620f;
    --sym-perfekt-hat: #7a3fb0;
    --sym-perfekt-ge: #0d6b7a;
    --sym-trennbar-stamm: #16794a;
    --sym-trennbar-teil: #b5651d;

    /* "Vertrag widerrufen" im Fusszeilen-Bereich. Muss laut
       Ruecktrittsbelehrung hervorgehoben bleiben -- also auch
       nachts, nur eben in dunklen Toenen. */
    --widerruf-text: #7a5b00;
    --widerruf-bg: #fff8e6;

    /* Restliche Farbtoene, die vorher fest im Blatt standen. Sie
       mussten hierher, weil sonst einzelne Stellen (Freischalten,
       gesperrte Faecher, Eingabefelder) nachts hell geblieben
       waeren. HELL ist ueberall der alte Wert, auf das Haar genau. */
    --n-alle-bg: #fffaf0;
    --n-alle-rand: #f3e2b8;
    --n-aus: #c7cad0;
    --n-badge-alle-bg: #fdecc4;
    --n-badge-alle-text: #92600a;
    --n-balken: #d7dade;
    --n-fehler-bg: #fff6f5;
    --n-fehler-rand: #c0392b;
    --n-feld: #fafafa;
    --n-feld-2: #fcfcfd;
    --n-feld-hover: #f4f5f7;
    --n-flaeche-hell: #f1f2f4;
    --n-grau-a: #9aa0a6;
    --n-grau-b: #b3b8bd;
    --n-grau-c: #6b7076;
    --n-grau-d: #35383d;
    --n-grau-e: #8b9096;
    --n-grau-f: #5a5f66;
    --n-grau-g: #5c6169;
    --n-haken-bg: #e0f5e6;
    --n-hinweis-bg: #fdf6e3;
    --n-hinweis-rand: #f0e3c2;
    --n-hinweis-text: #6b5a1e;
    --n-kopf-schleier: rgba(255, 254, 251, 0.98);
    --n-kopf-schatten: 0 2px 14px rgba(0, 0, 0, 0.12);
    --n-rand: #e6e8eb;
    --n-rand-2: #e0e2e6;
    --n-rand-3: #cfd4da;
    --n-tinte: #14161a;
    --n-tinte-aktiv: #000000;
    --n-tinte-hover: #2a2e34;

    /* Warnknopf ("Ja, fortfahren"). Braucht eigene Farben: als
       Hintergrund taugt --red-text nachts nicht, das ist dann
       eine helle Schriftfarbe und der Knopf wurde blassrosa. */
    --gefahr-bg: #c62828;
    --gefahr-bg-hover: #a81f1f;
    --gefahr-text: #ffffff;

    color-scheme: light;
  }

  /* Auf schmalen Geraeten braucht die Kopfleiste den Platz (Pfeil,
     Logo, Name, Sprache, Ton, Hell/Dunkel). Der Rand wird enger --
     aber fuer KOPF UND INHALT GLEICHZEITIG, sonst stehen sie nicht
     mehr auf einer Linie. Genau das war vorher der Fehler:
     Kopf 12 px, Inhalt 20 px. DIESELBE REGEL in wort.css. */
  @media (max-width: 400px) {
    :root { --seite-pad: 12px; }
  }

  /* ================================================================
     DUNKLER MODUS  (Kundenwunsch 03.09.2026)
     ================================================================
     Drei Bloecke, und die Reihenfolge ist wichtig:

     1) :root oben   = der helle Modus. Ist der Normalfall.
     2) @media       = das GERAET steht auf dunkel und der Besucher hat
                       noch nichts selbst gewaehlt. Deshalb die Bremse
                       :not([data-theme="light"]) -- wer ausdruecklich
                       HELL gewaehlt hat, soll hell behalten, auch wenn
                       sein Handy dunkel steht.
     3) [data-theme] = der Besucher hat den Knopf gedrueckt. Steht
                       zuletzt und gewinnt deshalb immer.

     Gesetzt wird das Merkmal data-theme am <html>-Element, ganz frueh
     im <head> von index.html -- sonst blitzt beim Laden kurz die
     helle Seite auf.

     WICHTIG fuer spaetere Aenderungen: hier stehen NUR Variablen. Wer
     eine neue Farbe fest ins Blatt schreibt, bricht den dunklen Modus,
     ohne es zu merken -- die Stelle bleibt dann hell. Immer eine
     Variable benutzen.
     ---------------------------------------------------------------- */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --hg-start:    url("/assets/hintergrund/hintergrund-start-dunkel.webp");
      --hg-bereiche: url("/assets/hintergrund/hintergrund-bereiche-dunkel.webp");
      --bg: #14161a;
      --paper: #14161a;
      --card: #1c1f25;
      --flaeche: #101216;
      --text: #eceef0;
      --accent-text: #16181c;

      --muted: #a6adb5;
      --muted-2: #c6ccd3;
      --border: #2c313a;
      --btn-bg: #21252c;
      --btn-border: #353b44;
      --btn-hover: #2a2f37;
      --btn-active: #323944;
      --accent: #f0efec;
      --accent-hover: #ffffff;

      --green-bg: #13291d;
      --green-border: #3fbf67;
      --green-text: #7fe3a3;

      --red-bg: #2e171a;
      --red-border: #e5686d;
      --red-text: #ff9b9e;

      --shadow-btn: 0 3px 12px rgba(0, 0, 0, 0.45);
      --shadow-btn-hover: 0 10px 24px rgba(0, 0, 0, 0.55);
      --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.5);

      --schatten-fein: rgba(0, 0, 0, 0.35);
      --schatten-mittel: rgba(0, 0, 0, 0.45);
      --schatten-stark: rgba(0, 0, 0, 0.6);

      --k-artikel-bg: #16251c;
      --k-artikel-rand: #24402d;
      --k-artikel-bgh: #1b2e22;
      --k-artikel-randh: #2c4f38;
      --k-artikel-akzent: #6ee79a;
      --k-vokabel-bg: #262014;
      --k-vokabel-rand: #453a20;
      --k-vokabel-bgh: #2e2718;
      --k-vokabel-randh: #55482a;
      --k-vokabel-akzent: #f0c561;
      --k-plural-bg: #141c28;
      --k-plural-rand: #24344c;
      --k-plural-bgh: #192433;
      --k-plural-randh: #2c405e;
      --k-plural-akzent: #79b0f5;
      --k-satzbau-bg: #271819;
      --k-satzbau-rand: #452b2c;
      --k-satzbau-bgh: #301d1f;
      --k-satzbau-randh: #543537;
      --k-satzbau-akzent: #ff9b9e;
      --k-verben-bg: #261c14;
      --k-verben-rand: #443220;
      --k-verben-bgh: #2f2318;
      --k-verben-randh: #543d28;
      --k-verben-akzent: #f0a765;
      --k-fall-bg: #1c1f23;
      --k-fall-rand: #333941;
      --k-fall-bgh: #232830;
      --k-fall-randh: #3d444e;
      --k-fall-akzent: #b8c0ca;
      --k-praep-bg: #12241f;
      --k-praep-rand: #1f3d36;
      --k-praep-bgh: #172d27;
      --k-praep-randh: #274c43;
      --k-praep-akzent: #5fd6c4;
      --k-adj-bg: #1e1a29;
      --k-adj-rand: #342c48;
      --k-adj-bgh: #252037;
      --k-adj-randh: #413757;
      --k-adj-akzent: #c39bf0;
      --k-perfekt-bg: #271724;
      --k-perfekt-rand: #45283c;
      --k-perfekt-bgh: #301d2c;
      --k-perfekt-randh: #55324a;
      --k-perfekt-akzent: #f095c6;
      --k-trennbar-bg: #1d2313;
      --k-trennbar-rand: #333f1e;
      --k-trennbar-bgh: #242c18;
      --k-trennbar-randh: #3f4d26;
      --k-trennbar-akzent: #b5d167;
      --k-hoeren-bg: #12242b;
      --k-hoeren-rand: #1e3d47;
      --k-hoeren-bgh: #172d35;
      --k-hoeren-randh: #274d59;
      --k-hoeren-akzent: #6fc9db;

      --sym-die: #ff9b9e;
      --sym-das: #f0c561;
      --sym-fall-den: #79b0f5;
      --sym-fall-dem: #e0ac4a;
      --sym-praep-dat: #79b0f5;
      --sym-adj-e: #6ee79a;
      --sym-adj-en: #f0a765;
      --sym-perfekt-hat: #c39bf0;
      --sym-perfekt-ge: #5fd6c4;
      --sym-trennbar-stamm: #62d79d;
      --sym-trennbar-teil: #eda45e;

      --widerruf-text: #ffd76a;
      --widerruf-bg: #3a2f10;

      --n-alle-bg: #262014;
      --n-alle-rand: #453a20;
      --n-aus: #3c424b;
      --n-badge-alle-bg: #453a20;
      --n-badge-alle-text: #f0c561;
      --n-balken: #343941;
      --n-fehler-bg: #2e171a;
      --n-fehler-rand: #e5686d;
      --n-feld: #21252c;
      --n-feld-2: #1a1d22;
      --n-feld-hover: #2a2f37;
      --n-flaeche-hell: #262a31;
      --n-grau-a: #7e848a;
      --n-grau-b: #6d7379;
      --n-grau-c: #a6adb5;
      --n-grau-d: #d6dade;
      --n-grau-e: #9aa1a9;
      --n-grau-f: #b0b7be;
      --n-grau-g: #b0b7be;
      --n-haken-bg: #16321f;
      --n-hinweis-bg: #332c14;
      --n-hinweis-rand: #4a4025;
      --n-hinweis-text: #e8d79a;
      --n-kopf-schleier: rgba(20, 22, 26, 0.98);
      --n-kopf-schatten: 0 2px 14px rgba(0, 0, 0, 0.45);
      --n-rand: #2c313a;
      --n-rand-2: #333944;
      --n-rand-3: #3a414b;
      --n-tinte: #f0efec;
      --n-tinte-aktiv: #ffffff;
      --n-tinte-hover: #ffffff;

      --gefahr-bg: #b3352f;
      --gefahr-bg-hover: #cc4038;
      --gefahr-text: #ffffff;

      color-scheme: dark;
    }
  }

  :root[data-theme="dark"] {
    --hg-start:    url("/assets/hintergrund/hintergrund-start-dunkel.webp");
    --hg-bereiche: url("/assets/hintergrund/hintergrund-bereiche-dunkel.webp");
    --bg: #14161a;
    --paper: #14161a;
    --card: #1c1f25;
    --flaeche: #101216;
    --text: #eceef0;
    --accent-text: #16181c;

    --muted: #a6adb5;
    --muted-2: #c6ccd3;
    --border: #2c313a;
    --btn-bg: #21252c;
    --btn-border: #353b44;
    --btn-hover: #2a2f37;
    --btn-active: #323944;
    --accent: #f0efec;
    --accent-hover: #ffffff;

    --green-bg: #13291d;
    --green-border: #3fbf67;
    --green-text: #7fe3a3;

    --red-bg: #2e171a;
    --red-border: #e5686d;
    --red-text: #ff9b9e;

    --shadow-btn: 0 3px 12px rgba(0, 0, 0, 0.45);
    --shadow-btn-hover: 0 10px 24px rgba(0, 0, 0, 0.55);
    --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.5);

    --schatten-fein: rgba(0, 0, 0, 0.35);
    --schatten-mittel: rgba(0, 0, 0, 0.45);
    --schatten-stark: rgba(0, 0, 0, 0.6);

    --k-artikel-bg: #16251c;
    --k-artikel-rand: #24402d;
    --k-artikel-bgh: #1b2e22;
    --k-artikel-randh: #2c4f38;
    --k-artikel-akzent: #6ee79a;
    --k-vokabel-bg: #262014;
    --k-vokabel-rand: #453a20;
    --k-vokabel-bgh: #2e2718;
    --k-vokabel-randh: #55482a;
    --k-vokabel-akzent: #f0c561;
    --k-plural-bg: #141c28;
    --k-plural-rand: #24344c;
    --k-plural-bgh: #192433;
    --k-plural-randh: #2c405e;
    --k-plural-akzent: #79b0f5;
    --k-satzbau-bg: #271819;
    --k-satzbau-rand: #452b2c;
    --k-satzbau-bgh: #301d1f;
    --k-satzbau-randh: #543537;
    --k-satzbau-akzent: #ff9b9e;
    --k-verben-bg: #261c14;
    --k-verben-rand: #443220;
    --k-verben-bgh: #2f2318;
    --k-verben-randh: #543d28;
    --k-verben-akzent: #f0a765;
    --k-fall-bg: #1c1f23;
    --k-fall-rand: #333941;
    --k-fall-bgh: #232830;
    --k-fall-randh: #3d444e;
    --k-fall-akzent: #b8c0ca;
    --k-praep-bg: #12241f;
    --k-praep-rand: #1f3d36;
    --k-praep-bgh: #172d27;
    --k-praep-randh: #274c43;
    --k-praep-akzent: #5fd6c4;
    --k-adj-bg: #1e1a29;
    --k-adj-rand: #342c48;
    --k-adj-bgh: #252037;
    --k-adj-randh: #413757;
    --k-adj-akzent: #c39bf0;
    --k-perfekt-bg: #271724;
    --k-perfekt-rand: #45283c;
    --k-perfekt-bgh: #301d2c;
    --k-perfekt-randh: #55324a;
    --k-perfekt-akzent: #f095c6;
    --k-trennbar-bg: #1d2313;
    --k-trennbar-rand: #333f1e;
    --k-trennbar-bgh: #242c18;
    --k-trennbar-randh: #3f4d26;
    --k-trennbar-akzent: #b5d167;
    --k-hoeren-bg: #12242b;
    --k-hoeren-rand: #1e3d47;
    --k-hoeren-bgh: #172d35;
    --k-hoeren-randh: #274d59;
    --k-hoeren-akzent: #6fc9db;

    --sym-die: #ff9b9e;
    --sym-das: #f0c561;
    --sym-fall-den: #79b0f5;
    --sym-fall-dem: #e0ac4a;
    --sym-praep-dat: #79b0f5;
    --sym-adj-e: #6ee79a;
    --sym-adj-en: #f0a765;
    --sym-perfekt-hat: #c39bf0;
    --sym-perfekt-ge: #5fd6c4;
    --sym-trennbar-stamm: #62d79d;
    --sym-trennbar-teil: #eda45e;

    --widerruf-text: #ffd76a;
    --widerruf-bg: #3a2f10;

    --n-alle-bg: #262014;
    --n-alle-rand: #453a20;
    --n-aus: #3c424b;
    --n-badge-alle-bg: #453a20;
    --n-badge-alle-text: #f0c561;
    --n-balken: #343941;
    --n-fehler-bg: #2e171a;
    --n-fehler-rand: #e5686d;
    --n-feld: #21252c;
    --n-feld-2: #1a1d22;
    --n-feld-hover: #2a2f37;
    --n-flaeche-hell: #262a31;
    --n-grau-a: #7e848a;
    --n-grau-b: #6d7379;
    --n-grau-c: #a6adb5;
    --n-grau-d: #d6dade;
    --n-grau-e: #9aa1a9;
    --n-grau-f: #b0b7be;
    --n-grau-g: #b0b7be;
    --n-haken-bg: #16321f;
    --n-hinweis-bg: #332c14;
    --n-hinweis-rand: #4a4025;
    --n-hinweis-text: #e8d79a;
    --n-kopf-schleier: rgba(20, 22, 26, 0.98);
    --n-kopf-schatten: 0 2px 14px rgba(0, 0, 0, 0.45);
    --n-rand: #2c313a;
    --n-rand-2: #333944;
    --n-rand-3: #3a414b;
    --n-tinte: #f0efec;
    --n-tinte-aktiv: #ffffff;
    --n-tinte-hover: #ffffff;

    --gefahr-bg: #b3352f;
    --gefahr-bg-hover: #cc4038;
    --gefahr-text: #ffffff;

    color-scheme: dark;
  }

  /* Beim Druck auf den Hell/Dunkel-Knopf wuerden sonst alle
     Uebergaenge der Seite auf einmal loslaufen. Waehrend des
     Wechsels haengt kurz die Klasse "theme-wechselt" am <html>,
     und die legt hier alle Uebergaenge stumm. Danach ist wieder
     alles wie vorher -- im Spiel selbst aendert sich nichts. */
  html.theme-wechselt,
  html.theme-wechselt *,
  html.theme-wechselt *::before,
  html.theme-wechselt *::after {
    transition: none !important;
  }

  /* ============================================================
     LOGO: ZWEI FASSUNGEN
     ============================================================
     Im Logo ist das Wort "der" schwarz. Auf dunklem Grund waere
     es unsichtbar -- ein Drittel des Namens waere weg. Deshalb
     liegen zwei Bilder im HTML: eines mit schwarzem "der" (hell)
     und eines mit hellem "der" (dunkel). Gruen, Rot und Gelb sind
     in beiden Fassungen genau gleich.
     Umgeschaltet wird hier im Blatt, nicht per Programm -- dann
     steht schon beim ersten Bildaufbau das richtige Bild da und
     es blitzt nichts auf.
     ============================================================ */
  .logo-dunkel { display: none; }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo-hell   { display: none; }
    :root:not([data-theme="light"]) .logo-dunkel { display: block; }
  }

  :root[data-theme="dark"] .logo-hell   { display: none; }
  :root[data-theme="dark"] .logo-dunkel { display: block; }

  /* Wer ausdruecklich HELL gewaehlt hat, bekommt die helle Fassung --
     auch wenn sein Geraet auf dunkel steht. */
  :root[data-theme="light"] .logo-hell   { display: block; }
  :root[data-theme="light"] .logo-dunkel { display: none; }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
  }

  body {
    font-family: Inter, ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-tap-highlight-color: transparent;
  }

  button {
    font-family: inherit;
  }

  /* Sichtbarer, klarer Fokuszustand für Tastaturnavigation (Barrierefreiheit) */
  button:focus-visible,
  .icon-btn:focus-visible {
    outline: 3px solid #2b6ef2;
    outline-offset: 2px;
  }

  .hidden {
    display: none !important;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ============================================================
     LERNBEREICH-AUSWAHL (Startseite)
     ============================================================ */
  #mode-select, #chapter-select {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px;
    gap: 18px;
  }

  #mode-select h1, #chapter-select h1 {
    font-size: var(--titel-gross);
    font-weight: 800;
    letter-spacing: 0.01em;
    margin: 0;
  }

  #mode-select p.subtitle, #chapter-select p.subtitle {
    font-size: clamp(15px, 3vw, 18px);
    color: var(--muted-2);
    margin: 0;
    /* KEIN Deckel mehr. 32em waren bei 18px 576 px -- die
       Unterzeile war damit schmaler als die Ueberschrift und
       stand mittig darunter (Design-Audit 05.09.2026). */
    max-width: none;
  }

  #mode-cards {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    max-width: 640px;
  }

  /* Die Fach-Auswahl (60 Fächer) soll die ganze Bildschirmbreite nutzen
     statt in einer schmalen 2-Spalten-Säule zu stehen — daher eigenes
     Grid-Layout statt des Flex-Layouts von #mode-cards. Regeln kommen
     jetzt einheitlich aus der gemeinsamen Klasse .chapter-cards-grid
     weiter unten (gilt für alle sechs Spiele; keine eigene ID-Kopie für
     den Artikeltrainer mehr). */

  .mode-card {
    flex: 1 1 260px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 24px;
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-card);
    cursor: pointer;
    box-shadow: var(--shadow-card);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 120ms ease;
  }

  .mode-card:hover {
    background: var(--btn-hover);
    box-shadow: var(--shadow-btn-hover);
    border-color: var(--accent);
    transform: translateY(-3px);
  }

  .mode-card:active {
    transform: translateY(0);
  }

  .mode-card-title {
    font-size: clamp(18px, 3vw, 22px);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
  }

  .mode-card-desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted-2);
  }

  .back-btn {
    margin-inline-end: auto;
  }

  /* ============================================================
     TOP-LEISTE (Fach-Name + Steuerung) — steht IMMER unterhalb des
     einheitlichen, globalen Headers (#site-header). Bewusst als Spalte
     (nicht als Zeile) aufgebaut: Fach-Name (#stats-row) und Steuerung
     (#controls-row, „Fächer" + „Neu starten") stehen dadurch auf JEDER
     Bildschirmgröße zuverlässig als zwei eigene Zeilen untereinander,
     genau in der vorgegebenen Reihenfolge — unabhängig davon, ob auf
     einem breiten Desktop-Bildschirm eigentlich Platz für eine
     gemeinsame Zeile wäre. Der linke Innenabstand ist bewusst identisch
     mit #site-header und #chapter-select gehalten, damit die linke
     Kante des Zurück-Buttons überall exakt auf einer Linie liegt. */
  #top-bar, .top-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
  }

  /* ============================================================
     BAUSTELLEN-HINWEIS
     Steht direkt unter dem globalen Header, in derselben Breite und mit
     derselben Rundung wie dieser — schmal, dezent, ohne Warnsymbol.
     Ganz normal im Seitenfluss: beim Scrollen verschwindet er mit.
     ============================================================ */
  #construction-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    max-width: 1400px;
    margin: 10px auto 0;
    padding: 8px 18px;
    background: var(--n-hinweis-bg);
    border: 1px solid var(--n-hinweis-rand);
    border-radius: 14px;
    flex-shrink: 0;
  }

  #construction-notice p {
    margin: 0;
    flex: 1;
    font-size: 13px;
    line-height: 1.45;
    color: var(--n-hinweis-text);
    text-align: center;
  }

  #construction-notice-close {
    flex-shrink: 0;
    border: none;
    background: none;
    color: var(--n-hinweis-text);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
  }

  #construction-notice-close:hover {
    background: rgba(0, 0, 0, 0.06);
  }

  #construction-notice-close:focus-visible {
    outline: 3px solid #2b6ef2;
    outline-offset: 2px;
  }

  @media (max-width: 560px) {
    /* Auf dem Handy bleibt das ✕ rechts stehen, der Text darf sauber
       auf zwei Zeilen umbrechen. */
    #construction-notice {
      margin: 10px 12px 0;
      width: auto;
      padding: 8px 10px 8px 14px;
      gap: 6px;
      border-radius: 12px;
    }
    #construction-notice p {
      font-size: 12.5px;
      text-align: start;
    }
  }

  /* ============================================================
     GLOBALER HEADER — auf JEDEM Bildschirm identisch sichtbar
     (Willkommen, Lernbereich-Auswahl, Fach-Auswahl UND alle drei
     Trainer): Logo + „Ananas" links, Sprache + Sound rechts, siehe
     .site-header-actions. Eine einzige gemeinsame Komponente/Zeile für
     die ganze Seite — wird nie ein-/ausgeblendet und nie umgebaut.
     flex-wrap: nowrap stellt sicher, dass die rechten Bedienelemente
     auf KEINER Bildschirmgröße in eine eigene Zeile umbrechen.
     ============================================================ */
  #site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 14px clamp(16px, 4vw, 32px);
    border-bottom: 1px solid var(--border);
    background: var(--n-kopf-schleier);
    flex-shrink: 0;
  }

  /* Rechte Gruppe im globalen Header: Sprachumschalter + Sound-Umschalter,
     immer nebeneinander in genau dieser Reihenfolge, nie umbrechend. */
  .site-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 10px;
  }

  /* Der Sound-Umschalter ist jetzt ein ganz normales Flex-Kind innerhalb
     von .site-header-actions (statt wie bisher unabhängig fest auf dem
     Bildschirm positioniert) — dadurch steht er automatisch überall an
     derselben Stelle direkt rechts neben dem Sprachumschalter, ohne
     eigene Positionierung und ohne Überlappungsgefahr.
     Optik: kein Kreis mehr, nur das Symbol selbst (Wunsch Bo, 01.09.2026).
     Der Zustand steht damit allein im Symbol: 🔊 = Ton an, 🔇 = Ton aus.
     Das setzt applySoundEnabled() in index.html, hier nur die Optik. */
  #sound-toggle-btn,
  #theme-toggle-btn {
    flex-shrink: 0;
    /* Barrierefreiheit: die Flaeche bleibt 48x48 gross und damit gut
       treffbar, auch wenn man den Rahmen nicht mehr sieht. */
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 0;
    background: none;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: var(--text);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  #sound-toggle-btn:hover,
  #theme-toggle-btn:hover {
    transform: translateY(-1px);
    opacity: 0.7;
  }

  #sound-toggle-btn:focus-visible,
  #theme-toggle-btn:focus-visible {
    outline: 3px solid #2b6ef2;
    outline-offset: 2px;
  }

  .site-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Barrierefreiheit (Phase 6): mindestens ~44px hohes Berührungsziel,
       auch wenn Logo (24px) + Text optisch kleiner wirken. */
    min-height: 44px;
    background: none;
    border: none;
    padding: 2px 6px;
    margin: 0;
    font-family: inherit;
    cursor: pointer;
    border-radius: 8px;
    /* Auf den Rechtsseiten ist die Marke ein <a>, im Spiel ein <button>.
       Ohne diese Zeile unterstreicht der Browser den Link und die
       Kopfzeile sieht dort anders aus (von Bo gemeldet, 02.09.2026). */
    text-decoration: none;
    color: inherit;
  }

  .site-brand:hover .site-brand-name {
    color: var(--text);
  }

  .site-brand:focus-visible {
    outline: 3px solid #2b6ef2;
    outline-offset: 3px;
  }

  .site-brand-logo {
    height: 44px;
    width: 44px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
  }

  .site-brand-name {
    font-weight: 800;
    font-size: 21px;
    letter-spacing: -0.02em;
    color: var(--text);
    white-space: nowrap;
  }

  @media (max-width: 760px) {
    .site-brand-logo { height: 34px; width: 34px; }
    .site-brand-name { font-size: 17px; }
    #sound-toggle-btn,
    #theme-toggle-btn { width: 44px; height: 44px; font-size: 20px; }
  }

  #site-footer {
    flex-shrink: 0;
    /* Steht ausserhalb von #welcome-screen/#mode-select/#bereich-
       select, darum hebt deren eigene Kind-Regel (Q66/Q71) die
       Fusszeile NICHT mit an. Ohne dieses relative + z-index lag
       sie unter dem feststehenden Hintergrundbild begraben --
       technisch da (Platz reserviert), aber unsichtbar. Gemessen
       06.09.2026: Bo meldete "the header is gone", gemeint war die
       Fusszeile ganz unten auf /bereiche/. */
    position: relative;
    z-index: 1;
    /* KUNDENMELDUNG 05.09.2026 "fix the footer please":
       Auf kurzen Bildschirmen klebte die Fusszeile direkt unter den
       Karten und darunter war ein grosses leeres Feld -- gemessen auf
       #bereiche bei 1032 px Fensterhoehe: 346 Pixel Leere unter der
       Fusszeile, und die Seite liess sich nicht einmal scrollen.
       Der body ist eine Flex-Spalte; "margin-top: auto" schluckt den
       uebrigen Platz und schiebt die Fusszeile ans untere Ende.
       Ist die Seite lang genug, bleibt alles wie vorher -- dann gibt
       es keinen uebrigen Platz. */
    margin-top: auto;
    padding: 14px 18px;
    border-top: 1px solid var(--border);
    text-align: center;
  }

  #site-footer p {
    margin: 0;
    font-size: 12px;
    color: var(--muted-2);
  }

  /* Phase 7: rechtliche Links im Footer — klein/dezent, aber mit
     ausreichend Berührungsziel (siehe Phase 6). */
  #site-footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 4px;
    margin-top: 8px;
  }

  #site-footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-2);
    text-decoration: none;
    border-radius: var(--radius-sm);
  }

  #site-footer-links a:hover,
  #site-footer-links a:focus-visible {
    color: var(--text);
    text-decoration: underline;
  }

  #site-footer-links a:not(:last-child)::after {
    content: "·";
    /* Der Punkt sass schief: 8 px hinter dem ersten Wort, aber 24 px
       vor dem zweiten -- er klebte am linken Wort statt zwischen
       beiden zu stehen (Kundenmeldung 05.09.2026).
       Die 24 px rechts sind fest vorgegeben: 10 px Innenabstand
       dieses Links + 4 px gap + 10 px Innenabstand des naechsten.
       Damit es gleich aussieht, muss links derselbe Wert stehen.
       WER DAS PADDING ODER DEN GAP OBEN AENDERT, muss diese Zahl
       nachrechnen. Dieselbe Regel steht in wort.css. */
    margin-inline-start: 24px;
    color: var(--border);
  }

  /* "Vertrag widerrufen" muss laut Rücktrittsbelehrung optisch im Footer
     hervorgehoben werden (jederzeit ohne Anmeldung erreichbar). */
  #site-footer-links a.site-footer-highlight {
    color: var(--widerruf-text);
    background: var(--widerruf-bg);
    border: 1px solid var(--brand-yellow);
    font-weight: 700;
    padding: 4px 10px;
  }

  #stats-row, .stats-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--muted-2);
    /* Der Artikeltrainer zeigt hier 6 Statistik-Einträge, die anderen
       beiden Trainer nur 4 — auf schmalen Bildschirmen bricht die Zeile
       deshalb unterschiedlich oft um. Eine gemeinsame Mindesthöhe (Platz
       für zwei Zeilen) sorgt dafür, dass die Kopfzeile bei allen drei
       Trainern immer gleich hoch ist, damit Wort und Antwort-Buttons
       darunter überall exakt an derselben Stelle sitzen. */
    min-height: 44px;
  }

  #stats-row .stat, .stats-row .stat {
    white-space: nowrap;
  }

  #stats-row .stat strong, .stats-row .stat strong {
    color: var(--text);
    font-weight: 700;
  }

  #stats-row .stat.correct strong, .stats-row .stat.correct strong { color: var(--green-text); }
  #stats-row .stat.wrong strong, .stats-row .stat.wrong strong { color: var(--red-text); }

  /* Zurück-Button IMMER links, „Neu starten" (falls vorhanden) IMMER
     rechts, in derselben Zeile — auf jeder Bildschirmgröße, siehe auch
     .back-btn { margin-right: auto } weiter unten als zusätzliche
     Absicherung. Ist nur der Zurück-Button vorhanden (Fach-Auswahl),
     steht er dank space-between automatisch ganz links. */
  #controls-row, .controls-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    row-gap: 8px;
    gap: 8px;
  }

  /* Hoerknopf fuer EIN WORT der 3000 Woerter (08.09.2026).
     Steht unter dem Beispielsatz, mittig. Klein und rund -- er soll
     das Wort nicht ueberdecken. */
  .alltag-wort-ton {
    display: block;
    margin: 10px auto 0;
    width: 46px; height: 46px;
    padding: 0;
    font-size: 20px; line-height: 1;
    border: 1px solid var(--btn-border);
    border-radius: 50%;
    background: var(--btn-hover);
    color: inherit;
    cursor: pointer;
  }
  .alltag-wort-ton:hover { background: var(--card); }
  .alltag-wort-ton:active { transform: scale(.94); }
  .alltag-wort-ton[hidden] { display: none; }

  /* HIER STANDEN ZWEI HOERKNOEPFE FUER DAS PLURAL-SPIEL (10.09.2026).
     Sie sind noch am selben Tag wieder weggekommen. Bo: "we don't
     need this button in the word. There are two buttons. We don't
     need it." Der Ton spielt jetzt von selbst -- siehe
     pluralTonSpielenFuer() in index.html. Es gibt also nichts mehr
     zu gestalten. */

  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    cursor: pointer;
    font-size: 16px;
    color: var(--muted-2);
    transition: background 120ms ease, border-color 120ms ease;
  }

  .icon-btn:hover {
    background: var(--btn-hover);
  }

  .text-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Barrierefreiheit (Phase 6): Berührungsziel mindestens ~44×44px,
       auch wenn der sichtbare Text/Rahmen kleiner wirkt. */
    min-height: 44px;
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--muted-2);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms ease;
  }

  .text-btn:hover {
    background: var(--btn-hover);
  }

  /* ============================================================
     SPIELBEREICH
     ============================================================ */
  #game-screen, #english-screen, #vocab-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  #game-main, .game-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    gap: clamp(28px, 5vh, 48px);
  }

  #word-area, .word-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(28px, 6vh, 56px) clamp(20px, 6vw, 60px);
    border-radius: var(--radius-lg);
    transition: background-color 200ms ease, box-shadow 200ms ease;
    min-height: clamp(160px, 30vh, 220px);
  }

  #word-area.feedback-correct, .word-area.feedback-correct {
    background: var(--green-bg);
    box-shadow: inset 0 0 0 2px var(--green-border);
  }

  #word-area.feedback-wrong, .word-area.feedback-wrong {
    background: var(--red-bg);
    box-shadow: inset 0 0 0 2px var(--red-border);
  }

  #word-area.shake, .word-area.shake {
    animation: shake 320ms ease;
  }

  @keyframes shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-7px); }
    40%, 60% { transform: translateX(7px); }
  }

  #current-word, .current-word {
    font-size: clamp(42px, 9vw, 80px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--text);
    max-width: 100%;
    /* Ein einzelnes Lernwort darf NIE mitten im Wort umbrechen (kein
       einzelner Buchstabe allein in einer neuen Zeile). Es bleibt
       deshalb immer einzeilig -- die JS-Funktion fitLongWordFontSize()
       verkleinert die Schrift so weit, dass auch das längste Wort in
       diese eine Zeile passt. Kein word-break/overflow-wrap/hyphens
       mehr, die einen Zeilenumbruch mitten im Wort erlauben würden. */
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  /* Bei richtiger Antwort im Artikelspiel färbt sich zusätzlich zum
     grünen Hintergrund (#word-area.feedback-correct oben) auch die
     Wortschrift selbst grün ein — ersetzt die bisherige Häkchen-/
     "Richtig!"-Rückmeldung. Bewusst nur für das Artikelspiel scoped
     (#word-area/#current-word sind dort eindeutige IDs) — Wörter-/
     Englisch-Trainer bleiben unverändert. */
  #word-area.feedback-correct #current-word {
    color: var(--green-text);
  }

  #current-word.fade-in, .current-word.fade-in {
    animation: fadeIn 200ms ease;
  }

  /* Der Englisch-Trainer zeigt teils längere deutsche Ausdrücke
     ("öffentliche Verkehrsmittel") statt einzelner kurzer Substantive,
     deshalb eine etwas kleinere, besser passende Schriftgröße. */
  #eng-current-word {
    font-size: clamp(26px, 6vw, 46px);
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Kleine, dezente Übersetzung unter dem Wort (Englisch · Russisch) */
  #word-translation {
    margin-top: 8px;
    font-size: clamp(13px, 2.4vw, 15px);
    font-weight: 500;
    text-transform: lowercase;
    color: var(--muted);
    letter-spacing: 0.01em;
  }

  #word-translation.fade-in {
    animation: fadeIn 200ms ease;
  }

  /* Beispielsatz im WÖRTER-Trainer: der deutsche Satz ist sofort
     sichtbar (verrät die Antwort nicht, da er auf Deutsch ist), die
     Übersetzung erscheint erst NACH der Antwort. */
  .example-sentence {
    margin-top: 14px;
    font-size: clamp(17px, 3.4vw, 21px);
    font-style: italic;
    line-height: 1.45;
    color: var(--muted-2);
    max-width: 42em;
  }

  .example-translation {
    margin-top: 6px;
    font-size: clamp(15px, 2.9vw, 18px);
    line-height: 1.4;
    color: var(--muted);
    max-width: 42em;
    min-height: 1.4em;
  }

  /* "Weiter"-Knopf (WÖRTER-Trainer) — erscheint erst nach der Antwort,
     ersetzt dort das automatische Weiterspringen. Gleiche optische
     Sprache wie der "Los geht's"-Knopf auf der Willkommensseite. */
  .next-btn {
    padding: 14px 36px;
    font-size: clamp(15px, 2.8vw, 18px);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--accent-text);
    background: var(--accent);
    border: 2px solid var(--accent);
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: var(--shadow-btn);
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  .next-btn:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: var(--shadow-btn-hover);
    transform: translateY(-1px);
  }

  .next-btn:active {
    transform: translateY(0) scale(0.98);
  }

  #feedback-line, .feedback-line {
    min-height: 30px;
    margin-top: 14px;
    font-size: clamp(16px, 3vw, 20px);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 150ms ease;
  }

  #feedback-line.visible, .feedback-line.visible {
    opacity: 1;
  }

  #feedback-line.is-correct, .feedback-line.is-correct { color: var(--green-text); }
  #feedback-line.is-wrong, .feedback-line.is-wrong { color: var(--red-text); }

  #feedback-line .symbol, .feedback-line .symbol {
    font-size: 1.1em;
  }

  /* Buttons DER / DIE / DAS */
  #answer-buttons, .answer-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 720px;
  }

  .answer-btn {
    flex: 1 1 160px;
    min-width: 120px;
    max-width: 220px;
    padding: 22px 16px;
    font-size: clamp(20px, 4vw, 26px);
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--text);
    background: var(--btn-bg);
    border: 2px solid var(--btn-border);
    border-radius: 16px;
    cursor: pointer;
    box-shadow: var(--shadow-btn);
    transition: background 120ms ease, border-color 120ms ease, transform 90ms ease, box-shadow 120ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  .answer-btn:hover:not(:disabled) {
    background: var(--btn-hover);
    box-shadow: var(--shadow-btn-hover);
    transform: translateY(-1px);
  }

  .answer-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
    background: var(--btn-active);
  }

  .answer-btn:disabled {
    cursor: default;
  }

  .answer-btn.correct {
    background: var(--green-bg);
    border-color: var(--green-border);
    color: var(--green-text);
  }

  .answer-btn.wrong {
    background: var(--red-bg);
    border-color: var(--red-border);
    color: var(--red-text);
  }

  /* Einheitliches Antwort-Feedback in ALLEN drei Spielen (DER · DIE ·
     DAS, WÖRTER, PLURAL), auf ausdrücklichen Kundenwunsch: NUR die
     grüne/rote Einfärbung des Buttons (siehe .answer-btn.correct/.wrong
     oben) zeigt richtig/falsch an — kein zusätzliches Häkchen, kein
     Kreuz, keine Icon-Komponente, kein verändertes Layout. Vorher gab
     es hier testweise ein ✓/✕ über ::after (nur für WÖRTER/Englisch,
     das Artikelspiel hatte es schon per Override abgeschaltet) — das
     ist jetzt bewusst für alle drei Spiele einheitlich entfernt, damit
     WÖRTER/PLURAL exakt wie die Referenz DER · DIE · DAS aussehen. */
  .answer-btn.correct::after,
  .answer-btn.wrong::after {
    content: none;
  }

  /* Wenn eine Antwort gesperrt ist, nicht ausgewählte Buttons abschwächen */
  .answer-btn.dimmed {
    opacity: 0.5;
  }

  /* Englisch-Trainer: Antworten sind Wörter/Kurzphrasen unterschiedlicher
     Länge, deshalb Großschreibung per CSS (statt fest im HTML) und eine
     etwas kleinere, flexiblere Schrift als bei den DER/DIE/DAS-Buttons. */
  .eng-answer-btn {
    text-transform: uppercase;
    font-size: clamp(15px, 2.6vw, 19px);
    line-height: 1.3;
  }

  /* WÖRTER-Trainer: Antworten sind russische/englische Übersetzungen,
     teils ganze Wortgruppen ("obdumyvat', rassmatrivat'") statt kurzer
     Artikel-Labels. Ohne eigene Regel erben sie die große
     DER/DIE/DAS-Schriftgröße (bis 26px) bei nur 220px Breite, wodurch
     lange Übersetzungen unschön umbrechen. Kleinere, flexiblere Schrift
     plus Silbentrennung/Wortumbruch für sehr lange einzelne Wörter. */
  .vocab-answer-btn {
    max-width: 260px;
    font-size: clamp(14px, 2.4vw, 18px);
    line-height: 1.3;
    font-weight: 700;
    /* Umbruch nur zwischen vollständigen Wörtern (an Leerzeichen), NIE
       mitten in einem Wort -- ein zu langes Einzelwort wird stattdessen
       per JS (fitButtonFontSize()) kleiner skaliert. */
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }

  /* Fortschrittsbalken im Artikeltrainer — bezieht sich immer auf
     state.activeWords/state.seenWords des aktuell aktiven Fachs (bzw.
     bei "Alle Wörter" auf alle 3294 Wörter, da activeWords dort schon
     die gesamte Wortdatenbank ist). Wird in renderStats() befüllt.
     Nutzt jetzt dieselben Klassen (.chapter-progress-block/-bar/-text,
     siehe weiter unten im "gemeinsame Komponenten"-Abschnitt) wie alle
     anderen fünf Spiele — die frühere eigene ID-Regel hier ist entfernt,
     damit es nur noch EINE Quelle für dieses Design gibt. */

  #repeat-indicator, .repeat-indicator {
    font-size: 12px;
    color: var(--muted);
    min-height: 16px;
  }

  #keyboard-hint, .keyboard-hint {
    text-align: center;
    font-size: 12px;
    color: var(--muted);
    padding: 14px 12px 20px;
    letter-spacing: 0.02em;
  }

  /* ============================================================
     BESTÄTIGUNGS-DIALOG (Neu starten)
     ============================================================ */
  #modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 22, 26, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 50;
  }

  #modal-box {
    background: var(--card);
    border-radius: var(--radius-md);
    padding: 24px;
    max-width: 360px;
    width: 100%;
    text-align: center;
    box-shadow: 0 12px 32px var(--schatten-stark);
  }

  #modal-box p {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 18px;
    color: var(--text);
  }

  #modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
  }

  #modal-actions button {
    flex: 1;
    /* Barrierefreiheit (Phase 6): mindestens ~44px Berührungsziel. */
    min-height: 44px;
    padding: 12px 10px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--btn-border);
  }

  #modal-cancel {
    background: var(--btn-bg);
    color: var(--text);
  }

  #modal-cancel:hover { background: var(--btn-hover); }

  #modal-confirm {
    background: var(--gefahr-bg);
    border-color: var(--gefahr-bg);
    color: var(--gefahr-text);
  }

  #modal-confirm:hover { background: var(--gefahr-bg-hover); }

  /* ============================================================
     ÜBERSETZUNGSSPRACHE — Erstauswahl-Overlay (einmalig)
     ============================================================ */
  #lang-select-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 22, 26, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100;
  }

  #lang-select-box {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 12px 32px var(--schatten-stark);
    /* Sieben Sprachen: auf kleinen Handys innen rollen statt
       unten aus dem Bildschirm zu wachsen. */
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
  }

  #lang-select-title {
    font-size: clamp(18px, 4vw, 21px);
    font-weight: 800;
    letter-spacing: 0.01em;
    margin: 0 0 8px;
    color: var(--text);
  }

  #lang-select-sub {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--muted);
  }

  #lang-select-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .lang-option-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 12px 18px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    background: var(--btn-bg);
    border: 2px solid var(--btn-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, transform 90ms ease;
  }

  .lang-option-btn:hover {
    background: var(--btn-hover);
    border-color: var(--accent);
  }

  .lang-option-btn:active {
    transform: scale(0.98);
  }

  .lang-option-flag {
    font-size: 22px;
    line-height: 1;
  }

  #lang-select-hint {
    margin: 18px 0 0;
    font-size: 13px;
    color: var(--muted);
  }

  /* ============================================================
     ÜBERSETZUNGSSPRACHE — Umschalter im Header (jederzeit erreichbar)
     ============================================================ */
  #lang-switcher, .lang-switcher {
    position: relative;
  }

  /* Sprachbutton wie in der Design-Vorlage: weiße Pille mit Globus-Emoji,
     Sprachcode und Schatten, statt der schmalen Standard-.text-btn-Optik.
     Nur Optik — Klick-/Dropdown-Verhalten (siehe setupSoundToggle()-
     Pendant für Sprache in JS) bleibt unverändert. */
  .lang-switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 92px;
    padding: 12px 16px;
    border-radius: var(--radius-pill);
    background: var(--card);
    border-color: var(--btn-border);
    box-shadow: var(--shadow-btn);
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    transition: transform 180ms ease, box-shadow 180ms ease, background 120ms ease;
  }

  .lang-switcher-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn-hover);
  }

  @media (max-width: 760px) {
    .lang-switcher-btn { min-width: 0; padding: 10px 13px; font-size: 14px; }
  }

  #lang-dropdown, .lang-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    min-width: 190px;
    background: var(--card);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.16);
    padding: 8px;
    z-index: 30;
  }

  #lang-dropdown-title, .lang-dropdown-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    padding: 6px 10px 8px;
  }

  #lang-dropdown-options, .lang-dropdown-options {
    display: flex;
    flex-direction: column;
  }

  .lang-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: start;
    transition: background 120ms ease;
  }

  .lang-dropdown-item:hover {
    background: var(--btn-hover);
  }

  .lang-dropdown-item .lang-dropdown-check {
    width: 16px;
    flex-shrink: 0;
    color: var(--accent);
    font-weight: 800;
  }

  .lang-dropdown-item .lang-dropdown-flag {
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
  }

  /* Fahnen als Bilder (statt Emoji): feste Größe, sauber mittig. */
  .lang-flag-img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  .lang-dropdown-item .lang-flag-img {
    width: 20px;
    height: 20px;
  }

  .bildnachweis {
    margin: 28px 0 0;
    font-size: 12px;
    color: var(--muted);
    text-align: center;
  }

  .bildnachweis a { color: inherit; }

  /* ============================================================
     WILLKOMMEN-BILDSCHIRM (allererste Ansicht)
     ============================================================ */
  #welcome-screen {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px;
    gap: 18px;
  }

  .welcome-logo {
    width: clamp(220px, 46vw, 380px);
    height: clamp(220px, 46vw, 380px);
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-btn-hover);
    margin-bottom: 6px;
  }

  #welcome-screen h1 {
    font-size: clamp(24px, 5vw, 36px);
    font-weight: 800;
    letter-spacing: 0.01em;
    margin: 0;
  }

  #welcome-screen p.subtitle {
    font-size: clamp(15px, 3vw, 18px);
    color: var(--muted-2);
    margin: 0;
    /* KEIN Deckel mehr. 32em waren bei 18px 576 px -- die
       Unterzeile war damit schmaler als die Ueberschrift und
       stand mittig darunter (Design-Audit 05.09.2026). */
    max-width: none;
  }

  .welcome-start-btn {
    margin-top: 10px;
    padding: 16px 40px;
    font-size: clamp(16px, 3vw, 19px);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--accent-text);
    background: var(--accent);
    border: 2px solid var(--accent);
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: var(--shadow-btn);
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  .welcome-start-btn:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: var(--shadow-btn-hover);
    transform: translateY(-1px);
  }

  .welcome-start-btn:active {
    transform: translateY(0) scale(0.98);
  }

  /* ============================================================
     RESPONSIVE ANPASSUNGEN
     ============================================================ */
  @media (max-width: 480px) {
    /* Etwas knapperer seitlicher Abstand (~16px) auf dem Handy, u. a.
       damit der "Zuletzt gelernt"-Bereich (siehe #last-learned-box)
       genug Breite bekommt und nichts abgeschnitten wird. Derselbe
       16px-Wert gilt auch für #site-header und #top-bar/.top-bar unten,
       damit die linke Kante von Logo UND Zurück-Button auf dem Handy
       exakt übereinander liegen (wie schon auf dem Desktop mit 24px). */
    #chapter-select {
      padding-inline: 16px;
    }
    #site-header {
      padding-inline: 16px;
    }
    #top-bar, .top-bar {
      text-align: center;
      padding-inline: 16px;
    }
    #stats-row, .stats-row {
      justify-content: center;
    }
    /* Symmetrisches 2-Spalten-Raster statt zufälligem Umbrechen: Zurück
       und Neu starten bekommen gleich breite Zellen und stehen dadurch
       auf dem Handy sauber nebeneinander. Gibt es nur einen Button
       (z. B. Zurück allein auf der Fach-Auswahl), spannt er beide
       Spalten, damit nie eine halbleere Zeile entsteht. */
    #controls-row, .controls-row {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      width: 100%;
      gap: 8px;
    }
    #controls-row > *, .controls-row > * {
      width: 100%;
      margin: 0;
    }
    #controls-row > *:last-child:nth-child(odd),
    .controls-row > *:last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }
    #controls-row .text-btn, .controls-row .text-btn,
    #controls-row .icon-btn, .controls-row .icon-btn {
      width: 100%;
      white-space: normal;
      text-align: center;
    }
    .answer-btn {
      flex: 1 1 100%;
      max-width: 320px;
    }
    /* Phase 5: DER/DIE/DAS bleiben auch auf schmalen Bildschirmen
       NEBENEINANDER statt untereinander gestapelt (kurze Wörter, passen
       problemlos zu dritt in eine Zeile — im Gegensatz zu den Wörter-/
       Englisch-Antwortknöpfen, die oft längere Übersetzungen enthalten
       und deshalb bewusst weiterhin volle Breite bekommen). */
    #answer-buttons .answer-btn {
      flex: 1 1 0;
      min-width: 0;
      max-width: none;
      padding-inline: 4px;
    }
    #current-word, .current-word {
      font-size: clamp(30px, 9.5vw, 60px);
    }
    #keyboard-hint, .keyboard-hint {
      display: none;
    }
    #lang-dropdown, .lang-dropdown {
      inset-inline-end: auto;
      left: 50%;
      transform: translateX(-50%);
      max-width: calc(100vw - 40px);
    }
  }

  /* ============================================================
     SEHR SCHMALE HANDYS (bis 360 px)
     ============================================================
     Mit dem neuen Hell/Dunkel-Knopf stehen vier Bedienelemente in
     der Kopfzeile: Logo+Wort, Sprache, Ton, Hell/Dunkel. Auf einem
     320-px-Handy (und besonders im arabischen Layout, das von
     rechts nach links laeuft) passte das nicht mehr -- der
     Hell/Dunkel-Knopf rutschte aus der Kopfzeile heraus.
     Deshalb hier: engere Abstaende und das Wort "Ananas" bleibt
     weg. Das Logo daneben ist selbst der Knopf zur Startseite,
     es geht also nichts verloren. Ab 361 px ist alles wie bisher.
     Geprueft am 03.09.2026: passt bis hinunter zu 300 px.
     ============================================================ */
  /* Die alte 360px-Regel ist in die gemeinsame Handy-Regel weiter
     unten gewandert (400px, gleiche Werte wie in wort.css). Der
     margin-inline daraus ist weg: die Kopfleiste hat seit dem
     05.09.2026 gar keinen Aussenrand mehr, sie geht ueber die volle
     Breite. */

  /* ============================================================
     FACH-KARTEN: Status "bereits abgeschlossen"
     ============================================================ */
  .chapter-card-done {
    border-color: var(--green-border);
    background: var(--green-bg);
  }

  /* Muss AUCH im Hover-/Fokus-/Active-Zustand grün bleiben: beim
     Scrollen über eine Karte auf dem iPhone löst Safari die
     Hover-Emulation aus (die dort auch "hängen" bleiben kann), und ohne
     diese Regel würde .mode-card:hover unten (zwei Selektoren = höhere
     Spezifität als die einfache .chapter-card-done-Regel oben) die
     grüne Farbe durch die normale Hover-Farbe ersetzen — die Karte
     wirkt dann fälschlich "nicht mehr abgeschlossen". Der
     Abschluss-Status selbst (die Klasse .chapter-card-done) wird davon
     nicht berührt, nur die Optik wird hier zusätzlich abgesichert. */
  .chapter-card-done:hover,
  .chapter-card-done:focus,
  .chapter-card-done:focus-visible,
  .chapter-card-done:active {
    border-color: var(--green-border);
    background: var(--green-bg);
  }

  .chapter-card-done .mode-card-desc {
    color: var(--green-text);
    font-weight: 700;
  }

  /* Sonderkarte "Alle Wörter" ganz oben — deckt die gesamte Wortdatenbank
     ab, optisch etwas hervorgehoben, damit sie sich von den einzelnen
     Fächern abhebt. Sie steht in einer eigenen vollen Zeile über die
     komplette Breite des Grids (unabhängig davon, wie viele Spalten das
     Grid gerade hat — 6 auf breiten Bildschirmen, weniger auf schmalen),
     statt wie eine einzelne Fach-Karte nur eine Spalte einzunehmen. */
  .chapter-card-all {
    grid-column: 1 / -1;
    border-color: var(--accent);
    background: var(--btn-hover);
  }

  .chapter-card-all .mode-card-title {
    color: var(--accent);
  }

  /* Fach-Karten füllen ihre Grid-Zelle vollständig aus (statt der
     Flex-basierten max-width: 300px von .mode-card), damit 6 Karten
     pro Zeile den Bildschirm sauber ausfüllen. */
  .chapter-card {
    width: 100%;
    max-width: none;
    padding: 22px 16px;
  }

  /* Fortschrittszeile auf jeder Fach-Karte ("42 von 132 gesehen" bzw.
     "✓ Fertig"). Bleibt leer/unsichtbar, solange ein Fach noch nicht
     begonnen wurde, damit die Karten nicht überladen wirken. */
  .mode-card-progress {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted-2);
  }

  .mode-card-progress:empty {
    display: none;
  }

  .chapter-card-done .mode-card-progress {
    color: var(--green-text);
  }

  /* "Zuletzt gelernt" — kompakter Wiedereinstiegs-Hinweis oberhalb der
     Fach-Karten. Erscheint nur, wenn tatsächlich ein Fach mit laufender
     Sitzung existiert (siehe renderLastLearnedBox()). Struktur/Optik
     kommt jetzt einheitlich aus den gemeinsamen .last-learned-*-Klassen
     weiter unten (der Artikeltrainer trägt dieselben Klassen wie alle
     anderen fünf Spiele) — keine eigene ID-Kopie mehr hier. */

  /* Such-/Filterfeld über den Fach-Karten — ebenfalls über die
     gemeinsamen .chapter-search-*-Klassen weiter unten gestylt. */
  /* .chapter-search-empty (Klasse) weiter unten deckt jetzt alle sechs
     Spiele ab, inklusive Artikeltrainer — keine eigene ID-Kopie mehr. */

  .chapter-card.search-hidden {
    display: none;
  }

  /* Responsive Spaltenzahl kommt jetzt einheitlich aus .chapter-cards-grid
     weiter unten (gilt für alle sechs Spiele). */

  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.001ms !important;
      transition-duration: 0.001ms !important;
    }
  }

  /* ============================================================
     VOKABELN-TRAINER: FACH-AUSWAHL (neu)
     Rein additiver Block ans Dateiende angehängt — dupliziert bewusst
     die bestehenden, bereits getesteten ID-Regeln oben (fuer den
     Artikeltrainer) als Klassen-Regeln, damit die neue Fach-Auswahl des
     Vokabeln-Trainers optisch IDENTISCH aussieht, ohne auch nur eine
     einzige bestehende Regel zu aendern oder zu ueberschreiben. Betrifft
     ausschliesslich die neuen #vocab-* Elemente. */
  .chapter-select-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px;
    gap: 18px;
  }

  .chapter-select-screen h1 {
    font-size: var(--titel-gross);
    font-weight: 800;
    letter-spacing: 0.01em;
    margin: 0;
  }

  .chapter-select-screen p.subtitle {
    font-size: clamp(15px, 3vw, 18px);
    color: var(--muted-2);
    margin: 0;
    /* KEIN Deckel mehr. 32em waren bei 18px 576 px -- die
       Unterzeile war damit schmaler als die Ueberschrift und
       stand mittig darunter (Design-Audit 05.09.2026). */
    max-width: none;
  }

  /* Die Niveau-Ueberschrift ueber einem Kartenblock (A1, A2, B1, B2)
     bei den 3000 Woertern. Sie hatte hier ueberhaupt keine eigene
     Regel und war deshalb eine gewoehnliche h2, links und klein.
     07.09.2026, Bo: "position these in the middle and make these LVL
     letter bigger".
     DIESELBEN WERTE STEHEN IN wort.css fuer die festen Seiten
     (Geschichten). Beide zusammen aendern. */
  .hoeren-niveau-titel {
    margin: 30px 0 0;
    text-align: center;
    font-size: clamp(28px, 5vw, 36px);
    font-weight: 800;
    letter-spacing: .02em;
  }
  .hoeren-niveau-stand {
    margin: 6px 0 0;
    text-align: center;
    color: var(--muted);
    font-size: 15px;
  }

  .chapter-cards-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    /* Alle Fachkarten gleich hoch (07.09.2026, Bo: "symmetrical").
       Ohne diese Zeile bekommt JEDE Zeile ihre eigene Hoehe: eine
       Reihe mit langen Wortlisten wird hoch, die naechste bleibt
       flach, und das Raster wirkt unruhig. "1fr" gibt allen Zeilen
       dieselbe Hoehe. Dieselbe Zeile steht in wort.css. */
    grid-auto-rows: 1fr;
    gap: 16px;
    width: 100%;
    max-width: 1600px;
  }

  @media (max-width: 1400px) {
    .chapter-cards-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  @media (max-width: 900px) {
    .chapter-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  @media (max-width: 640px) {
    .chapter-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 400px) {
    .chapter-cards-grid { grid-template-columns: 1fr; }
  }

  @media (max-width: 480px) {
    .chapter-select-screen {
      padding-inline: 16px;
    }
  }

  /* "Zuletzt gelernt" — dieselbe Optik wie beim Artikeltrainer
     (#last-learned-box etc.), hier als Klassen-Version fuer die Vokabeln-
     Fach-Auswahl (.last-learned-box etc. sind bereits die Klassennamen,
     die im HTML des Vokabeln-Trainers verwendet werden). */
  .last-learned-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-md);
    background: var(--btn-bg);
  }

  .last-learned-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 220px;
  }

  .last-learned-eyebrow {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
  }

  .last-learned-label {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
  }

  .last-learned-progress {
    font-size: 13px;
    color: var(--muted-2);
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
  }

  .last-learned-btn {
    flex: 0 0 auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--accent-text);
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    min-height: 44px;
  }

  .last-learned-btn:hover {
    opacity: 0.9;
  }

  @media (max-width: 560px) {
    .last-learned-box {
      flex-direction: column;
      align-items: stretch;
      text-align: start;
    }
    .last-learned-btn {
      width: 100%;
    }
  }

  /* Such-/Filterfeld ueber den Fach-Karten (Klassen-Version von
     #chapter-search-row etc.). */
  .chapter-search-row {
    margin: 0 0 14px;
  }

  .chapter-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--text);
    font-size: 16px;  /* 16px ist Pflicht: darunter zoomt das iPhone beim Antippen hinein */
    min-height: 44px;
  }

  .chapter-search-input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }

  .chapter-search-empty {
    color: var(--muted-2);
    font-size: 14px;
    margin: 4px 0 16px;
  }

  /* Fortschrittsbalken im Vokabeln-Trainer (Klassen-Version von
     #chapter-progress-block etc. — der Artikeltrainer hat diese Regeln
     bereits als ID-Selektoren; #vocab-chapter-progress-bar/-text nutzen
     dieselben Klassen, damit die Optik identisch ist). */
  /* max-width:100% (statt vorher 720px) gilt jetzt einheitlich in allen
     sechs Spielen — vorher setzten fünf von sechs Spielen dies per
     eigenem #<spiel>-screen-Override, SATZBAU vergaß es (Fortschrittsbalken
     dort schmaler als überall sonst). Jetzt an einer Stelle für alle. */
  .chapter-progress-block {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  .chapter-progress-bar {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 10px;
    border: none;
    border-radius: 999px;
    overflow: hidden;
    background: var(--btn-hover);
  }

  .chapter-progress-bar::-webkit-progress-bar {
    background: var(--btn-hover);
    border-radius: 999px;
  }

  /* Einheitlich grün in ALLEN sechs Spielen (vorher zeigten SATZBAU/
     VERBEN hier fälschlich die dunkle --accent-Farbe, während die
     anderen vier Spiele per Extra-Regel schon grün waren — jetzt hier
     an EINER Stelle für alle sechs festgelegt, die einzelnen
     #<spiel>-chapter-progress-bar-Overrides weiter unten sind entfernt). */
  .chapter-progress-bar::-webkit-progress-value {
    background: var(--green-border);
    border-radius: 999px;
    transition: width 200ms ease;
  }

  .chapter-progress-bar::-moz-progress-bar {
    background: var(--green-border);
    border-radius: 999px;
    transition: width 200ms ease;
  }

  .chapter-progress-text {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted-2);
  }


/* ================================================================
   ARTIKEL-REDESIGN-VORSCHAU (separate Vorschau-Kopie)
   ----------------------------------------------------------------
   Übernimmt die Optik 1:1 aus dem Claude-Design-Entwurf, den der
   Nutzer selbst erstellt hat ("DER DIE DAS - Prototyp.dc.html") —
   Farben, Schriftgrößen, Radien, Abstände sind direkt aus dessen
   Quelltext übernommen, nicht geschätzt.

   SCOPE: Betrifft nur Begrüßung (#welcome-screen), Lernbereich-Auswahl
   (#mode-select) und den ARTIKEL-Trainer (#chapter-select,
   #game-screen). Vokabeltrainer (#vocab-*), versteckter
   Englisch-Trainer (#english-screen), alle Daten/Logik/LocalStorage
   bleiben unangetastet.

   Der globale Header (#site-header) existiert nur EINMAL im Dokument
   für alle Bildschirme — damit der Vokabeltrainer optisch unverändert
   bleibt, wirkt der neue "schwebende Karte"-Header NUR, wenn gerade
   einer der oben genannten Bildschirme sichtbar ist (:has()-Scoping).
   ================================================================ */

/* ------------------------------------------------------------------
   DIE SCHWEBENDE KOPFZEILE GILT JETZT UEBERALL
   ------------------------------------------------------------------
   Bis zum 05.09.2026 standen hier DREI lange Listen der Art
       body:has(#irgendein-bildschirm:not(.hidden)) #site-header, ...
   Jeder neue Bildschirm musste in alle drei Listen eingetragen werden.
   Wer das vergass, bekam dort einen breiten Balken statt der
   schwebenden Karte -- der Kopf sah von Bildschirm zu Bildschirm
   anders aus. Genau das ist zweimal passiert: am 02.09.2026 bei drei
   Bildschirmen und am 05.09.2026 wieder bei den vier neuen
   (Bereiche, Hoeren-Niveaus, Hoeren-Liste, Hoeren-Text).

   Jetzt andersherum: die schwebende Karte ist der NORMALFALL fuer
   jede Seite, die dieses Blatt laedt. Damit kann die Liste nicht mehr
   veralten -- ein neuer Bildschirm sieht automatisch richtig aus.
   Dieselbe Kopfzeile tragen auch die eigenstaendigen Seiten
   (/spielen/, /hoeren-und-lesen/, die vier leeren Bereiche und die
   Rechtsseiten), weil sie dasselbe Blatt und dasselbe Markup nutzen.
   ------------------------------------------------------------------ */
body {
  background: var(--flaeche);
}

/* ==================================================================
   KOPFLEISTE (Stand 05.09.2026)
   ==================================================================
   Kundenwunsch, mit Bild einer anderen Seite: "header like this is
   better, i mean just design" -- eine flache Leiste ueber die GANZE
   Breite, Logo links, Bedienung rechts, darunter eine duenne Linie.
   Vorher war es ein abgerundeter Kasten, der mittig schwebte.

   Dazu (derselbe Tag): "the header should always scroll with the
   side, because the visitor maybe wants to change language during
   the visit" -- die Leiste bleibt jetzt beim Scrollen oben stehen.
   Eine schwebende Kachel, die mitscrollt, saehe komisch aus; ueber
   die volle Breite ist genau das der uebliche und ruhige Weg.

   Der Hintergrund ist leicht durchscheinend (0,92) mit Weichzeichner
   dahinter -- so sieht man, dass darunter etwas weiterlaeuft, ohne
   dass der Text unlesbar wird. Browser ohne backdrop-filter zeigen
   einfach die 0,92-Flaeche, das reicht auch.

   ACHTUNG: dieselben Werte stehen in styles.css UND in wort.css.
   Die zwei Kopfleisten muessen pixelgleich bleiben (Kundenwunsch
   05.09.2026: "these two header not the same"). Wer hier etwas
   aendert, aendert es in BEIDEN Dateien.
   ================================================================== */
#site-header {
  position: sticky;
  top: 0;
  z-index: 70;
  width: auto;
  max-width: none;
  margin: 0;
  /* Der Balken geht ueber die ganze Breite, sein INHALT steht aber
     genau da, wo auch der Text der Seite anfaengt. Bei breiten
     Fenstern der halbe Ueberhang plus der normale Rand, bei
     schmalen nur der normale Rand. Gemessen: 0 px Unterschied
     zwischen Zurueck-Pfeil und Ueberschrift.
     DIESELBE REGEL in wort.css. */
  padding-block: 12px;
  padding-inline: max(var(--seite-pad),
                      calc((100% - var(--seite-max)) / 2 + var(--seite-pad)));
  background: var(--n-kopf-schleier);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: var(--n-kopf-schatten);
}

/* Schmale Handys: die Kopfleiste hat viel Inhalt (Pfeil, Logo, Name,
   Sprache, Ton, Hell/Dunkel). Bei 375 px stand sie 11 px ueber den
   Rand hinaus und die ganze Seite liess sich seitwaerts schieben.
   Deshalb: engere Abstaende, und unter 400 px faellt der Schriftzug
   "Ananas" weg -- das Logo daneben sagt dasselbe.
   DIESELBEN WERTE in styles.css und wort.css. */
@media (max-width: 480px) {
  #site-header { padding-block: 10px; gap: 8px; }
  .site-header-actions { gap: 8px; }
  .site-brand-logo { height: 34px; width: 34px; }
  .site-brand-name { font-size: 17px; }
}

@media (max-width: 400px) {
  #site-header { gap: 6px; }
  .site-header-actions { gap: 6px; }
  .site-brand-name { display: none; }
}



/* ==================================================================
   ZURUECK-PFEIL IN DER KOPFZEILE (05.09.2026)
   ==================================================================
   Ein einziger Weg zurueck fuer die ganze Seite. Er steht LINKS vom
   Ananas-Logo, also dort, wo auch der Browser seinen Zurueck-Knopf
   hat -- das muss niemand suchen.

   WICHTIG fuer das Layout: die Kopfzeile war
   "justify-content: space-between" mit genau zwei Kindern (Logo
   links, Bedienknoepfe rechts). Mit dem Pfeil sind es drei -- dann
   waere das Logo in die Mitte gerutscht. Deshalb jetzt
   flex-start plus "margin-inline-start: auto" an den Bedienknoepfen:
   Pfeil und Logo bleiben zusammen links, die Knoepfe rechts.
   ================================================================== */
#site-header { justify-content: flex-start; }
#site-header .site-header-actions { margin-inline-start: auto; }

.kopf-zurueck {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 22px;
  line-height: 1;
  color: var(--text);
  background: var(--btn-hover);
  border: 1px solid var(--btn-border);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease;
}

.kopf-zurueck:hover { background: var(--border); }

/* Arabisch laeuft von rechts nach links -- dann zeigt der Pfeil auch
   nach rechts, sonst weist er aus der Seite hinaus. */
[dir="rtl"] .kopf-zurueck > span { transform: scaleX(-1); }

@media (max-width: 480px) {
  .kopf-zurueck { width: 38px; height: 38px; font-size: 19px; }
}

/* ------------------------------------------------------------------
   ZURUECK-PFEIL NUR AUF HANDY UND TABLET (06.09.2026)
   ------------------------------------------------------------------
   Kundenmeldung: "this button makes problems in the site, can we do
   something, so that this button appears only on phone and tablet
   version but not on normal PC site version?"

   Der Pfeil wurde am 05.09.2026 eingebaut, weil die INSTALLIERTE App
   (manifest: "display": "standalone") keine Browser-Knoepfe hat --
   dort kaeme man sonst nicht zurueck. In einem normalen Browser auf
   dem PC gibt es den Zurueck-Knopf aber schon, und dann stehen zwei
   Pfeile nebeneinander.

   WARUM NICHT NUR NACH BILDSCHIRMBREITE:
   Ein Tablet quer ist so breit wie ein kleiner Laptop. Deshalb wird
   zusaetzlich gefragt, ob ein ZEIGEGERAET da ist:
       hover: hover   der Zeiger kann ueber etwas schweben (Maus)
       pointer: fine  genaues Zeigen (Maus), nicht der Finger
   Beides zusammen mit breitem Bildschirm heisst: richtiger PC.
   Ein Tablet erfuellt "pointer: fine" nicht und behaelt den Pfeil.

   DIE AUSNAHME DARUNTER IST WICHTIG:
   Wer die Seite als App installiert hat, hat auch auf dem PC keine
   Browser-Knoepfe. Dort muss der Pfeil bleiben, sonst sitzt man fest.
   Sie steht bewusst NACH der Regel darueber -- bei gleicher Staerke
   gewinnt die spaetere (Fehlerliste Q23).
   ------------------------------------------------------------------ */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .kopf-zurueck { display: none; }
}

@media (display-mode: standalone) {
  .kopf-zurueck { display: inline-flex; }
}


/* ---------------- Begrüßung (Hero) ---------------- */

#welcome-screen {
  position: relative;
  /* KEIN overflow:hidden hier -- das schneidet auf kurzen Handy-
     Bildschirmen den "Jetzt lernen"-Knopf ab, weil #welcome-screen
     per flex:1 nur einen begrenzten Platz bekommt und der Inhalt
     dann nicht mehr scrollen kann. Die Farbkreise (.welcome-decor)
     haben ihr eigenes overflow:hidden und werden dadurch weiterhin
     sauber am Rand abgeschnitten. */
  padding: 0 24px;
  gap: 0;
}

/* ==================================================================
   HINTERGRUNDBILDER AUF DREI BILDSCHIRMEN (Kundenwunsch 06.09.2026)
   ==================================================================
   Bo: "please change our background in the site". Vier eigene Bilder,
   je hell und dunkel:
     Willkommen                      -> --hg-start
     Los geht's (#bereich-select)    -> --hg-bereiche
     Die neun Spiele (#mode-select)  -> --hg-bereiche

   WARUM EIN ::before UND KEIN background AUF DEM ABSCHNITT SELBST:
   Die Bildschirme sind unterschiedlich hoch. Mit "cover" direkt auf
   dem Abschnitt wuerde das Bild auf einer langen Seite mitwachsen,
   und die gezeichneten Ecken (Ananas, Blaetter) waeren gar nicht mehr
   zu sehen. Das ::before liegt FEST im Fenster (position: fixed) --
   das Bild bleibt beim Scrollen ruhig stehen und immer vollstaendig.

   background-attachment: fixed waere der kuerzere Weg, ruckelt aber
   auf iPhone-Safari. Deshalb dieser Umweg.

   WARUM z-index 0 UND NICHT -1 (gemessen am 06.09.2026):
   Mit -1 war das Bild UNSICHTBAR. Grund: <html> hat eine eigene
   Flaechenfarbe (rgb(255,254,251)) und ist damit die Leinwand --
   die Farbe von <body> (rgb(250,249,245)) wird deshalb wie ein
   ganz normaler Kasten DARUEBER gemalt und deckt alles mit
   negativem z-index zu.
   Jetzt liegt das Bild bei 0 und der Inhalt der drei Bildschirme
   wird auf 1 gehoben. Am body wurde nichts geaendert -- er faerbt
   weiter alle anderen Bildschirme.
   ================================================================== */
#welcome-screen::before,
#mode-select::before,
#bereich-select::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Der Inhalt muss ueber das Bild. Nur die direkten Kinder anheben --
   tiefer greifen waere unnoetig und koennte fremde Stapel stoeren. */
#welcome-screen > *,
#mode-select > *,
#bereich-select > * {
  position: relative;
  z-index: 1;
}

#welcome-screen::before { background-image: var(--hg-start); }
#mode-select::before,
#bereich-select::before { background-image: var(--hg-bereiche); }

/* SCHMALE BILDSCHIRME (Handy hochkant)
   ------------------------------------------------------------------
   Bos Bilder sind 16:9 (3840 x 2160). Auf einem Handy im Hochformat
   (375 x 812) schneidet "cover" davon einen schmalen senkrechten
   Streifen aus der MITTE heraus -- und die Mitte ist bei allen vier
   Bildern leer. Die Zeichnungen sitzen in den Ecken.
   GEMESSEN: bei 375 px Breite sieht man 26 % der Bildbreite, genau
   den leeren Teil.
   Deshalb wird auf schmalen Bildschirmen an den RECHTEN Rand
   angelegt -- dort stehen bei beiden Bildern die Blaetter. */
@media (max-width: 700px) {
  #welcome-screen::before,
  #mode-select::before,
  #bereich-select::before {
    background-position: right center;
  }
}

/* Die gezeichneten Kreise und Punkte auf dem Willkommen-Bildschirm
   sind seit dem Hintergrundbild doppelt gemoppelt: das Bild bringt
   selbst einen gelben Bogen links oben und Blaetter rechts unten.
   Bo hat dem Ausblenden zugestimmt.
   AUSGEBLENDET, NICHT GELOESCHT -- wer das Bild wieder herausnimmt,
   hat die Kreise mit einer Zeile zurueck. Das HTML dazu steht
   weiterhin in index.html bei .welcome-decor. */
.welcome-decor { display: none; }

.welcome-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.welcome-blob {
  position: absolute;
  border-radius: 58% 42% 40% 60% / 55% 45% 55% 45%;
  opacity: 0.85;
}

.welcome-blob-green {
  inset-inline-start: -90px;
  bottom: 10%;
  width: 230px;
  height: 230px;
  background: #4caf50;
}

.welcome-blob-gold {
  inset-inline-end: -70px;
  top: 8%;
  width: 210px;
  height: 210px;
  border-radius: 45% 55% 60% 40% / 50% 60% 40% 50%;
  background: #f2b229;
  opacity: 0.9;
}

.welcome-dot {
  position: absolute;
  border-radius: 999px;
}

.welcome-dot-1 { left: 15%; top: 18%; width: 26px; height: 26px; background: #a8d5ae; }
.welcome-dot-2 { right: 22%; top: 30%; width: 50px; height: 50px; background: #fff3d6; }
.welcome-dot-3 { right: 18%; bottom: 20%; width: 20px; height: 20px; background: #e5484d; }

.welcome-hero {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
  padding: 64px 0;
}

/* Nutzerwunsch: Logo OHNE Karte/Hintergrund/Schatten — einfach das
   (transparente) PNG selbst, direkt auf dem Seitenhintergrund. Der
   Container bleibt nur für Größe/Zentrierung erhalten, aber ohne
   jede eigene Optik (kein #fff, kein Radius, kein Schatten, kein
   Padding). */
.welcome-logo-card {
  flex: none;
  width: clamp(180px, 22vw, 220px);
  height: clamp(180px, 22vw, 220px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-logo-card .welcome-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Die Basis-Regel ".welcome-logo" (weiter oben) setzt border-radius +
     box-shadow direkt aufs <img> — das erzeugt einen rechteckigen
     Schatten/"Kasten" um das Bild, selbst wenn das PNG selbst
     transparent ist (Schatten folgt der Box, nicht den sichtbaren
     Pixeln). Hier bewusst zurückgesetzt, damit wirklich nur das PNG
     zu sehen ist, ganz ohne Rahmen/Schatten/Kasten. */
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
}

.welcome-copy {
  max-width: 520px;
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#welcome-screen .welcome-copy h1 {
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--accent);
  text-wrap: balance;
}

#welcome-screen .welcome-copy p.subtitle {
  font-size: 18px;
  color: var(--n-grau-g);
  margin: 0;
  max-width: none;
}

#welcome-screen .welcome-copy .welcome-start-btn {
  align-self: flex-start;
  margin-top: 8px;
  background: var(--accent);
  border-color: var(--accent);
  border-radius: 999px;
  padding: 16px 28px;
}

#welcome-screen .welcome-copy .welcome-start-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* ================================================================
   ANANAS AUFS GERAET HOLEN (Installieren) -- 06.09.2026
   ================================================================
   Bewusst LEISE gebaut: der grosse dunkle Knopf "Jetzt lernen"
   bleibt der Hauptweg. Die drei Installier-Knoepfe stehen kleiner
   und nur mit Rand darunter, damit der Willkommen-Bildschirm nicht
   vier gleich laute Knoepfe bekommt.

   ALLE FARBEN ALS VARIABLE, nie fest -- sonst bricht der dunkle
   Modus lautlos (Regel O2 / Punkt 101 der Fehlerliste).
   ================================================================ */
.install-block {
  align-self: flex-start;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.install-titel {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--n-grau-g);
}

.install-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.install-knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--n-tinte);
  background: var(--flaeche);
  border: 2px solid var(--n-rand-3);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

.install-knopf:hover {
  border-color: var(--accent);
  background: var(--n-feld-hover);
}

.install-knopf:active { transform: scale(0.98); }

.install-zeichen { font-size: 17px; line-height: 1; }

/* Das Geraet, auf dem der Besucher gerade sitzt, bekommt einen
   kraeftigeren Rand. Nicht die volle Farbflaeche -- sonst haette der
   Bildschirm zwei gleich starke Hauptknoepfe. */
.install-knopf-eigenes {
  border-color: var(--accent);
  border-width: 2px;
  background: var(--n-feld-hover);
}

/* Die Hinweiszeile ist am Anfang leer. Ihr Platz bleibt trotzdem
   reserviert, sonst springen die Knoepfe beim ersten Klick nach oben
   (Regel 38: Platz VORHER freihalten). */
.install-hinweis {
  margin: 0;
  min-height: 40px;
  max-width: 42ch;
  font-size: 14px;
  line-height: 1.45;
  color: var(--n-grau-g);
}

/* Ist Ananas schon installiert, sind die Knoepfe sinnlos. Dann bleibt
   nur die Zeile "Ananas ist auf diesem Geraet installiert." */
.install-block-fertig .install-knoepfe { display: none; }

@media (max-width: 760px) {
  .welcome-hero { text-align: center; padding: 40px 0; gap: 28px; }
  .welcome-copy { text-align: center; align-items: center; }
  #welcome-screen .welcome-copy .welcome-start-btn { align-self: center; }
  .install-block { align-self: center; align-items: center; }
  .install-knoepfe { justify-content: center; }
  .install-hinweis { text-align: center; }
}

/* ---------------- Lernbereich-Auswahl (mode-select) ---------------- */

/* Der Rand ist bei ALLEN Bildschirmen gleich (48 px, auf dem Handy
   16 px) -- sonst steht der Zurueck-Knopf hier 24 px weiter links als
   auf den Fach-Auswahlen. Vom Betriebsinhaber am 05.09.2026 gemeldet:
   "the position of these and other buttons should be always the
   same". Wer den Wert aendert, aendert ihn auch bei
   .chapter-select-page und #bereich-select. */
#mode-select,
#bereich-select {
  padding: 0 var(--seite-pad) var(--abstand-2xl);
  justify-content: flex-start;
  gap: 12px;
  /* Dieselbe Kiste wie ueberall sonst. Frueher 1400 px -- damit war
     dieser Bildschirm breiter als der Rest der Seite
     (Design-Audit 05.09.2026). */
  max-width: var(--seite-max);
  /* Links, nicht mittig. Der Bildschirm ist ein Flex-Kasten mit
     align-items: center -- dadurch stand die Ueberschrift in der
     Mitte, waehrend sie auf allen anderen Seiten links beginnt. */
  align-items: stretch;
  text-align: start;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}

/* ------------------------------------------------------------------
   AUSNAHME FUER #bereich-select: SENKRECHT IN DIE MITTE
   ------------------------------------------------------------------
   Kundenwunsch 05.09.2026 (Bo): "same space to top and bottom".
   Die Klasse .inhalt-mitte-hoch weiter unten setzt dafuer
   justify-content und nimmt den unteren Innenabstand weg -- aber die
   Regel DARUEBER ist eine ID-Liste (1-0-0) und schlaegt jede Klasse
   (0-1-0). Genau die Falle aus Fehlerliste Q26: gemessen stand
   justify-content danach weiter auf flex-start, die Klasse hatte
   sichtbar nichts bewirkt.

   WARUM NICHT EINFACH #bereich-select AUS DER LISTE OBEN NEHMEN:
   Dort steht der seitliche Rand, und der MUSS auf allen Bildschirmen
   derselbe sein -- steht ausdruecklich als Kundenwunsch im Kommentar
   darueber ("the position of these and other buttons should be always
   the same"). Zwei Kopien davon wuerden frueher oder spaeter
   auseinanderlaufen. Deshalb bleibt die Liste, und hier stehen nur
   die zwei Werte, die fuer diesen einen Bildschirm anders sind.

   STAND 05.09.2026: nur #bereich-select. #mode-select blieb oben
   angeschlagen.
   GEAENDERT AM 06.09.2026 AUF BOS WUNSCH: Er hat den ganzen Block auf
   /lernbereiche/ eingekringelt und geschrieben "it should be in the
   middle of the screen, horizontal and vertical". Gemessen war es
   vorher bei 1500 x 950: 44 px Luft ueber dem Inhalt, 215 px darunter.
   Jetzt steht #mode-select genauso da wie #bereich-select.

   WARUM DIE ID DAVORSTEHEN MUSS: #mode-select setzt weiter oben
   justify-content: flex-start. Eine ID (1-0-0) schlaegt eine Klasse
   (0-1-0) -- die allgemeine Regel .inhalt-mitte-hoch allein wuerde
   also gar nicht greifen (Fehlerliste Q26).
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   LUFT ZUR FUSSZEILE  (10.09.2026)
   ------------------------------------------------------------------
   Bo: "The last game is too close to the footer. Please let some
   space there."
   GEMESSEN vorher, Fenster 375 x 812:
     /lernbereiche/  letzte Spielkarte -> Fusszeile   0 px
     /bereiche/      letzte Karte      -> Fusszeile   0 px
     /artikel-faecher/ und alle anderen Auswahlseiten 48 px
   Die Karte klebte also direkt an der Trennlinie. 48 px ist der
   Hausabstand (--abstand-2xl), den jede andere Auswahlseite schon
   hat -- darum dieselbe Zahl und keine neue.

   ⚠️ WARUM OBEN UND UNTEN GLEICH VIEL
   Hier stand vorher "padding-bottom: 0" mit der Begruendung: ein
   unterer Innenabstand allein verschiebt die senkrechte Mitte nach
   oben. Das stimmt -- nachgemessen bei 1500 x 1000: mit 28 px nur
   unten wurde aus 125/125 ein 111/139. Bo hatte die Mitte am
   06.09.2026 ausdruecklich bestellt ("it should be in the middle of
   the screen, horizontal and vertical").
   Oben UND unten derselbe Wert loest beides: die Mitte bleibt die
   Mitte, und auf langen Bildschirmen entsteht die Luft.
   NACHGEMESSEN mit dieser Regel:
     1500 x 1000  /bereiche/     190/190   unveraendert
     1500 x 1000  /lernbereiche/ 125/125   unveraendert
      375 x  812  /lernbereiche/  48/48    (vorher 0/0)
      375 x  812  /bereiche/      48/48    (vorher 32/0)
   WER HIER NUR UNTEN ETWAS EINTRAEGT, ZERSTOERT DIE MITTE.
   ------------------------------------------------------------------ */
#mode-select.inhalt-mitte-hoch,
#bereich-select.inhalt-mitte-hoch {
  justify-content: safe center;
  padding-top: var(--abstand-2xl);
  padding-bottom: var(--abstand-2xl);
}

/* Auf schmalen Bildschirmen hat "Los geht's" noch 32 px eigenen
   Abstand nach oben. Zusammen mit den 48 px von oben waeren das 80 --
   zu viel. #mode-select macht das ein paar Zeilen weiter unten schon
   genauso; jetzt stehen die beiden Zwillingsseiten wirklich gleich
   da. Auf breiten Bildschirmen ist dieser Abstand ohnehin 0, dort
   aendert die Zeile nichts (gemessen: 190/190 bleibt 190/190). */
#bereich-select.inhalt-mitte-hoch h1 {
  margin-top: 0;
}

@media (max-width: 480px) {
}

/* Abstand zwischen dem globalen Header (#site-header, oben auf JEDEM
   Bildschirm sichtbar) und der Überschrift "Was möchtest du lernen?" --
   #mode-select selbst hat bewusst kein Padding oben (siehe oben), daher
   bekommt die Überschrift hier ihren eigenen margin-top. Gleicher Wert
   (32px) wie bei #chapter-select h1 / #vocab-chapter-select h1 /
   #plural-chapter-select h1, damit der Abstand unter dem Header auf
   allen "Auswahl"-Bildschirmen einheitlich wirkt. */
#mode-select h1 {
  margin-top: 32px;
}

/* Steht der Bildschirm in der senkrechten Mitte, muss dieser Abstand
   weg. Er war dafuer da, die Ueberschrift von der Kopfleiste
   abzusetzen, solange der Inhalt OBEN angeschlagen war. In der Mitte
   zaehlt er als Teil des Inhalts mit und schiebt alles nach unten:
   gemessen 152 px Luft oben gegen 108 px unten. Ohne ihn ist es
   gleich (06.09.2026). */
#mode-select.inhalt-mitte-hoch h1 {
  margin-top: 0;
}

/* Die drei Lernspiel-Karten (DER · DIE · DAS / WÖRTER / PLURAL) stehen
   ab einer bestimmten Bildschirmbreite NEBENEINANDER statt wie zuvor
   als sehr große Karten untereinander (Kundenanforderung: auf dem PC
   wird sonst unnötig viel Platz verbraucht). Ein responsives CSS-Grid
   übernimmt automatisch:
     - alle Karten EINER Zeile werden gleich hoch (kein Abschneiden
       nötig -- lange Übersetzungen in DE/EN/RU bleiben immer
       vollständig lesbar, siehe #mode-select .mode-card unten);
     - die DOM-Reihenfolge (1. DER · DIE · DAS, 2. WÖRTER, 3. PLURAL)
       bleibt auf JEDER Bildschirmgröße unverändert -- das Grid ändert
       nur Breite/Zeilenumbruch, nie die Reihenfolge der Karten.
   Handy (< 600px, Standard hier): 1 Spalte, alle drei Karten
   untereinander, volle Breite.
   Tablet (≥ 600px): 2 Spalten, PLURAL darunter über die volle Breite
   (vom Kunden ausdrücklich erlaubte Alternative zu 3 schmalen Spalten).
   Großer PC (≥ 1000px): 3 Spalten, alle drei Karten in einer Reihe. */
#mode-select #mode-cards {
  /* WICHTIG: "width: 100%" statt einer festen vw-Berechnung -- 100%
     bezieht sich korrekt auf die bereits um das seitliche Padding von
     #mode-select (24px links/rechts, siehe oben) reduzierte Content-
     Box des Elternelements. Die vorherige Berechnung
     "min(1200px, calc(100vw - 32px))" ging fälschlich von nur 16px
     Padding pro Seite aus (100vw - 32px = 2 × 16px) statt der
     tatsächlichen 24px -- dadurch war die Karten-Box auf schmalen
     Bildschirmen 16px zu breit und lief rechts in das Padding hinein
     (linker Abstand blieb korrekt bei 24px, rechter Abstand schrumpfte
     auf nur 8px). Mit width: 100% passt die Breite sich automatisch an
     JEDES Padding von #mode-select an, auch falls es sich später ändert. */
  max-width: 1200px;
  width: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  /* Alle Spielkarten gleich hoch (07.09.2026, Bo: "symmetrical").
     "align-items: stretch" macht sie nur innerhalb EINER Zeile
     gleich; erst "grid-auto-rows: 1fr" gibt allen Zeilen dieselbe
     Hoehe. Sonst ist die Reihe mit den langen Beschreibungen hoeher
     als die naechste. */
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 16px;
  margin-top: 28px;
}

@media (min-width: 600px) {
  #mode-select #mode-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* PLURAL (3. Karte) nimmt auf dem Tablet die volle Breite der
     zweiten Zeile ein, statt allein neben einer Lücke zu stehen. */
  #mode-plural-btn {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  #mode-select #mode-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #mode-plural-btn {
    grid-column: auto;
  }
}

/* Kompakte Karte statt der bisherigen sehr hohen Reihen-Karte: Icon
   oben, Titel + Beschreibung darunter, Pfeil oben rechts als kleines,
   abgesetztes Rund-Icon (siehe .mode-card-chevron) -- dadurch bleibt
   der eigentliche Inhaltsfluss (Icon/Titel/Beschreibung) für alle drei
   Karten an exakt derselben Position, unabhängig von der Textlänge.
   height: 100% + das Grid oben (align-items: stretch, Standard bei
   CSS-Grid) sorgen dafür, dass alle Karten einer Zeile automatisch
   gleich hoch werden. */
#mode-select .mode-card,
#bereich-select .mode-card {
  position: relative;
  /* KUNDENWUNSCH 06.09.2026, mit Bild: das Symbol steht NEBEN dem
     Text, nicht darueber. Bo: "can u make buttons like that?"
     Vorher: flex-direction column (Symbol oben, Text darunter).
     GILT NUR FUER DIESE 15 KARTEN. Die Klasse .mode-card tragen
     auch die 411 Fach-Karten in den Spielen -- die bleiben, wie sie
     sind. Deshalb steht hier #mode-select bzw. #bereich-select davor
     und nicht .mode-card allein. */
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: start;
  gap: 16px;
  max-width: none;
  width: 100%;
  height: 100%;
  /* rechts mehr Platz: dort sitzt der runde Pfeil-Knopf */
  padding: 22px 60px 22px 22px;
  border-radius: var(--radius-card);
}

/* Farbe der Lernbereich-Karten
   ------------------------------------------------------------------
   Jede Karte hat einen eigenen, sehr hellen Farbton. Die Farben
   wechseln bewusst ab (gruen, gold, blau, rot, orange, schwarz), damit
   man die sechs Bereiche schon an der Farbe auseinanderhaelt. Aufbau
   ist bei allen Karten identisch: heller Hintergrund, dazu passender
   Rahmen, beim Ueberfahren eine Stufe kraeftiger. Symbol und Pfeil
   tragen dieselbe Farbe (siehe .mode-card-icon-* und .mode-card-chevron
   weiter unten). */

/* 1) DER · DIE · DAS — gruen */
#mode-article-btn { background: var(--k-artikel-bg); border-color: var(--k-artikel-rand); }
#mode-article-btn:hover { background: var(--k-artikel-bgh); border-color: var(--k-artikel-randh); }

/* 2) WORTSCHATZ — gold */
#mode-vocab-btn { background: var(--k-vokabel-bg); border-color: var(--k-vokabel-rand); }
#mode-vocab-btn:hover { background: var(--k-vokabel-bgh); border-color: var(--k-vokabel-randh); }

/* 3) PLURAL — blau */
#mode-plural-btn { background: var(--k-plural-bg); border-color: var(--k-plural-rand); }
#mode-plural-btn:hover { background: var(--k-plural-bgh); border-color: var(--k-plural-randh); }

/* 4) SATZBAU — rot */
#mode-satzbau-btn { background: var(--k-satzbau-bg); border-color: var(--k-satzbau-rand); }
#mode-satzbau-btn:hover { background: var(--k-satzbau-bgh); border-color: var(--k-satzbau-randh); }

/* 5) VERBEN — orange */
#mode-verben-btn { background: var(--k-verben-bg); border-color: var(--k-verben-rand); }
#mode-verben-btn:hover { background: var(--k-verben-bgh); border-color: var(--k-verben-randh); }

/* 6) DER RICHTIGE FALL — schwarz/grau */
#mode-fall-btn { background: var(--k-fall-bg); border-color: var(--k-fall-rand); }
#mode-fall-btn:hover { background: var(--k-fall-bgh); border-color: var(--k-fall-randh); }

/* Die folgenden vier Toene sind eine Spur kraeftiger gesetzt als die
   fuenf oben. Grund: bei neun Pastellkarten nebeneinander lagen die
   ersten Entwuerfe messbar zu nah beieinander (Tuerkis fast auf Gruen,
   Indigo fast auf Blau). Jetzt ist jede Karte auf den ersten Blick
   unterscheidbar, ohne dass der helle Gesamteindruck kippt. */

/* 7) PRAEPOSITIONEN — tuerkis */
#mode-praep-btn { background: var(--k-praep-bg); border-color: var(--k-praep-rand); }
#mode-praep-btn:hover { background: var(--k-praep-bgh); border-color: var(--k-praep-randh); }

/* 8) ADJEKTIV-ENDUNGEN — lavendel */
#mode-adj-btn { background: var(--k-adj-bg); border-color: var(--k-adj-rand); }
#mode-adj-btn:hover { background: var(--k-adj-bgh); border-color: var(--k-adj-randh); }

/* 9) PERFEKT — magenta */
#mode-perfekt-btn { background: var(--k-perfekt-bg); border-color: var(--k-perfekt-rand); }
#mode-perfekt-btn:hover { background: var(--k-perfekt-bgh); border-color: var(--k-perfekt-randh); }

/* 10) TRENNBARE VERBEN — limette
   Bewusst ein gelbliches Gruen, damit es sich vom blaeulichen
   Mintgruen der ersten Karte (DER · DIE · DAS) klar unterscheidet. */
#mode-trennbar-btn { background: var(--k-trennbar-bg); border-color: var(--k-trennbar-rand); }
#mode-trennbar-btn:hover { background: var(--k-trennbar-bgh); border-color: var(--k-trennbar-randh); }

#mode-hoeren-btn { background: var(--k-hoeren-bg); border-color: var(--k-hoeren-rand); }
#mode-hoeren-btn:hover { background: var(--k-hoeren-bgh); border-color: var(--k-hoeren-randh); }

.mode-card-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  /* Grundgroesse fuer alle Karten. Die 15 Karten von #mode-select und
     #bereich-select bekommen weiter unten eine groessere Fassung. */
  background: var(--card);
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mode-card-icon-vocab {
  color: #92600a;
  background: #fdecc4;
}

.mode-card-icon-plural {
  color: #1a5fb4;
  background: #dbeafe;
}

.mode-card-icon-satzbau {
  color: #c62828;
  background: #fbdedb;
}

.mode-card-icon-verben {
  color: #c2620f;
  background: #fde3cd;
}

.mode-card-icon-der, .mode-card-icon-die, .mode-card-icon-das {
  font-weight: 800;
  font-size: 11px;
  line-height: 1.1;
}

.mode-card-icon-der { color: var(--accent); }
.mode-card-icon-die { color: var(--sym-die); }
.mode-card-icon-das { color: var(--sym-das); }

.mode-card-icon-bar {
  width: 20px;
  height: 3px;
  border-radius: 999px;
  background: #34a853;
  margin-top: 2px;
}

#mode-select .mode-card-text,
#bereich-select .mode-card-text {
  flex: 1;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#mode-select .mode-card-title,
#mode-select .mode-card-desc,
#bereich-select .mode-card-title,
#bereich-select .mode-card-desc {
  text-align: start;
}

/* Eigene, etwas kompaktere Schriftgröße nur für die Lernbereich-Auswahl
   (die allgemeine .mode-card-title/.mode-card-desc-Regel bleibt für die
   Fach-Auswahl-Karten unverändert) -- für alle drei Karten identisch,
   unabhängig von Sprache/Textlänge. */
#mode-select .mode-card-title,
#bereich-select .mode-card-title {
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.25;
}

#mode-select .mode-card-desc,
#bereich-select .mode-card-desc {
  /* 06.09.2026 von 13,5 auf 14 px: auf Bos Vorlage ist die Zeile
     unter der Ueberschrift deutlich besser lesbar. Eine Lernseite
     darf ihre Erklaerzeile nicht kleiner setzen als noetig. */
  font-size: 14px;
  line-height: 1.45;
}

.mode-card-chevron {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  box-shadow: 0 1px 2px var(--schatten-mittel);
  color: var(--muted);
}

#mode-article-btn .mode-card-chevron { color: var(--k-artikel-akzent); }
#mode-vocab-btn   .mode-card-chevron { color: var(--k-vokabel-akzent); }
#mode-plural-btn  .mode-card-chevron { color: var(--k-plural-akzent); }
#mode-satzbau-btn .mode-card-chevron { color: var(--k-satzbau-akzent); }
#mode-verben-btn  .mode-card-chevron { color: var(--k-verben-akzent); }
#mode-fall-btn    .mode-card-chevron { color: var(--accent); }
#mode-praep-btn   .mode-card-chevron { color: var(--k-praep-akzent); }
#mode-adj-btn     .mode-card-chevron { color: var(--k-adj-akzent); }
#mode-perfekt-btn .mode-card-chevron { color: var(--k-perfekt-akzent); }
#mode-trennbar-btn .mode-card-chevron { color: var(--k-trennbar-akzent); }
#mode-hoeren-btn  .mode-card-chevron { color: var(--k-hoeren-akzent); }

/* Groesseres Symbol und mehr Luft -- nur auf den 15 grossen Karten.
   Auf Bos Vorlage ist das Symbol deutlich kraeftiger als heute und
   sitzt auf einer Hoehe mit der Ueberschrift. */
#mode-select .mode-card-icon,
#bereich-select .mode-card-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  margin-top: 2px;
}

#mode-select .mode-card-text,
#bereich-select .mode-card-text {
  gap: 6px;
  padding-top: 4px;
}

/* NEUE 3D-SYMBOLE FUER DIE NEUN SPIEL-KARTEN (15.09.2026, Bo:
   "change the buttons in the game" mit den Vorlagen aus
   "1 new buttons design/for the games").
   Vorher steckten hier ein SVG-Strichsymbol oder kleine Textkuerzel
   (der/die/das, Akk./Dat., -e/-en, hat/ge-, steh/auf) in einer
   farbigen oder weissen Kachel. Die neuen Bilder
   (webseite/assets/spiele/*.webp, gebaut von
   3-REGELN-UND-NOTIZEN/WERKZEUGE/spiel-symbole-bauen.py) bringen ihre
   Farbe und Form schon mit -- dieselbe Behandlung wie bei den sechs
   Bereichs-Symbolen vom 12.09.2026 (siehe
   "#bereich-cards .bereich-card-icon" weiter unten): keine Kachel,
   kein Kachel-Schatten, dafuer etwas groesser und mit Hebe-Effekt.
   mode-fall ist nicht dabei -- die Karte ist abgeschaltet (hidden)
   und behaelt ihr altes Text-Symbol fuer den Fall, dass sie je
   wieder gebraucht wird. */
#mode-select .mode-card-icon-article,
#mode-select .mode-card-icon-vocab,
#mode-select .mode-card-icon-plural,
#mode-select .mode-card-icon-satzbau,
#mode-select .mode-card-icon-verben,
#mode-select .mode-card-icon-praep,
#mode-select .mode-card-icon-adj,
#mode-select .mode-card-icon-perfekt,
#mode-select .mode-card-icon-trennbar {
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  width: 64px;
  height: 64px;
  margin-top: -4px;
}
#mode-select .mode-card-icon-article img,
#mode-select .mode-card-icon-vocab img,
#mode-select .mode-card-icon-plural img,
#mode-select .mode-card-icon-satzbau img,
#mode-select .mode-card-icon-verben img,
#mode-select .mode-card-icon-praep img,
#mode-select .mode-card-icon-adj img,
#mode-select .mode-card-icon-perfekt img,
#mode-select .mode-card-icon-trennbar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 180ms ease;
}
#mode-select .mode-card:hover .mode-card-icon-article img,
#mode-select .mode-card:hover .mode-card-icon-vocab img,
#mode-select .mode-card:hover .mode-card-icon-plural img,
#mode-select .mode-card:hover .mode-card-icon-satzbau img,
#mode-select .mode-card:hover .mode-card-icon-verben img,
#mode-select .mode-card:hover .mode-card-icon-praep img,
#mode-select .mode-card:hover .mode-card-icon-adj img,
#mode-select .mode-card:hover .mode-card-icon-perfekt img,
#mode-select .mode-card:hover .mode-card-icon-trennbar img {
  transform: translateY(-3px) scale(1.04);
}
@media (max-width: 560px) {
  #mode-select .mode-card-icon-article,
  #mode-select .mode-card-icon-vocab,
  #mode-select .mode-card-icon-plural,
  #mode-select .mode-card-icon-satzbau,
  #mode-select .mode-card-icon-verben,
  #mode-select .mode-card-icon-praep,
  #mode-select .mode-card-icon-adj,
  #mode-select .mode-card-icon-perfekt,
  #mode-select .mode-card-icon-trennbar { width: 54px; height: 54px; margin-top: -2px; }
}
@media (prefers-reduced-motion: reduce) {
  #mode-select .mode-card-icon-article img,
  #mode-select .mode-card-icon-vocab img,
  #mode-select .mode-card-icon-plural img,
  #mode-select .mode-card-icon-satzbau img,
  #mode-select .mode-card-icon-verben img,
  #mode-select .mode-card-icon-praep img,
  #mode-select .mode-card-icon-adj img,
  #mode-select .mode-card-icon-perfekt img,
  #mode-select .mode-card-icon-trennbar img { transition: none; }
  #mode-select .mode-card:hover .mode-card-icon-article img,
  #mode-select .mode-card:hover .mode-card-icon-vocab img,
  #mode-select .mode-card:hover .mode-card-icon-plural img,
  #mode-select .mode-card:hover .mode-card-icon-satzbau img,
  #mode-select .mode-card:hover .mode-card-icon-verben img,
  #mode-select .mode-card:hover .mode-card-icon-praep img,
  #mode-select .mode-card:hover .mode-card-icon-adj img,
  #mode-select .mode-card:hover .mode-card-icon-perfekt img,
  #mode-select .mode-card:hover .mode-card-icon-trennbar img { transform: none; }
}

/* Der runde Pfeil-Knopf. Es gab ihn schon, er war nur kleiner und
   blasser. Bos Vorlage zeigt ihn kraeftiger und in der Farbe der
   Karte -- die Farbe steht schon weiter oben je Karte. */
#mode-select .mode-card-chevron,
#bereich-select .mode-card-chevron {
  top: 18px;
  inset-inline-end: 18px;
  width: 34px;
  height: 34px;
  font-size: 19px;
  font-weight: 700;
  box-shadow: 0 2px 6px var(--schatten-mittel);
  transition: transform 180ms ease;
}

/* Kleine Bewegung beim Ueberfahren -- der Pfeil zeigt, wohin es geht. */
#mode-select .mode-card:hover .mode-card-chevron,
#bereich-select .mode-card:hover .mode-card-chevron {
  transform: translateX(3px);
}

@media (max-width: 560px) {
  #mode-select .mode-card,
  #bereich-select .mode-card { padding: 16px 52px 16px 16px; gap: 12px; }
  #mode-select .mode-card-icon,
  #bereich-select .mode-card-icon { width: 46px; height: 46px; }
}

/* ---------------- Artikel-Fachauswahl (#chapter-select) ---------------- */

#chapter-select {
  align-items: stretch;
  justify-content: flex-start;
  text-align: start;
  padding: 0 var(--seite-pad) var(--abstand-2xl);
  gap: 0;
  max-width: var(--seite-max);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

#chapter-select .controls-row { justify-content: flex-start; margin-top: 20px; }

/* Der Artikeltrainer hat fuer seine Fach-Auswahl eigene Regeln mit
   ID (#chapter-select). Eine ID schlaegt jede Klasse, also greift
   .chapter-select-page h1 hier NICHT -- gemessen am 05.09.2026:
   48 px auf allen anderen neun Bildschirmen, 32 px auf diesem.
   Deshalb stehen die --kopf-* auch hier. Die ZAHLEN liegen weiter
   nur an einer Stelle (:root), nur die Namen sind doppelt. */
#chapter-select h1 {
  /* links, nicht mittig -- Vorgabe aus dem Design-Audit 05.09.2026:
     die Seite "Lernen von null" ist der Massstab. */
  text-align: start;
  margin-top: var(--kopf-oben);
  margin-bottom: var(--kopf-mitte);
  font-size: var(--titel-gross);
}

#chapter-select p.subtitle {
  /* links und volle Breite -- wie die Ueberschrift darueber.
     Frueher mittig und auf 32em gedeckelt, dadurch begann die
     Unterzeile 230 px weiter rechts als das H1
     (Design-Audit 05.09.2026, Punkt 3). */
  text-align: start;
  max-width: none;
  margin-inline: 0;
  margin-bottom: var(--kopf-unten);
  font-size: clamp(16px, 3vw, 18px);
}

/* Zuletzt-gelernt-Box, Such-/Filterfeld und Fach-Karten-Raster des
   Artikeltrainers nutzen jetzt dieselben gemeinsamen Klassen
   (.last-learned-box, .chapter-search-row/-input, .chapter-cards-grid,
   siehe .chapter-select-page weiter unten) wie die anderen fünf Spiele
   — die früheren eigenen ID-Regeln hier (#last-learned-box,
   #chapter-search-row, #chapter-search-input …) sind entfernt, damit es
   nur noch EINE Quelle für dieses Design gibt (kein Design-Drift mehr
   zwischen den Spielen). */

/* Handy: Die Basis-Regel .last-learned-info { flex: 1 1 220px; } war für
   die Desktop-ZEILE gedacht (220px = Breiten-Basis). Sobald die Basis-
   Media-Query bei 560px auf flex-direction:column umschaltet, wird
   dieselbe 220px-Vorgabe zur HÖHEN-Basis und reißt die Box unnötig weit
   auf. Fix: eigene, kompaktere Handy-Maße + flex-basis zurück auf auto —
   jetzt einheitlich über die gemeinsame Klasse für alle sechs Spiele
   (vorher einzeln pro Spiel aufgezählt). */
@media (max-width: 560px) {
  .last-learned-box {
    padding: 18px 20px;
    gap: 10px;
    margin-top: 24px;
    border-radius: 16px;
  }
  .last-learned-info {
    flex-basis: auto;
  }
}

/* Fach-Karten-Raster: gemeinsame Klasse .chapter-cards-grid trägt jetzt
   JEDES der sechs Spiele (vorher hatte der Artikeltrainer hier eine
   eigene ID-Regel #chapter-cards, WÖRTER/PLURAL je eine eigene
   #vocab-/#plural-chapter-cards-Regel mit identischen Werten — jetzt an
   einer Stelle für alle, inklusive der "Alle Wörter/Sätze"-Sonderkarte). */
.chapter-cards-grid {
  margin-top: 32px;
  gap: 20px;
  max-width: none;
}

.chapter-cards-grid .chapter-card {
  max-width: none;
  border-radius: var(--radius-card);
  padding: 26px 20px 20px;
  gap: 6px;
  position: relative;
}

/* Sicherheitsnetz gegen lange deutsche Komposita: "die
   Bezirkshauptmannschaft" oder "die Aufenthaltserlaubnis" waren breiter
   als die Karte, und der Text stand links und rechts ueber den Rand
   hinaus (Kundenmeldung 05.09.2026 zu Kapitel 196/197 im Bereich
   "3000 Woerter"; 3 von 202 Karten betroffen). Der Text wird jetzt auf
   die Kartenbreite begrenzt und bricht notfalls im Wort um. Bei allen
   anderen Karten aendert sich dadurch nichts -- die Regel greift nur,
   wenn der Text sonst herausragen wuerde. */
.chapter-cards-grid .chapter-card > .mode-card-title,
.chapter-cards-grid .chapter-card > .mode-card-desc {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
}

/* "Alle Wörter"/"Alle Sätze" — volle Zeile statt quadratischer Karte */
.chapter-cards-grid .chapter-card-all {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  text-align: start;
  gap: 20px;
  background: var(--n-alle-bg);
  border-color: var(--n-alle-rand);
  padding: 24px 28px;
}

.chapter-cards-grid .chapter-card-all::after {
  content: "›";
  flex: none;
  margin-inline-start: auto;
  font-size: 22px;
  color: var(--muted);
}

.chapter-cards-grid .chapter-card-all .mode-card-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.chapter-cards-grid .chapter-card-all .mode-card-title { text-align: start; }
.chapter-cards-grid .chapter-card-all .mode-card-desc { text-align: start; }

/* Runde Nummern-/Icon-Badge (Fach-Nummer bzw. Buch-Icon für "Alle Wörter") */
.mode-card-badge {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  background: var(--btn-hover);
  color: var(--muted);
}

.mode-card-badge-active {
  background: var(--green-bg);
  color: var(--green-text);
}

.mode-card-badge-all {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--n-badge-alle-bg);
  color: var(--n-badge-alle-text);
}

/* Fortschrittsbalken auf jeder Fach-Karte (dieselben Daten wie
   .mode-card-progress — nur zusätzlich visuell dargestellt). */
.mode-card-bar {
  display: block;
  height: 6px;
  width: 100%;
  border-radius: 999px;
  background: var(--btn-hover);
  overflow: hidden;
  margin-top: 4px;
}

.mode-card-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--green-border);
  transition: width 200ms ease;
}

.chapter-card-done .mode-card-bar-fill { background: var(--green-border); }

@media (max-width: 1400px) { .chapter-cards-grid { max-width: none; } }

@media (max-width: 560px) {
  .chapter-cards-grid .chapter-card-all { flex-wrap: wrap; }
}

/* ------------------------------------------------------------------
   FLACHE FACH-KARTEN, SOLANGE NUR EINE SPALTE PASST
   ------------------------------------------------------------------
   Punkt 11 aus dem Prueflauf vom 03.09.2026: Auf dem Handy stand die
   Nummern-Kugel UEBER dem Titel. Jede Karte war dadurch rund 170-200 px
   hoch, obwohl daneben rund 200 px Breite leer blieben. Bei 131
   Faechern im Artikel-Spiel waren das fast 30.000 Pixel Wischweg --
   rund 37 Bildschirmhoehen, nur um Fach 131 zu erreichen.

   Loesung: Wo nur EINE Spalte passt, steht die Nummer links neben dem
   Text statt darueber. Aus der hohen Kachel wird eine flache Zeile.
   Gemessen bei 375x812: Karte 196 px -> 98 px, Seite 30.214 px ->
   18.477 px, also 37 Bildschirme -> 23.

   WARUM GENAU 400 px UND NICHT MEHR:
   Der Bericht hat zusaetzlich vorgeschlagen, schon ab 340 px zwei
   Spalten zu zeigen und die flache Karte bis 560 px laufen zu lassen.
   Beides wurde ausprobiert und wieder verworfen:
     - zwei Spalten bei 375 px: Karte nur 130 px breit, das Thema
       bricht in Einzelwoerter um, die Karte wird 217 px HOCH statt
       flacher. Die Seite spart dabei nur 10 %.
     - flache Karte bei 400-560 px (dort stehen zwei Spalten): das
       Schloss der gesperrten Faecher ragt in den Titel hinein.
   Deshalb greift die flache Karte genau dort, wo auch die
   Einspalten-Regel greift (max-width: 400px weiter oben). Werden die
   beiden Grenzen einmal geaendert, muessen sie zusammen bleiben.

   Warum grid und nicht flex-direction: row: Die Karte hat keine Huelle
   um Titel, Thema und Fortschritt -- alle vier Teile sind direkte
   Kinder des Knopfes. Mit einem benannten Raster laesst sich die
   Nummer ueber drei Zeilen stellen, ohne im HTML etwas zu aendern
   (Bos Regel: bestehende Spiele nur ergaenzen, nicht umbauen).

   Das Schloss der gesperrten Faecher bleibt aussen vor: es ist
   position: absolute und belegt keinen Rasterplatz. Die breite
   Sonderkarte "Alle Woerter" ist ausgenommen, die ist schon eine
   Zeile.                                                             */
@media (max-width: 400px) {
  .chapter-cards-grid .chapter-card:not(.chapter-card-all) {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas:
      "nummer titel"
      "nummer thema"
      "nummer stand"
      "balken balken";
    align-content: center;
    column-gap: 12px;
    row-gap: 0;
    text-align: start;
    padding: 12px 14px;
  }

  .chapter-cards-grid .chapter-card:not(.chapter-card-all) > .mode-card-badge {
    grid-area: nummer;
    align-self: center;
    width: 40px;
    height: 40px;
    font-size: 15px;
  }

  .chapter-cards-grid .chapter-card:not(.chapter-card-all) > .mode-card-title {
    grid-area: titel;
    text-align: start;
  }

  /* Nur gesperrte Faecher tragen oben rechts ein Schloss. Bei ihnen
     bleibt ein Streifen frei, damit es nicht auf dem Titel liegt.
     Bei den freien Faechern bleibt der Titel dafuer volle Breite. */
  .chapter-cards-grid .chapter-card-locked:not(.chapter-card-all) > .mode-card-title {
    padding-inline-end: 26px;
  }

  .chapter-cards-grid .chapter-card:not(.chapter-card-all) > .mode-card-desc {
    grid-area: thema;
    text-align: start;
  }

  .chapter-cards-grid .chapter-card:not(.chapter-card-all) > .mode-card-progress {
    grid-area: stand;
    margin-top: 2px;
  }

  .chapter-cards-grid .chapter-card:not(.chapter-card-all) > .mode-card-bar {
    grid-area: balken;
    margin-top: 8px;
  }
}

/* ---------------- Artikel-Spielansicht (#game-screen) ---------------- */

.top-bar-brand {
  display: block;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--accent);
}

#game-screen #stats-row {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--muted);
  font-size: 12px;
}

#game-screen #top-bar {
  /* Breite an #game-screen #game-main (960px) angeglichen, damit obere
     Leiste und untere Spielkarte immer gleich breit sind (gleicher
     40px-Unterschied wie zuvor bei 760/800). Zusätzlich mehr Raum für
     sehr lange Wörter (z. B. "Sozialversicherungsnummer"). */
  max-width: 1080px;
  width: calc(100% - 32px);
  margin: 20px auto 0;
  background: var(--card);
  border: 1px solid var(--btn-border);
  border-radius: 18px;
  padding: 14px 22px;
}

@media (min-width: 481px) {
  #game-screen #top-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 10px;
  }
  #game-screen #controls-row { display: contents; }
  /* Gleiche Mindestbreite für beide Knöpfe, damit der Fach-Titel wirklich
     mittig sitzt (siehe gleiche Lösung bei #plural-screen .top-bar). */
  #game-screen #back-btn-article,
  #game-screen #restart-btn {
    min-width: 128px;
  }
  #game-screen #back-btn-article { grid-column: 1; justify-self: start; }
  #game-screen #stats-row { grid-column: 2; justify-content: center; text-align: center; }
  #game-screen #restart-btn { grid-column: 3; justify-self: end; }
}

#game-screen #restart-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

#game-screen #restart-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

#game-screen #game-main {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  box-sizing: border-box;
  padding-block: clamp(20px, 4vh, 32px);
  gap: clamp(16px, 3vh, 24px);
}

.article-game-card {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.5vh, 20px);
  padding: clamp(24px, 4vh, 36px) clamp(18px, 5vw, 40px);
  border: 1px solid var(--btn-border);
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 1px 2px var(--schatten-fein), 0 1px 3px var(--schatten-mittel);
}

.article-task-label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

#game-screen #word-area {
  padding: clamp(8px, 2vh, 16px) 8px;
  min-height: auto;
  border-radius: 14px;
}

#game-screen #answer-buttons { max-width: 100%; }

/* border-radius kommt jetzt einheitlich aus dem Basis-.answer-btn (16px).
   max-width:100% und grüne Füllung kommen jetzt einheitlich aus
   .chapter-progress-block/.chapter-progress-bar weiter oben. */

#game-screen #keyboard-hint {
  padding: 0;
  margin-top: 4px;
}

/* ================================================================
   VOKABELN-TRAINER: gleiche Optik wie Artikeltrainer (Erweiterung)
   ----------------------------------------------------------------
   Exaktes Gegenstück zu den Blöcken oben ("Artikel-Fachauswahl" /
   "Artikel-Spielansicht") — dieselben Werte (Farben, Radien, Abstände),
   nur auf die #vocab-* Elemente angewendet. Betrifft ausschließlich
   #vocab-chapter-select und #vocab-screen. Englisch-Trainer
   (#english-screen) bleibt unangetastet, da alle Selektoren hier über
   #vocab-chapter-select/#vocab-screen als eindeutigen Vorfahren
   verankert sind.
   ================================================================ */

/* ---------------- Vokabeln-Fachauswahl (#vocab-chapter-select) ---------------- */

#vocab-chapter-select {
  align-items: stretch;
  justify-content: flex-start;
  text-align: start;
  padding: 0 var(--seite-pad) var(--abstand-2xl);
  gap: 0;
  max-width: var(--seite-max);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

#vocab-chapter-select .controls-row { justify-content: flex-start; margin-top: 20px; }

/* Wie bei #chapter-select: eigene ID-Regeln, die jede Klasse
   schlagen. Deshalb stehen die --kopf-* auch hier. */
#vocab-chapter-select h1 {
  /* links, nicht mittig -- Vorgabe aus dem Design-Audit 05.09.2026:
     die Seite "Lernen von null" ist der Massstab. */
  text-align: start;
  margin-top: var(--kopf-oben);
  margin-bottom: var(--kopf-mitte);
  font-size: var(--titel-gross);
}

#vocab-chapter-select p.subtitle {
  /* links und volle Breite -- wie die Ueberschrift darueber.
     Frueher mittig und auf 32em gedeckelt, dadurch begann die
     Unterzeile 230 px weiter rechts als das H1
     (Design-Audit 05.09.2026, Punkt 3). */
  text-align: start;
  max-width: none;
  margin-inline: 0;
  margin-bottom: var(--kopf-unten);
  font-size: clamp(16px, 3vw, 18px);
}

/* Zuletzt-gelernt-Box, Suchfeld und Fach-Karten-Raster kommen jetzt
   einheitlich aus den gemeinsamen Klassen .last-learned-box,
   .chapter-search-row/-input und .chapter-cards-grid (siehe oben bzw.
   .chapter-select-page weiter unten) — keine eigene WÖRTER-Kopie mehr. */

/* ---------------- Vokabeln-Spielansicht (#vocab-screen) ---------------- */

#vocab-screen .stats-row {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--muted);
  font-size: 12px;
}

/* Der Bereich "3000 Woerter" haengt sich an DIESELBEN Regeln --
   Kundenwunsch 05.09.2026: "should look like in the game". So kann
   die eine Kopfleiste gar nicht anders aussehen als die andere. */
#vocab-screen .top-bar,
#alltag-screen .top-bar {
  /* Breite an .game-main (1120px) angeglichen -- siehe
     Kommentar bei #game-screen #top-bar. */
  max-width: 1080px;
  width: calc(100% - 32px);
  margin: 20px auto 0;
  background: var(--card);
  border: 1px solid var(--btn-border);
  border-radius: 18px;
  padding: 14px 22px;
}

@media (min-width: 481px) {
  #vocab-screen .top-bar,
  #alltag-screen .top-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 10px;
  }
  #vocab-screen .controls-row,
  #alltag-screen .controls-row { display: contents; }
  /* Gleiche Mindestbreite für beide Knöpfe, damit der Fach-Titel wirklich
     mittig sitzt (siehe gleiche Lösung bei #plural-screen .top-bar). */
  #back-btn-vocab,
  #vocab-restart-btn,
  #back-btn-alltag,
  #alltag-restart-btn {
    min-width: 128px;
  }
  #back-btn-vocab,
  #back-btn-alltag { grid-column: 1; justify-self: start; }
  #vocab-screen .stats-row,
  #alltag-screen .stats-row { grid-column: 2; justify-content: center; text-align: center; }
  #vocab-restart-btn,
  #alltag-restart-btn { grid-column: 3; justify-self: end; }
}

/* ---- Kapitelzeile im Bereich "3000 Woerter" ----------------------
   Kundenwunsch 05.09.2026: "write it bigger and in the middle move it
   to bottom". Sie sitzt jetzt in der unteren Reihe der Kopfleiste,
   genau mittig zwischen "Kapitel" und "Neu starten", und ist groesser
   und heller als die kleine graue Zeile im Vokabel-Trainer. */
#alltag-kapitel-badge {
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 700;
  color: var(--text);
  text-align: center;
  line-height: 1.3;
}

@media (min-width: 481px) {
  /* Zeile 1: nur noch der Bereichsname. Zeile 2: Knopf - Kapitel - Knopf.
     Die Plaetze sind fest vergeben, damit die Kapitelzeile wirklich in
     der Mitte sitzt und nicht durch die automatische Verteilung des
     Rasters verrutscht. */
  #alltag-screen .stats-row { grid-row: 1; }
  #back-btn-alltag { grid-row: 2; }
  #alltag-kapitel-badge { grid-column: 2; grid-row: 2; justify-self: center; }
  #alltag-restart-btn { grid-row: 2; }
}

@media (max-width: 480px) {
  /* Auf dem Handy ist die untere Reihe ein 2-Spalten-Raster fuer die
     beiden Knoepfe. Die Kapitelzeile bekommt darunter eine eigene
     volle Zeile (order: 1 = nach den Knoepfen). Ohne die zweite Regel
     wuerde "Neu starten" als drittes und letztes Kind von der
     allgemeinen Regel .controls-row > *:last-child:nth-child(odd) ueber
     beide Spalten gezogen. */
  #alltag-kapitel-badge { grid-column: 1 / -1; order: 1; }
  #alltag-restart-btn { grid-column: auto; }
}

#vocab-restart-btn,
#alltag-restart-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

#vocab-restart-btn:hover,
#alltag-restart-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

#vocab-screen .game-main,
#alltag-screen .game-main {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  box-sizing: border-box;
  padding-block: clamp(20px, 4vh, 32px);
  gap: clamp(16px, 3vh, 24px);
}

.vocab-game-card {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.5vh, 20px);
  padding: clamp(24px, 4vh, 36px) clamp(18px, 5vw, 40px);
  border: 1px solid var(--btn-border);
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 1px 2px var(--schatten-fein), 0 1px 3px var(--schatten-mittel);
}

.vocab-task-label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

#vocab-screen .word-area {
  padding: clamp(8px, 2vh, 16px) 8px;
  min-height: auto;
  border-radius: 14px;
}

/* Bei richtiger Antwort färbt sich das Wort selbst grün ein -- exakt wie
   beim Artikeltrainer (#word-area.feedback-correct #current-word), damit
   das Richtig-Feedback in allen drei Trainern gleich aussieht. */
#vocab-word-area.feedback-correct #vocab-current-word {
  color: var(--green-text);
}

#vocab-screen .answer-buttons { max-width: 100%; }

/* border-radius kommt jetzt einheitlich aus dem Basis-.answer-btn (16px).
   max-width:100% und grüne Füllung kommen jetzt einheitlich aus
   .chapter-progress-block/.chapter-progress-bar weiter oben. */

#vocab-screen .keyboard-hint {
  padding: 0;
  margin-top: 4px;
}

/* ================================================================
   PLURAL-TRAINER: gleiche Optik wie Artikel-/Vokabeltrainer (Erweiterung)
   ----------------------------------------------------------------
   Rein additiver Block, exaktes Gegenstueck zu den Bloecken oben fuer
   den Vokabeltrainer -- dieselben Werte (Farben, Radien, Abstaende),
   nur auf die #plural-* Elemente angewendet. Betrifft ausschliesslich
   #plural-chapter-select und #plural-screen. Artikeltrainer und
   Vokabeltrainer bleiben unangetastet.
   ================================================================ */

/* ---------------- Plural-Fachauswahl (#plural-chapter-select) ---------------- */

#plural-chapter-select {
  align-items: stretch;
  justify-content: flex-start;
  text-align: start;
  padding: 0 var(--seite-pad) var(--abstand-2xl);
  gap: 0;
  max-width: var(--seite-max);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

#plural-chapter-select .controls-row { justify-content: flex-start; margin-top: 20px; }

/* Wie bei #chapter-select: eigene ID-Regeln, die jede Klasse
   schlagen. Deshalb stehen die --kopf-* auch hier. */
#plural-chapter-select h1 {
  /* links, nicht mittig -- Vorgabe aus dem Design-Audit 05.09.2026:
     die Seite "Lernen von null" ist der Massstab. */
  text-align: start;
  margin-top: var(--kopf-oben);
  margin-bottom: var(--kopf-mitte);
  font-size: var(--titel-gross);
}

#plural-chapter-select p.subtitle {
  /* links und volle Breite -- wie die Ueberschrift darueber.
     Frueher mittig und auf 32em gedeckelt, dadurch begann die
     Unterzeile 230 px weiter rechts als das H1
     (Design-Audit 05.09.2026, Punkt 3). */
  text-align: start;
  max-width: none;
  margin-inline: 0;
  margin-bottom: var(--kopf-unten);
  font-size: clamp(16px, 3vw, 18px);
}

/* Zuletzt-gelernt-Box, Suchfeld und Fach-Karten-Raster kommen jetzt
   einheitlich aus den gemeinsamen Klassen .last-learned-box,
   .chapter-search-row/-input und .chapter-cards-grid (siehe oben bzw.
   .chapter-select-page weiter unten) — keine eigene PLURAL-Kopie mehr. */

/* ---------------- Plural-Spielansicht (#plural-screen) ---------------- */

#plural-screen .stats-row {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--muted);
  font-size: 12px;
}

#plural-screen .top-bar {
  /* Muss zur Breite von #plural-screen .game-main (960px) passen, sonst
     wirken obere Leiste und untere Spielkarte wie zwei unterschiedlich
     breite Kästen übereinander. Gleicher 40px-Unterschied wie beim
     Vokabeltrainer (dort 760px Leiste zu 800px Karte), nur auf die
     hier breitere Karte skaliert. */
  max-width: 1080px;
  width: calc(100% - 32px);
  margin: 20px auto 0;
  background: var(--card);
  border: 1px solid var(--btn-border);
  border-radius: 18px;
  padding: 14px 22px;
}

@media (min-width: 481px) {
  #plural-screen .top-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 10px;
  }
  #plural-screen .controls-row { display: contents; }
  /* "← Fächer" und "Neu starten" bekommen dieselbe Mindestbreite, damit
     die Titelmitte (Spalte 2) wirklich symmetrisch zwischen beiden
     Knoepfen sitzt -- ohne das faellt die freie Flaeche links/rechts
     vom Titel je nach Textlaenge der Knoepfe unterschiedlich breit aus. */
  #back-btn-plural,
  #plural-restart-btn {
    min-width: 128px;
  }
  #back-btn-plural { grid-column: 1; justify-self: start; }
  #plural-screen .stats-row { grid-column: 2; justify-content: center; text-align: center; }
  #plural-restart-btn { grid-column: 3; justify-self: end; }
}

#plural-restart-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

#plural-restart-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

#plural-screen .game-main {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  box-sizing: border-box;
  padding-block: clamp(20px, 4vh, 32px);
  gap: clamp(16px, 3vh, 24px);
}

.plural-game-card {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.5vh, 20px);
  padding: clamp(24px, 4vh, 36px) clamp(18px, 5vw, 40px);
  border: 1px solid var(--btn-border);
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 1px 2px var(--schatten-fein), 0 1px 3px var(--schatten-mittel);
}

.plural-task-label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

#plural-screen .word-area {
  padding: clamp(8px, 2vh, 16px) 8px;
  min-height: auto;
  border-radius: 14px;
}

/* Übersetzungszeile unter dem Singular-Wort (nur sichtbar, wenn DE/EN/RU
   auf EN oder RU steht) -- gleiche Optik wie #word-translation beim
   Artikeltrainer, hier eigenständig fuer die neue ID. */
#plural-word-translation {
  margin-top: 8px;
  font-size: clamp(13px, 2.4vw, 15px);
  font-weight: 500;
  text-transform: lowercase;
  color: var(--muted);
  letter-spacing: 0.01em;
}

#plural-word-translation.fade-in {
  animation: fadeIn 200ms ease;
}

/* Bei richtiger Antwort färbt sich das Wort selbst grün ein -- exakt wie
   beim Artikeltrainer (#word-area.feedback-correct #current-word), damit
   das Richtig-Feedback in allen drei Trainern gleich aussieht. */
#plural-word-area.feedback-correct #plural-current-word {
  color: var(--green-text);
}

#plural-screen .answer-buttons {
  max-width: 100%;
  gap: clamp(12px, 2vw, 18px);
}

/* Pluralformen sind im Schnitt deutlich laenger als einzelne Artikel-
   woerter oder kurze Vokabeln ("die Windschutzscheiben"), deshalb
   bekommen die drei Antwort-Knoepfe hier mehr Platz als im Basis-Stil
   (dort max-width: 220px) -- nur fuer #plural-screen, Artikel- und
   Vokabeltrainer bleiben unveraendert. */
#plural-screen .answer-btn {
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 340px;
  padding: clamp(16px, 2.4vh, 22px) clamp(14px, 2.4vw, 20px);
  font-size: clamp(16px, 2.6vw, 22px);
  line-height: 1.25;
  /* Umbruch nur zwischen vollständigen Wörtern ("die" / "Windschutz-
     scheiben"), NIE mitten in einem Wort -- ein zu langes Einzelwort
     wird stattdessen per JS (fitButtonFontSize()) kleiner skaliert. */
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  border-radius: 16px;
}

/* max-width:100% und grüne Füllung kommen jetzt einheitlich aus
   .chapter-progress-block/.chapter-progress-bar weiter oben. */

#plural-screen .keyboard-hint {
  padding: 0;
  margin-top: 4px;
}


/* ---------------- SATZBAU-Spielansicht (#satzbau-screen) ----------------
   Übernimmt bewusst dieselben Werte wie die Plural-/Artikel-Ansicht
   (Kartenbreite, Rahmen, Rundungen, Schatten, Abstände, Grün/Rot) — nur
   die Antwortfläche ist neu: Wortkarten zum Antippen statt drei fester
   Antwortknöpfe. */

#satzbau-screen .stats-row {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--muted);
  font-size: 12px;
}

#satzbau-screen .top-bar {
  max-width: 1080px;
  width: calc(100% - 32px);
  margin: 20px auto 0;
  background: var(--card);
  border: 1px solid var(--btn-border);
  border-radius: 18px;
  padding: 14px 22px;
}

@media (min-width: 481px) {
  #satzbau-screen .top-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 10px;
  }
  #satzbau-screen .controls-row { display: contents; }
  #back-btn-satzbau,
  #satzbau-restart-btn {
    min-width: 128px;
  }
  #back-btn-satzbau { grid-column: 1; justify-self: start; }
  #satzbau-screen .stats-row { grid-column: 2; justify-content: center; text-align: center; }
  #satzbau-restart-btn { grid-column: 3; justify-self: end; }
}

#satzbau-restart-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

#satzbau-restart-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

#satzbau-screen .game-main {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  box-sizing: border-box;
  padding-block: clamp(20px, 4vh, 32px);
  gap: clamp(16px, 3vh, 24px);
}

.satzbau-game-card {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.5vh, 20px);
  /* Das seitliche Polster steht als Variable da, weil die klebende
     Knopfzeile weiter unten es wieder aufheben muss (negativer Rand),
     damit sie die volle Kartenbreite deckt. */
  --satzbau-karten-polster: clamp(18px, 5vw, 40px);
  padding: clamp(24px, 4vh, 36px) var(--satzbau-karten-polster);
  border: 1px solid var(--btn-border);
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 1px 2px var(--schatten-fein), 0 1px 3px var(--schatten-mittel);
}

.satzbau-task-label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

#satzbau-screen .word-area {
  width: 100%;
  padding: clamp(12px, 2.5vh, 20px) clamp(10px, 3vw, 18px);
  min-height: auto;
  border-radius: 14px;
  text-align: center;
}

/* Bedeutung des gesuchten Satzes — steht zwischen Aufgabenüberschrift
   und Lösungsfeld, immer mittig und immer an derselben Stelle. Etwas
   kleiner als die deutschen Wortbausteine, aber klar lesbar (nicht
   blass). Die reservierte Mindesthöhe von zwei Zeilen sorgt dafür, dass
   der Spielbereich bei unterschiedlich langen englischen/russischen
   Sätzen nicht springt. Auf Deutsch bleibt die Zeile ausgeblendet. */
.satzbau-translation {
  width: 100%;
  max-width: 34em;
  margin: 0 auto 12px;
  /* Feste Mindesthöhe für zwei Zeilen (2 × 17px × 1.35) — bleibt auch
     dann gleich, wenn fitTranslationFontSize() die Schrift bei einem sehr
     langen Satz etwas verkleinert. */
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(14px, 2.5vw, 17px);
  line-height: 1.35;
  font-weight: 600;
  color: var(--muted-2);
  overflow-wrap: break-word;
}

.satzbau-translation-text {
  display: block;
  width: 100%;
}

@media (max-width: 480px) {
  .satzbau-translation {
    font-size: 14px;
    min-height: 38px; /* 2 × 14px × 1.35 */
  }
}

/* Lösungsbereich: hier landen die angetippten Wörter */
.satzbau-answer-area {
  width: 100%;
  align-self: stretch;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  padding: 12px;
  border: 2px dashed var(--btn-border);
  border-radius: var(--radius-md);
  background: var(--n-feld-2);
  transition: border-color 120ms ease, background 120ms ease;
}

.satzbau-answer-area.is-correct {
  border-style: solid;
  border-color: var(--green-border);
  background: var(--green-bg);
}

.satzbau-answer-area.is-wrong {
  border-style: solid;
  border-color: var(--red-border);
  background: var(--red-bg);
}

.satzbau-answer-hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.satzbau-answer-chip,
.satzbau-word-card {
  /* Ein Wort bleibt IMMER zusammen: nie ein Trennstrich, nie ein
     einzelner Buchstabe in der nächsten Zeile. Umbrochen wird nur
     zwischen den Karten. */
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  max-width: 100%;
  font-family: inherit;
  font-size: clamp(16px, 3.4vw, 20px);
  font-weight: 700;
  color: var(--text);
  background: var(--btn-bg);
  border: 2px solid var(--btn-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  min-height: 46px;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: background 120ms ease, border-color 120ms ease, transform 90ms ease, box-shadow 120ms ease, opacity 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

.satzbau-answer-chip {
  background: var(--card);
  border-color: var(--n-rand-3);
}

.satzbau-answer-chip:hover:not(:disabled),
.satzbau-word-card:hover:not(:disabled) {
  background: var(--btn-hover);
  box-shadow: var(--shadow-btn-hover);
  transform: translateY(-1px);
}

.satzbau-answer-chip:active:not(:disabled),
.satzbau-word-card:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  background: var(--btn-active);
}

.satzbau-answer-area.is-correct .satzbau-answer-chip {
  border-color: var(--green-border);
  color: var(--green-text);
  background: var(--card);
}

.satzbau-answer-area.is-wrong .satzbau-answer-chip {
  border-color: var(--red-border);
  color: var(--red-text);
  background: var(--card);
}

.satzbau-punctuation {
  font-size: clamp(16px, 3.4vw, 20px);
  font-weight: 700;
  color: var(--text);
  align-self: center;
  margin-inline-start: -4px;
}

/* Gemischte Wortkarten */
.satzbau-word-bank {
  align-self: stretch;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.satzbau-word-card.is-used {
  opacity: 0;
  pointer-events: none;
  /* Platz bleibt erhalten, damit die Karten beim Antippen nicht springen */
  visibility: hidden;
}

.satzbau-solution-line {
  margin: 10px 0 0;
  font-size: clamp(15px, 2.8vw, 18px);
  font-weight: 700;
  color: var(--green-text);
}

/* Zurücksetzen / Prüfen */
.satzbau-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.satzbau-action-btn {
  flex: 0 1 200px;
  min-width: 140px;
  min-height: 48px;
  padding: 14px 20px;
  font-size: clamp(15px, 3vw, 17px);
  font-weight: 700;
  color: var(--text);
  background: var(--btn-bg);
  border: 2px solid var(--btn-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: background 120ms ease, border-color 120ms ease, transform 90ms ease, box-shadow 120ms ease;
}

.satzbau-action-btn:hover:not(:disabled) {
  background: var(--btn-hover);
  box-shadow: var(--shadow-btn-hover);
  transform: translateY(-1px);
}

.satzbau-action-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  background: var(--btn-active);
}

.satzbau-check-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.satzbau-check-btn:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.satzbau-action-btn:disabled {
  cursor: default;
  opacity: 0.45;
  box-shadow: none;
  transform: none;
}

/* Abschluss eines Fachs */
.satzbau-completion {
  text-align: center;
}

.satzbau-completion-heading {
  margin: 0 0 8px;
  font-size: clamp(24px, 6vw, 34px);
  font-weight: 800;
}

.satzbau-completion-text {
  margin: 0;
  font-size: clamp(14px, 2.8vw, 17px);
  color: var(--muted);
}

@media (max-width: 480px) {
  #satzbau-screen .top-bar {
    width: calc(100% - 24px);
    padding: 12px 16px;
  }
  .satzbau-game-card {
    --satzbau-karten-polster: 14px;
    padding: 20px var(--satzbau-karten-polster);
    border-radius: 20px;
  }
  .satzbau-word-bank { gap: 8px; }
  .satzbau-answer-chip,
  .satzbau-word-card {
    padding: 11px 12px;
    font-size: 16px;
  }
  .satzbau-action-btn { flex: 1 1 140px; }
}

/* ------------------------------------------------------------------
   SATZBAU: KNOPFZEILE KLEBT AUF SCHMALEN BILDSCHIRMEN UNTEN
   ------------------------------------------------------------------
   Punkt 12 aus dem Prueflauf vom 03.09.2026, vom Betriebsinhaber am
   04.09.2026 selbst am Bildschirm gefunden.

   DAS PROBLEM: Beim Antippen wandern die Woerter aus dem Wortvorrat in
   das Antwortfeld. Der Vorrat behaelt seinen Platz (die benutzten
   Karten bleiben mit visibility: hidden stehen, damit nichts unter dem
   Finger wegspringt), das Antwortfeld waechst aber mit. Die Karte wird
   dadurch immer hoeher und schiebt "Zuruecksetzen" und "Pruefen" nach
   unten aus dem Bild.

   GEMESSEN bei 375 x 700 (Handy mit sichtbarer Adresszeile), Fach 1,
   Satz mit 7 Woertern -- Unterkante des Pruefen-Knopfes:
       0 Woerter gesetzt : 686 px   sichtbar
       1-3 Woerter       : 656 px   sichtbar
       4-6 Woerter       : 710 px   ABGESCHNITTEN
       7 Woerter         : 764 px   ABGESCHNITTEN
   Der Lernende loest den Satz und der einzige Knopf, der weitergeht,
   steht unter dem Bildrand.

   WARUM KLEBEN UND NICHT DEN LEEREN VORRAT EINKLAPPEN: Ein einklappen-
   der Vorrat wuerde erst beim LETZTEN Wort helfen. Die Messung oben
   zeigt: schon ab dem vierten Wort ist der Knopf weg. Kleben wirkt in
   jedem Zwischenschritt und auf jeder Bildschirmhoehe.

   Der negative Rand hebt das Innenpolster der Karte auf, damit die
   Zeile beim Kleben die volle Kartenbreite deckt und der Text nicht
   seitlich daneben durchscheint.                                     */
@media (max-width: 560px) {
  .satzbau-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    width: auto;
    align-self: stretch;
    margin-inline: calc(-1 * var(--satzbau-karten-polster));
    padding: 10px var(--satzbau-karten-polster);
    background: var(--card);
    box-shadow: 0 -6px 12px -8px var(--schatten-mittel);
  }
}


/* ================================================================
   GEMEINSAMES LAYOUT ALLER FACH-AUSWAHLEN (.chapter-select-page)
   ================================================================
   Bisher stand dieses Layout dreimal getrennt unter den IDs
   #chapter-select (DER · DIE · DAS), #vocab-chapter-select (VOKABELN)
   und #plural-chapter-select (PLURAL) — mit exakt denselben Werten.
   Hier stehen genau dieselben Werte EINMAL als gemeinsame Klasse, die
   jede Fach-Auswahl trägt (auch SATZBAU und jedes weitere Spiel).
   Dadurch liegen Zurück-Knopf, Überschrift, Beschreibung, Suchfeld,
   "Zuletzt gelernt" und das Kartenraster in ALLEN Spielen in demselben
   zentrierten Container mit derselben Maximalbreite und denselben
   Abständen. Die alten ID-Regeln bleiben unverändert bestehen — sie
   enthalten dieselben Werte und ändern deshalb nichts.
   ================================================================ */

.chapter-select-page {
  align-items: stretch;
  justify-content: flex-start;
  text-align: start;
  padding: 0 var(--seite-pad) var(--abstand-2xl);
  gap: 0;
  max-width: var(--seite-max);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.chapter-select-page .controls-row { justify-content: flex-start; margin-top: 20px; }

/* Auf den zehn Fach-Auswahl-Bildschirmen ist die controls-row LEER:
   der Zurueck-Knopf darin ist ausgeblendet, seit der Pfeil in der
   Kopfleiste sitzt (05.09.2026). Ihre 20 px Abstand waren damit ein
   unsichtbarer Platzhalter, der die Ueberschrift 20 px tiefer
   schob als auf jeder festen Seite -- gemessen 52 px statt 32 px.
   Auf #unlock-screen und #widerruf-screen ist der Knopf SICHTBAR;
   die beiden behalten ihre 20 px, deshalb steht hier kein
   allgemeines .chapter-select-page. */
.chapter-select-screen > .controls-row,
#chapter-select > .controls-row,
#vocab-chapter-select > .controls-row,
#plural-chapter-select > .controls-row { margin-top: 0; }

.chapter-select-page h1 {
  /* links, nicht mittig -- Vorgabe aus dem Design-Audit 05.09.2026:
     die Seite "Lernen von null" ist der Massstab.
     Abstaende: siehe --kopf-* ganz oben. Dieselben Werte in
     wort.css, sonst laufen App und feste Seiten auseinander. */
  text-align: start;
  margin-top: var(--kopf-oben);
  margin-bottom: var(--kopf-mitte);
  font-size: var(--titel-gross);
}

.chapter-select-page p.subtitle {
  /* links und volle Breite -- wie die Ueberschrift darueber.
     Frueher mittig und auf 32em gedeckelt, dadurch begann die
     Unterzeile 230 px weiter rechts als das H1
     (Design-Audit 05.09.2026, Punkt 3). */
  text-align: start;
  max-width: none;
  margin-inline: 0;
  margin-bottom: var(--kopf-unten);
  font-size: clamp(16px, 3vw, 18px);
}

/* ------------------------------------------------------------------
   SEITENKOPF MITTIG -- ein Schalter, kein Umbau
   ------------------------------------------------------------------
   Kundenwunsch 05.09.2026 (Bo, zwei Bildschirmfotos):
     "center the content (headline + price box). Right now it sits on
      the right side with empty space on the left"
     "position should be in the middle"

   GEMESSEN VORHER auf der Freischalt-Seite bei 1456 px Fensterbreite:
     Ueberschrift "Alles freischalten"  linke Kante 201 px
     Preiskarte                          linke Kante 461 px
   Der Block selbst war schon mittig (161 / 176 px -- die 15 px
   Unterschied sind nur die Bildlaufleiste). Falsch aussehen liess es
   die MISCHUNG: Ueberschrift linksbuendig, Karte mittig. Zwei Bloecke
   uebereinander, die nicht dieselbe Achse haben.

   WARUM EINE KLASSE UND KEINE ID-REGEL:
   Die Klasse haengt am Bildschirm selbst
   (<section class="... seitenkopf-mitte">). Damit laesst sich der
   mittige Kopf pro Bildschirm an- und abschalten, ohne fuer jeden
   Bildschirm eine eigene ID-Kopie anzulegen -- genau die Falle aus
   Fehlerliste Q26 (eine ID schlaegt jede Klasse, und dann wirkt die
   gemeinsame Regel auf drei Bildschirmen nicht mehr).

   REIHENFOLGE IST PFLICHT: Dieser Block MUSS nach
   .chapter-select-page h1 stehen. Beide haben dieselbe Spezifitaet
   (0-1-1); bei Gleichstand gewinnt in CSS das, was spaeter steht
   (Fehlerliste Q23). Wer den Block nach oben schiebt, schaltet ihn ab.

   STAND 06.09.2026: gesetzt auf DREI Bildschirmen -- #unlock-screen,
   #bereich-select und (neu) #mode-select. Bo hat den Block auf
   /lernbereiche/ eingekringelt: "it should be in the middle of the
   screen, horizontal and vertical".
   GEMESSEN VORHER bei 1500 px Breite: die Ueberschrift "Spielen und
   ueben" hatte ihre Textmitte bei 396, die Fenstermitte lag bei 750 --
   354 px zu weit links. Der KASTEN des h1 war dagegen genau mittig;
   wer den misst, sieht keinen Fehler (Fehlerliste Q31: bei "sieht
   nicht mittig aus" den TEXT messen, nicht den Kasten).
   Alle uebrigen Ueberschriften bleiben linksbuendig.
   ------------------------------------------------------------------ */
.seitenkopf-mitte h1,
.seitenkopf-mitte p.subtitle {
  text-align: center;
}

.seitenkopf-mitte p.subtitle {
  /* Ohne auto bleibt die Unterzeile links kleben, wenn sie eine
     max-width hat. Mit auto sitzt sie auf derselben Achse wie das H1. */
  margin-inline: auto;
}

/* ------------------------------------------------------------------
   INHALT AUCH SENKRECHT IN DIE MITTE
   ------------------------------------------------------------------
   Kundenwunsch 05.09.2026 (Bo, mit Bildschirmfoto und gruenem Kreis
   um den ganzen Block): "i wanted u to put this in the middle of the
   display, i mean to let same space to top and bottom".

   GEMESSEN VORHER auf #bereiche bei 1456 x 850:
     Kopfleiste -> Ueberschrift    48 px
     Karten     -> Fusszeile      212 px
   Der Block klebte also oben. Unten stand ein Loch von mehr als
   200 px.

   WIE ES GEHT: <body> ist bereits eine Flex-Spalte (Kopfleiste,
   Bildschirme, Fusszeile). Der Bildschirm bekommt flex: 1 und wird
   selbst zur Spalte -- dann verteilt justify-content den freien Platz
   gleichmaessig ueber und unter dem Inhalt.

   WARUM "safe center" UND NICHT NUR "center":
   Ist der Inhalt HOEHER als der Platz (Handy, kleines Fenster), dann
   schiebt ein normales "center" den Anfang nach OBEN aus dem Bild --
   die Ueberschrift waere weg und man kaeme nicht mehr hin. "safe"
   faellt in diesem Fall auf "start" zurueck. Auf dem Handy verhaelt
   sich die Seite damit genau wie vorher.

   NUR AUF KURZEN BILDSCHIRMEN SINNVOLL. Die Freischalt-Seite ist
   laenger als das Fenster und scrollt -- dort waere senkrechtes
   Zentrieren wirkungslos. Deshalb steht die Klasse dort NICHT.
   ------------------------------------------------------------------ */
.inhalt-mitte-hoch {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  /* Der untere Innenabstand wuerde die Mitte nach oben verschieben --
     der freie Platz soll oben und unten gleich sein. */
  padding-bottom: 0;
}

/* ------------------------------------------------------------------
   SYMMETRIE AUF DEN UEBERSICHTSSEITEN
   ------------------------------------------------------------------
   Kundenwunsch 05.09.2026: "position of the main text etc should be
   symmetrical".
   Gemessen war es vorher so: Ueberschrift und Kartenraster standen von
   101 bis 1405, die Unterzeile von 534 bis 971, der Hilfe-Kasten von
   393 bis 1113. Drei verschiedene Breiten uebereinander.
   Jetzt haben ALLE Bloecke dieselbe linke und rechte Kante, und der
   Text steht linksbuendig -- so wie auf /alphabet/ und
   /hoeren-und-lesen/. Die neun Spiele behalten ihre mittige
   Ueberschrift; dort wurde nichts beanstandet.
   ------------------------------------------------------------------
   KORRIGIERT 05.09.2026: Hier stand vorher
       #alltag-select h1,
       .last-learned-box { ... gruener Kasten ... }
   Die Ueberschrift von "3000 Woerter fuer den Alltag" hat dadurch den
   gruenen Kasten der "Zuletzt gelernt"-Box bekommen -- als einzige
   Ueberschrift der ganzen Seite. Der Kunde hat es auf einem
   Bildschirmfoto eingekringelt ("these textes must look similar").
   Der gruene Kasten gehoert NUR zur last-learned-box. Das h1 ist
   wieder herausgenommen; die Abstaende kommen jetzt von --kopf-*.
   ------------------------------------------------------------------ */
.last-learned-box {
  margin-top: 36px;
  background: var(--green-bg);
  border-color: var(--green-border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  gap: 20px;
}

.last-learned-eyebrow { color: var(--green-text); }

.last-learned-btn {
  background: transparent;
  border-color: transparent;
  color: var(--green-text);
  font-weight: 700;
}

.last-learned-btn:hover { text-decoration: underline; opacity: 1; }

.chapter-search-row { max-width: 520px; margin: 28px auto 0; }

.chapter-search-input {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

/* .chapter-cards-grid/.chapter-card: siehe die gemeinsame Basis-Regel
   weiter oben (gilt bereits für alle sechs Spiele über die Klasse
   .chapter-cards-grid — hier keine erneute, eigene Kopie mehr nötig). */

/* Auf dem Handy behalten ALLE Fach-Auswahlen denselben Seitenabstand
   wie bisher DER · DIE · DAS / VOKABELN / PLURAL (48px). Die ältere
   Regel .chapter-select-screen (16px) wird hier bewusst überschrieben,
   damit die Karten in jedem Spiel exakt gleich breit sind. */
@media (max-width: 480px) {
  .chapter-select-page {
    padding-inline: 48px;
  }
}

/* Wenige Fächer (z. B. SATZBAU mit zwei) würden im 6-spaltigen Raster
   links kleben. Deshalb wird die Karten-GRUPPE mittig gesetzt — die
   Kartenbreite bleibt dabei rechnerisch exakt dieselbe wie in den
   Spielen mit vielen Fächern (Spaltenbreite = (Rasterbreite minus
   Lücken) geteilt durch die Spaltenzahl der jeweiligen Bildschirmstufe:
   6 / 4 / 3 / 2 / 1). */
.chapter-cards-grid-centered {
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(0, calc((100% - 100px) / 6)));
}

@media (max-width: 1400px) {
  .chapter-cards-grid-centered {
    grid-template-columns: repeat(auto-fit, minmax(0, calc((100% - 60px) / 4)));
  }
}

@media (max-width: 900px) {
  .chapter-cards-grid-centered {
    grid-template-columns: repeat(auto-fit, minmax(0, calc((100% - 40px) / 3)));
  }
}

@media (max-width: 640px) {
  .chapter-cards-grid-centered {
    grid-template-columns: repeat(auto-fit, minmax(0, calc((100% - 20px) / 2)));
  }
}

@media (max-width: 400px) {
  .chapter-cards-grid-centered {
    grid-template-columns: 1fr;
  }
}


/* ---------------- VERBEN-Spielansicht (#verben-screen) ----------------
   Übernimmt dieselben Werte wie die Plural-/Artikel-Ansicht (Kartenmaße,
   Rahmen, Rundungen, Schatten, Abstände, Grün/Rot, drei gleichwertige
   Antwortknöpfe) — kein eigenes Design. Neu sind nur die Zeile mit dem
   Infinitiv, die Bedeutung darunter und die dezente Erklärung der
   sie-Varianten. */

#verben-screen .stats-row {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--muted);
  font-size: 12px;
}

#verben-screen .top-bar {
  max-width: 1080px;
  width: calc(100% - 32px);
  margin: 20px auto 0;
  background: var(--card);
  border: 1px solid var(--btn-border);
  border-radius: 18px;
  padding: 14px 22px;
}

@media (min-width: 481px) {
  #verben-screen .top-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 10px;
  }
  #verben-screen .controls-row { display: contents; }
  #back-btn-verben,
  #verben-restart-btn { min-width: 128px; }
  #back-btn-verben { grid-column: 1; justify-self: start; }
  #verben-screen .stats-row { grid-column: 2; justify-content: center; text-align: center; }
  #verben-restart-btn { grid-column: 3; justify-self: end; }
}

#verben-restart-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

#verben-restart-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

#verben-screen .game-main {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  box-sizing: border-box;
  padding-block: clamp(20px, 4vh, 32px);
  gap: clamp(16px, 3vh, 24px);
}

.verben-game-card {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.5vh, 20px);
  padding: clamp(24px, 4vh, 36px) clamp(18px, 5vw, 40px);
  border: 1px solid var(--btn-border);
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 1px 2px var(--schatten-fein), 0 1px 3px var(--schatten-mittel);
}

.verben-task-label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

#verben-screen .word-area {
  width: 100%;
  padding: clamp(10px, 2.2vh, 18px) 8px;
  min-height: auto;
  border-radius: 14px;
  text-align: center;
}

/* Zeile "Verb: machen" */
.verben-infinitive {
  margin: 0 0 4px;
  font-size: clamp(15px, 2.8vw, 18px);
  color: var(--muted-2);
}

.verben-infinitive-label {
  font-weight: 500;
}

.verben-infinitive-word {
  font-weight: 800;
  color: var(--text);
}

/* Bedeutung des Infinitivs (nur bei englischer/russischer Oberfläche) */
.verben-infinitive-translation {
  margin: 0 auto 6px;
  max-width: 30em;
  min-height: 1.4em;
  font-size: clamp(13px, 2.4vw, 16px);
  font-weight: 600;
  color: var(--muted-2);
}

/* Dezentes Symbol über der Hauptanzeige — nur zusätzliche Hilfe bei den
   drei sie-Varianten (eine Person / mehrere Personen / höfliche Anrede). */
.verben-pronoun-icon {
  display: block;
  margin: 0 auto 2px;
  color: var(--muted);
  line-height: 0;
  /* Feste Höhe: der Platz bleibt auch bei Aufgaben ohne Symbol
     reserviert, damit die Spielkarte zwischen zwei Aufgaben nicht
     springt. Ausgeblendet wird nur die Sichtbarkeit. */
  height: 22px;
}

.verben-pronoun-icon.is-empty {
  visibility: hidden;
}

/* Hauptanzeige mit Kontext ("Anna und Paul = sie"): zusammenhängend,
   groß und zentral — nur etwas kleiner als ein einzelnes Pronomen,
   damit auch der längste Kontext auf dem Handy in eine Zeile passt. */
#verben-pronoun.has-context {
  font-size: clamp(22px, 6.4vw, 40px);
  letter-spacing: 0;
}

/* Vollständige Lösung, z. B. "du machst" */
.verben-solution-line {
  margin: 10px 0 0;
  font-size: clamp(16px, 3vw, 20px);
  font-weight: 800;
  color: var(--green-text);
}

/* Antwortknöpfe: wie im Plural-Spiel etwas breiter, damit lange
   Verbformen ("arbeitest") nicht umbrechen oder abgeschnitten werden. */
#verben-screen .answer-buttons {
  width: 100%;
  justify-content: center;
}

#verben-screen .answer-btn {
  max-width: 320px;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

/* Viele Verbformen bestehen aus mehreren Wörtern ("setzt sich
   auseinander", "stehe auf"). Nebeneinander wären sie auf schmalen
   Bildschirmen unlesbar klein, deshalb stehen die drei Antworten dort
   untereinander -- immer, damit die Karte zwischen zwei Aufgaben nicht
   die Höhe wechselt. */
@media (max-width: 640px) {
  #verben-screen .answer-buttons {
    flex-direction: column;
    align-items: center;
  }

  #verben-screen .answer-btn {
    flex: 0 0 auto;
    width: 100%;
    max-width: 340px;
  }
}

/* max-width:100% kommt jetzt einheitlich aus .chapter-progress-block
   weiter oben (VERBEN hatte bereits vorher keine eigene grüne
   Füllungs-Regel und nutzte insofern schon .chapter-progress-bar). */

@media (max-width: 480px) {
  #verben-screen .top-bar {
    width: calc(100% - 24px);
    padding: 12px 16px;
  }
  .verben-game-card {
    padding: 20px 14px;
    border-radius: 20px;
  }
  #verben-screen .answer-btn {
    /* untereinander (siehe Regel bei 640px) -- deshalb NICHT wachsen
       lassen, sonst teilen sich die drei Knöpfe die Kartenhöhe */
    flex: 0 0 auto;
    width: 100%;
    max-width: 340px;
    min-width: 88px;
    padding: 16px 10px;
    font-size: clamp(15px, 4.4vw, 20px);
  }
}


/* ---------------- DER RICHTIGE FALL (#fall-screen) UND
   PRÄPOSITIONEN (#praep-screen) ----------------
   Übernimmt dieselben Werte wie die Artikel-/Verben-Ansicht (Kartenmaße,
   Rahmen, Rundungen, Schatten, Abstände, Grün/Rot, drei gleichwertige
   Antwortknöpfe). Eigene Regeln gibt es nur dort, wo diese Spiele etwas
   anderes anzeigen: einen ganzen Satz statt eines einzelnen Wortes, eine
   Übersetzungszeile, die vollständige Lösung und die kleine Erklärung
   ("Akkusativ · maskulin"). PRÄPOSITIONEN ist inhaltlich das exakte
   Gegenstück zu DER RICHTIGE FALL (nur die Präposition steht zusätzlich
   fest im Satz) und teilt sich deshalb bewusst dieselben Klassen
   (.fall-game-card, .fall-sentence, .fall-answer-btn, …) statt eigener,
   nur umbenannter Kopien — ein gemeinsames Design-System statt
   abweichendem CSS pro Spiel.
   ---------------------------------------------------------------- */

#fall-screen .stats-row,
#praep-screen .stats-row,
#trennbar-screen .stats-row,
#perfekt-screen .stats-row,
#adj-screen .stats-row {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--muted);
  font-size: 12px;
}

#fall-screen .top-bar,
#praep-screen .top-bar,
#trennbar-screen .top-bar,
#perfekt-screen .top-bar,
#adj-screen .top-bar {
  max-width: 1080px;
  width: calc(100% - 32px);
  margin: 20px auto 0;
  background: var(--card);
  border: 1px solid var(--btn-border);
  border-radius: 18px;
  padding: 14px 22px;
}

@media (min-width: 481px) {
  #fall-screen .top-bar,
  #praep-screen .top-bar,
  #trennbar-screen .top-bar,
  #perfekt-screen .top-bar,
  #adj-screen .top-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 10px;
  }
  #fall-screen .controls-row,
  #praep-screen .controls-row,
  #trennbar-screen .controls-row,
  #perfekt-screen .controls-row,
  #adj-screen .controls-row { display: contents; }
  #fall-screen #back-btn-fall,
  #fall-screen #fall-restart-btn,
  #praep-screen #back-btn-praep,
  #praep-screen #praep-restart-btn,
  #trennbar-screen #back-btn-trennbar,
  #perfekt-screen #back-btn-perfekt,
  #adj-screen #back-btn-adj,
  #trennbar-screen #trennbar-restart-btn,
  #perfekt-screen #perfekt-restart-btn,
  #adj-screen #adj-restart-btn {
    min-width: 128px;
  }
  #fall-screen #back-btn-fall,
  #praep-screen #back-btn-praep,
  #trennbar-screen #back-btn-trennbar,
  #perfekt-screen #back-btn-perfekt,
  #adj-screen #back-btn-adj { grid-column: 1; justify-self: start; }
  #fall-screen .stats-row,
  #praep-screen .stats-row,
  #trennbar-screen .stats-row,
  #perfekt-screen .stats-row,
  #adj-screen .stats-row { grid-column: 2; justify-content: center; text-align: center; }
  #fall-screen #fall-restart-btn,
  #praep-screen #praep-restart-btn,
  #trennbar-screen #trennbar-restart-btn,
  #perfekt-screen #perfekt-restart-btn,
  #adj-screen #adj-restart-btn { grid-column: 3; justify-self: end; }
}

#fall-screen #fall-restart-btn,
#praep-screen #praep-restart-btn,
#trennbar-screen #trennbar-restart-btn,
#perfekt-screen #perfekt-restart-btn,
#adj-screen #adj-restart-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

#fall-screen #fall-restart-btn:hover,
#praep-screen #praep-restart-btn:hover,
#trennbar-screen #trennbar-restart-btn:hover,
#perfekt-screen #perfekt-restart-btn:hover,
#adj-screen #adj-restart-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

#fall-screen .game-main,
#praep-screen .game-main,
#trennbar-screen .game-main,
#perfekt-screen .game-main,
#adj-screen .game-main {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  box-sizing: border-box;
  padding-block: clamp(20px, 4vh, 32px);
  gap: clamp(16px, 3vh, 24px);
}

.fall-game-card {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.5vh, 20px);
  padding: clamp(24px, 4vh, 36px) clamp(18px, 5vw, 40px);
  border: 1px solid var(--btn-border);
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 1px 2px var(--schatten-fein), 0 1px 3px var(--schatten-mittel);
}

.fall-task-label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

#fall-screen .word-area,
#praep-screen .word-area,
#trennbar-screen .word-area,
#perfekt-screen .word-area,
#adj-screen .word-area {
  padding: clamp(8px, 2vh, 16px) 8px;
  min-height: auto;
  border-radius: 14px;
}

/* Der Satz mit der Lücke. Anders als ein einzelnes Lernwort darf ein
   Satz ganz normal ZWISCHEN den Wörtern umbrechen; deshalb hier eine
   etwas kleinere Schrift als die 42–80px der Einzelwörter und kein
   nowrap. Die Höhe des Bereichs wird vorher reserviert
   (reserveFallChapterSpace), damit nichts springt. */
.fall-sentence {
  margin: 0;
  font-size: clamp(24px, 5.2vw, 44px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
  max-width: 100%;
  text-align: center;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.fall-sentence.fade-in {
  animation: fadeIn 200ms ease;
}

/* Die Lücke selbst — deutlich sichtbar, aber ruhig. */
.fall-gap {
  color: var(--muted);
  letter-spacing: 0.02em;
}

#fall-word-area.feedback-correct .fall-sentence {
  color: var(--green-text);
}

/* Bedeutung des Satzes (nur bei englischer/russischer Oberfläche) */
.fall-translation {
  margin: 8px 0 0;
  font-size: clamp(13px, 2.4vw, 15px);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.01em;
  text-align: center;
  max-width: 42em;
}

/* Vollständige Lösung nach der Antwort, z. B. "Ich sehe den Mann." */
.fall-solution-line {
  margin: 6px 0 0;
  font-size: clamp(15px, 3vw, 19px);
  font-weight: 700;
  color: var(--green-text);
  text-align: center;
  max-width: 42em;
}

/* Kleine Erklärung darunter: "Akkusativ · maskulin" */
.fall-explanation-line {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted-2);
  text-align: center;
}

#fall-screen .answer-buttons,
#praep-screen .answer-buttons { max-width: 100%; }

#fall-screen .answer-btn,
#praep-screen .answer-btn {
  max-width: 220px;
  white-space: nowrap;
}

/* border-radius kommt jetzt einheitlich aus dem Basis-.answer-btn (16px).
   max-width:100% und grüne Füllung kommen jetzt einheitlich aus
   .chapter-progress-block/.chapter-progress-bar weiter oben. */

#fall-screen .keyboard-hint,
#praep-screen .keyboard-hint,
#trennbar-screen .keyboard-hint,
#perfekt-screen .keyboard-hint,
#adj-screen .keyboard-hint {
  padding: 0;
  margin-top: 4px;
}

/* Symbol der Lernbereichskarte: drei kleine Artikel-Karten
   ("der · den · dem") im Stil des Symbols von DER · DIE · DAS. */
.mode-card-icon-fall-der,
.mode-card-icon-fall-den,
.mode-card-icon-fall-dem {
  font-weight: 800;
  font-size: 11px;
  line-height: 1.1;
}

.mode-card-icon-fall-der { color: var(--accent); }
.mode-card-icon-fall-den { color: var(--sym-fall-den); }
.mode-card-icon-fall-dem { color: var(--sym-fall-dem); }

/* Symbol der Lernbereichskarte PRÄPOSITIONEN: zwei kleine Fall-Badges
   ("Akk." / "Dat.") im selben Stil wie das Symbol von DER RICHTIGE FALL. */
.mode-card-icon-praep-akk,
.mode-card-icon-praep-dat {
  font-weight: 800;
  font-size: 11px;
  line-height: 1.3;
}

.mode-card-icon-praep-akk { color: var(--accent); }
.mode-card-icon-praep-dat { color: var(--sym-praep-dat); }

@media (max-width: 480px) {
  #fall-screen .top-bar,
  #praep-screen .top-bar,
  #trennbar-screen .top-bar,
  #perfekt-screen .top-bar,
  #adj-screen .top-bar {
    width: calc(100% - 24px);
    padding: 12px 16px;
  }
  .fall-game-card {
    padding: 20px 14px;
    border-radius: 20px;
  }
  /* Die drei Artikel sind kurz — sie bleiben wie im Referenzspiel
     DER · DIE · DAS nebeneinander stehen. */
  #fall-screen .answer-btn,
  #praep-screen .answer-btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    padding: 18px 6px;
    font-size: clamp(15px, 4.4vw, 20px);
  }
}


/* ---------------- ADJEKTIV-ENDUNGEN (#adj-screen) ----------------
   Teilt sich bewusst dieselben Klassen wie DER RICHTIGE FALL und
   PRÄPOSITIONEN (.fall-game-card, .fall-sentence, .fall-answer-btn, …).
   Eigene Regeln gibt es nur für die zwei Stellen, an denen sich dieses
   Spiel wirklich unterscheidet:
     1. die Zeile mit dem Grundwort ("Adjektiv: (groß)"),
     2. die Antwortknöpfe — Adjektivformen sind mit bis zu 12 Zeichen
        deutlich länger als die Artikel "der/die/das". Nebeneinander
        würden sie auf schmalen Handys unlesbar klein. Deshalb stehen
        sie unter 640px untereinander, genau wie im VERBEN-Spiel.
   ---------------------------------------------------------------- */

/* Zeile "Adjektiv: (groß)" — dezent unter dem Satz. Bleibt IMMER
   links-nach-rechts, auch bei arabischer Oberfläche (dir="ltr" im
   HTML), und wird deshalb hier auch immer zentriert. */
.trennbar-base,
.perfekt-base,
.adj-base {
  margin: 0 0 4px;
  /* Feste Höhe statt Messung: die Zeile ist immer genau eine Zeile hoch,
     und measureMaxHeight() würde die beiden <span>-Kinder löschen
     (siehe Kommentar in reserveAdjChapterSpace). */
  min-height: 1.5em;
  font-size: clamp(15px, 2.8vw, 18px);
  color: var(--muted-2);
  text-align: center;
}

.trennbar-base-label,
.perfekt-base-label,
.adj-base-label {
  font-weight: 500;
}

.trennbar-base-word,
.perfekt-base-word,
.adj-base-word {
  font-weight: 800;
  color: var(--text);
  margin-inline-start: 6px;
}

#trennbar-screen .answer-buttons,
#perfekt-screen .answer-buttons,
#adj-screen .answer-buttons {
  width: 100%;
  max-width: 100%;
  justify-content: center;
}

#trennbar-screen .answer-btn,
#perfekt-screen .answer-btn,
#adj-screen .answer-btn {
  max-width: 320px;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

@media (max-width: 640px) {
  #trennbar-screen .answer-buttons,
  #perfekt-screen .answer-buttons,
  #adj-screen .answer-buttons {
    flex-direction: column;
    align-items: center;
  }

  #trennbar-screen .answer-btn,
  #perfekt-screen .answer-btn,
  #adj-screen .answer-btn {
    flex: 0 0 auto;
    width: 100%;
    max-width: 340px;
  }
}

@media (max-width: 480px) {
  #trennbar-screen .answer-btn,
  #perfekt-screen .answer-btn,
  #adj-screen .answer-btn {
    /* untereinander (siehe Regel bei 640px) -- deshalb NICHT wachsen
       lassen, sonst teilen sich die drei Knöpfe die Kartenhöhe */
    flex: 0 0 auto;
    width: 100%;
    max-width: 340px;
    min-width: 88px;
    padding: 16px 10px;
    font-size: clamp(15px, 4.4vw, 20px);
  }
}

/* Symbol der Lernbereichskarte ADJEKTIV-ENDUNGEN: zwei kleine
   Endungs-Badges ("-e" / "-en") im selben Stil wie bei PRÄPOSITIONEN. */
.mode-card-icon-adj-e,
.mode-card-icon-adj-en {
  font-weight: 800;
  font-size: 11px;
  line-height: 1.3;
}

.mode-card-icon-adj-e  { color: var(--sym-adj-e); }
.mode-card-icon-adj-en { color: var(--sym-adj-en); }

/* ---------------- PERFEKT (#perfekt-screen) ----------------
   Das Symbol der Menü-Karte zeigt die beiden Bausteine, aus denen das
   Perfekt besteht: das Hilfsverb ("hat") und die Vorsilbe des Partizips
   ("ge-"). Aufbau wie beim Adjektiv-Symbol, nur andere Farben. */
.mode-card-icon-trennbar-stamm,
.mode-card-icon-trennbar-teil,
.mode-card-icon-perfekt-hat,
.mode-card-icon-perfekt-ge {
  font-weight: 800;
  font-size: 11px;
  line-height: 1.3;
}

.mode-card-icon-perfekt-hat { color: var(--sym-perfekt-hat); }
.mode-card-icon-perfekt-ge  { color: var(--sym-perfekt-ge); }

/* ---------------- TRENNBARE VERBEN (#trennbar-screen) ----------------
   Das Symbol zeigt genau das, was das Spiel uebt: das Verb bricht
   auseinander. "steh" bleibt vorne, "auf" wandert ans Satzende und
   ist deshalb abgesetzt eingefaerbt.
   -------------------------------------------------------------------- */
.mode-card-icon-trennbar-stamm,
.mode-card-icon-trennbar-teil {
  display: block;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.mode-card-icon-trennbar-stamm { color: var(--sym-trennbar-stamm); }
.mode-card-icon-trennbar-teil  { color: var(--sym-trennbar-teil); }


/* Messhilfe für reserveSolutionSpace(): das Element behält seinen Platz,
   wird aber nicht dargestellt — dadurch kann die spätere Lösungshöhe
   ermittelt werden, ohne dass der Text sichtbar aufblitzt. */
.measuring {
  visibility: hidden !important;
}


/* ================================================================
   GESPERRTE FÄCHER UND FREISCHALT-BILDSCHIRM (Probe)
   ================================================================
   Vorerst nur bei DER · DIE · DAS. Eine gesperrte Fachkarte bleibt
   in Größe, Position und Aufbau exakt wie jede andere Karte —
   damit springt beim Freischalten nichts. Unterschied ist nur die
   gedämpfte Farbe und das kleine Schloss oben rechts.
   ================================================================ */

.chapter-card-locked .mode-card-title,
.chapter-card-locked .mode-card-desc {
  color: var(--n-grau-a);
}

.chapter-card-locked .mode-card-badge {
  background: var(--n-flaeche-hell);
  color: var(--n-grau-b);
}

.chapter-card-locked .mode-card-bar-fill {
  background: var(--n-balken);
}

.chapter-card-locked .mode-card-progress {
  color: var(--n-grau-a);
}

/* Schloss oben rechts. position: absolute, damit es keinen Platz im
   Textfluss belegt und die Kartenhöhe unverändert bleibt. */
.chapter-card-lock {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--n-grau-b);
  pointer-events: none;
}

.chapter-card:not(.chapter-card-locked) .chapter-card-lock {
  display: none;
}

/* ---------------- Freischalt-Bildschirm ---------------- */

.unlock-card {
  width: 100%;
  max-width: 520px;
  margin: 8px auto 0;
  background: var(--card);
  border: 1px solid var(--n-rand);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 1px 2px var(--schatten-fein), 0 1px 3px var(--schatten-mittel);
  text-align: center;
}

.unlock-price-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 20px;
}

.unlock-price {
  font-size: clamp(34px, 7vw, 44px);
  font-weight: 800;
  color: var(--n-tinte);
  line-height: 1.1;
}

.unlock-price-note {
  font-size: 13.5px;
  color: var(--n-grau-c);
}

.unlock-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.unlock-list li {
  position: relative;
  padding-inline-start: 28px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--n-grau-d);
}

/* Häkchen als CSS, damit kein zusätzliches Markup nötig ist. */
.unlock-list li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--n-haken-bg);
  color: var(--green-text);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.unlock-buy-btn {
  width: 100%;
  min-height: 52px;
  border: none;
  border-radius: 14px;
  background: var(--n-tinte);
  color: var(--accent-text);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.unlock-buy-btn:hover { background: var(--n-tinte-hover); }
.unlock-buy-btn:active { background: var(--n-tinte-aktiv); }

.unlock-buy-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--n-grau-e);
}

.unlock-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
  color: var(--n-grau-e);
  font-size: 13px;
}

.unlock-divider::before,
.unlock-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--n-rand);
}

.unlock-code-row {
  display: flex;
  gap: 8px;
}

.unlock-code-input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--n-rand-2);
  border-radius: 12px;
  background: var(--n-feld);
  font-size: 16px;  /* 16px ist Pflicht: darunter zoomt das iPhone beim Antippen hinein */
  font-family: inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--n-tinte);
}

.unlock-code-input::placeholder {
  letter-spacing: 0.04em;
  color: var(--n-grau-b);
  text-transform: none;
}

.unlock-code-input:focus {
  outline: none;
  border-color: var(--n-tinte);
  background: var(--card);
}

.unlock-code-btn {
  flex: none;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--n-rand-2);
  border-radius: 12px;
  background: var(--card);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  color: var(--n-tinte);
  cursor: pointer;
}

.unlock-code-btn:hover { background: var(--n-feld-hover); }

/* Feste Mindesthöhe, damit die Karte beim Erscheinen einer Meldung
   nicht springt — gleiches Prinzip wie bei den Lösungszeilen in den
   Spielen. */
.unlock-message {
  margin: 12px 0 0;
  min-height: 20px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--n-grau-e);
}

.unlock-message-error { color: var(--red-text); }
.unlock-message-ok { color: var(--green-text); font-weight: 700; }

.unlock-duration-note {
  margin: 0 0 18px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--n-grau-e);
}

.unlock-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: start;
  margin: 0 0 14px;
  cursor: pointer;
}

.unlock-consent-row input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--n-tinte);
  cursor: pointer;
}

.unlock-consent-row span {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--n-grau-f);
}

.unlock-buy-btn:disabled {
  background: var(--n-aus);
  cursor: not-allowed;
}
.unlock-buy-btn:disabled:hover { background: var(--n-aus); }

.unlock-stacked-row { margin-top: 10px; }

.unlock-links-row {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.unlock-test-row {
  width: 100%;
  max-width: 520px;
  margin: 16px auto 0;
  text-align: center;
}

.unlock-test-hint {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--green-text);
  font-weight: 700;
}

/* Schritt 2 des Kaufs: Bestellübersicht mit Kundendaten und den zwei
   Pflicht-Kontrollkästchen (siehe ANANAS_RECHTSTEXTE_UND_CLAUDE_AUFTRAG.txt
   Abschnitt 7). Baut auf denselben .unlock-card/.unlock-buy-btn/
   .unlock-consent-row/.unlock-message-Bausteinen wie Schritt 1 auf. */
.unlock-bestellung-back-btn { margin: 0 0 16px; }

#bestellung-title {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 14px;
  text-align: start;
}

.bestellung-summary {
  text-align: start;
  margin: 0 0 4px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 14px;
  font-size: 13.5px;
}

.bestellung-summary dt { color: var(--n-grau-e); font-weight: 600; }
.bestellung-summary dd { margin: 0; color: var(--n-tinte); line-height: 1.4; }

.bestellung-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0 6px;
  text-align: start;
}

.bestellung-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bestellung-field label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--n-grau-f);
}

.bestellung-field-row {
  display: flex;
  gap: 10px;
}

/* Ohne dieses flex:1 bleiben Felder ohne eigene Breitenregel (z.B.
   Vorname/Nachname beim Widerruf) bei ihrer Mindestbreite stehen,
   statt die Reihe zu fuellen -- die Reihe wirkte dadurch schief. */
.bestellung-field-row .bestellung-field { flex: 1; }
.bestellung-field-row .bestellung-field-ort { flex: 1; }
.bestellung-field-row .bestellung-field-plz { flex: 0 0 120px; }

.bestellung-input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--n-rand-2);
  border-radius: 12px;
  background: var(--n-feld);
  font-size: 16px;  /* 16px ist Pflicht: darunter zoomt das iPhone beim Antippen hinein */
  font-family: inherit;
  color: var(--n-tinte);
  box-sizing: border-box;
}

.bestellung-input:focus {
  outline: none;
  border-color: var(--n-tinte);
  background: var(--card);
}

/* Name und Adresse muessen in lateinischer Schrift stehen -- steht dort
   etwas anderes (arabisch, kyrillisch ...), wird das Feld rot umrandet.
   Getippt werden darf trotzdem alles, gesperrt wird erst beim Kaufen. */
.bestellung-input-fehler,
.bestellung-input-fehler:focus {
  border-color: var(--n-fehler-rand);
  background: var(--n-fehler-bg);
}

/* Diese Felder bleiben auch im arabischen Layout von links nach rechts:
   es gehoert lateinischer Text hinein, und der wuerde sonst am rechten
   Rand beginnen. */
.rtl .bestellung-input[data-latein="1"] {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}

.unlock-consent-row a {
  color: inherit;
  text-decoration: underline;
  font-weight: 700;
}

@media (max-width: 480px) {
  .unlock-card { padding: 24px 18px; }
  .unlock-code-row { flex-direction: column; }
  .unlock-code-btn { width: 100%; }
  .bestellung-field-row { flex-direction: column; }
  .bestellung-field-row .bestellung-field-plz { flex: 1; }
}

/* ------------------------------------------------------------------
   LESERICHTUNG RECHTS-NACH-LINKS (Arabisch)
   Greift nur, wenn <html dir="rtl" class="rtl"> gesetzt ist — also
   ausschliesslich bei Arabisch. Deutsch/Englisch/Russisch/Tuerkisch
   laufen unveraendert weiter.

   Das Layout selbst dreht sich schon von allein: alle Abstaende und
   Positionen stehen als logische Eigenschaften (margin-inline,
   padding-inline, inset-inline-*) und text-align steht auf start.
   Hier bleiben nur die Faelle, die CSS nicht von selbst spiegelt.
   ------------------------------------------------------------------ */

/* Pfeil-Glyphen zeigen in der Gegenrichtung. */
.rtl .mode-card-chevron,
.rtl .chapter-cards-grid .chapter-card-all::after {
  transform: scaleX(-1);
}

/* Lateinisch geschriebener Inhalt bleibt IMMER von links nach rechts und
   wird vom arabischen Text ringsum abgeschirmt (isolate). Ohne das
   verschiebt der Browser die Satzzeichen an den falschen Rand: aus
   "The baby is sleeping." wird ".The baby is sleeping", und die Luecke
   "___" in den Fall-/Praepositionssaetzen wandert ans falsche Ende.

   Bewusst ueber :not([lang="ar"]) statt einer Liste einzelner Sprachen:
   greift damit auch fuer die englische Ersatzsprache und fuer alles,
   was spaeter dazukommt. Ausrichtung (zentriert/linksbuendig) wird NICHT
   angefasst -- die stellt das jeweilige Element schon selbst richtig,
   und ein text-align hier wuerde die zentrierten Zeilen kaputt machen. */
.rtl [dir="ltr"],
.rtl [lang]:not([lang="ar"]) {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Arabische Schrift braucht etwas mehr Zeilenhoehe, sonst stossen die
   Punkte unter dem Text an die naechste Zeile. */
.rtl body {
  line-height: 1.7;
}

/* Zahlen und lateinische Kuerzel innerhalb arabischer Saetze sauber
   abtrennen (Preise, Rechnungsfelder, "Enter"). */
.rtl .lang-latin {
  unicode-bidi: isolate;
}

/* ------------------------------------------------------------------
   ARABISCHE SCHRIFT — Noto Naskh Arabic
   Liegt als Datei bei (assets/schriften/), wird NICHT von Google
   geladen. Zwei Gruende: die Seite muss offline per Doppelklick
   laufen, und ein Abruf bei Google wuerde die IP jedes Besuchers
   dorthin uebertragen — das waere in der EU ein Datenschutzproblem
   und muesste in der Datenschutzerklaerung stehen. So bleibt es
   sauber: kein fremder Server, kein Eintrag noetig.

   Lizenz: SIL Open Font License 1.1 (frei, auch kommerziell).
   Der Lizenztext liegt daneben in LIZENZ-Noto-Naskh-Arabic.txt und
   MUSS beim Weitergeben dabei bleiben.

   font-display: swap — der Text ist sofort da (erst in der
   Systemschrift, dann in Naskh), statt kurz unsichtbar zu bleiben.
   ------------------------------------------------------------------ */
/* size-adjust: Naskh zeichnet seine Buchstaben kleiner in den Schriftkegel
   als eine lateinische Schrift. Bei gleicher Angabe in Pixeln wirkt
   Arabisch daneben deshalb geschrumpft — nachgemessen: bei 16 px sitzt
   "عرف" sichtbar zierlicher als "wissen". 120 % gleicht das aus,
   OHNE dass irgendeine font-size-Regel angefasst werden muss: der
   Browser skaliert die Glyphen im selben Kegel. Damit bleiben alle
   Abstaende, Knopfhoehen und Umbrueche exakt wie in den anderen
   Sprachen. */
@font-face {
  font-family: "Noto Naskh Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  size-adjust: 120%;
  src: url("assets/schriften/noto-naskh-arabic-400.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Naskh Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  size-adjust: 120%;
  src: url("assets/schriften/noto-naskh-arabic-700.woff2") format("woff2");
}

/* Nur wenn Arabisch aktiv ist. Deutsch, Englisch, Russisch und
   Tuerkisch sehen unveraendert aus — die Schrift wird fuer sie
   nicht einmal geladen (der Browser holt eine Schriftdatei erst,
   wenn sie wirklich gebraucht wird). */
.rtl body,
.rtl button,
.rtl input,
.rtl select,
.rtl textarea {
  font-family: "Noto Naskh Arabic", Inter, ui-rounded, "Segoe UI", Tahoma, Arial, sans-serif;
}

/* ------------------------------------------------------------------
   ARABISCH: UEBERSCHRIFTEN NICHT FETT
   ------------------------------------------------------------------
   Kundenmeldung 06.09.2026 (Bo): "the text gets somehow thick when i
   choose the arabic language".

   NACHGEMESSEN, warum:
   Von Noto Naskh Arabic liegen nur ZWEI Schnitte bei, 400 und 700.
   Gemessen im Browser (gleicher Text, gleiche Groesse):
       400 und 500        -> Breite 226,88 px   (Datei 400)
       600, 700, 800, 900 -> Breite 235,25 px   (Datei 700)
   Alles ab 600 landet also auf DERSELBEN fetten Datei. Im Deutschen
   sind 600 und 800 zwei verschiedene Stufen, im Arabischen eine
   einzige -- die schwerste. Dazu kommt size-adjust: 120 %: die
   Zeichen sind im selben Kegel 20 % groesser gezeichnet.
   Auf #bereiche traf das die sechs Kartentitel (Schnitt 800) und die
   Ueberschrift (700). Ergebnis: dicke, gedraengte Schrift.

   ZWEI WEGE AUSPROBIERT UND ANGESEHEN (Regel Q2: nachmessen, nicht
   annehmen):
     A  Schnitt 500 statt fett   -> ruhig und gut lesbar
     B  Schriftgroesse 8 % kleiner -> Text zu klein, und die
        Kartenbeschreibung brach auf zwei Zeilen um. Verworfen.
   Genommen wurde A.

   FACHLICH IST DAS AUCH DER NORMALE WEG: im Arabischen wird
   Hervorhebung ueber GROESSE gemacht, nicht ueber Fettschrift.
   Schweres Naskh gilt als schlecht lesbar.

   NICHT ANGEFASST: Knoepfe, Antwortknoepfe, Fachnummern und alles
   mit einem eigenen lang-Attribut. Die Fachnummern sind Ziffern, und
   lang-markierte Stellen sind deutscher Lernstoff -- die stehen
   ohnehin in Inter und sollen fett bleiben.

   [dir="rtl"] und nicht .rtl: die Klasse setzt nur index.html.
   Die festen Seiten bekommen von wort.js allein das dir-Attribut.
   DIESELBE REGEL STEHT IN wort.css (Fehlerliste O16 / Q10).
   ------------------------------------------------------------------ */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] p.subtitle,
[dir="rtl"] .lede,
[dir="rtl"] .mode-card-progress,
[dir="rtl"] .mode-card-title:not([lang]) {
  font-weight: 500;
}

/* Deutsche Lernwoerter und lateinischer Text behalten die
   urspruengliche Schrift — Naskh hat keine passenden lateinischen
   Buchstaben, "der Tisch" saehe darin fremd aus. */
.rtl [dir="ltr"],
.rtl [lang]:not([lang="ar"]) {
  font-family: Inter, ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
}

/* ==========================================================
   KOPFZEILE IM SPIEL: "Neu starten" darf nicht herausragen
   ==========================================================
   Alle Spielkopfzeilen sind ab 481 px als Raster
   "1fr auto 1fr" gebaut. Die beiden Knoepfe haben
   min-width: 128px, damit der Fach-Titel wirklich mittig
   zwischen ihnen sitzt.

   Ein Raster-Feld haelt aber standardmaessig seine volle
   Inhaltsbreite (min-width: auto). Ist der Fach-Titel lang
   und das Fenster schmal, wird die Mittelspalte deshalb
   breiter als der Platz erlaubt -- die 1fr-Spalten schrumpfen
   unter 128 px und der rechte Knopf ("Neu starten") rutscht
   aus der Kopfzeile heraus.
   Gemessen bei 495 px Fensterbreite (vor dieser Regel):
   Satzbau 50 px, Adjektiv 36 px, Praepositionen 31 px,
   Vokabeln 12 px Ueberstand.

   min-width: 0 erlaubt der Titelspalte zu schrumpfen; der
   Titel bricht dann um, statt die Knoepfe wegzudruecken.
   Bei genug Platz aendert die Regel nichts -- die Spalte
   nimmt weiterhin ihre Inhaltsbreite ein.
   ---------------------------------------------------------- */
@media (min-width: 481px) {
  #game-screen #stats-row,
  #vocab-screen .stats-row,
  #plural-screen .stats-row,
  #satzbau-screen .stats-row,
  #verben-screen .stats-row,
  #fall-screen .stats-row,
  #praep-screen .stats-row,
  #trennbar-screen .stats-row,
  #perfekt-screen .stats-row,
  #adj-screen .stats-row {
    min-width: 0;
  }
}

/* ---------------- FREISCHALT-SEITE: der Satz unter der Überschrift
   Kundenwunsch 29.08.2026: "buy once play forever" gross und deutlich.
   Bewusst NICHT "für immer" — zwei Zeilen tiefer steht das
   Kleingedruckte "mindestens 24 Monate, danach solange Ananas
   betrieben wird". Ein grosses "für immer" wuerde dem eigenen
   Kleingedruckten widersprechen. "Nie wieder zahlen" trifft den
   Kern (Einmalzahlung statt Abo) und stimmt uneingeschraenkt.
   -------------------------------------------------------------- */
#unlock-screen p.subtitle#unlock-subtitle {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text);
  margin-top: 6px;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}

@media (max-width: 480px) {
  #unlock-screen p.subtitle#unlock-subtitle {
    font-size: 22px;
  }
}

/* ================================================================
   "NACH OBEN"-KNOPF  (Kundenwunsch 03.09.2026)
   ================================================================
   Sitzt fest UNTEN IN DER MITTE und bringt einen mit einem Tipp
   wieder an den Anfang. Sichtbar nur, wenn das Haupt-Skript die
   Klasse .to-top-sichtbar setzt -- siehe topKnopfAktualisieren().

   Kundenwunsch 03.09.2026, zweite Runde: erst sass der Knopf klein
   und hell unten rechts. Bo hat ihn dort schlecht gesehen. Jetzt:
   mittig, groesser, schwarz mit weissem Pfeil und deutlichem
   Schatten -- dieselbe Optik wie die Hauptknoepfe der Seite
   ("Jetzt lernen", "Zum Lernspiel").

   Mittig hat noch einen Vorteil: es gibt keine linke/rechte Seite
   mehr, also braucht Arabisch (rechts-nach-links) keine Extrawurst.

   Grundzustand ist ABSICHTLICH unsichtbar UND nicht fokussierbar
   (visibility: hidden nimmt den Knopf auch aus der Tab-Reihenfolge).
   Faellt JavaScript aus, ist der Knopf einfach nicht da.

   z-index 40: ueber den Fachkarten, aber UNTER dem Bestaetigungs-
   Dialog (50) und der Sprachauswahl (100) -- der Knopf darf nie
   ueber einem Dialog liegen.

   ACHTUNG beim transform: der Knopf wird mit translateX(-50%)
   zentriert. Das Ein-/Ausblenden muss dieses -50% MITNEHMEN, sonst
   springt der Knopf beim Erscheinen nach rechts. Deshalb stehen in
   beiden Zustaenden zwei Werte in translate().
   ---------------------------------------------------------------- */
#to-top-btn {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 40;

  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  border: 0;
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: 0 10px 28px rgba(24, 24, 24, 0.30);

  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  cursor: pointer;

  /* unsichtbarer Grundzustand */
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}

#to-top-btn.to-top-sichtbar {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
}

#to-top-btn:hover {
  background: var(--accent-hover);
  box-shadow: 0 12px 32px rgba(24, 24, 24, 0.38);
}

#to-top-btn.to-top-sichtbar:active {
  transform: translate(-50%, 2px);
}

/* Auf dem Handy nur wenig kleiner -- er soll gut sichtbar bleiben.
   52px trifft man mit dem Daumen sicher. */
@media (max-width: 520px) {
  #to-top-btn {
    width: 52px;
    height: 52px;
    font-size: 24px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

/* Wer im Betriebssystem "weniger Bewegung" eingestellt hat, bekommt
   kein Ein- und Ausblenden. */
@media (prefers-reduced-motion: reduce) {
  #to-top-btn { transition: none; }
}

  /* ============================================================
     SPIEL-HILFE  "Wie geht dieses Spiel?"
     ============================================================
     Kundenwunsch 04.09.2026: In jedem Spiel soll stehen, worum es
     geht und wie man spielt. Steht auf dem Fach-Auswahl-Bildschirm,
     also immer VOR dem ersten Wort.
     Zugeklappt: wer das Spiel kennt, sieht nur eine Zeile.
     Bewusst ein <details> und kein eigenes Fenster -- das braucht
     kein Programm, geht mit der Tastatur und liest sich mit einem
     Screenreader von selbst richtig vor.
     ============================================================ */
  .spiel-hilfe {
    width: 100%;
    /* Der Kasten geht ueber die ganze Inhaltsbreite -- genau wie
       auf /lernen-von-null/ und /hoeren-und-lesen/. Frueher war er
       hier auf 720 px gedeckelt und mittig; dadurch stand er auf
       jeder App-Seite woanders als die Ueberschrift darueber
       (Design-Audit 05.09.2026, Punkt 8). */
    max-width: none;
    margin: 22px 0 26px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    text-align: start;
  }

  .spiel-hilfe > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    border-radius: var(--radius-md);
    list-style-position: inside;
  }

  .spiel-hilfe > summary:hover {
    background: var(--btn-hover);
  }

  .spiel-hilfe > summary:focus-visible {
    outline: 3px solid #2b6ef2;
    outline-offset: 2px;
  }

  .spiel-hilfe-inhalt {
    padding: 0 16px 14px;
  }

  .spiel-hilfe-inhalt p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted-2);
  }

  .spiel-hilfe-inhalt p:last-child {
    margin-bottom: 0;
  }

/* ==================================================================
   HÖREN — GESCHICHTEN LESEN
   ==================================================================
   Eigener Bereich, kein Spiel. Deshalb kein Antwortfeld, keine
   Knopfreihe mit drei Antworten -- sondern eine ruhige Lesekarte.

   FARBEN: Ausser der Symbol-Kachel steht hier KEINE feste Farbe.
   Alles kommt aus den Variablen, damit Hell und Dunkel von selbst
   stimmen (Regel aus Teil O der Fehlerliste). Die Symbol-Kacheln der
   Menuekarten sind bewusst die Ausnahme -- die sind bei allen neun
   Spielen fest und in beiden Modi gleich.
   ================================================================== */

.mode-card-icon-hoeren {
  color: #0d6b7a;
  background: #d3f0f3;
}

/* ---- Die Lesekarte ---------------------------------------------- */
.hoeren-card {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: clamp(24px, 4vh, 36px) clamp(18px, 5vw, 40px);
  border: 1px solid var(--btn-border);
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 1px 2px var(--schatten-fein), 0 1px 3px var(--schatten-mittel);
}

/* ---- Titel der Geschichte ----------------------------------------
   Steht seit 05.09.2026 UEBER der Lesekarte, in der freien Flaeche
   unter der Ananas-Kopfzeile (Kundenwunsch: "this text should be
   here, write it big enough and let some space to the bottom and
   top"). Deshalb gibt es in .hoeren-card keine Ueberschrift mehr --
   die alte Regel dafuer ist geloescht.

   Die Breite ist bewusst dieselbe wie die der Karte (760 px) samt
   gleichem Innenpolster: so beginnt der Titel genau ueber dem ersten
   Buchstaben des Textes. Wer die eine Breite aendert, aendert auch
   die andere.                                                       */
.hoeren-kopfzeile {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: clamp(30px, 5vh, 52px) clamp(18px, 5vw, 40px) clamp(26px, 4vh, 42px);
  text-align: center;
}

.hoeren-kopfzeile h1 {
  margin: 0;
  font-size: var(--titel-gross);
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--text);
}

.hoeren-kopfzeile .hoeren-titel-en { margin: 8px 0 0; }

.hoeren-kopfzeile .hoeren-meta {
  margin: 12px 0 0;
  font-size: 15px;
}

.hoeren-titel-en {
  margin: 4px 0 0;
  font-size: clamp(14px, 3vw, 16px);
  font-style: italic;
  color: var(--muted);
}

.hoeren-meta {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-2);
}

/* ---- Platz fuer den Ton ------------------------------------------
   Solange keine Tondatei da ist, steht hier nur ein Satz. Der Kasten
   bleibt trotzdem stehen, damit die Seite spaeter nicht springt,
   wenn der Abspieler dazukommt.                                     */
.hoeren-ton {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: var(--btn-hover);
}

.hoeren-ton-hinweis {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.hoeren-ton-player {
  width: 100%;
  display: block;
}

/* Der gestrichelte Rand oben ist die "kommt spaeter"-Optik: er gehoert
   zum blossen Hinweis. Sobald in dem Kasten ein echter Abspieler sitzt,
   wird der Rand durchgezogen -- sonst sieht die fertige Sache aus wie
   ein Platzhalter (aufgefallen beim Einbau der ersten Tondatei,
   05.09.2026). :has() koennen alle Browser, die die Seite bedient. */
.hoeren-ton:has(.hoeren-ton-player:not(.hidden)) {
  border-style: solid;
}

/* ---- Der Text ----------------------------------------------------
   Bewusst grosszuegig: laengere Zeilenhoehe und begrenzte Zeilen-
   laenge. Wer eine Fremdsprache liest, verliert sonst leicht die
   Zeile.                                                            */
.hoeren-text {
  margin-top: 22px;
}

.hoeren-absatz {
  margin: 0 0 18px;
  font-size: clamp(17px, 3.4vw, 19px);
  line-height: 1.75;
  color: var(--text);
}

.hoeren-absatz-en {
  margin: -10px 0 20px;
  font-size: clamp(15px, 3vw, 16px);
  line-height: 1.6;
  color: var(--muted);
  border-inline-start: 3px solid var(--border);
  padding-inline-start: 12px;
}

/* ---- Knoepfe unter dem Text -------------------------------------- */
.hoeren-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}

.hoeren-action-btn {
  flex: 0 1 240px;
  min-width: 160px;
  min-height: 48px;
  padding: 14px 20px;
  font-family: inherit;
  font-size: clamp(15px, 3vw, 17px);
  font-weight: 700;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--btn-border);
  border-radius: 14px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.hoeren-action-btn:hover {
  background: var(--btn-hover);
}

/* Ist die Geschichte als gelesen markiert, sieht man das sofort --
   gruen, genau wie ein fertiges Fach in den Spielen. */
.hoeren-action-btn.ist-gelesen {
  color: var(--green-text);
  background: var(--green-bg);
  border-color: var(--green-border);
}

.hoeren-naechste-btn {
  color: var(--accent-text);
  background: var(--accent);
  border-color: var(--accent);
}

.hoeren-naechste-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* ---- Handy -------------------------------------------------------- */
@media (max-width: 480px) {
  .hoeren-card {
    padding: 20px 14px;
    border-radius: 20px;
  }
  .hoeren-action-btn {
    flex: 1 1 140px;
  }
  /* Der Test-Knopf bleibt breit -- er steht allein in seiner Zeile. */
  .hoeren-test-start-btn {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* ==================================================================
   DIE SECHS LERNBEREICHE — GROSSE KARTEN
   ==================================================================
   Kundenwunsch 05.09.2026: die Bereiche stehen dort, wo vorher gleich
   die Spiele kamen, und sie sollen GROSS sein. Deshalb genau dieselbe
   Karte wie bei den Spielen (.mode-card) und dasselbe Raster wie
   #mode-cards: eine Spalte auf dem Handy, zwei ab 600 px, drei ab
   1000 px.

   Unterschied zu den Spielen: statt eines gezeichneten Symbols steht
   ein Emoji in der Kachel. Keine feste Farbe -- alles aus den
   Variablen, damit Hell und Dunkel stimmen.
   ================================================================== */
#bereich-cards {
  max-width: 1200px;
  width: 100%;
  margin-inline: auto;
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr;
  /* ALLE KARTEN GLEICH HOCH (07.09.2026, Bo: "the height of these
     buttons the same ... symmetrical").
     "align-items: stretch" allein reichte NICHT. Es macht die Karten
     nur innerhalb IHRER Zeile gleich hoch. Weil jede Zeile ihre eigene
     Hoehe bekommt, war die obere Reihe 246 px und die untere 206 px --
     genau der Unterschied, den Bo angestrichen hat.
     "grid-auto-rows: 1fr" gibt ALLEN Zeilen dieselbe Hoehe. Damit sind
     alle sechs Karten gleich gross, egal wie lang ihr Text ist. */
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 16px;
}

@media (min-width: 600px) {
  #bereich-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  #bereich-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* .bereich-card traegt zusaetzlich .mode-card -- Groesse, Rahmen,
   Schatten und Schwebe-Verhalten kommen von dort. Hier nur, was ein
   Link anders braucht als ein Knopf. */
.bereich-card {
  text-decoration: none;
  color: var(--text);
}

.bereich-card-icon {
  font-size: 26px;
  line-height: 1;
}

/* TON-ZEICHEN AUF DEN BEREICHS-KARTEN (09.09.2026, Bo: "so that they
   know that there is sound", dann: "put this icon in the corner").
   Nur das Zeichen, kein Text -- so muss nichts uebersetzt werden.
   Es steht UNTEN LINKS in der Ecke, unter dem Bereichs-Symbol. Die
   Karte ist schon position:relative (dort haengt auch der Pfeil-Knopf).
   Links 22px = dieselbe Kante wie das Symbol oben, damit die beiden
   Zeichen in einer Spalte stehen.
   Es steht nur auf Karten, die wirklich Ton haben. Wer es woanders
   hinsetzt, verspricht dem Lernenden etwas, das es nicht gibt. */
/* ABO KUENDIGEN (10.09.2026, Auftrag Bo)
   ------------------------------------------------------------------
   Sitzt im Freischalt-Bildschirm unter "Freigeschaltet mit ...".
   Bewusst ruhig gehalten: der Knopf muss auffindbar sein (das ist der
   ganze Zweck), aber er soll niemanden zum Kuendigen einladen.
   Farben nur aus den vorhandenen Variablen. */
.abo-bereich {
  margin: 14px 0 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  text-align: center;
}

.abo-frage {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.abo-frage-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}

/* ZWEI PLAENE AUF DER FREISCHALT-SEITE (10.09.2026, Auftrag Bo)
   ------------------------------------------------------------------
   Zwei Karten nebeneinander, auf dem Handy untereinander. Die
   gewaehlte Karte traegt .plan-karte-gewaehlt -- gesetzt wird sie in
   der Logik (Teil C), nicht hier.
   Farben kommen aus den vorhandenen Variablen: kein neuer Farbton. */
.plan-wahl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 10px;
}

@media (max-width: 480px) {
  .plan-wahl { grid-template-columns: 1fr; }
}

.plan-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 18px 14px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: center;
}

.plan-karte:hover { border-color: var(--btn-border); }

.plan-karte-gewaehlt {
  border-color: var(--accent);
  background: var(--btn-hover);
}

.plan-preis { font-size: 26px; font-weight: 800; line-height: 1.1; }
.plan-zeit  { font-size: 15px; color: var(--muted); }

.plan-spar {
  position: absolute;
  top: -11px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.bereich-ton {
  position: absolute;
  inset-inline-start: 22px;
  bottom: 18px;
  font-size: 16px;
  line-height: 1;
  opacity: .75;
  pointer-events: none;
}

/* Farbe der sechs Bereichs-Karten
   ------------------------------------------------------------------
   Bewusst KEINE neuen Farbvariablen: die --k-*-Saetze stehen schon in
   allen drei Theme-Bloecken (hell / Geraet dunkel / eigene Wahl) und
   sind dort gepflegt. Bereiche und Spiele stehen nie auf demselben
   Bildschirm, ein gleicher Ton stoert also nicht.
   "Hoeren und Lesen" bekommt sein eigenes --k-hoeren, damit Bereich
   und Spielkarte dieselbe Farbe tragen.                              */
#bereich-cards .bereich-card:nth-child(1) { background: var(--k-artikel-bg);  border-color: var(--k-artikel-rand); }
#bereich-cards .bereich-card:nth-child(1):hover { background: var(--k-artikel-bgh); border-color: var(--k-artikel-randh); }
#bereich-cards .bereich-card:nth-child(1) .mode-card-chevron { color: var(--k-artikel-akzent); }

#bereich-cards .bereich-card:nth-child(2) { background: var(--k-trennbar-bg); border-color: var(--k-trennbar-rand); }
#bereich-cards .bereich-card:nth-child(2):hover { background: var(--k-trennbar-bgh); border-color: var(--k-trennbar-randh); }
#bereich-cards .bereich-card:nth-child(2) .mode-card-chevron { color: var(--k-trennbar-akzent); }

#bereich-cards .bereich-card:nth-child(3) { background: var(--k-vokabel-bg);  border-color: var(--k-vokabel-rand); }
#bereich-cards .bereich-card:nth-child(3):hover { background: var(--k-vokabel-bgh); border-color: var(--k-vokabel-randh); }
#bereich-cards .bereich-card:nth-child(3) .mode-card-chevron { color: var(--k-vokabel-akzent); }

#bereich-cards .bereich-card:nth-child(4) { background: var(--k-adj-bg);      border-color: var(--k-adj-rand); }
#bereich-cards .bereich-card:nth-child(4):hover { background: var(--k-adj-bgh); border-color: var(--k-adj-randh); }
#bereich-cards .bereich-card:nth-child(4) .mode-card-chevron { color: var(--k-adj-akzent); }

#bereich-cards .bereich-card:nth-child(5) { background: var(--k-hoeren-bg);   border-color: var(--k-hoeren-rand); }
#bereich-cards .bereich-card:nth-child(5):hover { background: var(--k-hoeren-bgh); border-color: var(--k-hoeren-randh); }
#bereich-cards .bereich-card:nth-child(5) .mode-card-chevron { color: var(--k-hoeren-akzent); }

#bereich-cards .bereich-card:nth-child(6) { background: var(--k-perfekt-bg);  border-color: var(--k-perfekt-rand); }
#bereich-cards .bereich-card:nth-child(6):hover { background: var(--k-perfekt-bgh); border-color: var(--k-perfekt-randh); }
#bereich-cards .bereich-card:nth-child(6) .mode-card-chevron { color: var(--k-perfekt-akzent); }

/* NEUE 3D-SYMBOLE (12.09.2026, Bo: "change our buttons with these").
   Vorher stand hier ein Emoji in einer weissen Kachel. Die neuen
   Symbole (webseite/assets/bereiche/*.webp, gebaut von
   3-REGELN-UND-NOTIZEN/WERKZEUGE/bereich-symbole-bauen.py) haben ihre
   eigene Form und eigene Schatten -- in einer weissen Kachel wirkten
   sie eingesperrt. Deshalb: keine Kachel, kein Kachel-Schatten, das
   Symbol etwas groesser.
   Die Groesse bleibt ein festes Quadrat, damit Ueberschrift und
   Ton-Zeichen darunter an derselben Stelle stehen wie vorher. */
#bereich-cards .bereich-card-icon {
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  width: 64px;
  height: 64px;
  margin-top: -4px;
}
#bereich-cards .bereich-card-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Beim Ueberfahren der Karte hebt sich das Symbol ein wenig. */
  transition: transform 180ms ease;
}
#bereich-cards .bereich-card:hover .bereich-card-icon img {
  transform: translateY(-3px) scale(1.04);
}
@media (max-width: 560px) {
  #bereich-cards .bereich-card-icon { width: 54px; height: 54px; margin-top: -2px; }
}
@media (prefers-reduced-motion: reduce) {
  #bereich-cards .bereich-card-icon img { transition: none; }
  #bereich-cards .bereich-card:hover .bereich-card-icon img { transform: none; }
}

/* SIEBTE KARTE "Woerter schreiben" (18.09.2026, Bo: ein Knopf unter den
   sechs, fuer das neue Tipp-Spiel /schreiben/). Ueber die ganze Breite,
   damit sie nicht allein links in einer halben Reihe steht. Farbe: das
   Blau des Plural-Spiels -- noch von keiner Bereichs-Karte benutzt.
   Symbol vorerst ein Emoji (kein 3D-Bild vorhanden), gleich gross wie
   die anderen Symbole. */
#bereich-cards .bereich-card-breit { grid-column: 1 / -1; }
#bereich-cards .bereich-card.bereich-card-breit { background: var(--k-plural-bg); border-color: var(--k-plural-rand); }
#bereich-cards .bereich-card.bereich-card-breit:hover { background: var(--k-plural-bgh); border-color: var(--k-plural-randh); }
#bereich-cards .bereich-card.bereich-card-breit .mode-card-chevron { color: var(--k-plural-akzent); }
#bereich-cards .bereich-card-emoji {
  display: grid; place-items: center;
  font-size: 46px; line-height: 1;
}
@media (max-width: 560px) {
  #bereich-cards .bereich-card-emoji { font-size: 40px; }
}

/* "Los geht's" ueber den sechs Bereichen: mittig, mit Luft nach oben
   und unten (Kundenwunsch 05.09.2026 -- vorher standen dort zwei
   linksbuendige Zeilen "Was moechtest du lernen?" plus Unterzeile). */
#bereich-select h1 {
  width: 100%;
  /* text-align steht hier NICHT mehr. Grund: eine ID (1-0-1) schlaegt
     jede Klasse (0-1-1) -- mit "text-align: start" an dieser Stelle
     haette die Klasse .seitenkopf-mitte auf genau diesem Bildschirm
     nichts bewirkt, und man haette den Fehler in der Klasse gesucht
     statt hier (Fehlerliste Q26).
     Die Ausrichtung kommt jetzt von .seitenkopf-mitte, siehe dort.
     Wer sie wieder linksbuendig will, nimmt die Klasse aus dem
     <section>-Tag in index.html -- nicht hier eine Zeile dazu. */

  /* OBEN 0, NICHT MEHR 48px. Der Abstand nach oben kommt seit dem
     05.09.2026 aus der senkrechten Mitte (.inhalt-mitte-hoch): der
     freie Platz wird gleichmaessig ueber UND unter den Block gelegt.
     Blieben hier 48px stehen, waere oben immer 48px mehr als unten --
     also genau das, was Bo beanstandet hat ("same space to top and
     bottom").
     ACHTUNG: Diese Zeile und die Klasse .inhalt-mitte-hoch am
     <section> in index.html gehoeren ZUSAMMEN. Wer die Klasse
     entfernt, traegt hier wieder 48px ein -- sonst klebt die
     Ueberschrift an der Kopfleiste. */
  margin: 0 0 44px;
}

@media (max-width: 480px) {
  /* Auf dem Handy ist der Inhalt hoeher als das Fenster. Dort greift
     "safe center" nicht mehr und der Block beginnt oben -- deshalb
     braucht die Ueberschrift hier wieder einen eigenen Abstand. */
  #bereich-select h1 { margin: 32px 0 28px; }
}

/* "LOS GEHT'S" UNSICHTBAR (18.09.2026, Bo: "delete please the sentence
   let's go"). Nur VERSTECKT, nicht geloescht:
   - index.html schreibt die Uebersetzung per JS hinein
     (bereichTitelEl) -- ohne das Element gaebe es einen Fehler.
   - Google und Vorleseprogramme brauchen eine Ueberschrift auf der
     Seite; sichtbar muss sie nicht sein.
   Zwei IDs (2-0-0) schlagen "#bereich-select h1" (1-0-1) oben.
   Zurueckholen: diesen Block loeschen. */
#bereich-select #bereich-select-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Auf dem Handy gab die Ueberschrift den Abstand zur Kopfleiste --
   jetzt uebernehmen das die Karten selbst. */
@media (max-width: 480px) {
  #bereich-select #bereich-cards { margin-top: 24px; }
}

/* Der Lese-Bildschirm hat KEINE Kopfleiste mehr (05.09.2026, "u can
   delete it and let the text only"). Die frueheren Regeln fuer
   #hoeren-screen .top-bar sind deshalb geloescht -- es gibt kein
   solches Element mehr. Das Niveau steht jetzt in .hoeren-meta. */

#hoeren-screen .game-main {
  /* 20 px Innenpolster links und rechts kommen aus der allgemeinen
     .game-main-Regel. Damit die Lesekarte genauso breit wird wie
     die Leiste darueber, wird das Polster hier eingerechnet:
     760 + 2x20 = 800. Leiste und Karte stehen dadurch exakt
     uebereinander ("symmetrical", 05.09.2026). */
  max-width: 800px;
  width: calc(100% - 32px + 40px);
  margin-inline: auto;
}

/* ==================================================================
   ZURUECK-KNOEPFE DER UEBERSICHTEN: AUS
   ==================================================================
   Kundenwunsch 05.09.2026: "just delete these buttons, because they
   can use the browser buttons to go back". Betroffen sind genau die
   drei Arten, die der Betriebsinhaber gezeigt hat:
     "← Bereiche"    auf der Spieleliste und bei Hoeren
     "← Spiele"      auf den neun Fach-Auswahlen
     "← Geschichten" im Lesebildschirm

   BEWUSST NUR AUSGEBLENDET, nicht aus dem HTML geloescht: die Knoepfe
   samt ihrer Klick-Logik bleiben stehen. Wer sie zurueckhaben will,
   loescht diesen einen Block -- kein Umbau noetig.

   NICHT betroffen: die Knoepfe "← Faecher" IN den laufenden Spielen
   (back-btn-article, back-btn-vocab, ...) sowie Freischalten und
   Widerruf. Die hat der Betriebsinhaber nicht gezeigt.

   ACHTUNG: manifest.webmanifest steht auf "display": "standalone".
   Wer die Seite auf den Handy-Startbildschirm legt, hat KEINE
   Browser-Knoepfe. Dort fuehrt jetzt kein Weg mehr zurueck.
   ================================================================== */
#back-btn-mode-select,
#back-btn-hoeren-niveau,
#back-btn-chapter-select,
#back-btn-vocab-chapter-select,
#back-btn-plural-chapter-select,
#back-btn-satzbau-chapter-select,
#back-btn-verben-chapter-select,
#back-btn-praep-chapter-select,
#back-btn-adj-chapter-select,
#back-btn-perfekt-chapter-select,
#back-btn-trennbar-chapter-select,
#back-btn-fall-chapter-select {
  display: none;
}

/* Woerter-Uebung unter der Geschichte (05.09.2026). Sie steht direkt
   im Lese-Kasten, damit man nach dem Lesen ohne Umweg weiteruebt. */
.hoeren-ueben-block {
  /* Luft zwischen den Knoepfen der Geschichte und der Uebung --
     sonst kleben Lesen und Ueben aneinander (Kundenwunsch
     05.09.2026: "let some space there"). */
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.hoeren-ueben-titel {
  margin: 0 0 22px;
  font-size: clamp(19px, 3.6vw, 24px);
  color: var(--text);
}

.hoeren-ueben-karte {
  width: 100%;
}

.hoeren-ueben-fuss {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

/* ==================================================================
   MINI-TEST ZUR GESCHICHTE (05.09.2026)
   ==================================================================
   Sitzt zwischen der Geschichte und der Woerter-Uebung. Beide Kaesten
   haengen an derselben Trennlinie oben, damit man beim Scrollen
   sieht: hier endet der Text, hier faengt das Ueben an.
   ================================================================== */
.hoeren-test-block {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.hoeren-test-titel {
  margin: 0 0 8px;
  font-size: clamp(19px, 3.6vw, 24px);
  color: var(--text);
}

.hoeren-test-hinweis {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--muted);
}

/* Der Knopf "Test". Bewusst in der Farbe des Bereichs -- er ist das
   einzige, was hier zuerst zu sehen ist, und soll gefunden werden. */
.hoeren-test-start-btn {
  color: var(--accent-text);
  background: var(--accent);
  border-color: var(--accent);
  min-width: 200px;
}

.hoeren-test-start-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.hoeren-test-karte {
  width: 100%;
  margin-top: 4px;
}

.hoeren-test-zaehler {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted-2);
}

/* Kleiner als der Kasten im Vokabelspiel: dort steht EIN Wort gross
   in der Mitte, hier ein ganzer Satz.

   Der Abstand nach unten ist bewusst klein: Frage und Antworten
   gehoeren zusammen und sollen zusammen im Bild sein (Kundenwunsch
   05.09.2026: "there is too much space"). Ganz auf Null geht es
   nicht -- unter der Frage steht die Rueckmeldung ("Richtig" bzw.
   die richtige Antwort), und ihr Platz muss vorher schon frei sein.
   Sonst springen die Antwortknoepfe beim Antworten nach unten. */
.hoeren-test-frage-area {
  min-height: 0;
  padding: clamp(14px, 2vh, 20px) clamp(16px, 4vw, 32px) 0;
}

.hoeren-test-frage-area .feedback-line {
  min-height: 26px;
  margin-top: 6px;
}

.hoeren-test-frage {
  margin: 0;
  font-size: clamp(17px, 3.4vw, 21px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--text);
}

/* Die Antworten stehen UNTEREINANDER, nicht nebeneinander wie die
   drei kurzen Woerter im Artikelspiel: hier sind es ganze Saetze
   ("Sie isst, trinkt Tee und lernt Deutsch"). Nebeneinander waeren
   sie auf dem Handy nur noch drei schmale Spalten. */
.hoeren-test-antworten {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: 8px;
}

.hoeren-test-antwort-btn {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  /* .answer-btn deckelt die Breite auf 220 px -- das ist fuer DER/DIE/
     DAS richtig, fuer einen ganzen Satz nicht. Deckel hier weg. */
  max-width: none;
  font-size: clamp(15px, 3vw, 17px);
  line-height: 1.4;
  text-align: center;
}

.hoeren-test-ergebnis {
  margin-top: 8px;
}

.hoeren-test-ergebnis-zahl {
  margin: 0;
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 800;
  color: var(--text);
}

.hoeren-test-ergebnis-text {
  margin: 8px 0 16px;
  font-size: clamp(15px, 3vw, 17px);
  color: var(--muted);
}

/* Der Knopf "Uebersetzung zeigen" sass frueher in der Kopfleiste. Die
   gibt es nicht mehr, also steht er jetzt mittig in der Lesekarte.
   Stand 05.09.2026 ist er ausgeschaltet (HOEREN_UEBERSETZUNG_ZEIGEN),
   deshalb sieht man ihn nicht. */
.hoeren-uebersetzung-btn {
  display: block;
  margin: 12px auto 0;
}

/* .hoeren-bereichsname und .hoeren-niveau-badge sind weg: die
   Kopfleiste des Lesebildschirms gibt es seit dem 05.09.2026
   nicht mehr ("u can delete it and let the text only"). */

/* ==================================================================
   3000 WÖRTER FÜR DEN ALLTAG — die Kapitelseite (05.09.2026)
   ==================================================================
   Zehn Wörter untereinander, jedes mit Übersetzung und einem Satz.
   Keine Spielkarte, sondern eine Leseliste -- deshalb ruhig und
   ohne Knöpfe.
   ================================================================== */
.alltag-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-reset: alltag;
}

.alltag-wort {
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--btn-hover);
  border: 1px solid var(--border);
}

.alltag-wort-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}

.alltag-de {
  font-size: clamp(19px, 3.6vw, 23px);
  font-weight: 800;
  color: var(--text);
}

.alltag-uebersetzung {
  font-size: clamp(15px, 3vw, 17px);
  color: var(--muted);
}

/* Der Beispielsatz im Spiel. Er erscheint erst nach der Antwort --
   vorher stünde das gesuchte Wort schon da.

   Der Platz ist aber SCHON VORHER frei (min-height): sonst würden die
   drei Antwortknöpfe im Moment der Antwort nach unten springen.
   Dieselbe Regel wie beim Mini-Test der Geschichten. */
/* Der Beispielsatz. Er steht im selben Kasten wie das Wort, direkt
   darunter -- so gehört beides sichtbar zusammen.
   Groß genug zum bequemen Lesen (Kundenwunsch 05.09.2026: "write it
   bigger so we can read it easy") und in der normalen Textfarbe, nicht
   grau: der Satz ist Lernstoff, keine Fußnote. */
.alltag-satz {
  margin: 14px 0 0;
  max-width: 30em;
  text-align: center;
  font-size: clamp(18px, 3.8vw, 22px);
  line-height: 1.5;
  color: var(--text);
}

/* Nur EINE Abweichung vom Vokabel-Trainer: der Wortkasten braucht keine
   feste Mindesthoehe mehr, weil unter dem Wort schon der Satz steht.
   Alles andere -- Polster, Abstaende, Farben -- kommt aus denselben
   Regeln wie im Spiel. */
#alltag-screen .word-area {
  min-height: 0;
}

/* Etwas kleiner als im Vokabel-Trainer: dort steht das Wort allein,
   hier kommt der Satz darunter. So bleibt beides zusammen im Bild. */
#alltag-screen .current-word {
  font-size: clamp(30px, 7vw, 48px);
  line-height: 1.1;
}


@media (max-width: 480px) {
  .alltag-wort { padding: 12px 13px; }
}