/* ==========================================================================
   EveryLingua — das ganze Aussehen in einer Datei.

   Aufbau:
     1. Farbwerte und Masse (die einzige Stelle, an der Farben stehen)
     2. Grundlagen und Schrift
     3. Kopf, Navigation, Fuss
     4. Bausteine: Knoepfe, Karten, Kaesten
     5. Startseite
     6. Stufen und Grammatik
     7. Ueben
     8. Auswertung
     9. Kleinigkeiten, Druck, Ruecksicht

   Zwei Farbfassungen, drei Zustaende: ohne gespeicherte Wahl folgt die Seite
   dem System, mit Wahl gilt die Wahl — in beide Richtungen. Deshalb ist die
   Medienabfrage als :root:not([data-thema="hell"]) geschrieben und nicht
   einfach ohne Erwaehnung der hellen Fassung: Wer auf einem dunklen System
   sitzt und diese Seite hell will, hat das gesagt.
   ========================================================================== */

/* --- 1. Werte ----------------------------------------------------------- */

:root {
  /* Helle Fassung — der Normalfall. Eine Lernseite wird am Tag benutzt.

     Zwei Anlaeufe liegen dahinter. Der erste Grund war ein kuehles
     Blaugrau (#eaedf2), der zweite ein warmes Beige (#f5efe3). Beige war
     der Versuch, Waerme mit Farbe zu kaufen, und er hat etwas anderes
     gekostet: Auf Beige ist jede Flaeche eine Tonung, keine Karte. Es gab
     kein Weiss mehr, gegen das sich etwas abheben konnte, und deshalb sah
     eine Seite mit zwoelf Kaesten aus wie zwoelf Schattierungen desselben
     Papiers.

     Jetzt traegt der Grund nichts als Zurueckhaltung: ein fast weisses,
     minimal blaustichiges Off-White (#f7f9fc), und darauf Karten in
     reinem Weiss. Der Unterschied zwischen Grund und Karte ist klein und
     immer da — das ist es, was eine Oberflaeche aufgeraeumt aussehen
     laesst und nicht die Menge der Rahmen. Farbe setzt Akzente und
     beherrscht nichts: Blau fuer alles, was man anfassen kann, Gruen nur
     fuer richtig, Rot nur fuer falsch, Bernstein fuer einen Hinweis.

     Die Tinten sind mitgewandert und liegen jetzt auf der Achse des
     Grundes — ein sehr dunkles Blauschwarz und zwei Schiefertoene
     darunter. Ein warmes Braun auf blaustichigem Weiss sieht schmutzig
     aus, aus demselben Grund, aus dem es umgekehrt schmutzig aussah.

     Alle Werte sind gerechnet und nicht geschaetzt — die stillste Tinte
     steht bei 6.22:1 auf dem Grund, wo 4.5 gefordert sind, und bleibt
     ueber der dunkelsten Sprosse des Hintergrunds bei 4.83:1.
     Nachgerechnet wird bei jedem Lauf von `thema`, und zwar gegen das,
     was wirklich dahinterliegt, das gemalte Canvas eingeschlossen.

     Warum nicht `#64748b` fuer die stillste Tinte, obwohl das der Ton
     ist, den die Farbtafel fuer Nebentext nennt: Er steht auf diesem
     Grund bei 4.51:1. Das haelt die Anforderung um ein Hundertstel — und
     faellt darunter, sobald der Hintergrund hinter dem Wort etwas malt,
     was er auf jeder Seite tut. #515e73 ist derselbe Ton, zwei Stufen
     dunkler, und er haelt auch dort. */
  --bg:        #f7f9fc;   /* warmes Papier, kein Weiss und kein Grau */
  --bg-rgb:    247 249 252;   /* dasselbe als Kanaele, fuer den Bildschleier */
  --hof:       0.62;          /* wie dicht der Lichthof hinter dem Titel ist */
  --bg-tief:   #eef2f8;   /* Vertiefungen */
  --karte:     #ffffff;
  --karte-2:   #f8fafc;
  --linie:     #e3e8f0;
  --flaeche-umriss: #93a7c4;
  --linie-kraeftig: #cbd5e1;

  --ink:       #172033;   /* Braunschwarz statt Blauschwarz */
  --ink-2:     #3f4d63;
  --ink-3:     #515e73;

  --marke:     #2563eb;   /* ruhiges Gruen — Fortschritt, nicht Alarm */
  --marke-ink: #1d4ed8;
  --marke-weich: #dbeafe;
  --akzent:    #b45309;   /* warmer Gegenpol fuer Hinweise */
  --akzent-ink:#92400e;
  --akzent-weich: #fef3c7;

  --knopf-ink: #ffffff;   /* Schrift auf der gefuellten Flaeche */
  --ok:        #16a34a;
  --ok-ink:    #15803d;
  --ok-weich:  #dcfce7;
  --fehler:    #dc2626;
  --fehler-ink: #b91c1c;
  --fehler-weich: #fee2e2;
  --warn:      #b45309;
  --warn-weich: #fef3c7;

  --tint: 30, 41, 59;     /* woraus zarte Flaechen gemischt werden — warm */
  --schatten-1: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 8px rgba(15, 23, 42, .04);
  --schatten-2: 0 2px 4px rgba(15, 23, 42, .06), 0 8px 22px rgba(15, 23, 42, .07);
  --schatten-3: 0 4px 8px rgba(15, 23, 42, .07), 0 18px 42px rgba(15, 23, 42, .12);

  /* Der Feinschliff: Schein und Anhebung.

     Getrennt von den Schatten, weil sie zwei verschiedene Dinge tun. Ein
     Schatten sagt, dass etwas ueber dem Grund liegt. Ein Schein sagt, dass
     es lebt — und er ist auf Papier fast nichts und auf dunklem Grund fast
     alles, weil ein Schein dort das Einzige ist, was einen Rand sichtbar
     macht. Deshalb sind es Token und keine festen Werte.

     `--glanz` ist die Farbe des Scheins. Sie ist nicht --marke: Ein Schein
     im Markenton faerbt jede Karte gruen, und die elf Kategoriefarben
     haetten dann eine gemeinsame Truebung. Sie ist ein sehr blasses Blau
     aus dem Grundton, und die Kategoriekarten setzen sie per
     --stufe-farbe selbst um.

     `--saum` ist der Lichtsaum an der Oberkante einer Flaeche — eine
     Zeile, die auf Papier aus Weiss und auf dunklem Grund aus einem
     Hauch Weiss besteht. Das ist der Unterschied zwischen „Kasten mit
     Rahmen" und „Karte, die liegt", und er kostet einen Wert. */
  /* Auf Papier ist der Schein kein Leuchten, sondern eine Kante.

     Er war zuletzt ein warmes Gold, weil der Grund Beige war. Auf einem
     fast weissen Grund ist ein farbiger Hof das Gegenteil von hochwertig:
     Er sieht aus, als sei die Karte nicht ganz sauber gedruckt. Deshalb
     tut `--halo` auf der hellen Fassung jetzt zwei nuechterne Dinge — ein
     Haarstrich in Schieferblau, der die Kante fasst, und ein sehr weit
     gestreuter, sehr schwacher Schatten darunter, der die Karte anhebt.
     Kein Hof. Der Hof ist die Sprache der dunklen Fassung, wo eine Kante
     nur durch Licht sichtbar wird. */
  --glanz: 71, 96, 140;
  /* Eine Spur mehr Ruhelicht: 18px/-10 auf 24px/-9 und .30 auf .38. Der
     zweite Wert ist die Streuung, nicht die Helligkeit — ein weiterer
     Radius bei kaum mehr Deckkraft leuchtet ruhiger als ein enger heller
     Fleck. Dazu ein hauchdünner Ring, der die Kante fasst; ohne ihn
     franst der Schein auf Papier aus. */
  --halo: 0 0 0 1px rgba(var(--glanz), .07),
          0 10px 28px -14px rgba(15, 23, 42, .18);
  --halo-hi: 0 0 0 1px rgba(var(--glanz), .16), 0 14px 34px -14px rgba(15, 23, 42, .26);

  /* --- Glas ------------------------------------------------------------
     Die grossen Kaesten stehen nicht mehr auf einer deckenden Flaeche,
     sondern auf einer durchscheinenden mit Unschaerfe darunter. Damit
     laeuft der Hintergrund sichtbar durch sie hindurch, ohne dass der
     Text darauf schwerer zu lesen waere: Was die Lesbarkeit traegt, ist
     die Deckung — 0,78 ist matt genug, dass kein Wort des Hintergrunds
     durch eine Zeile laeuft — und was die Tiefe macht, ist die
     Unschaerfe. Beides ist getrennt einstellbar, und nur eines davon
     darf man erhoehen, ohne zu messen.

     Die Zahl wurde nicht geschaetzt: `pruefen.sh thema` misst jeden Text
     gegen das, was wirklich hinter ihm liegt, einschliesslich des
     Pixels, den die Flaeche dort gemalt hat. */
  /* **Matt und nicht glänzend.** Die Sättigung stand auf 1,35 und machte
     aus dem Glas eine Linse: Was dahinter lag, kam farbiger heraus, als
     es hineinging, und das liest sich als Politur. Mattes Glas tut das
     Gegenteil — es zerstreut. Also mehr Weichzeichnung, eine Sättigung
     knapp über eins (die nur ausgleicht, was das Weichzeichnen an Farbe
     nimmt), und ein Saum, der nicht mehr blitzt, sondern schimmert. */
  --glas: 255, 255, 255;
  --glas-deckung: .84;
  --glas-unschaerfe: 18px;
  --glas-saettigung: 1.06;
  --glas-saum: inset 0 1px 0 rgba(255, 255, 255, .9);
  --lift: 0 1px 2px rgba(15, 23, 42, .05);
  --lift-hi: 0 8px 22px -8px rgba(15, 23, 42, .16);
  --saum: inset 0 1px 0 rgba(255, 255, 255, .85);

  /* Der Schein — ein weissliches Licht auf den Flaechen, die auf der Seite
     liegen. Zwei Teile, weil ein Glow zwei Dinge tut: Er legt Licht AUF die
     Flaeche und einen Hof UM sie herum.

     Der Hof ist auf Papier nichts wert: Ein weisser Schimmer neben einer
     fast weissen Seite ist unsichtbar, und wer ihn trotzdem aufdreht,
     bekommt keinen Glanz, sondern Matsch. Auf Papier arbeitet deshalb nur
     das Licht auf der Flaeche, und es macht aus einer flachen Karte eine
     leicht gewoelbte.

     Der Verlauf ist ein background-image, und den sieht `thema` nicht — es
     misst background-color. Also wurde er von Hand gerechnet: Im
     unguenstigsten Fall, ganz oben am Rand, steigt der Kontrast auf Papier
     sogar (7,11 auf 7,35 bei der leisesten Schrift). */
  --schein: linear-gradient(180deg,
              rgba(255, 255, 255, .85) 0%,
              rgba(255, 255, 255, .28) 34%,
              rgba(255, 255, 255, 0) 68%);
  --schein-hof: 0 0 0 0 rgba(255, 255, 255, 0);
  --schein-hof-hi: 0 0 0 0 rgba(255, 255, 255, 0);
  --ring: 0 0 0 3px color-mix(in srgb, var(--marke) 30%, transparent);

  --rund-s: 8px;
  --rund:   14px;
  --rund-l: 22px;
  --rund-voll: 999px;

  --breite: 74rem;
  --lesebreite: 39rem;    /* rund 72 Zeichen — das Lesemass */

  /* Zwei Familien, beide OFL, beide lokal. Warum genau diese: siehe
     assets/fonts/LIZENZ.txt — die Wahl folgt fuenf Anforderungen, die
     man an einer Schriftdatei nachsehen kann, und nicht dem Geschmack.
     "Plex Sans" heisst hier so, weil der Familienname der Datei
     "IBM Plex Sans" ist und der reservierte Name "Plex" lautet; die
     Datei ist unveraendert. */
  --moduswahl-kraft: 1;
  --schrift: "Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-titel: "Literata", Georgia, "Times New Roman", serif;

  --schleier-oben: .08;
  --schleier-rand: .30;

  /* Muno, das Chamäleon — die Ruhefassung.

     Warum ein Chamäleon, warum im Profil und woher die Farben je Sprache
     kommen, steht im Kopf von tools/maskottchen.py. Diese Werte stehen
     dort noch einmal, weil das Markenzeichen ohne Stylesheet gezeichnet
     werden muss — ein Favicon hat keins. Die Prüfgruppe `maskottchen`
     liest beide Seiten und fällt über jede Abweichung.

     Zehn Töne und nicht sechs: Eine flache Fläche in Flaggenrot ist ein
     Warnschild; eine Fläche mit Licht oben, Schatten unten, hellem Bauch
     und einer Bänderung darüber ist eine Haut. Es sind nicht andere
     Farben als vorher, sondern mehr Töne aus derselben Farbe — und jeder
     an der Stelle, an der Licht ihn hinlegen würde.

     Sie gelten, solange keine Sprache im Spiel ist: auf der Startseite,
     im Impressum, überall ohne data-paar. Ein Chamäleon in Ruhe ist
     grün, und Grün ist unter den fünf Sprachfarben die einzige, die
     nicht wie eine sechste Sprache aussieht. Ausdrücklich **nicht** das
     Grün der Seite: Ein Maskottchen im Markenton liest sich als
     Bedienelement, und Muno soll eine Figur sein und kein Knopf. */
  --mu-ast:        #7a6248;
  --mu-ast-tief:   #54432f;
  --mu-auge:       #1d2a1b;
  --mu-hut:        #39415a;
  --mu-hut-tief:   #242a3c;
  --mu-glanz:      #ffffff;

  /* Die sechs Stufenfarben, damit der Hintergrund sie zeichnen kann.

     Sie stehen im Inhalt — inhalt/stufen.json —, und hier steht eine
     zweite Fassung davon. Zwei Fassungen laufen auseinander, und deshalb
     hält `tools/hintergrund_pruefen.py` sie bei jedem Lauf gegeneinander:
     Wer eine Stufenfarbe ändert und diese Zeilen vergisst, bekommt eine
     Leiter in den Farben von gestern.

     Warum nicht aus einer Datei gelesen: Der Hintergrund liegt auf jeder
     Seite und holt nichts aus dem Netz. Eine Datendatei für sechs
     Farbwerte wäre eine Anfrage für 120 Byte. */
  /* Wie kräftig die Leiter im Hintergrund höchstens gemalt wird — und das
     ist keine Geschmacksfrage, sondern eine gerechnete Grenze.

     Über Papier verdunkelt jede Farbe den Grund, und Text, der darüber
     steht, verliert genau so viel Kontrast. Nachgerechnet gegen --ink-3,
     die leiseste Schrift der Seite: Bei 0,15 Deckkraft einer Stufenfarbe
     bleiben die geforderten 4,5:1 gerade eben stehen, darüber nicht mehr.
     Auf dunklem Grund liegt die Grenze bei 0,19 — nicht höher, weil
     dort mehr ginge, sondern weil dort weniger geht, als lange
     dastand. Der frühere Wert war 0,33, und der war schon vor dem
     Farbwechsel falsch: Nachgerechnet steht --ink-3 über der
     A1-Sprosse bei 0,33 auf 3,39:1 statt auf den geforderten 4,5.
     Gefunden hat das kein Blick, sondern die Rechnung — und die
     Browserprüfung nicht, weil sie einen Augenblick misst und die
     unterste Sprosse selten hinter Text steht. Die Grenze wird
     deshalb jetzt gerechnet und nicht mehr geschätzt:
     tools/farben_pruefen.py legt jede der sechs Stufenfarben bei
     der eingetragenen Deckkraft über den Grund und misst --ink-3
     darüber.

     Das ist die Zahl, die dieser Hintergrund nicht überschreiten darf, und
     `grundflaeche.js` deckelt alles daran — Sprossen, Holme, Lichtpunkte
     und Wörter. Der frühere Entwurf malte kräftiger und kam damit durch,
     weil tools/thema_pruefen.mjs einen Augenblick misst und in diesem
     Augenblick zufällig kein Wort hinter dem Vorspann stand. Eine Prüfung,
     die vom Zufall abhängt, ist keine.

     Der Gegenzug steht direkt darunter: Weil der Schleier über der Bühne
     fast weg ist, kommt von diesen 0,15 auch fast alles an. Vorher lagen
     0,62 auf dem Canvas und ein Schleier von 0,55 darüber — doppelt so viel
     gemalt, halb so viel zu sehen, und die Prüfung sieht den Schleier nicht. */
  --flaeche-kraft: .15;

  --stufe-a1: #0a7067;
  --stufe-a2: #026497;
  --stufe-b1: #3c35ae;
  --stufe-b2: #7027b2;
  --stufe-c1: #a61e5a;
  --stufe-c2: #b24309;

  /* Die Kategorien des Lernpfads: eine Farbe je Kategorie, in drei Stufen.
     `--k-<kat>` ist die kraeftige Flaeche (aktueller Stein, gefuellter
     Balken, Rosettenblatt), `-hell` die zarte Toenung (offene Steine,
     Chips), `-ink` die Tinte fuer Schrift und Zeichen auf hellem Grund.
     Die Flaechen sind hell und freundlich und tragen deshalb nie weisse
     Schrift: Darauf steht `--k-auf`, ein tiefes Marineblau (5,0 bis
     10,3 : 1). Jede Tinte steht auf Weiss ueber 6 : 1 und auf ihrer
     eigenen Toenung ueber 5,1 : 1. Gesetzt werden die drei je Element
     ueber `[data-kat]` (siehe Lernpfad), an genau einer Stelle. */
  --k-auf: #10213a;
  --k-fundament: #f6c94a;   --k-fundament-hell: #fdf4d7;   --k-fundament-ink: #80590a;
  --k-bausteine: #8bc34a;   --k-bausteine-hell: #ecf6e0;   --k-bausteine-ink: #3c6b14;
  --k-zeiten: #4a90f0;      --k-zeiten-hell: #e4effd;      --k-zeiten-ink: #1f5fc4;
  --k-verben: #f5a04a;      --k-verben-hell: #fdeedd;      --k-verben-ink: #9c4c08;
  --k-satzbau: #f07a9c;     --k-satzbau-hell: #fde7ee;     --k-satzbau-ink: #b02a57;
  --k-feinschliff: #9d88f2; --k-feinschliff-hell: #efebfe; --k-feinschliff-ink: #5a43c2;
  --lp-grund: #eef5ff;      /* der zarte Himmel unter dem Weg */

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --moduswahl-kraft: 1.6;
    --bg:        #0b1220;
    --bg-rgb:    11 18 32;
    --hof:       0.8;
    --bg-tief:   #070c17;
    --karte:     #131b2a;
    --karte-2:   #1a2333;
    --linie:     #26314a;
    --flaeche-umriss: #6b7fa3;
    --linie-kraeftig: #3a4762;

    --ink:       #e8eef7;
    --ink-2:     #b3c0d4;
    --ink-3:     #8fa0b8;

    --marke:     #60a5fa;
    --marke-ink: #7db8fb;
    --marke-weich: #16294a;
    --akzent:    #fbbf24;
    --akzent-ink:#fcd34d;
    --akzent-weich: #33280f;

    --knopf-ink: #08182e;
    --ok:        #4ade80;
    --ok-ink:    #4ade80;
    --ok-weich:  #10301f;
    --fehler:    #f87171;
    --fehler-ink: #f87171;
    --fehler-weich: #3a1c1c;
    --warn:      #fbbf24;
    --warn-weich: #33280f;

    --tint: 255, 255, 255;
    --schatten-1: 0 1px 2px rgba(0, 0, 0, .34);
    --schatten-2: 0 2px 6px rgba(0, 0, 0, .38), 0 10px 26px rgba(0, 0, 0, .32);
    --schatten-3: 0 6px 14px rgba(0, 0, 0, .44), 0 22px 50px rgba(0, 0, 0, .4);

    /* Auf dunklem Grund traegt der Schein fast allein. Ein Schatten unter
       einer dunklen Karte auf dunklem Grund ist nicht zu sehen; ein
       heller Saum an ihrer Oberkante schon. */
    --glanz: 120, 170, 255;
    --halo: 0 0 30px -10px rgba(var(--glanz), .42),
            0 0 0 1px rgba(var(--glanz), .07);
    --halo-hi: 0 0 34px -6px rgba(var(--glanz), .48), 0 0 0 1px rgba(var(--glanz), .14);

    --glas: 19, 27, 42;
    --glas-deckung: .74;
    --glas-unschaerfe: 22px;
    --glas-saettigung: 1.08;
    --glas-saum: inset 0 1px 0 rgba(255, 255, 255, .06);
    --lift: 0 1px 2px rgba(0, 0, 0, .3);
    --lift-hi: 0 8px 22px -8px rgba(0, 0, 0, .55);
    --saum: inset 0 1px 0 rgba(255, 255, 255, .06);

    /* Hier zaehlt beides: Das Licht auf der Flaeche hebt die Karte vom
       Grund ab, der Hof legt einen weichen Schimmer darum. Fuenf Prozent
       Weiss ganz oben sind der unguenstigste Punkt des Verlaufs, und dort
       faellt die leiseste Schrift von 6,79 auf 5,84 — mit Abstand ueber
       4,5. Der Fliesstext steht unterhalb der Blende, wo fast nichts mehr
       ankommt. */
    --schein: linear-gradient(180deg,
                rgba(255, 255, 255, .05) 0%,
                rgba(255, 255, 255, .016) 40%,
                rgba(255, 255, 255, 0) 75%);
    --schein-hof: 0 0 18px -14px rgba(255, 255, 255, .35);
    --schein-hof-hi: 0 0 30px -12px rgba(255, 255, 255, .5);
    --ring: 0 0 0 3px color-mix(in srgb, var(--marke) 34%, transparent);

    --schleier-oben: .10;
    --schleier-rand: .34;

    /* Muno auf der dunklen Fassung. Die Haut wird eine Spur heller,
     damit die Figur nicht im Grund versinkt. Einfach zu invertieren
     käme nicht in Frage — dann wäre es ein anderes Tier.

     Die Sprachfarben weiter unten bekommen **keine** zweite Fassung:
     Sie sind aus Flaggentönen gerechnet und liegen schon in der Mitte,
     wo sie auf beiden Gründen tragen.

     Dieser Absatz stand hier von Anfang an — und er beschrieb, was
     gemeint war, nicht was geschah. Dieser Block setzte die `--mu-*`
     mit, alle, und unter einem Selektor mit zwei Merkmalen. Der
     Sprachblock `[data-mufarbe="de-fr"]` hat eines. Also gewann dieser
     hier, und Muno war auf der dunklen Fassung in jeder Sprache grün.
     `thema` hat es nicht gemerkt: Es misst Kontrast, und Grün auf
     Dunkel hat Kontrast.

     Darum stehen hier nur noch die fünf Töne, die dem Bild gehören und
     nicht dem Kurs — Ast, Zweig, Pupille und der Doktorhut. Alles, was
     mit der Sprache wechselt, steht ausschließlich in einem
     `[data-mufarbe]`-Block, die Ruhefassung eingeschlossen, und
     `maskottchen` fällt über jede Ausnahme. */
  --mu-ast:        #8a7053;
  --mu-ast-tief:   #5f4d37;
  --mu-auge:       #16200f;
  --mu-hut:        #5b6688;
  --mu-hut-tief:   #3f4763;
  --mu-glanz:      #ffffff;
    /* Die sechs Stufenfarben der Leiter im Hintergrund, fuer die dunkle
       Fassung aufgehellt — dieselbe Mischung wie --stufe-ink: 62 % Farbe
       auf Weiss. Die hellen Werte sind fuer Papier gewaehlt; bei den
       Deckkraeften, die dieser Hintergrund fahren darf, waere ein
       dunkles Blau auf dunklem Grund schlicht nicht da.
       tools/hintergrund_pruefen.py rechnet beide Fassungen gegen
       inhalt/stufen.json nach. */
    --flaeche-kraft: .19;

    --stufe-a1: #67a6a1;
    --stufe-a2: #629fbf;
    --stufe-b1: #8682cd;
    --stufe-b2: #a679cf;
    --stufe-c1: #c87499;
    --stufe-c2: #cf8a66;

    /* Die Kategorien dunkel: dieselben hellen Flaechen, die Toenung als
       dunkler Farbschimmer, die Tinte aufgehellt (ueber 8,8 : 1 auf der
       Karte, ueber 6,6 : 1 auf der Toenung). */
    --k-fundament-hell: #403e30;   --k-fundament-ink: #f7d77c;
    --k-bausteine-hell: #2b3d30;   --k-bausteine-ink: #b2db84;
    --k-zeiten-hell: #1e3252;      --k-zeiten-ink: #8fbdf8;
    --k-verben-hell: #403630;      --k-verben-ink: #f8bf83;
    --k-satzbau-hell: #3f2e41;     --k-satzbau-ink: #f6a7bf;
    --k-feinschliff-hell: #2f3152; --k-feinschliff-ink: #c4b8fa;
    --lp-grund: #0f1a2e;

    color-scheme: dark;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) * {
    --stufe-ink: color-mix(in srgb, var(--stufe-farbe, var(--marke)) 62%, #fff);
  }
}
:root[data-thema="dunkel"] * {
  --stufe-ink: color-mix(in srgb, var(--stufe-farbe, var(--marke)) 62%, #fff);
}

:root[data-thema="dunkel"] {
    --moduswahl-kraft: 1.6;
  --bg:        #0b1220;
  --bg-rgb:    11 18 32;
  --hof:       0.8;
  --bg-tief:   #070c17;
  --karte:     #131b2a;
  --karte-2:   #1a2333;
  --linie:     #26314a;
  --flaeche-umriss: #6b7fa3;
  --linie-kraeftig: #3a4762;

  --ink:       #e8eef7;
  --ink-2:     #b3c0d4;
  --ink-3:     #8fa0b8;

  --marke:     #60a5fa;
  --marke-ink: #7db8fb;
  --marke-weich: #16294a;
  --akzent:    #fbbf24;
  --akzent-ink:#fcd34d;
  --akzent-weich: #33280f;

  --knopf-ink: #08182e;
  --ok:        #4ade80;
  --ok-ink:    #4ade80;
  --ok-weich:  #10301f;
  --fehler:    #f87171;
  --fehler-ink: #f87171;
  --fehler-weich: #3a1c1c;
  --warn:      #fbbf24;
  --warn-weich: #33280f;

  --tint: 255, 255, 255;
  --schatten-1: 0 1px 2px rgba(0, 0, 0, .34);
  --schatten-2: 0 2px 6px rgba(0, 0, 0, .38), 0 10px 26px rgba(0, 0, 0, .32);
  --schatten-3: 0 6px 14px rgba(0, 0, 0, .44), 0 22px 50px rgba(0, 0, 0, .4);

  /* Wortgleich mit der Medienabfrage darüber — und schon wieder ist es
     hier vergessen worden.

     Als der Schein verstärkt und das Glas eingeführt wurde, bekam nur der
     `@media`-Block die neuen Werte. Wer auf einem hellen System die dunkle
     Fassung ausdrücklich wählt, sah den alten, matten Schein und gar kein
     Glas: `--glas` und seine vier Geschwister waren dort nicht gesetzt,
     also blieb `rgba(var(--glas), …)` ungültig. Gemeldet hat es
     `fassungen`, die Gruppe, die genau diese beiden Blöcke gegeneinander
     hält — direkt unter einem Kommentar, der dieselbe Lehre schon einmal
     festhält. Zwei Blöcke, die dasselbe sagen müssen, sind eine Stelle zum
     Vergessen, und sie wird auch benutzt. */
  --glanz: 120, 170, 255;
  --halo: 0 0 30px -10px rgba(var(--glanz), .42),
          0 0 0 1px rgba(var(--glanz), .07);
  --halo-hi: 0 0 34px -6px rgba(var(--glanz), .48), 0 0 0 1px rgba(var(--glanz), .14);

  --glas: 19, 27, 42;
  --glas-deckung: .74;
  --glas-unschaerfe: 22px;
  --glas-saettigung: 1.08;
  --glas-saum: inset 0 1px 0 rgba(255, 255, 255, .06);
  --lift: 0 1px 2px rgba(0, 0, 0, .3);
  --lift-hi: 0 8px 22px -8px rgba(0, 0, 0, .55);
  --saum: inset 0 1px 0 rgba(255, 255, 255, .06);

  /* Dieselbe Blende wie in der Medienabfrage darueber. Sie stand dort
     allein, und damit bekam sie genau der nicht, der sie ausdruecklich
     gewaehlt hat: Wer auf einem hellen System die dunkle Fassung
     einschaltet, sah Karten ohne Licht darauf. Die Fassungspruefung liest
     beide Bloecke und meldet jedes Merkmal, das nur in einem steht. */
  --schein: linear-gradient(180deg,
              rgba(255, 255, 255, .05) 0%,
              rgba(255, 255, 255, .016) 40%,
              rgba(255, 255, 255, 0) 75%);
  --schein-hof: 0 0 18px -14px rgba(255, 255, 255, .35);
  --schein-hof-hi: 0 0 30px -12px rgba(255, 255, 255, .5);
  --ring: 0 0 0 3px color-mix(in srgb, var(--marke) 34%, transparent);

  --schleier-oben: .10;
  --schleier-rand: .34;

  /* Muno auf der dunklen Fassung. Die Haut wird eine Spur heller, damit
     die Figur nicht im Grund versinkt. Einfach zu invertieren käme nicht
     in Frage — dann wäre es ein anderes Tier.

     Die Sprachfarben weiter unten bekommen **keine** zweite Fassung, und
     das ist Absicht: Sie sind aus Flaggentönen gerechnet und liegen
     schon in der Mitte, wo sie auf beiden Gründen tragen. Eine zweite
     Fassung wäre eine zweite Stelle zum Vergessen — und die Prüfgruppe
     `thema` misst auf beiden Fassungen, würde es also merken. */
  --mu-ast:        #8a7053;
  --mu-ast-tief:   #5f4d37;
  --mu-auge:       #16200f;
  --mu-hut:        #5b6688;
  --mu-hut-tief:   #3f4763;
  --mu-glanz:      #ffffff;
  /* Die sechs Stufenfarben der Leiter im Hintergrund, fuer die dunkle
     Fassung aufgehellt — dieselbe Mischung wie --stufe-ink: 62 % Farbe
     auf Weiss. Die hellen Werte sind fuer Papier gewaehlt; bei den
     Deckkraeften, die dieser Hintergrund fahren darf, waere ein
     dunkles Blau auf dunklem Grund schlicht nicht da.
     tools/hintergrund_pruefen.py rechnet beide Fassungen gegen
     inhalt/stufen.json nach. */
  --flaeche-kraft: .19;

  --stufe-a1: #67a6a1;
  --stufe-a2: #629fbf;
  --stufe-b1: #8682cd;
  --stufe-b2: #a679cf;
  --stufe-c1: #c87499;
  --stufe-c2: #cf8a66;

  /* Die Kategorien dunkel: dieselben hellen Flaechen, die Toenung als
     dunkler Farbschimmer, die Tinte aufgehellt (ueber 8,8 : 1 auf der
     Karte, ueber 6,6 : 1 auf der Toenung). */
  --k-fundament-hell: #403e30;   --k-fundament-ink: #f7d77c;
  --k-bausteine-hell: #2b3d30;   --k-bausteine-ink: #b2db84;
  --k-zeiten-hell: #1e3252;      --k-zeiten-ink: #8fbdf8;
  --k-verben-hell: #403630;      --k-verben-ink: #f8bf83;
  --k-satzbau-hell: #3f2e41;     --k-satzbau-ink: #f6a7bf;
  --k-feinschliff-hell: #2f3152; --k-feinschliff-ink: #c4b8fa;
  --lp-grund: #0f1a2e;

  color-scheme: dark;
}

/* --- Schriften ----------------------------------------------------------
   Lokal ausgeliefert. Eine Einbindung ueber fonts.googleapis.com wuerde bei
   jedem Aufruf die IP-Adresse des Besuchers an einen Dritten uebertragen;
   siehe assets/fonts/LIZENZ.txt.                                          */

@font-face {
  font-family: "Plex Sans";
  src: url("../fonts/plex-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Plex Sans";
  src: url("../fonts/plex-sans-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plex Sans";
  src: url("../fonts/plex-sans-latin-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Plex Sans";
  src: url("../fonts/plex-sans-latin-ext-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-latin-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-latin-ext-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Kyrillisch (die ukrainische Oberflaeche): dieselben Schriften, die
   kyrillische Teilmenge, unter derselben OFL 1.1 (assets/fonts/LIZENZ.txt).
   Der Apostroph ʼ (U+02BC) steht im Latin-Schnitt oben. */
@font-face {
  font-family: "Plex Sans";
  src: url("../fonts/plex-sans-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Plex Sans";
  src: url("../fonts/plex-sans-cyrillic-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-cyrillic-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* --- 2. Grundlagen ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` ist eine Aussage und keine Verzierung — es hat Vorrang.
 *
 * Der Browser bringt zwar `[hidden] { display: none }` mit, aber jede eigene
 * Regel mit einem `display` schlaegt sie: Autorregeln stehen ueber denen des
 * Browsers. Genau das ist passiert. `.modus { display: block }` liess den
 * Hoermodus sichtbar, obwohl das Skript ihn ausdruecklich versteckt hatte —
 * ein Modus ohne Sprachausgabe, der beim Anfassen stumm geblieben waere.
 *
 * Gefunden hat es nicht das Auge, sondern tools/uebungen_pruefen.mjs mit
 * einem Browser ohne englische Stimme.
 *
 * `!important` ist hier nicht Gewalt, sondern die Bedeutung des Attributs:
 * Wer `hidden` setzt, sagt „das ist nicht da", und keine Layoutregel darf
 * dem widersprechen. Wer ein verstecktes Element zeigen will, nimmt das
 * Attribut weg — und tut damit genau das, was er meint. */
[hidden] { display: none !important; }

/* Ein Pastellton ist keine Textfarbe.
   Die sechs Stufenfarben sind als Akzent gewaehlt — als Fuellung, als Rand,
   als Balken. Als Schrift auf Papier liegen sie zwischen 3,0 und 4,2 zu eins
   und damit unter dem, was lesbar heisst; gemessen von tools/thema_pruefen.mjs.
   Deshalb gibt es zu jeder eine abgedunkelte Fassung fuer Schrift.

   Die Regel steht auf * und nicht auf :root, weil --stufe-farbe als
   Inline-Eigenschaft je Karte hereinkommt und pro Element neu gerechnet
   werden muss. Auf :root waere sie einmal berechnet und ueberall gleich. */
* {
  --stufe-ink: color-mix(in srgb, var(--stufe-farbe, var(--marke)) 62%, #000);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Das Hintergrundbild der Zielsprache (`data-bild`, gesetzt von
   `vorlage.hintergrund()`): fest hinter der Seite, darueber ein Schleier in
   der Farbe des Grundes. Oben, wo die Seite mit ihrem Titel beginnt, zeigt
   er das Bild; nach unten deckt er es fast ganz ab, damit kein Satz und keine
   Uebung auf einem unruhigen Grund steht. Der Schleier scrollt mit dem
   Dokument, das Bild steht still — so ist der helle Streifen immer nur dort,
   wo der Seitenkopf ist, und nie hinter dem Lernstoff. */
html[data-bild] { background: var(--bg); }
html[data-bild] body { background: transparent; position: relative; }
html[data-bild] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--bild) center / cover no-repeat;
}
html[data-bild] body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgb(var(--bg-rgb) / 0.4) 0,
    rgb(var(--bg-rgb) / 0.6) 11rem,
    rgb(var(--bg-rgb) / 0.86) 21rem,
    rgb(var(--bg-rgb) / 0.97) 29rem,
    rgb(var(--bg-rgb) / 1) 36rem);
}
/* Unten ganz und nicht „fast ganz": Bei 0.93 blieben sieben Prozent des
   Fotos hinter jedem Absatz und jeder Tabelle stehen — im Dunkeln als
   helle Kirchtuerme hinter weisser Schrift, gut sichtbar auf jedem
   Telefon. Ein unruhiger Grund kostet Lesbarkeit auch dann, wenn das
   Kontrastverhaeltnis rechnerisch noch reicht. Das Bild bleibt, wo es
   hingehoert: hinter dem Seitenkopf. */
/* Auf der Startseite eines Paares — der Seite gleich nach der Sprachwahl —
   steht oben kein Lernstoff, sondern die Begruessung. Dort darf das Bild
   tragen; der Schleier zieht erst unterhalb der Buehne zu. */
html[data-bild] body:has(.buehne)::after {
  background: linear-gradient(to bottom,
    rgb(var(--bg-rgb) / 0.22) 0,
    rgb(var(--bg-rgb) / 0.42) 26rem,
    rgb(var(--bg-rgb) / 0.82) 44rem,
    rgb(var(--bg-rgb) / 0.97) 54rem,
    rgb(var(--bg-rgb) / 1) 62rem);
}
/* Ueber dem Foto: Titel und Einleitung bekommen einen Lichthof in der Farbe
   des Grundes — ohne ihn stuende der graue Einleitungssatz auf Bergen und
   Daechern —, und die schwebenden Woerter treten zurück, denn das Bild ist
   jetzt die Dekoration. */
html[data-bild] .buehne .hero {
  /* Im Dunkeln dichter: Helle Wolken hinter heller Schrift sind dort das,
     was sonst dunkle Daecher hinter dunkler Schrift sind. */
  background: radial-gradient(ellipse 75% 70% at 35% 50%,
                              rgb(var(--bg-rgb) / var(--hof)), transparent 72%);
}
html[data-bild] .buehne .hero :is(h1, p) {
  text-shadow: 0 0 1px rgb(var(--bg-rgb) / 0.9),
               0 0 5px rgb(var(--bg-rgb) / 0.8),
               0 0 16px rgb(var(--bg-rgb) / 0.85);
}
/* Die aufsteigenden Woerter sind abgeschaltet (assets/js/hintergrund.js). */
.buehne-grund[hidden] { display: none; }
/* Die Buehne der Startseite eines Paares hat ihren eigenen Schleier, der nach
   unten deckend wird — mit Bild verdeckte er genau den Teil, in dem das Bild
   zu sehen sein soll. Hier traegt der Schleier der Seite allein. */
html[data-bild] .buehne-schleier {
  background: linear-gradient(to bottom, transparent 0, transparent 60%,
                              rgb(var(--bg-rgb) / 0.35) 100%);
}
html[data-bild="de"] { --bild: url("../bilder/hg-de.webp?v=a4d31eec"); }
html[data-bild="en"] { --bild: url("../bilder/hg-en.webp?v=63a3e61b"); }
html[data-bild="es"] { --bild: url("../bilder/hg-es.webp?v=f0e06d1d"); }
html[data-bild="fr"] { --bild: url("../bilder/hg-fr.webp?v=b4be2864"); }
html[data-bild="it"] { --bild: url("../bilder/hg-it.webp?v=115514d2"); }
html[data-bild="pt"] { --bild: url("../bilder/hg-pt.webp?v=2fcc40c9"); }
html[data-bild="ja"] { --bild: url("../bilder/hg-ja.webp?v=e9566ead"); }
html[data-bild="zh"] { --bild: url("../bilder/hg-zh.webp?v=e4b7964c"); }
html[data-bild="ko"] { --bild: url("../bilder/hg-ko.webp?v=0c901e8f"); }
html[data-bild="welt"] { --bild: url("../bilder/hg-welt.webp?v=9915449b"); }
@media (max-width: 760px) {
  html[data-bild="de"] { --bild: url("../bilder/hg-de-klein.webp?v=9d41f4e4"); }
  html[data-bild="en"] { --bild: url("../bilder/hg-en-klein.webp?v=b586d5b5"); }
  html[data-bild="es"] { --bild: url("../bilder/hg-es-klein.webp?v=055697ef"); }
  html[data-bild="fr"] { --bild: url("../bilder/hg-fr-klein.webp?v=81a4f5f0"); }
  html[data-bild="it"] { --bild: url("../bilder/hg-it-klein.webp?v=eaba8e75"); }
  html[data-bild="pt"] { --bild: url("../bilder/hg-pt-klein.webp?v=fced2a8a"); }
  html[data-bild="ja"] { --bild: url("../bilder/hg-ja-klein.webp?v=e59617de"); }
  html[data-bild="zh"] { --bild: url("../bilder/hg-zh-klein.webp?v=4cc5f578"); }
  html[data-bild="ko"] { --bild: url("../bilder/hg-ko-klein.webp?v=0a4b178e"); }
  html[data-bild="welt"] { --bild: url("../bilder/hg-welt-klein.webp?v=d71d3e94"); }
}
@media print {
  html[data-bild] body::before, html[data-bild] body::after { display: none; }
}
.fuss-bild { opacity: 0.85; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Deutsch hat Woerter wie „Possessivpronomen" und
     „Verlaufsform der Vergangenheit". Auf 320 Pixeln passt ein solches Wort
     nicht in eine Zeile, und ohne Trennung schiebt es die ganze Seite nach
     rechts — auf elf Seiten gleichzeitig, gefunden von tools/layout_pruefen.mjs.
     overflow-wrap greift nur im Notfall, hyphens trennt vorher an einer
     sinnvollen Stelle. */
  overflow-wrap: break-word;
  -webkit-hyphens: auto; hyphens: auto;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 .5em;
  font-weight: 600;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(1.85rem, 1.35rem + 2.1vw, 3rem); font-variation-settings: "opsz" 48; }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem);  font-variation-settings: "opsz" 32; margin-top: 2.2em; }
h3 { font-size: 1.2rem; font-variation-settings: "opsz" 20; margin-top: 1.8em; }
h4 { font-size: 1rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--marke-ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--marke);
  outline-offset: 2px;
  border-radius: 4px;
}

code, kbd, .ziel {
  font-feature-settings: "tnum" 0;
}

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 1.15rem;
}

.lesespalte { max-width: var(--lesebreite); }

/* --- Das Lesemaß, wo Fließtext steht --------------------------------------

   `--breite` ist 74rem und richtig für ein Raster aus Karten. Für einen
   Absatz ist es das nicht: Gemessen liefen Absätze in Karten auf einem
   breiten Schirm über 1100 Pixel, also gut das Anderthalbfache dessen, was
   ein Auge in einer Zeile noch bequem zurückverfolgt. Am Zeilenende
   angekommen findet man den Anfang der nächsten nicht mehr.

   Die Regel greift an direkten Kindern und nicht mit `main p`: Ein Absatz
   in einer Tabellenzelle, in einer Knopfreihe oder in einem Rasterfeld ist
   kein Fließtext, und dort wäre eine Grenze von 39rem eine willkürliche
   Verengung. Auf dem Telefon ändert das alles hier gar nichts — dort war
   die Breite nie das Problem. */
.karte > p, .kasten > p, .karte > ul, .kasten > ul,
.anf-warum, .anf-vokabeln {
  max-width: var(--lesebreite);
}

/* Die Rollleiste bekommt ihren Platz, auch wenn sie gerade fehlt.
   Ohne das haengt die *Breite* der Seite an ihrer *Hoehe*: Wird der Inhalt
   um wenige Pixel hoeher als das Fenster, erscheint die senkrechte
   Rollleiste, das Fenster wird fuenfzehn Pixel schmaler, und alles
   Zentrierte rutscht. Auf der Startseite passiert das im Takt der
   Vorfuehrung, die alle paar Sekunden eine andere Szene zeigt — der Kasten
   wird hoeher, die Leiste kommt, der Kasten wird flacher, sie geht.
   Sichtbar war das als ein Versatz der ganzen Seite alle paar Sekunden.
   Und es war zugleich die Ursache des Flackerns im Hintergrund: Jede
   dieser Breitenaenderungen loeste `resize` aus. */
html { scrollbar-gutter: stable; }

main { min-height: 60vh; padding-bottom: 4rem; }
/* Seiten, die ihr Inhalt erst im Browser fuellt (Lernstand, Belohnungen,
   Sprachpass, Einstufung …): Mit 60vh stand die Fusszeile beim ersten Bild
   im sichtbaren Bereich und wurde dann weggeschoben — CLS bis 0,63. Mit
   Skript reicht der Hauptteil deshalb bis unter den Rand; was danach
   waechst, waechst unterhalb des Sichtbaren und verschiebt nichts. */
html[data-js] main { min-height: 100vh; min-height: 100svh; }

.sprungmarke {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--marke); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--rund-s) 0;
}
.sprungmarke:focus { left: 0; }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- 3. Kopf und Fuss ---------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
/* Am Rechner misst kern.js (Kern.kopfEnge), ob der Kopf in eine Zeile
   passt — auch noch einmal, wenn die Schrift fertig geladen ist, aber erst
   ein Bild spaeter. In diesem einen Bild konnte das Sprachmenue ueber den
   Rand ragen und die ganze Seite seitlich rollen lassen (gesehen in der
   Pruefgruppe schreibtrainer, zufaellig auf wechselnden Seiten). `clip`
   statt `hidden`: kein Rollbereich, `sticky` bleibt, und die aufklappenden
   Menues gehen nach unten, nicht zur Seite. */
@media (min-width: 781px) {
  .kopf { overflow-x: clip; }
}

.kopf[data-gescrollt="ja"] {
  border-bottom-color: var(--linie);
  box-shadow: var(--schatten-1);
}

/* ==========================================================================
   Die Reiterleiste — die Nachbarn einer Seite neben der Seite

   Sechs Punkte oben, siebenundzwanzig in der Fußzeile, und dazwischen
   nichts. Wer auf den unregelmäßigen Verben stand und zu den Zeitformen
   wollte, musste ganz nach unten scrollen oder über „Grammatik" zurück und
   von dort neu hinein — zwei Schritte für eine Bewegung, die eine ist. Und
   beides sind Wege, die niemand geht: Man kommt nicht wieder.

   Sie klebt unter dem Kopf, nicht darunterliegend: Ein Reiter, den man
   wegscrollt, ist beim zweiten Wechsel wieder so weit weg wie die
   Fußzeile.

   **Ab 96rem wandert dieselbe Leiste an den Rand.** Die Hülle ist 74rem
   breit; auf einem Schirm von 1 536 Pixeln liegen links und rechts je
   gute zweihundert Pixel brach. Dieselben Reiter untereinander stehen
   dort, wo die Hand ohnehin ist, und nehmen dem Text keine Zeile weg.
   Nicht früher, weil die Leiste sonst in die Hülle hineinragt — und nicht
   als zweite Auszeichnung derselben Verweise: Es ist dasselbe Element,
   nur anders gesetzt.

   **Nicht auf einer Grammatikthemenseite.** Dort steht links schon die
   Themenleiste, und mit den Reitern davor waren es am breiten Schirm zwei
   Spalten nebeneinander — zehn Punkte, von denen zwei auch oben im Kopf
   standen, und daneben siebenundachtzig Themen. Zwei Listen links neben
   dem Text liest niemand als zwei verschiedene Dinge. Auf diesen Seiten
   bleiben die Reiter deshalb auf jeder Breite eine Zeile unter dem Kopf,
   genau wie zwischen 64 und 96rem, und der Rand gehört der Themenleiste
   (`body.mit-themenleiste`, gesetzt in tools/seiten_bauen.py). */
.reiter {
  position: sticky; top: var(--kopf-hoehe, 3.9rem); z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--linie);
}
.reiter-innen {
  display: flex; gap: .15rem; overflow-x: auto; padding: .3rem 0;
  scrollbar-width: none;
}
.reiter-innen::-webkit-scrollbar { display: none; }
.reiter-innen a {
  flex: 0 0 auto; padding: .45rem .75rem; border-radius: var(--rund-s);
  font-size: .88rem; color: var(--ink-2); text-decoration: none;
  white-space: nowrap; min-height: 32px; display: inline-flex;
  align-items: center; transition: background .12s, color .12s;
}
.reiter-innen a:hover { background: var(--marke-weich); color: var(--marke-ink); }
.reiter-innen a[aria-current="page"] {
  background: var(--marke); color: var(--knopf-ink); font-weight: 600;
}

@media (min-width: 96rem) {
  body:not(.mit-themenleiste) .reiter-innen {
    display: flex; flex-direction: column; gap: .1rem;
    padding: 0; max-width: none;
  }
  body:not(.mit-themenleiste) .reiter-innen a { white-space: normal; }
  /* Die Breite ist die Lücke und nicht eine gewählte Zahl.
     `50vw - 38.5rem` ist genau der Platz links neben der 74rem breiten
     Hülle, abzüglich eines Fingerbreit Abstand. Hier stand einmal eine
     feste Breite von 13rem an einer gerechneten Kante — und die Leiste
     lief dem Text achtzig Pixel weit in die Überschrift hinein. Eine
     Randspalte, die in den Rand hineinragt, ist keine. */
  body:not(.mit-themenleiste) .reiter {
    position: fixed; top: 7.5rem; left: 1rem;
    width: calc(50vw - 38.5rem); max-width: 13rem; z-index: 20;
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom: 0;
  }
  /* Auf dem Lernpfad liegt die Landschaft auch unter der Randspalte; ohne
     eigenen Grund wäre die Leiste dort kaum zu lesen. */
  body[data-bereich="lernpfad"] .reiter {
    padding: .5rem; border-radius: 16px;
    background: rgb(var(--bg-rgb) / .94);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
  }
}
.kopf-innen {
  display: flex; align-items: center; gap: 1rem;
  min-height: 4rem;
}

/* Der Innenabstand ist nicht Kosmetik: Ohne ihn ist die Marke genau so hoch
   wie ihr Zeichen, also 30 Pixel, und damit knapp unter dem, was ein Daumen
   sicher trifft. */
.marke {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--schrift-titel); font-weight: 600; font-size: 1.15rem;
  color: var(--ink); text-decoration: none; flex: none;
  padding: .2rem 0;
}
.marke svg { width: 30px; height: 30px; flex: none; }
/* Munos Kopf als Foto, als rundes Profilbild: Kopf und Schultern in einem
   Kreis, der Hut ragt oben heraus. Vorher lief der Kopf unten weich aus und
   wirkte am Kinn abgeschnitten; ein Kreis ist ein gewollter Rahmen. Die
   Scheibe dahinter kommt aus dem Stylesheet, damit sie in Hell und Dunkel
   zur Seite passt. Der kleine negative Rand oben gleicht die Luft ueber dem
   Hut aus. */
.marke-muno {
  width: 48px; height: 48px; flex: none; object-fit: contain;
  margin: -6px 0 -2px 0;
  background: radial-gradient(circle at 50% 57%, var(--marke-weich) 0 41%, transparent 42%);
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .18));
}
.marke:hover { color: var(--marke-ink); }

.navi-schalter {
  margin-left: auto; display: none;
  background: none; border: 1px solid var(--linie); color: var(--ink);
  border-radius: var(--rund-s); padding: .45rem; cursor: pointer;
}
.navi-schalter svg { width: 22px; height: 22px; display: block; }

.hauptnavi {
  margin-left: auto;
  display: flex; align-items: center; gap: .15rem; flex-wrap: wrap;
}
.hauptnavi > a {
  color: var(--ink-2); text-decoration: none;
  padding: .45rem .7rem; border-radius: var(--rund-voll);
  font-size: .95rem; white-space: nowrap;
}
.hauptnavi > a:hover { background: var(--bg-tief); color: var(--ink); }
.hauptnavi > a[aria-current="page"] {
  background: var(--marke-weich); color: var(--marke-ink); font-weight: 600;
}
.navi-werkzeuge { display: inline-flex; gap: .3rem; margin-left: .4rem; }

/* Die Sprache der Seite: ein Globus mit dem Kuerzel, aufgeklappt die
   Sprachen in ihrer eigenen Schrift. Steht ausserhalb des Menues, damit er
   auf dem Telefon nicht hinter dem Menueknopf verschwindet. */
.sprachmenue { position: relative; }
.sprachmenue > summary { list-style: none; }
.sprachmenue > summary::-webkit-details-marker { display: none; }
.sprachmenue-jetzt { font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.sprachmenue-liste {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 50;
  min-width: 12rem; padding: .35rem; display: flex; flex-direction: column;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: .7rem; box-shadow: var(--schatten-2, 0 8px 24px rgba(0,0,0,.14));
}
.sprachmenue-liste a {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem;
  border-radius: .45rem; color: var(--ink); text-decoration: none;
}
.sprachmenue-liste a:hover, .sprachmenue-liste a:focus-visible {
  background: var(--bg-tief);
}
.sprachmenue-liste a[aria-current="true"] {
  background: var(--marke-weich); color: var(--marke-ink); font-weight: 600;
}
.sprachmenue-kurz {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  color: var(--ink-2); min-width: 1.6rem;
}

.knopf-still {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: 1px solid var(--linie); color: var(--ink-2);
  border-radius: var(--rund-voll); padding: .4rem .6rem;
  cursor: pointer; font: inherit; font-size: .9rem; text-decoration: none;
}
.knopf-still:hover { border-color: var(--linie-kraeftig); color: var(--ink); }
.knopf-still svg { width: 18px; height: 18px; }
.thema-wort { font-size: .85rem; }
.thema-oben { flex: none; min-width: 2.75rem; min-height: 2.75rem; justify-content: center; }

/* **Der Kopf ist auf dem Rechner eine Zeile — gemessen, nicht geschaetzt.**

   Mit „Lesen", „Alle Sprachen", dem Woerterbuch und dem Konto brach die
   Zeile bei 1 000 Pixeln in zwei um („Mein Fortschritt" und die Lupe
   darunter), und bei 1 280 auch — die Huelle ist ab 1 220 Pixeln 74rem
   breit und waechst nicht mehr mit, also brach sie auf **jedem** Schirm.
   Gebraucht wurden mit allen Woertern an den Knoepfen 1 350 (Deutsch) bis
   1 440 Pixel (Franzoesisch), da waren 1 147. Drei Dinge:

   1. **Die Knoepfe rechts zeigen nur ihr Zeichen**, auf jeder Breite — so
      wie Woerterbuch und Hell/Dunkel es unter 1 180 Pixeln schon taten. Das
      Wort bleibt als Name fuer Vorleser stehen, und `title` sagt es beim
      Zeigen. Ein Wort, das nur ab 1 920 Pixeln passt, waere ein Wort fuer
      niemanden: Die Huelle wird dort nicht breiter.
   2. **Nichts im Kopf bricht um.** `.knopf, .knopf-still` duerfen sonst
      umbrechen (Umschrift in langen Titeln); im Kopf stand dadurch der
      Globus *ueber* dem „DE", und der Knopf war 59 statt 44 Pixel hoch.
   3. **Was dann noch nicht passt, weicht in Stufen** (`kopfEnge()` in
      assets/js/kern.js misst nach dem Laden, nach den Schriften und bei
      jeder Breitenaenderung): erst engere Punkte, dann das Wort neben Muno,
      zuletzt der Menueknopf des Telefons mit der Navigation darin. Breiten
      je Sprache von Hand einzutragen, haette zehn Oberflaechen, die
      Lesehilfen (Furigana, Umschrift) und den Coin-Zaehler des Kontos
      gegeneinander rechnen muessen — und beim naechsten Punkt waere es
      wieder falsch gewesen. Ohne Skript bleibt es beim Umbruch wie bisher:
      Der Menueknopf braucht ohnehin ein Skript. */
.kopf-innen .knopf-still { flex-wrap: nowrap; }
.sprachmenue { flex: none; }
.sprachmenue > summary { cursor: pointer; }
.kurs-kopf .kurs-kopf-wort, .wb-kopf .wb-kopf-wort,
.thema-oben .thema-wort, .konto-oben .konto-oben-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@media (min-width: 781px) {
  .kopf-innen { gap: .75rem; }
  /* Alles in der Zeile gleich hoch und auf einer Mitte: Punkte, Lupe,
     Lesehilfen, Knoepfe und die Sprache. */
  .hauptnavi > a {
    display: inline-flex; align-items: center; min-height: 2.75rem;
    padding: .3rem .55rem;
  }
  .navi-werkzeuge { align-items: center; }
  .navi-werkzeuge .knopf-still, .sprachmenue > summary {
    min-height: 2.75rem; min-width: 2.75rem; justify-content: center;
  }
  .sprachmenue > summary { gap: .35rem; padding: .4rem .7rem; }
  .navi-mehr { display: none; }
  .kopf[data-enge] .hauptnavi { flex-wrap: nowrap; flex: none; }
  .kopf.kopf-enger .kopf-innen { gap: .5rem; }
  .kopf.kopf-enger .hauptnavi > a { padding: .3rem .4rem; font-size: .9rem; }
  .kopf.kopf-enger .navi-werkzeuge { gap: .25rem; margin-left: .25rem; }
  .kopf.kopf-ohne-wort .marke > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  /* Die letzte Stufe: der Menueknopf des Telefons, die Navigation als
     Feld darunter — rechts buendig wie die Sprachliste. Die Leiste unten
     gibt es hier nicht, also stehen alle Punkte im Feld. */
  .kopf.kopf-kompakt .kopf-innen { position: relative; }
  .kopf.kopf-kompakt .marke { margin-right: auto; }
  .kopf.kopf-kompakt .navi-schalter {
    display: inline-flex; align-items: center; justify-content: center;
    order: 1; margin-left: 0; min-height: 2.75rem; min-width: 2.75rem;
    border-radius: var(--rund-voll);
  }
  .kopf.kopf-kompakt .hauptnavi {
    display: none; position: absolute; z-index: 50;
    top: calc(100% + .1rem); right: 1.15rem; margin: 0;
    flex-direction: column; align-items: stretch; gap: .1rem;
    min-width: 15rem; max-height: calc(100vh - 6rem); overflow-y: auto;
    padding: .45rem; background: var(--karte);
    border: 1px solid var(--linie); border-radius: .7rem;
    box-shadow: var(--schatten-2, 0 8px 24px rgba(0,0,0,.14));
  }
  .kopf.kopf-kompakt .hauptnavi.offen { display: flex; }
  .kopf.kopf-kompakt .hauptnavi > a { border-radius: var(--rund-s); }
  .kopf.kopf-kompakt .navi-werkzeuge {
    margin: .3rem 0 0; padding-top: .4rem; border-top: 1px solid var(--linie);
    flex-wrap: wrap;
  }
  .kopf:not(.kopf-kompakt) .navi-suche-wort { display: none; }
  /* Das Woerterbuch steht in der vollen Zeile schon als Zeichen rechts
     (`.wb-kopf`); im Menue-Werkzeug waere es dasselbe noch einmal. */
  .kopf:not(.kopf-kompakt) .navi-wb { display: none; }
}

.fuss {
  border-top: 1px solid var(--linie);
  background: var(--bg-tief);
  padding: 2.6rem 0 2rem;
  font-size: .93rem;
  color: var(--ink-2);
}
.fuss-raster {
  display: grid; gap: 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
/* Nur „Über die Seite" (Startseite mit der Sprachwahl, Rechtsseiten):
   eine Zeile statt einer Spalte, die allein ueber die ganze Breite liefe. */
.fuss-schmal { display: block; }
.fuss-schmal ul { display: flex; flex-wrap: wrap; gap: 0 1.6rem; }
.fuss h4 {
  font-family: var(--schrift); font-size: .78rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: .7rem;
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .15rem; }
/* Gemessen waren die Verweise hier 18 Pixel hoch — die Höhe der Zeile und
   sonst nichts. Auf einem Telefon ist das kein Ziel, das man trifft, es ist
   eines, das man beim dritten Versuch trifft. `inline-block` plus etwas
   Innenabstand macht daraus ein Ziel von gut zweiunddreißig Pixeln, ohne
   dass sich am Aussehen etwas ändert: Der Abstand zwischen den Zeilen
   schrumpft um genau so viel, wie das Ziel wächst. */
.fuss a {
  color: var(--ink-2); text-decoration: none;
  display: inline-block; padding: .38rem 0;
}
.fuss a:hover { color: var(--marke-ink); text-decoration: underline; }
.fuss-schluss {
  margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--linie);
  /* Auf der Schriftlinie: der Verweis zu DELISORIA traegt oben und unten
     Polster fuer den Finger und sass sonst eine halbe Zeile tiefer als
     seine Nachbarn. */
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.6rem;
  font-size: .87rem; color: var(--ink-3);
}
/* Der Herausgeber steht neben dem Namen der Seite und nicht im Fliesstext
   der Schlusszeile: „Ein Projekt von DELISORIA" ist eine Angabe ueber die
   Herkunft und kein Hinweis darauf, was die Seite ist. Etwas mehr Gewicht
   als der Rest der Zeile, aber weniger als der Seitenname. */
.fuss-herausgeber {
  color: var(--ink-2); font-weight: 600; letter-spacing: .01em;
}

/* --- 4. Bausteine -------------------------------------------------------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--marke); color: var(--knopf-ink);
  border: 1px solid transparent; border-radius: var(--rund-voll);
  padding: .72rem 1.35rem; font: inherit; font-weight: 600; font-size: .98rem;
  cursor: pointer; text-decoration: none; text-align: center;
  box-shadow: var(--schatten-1);
  transition: transform .12s, box-shadow .18s, background .18s;
}
.knopf:hover { color: var(--knopf-ink); box-shadow: var(--schatten-2); }
.knopf:active { transform: translateY(1px); }
.knopf svg { width: 19px; height: 19px; }
.knopf[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

.knopf-zweit {
  background: var(--karte); color: var(--ink);
  border-color: var(--linie-kraeftig);
}
.knopf-zweit:hover { color: var(--ink); background: var(--bg-tief); }

.knopf-klein { padding: .45rem .9rem; font-size: .9rem; }

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: 1.4rem;
  box-shadow: var(--schatten-1);
}

.raster {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.raster-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}
/* Drei Kästen nebeneinander, darunter einer pro Zeile — nie zwei plus
   einer allein, der nach Lücke aussieht. */
.raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .raster-3 { grid-template-columns: 1fr; } }

/* Die drei Ideen der Startseite: Symbol im farbigen Kreis, eine echte
   Überschrift statt eines grauen Etiketts. */
/* Die drei Ideen der Startseite stehen etwas abgesetzt unter ihrem Satz. */
.marke-schritte { margin-top: .4rem; }
.marke-idee { display: flex; flex-direction: column; gap: .55rem; }
.marke-idee h3, .marke-fragen h3 { margin: 0; font-size: 1.18rem; line-height: 1.3; }
.marke-idee p, .marke-fragen p { margin: 0; }
.marke-fragen .karte { display: flex; flex-direction: column; gap: .55rem; }
.marke-idee-symbol {
  display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border-radius: 50%; background: var(--marke-weich); color: var(--marke-ink);
  margin-bottom: .2rem;
}
.marke-idee-symbol svg { width: 20px; height: 20px; }

.kasten {
  border-radius: var(--rund);
  padding: 1.1rem 1.25rem;
  margin: 1.6rem 0;
  border: 1px solid var(--linie);
  background: var(--karte-2);
}
.kasten > :first-child { margin-top: 0; }
.kasten > :last-child { margin-bottom: 0; }
.kasten h3, .kasten h4 { margin-top: 0; }

.kasten-hinweis { background: var(--marke-weich); border-color: transparent; }
.kasten-warnung { background: var(--warn-weich); border-color: transparent; }
.kasten-falle   { background: var(--akzent-weich); border-color: transparent; }

/* Die Eigenangebote (tools/eigenangebote.py): der Hinweis auf den
   Einbuergerungstest (.einb, tools/einbuergerung.py), nur auf Paaren, die
   Deutsch lehren, und jedes weitere Angebot (.eigen, etwa der
   Bootsschein-Trainer, tools/bootsschein.py) mit denselben Regeln. Eine
   Karte im Inhalt und keine Anzeige: der Grund der Karten, ein schmaler
   Strich in der Markenfarbe als Kante, die
   Kennzeichnung klein darueber. Nur Farbmarken aus :root, also hell und
   dunkel ohne eigene Regel. Kein Bild, kein Symbol der Zielseite. */
.einb, .eigen { margin: 1.8rem 0; }
.einb-karte, .eigen-karte {
  background: var(--karte); border: 1px solid var(--linie);
  border-left: 4px solid var(--marke); border-radius: var(--rund);
  padding: 1rem 1.15rem 1.1rem;
}
.einb-karte > p, .eigen-karte > p { margin: 0; }
.einb-marke, .eigen-marke {
  font-size: .8125rem; font-weight: 600; letter-spacing: .02em;
  color: var(--ink-3);
}
.einb-karte .einb-marke, .eigen-karte .eigen-marke { margin-bottom: .3rem; }
.einb-zeile .einb-marke::after, .eigen-zeile .eigen-marke::after { content: " ·"; }
.einb-titel, .eigen-titel { font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.einb-karte .einb-text, .eigen-karte .eigen-text { margin-top: .35rem; color: var(--ink-2); }
.einb-domain, .eigen-domain { overflow-wrap: anywhere; -webkit-hyphens: none; hyphens: none;
  font-weight: 600; color: var(--ink); }
.einb-karte .einb-weiter, .eigen-karte .eigen-weiter { margin-top: .8rem; }
/* inline-block statt des inline-flex von .knopf-still: sonst ist der Pfeil
   ein eigenes Flex-Element und bricht auf 320 px allein in die zweite Zeile. */
.einb-karte .einb-link, .eigen-karte .eigen-link { display: inline-block; min-height: 2.75rem;
  padding: .6rem .95rem; line-height: 1.4;
  color: var(--marke-ink); border-color: var(--linie-kraeftig);
  font-weight: 600; white-space: normal; text-align: left; }
.einb-karte .einb-link:hover, .eigen-karte .eigen-link:hover { color: var(--marke-ink);
  border-color: var(--marke); }
.einb-zeile, .eigen-zeile { font-size: .95rem; color: var(--ink-2); }
.einb-zeile p, .eigen-zeile p { margin: 0; }
.einb-zeile .einb-link, .eigen-zeile .eigen-link { font-weight: 600; white-space: nowrap; }
.einb-pfeil, .eigen-pfeil { white-space: nowrap; }
@media (max-width: 30rem) {
  .einb-zeile .einb-link, .eigen-zeile .eigen-link { white-space: normal; }
}
@media print { .einb, .eigen { display: none; } }

.marke-schild {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: .5rem;
}
/* Ein <svg> mit viewBox und ohne eigene Größe ist 300 mal 150 Pixel groß —
   das ist der Standardwert, den kaum jemand im Kopf hat. In einem
   Flex-Behälter wird daraus je nach Nachbarn entweder ein Riese oder ein
   Nichts, und beides sieht nach etwas anderem aus als nach einer fehlenden
   Größenangabe.

   Genau das war hier: Das Warnsymbol im „Aufgepasst"-Kasten war auf allen
   Grammatikseiten unsichtbar, und dasselbe Symbol auf einer neuen Karte
   wurde riesig. Aufgefallen ist es erst durch den Riesen. */
.marke-schild svg { width: 17px; height: 17px; flex: none; }

.stufe-punkt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.35rem; padding: .12rem .5rem;
  border-radius: var(--rund-voll);
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  background: color-mix(in srgb, var(--stufe-farbe, var(--marke)) 16%, var(--karte));
  color: var(--stufe-ink);
  border: 1px solid color-mix(in srgb, var(--stufe-farbe, var(--marke)) 30%, transparent);
}

/* Auch die stille Zeile ist Fließtext — meistens die, die erklärt, was die
   Zahl darüber bedeutet. Sie ist die letzte gewesen, die über das Lesemaß
   hinauslief. */
.zeile-still {
  color: var(--ink-3); font-size: .9rem; max-width: var(--lesebreite);
}

table { border-collapse: collapse; width: 100%; }

.tabelle-rahmen { overflow-x: auto; margin: 1.3rem 0; }
.tabelle-rahmen table { min-width: 24rem; }
th, td {
  text-align: left; padding: .6rem .8rem;
  border-bottom: 1px solid var(--linie); vertical-align: top;
}
th { font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }

/* --- Tafeln: jede Tabelle auf ihrer eigenen Flaeche ----------------------
   Gesetzt von tools/tafeln.py ueber jede Seite. Vorher stand jede Tabelle
   ohne Hintergrund auf dem Grund, und auf dem Telefon zerfiel sie in lose
   Zeilen, nur durch Haarlinien getrennt, mit Spaltenkoepfen, die zehn Zeilen
   ueber dem Wert standen. Eine gemeinsame Flaeche haelt die Zeilen als eine
   Sache zusammen; der Kopf liegt in ihr, und auf dem Telefon steht der Name
   der Spalte als Etikett an jeder Zelle (`data-kopf`).

   Dieselben Tokens, Radien und Schatten wie die Formkarte der
   Grammatikseiten (`.formkarte`) — zwei Tafeln auf einer Seite sollen wie
   eine Familie aussehen. Die Breite folgt dem Inhalt bis zum Rand des
   Dokuments: Zwei Spalten ueber 1150 Pixel verteilt hiessen, dass das Auge
   von „1066" einen halben Bildschirm weit bis „ten sixty-six" laufen musste. */
.tafel {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund-l); box-shadow: var(--schatten-1);
  overflow: hidden; margin: 1.3rem 0 1.8rem;
  width: fit-content; min-width: min(100%, 30rem); max-width: min(100%, 52rem);
}
.tafel:has(table[data-spalten="2"]) { max-width: min(100%, 40rem); }
.tafel > .tabelle-rahmen { margin: 0; }
.tafel-text {
  margin: 0; padding: 1rem 1.2rem .95rem; max-width: none;
  color: var(--ink-2); line-height: 1.55;
  background: color-mix(in srgb, var(--kat, var(--marke)) 7%, var(--karte));
  border-bottom: 1px solid var(--linie);
}
.tafel table.datentafel { width: 100%; }
.tafel table.datentafel th,
.tafel table.datentafel td { padding: .7rem 1.2rem; }
/* Der Kopf liegt auf einem eigenen, leicht getoenten Band und hat die
   Tinte zwei und nicht drei: Er ist klein und in Versalien, und gerade
   kleine Schrift braucht den Kontrast (`--ink-2` auf `--karte-2`: hell
   8.2:1, dunkel 8.6:1; die Etiketten `--ink-3` auf `--karte-2`: 6.3:1 und
   5.9:1). */
.tafel table.datentafel thead th {
  background: var(--karte-2); color: var(--ink-2);
  border-bottom: 1px solid var(--linie-kraeftig);
  padding-top: .6rem; padding-bottom: .6rem;
}
.tafel table.datentafel tbody td:first-child,
.tafel table.datentafel tbody th[role="rowheader"] {
  color: var(--ink-2); font-size: .95rem; white-space: normal; width: auto;
  text-transform: none; letter-spacing: 0; font-weight: 500;
}
/* Ein ruhiger Wechsel je Zeilengruppe: Eine Folgezeile (Beispielsatz,
   Beleg) traegt den Ton ihrer Zeile mit — `data-streifen` zaehlt Gruppen. */
.tafel table.datentafel tr[data-streifen] { background: var(--karte-2); }
.tafel table.datentafel tr[data-folge] > td { border-top: 0; padding-top: 0; }
.tafel table.datentafel tr:has(+ tr[data-folge]) > td { border-bottom: 0; }
:root[data-vorlesbar="ja"] .tafel td > [data-vorlesen] + .vorlesen {
  margin-left: .45rem; vertical-align: middle;
}

/* Das Telefon. Zwei Spalten bleiben nebeneinander — „1066 | ten sixty-six"
   passt auf jede Breite, und gestapelt waere aus einem Paar eine
   Aufzaehlung geworden. Ab drei Spalten wird jede Zeile eine Karte: der
   erste Wert oben und kraeftig, darunter jede weitere Zelle mit ihrem
   Spaltennamen als Etikett. Der Kopf bleibt fuer Screenreader im Baum
   (`role` setzt tools/tafeln.py) und verschwindet nur fuers Auge. */
@media (max-width: 560px) {
  .tafel { min-width: 0; width: auto; margin-left: 0; margin-right: 0; }
  .tafel-text { padding: .9rem 1rem .85rem; font-size: 1rem; }
  .tafel .tabelle-rahmen table.datentafel { min-width: 0; }
  .tafel table.datentafel th,
  .tafel table.datentafel td { padding: .65rem 1rem; }
  .tafel table.datentafel[data-spalten="2"] tbody td:first-child { width: 38%; }

  .tafel table.datentafel:not([data-spalten="1"]):not([data-spalten="2"]) :is(thead) {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .tafel table.datentafel:not([data-spalten="1"]):not([data-spalten="2"]) :is(tbody, tr, td, th) {
    display: block; width: auto;
  }
  .tafel table.datentafel:not([data-spalten="1"]):not([data-spalten="2"]) tbody tr {
    padding: .8rem 1rem .85rem; border-bottom: 1px solid var(--linie);
  }
  .tafel table.datentafel:not([data-spalten="1"]):not([data-spalten="2"]) tbody tr:last-child { border-bottom: 0; }
  .tafel table.datentafel:not([data-spalten="1"]):not([data-spalten="2"]) tbody tr:has(+ tr[data-folge]) { border-bottom: 0; padding-bottom: .3rem; }
  .tafel table.datentafel:not([data-spalten="1"]):not([data-spalten="2"]) tbody tr[data-folge] { padding-top: 0; }
  .tafel table.datentafel:not([data-spalten="1"]):not([data-spalten="2"]) tbody :is(td, th) {
    padding: .15rem 0; border: 0;
  }
  /* Der erste Wert ist der, nach dem man sucht — er steht oben, kraeftig. */
  .tafel table.datentafel:not([data-spalten="1"]):not([data-spalten="2"]) tbody tr:not([data-folge]) > :first-child {
    color: var(--ink); font-size: 1.02rem; font-weight: 600; padding-bottom: .3rem;
  }
  /* Das Etikett steht ueber dem Wert und nicht daneben: Eine Zelle als
     Raster haette jedes Kind zu einer eigenen Spalte gemacht — ein Zielwort
     mitten im Satz waere aus dem Satz gerissen worden. */
  .tafel table.datentafel:not([data-spalten="1"]):not([data-spalten="2"]) tbody td[data-kopf]:not(:first-child)::before {
    content: attr(data-kopf); display: block;
    font-size: .8rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--ink-3); line-height: 1.5;
    margin-top: .25rem;
  }
  .tafel table.datentafel:not([data-spalten="1"]):not([data-spalten="2"]) tbody td[data-leer] {
    display: none;
  }
  /* Zwei Spalten bleiben eine Tabelle — auch wenn die Formtabelle unter
     560 Pixeln sonst jede Zeile stapelt. */
  .tafel table.datentafel:is([data-spalten="1"], [data-spalten="2"]) tr {
    display: table-row; padding: 0; border: 0;
  }
  .tafel table.datentafel:is([data-spalten="1"], [data-spalten="2"]) :is(td, th) {
    display: table-cell; border-bottom: 1px solid var(--linie);
  }
  .tafel table.datentafel:is([data-spalten="1"], [data-spalten="2"]) tbody tr:last-child > * {
    border-bottom: 0;
  }
}

/* Der Rahmen um englische Beispielsaetze. Englisch wird durchgaengig anders
   gesetzt als Deutsch — nicht als Verzierung, sondern damit beim Ueberfliegen
   sofort klar ist, welche Sprache man vor sich hat. */
.ziel {
  font-weight: 500;
  color: var(--ink);
}
.de {
  color: var(--ink-3);
  font-size: .95em;
}
/* Ein Satzpaar ist Fließtext und gehört damit unter das Lesemaß. Ohne die
   Grenze läuft es in einer Karte auf dem Schreibtisch über die volle
   Containerbreite — gemessen 1122 Pixel, also gut das Anderthalbfache dessen,
   was ein Auge in einer Zeile noch bequem verfolgt. Auf dem Telefon ändert
   sich dadurch nichts; dort war die Breite nie das Problem. */
.satzpaar { margin: 0 0 .85rem; max-width: var(--lesebreite); }
.satzpaar .ziel { display: block; }
.satzpaar .de { display: block; }
.satzpaar:last-child { margin-bottom: 0; }

.falsch-richtig { display: grid; gap: .55rem; margin: .9rem 0 0; }
.fr-zeile {
  display: flex; gap: .6rem; align-items: baseline;
  padding: .5rem .75rem; border-radius: var(--rund-s);
  background: color-mix(in srgb, var(--karte) 70%, transparent);
}
.fr-zeile[data-art="falsch"] { background: var(--fehler-weich); }
.fr-zeile[data-art="richtig"] { background: var(--ok-weich); }
.fr-mark { font-weight: 700; flex: none; }
.fr-zeile[data-art="falsch"] .fr-mark { color: var(--fehler-ink); }
.fr-zeile[data-art="richtig"] .fr-mark { color: var(--ok-ink); }

.marken-liste { list-style: none; margin: 0; padding: 0; }
.marken-liste li {
  position: relative; padding-left: 1.5rem; margin-bottom: .45rem;
}
.marken-liste li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--marke); opacity: .55;
}

.signalwoerter {
  display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 0; padding: 0;
  list-style: none;
}
.signalwoerter li {
  background: var(--bg-tief); border: 1px solid var(--linie);
  border-radius: var(--rund-voll); padding: .25rem .7rem;
  font-size: .88rem; color: var(--ink-2);
}

/* --- 4b. Der leise Hintergrund auf jeder Seite ---------------------------- */

/* `position: fixed` und nicht `absolute`: Die Fläche ist einen Bildschirm
   groß und bleibt beim Scrollen stehen. Absolut positioniert wäre sie so hoch
   wie der Viewport und stünde ab dem zweiten Bildschirm nicht mehr dahinter —
   also genau da nicht, wo die meiste Zeit gelesen wird.

   `z-index: 0` mit `isolation: isolate` auf nichts: Alles andere im Körper hat
   keinen eigenen Stapelkontext und liegt schon deshalb darüber. Ein negativer
   Wert war die erste Fassung und ist falsch — er schiebt das Canvas hinter den
   Hintergrund des Körpers, und dann sieht man gar nichts.

   `pointer-events: none` ist nicht Kosmetik: Ohne das fängt eine
   bildschirmgroße Fläche jeden Klick ab, der nicht auf einen Text trifft. */
.grundflaeche {
  position: fixed; inset: 0; width: 100%; height: 100%;
  /* `lvh` ist die Höhe des Fensters *ohne* eingefahrene Adressleiste, und
     sie ändert sich beim Scrollen nicht. Damit bleibt der Kasten stehen,
     während die Leiste kommt und geht — auf einem Telefon der Unterschied
     zwischen einem ruhigen Hintergrund und einem, der mitzuckt. Die Zeile
     darüber bleibt als Rückfall für Browser ohne diese Einheit; dort fängt
     `messen()` in grundflaeche.js denselben Fall ab. */
  height: 100lvh;
  display: block; z-index: 0; pointer-events: none;
}
/* Nur `z-index`, nicht `position`. Die erste Fassung setzte hier
   `position: relative` auf `.kopf` mit — und überschrieb damit das `sticky`
   der Kopfzeile, die daraufhin nach oben aus dem Bild scrollte. `.kopf` und
   die Übungsfußzeile bringen ihren Stapelkontext schon selbst mit; die beiden
   übrigen brauchen einen. Dieselbe Falle ein zweites Mal: Hier stand
   auch `.sprungmarke` mit `position: relative` — damit lag der
   Sprunglink nicht mehr ausserhalb des Bildes, sondern nahm als Block
   44 Pixel ueber der Kopfzeile ein, auf jeder Seite. Er bleibt
   `absolute` und bekommt nur seine Ebene. */
.kopf, .fuss { z-index: 40; }
main { position: relative; z-index: 1; }
.sprungmarke { z-index: 100; }

/* Auf der Startseite malt die Bühne ihr eigenes, kräftigeres Bild — die
   Grundfläche schaltet sich dort selbst ab, siehe grundflaeche.js. Zwei
   Flächen übereinander wären zweimal dieselbe Idee, nur unruhiger. */

/* --- 5. Startseite ------------------------------------------------------- */

.buehne { position: relative; overflow: hidden; }
.buehne-grund {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0;
}
.buehne-schleier {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--bg) calc(var(--schleier-oben) * 100%), transparent) 0%,
      color-mix(in srgb, var(--bg) calc(var(--schleier-rand) * 100%), transparent) 62%,
      var(--bg) 100%);
}
/* Nur oben und unten setzen. Die Kurzform `padding: 3.4rem 0 3rem` stand hier
   zuerst — und weil dieses Element AUCH .huelle traegt, loeschte sie deren
   seitlichen Rand: Auf dem Telefon klebte die Ueberschrift am Displayrand.
   Eine Kurzform setzt eben alle vier Seiten, auch die, die man gar nicht
   meinte. */
.buehne-innen {
  position: relative; z-index: 2;
  padding-top: 3.4rem; padding-bottom: 3rem;
}

/* Auf breiten Schirmen stehen Text und Vorfuehrung nebeneinander: Die
   Vorfuehrung ist das Argument, und ein Argument, fuer das man erst scrollen
   muss, ist keines. */
@media (min-width: 1020px) {
  .buehne-innen {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 2.6rem; align-items: center;
  }
  .buehne-innen > .hero { max-width: none; }
}

.hero { max-width: 40rem; }
.hero h1 { margin-bottom: .55rem; }
.hero-sub {
  font-size: 1.15rem; color: var(--ink-2); max-width: 34rem;
  margin-bottom: 1.6rem;
}
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; }

/* --- Der Anspruch der Seite ---------------------------------------------
   Zwei Zeilen mit verschiedenen Aufgaben, und deshalb mit verschiedenem
   Gewicht. Der Claim steht ueber der Ueberschrift und ist die kuerzeste
   Zeile der Seite; die Belegzeile steht unter dem Vorspann und ist die
   ruhigste. Dazwischen liegt die Ueberschrift, die weiter das Thema nennt
   und nicht den Anspruch — ein Suchergebnis lebt vom Thema.

   Der Claim ist bewusst nicht in Versalien gesetzt. Ein Satz mit Punkt am
   Ende, in Versalien, liest sich als Werbung; hier soll er sich als
   Aussage lesen. Die Marke traegt ihn, nicht die Typografie. */
.claim {
  margin: 0 0 .5rem; font-family: var(--schrift-titel);
  font-size: 1.05rem; font-style: italic; letter-spacing: .01em;
  color: var(--marke-ink);
}
/* Der Beleg traegt `--ink-2` und nicht `--ink-3`, und das ist keine
   Kosmetik. `thema` hat ihn auf der dunklen Startseite mit 4.43:1
   gemessen, knapp unter den geforderten 4.5 — sichtbar geworden, als die
   Buehne nur noch von einem Skript gemalt wurde und dadurch dichter
   wurde. Die Antwort darauf ist nicht, den Hintergrund zu dimmen: Dieser
   Satz nennt die Zahlen, mit denen die Ueberschrift darueber wirbt. Der
   Satz, der eine Behauptung belegt, darf nicht die leiseste Schrift der
   Seite sein. */
.claim-beleg {
  margin: 0 0 1.6rem; max-width: 34rem;
  font-size: .95rem; line-height: 1.65; color: var(--ink-2);
}
/* Steht der Beleg da, hat der Vorspann seinen Abstand schon abgegeben. */
.hero-sub:has(+ .claim-beleg) { margin-bottom: .7rem; }

/* Der Herausgeber steht neben dem Namen der Seite und vor dem Satz, der
   sagt, was sie ist: eine Angabe ueber die Herkunft und kein Hinweis auf
   den Inhalt. Etwas mehr Gewicht als der Rest der Zeile, weniger als der
   Seitenname. */
.fuss-herausgeber {
  color: var(--ink-2); font-weight: 600; letter-spacing: .01em;
}

.leiter { display: grid; gap: .5rem; margin: 2.4rem 0 0; }
.leiter-sprosse {
  display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: .9rem;
  align-items: center;
  background: var(--karte); border: 1px solid var(--linie);
  border-left: 4px solid var(--stufe-farbe, var(--marke));
  border-radius: var(--rund); padding: .8rem 1rem;
  text-decoration: none; color: var(--ink);
  box-shadow: var(--schatten-1);
  transition: transform .14s, box-shadow .2s;
}
.leiter-sprosse:hover {
  transform: translateX(3px); box-shadow: var(--schatten-2); color: var(--ink);
}
.leiter-name {
  font-family: var(--schrift-titel); font-size: 1.35rem; font-weight: 600;
  color: var(--stufe-ink);
}
.leiter-titel { font-weight: 600; }
.leiter-kurz { color: var(--ink-3); font-size: .92rem; }
.leiter-zahl { color: var(--ink-3); font-size: .87rem; white-space: nowrap; }

/* Die Vorfuehrung. Sie steht fertig da, auch ohne JavaScript — das erste
   Bild ist im HTML ausgeschrieben, alles Weitere schaltet das Skript. */
.vorfuehrung {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund-l); box-shadow: var(--schatten-3);
  overflow: hidden;
}
.vf-kopf {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1rem; border-bottom: 1px solid var(--linie);
  background: var(--bg-tief);
}
.vf-punkte { display: flex; gap: 0; margin-left: auto; }
/* Ein Punkt von acht Pixeln ist ein Ziel, das auf dem Telefon niemand
   trifft. Sichtbar bleibt er klein, anfassbar wird er 24 Pixel gross — der
   Knopf traegt die Flaeche, das ::after zeichnet den Punkt. */
.vf-punkt {
  /* 32 und nicht 24: Vierundzwanzig war schon der zweite Anlauf und immer
     noch unter dem, was ein Daumen sicher trifft. Sichtbar bleibt der Punkt
     unverändert klein — die Fläche liegt im Knopf, der Punkt im ::after. */
  width: 32px; height: 32px; border: none; padding: 0; cursor: pointer;
  background: none; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 50%;
}
.vf-punkt::after {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--linie-kraeftig);
  transition: background .2s, transform .2s;
}
.vf-punkt[aria-selected="true"]::after {
  background: var(--marke); transform: scale(1.35);
}
.vf-titel { font-weight: 600; font-size: .93rem; }
/* Alle Szenen liegen uebereinander in derselben Rasterzelle. Damit ist
   die Buehne so hoch wie ihre hoechste Szene und aendert ihre Hoehe beim
   Wechsel nicht mehr. `min-height` war ein Boden und keine Decke: Eine
   Szene mit einer Zeile mehr — etwa die mit dem Kasten „Richtig ist" —
   machte den ganzen Kasten hoeher und die Seite mit ihm.
   `visibility` statt `display`, weil eine Szene, die nicht angezeigt wird,
   trotzdem Platz beanspruchen soll; aus dem Tastaturlauf und aus dem
   Vorlesen faellt sie damit ebenso heraus wie vorher. */
.vf-buehne {
  padding: 1.3rem; min-height: 13.5rem; position: relative;
  display: grid; align-items: start;
}
.vf-szene { grid-area: 1 / 1; visibility: hidden; }
.vf-szene[data-aktiv="ja"] {
  visibility: visible; animation: vf-rein .38s ease-out;
}
@keyframes vf-rein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.vf-frage { font-size: 1.08rem; margin-bottom: .9rem; }
.vf-fuss {
  padding: .6rem 1rem; border-top: 1px solid var(--linie);
  font-size: .82rem; color: var(--ink-3); background: var(--bg-tief);
}

.vf-wahl { display: grid; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.vf-wahl li {
  border: 1px solid var(--linie); border-radius: var(--rund-s);
  padding: .55rem .8rem; background: var(--karte-2);
  transition: background .25s, border-color .25s;
}
.vf-wahl li[data-stand="falsch"] { background: var(--fehler-weich); border-color: var(--fehler); }
.vf-wahl li[data-stand="richtig"] { background: var(--ok-weich); border-color: var(--ok); }

.vf-zeiger {
  position: absolute; width: 22px; height: 22px; z-index: 5;
  pointer-events: none; opacity: 0;
  transition: transform .55s cubic-bezier(.3,.8,.3,1), opacity .25s;
  color: var(--ink);
}
.vf-zeiger[data-sichtbar="ja"] { opacity: .85; }
.vf-zeiger[data-druck="ja"] { transform: scale(.86); }

.vf-tipp {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg-tief); border: 1px solid var(--linie);
  border-radius: var(--rund-s); padding: .6rem .8rem; min-height: 2.6rem;
}
.vf-tipp::after {
  content: "▍"; color: var(--marke); animation: blinken 1s steps(2) infinite;
}
@keyframes blinken { 50% { opacity: 0; } }

.vf-uhr {
  font-family: var(--schrift-titel); font-size: 2rem; font-weight: 600;
  color: var(--akzent-ink);
}
.vf-faecher { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.vf-fach {
  border: 1px solid var(--linie); border-radius: var(--rund-s);
  padding: .5rem .3rem; text-align: center; background: var(--karte-2);
  transition: background .3s, transform .3s;
}
.vf-fach[data-leuchtet="ja"] { background: var(--marke-weich); transform: translateY(-3px); }
.vf-fach b { display: block; font-size: 1.15rem; }
.vf-fach span { font-size: .82rem; color: var(--ink-3); }

.vf-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: 1rem; }
.vf-zahl { text-align: center; }
.vf-zahl b {
  display: block; font-family: var(--schrift-titel); font-size: 1.9rem;
  color: var(--marke-ink); font-weight: 600;
}
.vf-zahl span { font-size: .8rem; color: var(--ink-3); }

.wegweiser {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
.weg {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 1.2rem;
  box-shadow: var(--schatten-1);
  transition: transform .14s, box-shadow .2s, border-color .2s;
}
.weg:hover {
  transform: translateY(-2px); box-shadow: var(--schatten-2);
  border-color: var(--linie-kraeftig); color: var(--ink);
}
.weg svg { width: 26px; height: 26px; color: var(--marke); margin-bottom: .5rem; }
.weg b { display: block; font-family: var(--schrift-titel); font-size: 1.08rem; margin-bottom: .2rem; }
.weg span { color: var(--ink-3); font-size: .93rem; }

/* --- Der Werkzeugkasten auf der Startseite eines Paares -------------------
   Was neben den Lektionen bereitsteht, als Kacheln mit den Knetfiguren des
   Lernpfads statt als Zeilen in der Fusszeile. */
.wz {
  margin-top: 2.8rem; padding: clamp(1.1rem, 3vw, 2rem);
  border-radius: var(--rund-l);
  border: 1px solid color-mix(in srgb, var(--linie) 70%, transparent);
  background-color: rgba(var(--glas), var(--glas-deckung));
  -webkit-backdrop-filter: blur(var(--glas-unschaerfe));
  backdrop-filter: blur(var(--glas-unschaerfe));
  box-shadow: var(--glas-saum), var(--halo);
}
.wz-kopf { display: flex; align-items: center; gap: 1rem 1.4rem; }
.wz-kopf img { width: 6.5rem; height: auto; flex: none; }
.wz-kopf h2 { margin: 0 0 .3rem; }
.wz-kopf p { margin: 0; color: var(--ink-2); }
.wz-raster {
  display: grid; gap: .9rem; margin-top: 1.4rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wz-kachel {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .25rem; padding: 1rem 1.1rem 1.15rem; text-decoration: none;
  color: var(--ink); background: var(--karte);
  border: 1px solid var(--linie); border-radius: var(--rund);
  box-shadow: var(--schatten-1);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s;
}
.wz-kachel img {
  width: 5.4rem; height: 5.4rem; margin: -.3rem 0 .3rem -.4rem;
  transition: transform .25s cubic-bezier(.2, 1.4, .4, 1);
}
.wz-kachel b {
  font-family: var(--schrift-titel); font-size: 1.08rem; line-height: 1.25;
}
.wz-kachel span { color: var(--ink-3); font-size: .92rem; line-height: 1.45; }
.wz-kachel:hover, .wz-kachel:focus-visible {
  transform: translateY(-3px); box-shadow: var(--schatten-2);
  border-color: var(--linie-kraeftig); color: var(--ink);
}
.wz-kachel:hover img { transform: rotate(-6deg) scale(1.06); }
.wz-kachel:focus-visible { outline: none; box-shadow: var(--ring); }
.wz-schild {
  margin: 1.6rem 0 .6rem; font-size: .76rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
/* Eine Reihe: Nachschlagen ist eine Leiste, kein Stapel. Reicht die Breite
   nicht (Telefon, lange Bezeichnungen), wischt man seitlich weiter, statt
   dass ein einzelner Punkt allein in eine zweite Zeile faellt. */
.wz-eingaenge {
  display: flex; flex-wrap: nowrap; gap: .25rem; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; padding: 2px; margin: -2px;
}
.wz-eingaenge::-webkit-scrollbar { display: none; }
/* Wo die Reihe weiterwischt, laeuft der rechte Rand aus: das zeigt, dass
   dahinter noch etwas kommt. */
@media (max-width: 75rem) {
  .wz-eingaenge {
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
    padding-right: 2.5rem;
  }
}
.wz-eingang {
  flex: 1 0 auto; justify-content: center; white-space: nowrap;
  scroll-snap-align: start;
  display: inline-flex; align-items: center; padding: .45rem .5rem;
  border-radius: var(--rund-voll); border: 1px solid var(--linie);
  background: var(--karte); color: var(--ink-2); text-decoration: none;
  font-size: .86rem;
}
.wz-eingang:hover, .wz-eingang:focus-visible {
  border-color: var(--marke); color: var(--marke-ink);
  background: var(--marke-weich);
}
@media (max-width: 40rem) {
  .wz-kopf img { width: 4.6rem; }
  .wz-raster { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .wz-kachel { padding: .8rem .8rem .9rem; }
  .wz-kachel img { width: 3.6rem; height: 3.6rem; }
  .wz-kachel span { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wz-kachel, .wz-kachel img { transition: none; }
}

/* Die Sprachauswahl auf der Startseite der Marke. Grösser als ein Wegweiser,
   weil hier die eigentliche Entscheidung getroffen wird: Wer hier steht, hat
   noch keine Sprache gewählt, und alles andere auf der Seite setzt eine
   voraus. Eine einzelne Karte darf trotzdem nicht die halbe Breite fluten —
   daher `max-width` statt `1fr` bei nur einem Eintrag. */
/* Die Flagge sitzt in der Zeile und nicht darueber: `vertical-align`
   auf der Grundlinie liesse sie an der Unterkante haengen, weil ein SVG
   ein ersetztes Element ist und keine Schriftlinie kennt. */
.flagge {
  display: inline-block; vertical-align: -.14em; flex: 0 0 auto;
  border-radius: .18em;
}

/* --- Die Sprachbuehne: wer spricht was, wer lernt was ------------------
   Zwei gleich grosse Kreise und ein Pfeil, darunter die Blasen beider
   Seiten — alle gleich gross, denn keine Sprache ist hier groesser als
   eine andere. Die Farbe einer Sprache (`--sf`) ist dieselbe wie bei Muno
   und zeichnet nur den Ring, nie Schrift. */

.sb [data-sprache="de"] { --sf: #c8871b; }
.sb [data-sprache="en"] { --sf: #3f5bd5; }
.sb [data-sprache="es"] { --sf: #e06a2c; }
.sb [data-sprache="fr"] { --sf: #0f7f88; }
.sb [data-sprache="it"] { --sf: #2e8b4e; }
.sb [data-sprache="pt"] { --sf: #8a49a6; }
.sb [data-sprache="ja"] { --sf: #d23a5a; }
.sb [data-sprache="zh"] { --sf: #b3261e; }
.sb [data-sprache="ko"] { --sf: #5b4bc4; }
/* Hindi: kein Safran, obwohl Muno ihn traegt — zwischen dem Gold von de
   und dem Orange von es waere er auf der Buehne der dritte Ton derselben
   Farbe. Ein Magenta liegt frei zwischen dem Violett von pt und dem Rot
   von ja. */
.sb [data-sprache="hi"] { --sf: #b8327e; }
/* Tuerkisch und Polnisch: Muno traegt ein Weinrot und ein Himbeerrot,
   und auf der Buehne stehen dieselben beiden Richtungen, nur so weit
   verschoben, dass sie neben dem Rot von zh (#b3261e), dem von ja und dem
   Orange von es nicht als vierter und fuenfter Ton derselben Farbe
   stehen: ein tiefes Weinrot fuer tr, ein helles Rose fuer pl. */
.sb [data-sprache="tr"] { --sf: #7f1d3f; }
.sb [data-sprache="pl"] { --sf: #e0607e; }

.paarwahl.sb {
  --sf: var(--marke);
  position: relative; margin: 0 0 2rem;
  padding: clamp(1.2rem, 3.2vw, 2.2rem) clamp(1rem, 3vw, 2.4rem) 1.6rem;
  border-radius: var(--rund-l);
  border: 1px solid color-mix(in srgb, var(--linie) 70%, transparent);
  background-color: rgba(var(--glas), var(--glas-deckung));
  isolation: isolate;
  -webkit-backdrop-filter: blur(var(--glas-unschaerfe));
  backdrop-filter: blur(var(--glas-unschaerfe));
  box-shadow: var(--glas-saum), var(--halo);
}

.sb-buehne {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: .4rem clamp(.6rem, 3vw, 2.4rem);
}
.sb-seite {
  position: relative; display: flex; flex-direction: column;
  align-items: center; text-align: center; min-width: 0;
}
/* Ein Lichthof in der Farbe der Sprache hinter jedem Kreis — er wechselt
   mit, wenn eine andere Blase gewaehlt wird. */
.sb-seite::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 52%;
  width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--sf) 16%, transparent), transparent);
  transition: background .4s ease;
}
.sb-schild {
  margin: 0 0 .8rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}
.sb-kreis {
  --d: clamp(6.4rem, 19vw, 10.5rem);
  position: relative; width: var(--d); height: var(--d);
  border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 42%,
    color-mix(in srgb, var(--sf) 16%, var(--karte)), var(--karte) 72%);
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--sf) 22%, transparent),
    0 18px 40px -16px color-mix(in srgb, var(--sf) 70%, transparent);
  transition: box-shadow .35s ease;
}
.sb-ring {
  position: absolute; inset: -14px; border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--sf) 45%, transparent);
  animation: sb-kreisen 26s linear infinite;
}
.sb-links .sb-ring { animation-direction: normal; }
.sb-rechts .sb-ring { animation-direction: reverse; }
/* Auf den schmalsten Handys (320 px) waren zwei Kreise samt Ring breiter
   als die Karte: Der Ring ragte sichtbar zehn Pixel ueber ihren Rand, und
   weil er sich dreht, wuchs sein Kasten bei 45 Grad bis ueber den Rand der
   Seite — die Startseite liess sich seitlich schieben (layout, 320 px).
   Kleiner statt abgeschnitten: Ein gekappter Ring saehe kaputt aus. */
@media (max-width: 380px) {
  .sb-kreis { --d: 5.4rem; }
  .sb-ring { inset: -10px; }
}
.sb-kreis .sb-bild {
  width: 88%; height: 88%; object-fit: contain; border-radius: 50%;
  animation: sb-schweben 5.5s ease-in-out infinite;
}
.sb-rechts .sb-kreis .sb-bild { animation-delay: -2.7s; }
.sb-kreis.sb-neu .sb-bild {
  animation: sb-auftritt .55s cubic-bezier(.2, 1.4, .4, 1) both,
    sb-schweben 5.5s ease-in-out .55s infinite;
}
.sb-name {
  margin: .95rem 0 0; font-family: var(--schrift-titel);
  font-size: clamp(1.15rem, 2.4vw, 1.55rem); font-weight: 600;
  color: var(--ink); line-height: 1.2; overflow-wrap: anywhere;
}

/* Der Pfeil: ein Bogen, durch den die Striche laufen. */
.sb-pfeil {
  display: inline-grid; place-items: center; padding: .3rem;
  margin-top: 1.4rem; border: 0; background: none; color: var(--marke-ink);
  cursor: pointer; border-radius: var(--rund);
  width: clamp(4.4rem, 14vw, 10rem);
}
.sb-pfeil svg { width: 100%; height: auto; overflow: visible; }
.sb-pfeil path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sb-von { stop-color: var(--sb-von, currentColor); }
.sb-nach { stop-color: var(--sb-nach, currentColor); }
.sb-pfeil-spur {
  stroke: url(#sb-verlauf); stroke-width: 9; opacity: .2;
}
/* Das Strichmuster (1 + 12) muss in den Weg der Animation (26) genau
   aufgehen, sonst springen die Punkte am Ende jeder Runde zurueck — mit
   „1 10" waren es 4 Einheiten alle 1,1 Sekunden, und genau das sah aus
   wie ein Ruckeln. */
.sb-pfeil-lauf {
  stroke: url(#sb-verlauf); stroke-width: 4; stroke-dasharray: 1 12;
  animation: sb-laufen 1.2s linear infinite;
}
.sb-pfeil-spitze {
  stroke: var(--sb-nach, currentColor); stroke-width: 4.2;
  animation: sb-nicken 2.2s ease-in-out infinite;
  transform-origin: 104px 32px;
}
.sb-pfeil:hover { background: color-mix(in srgb, var(--marke) 9%, transparent); }
.sb-pfeil:focus-visible { outline: none; box-shadow: var(--ring); }
.sb-pfeil.sb-dreht svg { animation: sb-wenden .6s cubic-bezier(.4, 0, .2, 1); }
.sb-pfeil.sb-gesperrt { cursor: help; opacity: .6; }
.sb-pfeil.sb-gesperrt .sb-pfeil-lauf { animation-duration: 2.4s; }
.sb-pfeil-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.sb-pfeil[hidden] { display: none; }
.sb-pfeil-still .sb-pfeil-spur { stroke: currentColor; stroke-width: 3; opacity: 1; }
.sb-lebt .sb-pfeil-still { display: none; }

/* Die Blasen: alle gleich gross, unter der Seite, zu der sie gehoeren. */
.sb-blasen {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 2.4rem;
  margin-top: 1.8rem; padding-top: 1.4rem;
  border-top: 1px solid color-mix(in srgb, var(--linie) 80%, transparent);
}
.sb-gruppe { min-width: 0; }
.sb-reihe-schild {
  margin: 0 0 .7rem; text-align: center; font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}
/* Links stehen die Sprachen, die man spricht — in ihrer eigenen Schrift
   und damit oft laenger; rechts die Ziele. Beide Reihen beginnen in der
   Mitte ihrer Haelfte, damit sie unter ihrem Kreis stehen. */
.sb-reihe-links, .sb-reihe-rechts { align-content: flex-start; }
.sb-reihe {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem .3rem;
}
.sb-blase {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  width: 4.9rem; padding: .45rem .15rem .5rem; border-radius: var(--rund);
  color: var(--ink-2); text-decoration: none; font-size: .84rem;
  line-height: 1.25; text-align: center;
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.sb-blase .sb-bild {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: contain;
  box-shadow: 0 0 0 3px transparent, 0 6px 14px -8px rgba(15, 23, 42, .45);
  transition: box-shadow .25s ease, transform .25s ease;
}
.sb-blase-name { overflow-wrap: anywhere; }
.sb-blase:hover { color: var(--ink); transform: translateY(-3px); }
.sb-blase:hover .sb-bild {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf) 45%, transparent),
    0 10px 18px -8px color-mix(in srgb, var(--sf) 60%, transparent);
}
.sb-blase:focus-visible { outline: none; box-shadow: var(--ring); }
.sb-blase.sb-gewaehlt {
  color: var(--ink); font-weight: 700;
  background: color-mix(in srgb, var(--sf) 10%, transparent);
}
.sb-blase.sb-gewaehlt .sb-bild {
  box-shadow: 0 0 0 3px var(--sf),
    0 10px 18px -8px color-mix(in srgb, var(--sf) 70%, transparent);
}

.sb-fuss {
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  margin-top: 1.6rem;
}
.sb-los {
  font-size: 1.05rem; padding: .8rem 1.5rem; gap: .55rem;
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--marke) 80%, transparent);
}
.sb-los svg { transition: transform .2s ease; }
.sb-los:hover svg { transform: translateX(3px); }
.sb .paarwahl-stand { text-align: center; flex: none; }

@keyframes sb-laufen { to { stroke-dashoffset: -26; } }
@keyframes sb-nicken { 50% { transform: translateX(3px); } }
@keyframes sb-kreisen { to { transform: rotate(360deg); } }
@keyframes sb-schweben { 50% { transform: translateY(-5px); } }
@keyframes sb-auftritt {
  from { transform: scale(.55) rotate(-25deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes sb-wenden {
  0% { transform: scaleX(1); } 50% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

@media (max-width: 40rem) {
  .sb-blasen { grid-template-columns: 1fr; gap: 1.1rem; }
  .sb-pfeil { margin-top: 1.6rem; }
  .sb-schild { font-size: .68rem; letter-spacing: .1em; }
  .sb-blase { width: 4.6rem; font-size: .8rem; }
  .sb-blase .sb-bild { width: 3rem; height: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-ring, .sb-kreis .sb-bild, .sb-kreis.sb-neu .sb-bild, .sb-pfeil-lauf,
  .sb-pfeil-spitze, .sb-pfeil.sb-dreht svg { animation: none; }
  .sb-blase, .sb-blase .sb-bild { transition: none; }
}

/* Der Hinweis in der Sprache des Browsers. */
.paarwahl-hinweis {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  margin: 0 0 1rem; padding: .7rem .8rem .7rem 1rem;
  border: 1px solid var(--linie); border-left: 4px solid var(--marke);
  border-radius: .6rem; background: var(--karte);
}
.paarwahl-hinweis[hidden] { display: none; }
.paarwahl-hinweis-oben {
  max-width: var(--breite); margin: 1rem auto 0;
  width: calc(100% - 2.2rem);
}
.paarwahl-hinweis-text { flex: 1 1 14rem; color: var(--ink); }
.paarwahl-hinweis-los {
  font-weight: 600; color: var(--marke-ink); text-decoration: none;
  padding: .35rem .8rem; border-radius: .5rem;
  border: 1px solid var(--marke);
}
.paarwahl-hinweis-los:hover, .paarwahl-hinweis-los:focus-visible {
  background: var(--marke-weich);
}
.paarwahl-hinweis-zu {
  border: 0; background: none; color: var(--ink-2); font-size: 1.3rem;
  line-height: 1; cursor: pointer; padding: .2rem .4rem;
}
/* Auf dem Telefon eine schmale Zeile statt eines Kastens: Er stand ueber der
   Ueberschrift und nahm den halben ersten Bildschirm. Der Knopf sagt allein,
   worum es geht („Continue in English"), der Satz davor ist dort doppelt. */
@media (max-width: 40rem) {
  .paarwahl-hinweis-oben { flex-wrap: nowrap; gap: .5rem; padding: .3rem .4rem .3rem .7rem;
    margin-top: .5rem; border-left-width: 3px; }
  .paarwahl-hinweis-oben .paarwahl-hinweis-text { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .paarwahl-hinweis-oben .paarwahl-hinweis-los { flex: 1 1 auto; text-align: center;
    padding: .3rem .6rem; font-size: .9rem; min-height: 24px; }
  .paarwahl-hinweis-oben .paarwahl-hinweis-zu { min-width: 32px; min-height: 32px; }
}
.paarwahl-stand {
  flex: 1 1 100%; margin: 0; color: var(--akzent-ink);
  font-size: .95rem; line-height: 1.6;
}
.paarwahl-stand:empty { display: none; }

.sprachwahl[hidden] { display: none; }
.sprachwahl {
  display: grid; gap: 1rem; margin-bottom: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}
.sprachkarte {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 1.5rem 1.4rem;
  box-shadow: var(--schatten-1); max-width: 30rem;
  transition: transform .14s, box-shadow .2s, border-color .2s;
}
.sprachkarte:hover {
  transform: translateY(-2px); box-shadow: var(--schatten-2);
  border-color: var(--marke); color: var(--ink);
}
/* Ein Sprachpaar, das es noch nicht gibt. Es steht in der Auswahl, damit
   sie vollstaendig ist, und es ist kein Verweis, weil es nirgendwohin
   fuehrt — deshalb ein <span> und keine Umrandung, die zum Klicken
   einlaedt. Der gestrichelte Rand sagt dasselbe wie der Text darunter,
   nur schneller. */
.sprachkarte-bald {
  border-style: dashed; box-shadow: none; cursor: default;
  color: var(--ink-3);
}
.sprachkarte-bald:hover {
  transform: none; box-shadow: none; border-color: var(--linie);
}
.sprachkarte-name {
  display: block; font-family: var(--schrift-titel);
  font-size: 1.5rem; line-height: 1.2; margin-bottom: .45rem;
}
.sprachkarte-kurz {
  display: block; color: var(--ink-2); font-size: .95rem; line-height: 1.55;
}
.sprachkarte-mehr {
  display: block; margin-top: .8rem; font-weight: 600;
  color: var(--marke-ink); font-size: .95rem;
}
/* Das Wahrzeichen der Lernsprache, oben rechts in der Karte: rein
   schmueckend, mit fester Groesse im Tag, damit nichts springt. */
.sprachkarte-bild {
  float: right; width: 3.6rem; height: 3.6rem; margin: -.55rem -.35rem .4rem .7rem;
  object-fit: contain;
}

/* --- 6. Stufen und Grammatik --------------------------------------------- */

.seitenkopf { padding: 2.4rem 0 1.4rem; }
.seitenkopf .zeile-still { margin-bottom: .4rem; }

.brotkrumen {
  font-size: .87rem; color: var(--ink-3); margin-bottom: .9rem;
  overflow-wrap: anywhere;
}
/* Sechzehn Pixel hoch war die Krume genau so hoch wie ihre Schrift. Auf
   dem Telefon ist das der erste Verweis, den jemand sucht, wenn er sich
   verlaufen hat — und der schwerste zu treffen. */
.brotkrumen a {
  color: var(--ink-3); text-decoration: none;
  display: inline-block; padding: .45rem 0;
}
.brotkrumen a:hover { color: var(--marke-ink); text-decoration: underline; }
.brotkrumen span { margin: 0 .35rem; opacity: .5; }

.bereich-block { margin-bottom: 2.6rem; }
.bereich-kopf {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  border-bottom: 2px solid var(--linie); padding-bottom: .5rem; margin-bottom: 1rem;
}
.bereich-kopf h2 { margin: 0; }

.themenliste { display: grid; gap: .55rem; }
.thema-zeile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem;
  align-items: center;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: .7rem .95rem;
  text-decoration: none; color: var(--ink);
  transition: border-color .16s, transform .14s, box-shadow .2s;
}
.thema-zeile:hover {
  border-color: var(--linie-kraeftig); transform: translateX(2px);
  box-shadow: var(--schatten-1); color: var(--ink);
}
.thema-name { font-weight: 600; }
.thema-kurz { display: block; color: var(--ink-3); font-size: .9rem; font-weight: 400; }
.thema-stand {
  font-size: .82rem; color: var(--ink-3); white-space: nowrap;
}
.thema-stand[data-fach] { color: var(--marke-ink); font-weight: 600; }

.thema-seite h2 { border-bottom: 1px solid var(--linie); padding-bottom: .35rem; }

/* Eine Themenseite ist ein Dokument, keine Anwendungsoberflaeche. Alles darin
   steht in einer Spalte — auch die Tabellen und die Uebung, sonst zieht sich
   die Formtabelle auf 1280 Pixel auseinander, waehrend der Absatz darueber
   bei 620 endet. */
.dokument { max-width: 48rem; }
.dokument .lesespalte { max-width: var(--lesebreite); }

.formtabelle td:first-child {
  color: var(--ink-3); font-size: .9rem; white-space: nowrap; width: 11rem;
}
.formtabelle td:last-child { font-weight: 500; }

/* --- Die Formtafel als Karte (tools/seiten_bauen.py, formkarte) ----------
   Ueber der Tafel steht, was sie zeigt und wie man sie liest; die Tafel
   selbst traegt je nach Art eine andere Hierarchie. Bei einer Konjugation
   ist links nur der Bezug („ich werde helfen"), die Form ist die Sache.
   Bei einer Regel- oder Lauttafel ist es umgekehrt: Links steht die Lehre,
   rechts das Beispiel — dort ist das Etikett die Hauptschrift. Keine neue
   Farbe: Karte, Linie und die drei Tinten, hell wie dunkel dieselben
   Rollen. */
.formkarte {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund-l); box-shadow: var(--schatten-1);
  overflow: hidden; margin: 2.2rem 0 2rem;
}
.form-kopf {
  padding: 1rem 1.2rem .95rem;
  background: color-mix(in srgb, var(--kat, var(--marke)) 7%, var(--karte));
  border-bottom: 1px solid var(--linie);
}
.form-dach {
  margin: 0 0 .25rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
}
.thema-seite .formkarte h2 {
  margin: 0; padding: 0; border: 0;
  font-size: clamp(1.3rem, 1.12rem + .7vw, 1.6rem);
}
.form-kurz {
  margin: .4rem 0 0; max-width: var(--lesebreite);
  color: var(--ink-2); font-size: 1rem; line-height: 1.55;
}
.formkarte .ff-legende { margin: .7rem 0 0; }
.formkarte .tabelle-rahmen { margin: 0; }
.formkarte .tabelle-rahmen table { min-width: 0; }

/* Die Zeilen. Etikett und Form in eigenen Zellen; der Hoerknopf steht —
   von vorlesen.js eingesetzt — hinter der Form in derselben Zelle. */
.formkarte .formtabelle td { padding: .7rem 1.2rem; vertical-align: middle; }
.formkarte .formtabelle td.ft-etikett {
  width: 42%; white-space: normal;
  color: var(--ink-2); font-size: .95rem; line-height: 1.45;
}
.formkarte .formtabelle td.ft-form {
  font-size: 1.08rem; line-height: 1.45; font-weight: 500;
}
.formkarte .formtabelle td.ft-form .ziel { overflow-wrap: anywhere; }

/* Regel-, Laut- und Mustertafel: Das Etikett ist die Lehre. */
.formkarte .formtabelle[data-art="laut"] td.ft-etikett,
.formkarte .formtabelle[data-art="muster"] td.ft-etikett {
  color: var(--ink); font-weight: 600; font-size: 1rem;
}
.formkarte .formtabelle[data-art="laut"] td.ft-form .ziel,
.formkarte .formtabelle[data-art="muster"] td.ft-form .ziel {
  color: var(--ink-2); font-weight: 400;
}

/* Die Konjugation: Personen oben, die erste Sonderzeile (Kurzform,
   Verneinung, Frage) mit einer kraeftigeren Linie abgesetzt. */
.formkarte .formtabelle tr.ft-neu td { border-top: 2px solid var(--linie-kraeftig); }

/* Zwei Verben oder zwei Zeiten in einer Tafel (`_form_gruppen` in
   tools/seiten_bauen.py): je Reihe ein eigenes <tbody>. Die Nummern
   beginnen dort neu (der Zaehler steht am tbody), und zwischen zwei Reihen
   liegt ein deutlicher Absatz — „1 ich habe“ gehoert sichtbar zu einer
   anderen Reihe als „6 sie sind“. Die Ueberschrift, wo es eine gibt, nennt
   das Wort. */
.formkarte .formtabelle tbody.ft-gruppe + tbody.ft-gruppe > tr:first-child > * {
  border-top: 3px solid var(--linie-kraeftig);
}
.formkarte .formtabelle tbody.ft-gruppe + tbody.ft-gruppe::before {
  content: ""; display: table-row; height: .6rem;
}
.formkarte .formtabelle tr.ft-gruppe-kopf > th {
  padding: .55rem 1.2rem; text-align: left;
  background: var(--marke-weich); color: var(--marke-ink);
  font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none;
}
.formkarte .formtabelle tr.ft-gruppe-kopf .ziel { color: inherit; }

/* Lange Tafeln: Nummern und ein ruhiger Wechsel der Zeilen, damit man in
   zwanzig gleichfoermigen Zeilen die Stelle wiederfindet. */
.formkarte .formtabelle[data-zeilen="viele"] tbody { counter-reset: ft-zeile; }
.formkarte .formtabelle[data-zeilen="viele"] tbody tr:not(.ft-gruppe-kopf) { counter-increment: ft-zeile; }
.formkarte .formtabelle[data-zeilen="viele"] tbody tr:nth-child(even) { background: var(--karte-2); }
.formkarte .formtabelle[data-zeilen="viele"] td.ft-etikett::before {
  content: counter(ft-zeile);
  display: inline-grid; place-items: center; vertical-align: .05em;
  min-width: 1.45rem; height: 1.45rem; margin-right: .55rem; padding: 0 .3rem;
  border: 1px solid var(--linie); border-radius: var(--rund-voll);
  background: var(--karte); color: var(--ink-3);
  font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Der Hoerknopf einer Zeile: eine sichtbare Flaeche wie am Satzpaar. */
:root[data-vorlesbar="ja"] .formkarte .ft-form .vorlesen {
  width: 2.25rem; height: 2.25rem; margin: -.2rem 0 -.2rem .5rem;
  border-color: var(--linie); background: var(--karte); color: var(--marke-ink);
}
@media (pointer: coarse) {
  :root[data-vorlesbar="ja"] .formkarte .ft-form .vorlesen { width: 2.75rem; height: 2.75rem; }
}

/* Buchstaben und Zeichen: ein Raster aus Kacheln statt einer Liste. */
.formraster { display: grid; gap: 1.15rem; padding: 1rem 1.2rem 1.2rem; }
.formraster-gruppe { min-width: 0; }
.thema-seite .formraster-kopf {
  margin: 0 0 .5rem; font-family: var(--schrift); font-size: .95rem;
  font-weight: 600; line-height: 1.4; color: var(--ink-2);
}
.formraster-kacheln {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem;
  /* auto-fill, nicht auto-fit: gleich breite Kacheln auch in einer
     Gruppe mit nur einem Buchstaben. */
  grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr));
}
.formkachel {
  position: relative; min-height: 2.75rem;
  display: grid; justify-items: center; align-content: start; gap: .12rem;
  padding: .6rem .35rem .65rem; text-align: center;
  background: var(--karte-2); border: 1px solid var(--linie);
  border-radius: var(--rund-s);
  transition: border-color .15s, background .15s;
}
.fk-zeichen {
  font-family: var(--schrift-titel); font-size: 1.75rem; line-height: 1.15;
  font-weight: 600; color: var(--ink);
}
.fk-zeichen .ziel { font-weight: 600; }
.fk-name { font-size: .98rem; line-height: 1.3; color: var(--ink); white-space: nowrap; }
.fk-umschrift { font-size: .88rem; line-height: 1.3; color: var(--ink-2); }
.fk-laut { font-size: .8rem; line-height: 1.3; color: var(--ink-3); }
/* Der Knopf deckt die ganze Kachel: Wer einen Buchstaben hoeren will,
   tippt auf den Buchstaben, nicht auf ein Symbol in der Ecke. Das Symbol
   bleibt oben rechts sichtbar; die Flaeche selbst bleibt durchsichtig,
   damit nichts den Text verdeckt. */
:root[data-vorlesbar="ja"] .formkachel .vorlesen {
  position: absolute; inset: 0; width: auto; height: auto; margin: 0;
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: .3rem; border-radius: inherit;
  background: transparent; color: var(--ink-3);
}
:root[data-vorlesbar="ja"] .formkachel .vorlesen:hover,
:root[data-vorlesbar="ja"] .formkachel .vorlesen:focus-visible,
:root[data-vorlesbar="ja"] .formkachel .vorlesen[data-spricht] {
  background: transparent; color: var(--marke-ink);
}
.formkachel:has(.vorlesen:hover),
.formkachel:has(.vorlesen[data-spricht]) {
  border-color: var(--marke); background: var(--karte);
}
.formkachel .vorlesen:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }
.formkachel .vorlesen svg { width: 14px; height: 14px; }
/* Kana, Hangul, Devanagari: fuenf je Reihe, wie die Tafel sie lehrt —
   ka ki ku ke ko stehen untereinander dort, wo ga gi gu ge go stehen. */
.formkarte[data-art="zeichen"] .formraster-kacheln {
  grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 32rem;
}
/* Zeilen, die keine Gruppe aufgenommen hat, stehen darunter als Tafel. */
.formraster + .tabelle-rahmen { border-top: 1px solid var(--linie); }

@media (max-width: 640px) {
  .form-kopf { padding: .9rem 1rem .85rem; }
  .formkarte .formtabelle tr {
    display: block; padding: .65rem 1rem; border-bottom: 1px solid var(--linie);
  }
  .formkarte .formtabelle tbody tr:last-child { border-bottom: 0; }
  .formkarte .formtabelle tr.ft-neu { border-top: 2px solid var(--linie-kraeftig); }
  .formkarte .formtabelle tr.ft-neu td { border-top: 0; }
  .formkarte .formtabelle tbody.ft-gruppe { display: block; }
  .formkarte .formtabelle tbody.ft-gruppe + tbody.ft-gruppe {
    margin-top: .7rem; border-top: 3px solid var(--linie-kraeftig);
  }
  .formkarte .formtabelle tbody.ft-gruppe + tbody.ft-gruppe::before { content: none; }
  .formkarte .formtabelle tbody.ft-gruppe + tbody.ft-gruppe > tr:first-child > * { border-top: 0; }
  .formkarte .formtabelle tr.ft-gruppe-kopf { padding: 0; }
  .formkarte .formtabelle tr.ft-gruppe-kopf > th { display: block; padding: .55rem 1rem; }
  .formkarte .formtabelle td,
  .formkarte .formtabelle td.ft-etikett { display: block; width: auto; padding: 0; border: 0; }
  .formkarte .formtabelle td.ft-etikett { margin-bottom: .2rem; }
  /* Form und Hoerknopf in einer Zeile, der Knopf rechts. */
  .formkarte .formtabelle td.ft-form {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; column-gap: .5rem; font-size: 1.1rem;
  }
  :root[data-vorlesbar="ja"] .formkarte .ft-form .vorlesen { margin: 0; }
  .formraster { padding: .9rem 1rem 1rem; }
  .formraster-kacheln { grid-template-columns: repeat(auto-fill, minmax(4.1rem, 1fr)); gap: .4rem; }
  .fk-zeichen { font-size: 1.6rem; }
  .fk-name { font-size: .9rem; }
  .formkarte[data-art="zeichen"] .formraster-kacheln { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* Fuenf Kacheln nebeneinander sind schmal: das Symbol kleiner, damit es
     nicht in das Zeichen hineinragt. Getippt wird ohnehin die ganze Kachel. */
  :root[data-vorlesbar="ja"] .formkarte[data-art="zeichen"] .formkachel .vorlesen { padding: .15rem; }
  .formkarte[data-art="zeichen"] .formkachel .vorlesen svg { width: 11px; height: 11px; }
  .formkarte[data-art="zeichen"] .formkachel { padding-top: .75rem; }
}
@media print {
  .formkarte { box-shadow: none; }
  .formkachel { break-inside: avoid; }
}

.regelliste { display: grid; gap: 1rem; margin: 1.2rem 0; padding: 0; list-style: none; }
.regel {
  border-left: 3px solid var(--marke); padding-left: 1rem;
}
.regel-text { margin-bottom: .4rem; }

.merksatz {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--marke-weich); border-radius: var(--rund);
  padding: 1rem 1.2rem; margin: 1.6rem 0;
  font-family: var(--schrift-titel); font-size: 1.12rem; line-height: 1.45;
}
.merksatz svg { width: 22px; height: 22px; flex: none; color: var(--marke-ink); margin-top: .15rem; }

/* --- Themenseite: Auf einen Blick und Training -----------------------------
   Die Kategoriefarbe des Themas (`data-kat` am <article>) ist dieselbe wie
   auf dem Lernpfad. `--kat` faerbt Flaechen, Ringe und Punkte; als Schrift
   steht sie nie pur, sondern als `--kat-ink`, die fuer beide Fassungen
   nachgerechnete Tinte derselben Kategorie. Gruen und Rot bleiben der Rueckmeldung vorbehalten. */
.thema-seite { --kat: var(--marke); --kat-hell: var(--marke-weich); --kat-ink: var(--marke-ink); }

.spick-zeilen { margin: 0; }
.spick-zeile {
  display: grid; grid-template-columns: 7.2rem minmax(0, 1fr);
  gap: .3rem 1rem; padding: .8rem 1.15rem; border-top: 1px solid var(--linie);
}
.spick-zeile:first-child { border-top: 0; }
.spick-zeile dt {
  font-size: .78rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); padding-top: .25rem;
}
.spick-zeile dd { margin: 0; min-width: 0; }
/* Devanagari hat keine Grossbuchstaben und wird klein schnell unleserlich. */
:lang(hi) .spick-zeile dt { font-size: .84rem; letter-spacing: 0; text-transform: none; }
.spick-zeile .ziel { font-weight: 600; }
.spick-signale { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.spick-signale li {
  font-size: .86rem; font-weight: 600; padding: .12rem .65rem;
  border-radius: var(--rund-voll); color: var(--kat-ink);
  background: color-mix(in srgb, var(--kat) 12%, var(--karte));
}
/* Schrift fest nach Kategorie: Die Kategorieflaechen sind hell und tragen
   `--kat-auf` (tiefes Marineblau) in beiden Fassungen; ohne Kategorie
   bleibt es Weiss auf `--marke`. `--knopf-ink` passt nicht, weil das dunkle
   Thema es auf dunkel stellt, passend zu seinem hellen `--marke`. */
.thema-seite .training .knopf:not(.knopf-zweit),
.thema-seite .training .knopf:not(.knopf-zweit):hover {
  background: var(--kat); color: var(--kat-auf, #fff);
}

/* Wo auf der Zeit: sechs Stationen, die eigene hervorgehoben. */
.zband { margin: 0; }
.zband-achse {
  list-style: none; margin: .15rem 0 .55rem; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
}
.zband-achse::before {
  content: ''; position: absolute; left: 8.3%; right: 8.3%; top: 8px;
  height: 2px; background: var(--linie-kraeftig);
}
.zband-achse li {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: .3rem; text-align: center; font-size: .72rem; line-height: 1.2;
  color: var(--ink-3); -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere;
}
.zband-achse i {
  width: 12px; height: 12px; margin-top: 3px; border-radius: 50%;
  background: var(--karte); border: 2px solid var(--linie-kraeftig);
}
.zband-achse .an i {
  width: 18px; height: 18px; margin-top: 0;
  background: var(--kat); border-color: var(--kat);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kat) 22%, transparent);
}
.zband-achse .an span { color: var(--kat-ink); font-weight: 700; }
.zband-satz { margin: 0; font-size: .93rem; color: var(--ink-2); }
.zband-satz b { color: var(--kat-ink); }

/* Training: Tagesziel, die drei Schritte, der Rat und der Schluss. */
.training { margin-top: 1rem; }
.training .uebung-karte { border-top: 4px solid var(--kat); }
.tr-ziel { display: flex; align-items: center; gap: .8rem; margin: 0 0 .9rem; }
.tr-ziel p { margin: 0; }
.tr-ring { width: 46px; height: 46px; flex: none; }
.tr-ring-grund { fill: none; stroke: var(--linie); stroke-width: 6; }
.tr-ring-wert { fill: none; stroke: var(--ok); stroke-width: 6; stroke-linecap: round; }
.tr-schritte { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.tr-schritte li {
  display: flex; align-items: center; gap: .45rem;
  padding: .32rem .8rem .32rem .35rem; border-radius: var(--rund-voll);
  background: var(--bg-tief); font-size: .9rem; font-weight: 600;
}
.tr-nr {
  width: 1.55rem; height: 1.55rem; border-radius: 50%; display: grid;
  place-items: center; background: var(--kat); color: var(--kat-auf, #fff); font-size: .8rem;
}
.tr-zahl { color: var(--ink-3); font-weight: 500; }
.tr-zahl::before { content: '· '; }
.tr-tipp, .tr-faellig, .tr-wieder {
  font-size: .94rem; color: var(--ink-2); border-radius: var(--rund);
  padding: .65rem .85rem; margin: 0 0 1rem;
  background: color-mix(in srgb, var(--kat) 8%, var(--karte));
}
.tr-faellig { font-weight: 600; color: var(--kat-ink); }
.tr-schluss { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.tr-schluss .hero-knoepfe { margin: 0; }
.training .ts-stand { margin-top: 1rem; }

/* --- Themenseite: Verstehen → Kurz pruefen → Ueben → Geschafft -----------
   Vier Flaechen, und jede hat ihre Rolle schon im Farbsystem: Verstehen in
   der Marke (`--marke-weich`, Rand `--marke`), die Falle im Akzent, der
   Abschluss in Gruen — der Farbe, die hier immer „geschafft" heisst.
   Keine neue Farbe, also hell wie dunkel dieselben Rollen. */
.sprungleiste { margin: .4rem 0 1.2rem; }
.sprungleiste ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.sprungleiste li { display: flex; align-items: center; gap: .4rem; }
.sprungleiste li + li::before { content: '›'; color: var(--ink-3); }
.sprungleiste a {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: .2rem .8rem; border-radius: var(--rund-voll);
  border: 1px solid var(--linie); background: var(--karte);
  color: var(--ink-2); font-size: .92rem; font-weight: 600; text-decoration: none;
}
.sprungleiste a:hover { border-color: var(--marke); color: var(--marke-ink); }
.sprungleiste a:focus-visible { outline: none; box-shadow: var(--ring); }

.kennst {
  margin: 0 0 1.6rem; padding: .9rem 1.1rem 1rem;
  border: 1px solid var(--linie); border-radius: var(--rund); background: var(--karte);
}
.kennst[hidden] { display: none; }
.kennst-frage { margin: 0 0 .6rem; font-weight: 700; }
.kennst-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }
.kennst-knopf {
  min-height: 44px; padding: .45rem 1rem; border-radius: var(--rund-voll);
  border: 1px solid var(--linie-kraeftig); background: var(--karte);
  color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
}
.kennst-knopf:hover { border-color: var(--marke); }
.kennst-knopf:focus-visible { outline: none; box-shadow: var(--ring); }
.kennst-knopf[aria-pressed="true"] {
  background: var(--marke-weich); border-color: var(--marke); color: var(--marke-ink);
}
/* Fliesstext, kein Kleingedrucktes: Mit .9rem war die Erklaerung kleiner
   als der Text drumherum, und am Desktop lief sie auf 76 Zeichen. */
.kennst-erklaerung { margin: .6rem 0 0; font-size: 1rem; color: var(--ink-2);
  max-width: var(--lesebreite); }
.kennst-hinweis { margin: .5rem 0 0; font-size: .88rem; color: var(--ink-2); }
.kennst-hinweis:empty { display: none; }
.kennst-probe { margin-top: .9rem; display: grid; gap: .8rem; }
.kennst-probe[hidden] { display: none; }
.kennst-ergebnis {
  padding: .8rem .95rem; border-radius: var(--rund);
  border: 1px solid var(--linie); background: var(--karte);
}
.kennst-ergebnis[data-stand="richtig"] { background: var(--ok-weich); border-color: var(--ok); }
.kennst-ergebnis[data-stand="falsch"] { background: var(--akzent-weich); border-color: var(--akzent); }
.kennst-ergebnis p { margin: 0; }
.kennst-ergebnis .hero-knoepfe { margin: .7rem 0 0; }

.verstehen {
  margin: 0 0 2rem; padding: 1.1rem 1.2rem 1.3rem;
  background: var(--marke-weich); border: 1px solid var(--marke);
  border-left-width: 4px; border-radius: var(--rund-l);
}
.thema-seite .verstehen > h2 { margin-top: 0; border-bottom-color: var(--marke); }
.verstehen h3 { margin-top: 1.6em; }
.verstehen-merksatz {
  margin: .6rem 0 1rem; font-family: var(--schrift-titel);
  font-size: clamp(1.2rem, 1.08rem + .6vw, 1.45rem); line-height: 1.4;
}
.vm-etikett {
  display: block; margin-bottom: .2rem; font-family: var(--schrift);
  font-size: .82rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--marke-ink);
}
:lang(hi) .vm-etikett { font-size: .88rem; letter-spacing: 0; text-transform: none; }
.vm-satz { display: block; color: var(--ink); }
.verstehen-info {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund); margin: 0 0 1rem;
}
.verstehen .formkarte { margin: 1.2rem 0 0; }
.thema-seite .formkarte h3 {
  margin: 0; padding: 0; border: 0;
  font-size: clamp(1.2rem, 1.08rem + .5vw, 1.4rem);
}
.verstehen .regel { background: var(--karte); border-radius: 0 var(--rund) var(--rund) 0;
  padding: .7rem 1rem; }
.verstehen .kasten-falle { border: 1px solid var(--akzent); border-left-width: 4px; }

.kurzpruefen { margin: 0 0 1.4rem; }
.kp-fragen { display: grid; gap: .9rem; margin-top: .8rem; }
.kp-fragen[hidden] { display: none; }
.kp-karte {
  padding: .9rem 1.05rem 1rem; border-radius: var(--rund);
  background: var(--karte); border: 1px solid var(--linie);
  border-left: 4px solid var(--kat);
}
.kp-kopf {
  margin: 0 0 .45rem; font-size: .8rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
}
:lang(hi) .kp-kopf, :lang(ja) .kp-kopf, :lang(zh) .kp-kopf, :lang(ko) .kp-kopf {
  letter-spacing: 0; text-transform: none;
}
.kp-karte .uebung-frage { margin-bottom: .8rem; }
.kp-karte .wahlliste { margin-bottom: .6rem; }
.kp-antwort { margin: 0; font-weight: 600; }
.kp-antwort:empty { display: none; }
.kp-antwort[data-stand="richtig"] { color: var(--ok-ink); }
.kp-antwort[data-stand="falsch"] { color: var(--ink); }
.kp-fertig {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  padding: .8rem 1rem; border-radius: var(--rund); background: var(--ok-weich);
}
.kp-fertig p { margin: 0; }

/* Ein Wort mit Bedeutung: eine gepunktete Linie darunter, die sagt
   „hier steht etwas", ohne den Satz zu faerben — die Farbe gehoert der
   Rueckmeldung. */
.tg {
  cursor: help; border-radius: 2px;
  text-decoration: underline dotted var(--linie-kraeftig);
  text-underline-offset: .22em; text-decoration-thickness: 1.5px;
}
.tg:hover, .tg[aria-expanded="true"] {
  background: var(--marke-weich); text-decoration-color: var(--marke);
}
.tg:focus-visible { outline: none; box-shadow: var(--ring); }
.tg-karte {
  position: absolute; z-index: 60; max-width: min(22rem, calc(100vw - 16px));
  padding: .5rem .75rem; border-radius: var(--rund);
  background: var(--karte); color: var(--ink);
  border: 1px solid var(--marke); box-shadow: var(--schatten-2);
  font-size: .95rem; line-height: 1.4;
}
.tg-karte[hidden] { display: none; }
.tg-zeile { margin: 0; }
.tg-zeile + .tg-zeile { margin-top: .3rem; padding-top: .3rem; border-top: 1px solid var(--linie); }
.tg-zeile b { margin-right: .4rem; }
.tg-bedeutung { color: var(--ink-2); }

.vertiefung-block { margin-top: 2.4rem; }

@media (max-width: 560px) {
  .spick-zeile { grid-template-columns: minmax(0, 1fr); gap: .25rem; padding: .75rem .95rem; }
  .spick-zeile dt { padding-top: 0; }
  /* Sechs Namen passen nicht nebeneinander, und seit sie Fachbegriffe sind
     („Vorvergangenheit", „Vollendete Zukunft") auch der eigene nicht mehr:
     Am Rand lief er aus dem Bild. Er steht fett im Satz darunter. */
  .zband-achse li span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  /* Die Formtabelle untereinander statt nebeneinander: Auf dem Telefon lief
     die rechte Spalte aus dem Bild und war nur seitlich zu schieben. */
  .tabelle-rahmen table.formtabelle { min-width: 0; }
  .formtabelle tr { display: block; padding: .55rem 0; border-bottom: 1px solid var(--linie); }
  .formtabelle tbody tr:last-child { border-bottom: 0; }
  .formtabelle td { display: block; border: 0; padding: .1rem .2rem; }
  .formtabelle td:first-child { width: auto; white-space: normal; font-size: .84rem; }
}

.verwandt-liste { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; margin: .8rem 0 0; }
.verwandt-liste a {
  display: inline-block; background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund-voll); padding: .35rem .85rem;
  font-size: .9rem; text-decoration: none; color: var(--ink-2);
}
.verwandt-liste a:hover { border-color: var(--marke); color: var(--marke-ink); }

/* --- Die Grammatik auf einen Blick: fuenf Familien ----------------------- */
/* Karten und keine Tabelle, und der Grund ist nicht der Geschmack: Eine
   Tabelle mit fuenf Zeilen und wechselnd vielen Bereichen je Zeile hat auf
   einem Telefon keine Breite, in der sie noch eine Tabelle waere. Karten
   stapeln sich, ohne dass jemand etwas dafuer tun muss — und dieselbe
   Gliederung traegt spaeter in einer App, wo es gar kein HTML mehr gibt.

   `auto-fit` mit `minmax(min(…, 100%), 1fr)`: die Karten teilen sich die
   Breite, die da ist, und werden auf einem schmalen Schirm einspaltig,
   ohne dass eine Medienabfrage das anordnen muesste. Das `min(…, 100%)`
   ist der Teil, der es auf 320px rettet — ohne ihn erzwingt die Mindest-
   breite einen waagerechten Scrollbalken. */
.gfam-raster {
  display: grid; gap: 1rem; margin: 1.4rem 0 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}
.gfam {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 1.1rem 1.2rem;
  box-shadow: var(--schatten-1);
  display: flex; flex-direction: column; gap: .5rem;
}
.gfam-kopf {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .4rem;
}
/* Die Ueberschrift traegt hier kein Gewicht einer Seitenueberschrift: Sie
   benennt eine Karte, nicht einen Abschnitt. Die Stufe darf sie nicht
   ueberragen — sonst liest man fuenfmal „Zeiten" und danach erst, was auf
   der Seite steht. */
.gfam-kopf h2 {
  font-size: 1.15rem; margin: 0;
  display: inline-flex; align-items: center; gap: .5rem;
}
/* Das Symbol traegt die Farbe der Marke und nicht die der Schrift: Es soll
   die Ueberschrift begleiten und nicht mit ihr um Gewicht streiten. */
.gfam-zeichen {
  display: inline-flex; color: var(--marke-ink); flex: none;
}
.gfam-zeichen svg { width: 21px; height: 21px; display: block; }
.gfam-kurz { color: var(--ink-2); font-size: .93rem; margin: 0; }
/* Die Bereiche einer Familie stehen untereinander, ihre Themen darunter.
   Vorher waren es Chips in einer Zeile — kompakt, aber sie sagten nur,
   wie viele Themen es gibt, und nicht welche. Wer eine Uebersicht
   aufschlaegt, sucht ein bestimmtes Thema. */
.gfam-bereiche {
  display: grid; gap: .9rem; margin: .8rem 0 0;
}
/* `align-items: center` und nicht `baseline`, seit der Verweis eine Höhe
   hat: Ein Ziel, das man mit dem Daumen treffen soll, muss zweiunddreißig
   Pixel hoch sein — `layout` besteht darauf, und es hatte recht: Ein
   nackter Textverweis ist achtzehn. */
.gfam-bereich-kopf {
  display: flex; align-items: center; gap: .45rem;
  margin: 0 0 .35rem; font-size: .93rem; font-weight: 700;
  letter-spacing: .02em; color: var(--ink-2);
}
.gfam-bereich-kopf a {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 32px;
}
.gfam-bereich-kopf a:hover { color: var(--marke-ink); }
/* Die Zahl in einer eigenen Ziffernbreite, damit die Koepfe untereinander
   nicht zappeln, wenn aus 5 eine 12 wird. */
.gfam-zahl {
  font-variant-numeric: tabular-nums; font-weight: 600;
  font-size: .8rem; color: var(--ink-3);
}
.gfam-themen {
  display: flex; flex-wrap: wrap; gap: .3rem;
  list-style: none; padding: 0; margin: 0;
}
.gfam-themen a {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 32px;
  background: var(--karte-2); border: 1px solid var(--linie);
  border-radius: var(--rund-voll); padding: .3rem .7rem;
  font-size: .85rem; text-decoration: none; color: var(--ink-2);
  transition: border-color .15s, color .15s, background .15s;
}
.gfam-themen a:hover, .gfam-themen a:focus-visible {
  border-color: var(--marke); color: var(--marke-ink);
}
/* Die Stufe steht als Beiwerk am Thema und nicht als zweiter Titel. */
.gfam-stufe {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-3);
}
/* Die Zahl ist die eigentliche Auskunft der Marke — sie sagt, ob hinter
   dem Namen drei Themen stehen oder fuenfzehn. Sie steht deshalb da und
   nicht im Titel, wo sie jede Zeile laenger machen wuerde. */
.gfam-bereiche a span {
  font-variant-numeric: tabular-nums; color: var(--ink-3);
  font-size: .82rem;
}

/* Die Familie ueber ihren Bereichen — dieselbe Ordnung wie in der
   Uebersicht, sonst waeren es zwei. Ein Strich statt einer Karte: Auf
   dieser Seite ist schon jeder Bereich ein Block und jedes Thema eine
   Zeile; eine dritte Umrandung darum haette die Seite in Kaesten
   verpackt, in denen man nichts mehr findet. */
.gfam-gruppe { margin: 0 0 3.2rem; }
.gfam-titel {
  font-size: 1.6rem; margin: 0 0 1.2rem;
  padding-bottom: .3rem;
  border-bottom: 3px solid var(--marke);
  display: inline-block;
}
.bereich-kopf h3 { margin: 0; font-size: 1.2rem; }

.stufe-kopf {
  border-radius: var(--rund-l); padding: 2rem 1.6rem;
  background: color-mix(in srgb, var(--stufe-farbe) 12%, var(--karte));
  border: 1px solid color-mix(in srgb, var(--stufe-farbe) 26%, transparent);
  margin-bottom: 2rem;
}
.stufe-kopf h1 { margin-bottom: .3rem; }
.stufe-kopf .stufe-gross {
  font-family: var(--schrift-titel); font-size: 3rem; line-height: 1;
  color: var(--stufe-ink); font-weight: 600;
}

/* Vertiefung — der aufklappbare Teil eines Grammatikpunkts.

   Eine Erklaerung, die alles auf einmal zeigt, wird nicht gelesen; eine, die
   alles wegklappt, wird nicht gefunden. Deshalb steht die Kurzfassung offen
   und die Vertiefung dahinter, mit einer Zusammenfassung, die sagt, was
   drinsteht — und mit einem Zaehler, damit niemand blind aufklappen muss.

   details/summary statt eines eigenen Schalters: das klappt auch ohne
   JavaScript auf, laesst sich mit der Tastatur bedienen und wird von der
   Browsersuche geoeffnet. Ein selbst gebauter Aufklapper kann keins davon. */

.vertiefung {
  border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--karte-2); margin: 1.1rem 0; overflow: hidden;
}
.vertiefung + .vertiefung { margin-top: .7rem; }
.vertiefung > summary {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1.1rem; cursor: pointer; list-style: none;
  font-family: var(--schrift-titel); font-weight: 600; color: var(--ink);
  min-height: 2.75rem;
}
.vertiefung > summary::-webkit-details-marker { display: none; }
.vertiefung > summary::after {
  content: ''; margin-left: auto; flex: none;
  width: .5rem; height: .5rem; border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3); transform: rotate(45deg);
  transition: transform .18s ease;
}
.vertiefung[open] > summary::after { transform: rotate(-135deg); }
.vertiefung > summary:hover { background: var(--bg-tief); }
.vertiefung > summary:focus-visible {
  outline: 2px solid var(--marke); outline-offset: -2px;
}
.vertiefung .v-zahl {
  font-family: var(--schrift); font-weight: 500; font-size: .82rem;
  color: var(--ink-3); background: var(--bg-tief);
  border-radius: var(--rund-voll); padding: .12rem .55rem;
}
.vertiefung > .v-inhalt { padding: 0 1.1rem 1.1rem; }
.vertiefung > .v-inhalt > p { max-width: var(--lesebreite); }
.vertiefung > .v-inhalt > :first-child { margin-top: 0; }

/* Deutsch daneben gelegt — zwei Spalten, auf dem Handy zwei Zeilen. */
.gegenueber { display: grid; gap: .7rem; margin: .2rem 0 0; padding: 0; list-style: none; }
.gg-paar {
  display: grid; grid-template-columns: 1fr 1fr; gap: .1rem 1rem;
  border-left: 3px solid var(--akzent); padding-left: .9rem;
}
.gg-paar > .gg-de, .gg-paar > .gg-en { align-self: end; }
.gg-paar > .gg-de { color: var(--ink-2); }
.gg-paar > .gg-en { font-weight: 500; }
.gg-paar > .gg-was {
  grid-column: 1 / -1; font-size: .88rem; color: var(--ink-3); margin-top: .3rem;
}
@media (max-width: 640px) {
  .gg-paar { grid-template-columns: 1fr; }
}

/* Sonderfaelle — je einer ein kleiner Block mit Titel, Satz und Beispiel. */
.sonderfaelle { display: grid; gap: 1rem; margin: .2rem 0 0; padding: 0; list-style: none; }
.sonderfall > h3 {
  font-size: 1rem; margin: 0 0 .3rem; color: var(--akzent-ink);
}
.sonderfall > p { max-width: var(--lesebreite); margin-bottom: .45rem; }

/* Schaubilder — vier Bildtypen, aus Daten gezeichnet.

   Die Farben stehen hier und nicht im SVG, damit ein Bild in beiden
   Farbfassungen richtig aussieht. Ein SVG mit eingebauten Hexwerten waere
   auf Papier entweder unsichtbar oder ein Loch in der Seite. */

.schaubild-rahmen {
  margin: 1.4rem 0; padding: 1rem 1rem .4rem;
  border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--karte-2);
}
.schaubild { display: block; width: 100%; height: auto; }
.schaubild-rahmen figcaption {
  margin: .6rem .2rem .5rem; font-size: .9rem; color: var(--ink-3);
  max-width: var(--lesebreite);
}

.sb-text  { fill: var(--ink); font-family: var(--schrift); }
.sb-still { fill: var(--ink-3); font-family: var(--schrift); }
.sb-en    { fill: var(--ink); font-family: var(--schrift); }

.sb-achse  { stroke: var(--linie-kraeftig); stroke-width: 1.5; }
.sb-spitze { fill: var(--linie-kraeftig); }
.sb-jetzt  { stroke: var(--akzent); stroke-width: 1.5; stroke-dasharray: 4 4; }
.sb-punkt  { fill: var(--marke); }
.sb-strecke{ fill: var(--marke); opacity: .8; }
.sb-linie  { stroke: var(--linie-kraeftig); stroke-width: 1.5; fill: none; }

.sb-feld    { fill: var(--marke-weich); stroke: none; }
.sb-frage   { fill: var(--akzent-weich); stroke: none; }
.sb-pille   { fill: var(--bg-tief); stroke: none; }
.sb-ausgang { fill: var(--marke-weich); stroke: none; }
.sb-sprosse { fill: var(--marke-weich); stroke: none; }

/* Muno — das Maskottchen.

   Warum ein Murmeltier und warum diese Posen: siehe den Kopf von
   tools/maskottchen.py. Hier steht nur, wie er gemalt wird.

   Die Farben stehen als Token oben und nicht hier, damit Muno auf Papier
   und im Dunkeln derselbe ist. Ein SVG mit eingebauten Hexwerten wäre in
   einer der beiden Fassungen ein brauner Fleck. */

.muno { width: 96px; height: 96px; display: block; flex: none; }

/* Jede Fläche der Figur holt ihre Farbe über eine Marke — nur so wechselt
   Muno mit dem Sprachpaar und bleibt auf Papier wie im Dunkeln lesbar. */
.mu-haut       { fill: var(--mu-haut); }
.mu-haut-hell  { fill: var(--mu-haut-hell); }
.mu-haut-tief  { fill: var(--mu-haut-tief); }
.mu-band       { fill: var(--mu-band); }
.mu-bauch      { fill: var(--mu-bauch); }
.mu-kamm       { fill: var(--mu-kamm); }
.mu-kamm-tief  { fill: var(--mu-kamm-tief); }
.mu-auge       { fill: var(--mu-auge); }
.mu-wange      { fill: var(--mu-wange); }
/* Der Doktorhut. Er wechselt als Einziges an der Figur die Farbe *nicht*
   mit der Sprache: Ein Doktorhut ist dunkel, überall, und ein blauer wäre
   eine Mütze. Die Sprache trägt statt dessen die Quaste, die in
   `--mu-band` gezeichnet ist. */
.mu-hut        { fill: var(--mu-hut); }
.mu-hut-tief   { fill: var(--mu-hut-tief); }
.mu-ast        { fill: var(--mu-ast); }
.mu-ast-tief   { fill: var(--mu-ast-tief); }
.mu-glanz      { fill: var(--mu-glanz); }

/* Und dasselbe noch einmal für die Halte in den Verläufen.

   **Warum eine eigene Klasse und nicht `stop-color="var(--mu-haut)"`:**
   Eine CSS-Eigenschaft in einem *Attribut* wird nicht aufgelöst. Das
   Attribut ist schlicht ungültig, der Halt fällt auf Schwarz zurück, und
   niemand bekommt eine Fehlermeldung — die Figur ist nur plötzlich ein
   Schatten. Es muss eine Regel sein, und dafür braucht der Halt eine
   Klasse. */
.mu-s-haut     { stop-color: var(--mu-haut); }
.mu-s-haut-hell { stop-color: var(--mu-haut-hell); }
.mu-s-haut-tief { stop-color: var(--mu-haut-tief); }
.mu-s-band     { stop-color: var(--mu-band); }
.mu-s-bauch    { stop-color: var(--mu-bauch); }
.mu-s-kamm     { stop-color: var(--mu-kamm); }
.mu-s-kamm-tief { stop-color: var(--mu-kamm-tief); }
.mu-s-auge     { stop-color: var(--mu-auge); }
.mu-s-wange    { stop-color: var(--mu-wange); }
.mu-s-ast      { stop-color: var(--mu-ast); }
.mu-s-ast-tief { stop-color: var(--mu-ast-tief); }

/* Die Striche. Sie brauchen `stroke` statt `fill` und deshalb eigene
   Regeln; die Breite steht am Element, weil sie von Bein zu Bein und von
   Schwanzstück zu Schwanzstück verschieden ist. */
.mu-band      { stroke: var(--mu-band); }
/* Der helle Längsstreifen auf der Flanke — beim Tier trennt er den
   dunklen Rücken vom hellen Bauch. Er nimmt den Bauchton, weil er
   genau dessen Ausläufer ist. */
.mu-flanke    { stroke: var(--mu-bauch); }
/* Die beiden Falten auf dem Augentürmchen. Ein Chamäleon trägt sein Auge
   in einem beschuppten Hautkegel, und die Falten sind das, woran man den
   Kegel als Kegel erkennt statt als Scheibe. */
.mu-falte     { stroke: var(--mu-haut-tief); stroke-width: 1.1;
                fill: none; }
.mu-mund      { stroke: var(--mu-auge); stroke-width: 1.7; fill: none;
                stroke-linecap: round; }
.mu-bein      { stroke: var(--mu-haut-tief); fill: none;
                stroke-linecap: round; stroke-linejoin: round; }
.mu-schwanz-1 { stroke: var(--mu-haut-tief); stroke-width: 8.5; fill: none;
                stroke-linecap: round; }
.mu-schwanz-2 { stroke: var(--mu-haut-tief); stroke-width: 5.5; fill: none;
                stroke-linecap: round; }
.mu-schwanz-3 { stroke: var(--mu-haut-tief); stroke-width: 3; fill: none;
                stroke-linecap: round; }

/* --- und jetzt der eigentliche Trick: die Farbe je Sprache ---

   Am <body> steht ohnehin `data-paar`, seit es Sprachpaare gibt. Muno
   liest es mit und ist auf jeder englischen Seite dunkelblau, auf jeder
   spanischen golden, auf jeder italienischen grün. Es braucht dafür kein
   Skript, keine zweite Zeichnung und keine zweite Datei — nur diese
   sechs Blöcke, weil jede Fläche der Figur ihre Farbe über eine Marke
   bezieht und nicht eingebaut hat.

   Die Werte sind aus den Flaggentönen **gerechnet** und nicht von Hand
   gemischt: `maskottchen.farben()` hellt auf, dunkelt ab, entsättigt und
   sättigt. Aus zwei Tönen werden sieben. Wer einen ändern will, ändert
   ihn dort; `maskottchen` vergleicht beide Seiten und fällt über jede
   Abweichung.

   Der Ast fehlt hier mit Absicht: Ein Ast ist ein Ast. Wechselte er mit
   der Sprache, wäre die Farbe kein Zeichen mehr, sondern Muster.

   Warum die Haut nicht immer der erstgenannte Flaggenton ist, warum
   Spanisch golden und Portugiesisch rot ist: siehe FLAGGENTOENE.

   **Für `ruhe` steht hier mit Absicht kein Block.** Das ist der Wert für
   jede Seite, die keiner Sprache gehört — Startseite, Impressum,
   Fehler- und Offline-Seite —, und er bedeutet genau: nichts
   überschreiben. Es gelten dann die Werte auf `:root`, also das grüne
   Chamäleon mit den goldenen Bändern. Ein Block, der die `:root`-Werte
   noch einmal hinschreibt, wäre eine zweite Fassung derselben Farben und
   damit eine Stelle, an der sie auseinanderlaufen können.

   Die Angabe steht als eigenes `data-mufarbe` am Körper und **nicht** als
   `data-paar`: Jede Seite wird von einem Sprachpaar gebaut, auch die
   ohne Sprache — die deutsche Oberfläche liegt an der Wurzel. Solange
   die Farbe an `data-paar` hing, trug die Startseite ein englisch-blaues
   Chamäleon, und die Ruhefassung kam auf keiner einzigen Seite an. */
[data-mufarbe="ruhe"] {
  --mu-band:       #dd941a;
  --mu-bauch:      #d6e6db;
  --mu-haut:       #25a04b;
  --mu-haut-hell:  #5eb97a;
  --mu-haut-tief:  #1a7034;
  --mu-kamm:       #e7a230;
  --mu-kamm-tief:  #ab7824;
  --mu-wange:      #77895f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) [data-mufarbe="ruhe"] {
    --mu-band:       #eda32b;
    --mu-bauch:      #dfece3;
    --mu-haut:       #31b45c;
    --mu-haut-hell:  #6ac989;
    --mu-haut-tief:  #227e40;
    --mu-kamm:       #f0ae3e;
    --mu-kamm-tief:  #b3822e;
    --mu-wange:      #86976c;
  }
}
:root[data-thema="dunkel"] [data-mufarbe="ruhe"] {
  --mu-band:       #eda32b;
  --mu-bauch:      #dfece3;
  --mu-haut:       #31b45c;
  --mu-haut-hell:  #6ac989;
  --mu-haut-tief:  #227e40;
  --mu-kamm:       #f0ae3e;
  --mu-kamm-tief:  #b3822e;
  --mu-wange:      #86976c;
}
[data-mufarbe="de-en"] {
  --mu-band:       #ee2a4a;
  --mu-bauch:      #f2f2f2;
  --mu-haut:       #012e93;
  --mu-haut-hell:  #4364af;
  --mu-haut-tief:  #01174a;
  --mu-kamm:       #f03d5b;
  --mu-kamm-tief:  #b22d43;
  --mu-wange:      #cccccc;
}
[data-mufarbe="de-es"] {
  --mu-band:       #f32a3e;
  --mu-bauch:      #faf2d5;
  --mu-haut:       #c89a00;
  --mu-haut-hell:  #d6b442;
  --mu-haut-tief:  #8c6c00;
  --mu-kamm:       #f43d50;
  --mu-kamm-tief:  #b52d3b;
  --mu-wange:      #d58533;
}
[data-mufarbe="de-fr"] {
  --mu-band:       #ef4135;
  --mu-bauch:      #f2f2f2;
  --mu-haut:       #0055a4;
  --mu-haut-hell:  #4281bc;
  --mu-haut-tief:  #003a6f;
  --mu-kamm:       #ef4439;
  --mu-kamm-tief:  #b1322a;
  --mu-wange:      #cccccc;
}
[data-mufarbe="de-it"] {
  --mu-band:       #de353d;
  --mu-bauch:      #f2f3ed;
  --mu-haut:       #008c45;
  --mu-haut-hell:  #42aa75;
  --mu-haut-tief:  #006230;
  --mu-kamm:       #e14750;
  --mu-kamm-tief:  #a6353b;
  --mu-wange:      #ccd1ba;
}
[data-mufarbe="de-pt"] {
  --mu-band:       #069d53;
  --mu-bauch:      #ffe900;
  --mu-haut:       #da291c;
  --mu-haut-hell:  #e46157;
  --mu-haut-tief:  #991d14;
  --mu-kamm:       #07b45f;
  --mu-kamm-tief:  #058546;
  --mu-wange:      #f5e000;
}
[data-mufarbe="en-de"] {
  --mu-band:       #686868;
  --mu-bauch:      #ffce00;
  --mu-haut:       #dd0000;
  --mu-haut-hell:  #e64242;
  --mu-haut-tief:  #930000;
  --mu-kamm:       #777777;
  --mu-kamm-tief:  #585858;
  --mu-wange:      #ffce00;
}
[data-mufarbe="en-ja"] {
  --mu-band:       #9c9c9c;
  --mu-bauch:      #e7ccd2;
  --mu-haut:       #bc002d;
  --mu-haut-hell:  #cd4264;
  --mu-haut-tief:  #79001d;
  --mu-kamm:       #a9a9a9;
  --mu-kamm-tief:  #7d7d7d;
  --mu-wange:      #ce2c4d;
}
[data-mufarbe="en-zh"] {
  --mu-band:       #c0a700;
  --mu-bauch:      #f3d9d6;
  --mu-haut:       #f5402b;
  --mu-haut-hell:  #f87262;
  --mu-haut-tief:  #ac2d1e;
  --mu-kamm:       #d2b600;
  --mu-kamm-tief:  #9b8700;
  --mu-wange:      #f0514c;
}
[data-mufarbe="en-ko"] {
  --mu-band:       #d23944;
  --mu-bauch:      #a1caff;
  --mu-haut:       #2c2c2c;
  --mu-haut-hell:  #636363;
  --mu-haut-tief:  #161616;
  --mu-kamm:       #d74b55;
  --mu-kamm-tief:  #9f383f;
  --mu-wange:      #57a1ff;
}
[data-mufarbe="en-hi"] {
  --mu-band:       #17a40a;
  --mu-bauch:      #bcbcff;
  --mu-haut:       #fd7e00;
  --mu-haut-hell:  #fea042;
  --mu-haut-tief:  #b15800;
  --mu-kamm:       #1ab90b;
  --mu-kamm-tief:  #138908;
  --mu-wange:      #8989ff;
}
[data-mufarbe="de-tr"] {
  --mu-band:       #9c9c9c;
  --mu-bauch:      #decccf;
  --mu-haut:       #840c20;
  --mu-haut-hell:  #a44b5a;
  --mu-haut-tief:  #4a0712;
  --mu-kamm:       #a9a9a9;
  --mu-kamm-tief:  #7d7d7d;
  --mu-wange:      #ae3346;
}
[data-mufarbe="de-pl"] {
  --mu-band:       #9c9c9c;
  --mu-bauch:      #efdae2;
  --mu-haut:       #d6457a;
  --mu-haut-hell:  #e1759d;
  --mu-haut-tief:  #963055;
  --mu-kamm:       #a9a9a9;
  --mu-kamm-tief:  #7d7d7d;
  --mu-wange:      #de547a;
}
[data-mufarbe="de-nl"] {
  --mu-band:       #de3442;
  --mu-bauch:      #f2f2f2;
  --mu-haut:       #20468b;
  --mu-haut-hell:  #5a76a9;
  --mu-haut-tief:  #152f5d;
  --mu-kamm:       #e14753;
  --mu-kamm-tief:  #a6353d;
  --mu-wange:      #cccccc;
}

.muno-block {
  display: flex; gap: 1rem; align-items: center;
  background: var(--karte-2); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 1rem 1.2rem; margin: 1.4rem 0;
}
/* **Kein Flex-Kasten.** Er war einer, und solange der Satz nur Text
   enthielt, fiel das nicht auf. Sobald eine Auszeichnung darin steht — und
   seit Muno je Sprache einen eigenen Satz sagt, tut sie das —, wird jedes
   Element darin zu einem eigenen Flex-Element, das nicht mit dem Text
   davor umbricht: Auf 320px lief der Absatz 146 Pixel über den Rand. Es
   ist dieselbe Falle wie beim Raster, und sie steht in der Anleitung: Der
   Kasten ändert still, was ein Kind *ist*.

   Ein Absatz ist ein Absatz. Was daneben stehen soll, steht inline. */
.muno-spruch {
  margin: 0; font-family: var(--schrift-titel); font-size: 1.05rem;
  line-height: 1.45; color: var(--ink); max-width: var(--lesebreite);
}
/* Der Haken steht nur bei der starken Runde und trägt die Erfolgsfarbe.
   `flex-shrink: 0`, weil ein Zeichen in einem Flex-Kasten sonst schmaler
   gedrückt wird, sobald der Satz lang wird — und ein zusammengedrückter
   Haken sieht aus wie ein Strich. */
.muno-spruch svg { vertical-align: -.15em; color: var(--ok-ink); }
/* Der Schalter zwischen Auswahl und Freitext, und die Lückenmarke.

   Zwei Knöpfe mit `aria-pressed` und kein Kästchen: Ein Kästchen mit der
   Aufschrift „Freitext" lässt offen, was passiert, wenn es leer ist. Zwei
   benannte Stellungen lassen nichts offen. */
.eingabewahl { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.eingabewahl [aria-pressed="true"] {
  background: var(--marke); border-color: var(--marke); color: var(--knopf-ink);
}

/* Die Lücke in der Auswahl: eine Marke, kein Feld. Ein Feld, das man
   anfassen kann und das nichts bewirkt, ist schlimmer als keins. */
.luecke-marke {
  display: inline-block; min-width: 4.5rem; border-bottom: 2px solid var(--marke);
  margin: 0 .15rem; vertical-align: baseline;
}

/* Die Aussprache-Feinheiten.

   Jedes Beispiel ist ein Satz mit Lautsprecher und darunter der Hinweis,
   worauf zu hören ist. Der Hinweis ist der eigentliche Inhalt — ohne ihn
   wäre es eine Satzliste, und eine Satzliste bringt niemandem bei,
   worauf er hören soll. */
.fein { margin: 2.5rem 0 0; }
.fein-punkt { margin: 2rem 0; }
.fein-kopf { display: flex; align-items: baseline; gap: .6rem;
             flex-wrap: wrap; }
.fein-kopf h3 { margin: 0; font-size: 1.25rem; }
.fein-frage {
  margin: .4rem 0 .9rem; font-family: var(--schrift-titel);
  font-size: 1.05rem; color: var(--ink-2); font-style: italic;
  max-width: var(--lesebreite);
}
.fein-beispiele { list-style: none; margin: 1rem 0 0; padding: 0;
                  display: grid; gap: .9rem; }
.fein-beispiel {
  border-left: 3px solid var(--marke); padding: .1rem 0 .1rem .9rem;
  max-width: var(--lesebreite);
}
.fein-beispiel .satzpaar { margin: 0; }
.fein-achten {
  margin: .35rem 0 0; font-size: .9rem; color: var(--ink-3);
  line-height: 1.45;
}

/* Die Sprachgeschichte.

   Die Lautregeln sind Karten und keine Tabelle: Eine Tabelle mit sechs
   Zeilen und acht Beispielspalten ist auf einem Telefon nicht zu lesen,
   und die Regel steht in der Überschrift — „ss, ß → t" ist die ganze
   Aussage, alles andere ist Beleg. */
.lautregeln {
  display: grid; gap: 1rem; margin: 1.4rem 0 2rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.lautregel {
  background: var(--karte-2); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 1rem 1.1rem;
}
.lautregel h3 {
  margin: 0 0 .3rem; display: flex; align-items: center; gap: .5rem;
  font-size: 1.05rem;
}
.lr-form {
  font-family: var(--schrift-titel); font-weight: 700;
  background: var(--marke-weich); color: var(--ink);
  padding: .1rem .5rem; border-radius: .4rem;
}
.lr-form-en { background: var(--akzent-weich); }
.lr-pfeil { color: var(--ink-3); }
.lr-wo { margin: 0 0 .5rem; font-size: .85rem; }
.lautregel p { margin: 0 0 .7rem; color: var(--ink-2); font-size: .95rem;
               line-height: 1.5; }
.lr-paare { list-style: none; margin: 0; padding: 0; display: grid;
            gap: .2rem; }
.lr-paare li {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: baseline; gap: .5rem; font-size: .92rem;
  padding: .18rem 0; border-top: 1px solid var(--linie);
}
.lr-paare li:first-child { border-top: none; }
.lr-de { color: var(--ink-3); text-align: right; }
.lr-en { color: var(--ink); font-weight: 600; }

.gs-kapitel { margin: 2.2rem 0; max-width: var(--lesebreite); }
.gs-kopf { display: flex; align-items: baseline; gap: .7rem;
           flex-wrap: wrap; }
.gs-kopf h2 { margin: 0; }
.gs-jahr {
  font-size: .8rem; font-weight: 600; letter-spacing: .05em;
  color: var(--marke); background: var(--marke-weich);
  padding: .15rem .5rem; border-radius: var(--rund-voll);
}
.gs-frage {
  margin: .5rem 0 1rem; font-family: var(--schrift-titel);
  font-size: 1.08rem; color: var(--ink-2); font-style: italic;
}
/* „Was das für Sie heißt" ist der Grund, warum das Kapitel hier steht und
   nicht in einem Lexikon. Deshalb steht es abgesetzt und nicht als
   letzter Absatz — ein Ausgang, den man überliest, ist keiner. */
.gs-heisst {
  margin-top: 1.1rem; border-left: 3px solid var(--marke);
  background: var(--karte-2); border-radius: var(--rund);
  padding: .9rem 1.1rem;
}
.gs-heisst-marke {
  margin: 0 0 .4rem; font-size: .8rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--marke); font-weight: 600;
}
.gs-heisst p { margin: 0; color: var(--ink); }
.gs-heisst ul { margin: .7rem 0 0; padding-left: 1.1rem; }
.gs-heisst li { margin: .2rem 0; }

@media (max-width: 520px) {
  .lr-paare li { grid-template-columns: 1fr auto 1fr; font-size: .88rem; }
}

/* Die Grammatikmatrix: 15 Bereiche mal 6 Stufen.

   Auf dem Schreibtisch ein echtes Gitter — nebeneinander sagt die
   Zuordnung etwas, das eine Liste nicht sagen kann. Auf dem Telefon ist
   ein Gitter mit sieben Spalten dagegen unlesbar, und deshalb wird es
   dort zu einer Folge von Bereichen, in denen die Stufe über ihrer
   Zelle steht.

   Derselbe HTML-Code für beides: Die Zelle trägt ihre Stufe im
   `data-stufe`, und die schmale Fassung zeigt sie über `content:
   attr(...)`. Eine zweite Auszeichnung für die zweite Breite wäre eine
   zweite Wahrheit. */
.gr-matrix { margin: 1.6rem 0 2.4rem; }
.gr-legende {
  display: grid; gap: .5rem; margin: 1rem 0 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.gr-stufe {
  display: block; text-decoration: none; color: inherit;
  border-left: 3px solid var(--st, var(--marke));
  background: var(--karte-2); border-radius: var(--rund);
  padding: .55rem .75rem;
}
.gr-stufe:hover, .gr-stufe:focus-visible { background: var(--karte); }
/* `width: fit-content`, sonst zieht sich die Marke auf die volle Breite
   der Karte und liest sich als Balken statt als Schild. */
.gr-stufe .stufe-punkt { margin-bottom: .35rem; width: fit-content; }
.gr-stufe span { display: block; font-size: .85rem; color: var(--ink-3);
                 line-height: 1.35; }

.gr-gitter {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) repeat(6, minmax(0, 1fr));
  gap: 1px; background: var(--linie);
  border: 1px solid var(--linie); border-radius: var(--rund);
  overflow: hidden;
}
.gr-kopf {
  background: var(--karte-2); padding: .5rem .6rem;
  font-family: var(--schrift-titel); font-weight: 600; font-size: .9rem;
  color: var(--ink-2); text-align: center;
}
.gr-ecke { background: var(--karte-2); }
.gr-name {
  background: var(--karte-2); padding: .6rem .7rem; font-size: .9rem;
  display: flex; align-items: center;
}
.gr-name a { color: var(--ink); text-decoration: none; font-weight: 600; }
.gr-name a:hover { text-decoration: underline; }
.gr-zelle {
  background: var(--karte); padding: .4rem; display: flex;
  flex-direction: column; gap: .25rem;
}
.gr-chip {
  display: block; font-size: .78rem; line-height: 1.25;
  padding: .22rem .4rem; border-radius: .35rem;
  background: var(--karte-2); color: var(--ink-2); text-decoration: none;
}
.gr-chip:hover, .gr-chip:focus-visible {
  background: var(--marke-weich); color: var(--ink);
}
.gr-lese { margin-top: 1.1rem; }
.gr-lese p { color: var(--ink-2); }

@media (max-width: 900px) {
  /* Sieben Spalten auf einem Telefon sind keine Übersicht, sondern eine
     Tapete. Dieselbe Zuordnung, untereinander. */
  .gr-gitter { display: block; background: none; border: none;
               border-radius: 0; }
  .gr-kopf { display: none; }
  .gr-name {
    background: none; padding: 1.1rem 0 .4rem; font-size: 1.05rem;
    font-family: var(--schrift-titel);
  }
  /* Antippbar, nicht nur anklickbar. Auf 390 Pixeln maß `layout` die
     Marken mit 23 Pixeln Höhe und die Bereichszeile mit 28 — beides
     unter dem, was ein Daumen zuverlässig trifft. Auf dem Schreibtisch
     bleiben sie klein: Dort ist die Dichte der Zweck der Matrix. */
  .gr-name a { display: block; padding: .4rem 0; }
  .gr-zelle {
    background: none; padding: 0 0 0 3.2rem; position: relative;
    margin-bottom: .35rem;
    /* Marken fließen statt zu stapeln: Auf einem Telefon ist die Höhe
       das knappe Gut, nicht die Breite. */
    display: block;
  }
  .gr-zelle:empty { display: none; }
  .gr-zelle::before {
    content: attr(data-stufe); position: absolute; left: 0; top: .22rem;
    font-size: .78rem; font-weight: 600; color: var(--ink-3);
    letter-spacing: .04em;
  }
  .gr-chip {
    display: inline-block; margin: 0 .25rem .3rem 0;
    padding: .5rem .65rem; font-size: .85rem; line-height: 1.3;
    /* Die Untergrenze steht in `tools/layout_pruefen.mjs`: 32 Pixel.
       Aus Polsterung und Zeilenhöhe zusammengerechnet kam der erste
       Versuch auf 31 — die Prüfung meldete drei Marken, und sie hatte
       recht: Ein Ziel, das der Daumen um einen Pixel verfehlt, verfehlt
       er ganz. */
    min-height: 32px;
  }
}

/* Das Bedarfsfeld und die Anlassseiten.

   Das Feld steht bewusst groß und allein da: Es ist der einzige Grund,
   diese Seite zu öffnen, und alles darunter ist Nachschlagewerk. */
.bedarf {
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end;
  background: var(--karte-2); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 1.2rem 1.3rem; margin: 1.4rem 0 0;
}
.bedarf label {
  flex: 1 1 100%; font-size: .82rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--marke); font-weight: 600;
}
.bedarf input { flex: 1 1 16rem; }
.bedarf-treffer { margin-top: 1rem; }
.bedarf-zahl { margin: 0 0 .6rem; }

.anl-liste { list-style: none; margin: 1rem 0 0; padding: 0;
             display: grid; gap: .7rem; }
.anl-raster { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.anl-karte {
  display: block; text-decoration: none; padding: .85rem 1rem;
  border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--karte); color: inherit;
}
.anl-karte:hover, .anl-karte:focus-visible {
  border-color: var(--marke); background: var(--karte-2);
}
.anl-karte b { display: block; font-family: var(--schrift-titel);
               font-size: 1.02rem; color: var(--ink); }
.anl-karte span { display: block; margin-top: .25rem; font-size: .9rem;
                  color: var(--ink-3); }
.anl-gross b { font-size: 1.08rem; }

/* Eine Wendung ist drei Zeilen: der Satz, seine Übersetzung, und der
   Moment, in dem man ihn braucht. Der dritte ist der eigentliche Inhalt —
   ohne ihn wäre es eine Vokabelliste mit längeren Einträgen. */
.wendungsliste { list-style: none; margin: 1rem 0 0; padding: 0;
                 display: grid; gap: .8rem; }
.wendung {
  border-left: 3px solid var(--marke); padding: .1rem 0 .1rem .9rem;
}
.wendung-en { margin: 0; font-size: 1.05rem; color: var(--ink); }
.wendung-de { margin: .15rem 0 0; color: var(--ink-2); }
.wendung-wann { margin: .3rem 0 0; font-size: .9rem; color: var(--ink-3); }

/* Der Wegweiser: der eine Rat, über allem anderen.

   Er ist kräftiger gesetzt als eine gewöhnliche Karte, weil er auf einer
   Seite mit achtzehn Karten sonst die neunzehnte wäre. Kräftiger heißt
   hier: eine Kante in der Markenfarbe an der linken Seite und sonst nichts.
   Ein voll eingefärbter Kasten würde die Karten darunter zu Beiwerk machen,
   und sie sind es nicht — der Rat ist ein Rat und keine Ansage. */
.ww {
  border-left: 3px solid var(--marke);
  background: var(--karte-2);
  margin: 1.4rem 0 0;
}
.ww-marke {
  margin: 0 0 .5rem; font-size: .82rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--marke); font-weight: 600;
}
.ww-titel {
  margin: 0 0 .45rem; font-family: var(--schrift-titel); font-size: 1.2rem;
  font-weight: 600; color: var(--ink);
}
.ww-grund {
  margin: 0; color: var(--ink-2); max-width: var(--lesebreite);
  line-height: 1.55;
}
.ww-weiter { margin: 1rem 0 0; }

/* Der Etappenschluss: Muno am Ende einer Runde.

   Er darf etwas mehr Aufmerksamkeit haben als ein Muno im Fließtext — es ist
   der Moment, in dem jemand entscheidet, ob eine zweite Runde folgt. Mehr
   aber auch nicht: Ein Konfettifeld nach jeder Runde ist an der dritten
   durchschaut, und was nach jeder Runde jubelt, jubelt nach keiner.

   Die ruhige Pose bekommt den stilleren Grund. Nach einer harten Runde ist
   ein warm leuchtender Kasten nicht freundlich, sondern taktlos. */
.etappe { margin: 1.5rem 0 0; background: var(--marke-weich);
          border-color: transparent; }
.etappe[data-pose="ruht"] { background: var(--karte-2);
                            border-color: var(--linie); }
.etappe .muno { width: 84px; height: 84px; }
.etappe-weiter { margin: .9rem 0 0; }
@media (max-width: 520px) {
  .etappe { flex-direction: column; align-items: flex-start; }
}

.muno-vorstellung { align-items: flex-start; padding: 1.3rem 1.4rem; }
.muno-vorstellung .muno { width: 116px; height: 116px; }
.muno-name {
  margin: 0 0 .35rem; font-family: var(--schrift-titel); font-weight: 600;
  font-size: 1.15rem; color: var(--ink);
}
.muno-nach { margin-top: .55rem; color: var(--ink-2); font-size: 1rem; }
@media (max-width: 640px) {
  .muno-vorstellung { flex-direction: column; gap: .6rem; }
  .muno-vorstellung .muno { width: 84px; height: 84px; }
}
@media (max-width: 520px) {
  .muno-block { gap: .8rem; padding: .9rem 1rem; }
  .muno { width: 68px; height: 68px; }
}


/* ==========================================================================
   Munos Sprechblase

   Muno stand an zwei Stellen: auf der Startseite, wo er sich vorstellt,
   und am Ende einer Runde, wo er das Ergebnis kommentiert. Ein
   Maskottchen, das nur beim Kommen und beim Gehen da ist, ist ein Logo
   mit Beinen. Jetzt steht er an acht Stellen und sagt an jeder etwas
   ueber diese Sprache.

   Die Blase ist eine Karte mit einem Zipfel — ein gedrehtes Quadrat auf
   der Kante, das dieselbe Fuellung und dieselbe Linie traegt und dessen
   Rand zur Blase hin von der Karte selbst verdeckt wird. Der uebliche
   Weg waere ein `border`-Dreieck; das kann keine Randlinie tragen, und
   ein Zipfel ohne Rand an einer Blase mit Rand sieht aus wie ein Fehler.

   Auf dem Telefon wandert der Zipfel nach oben, weil die Figur dort
   ueber der Blase steht statt daneben. */

.mu-tipp {
  display: flex; align-items: center; gap: 1.1rem;
  margin: 1.4rem 0; max-width: 52rem;
}
.mu-tipp-figur { flex: none; }
.mu-tipp .muno { width: 92px; height: 92px; }

.mu-blase {
  position: relative; flex: 1 1 auto;
  padding: .95rem 1.15rem;
  border: 1px solid var(--linie); border-radius: var(--rund-l);
  background: var(--karte); box-shadow: var(--lift);
}
.mu-blase::before {
  content: ""; position: absolute; left: -7px; top: 50%;
  width: 13px; height: 13px; margin-top: -6.5px;
  transform: rotate(45deg);
  border: 1px solid var(--linie); border-top: 0; border-right: 0;
  border-bottom-left-radius: 3px;
  background: var(--karte);
}
.mu-blase p {
  margin: 0; font-family: var(--schrift-titel);
  font-size: 1.02rem; line-height: 1.5; color: var(--ink);
}

@media (max-width: 640px) {
  .mu-tipp { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .mu-tipp .muno { width: 72px; height: 72px; }
  .mu-blase { align-self: stretch; }
  .mu-blase::before {
    left: 26px; top: -7px; margin-top: 0;
    transform: rotate(135deg);
    border: 1px solid var(--linie); border-top: 0; border-right: 0;
  }
}

/* Kategoriesymbole — ein Strich, keine Fläche.

   currentColor und stroke, damit ein Symbol die Farbe seiner Kachel annimmt
   und in beiden Farbfassungen stimmt. Ein gefülltes Symbol müsste zwei
   Farbwerte kennen und kennt sie nicht. */

.kat-symbol {
  width: 1.5rem; height: 1.5rem; flex: none;
  color: var(--marke-ink); opacity: .9;
}
.kat-symbol-gross { width: 2.2rem; height: 2.2rem; }
.kat-titelzeile { display: flex; align-items: center; gap: .7rem; }
.kat-titelzeile h2, .kat-titelzeile h1 { margin: 0; }

/* Ähnliche Wörter — je Paar eine Karte.

   Warum Karten und keine Tabelle: Bei den falschen Freunden trägt eine
   Tabelle, weil jede Zeile dieselben vier Felder hat. Hier hat jeder
   Eintrag zwei oder drei Wörter mit je zwei Sätzen, dazu den Griff und die
   Probe — das sind fünf Blöcke ungleicher Länge, und die in Spalten zu
   zwingen hieße, sie alle auf die längste zu ziehen. */

.aw-liste { display: grid; gap: 1.2rem; margin: 1.2rem 0 2rem; }
@media (min-width: 62rem) {
  .aw-liste { grid-template-columns: repeat(2, 1fr); }
}
.aw-karte {
  border: 1px solid var(--linie); border-radius: var(--rund-l);
  background: var(--karte); padding: 1.2rem 1.3rem;
  display: flex; flex-direction: column; gap: .85rem;
}
.aw-kopf { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.aw-kopf h3 { margin: 0; font-size: 1.15rem; }

.aw-woerter { display: grid; gap: .8rem; margin: 0; padding: 0;
              list-style: none; }
.aw-wort {
  display: grid; gap: .1rem;
  border-left: 3px solid var(--marke); padding-left: .9rem;
}
.aw-wort > .ziel { font-size: 1.02rem; }
.aw-bedeutung { color: var(--ink-2); font-size: .95rem; }
.aw-satz { font-size: .92rem; margin-top: .25rem; }
.aw-satz.de { color: var(--ink-3); margin-top: 0; }

/* Der Griff ist der Grund, warum es diese Seite gibt — er bekommt deshalb
   die Fläche und nicht eine Fußnote. */
.aw-griff { background: var(--marke-weich); border-color: transparent; }
.aw-griff p:last-child { margin-bottom: 0; }

.aw-probe {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  margin: 0; padding-top: .2rem; border-top: 1px solid var(--linie);
}
.aw-probe-marke {
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3);
}
.aw-probe .ziel { flex: 1 1 12rem; }
.aw-loesung {
  background: var(--bg-tief); border-radius: var(--rund-voll);
  padding: .12rem .6rem; font-weight: 600; font-size: .92rem;
}

/* Die Suche auf der Startseite.

   Sie sitzt in der Bühne unter den beiden Knöpfen und nicht darüber: Wer
   zum ersten Mal hier ist, soll zuerst lesen, worum es geht. Wer etwas
   Bestimmtes sucht, findet ein Suchfeld auch, wenn es an zweiter Stelle
   steht — er sucht ja danach.

   Die Trefferliste wächst nach unten in die Seite hinein statt als Überlage
   darüber. Eine Überlage auf der Startseite verdeckt genau das, was den
   ersten Eindruck ausmacht, und sie muss weggeklickt werden. */

.startsuche { margin-top: 1.6rem; max-width: 34rem; }
.sts-zeile {
  display: flex; align-items: center; gap: .5rem;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund-voll); padding: .3rem .4rem .3rem .9rem;
  box-shadow: var(--schatten-1);
}
.sts-zeile:focus-within { border-color: var(--marke); }
.sts-zeile > svg { width: 19px; height: 19px; flex: none; color: var(--ink-3); }
.sts-zeile input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none;
  font: inherit; color: var(--ink); padding: .55rem 0;
}
.sts-zeile input:focus { outline: none; }
.sts-zeile input::placeholder { color: var(--ink-3); }
.sts-zeile > .knopf-still { flex: none; border-radius: var(--rund-voll); }

.sts-stand { margin: .6rem .2rem 0; min-height: 0; }
.sts-stand:empty { display: none; }

.sts-liste { display: grid; gap: .3rem; margin-top: .5rem; }
.sts-liste:empty { display: none; }
.sts-treffer {
  display: flex; align-items: center; gap: .7rem;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: .6rem .8rem;
  text-decoration: none; color: var(--ink);
}
.sts-treffer:hover, .sts-treffer:focus-visible {
  border-color: var(--marke); background: var(--karte-2);
}
.sts-text { display: grid; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.sts-name { font-weight: 600; }
.sts-kurz {
  color: var(--ink-3); font-size: .88rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sts-bereich {
  flex: none; font-size: .78rem; color: var(--ink-3);
  background: var(--bg-tief); border-radius: var(--rund-voll);
  padding: .12rem .55rem;
}
.sts-alle { justify-content: center; background: var(--marke-weich);
            border-color: transparent; }

/* `--ink-2` und nicht `--ink-3`: Diese Zeile steht auf der Startseite über
   der bewegten Fläche, und dort ist der Untergrund nicht die Seitenfarbe,
   sondern das, was der Canvas gerade gemalt hat. `tools/thema_pruefen.mjs`
   misst gegen genau diesen Pixel und kam auf 3,94:1 — nötig sind 4,5:1.
   Eine leise Farbe über einem ruhigen Grund ist etwas anderes als eine
   leise Farbe über einem, der sich bewegt. */
.sts-hinweis {
  margin: .7rem .2rem 0; font-size: .86rem; color: var(--ink-2);
}
.startsuche[data-offen] .sts-hinweis { display: none; }

@media (max-width: 520px) {
  .sts-zeile > .knopf-still { display: none; }
  .sts-bereich { display: none; }
}

/* Die Auswertungskarten — aufklappbar, mit der Zahl außen.

   Warum die Zahl in der Zusammenfassung steht und nicht erst drinnen:
   Zwanzig geschlossene Aufklapper sind schlechter als zwanzig offene
   Karten — man sieht nichts und muss raten, wo etwas steht. Mit der Zahl
   außen ist die zugeklappte Seite eine Übersicht und die aufgeklappte der
   Graph dahinter. */

.aus-karte {
  border: 1px solid var(--linie); border-radius: var(--rund-l);
  background: var(--karte); margin: 0 0 .8rem; overflow: hidden;
  box-shadow: var(--schatten-1);
}
.aus-karte > summary {
  display: flex; align-items: center; gap: .8rem;
  padding: 1rem 1.2rem; cursor: pointer; list-style: none;
  min-height: 3rem;
}
.aus-karte > summary::-webkit-details-marker { display: none; }
.aus-karte > summary::after {
  content: ''; flex: none; margin-left: .2rem;
  width: .5rem; height: .5rem; border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3); transform: rotate(45deg);
  transition: transform .18s ease;
}
.aus-karte[open] > summary::after { transform: rotate(-135deg); }
.aus-karte > summary:hover { background: var(--karte-2); }
.aus-karte > summary:focus-visible {
  outline: 2px solid var(--marke); outline-offset: -2px;
}
.aus-titel {
  font-family: var(--schrift-titel); font-weight: 600; font-size: 1.08rem;
  color: var(--ink); flex: 1 1 auto; min-width: 0;
}
.aus-kennzahl {
  flex: none; font-size: .9rem; font-weight: 600; color: var(--marke-ink);
  background: var(--marke-weich); border-radius: var(--rund-voll);
  padding: .18rem .7rem; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.aus-inhalt { padding: 0 1.2rem 1.2rem; }
.aus-inhalt > :first-child { margin-top: 0; }

/* Der Schalter über den Karten: alles auf, alles zu. */
.aus-schalter {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  margin: 0 0 1rem;
}
.aus-schalter > .zeile-still { margin: 0 0 0 auto; }

@media (max-width: 520px) {
  .aus-karte > summary { padding: .85rem .9rem; gap: .5rem; }
  .aus-titel { font-size: 1rem; }
  .aus-kennzahl { font-size: .82rem; padding: .15rem .55rem; }
  .aus-inhalt { padding: 0 .9rem 1rem; }
}

/* --- 7. Ueben ------------------------------------------------------------ */

/* Eine Aufgabe ist ein Satz, den man liest. Auf 1280 Pixeln zieht sich die
   Karte sonst über die volle Fensterbreite, und der englische Beispielsatz
   steht als eine einzige lange Zeile darin — genau das Maß, bei dem das Auge
   die Zeile verliert. */
.uebung-karte {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund-l); box-shadow: var(--schatten-2);
  overflow: clip; margin-top: 1.4rem;
  max-width: 46rem;
}
/* `clip` und nicht `hidden`: `hidden` macht die Karte zum Scrollbehaelter,
   und der klebende Fuss misst sein `bottom` dann gegen die Karte statt gegen
   den Bildschirm. Auf dem Telefon schob ihn der Abstand fuer die Tableiste
   so 62 Pixel in die Karte hinein — ueber die letzten Zeilen jeder Aufgabe,
   mit einer leeren Flaeche darunter. Wo `clip` fehlt, bleibt die Karte
   offen und nur der Kopf traegt die runden Ecken. */
@supports not (overflow: clip) {
  .uebung-karte { overflow: visible; }
  .uebung-karte > .uebung-kopf { border-radius: var(--rund-l) var(--rund-l) 0 0; }
}
/* **Rueckmeldung in Blaugruen und Orange statt Gruen und Rot.** Bei
   Rotgruenschwaeche (rund acht Prozent der Maenner) sind Gruen und Rot zwei
   gleich helle Flaechen; Blaugruen und Orange bleiben unterscheidbar
   (Okabe & Ito), Haken und Kreuz bleiben dazu. Orange sagt „noch nicht",
   nicht „verboten" — ein Fehler beim Ueben ist Teil des Lernens, und Rot
   ist die Farbe, die ihn zum Urteil macht. Nur im Uebungsblock, als
   Werte der vorhandenen Variablen: Jede Regel darin zieht sie von selbst. */
.uebung-karte {
  --ok: #0f766e; --ok-ink: #0f766e; --ok-weich: #ccfbf1;
  --fehler: #c2410c; --fehler-ink: #9a3412; --fehler-weich: #ffedd5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .uebung-karte {
    --ok: #2dd4bf; --ok-ink: #5eead4; --ok-weich: #0f2f2c;
    --fehler: #fb923c; --fehler-ink: #fdba74; --fehler-weich: #3a2312;
  }
}
:root[data-thema="dunkel"] .uebung-karte {
  --ok: #2dd4bf; --ok-ink: #5eead4; --ok-weich: #0f2f2c;
  --fehler: #fb923c; --fehler-ink: #fdba74; --fehler-weich: #3a2312;
}
/* Eine Antwort ist ein Daumenziel: mindestens 48 Pixel hoch. */
.uebung-karte .wahl-knopf { min-height: 3rem; align-items: center; }
/* Der Startkasten der Vokabelabfrage: drei Stufen als ruhige Leiste. */
.wb-start-titel { margin: 0 0 .7rem; font-weight: 600; color: var(--ink); }
.wb-stufen {
  display: flex; flex-wrap: wrap; gap: .45rem .5rem; list-style: none;
  margin: 0 0 1.1rem; padding: 0;
}
.wb-stufe {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .8rem .35rem .4rem; border-radius: 999px;
  background: var(--karte-2); border: 1px solid var(--linie);
  font-size: .9rem; color: var(--ink-2);
}
.wb-stufe-nr {
  display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem;
  border-radius: 50%; font-size: .78rem; font-weight: 700;
  background: var(--marke-weich); color: var(--marke-ink);
}
.wb-start .hero-knoepfe { margin-bottom: .8rem; }
.wb-start-still { margin: 0; font-size: .85rem; }
/* Die Rundengroesse: Zahlenfeld plus Schnellwahl. Beides Daumenziele
   (44 Pixel), die gewaehlte Schnellwahl in der Markenfarbe. */
.wb-groesse { margin: 0 0 1rem; }
.wb-groesse-titel { display: block; margin: 0 0 .4rem; font-weight: 600; font-size: .92rem; color: var(--ink); }
.wb-groesse-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.wb-groesse-eingabe { display: inline-flex; align-items: center; gap: .5rem; }
.wb-groesse-feld {
  font: inherit; font-variant-numeric: tabular-nums; color: var(--ink);
  width: 5.2rem; min-height: 2.75rem; padding: .35rem .6rem;
  background: var(--bg-tief); border: 1px solid var(--linie-kraeftig);
  border-bottom-width: 2px; border-radius: var(--rund-s);
}
.wb-groesse-feld:focus { border-color: var(--marke); background: var(--karte); }
.wb-groesse-von { font-size: .9rem; color: var(--ink-2); white-space: nowrap; }
.wb-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.wb-chip {
  font: inherit; font-size: .9rem; font-variant-numeric: tabular-nums;
  min-height: 2.75rem; min-width: 2.75rem; padding: .3rem .9rem;
  border-radius: 999px; cursor: pointer;
  background: var(--karte-2); border: 1px solid var(--linie); color: var(--ink-2);
}
.wb-chip:hover { border-color: var(--marke); color: var(--ink); }
.wb-chip[aria-pressed="true"] {
  background: var(--marke-weich); border-color: var(--marke);
  color: var(--marke-ink); font-weight: 600;
}
.wb-groesse-hinweis { margin: .45rem 0 0; font-size: .85rem; }

/* Die Vokabel wie auf einer Karteikarte: Auftrag klein, Wort gross. */
.uebung-auftrag { margin: 0 0 .15rem; font-size: .9rem; }
.uebung-wort {
  font-family: var(--schrift-titel); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
  font-weight: 600; line-height: 1.2; color: var(--ink);
  margin: 0 0 1.2rem; overflow-wrap: anywhere;
}
/* Die Wortkarte nach der Antwort: eine ruhige Karte in der getoenten
   Aufloesung — das Wort mit Aussprache, Bedeutung, Wortart und Satz. */
.wortmerk {
  margin: .4rem 0 .2rem; padding: .9rem 1rem .95rem;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund); box-shadow: 0 1px 2px rgb(15 23 42 / .05);
}
.wortmerk-wort {
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
  margin: 0;
}
.wortmerk-wort .ziel {
  font-family: var(--schrift-titel); font-size: 1.55rem; font-weight: 600;
  line-height: 1.2;
}
.wortmerk-wort .hoerknopf { margin: 0; }
.wortmerk-de {
  display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
  margin: .15rem 0 0; color: var(--ink-2);
}
.wortmerk-art {
  font-size: .75rem; letter-spacing: .02em; color: var(--ink-3);
  padding: .05rem .45rem; border: 1px solid var(--linie); border-radius: 999px;
}
.wortmerk-satz {
  margin: .75rem 0 0; padding-top: .7rem; border-top: 1px solid var(--linie);
}
.wortmerk-satz .ziel { font-style: italic; }
.wortmerk-satz .de { color: var(--ink-3); font-size: .93rem; margin-top: .1rem; }
.wortmerk-hinweis { margin: .6rem 0 0; font-size: .9rem; }
.kommt-wieder { margin: .7rem 0 0; font-size: .92rem; color: var(--ink-2); }
.nachgeholt-zeile { margin: .8rem 0 0; text-align: center; }

.uebung-kopf {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .75rem 1.1rem; border-bottom: 1px solid var(--linie);
  background: var(--bg-tief); font-size: .88rem; color: var(--ink-3);
}
.uebung-koerper { padding: 1.5rem 1.3rem; }
.uebung-frage { font-size: 1.15rem; line-height: 1.55; margin-bottom: 1.2rem; }
.uebung-frage .luecke-feld { display: inline-block; }

.luecke-feld, .antwort-feld {
  font: inherit; color: var(--ink);
  background: var(--bg-tief);
  border: 1px solid var(--linie-kraeftig);
  border-bottom-width: 2px;
  border-radius: var(--rund-s);
  padding: .3rem .6rem;
}
/* Die Luecke ist so breit wie ihre Loesung (`size` setzt das Skript) und
   nicht acht Zeichen breiter: Auf dem Telefon nahm ein Feld mit fester
   Mindestbreite drei Viertel der Zeile, und der Rest des Satzes brach um.
   Dass die Breite die Laenge verraet, ist bei einer Luecke ueblich. */
.uebung-frage .luecke-feld {
  min-width: 3.5rem; max-width: 100%; width: auto;
  padding: .15rem .45rem; vertical-align: baseline;
}
.antwort-feld { width: 100%; padding: .65rem .8rem; min-width: 8rem; }
.luecke-feld:focus, .antwort-feld:focus { border-color: var(--marke); background: var(--karte); }
.luecke-feld[data-stand="richtig"] { border-color: var(--ok); background: var(--ok-weich); }
.luecke-feld[data-stand="falsch"] { border-color: var(--fehler); background: var(--fehler-weich); }

.wahlliste { display: grid; gap: .5rem; list-style: none; margin: 0 0 1.2rem; padding: 0; }
.wahl-knopf {
  display: flex; align-items: flex-start; gap: .7rem; width: 100%;
  text-align: left; font: inherit; color: var(--ink);
  background: var(--karte-2); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: .7rem .9rem; cursor: pointer;
  position: relative;
  transition: border-color .15s, background .15s, transform .1s;
}
.wahl-knopf:hover:not([disabled]) { border-color: var(--linie-kraeftig); background: var(--bg-tief); }
.wahl-knopf:active:not([disabled]) { transform: translateY(1px); }
/* Ziffern und nicht Buchstaben, seit die Auswahl mit der Tastatur geht:
   Die Beschriftung IST die Taste. Ein „c)" neben einer Antwort, die man mit
   der 3 waehlt, waere eine Uebersetzungsaufgabe vor der Uebungsaufgabe. */
.wahl-ziffer {
  font-weight: 700; color: var(--ink-3); flex: none;
  font-variant-numeric: tabular-nums;
}
.wahl-knopf[data-stand="richtig"] { border-color: var(--ok); background: var(--ok-weich); }
.wahl-knopf[data-stand="falsch"] { border-color: var(--fehler); background: var(--fehler-weich); }
/* Rot und Gruen allein reichen nicht — bei Rotgruenblindheit sind das zwei
   gleich helle Flaechen. Deshalb zusaetzlich Haken und Kreuz. */
.wahl-knopf[data-stand]::after {
  position: absolute; right: .8rem; top: .65rem; font-weight: 700;
}
.wahl-knopf[data-stand="richtig"]::after { content: "✓"; color: var(--ok-ink); }
.wahl-knopf[data-stand="falsch"]::after { content: "✕"; color: var(--fehler-ink); }

/* --- Die Woerter eines Satzes als Knoepfe -------------------------------- */
/* „Finde den Fehler" braucht keine erfundenen Ablenker: Die Woerter des
   Satzes sind die Auswahl. Deshalb sehen sie auch nicht aus wie eine Liste
   von Antworten, sondern wie der Satz — nebeneinander, in der Reihenfolge,
   die die Bedeutung traegt. Ein Wort, das aus der Zeile faellt, waere ein
   Wort, das aus dem Satz faellt. */
.wortwahl {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .25rem .35rem;
}
.wortwahl-knopf {
  font: inherit; color: inherit; line-height: 1.5;
  background: var(--karte-2); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: .15em .45em; cursor: pointer;
  position: relative;
  transition: border-color .15s, background .15s, transform .1s;
}
.wortwahl-knopf:hover:not([disabled]) {
  border-color: var(--linie-kraeftig); background: var(--bg-tief);
}
.wortwahl-knopf:active:not([disabled]) { transform: translateY(1px); }
.wortwahl-knopf[data-stand="richtig"] {
  border-color: var(--ok); background: var(--ok-weich);
}
.wortwahl-knopf[data-stand="falsch"] {
  border-color: var(--fehler); background: var(--fehler-weich);
}
/* Wie bei der Antwortliste: Farbe allein traegt die Auskunft nicht. Der
   Haken steht hier hinter dem Wort statt in der Ecke — ein Knopf von der
   Groesse eines Wortes hat keine Ecke, in die etwas passt. */
.wortwahl-knopf[data-stand]::after { font-weight: 700; margin-left: .3em; }
.wortwahl-knopf[data-stand="richtig"]::after { content: "✓"; color: var(--ok-ink); }
.wortwahl-knopf[data-stand="falsch"]::after { content: "✕"; color: var(--fehler-ink); }

/* --- Dranbleiben: Woche, Serie, Meilensteine ----------------------------- */

/* Sieben Kaestchen statt eines Balkens. Ein Balken sagt „drei von fuenf" und
   verschweigt, an welchen Tagen — und die Frage, die jemand wirklich hat,
   ist „welcher Tag ist mir durchgerutscht?". */
.wochenreihe {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem;
}
.wochentag {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .5rem .2rem; border-radius: var(--rund);
  border: 1px solid var(--linie); background: var(--karte-2);
}
.wochentag-name { font-size: .82rem; color: var(--ink-3); letter-spacing: .04em; }
.wochentag-zahl { font-weight: 700; font-variant-numeric: tabular-nums; }
.wochentag[data-stand="voll"] {
  border-color: var(--ok); background: var(--ok-weich);
}
.wochentag[data-stand="voll"] .wochentag-zahl { color: var(--ok-ink); }
.wochentag[data-stand="angefangen"] { border-color: var(--linie-kraeftig); }
/* Ein Tag, der noch kommt, ist kein verpasster Tag. Er sieht deshalb auch
   nicht aus wie einer: kein Rahmen, keine Null, nur ein Punkt. */
.wochentag[data-stand="kommt"] {
  border-style: dashed; opacity: .55; background: transparent;
}

/* Das Wort auf der Lernkarte. Gross, weil es das Einzige ist, worum es
   geht — und mit dem Lautsprecher in derselben Zeile statt darunter: Ein
   Knopf in eigener Zeile sieht aus wie der naechste Schritt, und der
   naechste Schritt ist hier das Antworten. */
.lernkarte-wort {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 0 0 .2rem;
}
.lernkarte-wort .ziel {
  font-family: var(--schrift-titel); font-size: 1.9rem; font-weight: 600;
  line-height: 1.2;
}

.serie-zahl { margin: 0; line-height: 1.1; }
.serie-zahl b {
  font-family: var(--schrift-titel); font-size: 2.6rem; font-weight: 700;
  color: var(--marke-ink); font-variant-numeric: tabular-nums;
}
.serie-zahl span { color: var(--ink-3); margin-left: .3rem; }

.marke-titel { margin: 0 0 .5rem; font-weight: 600; }
.balken-zeile[data-erreicht="ja"] { color: var(--ink); }
.balken-zeile[data-erreicht="nein"] { color: var(--ink-3); }

/* Zwei Zahlenfelder nebeneinander, solange Platz ist. Auf dem Telefon
   untereinander — zwei halbe Eingabefelder auf 320 Pixeln sind zwei
   Eingabefelder, in die niemand tippen kann. */
.zielfelder { display: grid; gap: .8rem; }
@media (min-width: 30rem) {
  .zielfelder { grid-template-columns: 1fr 1fr; align-items: end; }
}

/* Ein Minimalpaar ist ein Vergleich, und ein Vergleich will beide Haelften
   im selben Blick. Erst ab 420px: Darunter stehen zwei Knoepfe nebeneinander
   so eng, dass der Haken hinter dem Wort sitzt statt daneben — und die
   Auskunft, die nicht nur an der Farbe haengen soll, waere die erste, die
   verlorengeht. */
@media (min-width: 420px) {
  .wahlliste-paar { grid-template-columns: 1fr 1fr; }
  .wahlliste-paar .wahl-knopf {
    align-items: center; justify-content: center;
    padding: 1.1rem .9rem; font-size: 1.1rem;
  }
}

.karten-legen { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; min-height: 3rem; }
.wortkarte {
  font: inherit; background: var(--karte-2); color: var(--ink);
  border: 1px solid var(--linie-kraeftig); border-radius: var(--rund-s);
  padding: .4rem .75rem; cursor: pointer;
}
.wortkarte:hover { border-color: var(--marke); }

/* --- Tastatur ------------------------------------------------------------
   Die Ziffer auf der Karte und die Zeile in der Fußleiste stehen nur da, wo
   es eine Tastatur gibt. Auf einem Telefon wären beide eine Auskunft über
   etwas, das es dort nicht gibt — und die Ziffer nähme dem Wort Platz weg,
   den es auf 320 Pixeln nicht hat. */
.tastenhilfe { display: none; }

@media (hover: hover) and (pointer: fine) {
  .tastenhilfe {
    display: inline; margin-left: auto;
    font-size: .78rem; color: var(--ink-3);
    letter-spacing: .01em; white-space: nowrap;
  }
  .karten-legen .wortkarte[data-ziffer]::before {
    content: attr(data-ziffer);
    margin-right: .45rem; font-weight: 700; font-size: .78em;
    color: var(--ink-3); font-variant-numeric: tabular-nums;
  }
  /* Gelegt ist gelegt: Im Ziel führt die Ziffer nicht mehr irgendwohin. */
  .karten-ziel .wortkarte[data-ziffer]::before { content: none; }
}
.karten-ziel {
  border: 2px dashed var(--linie-kraeftig); border-radius: var(--rund);
  padding: .7rem; min-height: 3.4rem; display: flex; flex-wrap: wrap; gap: .45rem;
  background: var(--bg-tief);
}

/* --- Schnellsuche --------------------------------------------------------
   Ein <dialog>, kein eigenes Overlay: Der Browser sperrt die Seite dahinter,
   faengt die Tabulatortaste ein und macht die Esc-Taste von selbst richtig.
   Das alles noch einmal zu schreiben hiesse, es an drei Stellen falsch zu
   machen.

   Sie sitzt oben und nicht in der Mitte: Ein Feld, das mittig aufgeht,
   springt beim Tippen mit der wachsenden Trefferliste. */
.schnellsuche {
  width: min(38rem, calc(100vw - 2rem));
  margin: 8vh auto auto;
  padding: 0;
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--rund);
  background: var(--karte);
  color: var(--ink);
  box-shadow: var(--schatten-2, var(--schatten-1));
  overflow: hidden;
}
.schnellsuche::backdrop {
  background: rgba(10, 12, 16, .5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.ss-kopf {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .8rem; border-bottom: 1px solid var(--linie);
}
.ss-feld {
  flex: 1; font: inherit; font-size: 1.05rem; color: var(--ink);
  background: transparent; border: 0; padding: .35rem .2rem;
}
.ss-feld:focus { outline: none; }
.ss-zu {
  flex: none; font-size: .75rem; letter-spacing: .04em;
  border: 1px solid var(--linie-kraeftig); border-radius: var(--rund-s);
  padding: .15rem .45rem; color: var(--ink-3);
}
.ss-liste { max-height: min(24rem, 52vh); overflow-y: auto; padding: .4rem; }
.ss-zeile {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  text-align: left; font: inherit; color: var(--ink);
  background: transparent; border: 0; border-radius: var(--rund-s);
  padding: .5rem .6rem; cursor: pointer;
}
/* Die Wortsuche der Startseite: Ihre Treffer sind Verweise auf eine
   Wortliste und tragen die Sprache als kleines Schild. */
a.ss-zeile { text-decoration: none; }
a.ss-zeile:hover { background: var(--marke-weich); }
.ws-paar { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; }
.ws-wort { font-weight: 700; font-size: 1.02rem; }
.ws-pfeil { color: var(--ink-3); }
.ws-uebers { font-weight: 500; color: var(--ink); }
.schnellsuche .ws-sprache {
  flex: none; font-size: .78rem; font-weight: 600; color: var(--marke-ink);
  background: var(--marke-weich); border-radius: 999px; padding: .15rem .6rem;
}
/* Ein Zeiger, der der Tastatur folgt, und einer, der der Maus folgt, wären
   zwei Zeiger. Beide setzen dasselbe Attribut, also gibt es immer nur den
   einen — und `:hover` steht hier deshalb absichtlich nicht. */
.ss-zeile[data-aktiv] { background: var(--marke-weich); }
.ss-text { flex: 1; min-width: 0; display: grid; }
.ss-text .thema-name { font-weight: 600; }
.ss-text .thema-kurz,
.ss-zeile .thema-stand {
  color: var(--ink-3); font-size: .82rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ss-zeile .thema-stand { flex: none; max-width: 9rem; }
.ss-mehr { border-top: 1px solid var(--linie); border-radius: 0; margin-top: .3rem; }
.ss-stand {
  margin: 0; padding: .55rem .9rem; font-size: .78rem;
  border-top: 1px solid var(--linie); background: var(--bg-tief);
}

@media (max-width: 30rem) {
  .schnellsuche { margin-top: 3vh; }
  .ss-zeile .thema-stand { display: none; }
}

.aufloesung {
  border-radius: var(--rund); padding: 1.1rem 1.2rem; margin-top: 1.2rem;
  background: var(--karte-2); border: 1px solid var(--linie);
}
.aufloesung[data-stand="richtig"] { background: var(--ok-weich); border-color: transparent; }
.aufloesung[data-stand="falsch"] { background: var(--fehler-weich); border-color: transparent; }
.aufloesung-kopf { display: flex; align-items: center; gap: .5rem; font-weight: 700; margin-bottom: .6rem; }
.aufloesung-kopf svg { width: 20px; height: 20px; }

/* --- Diktat: der Satz, Wort für Wort ------------------------------------
   Die Marken sitzen auf dem gesprochenen Satz, nicht auf dem geschriebenen.
   Ein durchgestrichenes Wort ist deshalb genau eines: das, was zu viel
   geschrieben wurde. Alles andere ist das, was hätte dastehen sollen, und
   das durchzustreichen hieße das Gegenteil.

   Die Farbe ist nie die einzige Auskunft: `title` sagt es in Worten, und
   Unterstreichung, Rahmen und Durchstreichung unterscheiden die vier Fälle
   auch für jemanden, der Rot und Grün nicht trennt. */
/* --- Textanalyse: die nicht gefundenen Wörter --------------------------- */
.wortwolke { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 0; }
.wort-marke {
  background: var(--bg-tief); border: 1px solid var(--linie);
  border-radius: var(--rund-s); padding: .15rem .5rem; font-size: .9rem;
}

/* --- Schreibprüfer: die Befunde ------------------------------------------
   Drei Sicherheitsgrade, und der Unterschied zwischen ihnen ist der ganze
   Grund, warum dieses Werkzeug vertretbar ist. Er darf deshalb nicht nur
   in der Farbe stecken: Jede Marke traegt ihr Wort — Fehler, Schreibung,
   Hinweis —, und die drei Faelle unterscheiden sich zusaetzlich in der
   Farbe des linken Randes. Wer Rot und Gelb nicht trennt, liest das Wort. */
.befund-liste { list-style: none; padding: 0; margin: .9rem 0 0; }
.befund {
  border-left: 3px solid var(--linie-kraeftig);
  background: var(--karte-2);
  border-radius: 0 var(--rund-s) var(--rund-s) 0;
  padding: .75rem 1rem;
  margin: 0 0 .7rem;
}
.befund > :first-child { margin-top: 0; }
.befund > :last-child { margin-bottom: 0; }
.befund-ist-fehler     { border-left-color: var(--fehler); }
.befund-ist-schreibung { border-left-color: var(--warn); }
.befund-ist-hinweis    { border-left-color: var(--akzent); }

.befund-kopf { display: flex; align-items: baseline; gap: .55rem;
               flex-wrap: wrap; margin: 0 0 .35rem; }
.befund-marke {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; border-radius: var(--rund-s);
  padding: .1rem .45rem; flex: none;
}
.befund-fehler     { background: var(--fehler-weich); color: var(--fehler-ink); }
.befund-schreibung { background: var(--warn-weich);   color: var(--warn); }
.befund-hinweis    { background: var(--akzent-weich); color: var(--akzent-ink); }

/* Der Fundort. `mark` ist hier keine Hervorhebung im Sinne von „wichtig",
   sondern eine Ortsangabe: Das ist die Stelle, die gemeint ist. */
.befund-stelle {
  background: var(--bg-tief); border-radius: var(--rund-s);
  padding: .4rem .6rem; margin: 0 0 .45rem;
  font-size: .95rem; overflow-wrap: anywhere;
}
.befund-stelle mark {
  background: var(--warn-weich); color: inherit;
  border-bottom: 2px solid var(--warn); border-radius: 2px;
  padding: 0 .1em;
}
.befund-was { margin: 0 0 .3rem; }
.befund-quelle { margin: 0; font-size: .9rem; }

/* Der Kasten fuer „nichts gefunden". Er sagt ausdruecklich, dass das nicht
   „fehlerfrei" heisst — sonst waere er die unehrlichste Stelle der Seite. */
.kasten-gut { background: var(--ok-weich); border-color: transparent; }

/* --- Schreibprüfer: das Quellenband ---------------------------------------
   Die Seiten, auf denen die Regeln stehen — sichtbar und ohne dass jemand
   etwas prüfen lassen muss. Der Prüfer holt sich seine Verweise von hier;
   damit stehen sie im fertigen HTML und werden von `links` mitgeprüft. */
.quellenband { display: flex; flex-wrap: wrap; gap: .45rem; margin: .9rem 0 0; }
.quellen-marke {
  background: var(--bg-tief); border: 1px solid var(--linie);
  border-radius: var(--rund-s); padding: .25rem .6rem;
  font-size: .9rem; text-decoration: none; color: var(--ink-2);
}
.quellen-marke:hover { border-color: var(--marke); color: var(--marke-ink); }

/* --- Häufige Fragen ------------------------------------------------------
   Jede Frage ist ein eigener Block mit eigener Sprungmarke: Wer über eine
   Suchmaschine kommt, landet auf der Frage und nicht auf dem Seitenanfang. */
.frage {
  border-left: 3px solid var(--linie-kraeftig);
  padding: .1rem 0 .1rem 1.1rem;
  margin: 1.4rem 0;
}
.frage:target { border-left-color: var(--marke); }
.frage h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
.frage-antwort { max-width: var(--lesebreite); }
.frage-antwort p { margin-bottom: 0; }
.frage-weiter {
  margin: .6rem 0 0; font-size: .9rem;
  max-width: var(--lesebreite);
}

/* --- Falsche Freunde: der Beleg unter der Zeile ---------------------------
   Der Beispielsatz gehört zur Zeile darüber und nicht in eine eigene Spalte:
   Fünf Spalten passen auf kein Telefon, und der Satz ist länger als die
   vier Wörter über ihm zusammen. */
.falle-beleg > td {
  padding-top: 0; border-top: 0;
  font-size: .9rem; color: var(--ink-2);
}
/* Die Belegzeile ist die erste (und einzige) Zelle ihrer Zeile und erbte
   damit das `nowrap` der ersten Spalte einer Formtabelle — der Hinweis lief
   als eine Zeile rechts aus der Tabelle hinaus. */
.formtabelle .falle-beleg > td:first-child { white-space: normal; width: auto; }
/* Nur die Kinder der Zelle stehen untereinander — ein Zielwort mitten in
   einem Hinweissatz bleibt im Satz. Ohne das `>` stand jedes markierte Wort
   eines Hinweises auf einer eigenen Zeile. */
.falle-beleg > td > .ziel, .falle-beleg > td > .de,
.falle-beleg > td > .zeile-still {
  display: block;
}
/* Eine Aufzaehlung von Wortpaaren als kleine Tabelle (`mit_paarlisten`). */
.paarliste {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  width: fit-content; max-width: 100%;
  gap: .2rem 1.1rem; margin: .45rem 0 .55rem; padding: .5rem .8rem;
  border-left: 3px solid var(--marke-weich); border-radius: 4px;
  background: color-mix(in srgb, var(--karte) 70%, transparent);
}
.paarliste-zeile { display: contents; }
.paarliste .ziel { font-weight: 700; color: var(--ink); }
.falle-tabelle td:first-child { font-weight: 600; }

.diktat-marken {
  display: flex; flex-wrap: wrap; gap: .25rem .4rem;
  margin: 0 0 .8rem; font-size: 1.05rem; line-height: 1.9;
}
.diktat-wort { border-radius: var(--rund-s); padding: .05rem .3rem; }
.diktat-wort[data-stand="tipp"] {
  background: var(--warn-weich);
  text-decoration: underline dotted; text-underline-offset: .22em;
}
.diktat-wort[data-stand="falsch"] { background: var(--fehler-weich); }
.diktat-wort[data-stand="fehlt"] {
  background: var(--fehler-weich);
  border: 1px dashed var(--fehler); padding: 0 .27rem;
}
.diktat-wort[data-stand="zuviel"] {
  background: var(--bg-tief); color: var(--ink-2);
  text-decoration: line-through;
}
.diktat-legende {
  display: flex; flex-wrap: wrap; gap: .35rem .6rem;
  align-items: center; margin: 0 0 .8rem; font-size: .82rem;
}

/* Ein Satz braucht zwei Zeilen. Ein einzeiliges Feld schiebt beim Tippen
   den Anfang aus dem Bild, und gerade beim Diktat will man das Geschriebene
   noch einmal ansehen, bevor man prüft. */
.antwort-feld-satz {
  min-height: 4.2rem; resize: vertical; line-height: 1.6;
}

.uebung-fuss {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; gap: .7rem; align-items: center; flex-wrap: wrap;
  padding: .8rem 1.1rem;
  border-top: 1px solid var(--linie);
  background: color-mix(in srgb, var(--karte) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.uebung-fuss .zeile-still { margin-right: auto; }

.fortschrittsband {
  height: 5px; background: var(--bg-tief); border-radius: var(--rund-voll);
  overflow: hidden; margin-bottom: 0;
}
.fortschrittsband > i {
  display: block; height: 100%; background: var(--marke);
  transition: width .35s ease-out;
}

/* --- Hinweis auf eine neue Fassung ---------------------------------------
   Unten und schmal, nicht oben und breit: Wer gerade eine Übungsrunde spielt,
   soll nicht neu geladen werden und auch nicht dazu gedrängt werden. Die
   Leiste sagt Bescheid und wartet. */
.neue-fassung {
  position: fixed; z-index: 60;
  left: 50%; transform: translateX(-50%);
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: .7rem; flex-wrap: nowrap;
  max-width: calc(100vw - 2rem);
  padding: .55rem .6rem .55rem 1rem;
  border: 1px solid var(--linie-kraeftig); border-radius: var(--rund-voll);
  background: var(--karte); color: var(--ink);
  box-shadow: var(--schatten-2);
  font-size: .88rem;
}
/* Der Satz darf auf zwei Zeilen gehen, der Knopf nie: Vorher wurde der
   Satz mit „…“ gekuerzt und der Knopf trotzdem zu „Neu la-den“ gequetscht. */
.neue-fassung > span { flex: 1 1 auto; min-width: 0; overflow: hidden;
                       display: -webkit-box; -webkit-box-orient: vertical;
                       -webkit-line-clamp: 2; line-clamp: 2; }
.neue-fassung > button { flex: none; white-space: nowrap; -webkit-hyphens: none; hyphens: none; }
/* Feste Breite statt „so schmal wie moeglich": sonst bleibt fuer den Satz
   nur der Rest neben dem Knopf, und der ist auf dem Telefon zwei Woerter. */
.neue-fassung { width: min(30rem, calc(100vw - 2rem)); }

/* Das Fortschrittsband beim Mitnehmen steht als <span> in einem <p>-Umfeld;
   ohne das hier wäre es ein Inlinekasten und damit ohne Höhe. Derselbe
   Fehler wie bei der Auflösung im Fortschrittsfaden, nur andersherum. */
[data-rolle="mitnehmen-band"] { display: block; margin: .6rem 0 .4rem; }

/* Die Fläche hinter der Modusauswahl.

   `position: relative` auf der Hülle und `absolute` auf dem Canvas: Die
   Kästen sollen darüberliegen, nicht daneben. Und `pointer-events: none`,
   weil eine Zierfläche, die Klicks schluckt, die Knöpfe unbedienbar macht —
   das ist der Fehler, den ein Hintergrund genau einmal macht.

   Die Stärke ist ein Token, damit hell und dunkel verschieden viel davon
   vertragen: Auf Papier steht ein Strich sofort da, auf dunklem Grund ist
   er bei derselben Deckkraft kaum zu sehen. */
/* Die Kacheln sind undurchsichtig, und das bleiben sie: Ein Text auf einer
   Fläche, die sich bewegt, ist der sicherste Weg, den Kontrast zu verlieren.
   Sichtbar wird die Bewegung deshalb im Rahmen um das Raster und in den
   Fugen dazwischen — dort steht kein Wort, dem sie schaden könnte.

   Der Rand ist Innenabstand und kein negativer Aussenabstand. Ein negativer
   Aussenabstand zieht den Kasten über die Spalte hinaus, und auf 320px ist
   das genau die Stelle, an der eine Seite anfängt, seitwärts zu scrollen. */
.moduswahl {
  position: relative;
  padding: 1.15rem;
  border-radius: var(--rund);
  background: var(--bg-tief);
}
.moduswahl-grund {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; border-radius: var(--rund);
}
.moduswahl .modusliste { position: relative; z-index: 1; }

/* Vier Gruppen statt siebzehn gleich grosser Kaesten.

   Sie standen alle nebeneinander, gleich wichtig — von der Tagesration,
   mit der jeder anfaengt, bis zum Satzbau, den man sucht, wenn man ihn
   will. Wer zum ersten Mal auf diese Seite kommt, sieht siebzehn Kaesten
   und faengt an zu lesen; das ist die Stelle, an der eine Uebungsseite
   jemanden verliert. Die Reihenfolge der Gruppen ist die Reihenfolge der
   Vorgabe: Was oben steht, ist das, womit man anfaengt. */
.modusgruppe + .modusgruppe { margin-top: 1.6rem; }
.modusgruppe-titel {
  margin: 0 0 .15rem; font-family: var(--schrift);
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.modusgruppe-satz {
  margin: 0 0 .7rem; font-size: .88rem; line-height: 1.45;
  color: var(--ink-2); max-width: var(--lesebreite);
}

.modusliste {
  display: grid; gap: .7rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
/* `align-items: start` und nicht die Vorgabe `stretch`: „Merkliste" hat
   einen Satz, „Lernkartei" hat vier — und in einer Reihe wurde die kurze
   so hoch wie die lange. Bei siebzehn Kaesten in vier Gruppen ist das
   kein Schoenheitsfehler, sondern der Unterschied zwischen einer Liste
   und einem Feld aus Weiss. Dieselbe Zeile steht aus demselben Grund an
   der Zeitleiste. */
.modus {
  display: block; text-align: left; width: 100%;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 1rem 1.1rem; cursor: pointer;
  font: inherit; color: var(--ink); text-decoration: none;
  transition: border-color .15s, transform .12s, box-shadow .2s;
}
.modus:hover { border-color: var(--marke); transform: translateY(-2px); box-shadow: var(--schatten-1); }
.modus b { display: block; font-family: var(--schrift-titel); font-size: 1.05rem; margin-bottom: .15rem; }
.modus span { color: var(--ink-3); font-size: .9rem; }
/* Gedrueckt, aber der Stoff ist noch unterwegs (assets/js/ueben.js,
   „Der Rest erst, wenn er gebraucht wird"): sichtbar, dass etwas passiert. */
.modus[aria-busy="true"] { cursor: progress; opacity: .65; }

/* Vertiefung und Ausnahmen — zwei Aufklapper mit verschiedenen Aufgaben.

   Die Vertiefung ist Fliesstext und liest sich wie der Rest der Seite. Die
   Ausnahmen sind eine Liste, und jede Ausnahme hat dieselbe Gestalt: wenn —
   dann — Beispiel — warum. Dieselbe Gestalt ist hier der ganze Nutzen: Fünf
   Ausnahmen nebeneinander zeigen, dass drei davon denselben Grund haben,
   und das sieht man nur, wenn sie gleich gebaut sind.

   `summary` bekommt ein sichtbares Ziel von mindestens 44px Höhe — ein
   Aufklapper, den man auf dem Telefon dreimal antippen muss, ist keiner. */
.vertiefung, .ausnahmen {
  border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--karte); margin: .8rem 0; max-width: var(--lesebreite);
}
.vertiefung > summary, .ausnahmen > summary {
  cursor: pointer; padding: .85rem 1rem; min-height: 44px;
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--schrift-titel); color: var(--ink);
  border-radius: var(--rund);
}
.vertiefung > summary:hover, .ausnahmen > summary:hover { color: var(--marke-ink); }
/* Das Warnzeichen kommt aus `zeichen.js` und bringt keine eigene Größe mit —
   in einem Flex-Kasten ohne Vorgabe wächst es auf die Höhe der Zeile mal
   Seitenverhältnis, und das waren hier 150 Pixel. Ein Symbol, das größer ist
   als seine Überschrift, ist kein Symbol mehr, sondern ein Bild. */
.ausnahmen > summary svg {
  flex: 0 0 auto; width: 1.15em; height: 1.15em; color: var(--warn);
}
.vertiefung[open] > summary, .ausnahmen[open] > summary {
  border-bottom: 1px solid var(--linie);
  border-radius: var(--rund) var(--rund) 0 0;
}
.vertiefung-inhalt { padding: .2rem 1rem 1rem; }
.vertiefung-inhalt p { max-width: none; }

/* --- 8. Auswertung ------------------------------------------------------- */

.kennzahlen {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
}
.kennzahl {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 1rem; text-align: center;
}
.kennzahl b {
  display: block; font-family: var(--schrift-titel); font-size: 2rem;
  line-height: 1.1; color: var(--marke-ink); font-weight: 600;
}
.kennzahl span { font-size: .85rem; color: var(--ink-3); }

/* Deine Sprachen auf der Lernstand-Seite: eine Karte je Paar, derselbe
   Ring wie auf der Startseite des Paares, damit eine Zahl ueberall gleich
   aussieht. Das eigene Paar traegt einen gruenen Saum. */
.sprachstand {
  display: grid; gap: .9rem; margin: 1rem 0 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}
.sp-karte {
  display: flex; gap: .9rem; align-items: center; padding: 1rem;
  background: rgba(var(--glas), var(--glas-deckung));
  border: 1px solid var(--linie); border-radius: var(--rund);
  box-shadow: var(--schatten-2), var(--glas-saum);
}
.sp-karte.sp-jetzt { border-color: #15803d; }
.sp-text { min-width: 0; }
.sp-text p { margin: 0 0 .2rem; }
.sp-name b { font-size: 1.05rem; color: var(--ink); }
.sp-hier {
  display: inline-block; white-space: nowrap; margin-left: .5rem; font-size: .75rem; padding: .1rem .5rem;
  border-radius: var(--rund-voll); background: #dcfce7; color: #14532d;
}
.sp-zahl { font-size: .88rem; color: var(--ink-2); }
.sp-pfad { display: inline-block; margin-top: .3rem; font-weight: 600; font-size: .9rem; }

.balkenliste { display: grid; gap: .6rem; margin: 1rem 0; }
.balken-zeile { display: grid; grid-template-columns: 9rem 1fr 3rem; gap: .7rem; align-items: center; font-size: .92rem; }
.balken-spur { height: .7rem; background: var(--bg-tief); border-radius: var(--rund-voll); overflow: hidden; }
.balken-spur > i { display: block; height: 100%; background: var(--marke); border-radius: var(--rund-voll); }
/* nowrap, weil „0/1166" sonst zu „0/116" und einer einsamen „6" in der
   naechsten Zeile wird. Eine Zahl, die umbricht, ist eine andere Zahl. */
.balken-zahl { text-align: right; color: var(--ink-3);
               font-variant-numeric: tabular-nums; white-space: nowrap; }

.kalender { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; max-width: 22rem; }
.kalender i {
  aspect-ratio: 1; border-radius: 3px; background: var(--bg-tief);
  display: block;
}

.werbeplatz {
  border: 1px dashed var(--linie-kraeftig); border-radius: var(--rund);
  padding: 1rem; text-align: center; color: var(--ink-3); font-size: .85rem;
  margin: 2rem 0; background: var(--bg-tief);
}

/* --- 9. Kleinigkeiten ---------------------------------------------------- */

.hinweisband {
  background: var(--warn-weich); border-bottom: 1px solid var(--linie);
  padding: .7rem 0; font-size: .92rem;
}


.ladeplatz {
  background: linear-gradient(90deg, var(--bg-tief) 25%,
    color-mix(in srgb, var(--bg-tief) 60%, var(--karte)) 50%, var(--bg-tief) 75%);
  background-size: 200% 100%;
  animation: wandern 1.4s linear infinite;
  border-radius: var(--rund-s); height: 1em;
}
@keyframes wandern { to { background-position: -200% 0; } }

@media (max-width: 780px) {
  .navi-schalter { display: block; }
  .hauptnavi {
    display: none; width: 100%; flex-direction: column; align-items: stretch;
    gap: .1rem; padding: .6rem 0 1rem;
  }
  /* Offen ist das Menue eine Flaeche unter dem Kopf, die selbst scrollt:
     Sie endet ueber der Leiste unten und nimmt nie mehr Hoehe, als der
     Bildschirm hat. */
  /* Die Hoehe: vom oberen Rand des Menues (`--navi-oben`, kern.js misst
     ihn beim Oeffnen) bis zum unteren Rand des Bildschirms, abzueglich
     der Leiste unten samt dem Rand fuer den Home-Balken. Vorher stand hier
     eine feste Schaetzung, die den Rand nicht kannte — auf dem iPhone lag
     der letzte Punkt hinter der Leiste. Die 3.9rem der Leiste werden
     immer abgezogen, auch auf Seiten ohne sie: So braucht die Regel kein
     :has(), und dort kostet sie nur einen Streifen Luft. */
  .hauptnavi.offen {
    display: flex; border-top: 1px solid var(--linie); margin-top: .5rem;
    padding: .7rem .1rem 1rem;
    max-height: calc(100vh - var(--navi-oben, 5rem) - 3.9rem - env(safe-area-inset-bottom));
    max-height: calc(100dvh - var(--navi-oben, 5rem) - 3.9rem - env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
    /* Ohne nowrap bricht die Spalte bei begrenzter Hoehe in eine zweite
       um — rechts neben den Bildschirm. */
    flex-wrap: nowrap;
  }
  /* „Lesen“ steht im Menue als eigene Gruppe; der einzelne Punkt darueber
     waere derselbe Verweis noch einmal. */
  .hauptnavi.offen:has(.navi-mehr) > a.navi-menue { display: none; }
  .navi-mehr {
    display: flex; flex-direction: column; gap: .2rem; margin-top: .8rem;
  }
  /* Oben das Konto als Zeile mit Namen. */
  .navi-oben { order: -2; display: flex; flex-direction: column; gap: .4rem; margin-bottom: .4rem; }
  .navi-konto {
    display: flex; align-items: center; gap: .75rem; min-height: 3.5rem;
    padding: .45rem .8rem; border-radius: 14px;
    background: var(--karte); border: 1px solid var(--linie);
    color: var(--ink); text-decoration: none;
  }
  .navi-konto-bild {
    width: 2.5rem; height: 2.5rem; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--marke-weich); color: var(--marke-ink);
  }
  .navi-konto-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .navi-konto-name { font-weight: 600; }
  .navi-konto-unter { font-size: .85rem; color: var(--ink-3); }
  .navi-konto > svg, .navi-weiter > svg { flex: none; color: var(--ink-3); }
  .navi-konto[aria-current="page"] { border-color: var(--marke); }
  /* „Weiterlernen“: das zuletzt geoeffnete Thema, oder der Einstieg. */
  .navi-weiter {
    display: flex; flex-direction: column; gap: .3rem; margin-bottom: .5rem;
    padding: .8rem 1rem; border-radius: 16px; min-height: 3rem;
    background: var(--marke-weich); color: var(--ink); text-decoration: none;
    border: 1px solid var(--linie);
  }
  .navi-weiter-ueber {
    font-size: .75rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--marke-ink);
  }
  .navi-weiter-titel {
    display: flex; align-items: center; gap: .5rem;
    font-weight: 600; font-size: 1.05rem; line-height: 1.3;
  }
  .navi-weiter-titel > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .navi-weiter-titel svg { flex: none; color: var(--marke-ink); }
  .navi-weiter-stand { font-size: .88rem; color: var(--ink-2); }
  .navi-weiter-start { flex-direction: row; align-items: center; gap: .75rem; }
  .navi-weiter-start > svg:first-child { color: var(--marke-ink); flex: none; }
  .navi-weiter-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
  .navi-weiter-start .navi-weiter-titel { font-size: 1rem; }
  /* Die Gruppen: zum Aufklappen, offen die, in der man steht. */
  .navi-mehr-gruppe { border-top: 1px solid var(--linie); }
  .navi-mehr-gruppe:first-of-type { border-top: 0; }
  .navi-mehr-gruppe > summary {
    display: flex; align-items: center; gap: .5rem; min-height: 2.9rem;
    padding: 0 .3rem; cursor: pointer; list-style: none;
    font-weight: 600; color: var(--ink); border-radius: var(--rund-s);
  }
  .navi-mehr-gruppe > summary::-webkit-details-marker { display: none; }
  .navi-gruppe-name { flex: 1; min-width: 0; }
  .navi-gruppe-zahl { font-size: .85rem; font-weight: 500; color: var(--ink-3); }
  .navi-mehr-gruppe > summary svg { color: var(--ink-2); transition: transform .15s; }
  .navi-mehr-gruppe[open] > summary svg { transform: rotate(180deg); }
  .navi-kacheln {
    list-style: none; margin: 0 0 .7rem; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem;
  }
  .navi-kacheln a {
    display: flex; align-items: center; gap: .6rem; min-height: 3rem;
    padding: .35rem .55rem; border-radius: 12px; box-sizing: border-box;
    background: var(--karte); color: var(--ink); text-decoration: none;
    font-size: .92rem; line-height: 1.2; overflow-wrap: anywhere;
    border: 1px solid transparent;
  }
  .navi-kacheln a > span:last-child { min-width: 0; }
  .navi-kachel-zeichen {
    width: 1.9rem; height: 1.9rem; flex: none; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-tief); color: var(--marke-ink);
  }
  .navi-kacheln a:hover { border-color: var(--linie-kraeftig); }
  .navi-kacheln a[aria-current="page"] {
    background: var(--marke-weich); color: var(--marke-ink); font-weight: 600;
    border-color: var(--marke);
  }
  /* Ganz unten, leise: Herkunft, Impressum, Datenschutz, Kontakt … */
  .navi-recht {
    list-style: none; margin: .6rem 0 0; padding: .6rem .2rem 0;
    border-top: 1px solid var(--linie);
    display: flex; flex-wrap: wrap; gap: 0 1rem;
  }
  .navi-recht a {
    display: inline-flex; align-items: center; min-height: 2.75rem;
    color: var(--ink-3); font-size: .86rem; text-decoration: none;
  }
  .navi-recht a:hover { color: var(--ink); text-decoration: underline; }
  .navi-mehr a:focus-visible, .navi-mehr summary:focus-visible,
  .navi-konto:focus-visible {
    outline: 2px solid var(--marke); outline-offset: 2px;
  }
  .navi-werkzeuge .knopf-still:has(.navi-suche-wort) {
    display: flex; flex-wrap: nowrap; align-items: center;
    width: 100%; justify-content: flex-start; gap: .55rem;
    padding: .55rem .8rem; border-radius: var(--rund-voll);
  }
  .navi-werkzeuge .knopf-still:has(.navi-suche-wort) svg { flex: none; }
  .navi-suche-wort {
    font-size: .95rem; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
  }
  /* Suche und Woerterbuch stehen hier als zwei volle Zeilen untereinander;
     ohne Umbruch stuende die zweite rechts neben dem Bildschirm. */
  .hauptnavi.offen .navi-werkzeuge { display: flex; flex-wrap: wrap; }
  .kopf-innen { flex-wrap: wrap; }
  .sprachmenue { order: 1; margin-left: 0; }
  .navi-schalter { order: 2; margin-left: 0; }
  /* Hell/Dunkel als Symbol in der Kopfzeile: Mond oder Sonne, ohne Wort —
     sonst passt die Zeile neben Marke, Sprache und Menue nicht mehr. */
  .thema-oben { order: 1; margin-left: auto; }
  .kopf-innen { column-gap: .45rem; }
  .hauptnavi { order: 3; }
  .navi-werkzeuge { margin: .5rem 0 0; }
  .leiter-sprosse { grid-template-columns: 2.8rem 1fr; }
  .leiter-zahl { grid-column: 2; }
  .balken-zeile { grid-template-columns: 6.5rem 1fr 2.7rem; font-size: .85rem; }
}

@media (max-width: 400px) {
  .thema-zeile { grid-template-columns: auto minmax(0, 1fr); }
  /* .8rem statt .75rem: Auf dem Telefon waren das 12 Pixel, und genau dort
     wird die Zeile am ehesten unterwegs gelesen. */
  .thema-zeile .thema-stand { grid-column: 2; font-size: .8rem; }
  .leiter-sprosse { grid-template-columns: 2.8rem minmax(0, 1fr); }
}

@media (max-width: 380px) {
  body { font-size: 1rem; }
  .huelle { padding: 0 .85rem; }
  .uebung-koerper { padding: 1.1rem .9rem; }
  .karte, .kasten { padding: 1rem; }
  .formtabelle td:first-child { width: auto; white-space: normal; }
}

@media print {
  .kopf, .fuss, .uebung-fuss, .vorfuehrung, .buehne-grund, .grundflaeche,
  .werbeplatz, .tableiste,
  .navi-werkzeuge, .sprungmarke { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .karte, .kasten { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  a { color: #000; text-decoration: underline; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 12. Wortschatz, Verben, Redewendungen -------------------------------
   Die Landingpages. Drei Bausteine tragen fast alles: die Wortzeile (ein
   Wort mit Übersetzung, Wortart, Stufe und Beispielsatz), die Wendungskarte
   und die Verbtabelle.

   Eine Regel, die hier mehrfach greift und die auf dieser Seite schon
   einmal Geld gekostet hat: Rasterspalten brauchen `minmax(min(…), 1fr)`.
   Zwanzig Rem sind genau 320 Pixel, und ohne `min()` kann eine Spalte nicht
   schmaler werden als ihre Vorgabe — das Telefon scrollt dann seitwärts. */

.wortlisten {
  display: grid; gap: .9rem; margin-bottom: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.wortliste-karte {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 1.1rem;
  box-shadow: var(--schatten-1);
  transition: transform .14s, box-shadow .2s, border-color .2s;
}
.wortliste-karte:hover {
  transform: translateY(-2px); box-shadow: var(--schatten-2);
  border-color: var(--linie-kraeftig); color: var(--ink);
}
.wl-titel {
  display: block; font-family: var(--schrift-titel);
  font-size: 1.06rem; margin: .5rem 0 .25rem;
}
.wl-kurz { display: block; color: var(--ink-3); font-size: .92rem;
           line-height: 1.5; }
/* Die Kategorien über den Wortlisten.
 *
 * Diese fünf Klassen standen im HTML und in keiner Regel — die Gruppierung
 * nach Kategorien ist ohne ihr Stylesheet ausgeliefert worden. Ohne Regel
 * ist ein `<a>` ein unterstrichenes Inline-Element und ein `<span>` klebt
 * am Wort davor: Aus siebzehn Sprungmarken wurde eine einzige unterstrichene
 * Textwand, in der „Das Grundgerüst22Zuhause und Wohnen17…" stand. Der
 * Fehler war auf jeder der fünf Vokabelseiten und in keiner Prüfung, weil
 * `layout` nach seitlichem Scrollen und zu kleiner Schrift sieht — und
 * fehlende Gestaltung erzeugt beides nicht. Sie fällt nur auf, wenn jemand
 * hinsieht. */
.wl-sprungleiste {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 1.2rem 0 1.8rem;
}
.wl-sprung {
  /* Die Polsterung ist gerechnet, nicht geschätzt: 0.86rem mal
     Zeilenhöhe 1.3 sind 17.9px, dazu zweimal 6.7px Polster und zweimal
     1px Rand ergibt 33px. Unter 32 wäre es ein Antippziel, das dieses
     Projekt selbst nicht zulässt — mit .3rem waren es 29, und `layout`
     hat den Push dafür abgelehnt. */
  display: inline-flex; align-items: baseline; gap: .38rem;
  padding: .42rem .7rem; border-radius: 999px;
  background: var(--karte-2); border: 1px solid var(--linie);
  color: var(--ink-2); text-decoration: none;
  font-size: .86rem; line-height: 1.3;
  transition: background .18s, border-color .18s, color .18s;
}
.wl-sprung span {
  /* .74rem wären 11.84px und damit unter der Grenze von 12.5, die diese
     Seite für jede Schrift zieht — auch für eine Zahl, die nur nebenbei
     mitläuft. */
  font-size: .8rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.wl-sprung:hover, .wl-sprung:focus-visible {
  background: var(--marke-weich); border-color: var(--linie-kraeftig);
  color: var(--ink);
}
.wl-sprung:hover span, .wl-sprung:focus-visible span { color: var(--ink-2); }

.wl-kat { margin: 2.4rem 0 0; scroll-margin-top: 4.5rem; }
.wl-kat-kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem;
  margin: 0 0 .3rem;
}
/* Die Zählung steht neben der Überschrift und nicht in ihr: eine eigene
   Grundlinie, eine eigene Größe, und vor allem ein Abstand. Ohne die
   Regel hing „22 Listen · 1170 Wörter" direkt am Kategorienamen. */
.wl-kat-kopf .zeile-still {
  font-family: var(--schrift); font-size: .82rem; font-weight: 400;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.wl-kat-kurz {
  margin: 0 0 1rem; color: var(--ink-2); max-width: 46rem;
}

.wl-zahl { display: block; margin-top: .6rem; color: var(--ink-3);
           font-size: .85rem; }

/* Die Kategorien — dieselbe Karte wie eine Wortliste, aber mit dem
   Stufenband statt eines Stufenschilds. Ein Schild ginge hier nicht: Eine
   Kategorie hat keine Stufe, sie reicht durch alle sechs, und genau das
   soll man sehen, bevor man sie öffnet. Eine Wortzahl allein verschweigt
   es — 340 Wörter, die alle auf C1 stehen, sind für jemanden auf A2 keine
   Kategorie, sondern eine Wand. */
.kat-liste {
  display: grid; gap: .9rem; margin-bottom: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}
.kat-karte {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 1.1rem;
  box-shadow: var(--schatten-1);
  transition: transform .14s, box-shadow .2s, border-color .2s;
}
.kat-karte:hover {
  transform: translateY(-2px); box-shadow: var(--schatten-2);
  border-color: var(--linie-kraeftig); color: var(--ink);
}
.kat-titel {
  display: block; font-family: var(--schrift-titel);
  font-size: 1.12rem; margin-bottom: .3rem;
}
.kat-kurz { display: block; color: var(--ink-3); font-size: .95rem;
            line-height: 1.5; }
.kat-zahl { display: block; margin-top: .55rem; color: var(--ink-3);
            font-size: .85rem; }

/* Sechs Abschnitte, breit nach Anteil. `flex` traegt die Anzahl, damit die
   Breiten sich von selbst auf hundert Prozent summieren — mit Prozenten
   gerechnet fehlt am Ende je nach Rundung ein Pixel oder eines zu viel. */
.kat-band {
  display: flex; height: .42rem; margin-top: .8rem;
  border-radius: var(--rund-voll); overflow: hidden;
  background: var(--bg-tief);
}
.kat-band-teil { display: block; background: var(--stufe-farbe, var(--marke)); }
.seitenkopf .kat-band { display: inline-flex; width: 7rem;
                        vertical-align: middle; margin: 0 .2rem 0 0; }

/* ==========================================================================
   Die Wortliste — so viele Wörter wie möglich, ohne dass eines fehlt

   Sie war eine Spalte aus Karten, jede mit ihrem Beispielsatz offen
   darunter: **vier Wörter auf einem Bildschirm**, und eine Liste mit
   vierundvierzig war vier Bildschirme lang. Wer eine Vokabel sucht,
   überfliegt; wer überfliegt, braucht viele Zeilen und keine großen.

   Zwei Änderungen, und keine kostet eine Funktion:

   **Mehrspaltig statt einspaltig.** `columns` und nicht `grid`: In einem
   Raster teilen sich alle Zellen einer Zeile die Höhe der höchsten, und
   sobald irgendwo ein Beispielsatz aufgeht, reißt es Lücken in die
   Nachbarspalten. Der Mehrspaltensatz lässt jede Spalte für sich laufen.
   Auf dem Telefon bleibt es eine Spalte, weil 21rem dort nicht zweimal
   hineinpassen — das rechnet der Browser, nicht eine Medienabfrage.

   **Zwei Zeilen statt einer.** Wort und Stufe oben, Bedeutung und Wortart
   darunter, in festen Spalten — dieselbe Ausrichtung wie vorher, nur auf
   halber Breite. Nichts ist weggelassen: Merkbild, Wort, Bedeutung,
   Wortart und Stufe stehen alle da.
   ========================================================================== */

/* --- Wortkarten in Rangfolge („Womit anfangen", Lesetexte) ---------------
   Je Wort eine ruhige Zeile: Rang, Wort und Bedeutung, rechts Stufe und
   Haeufigkeit. In einem Raster, damit Spalten nicht mitten in einer Karte
   umbrechen. */
.kw-liste {
  list-style: none; margin: 0 0 1.6rem; padding: 0;
  display: grid; gap: .45rem;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
}
.kw-liste > li { min-width: 0; }
.kw-karte {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: .2rem .75rem; height: 100%;
  padding: .55rem .75rem; border-radius: var(--rund-s);
  background: var(--karte); border: 1px solid var(--linie);
  color: var(--ink); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.kw-karte:hover, a.kw-karte:focus-visible {
  border-color: var(--marke); box-shadow: var(--schatten-1);
  transform: translateY(-1px); color: var(--ink);
}
.kw-ohne-rang .kw-karte { grid-template-columns: minmax(0, 1fr) auto; }
.kw-rang {
  min-width: 2rem; text-align: right; font-size: .8rem; font-weight: 700;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.kw-wort { min-width: 0; }
.kw-wort p { margin: 0; overflow-wrap: anywhere; }
.kw-wort .wk-en { font-weight: 650; line-height: 1.3; }
.kw-wort .wk-de { font-size: .88rem; color: var(--ink-2); line-height: 1.35; }
.kw-info {
  display: flex; flex-direction: column; align-items: flex-end; gap: .2rem;
  white-space: nowrap;
}
.kw-zahl {
  font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums;
}

.wortliste {
  columns: 21rem auto; column-gap: 1.1rem; margin-bottom: 1.6rem;
}

.wortzeile {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund-s); padding: .45rem .6rem;
  /* Eine Zeile, die der Mehrspaltensatz in der Mitte durchschneidet, ist
     unlesbar — die Bedeutung stünde in der nächsten Spalte. */
  break-inside: avoid; margin-bottom: .4rem;
}
/* Der Aufklapper. Ohne JavaScript bedienbar, mit der Tastatur bedienbar,
   und er bringt seinen Knopf selbst mit — genau das, was der frühere
   Umschalter zwischen kompakt und vollständig nicht konnte und weshalb
   dort „vollständig" die Vorgabe sein musste. */
summary.wortzeile-kopf {
  cursor: pointer; list-style: none;
}
summary.wortzeile-kopf::-webkit-details-marker { display: none; }
summary.wortzeile-kopf::after {
  content: ""; grid-area: pfeil; align-self: center;
  width: .5rem; height: .5rem; margin-right: .1rem;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: .55; transition: transform .15s;
}
details.wortzeile[open] > summary.wortzeile-kopf::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
details.wortzeile[open] {
  border-color: var(--linie-kraeftig); box-shadow: var(--lift);
}
.wortzeile:hover { border-color: var(--linie-kraeftig); }
/* Ein Raster mit **einer** Vorlage für alle Zeilen — das ist der ganze
   Unterschied zwischen einer Liste, die man überfliegen kann, und einer,
   die man lesen muss.

   Vorher war das hier `display: flex` mit `flex-wrap`, und damit setzte
   jede Zeile ihre vier Angaben dort ab, wo die vorherige aufgehört hatte:
   „ADVERB" stand bei jedem Wort woanders, die Stufe wanderte mit. Beim
   Suchen liest niemand Zeilen, sondern Spalten; ohne Spalten gibt es
   nichts zu überfliegen.

   `minmax(0, …)` an beiden Textspalten, weil eine Rasterspalte sonst
   mindestens so breit wird wie ihr längstes Wort und die Zeile aufschiebt
   — dieselbe Falle wie vorher, nur an anderer Stelle. Und die Stufe steht
   ganz rechts an der Kante: Sie ist die einzige Angabe, nach der jemand
   die Liste durchsieht, ohne den Text zu lesen. */
/* Zwei Reihen, feste Spalten, benannte Felder.

   Beim Suchen liest niemand Zeilen, sondern Spalten; ohne Spalten gibt es
   nichts zu überfliegen. Vorher war das `display: flex` mit `flex-wrap`,
   und damit setzte jede Zeile ihre Angaben dort ab, wo die vorherige
   aufgehört hatte — „ADVERB" stand bei jedem Wort woanders.

   `minmax(0, …)` an der Textspalte, weil eine Rasterspalte sonst
   mindestens so breit wird wie ihr längstes Wort und die Zeile
   aufschiebt. Und benannte Felder statt Spaltennummern, weil dieselbe
   Vorlage jetzt auf jeder Breite gilt: Was vorher eine eigene Fassung
   für das Telefon brauchte, ist die Fassung. */
.wortzeile-kopf {
  display: grid; align-items: center; gap: 0 .6rem;
  grid-template-columns: var(--wz-bild, 1.6rem) minmax(0, 1fr) auto auto;
  grid-template-areas:
    "bild en stufe pfeil"
    "bild de art   pfeil";
  min-height: 2.1rem;
}
.wortzeile-kopf > .merkbild,
.wortzeile-kopf > .merkbild-leer { grid-area: bild; }
.wortzeile-kopf > .wort-en   { grid-area: en; }
.wortzeile-kopf > .wort-de   { grid-area: de; }
.wortzeile-kopf > .wort-art  { grid-area: art; text-align: right; }
.wortzeile-kopf > .stufe-punkt { grid-area: stufe; justify-self: end; }
.merkbild-leer { display: block; }
/* Ohne Aufklapper bleibt die Pfeilspalte leer und schrumpft auf null —
   `auto` auf einer Spalte ohne Inhalt ist genau das. */

/* --- Alle Beispiele auf einmal --------------------------------------------

   Der Umschalter hiess einmal „kompakt oder vollstaendig" und war die
   einzige Art, an einen Beispielsatz zu kommen. Seit jede Zeile ein
   `<details>` ist, kommt man ohne ihn an jeden einzelnen — er tut jetzt
   nur noch das, was eine Zeile allein nicht kann: **alle auf einmal.**

   Deshalb steht hier auch keine Regel mehr, die etwas versteckt. Der
   Zustand liegt am `open` der einzelnen Zeile, wo er hingehoert, und
   nicht an einer Klasse am `body`, die dasselbe noch einmal behauptet.
   Geblieben ist eine Sache: Wenn alles offen steht, ist eine Spalte von
   21rem zu schmal fuer einen Beispielsatz, und die Liste geht auf eine
   Spalte zurueck. */
/* Die tausend wichtigsten Wörter in Blöcken zu hundert
   (`grundwortschatzseite`): Der Browser setzt einen Block erst, wenn er in
   die Nähe des Bildschirms kommt. Gemessen waren 7,5 Sekunden Blockierzeit
   auf einem gedrosselten Telefon, fast alles Satz und Gestaltung von
   Zeilen, die niemand sah. `auto` merkt sich die echte Höhe, sobald ein
   Block einmal gesetzt war; die Schätzung gilt nur bis dahin. Der Inhalt
   bleibt dabei im Dokument — die Suche im Browser findet ihn. */
.gw-block {
  content-visibility: auto; contain-intrinsic-size: auto 2600px;
  margin-bottom: .4rem;
}
[data-dichte="voll"] .wortliste { columns: auto; }
[data-dichte="voll"] .wortzeile { break-inside: auto; }

.dichte-schalter {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin: 0 0 .9rem;
}
/* .8rem und nicht .78rem: Gemessen waren es 12,48 Pixel, und `layout`
   verlangt zwölfeinhalb — unter dieser Grenze wird ein Etikett auf einem
   Telefon zu einem grauen Strich, den man für Dekoration hält. Dieselbe
   Rechnung steht schon bei `.wort-art`; sie gilt hier genauso. */
.dichte-marke {
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); margin-right: .2rem;
}
.dichte-schalter button {
  font: inherit; font-size: .88rem; padding: .3rem .75rem;
  border: 1px solid var(--linie); border-radius: 999px;
  background: var(--karte); color: var(--ink-2); cursor: pointer;
}
.dichte-schalter button[aria-pressed="true"] {
  background: var(--marke); border-color: var(--marke);
  color: var(--knopf-ink);
}
/* --- Merkbilder -----------------------------------------------------------

   `flex-shrink: 0`, weil eine Zeichnung in einer Flexzeile sonst als Erstes
   zusammengedrückt wird — auf dem Telefon war das Bild dann ein Strich.
   Und `--ink-3` statt `--ink`: Das Bild ist die Beigabe, das Wort ist die
   Sache. Ein Piktogramm in voller Textfarbe zieht den Blick vom Wort weg,
   das man eigentlich lesen soll. */
.merkbild {
  width: 1.9rem; height: 1.9rem; flex: 0 0 auto;
  color: var(--ink-3); align-self: center;
}
.merkbild-gross {
  display: flex; justify-content: center; margin-bottom: .6rem;
  color: var(--ink-3);
}
.merkbild-gross .merkbild { width: 3.4rem; height: 3.4rem; }

.wort-en {
  font-family: var(--schrift-titel); font-size: 1.05rem; font-weight: 600;
  color: var(--marke-ink);
}
.wort-de { color: var(--ink); }
/* .82rem und nicht .78rem: Gemessen waren es 12,48 Pixel, und unter
   12,5 Pixeln liest ein Etikett auf einem Telefon niemand mehr mit — es
   wird zu einem grauen Strich, den man für Dekoration hält. Der Unterschied
   kostet in der Zeile nichts, weil die Wortart ohnehin auf eigener Höhe
   sitzt. */
.wort-art {
  font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3);
}
/* Der Kasten um Beispiel und Hinweis. Er hatte genau eine Regel — die,
   die ihn im kompakten Zustand versteckte —, und die ist mit dem
   Umschalter weggefallen; `auszeichnung` hat ihn daraufhin als Klasse
   ohne Regel gemeldet, 57 489-mal. Er traegt jetzt den Abstand, den
   vorher das erste Kind trug: Das gehoert ohnehin an den Kasten und
   nicht an das, was zufaellig zuerst darin steht. */
.wortzeile-mehr { padding: .1rem 0 .15rem; }
.wortzeile-bsp {
  margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--linie);
  display: grid; gap: .15rem; font-size: .93rem;
}
.wortzeile-bsp .ziel { color: var(--ink-2); }
.wortzeile-bsp .de { color: var(--ink-3); }
.wort-hinweis {
  margin: .5rem 0 0; font-size: .88rem; color: var(--ink-3);
  border-left: 2px solid var(--linie-kraeftig); padding-left: .6rem;
  max-width: var(--lesebreite);
}
/* Der Verweis einer Verbzeile auf die Konjugationsseite des Verbs
   (`seiten_konjugation.formenverweis`): klein, unter Beispiel und Hinweis,
   und erst sichtbar, wenn jemand die Zeile aufklappt. */
.wort-formen { margin: .45rem 0 0; font-size: .88rem; }
.wort-formen a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* Die Zeile „Die Verben dieser Seite in allen Formen“ auf Themen und
   Lesetexten: eine ruhige Zeile mit Abstand, keine Leiste. */
.verbverweise { margin: 1.4rem 0; line-height: 1.7; }
.wortart-kopf {
  font-size: 1.05rem; margin: 1.6rem 0 .7rem;
  display: flex; align-items: baseline; gap: .5rem;
}
.wortart-kopf span { font-weight: 400; color: var(--ink-3); font-size: .9rem; }

.gw-filter { margin-bottom: 1.6rem; }
.gw-listenkopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem;
  margin-top: 2.2rem;
  /* Ein deutsches Kompositum bricht nicht von selbst.
     „Entwicklungszusammenarbeit" ist bei 320px allein 336 Pixel breit und
     schob die ganze Seite 31 Pixel nach rechts — sichtbar wurde das erst,
     als eine Wortliste diesen Namen bekam. `flex-wrap` half nicht: Es bricht
     zwischen Kindern, nicht innerhalb eines Wortes. */
  overflow-wrap: anywhere;
}

/* Verbtabelle: die Beispielzeile hängt unter ihrer Verbzeile und trägt
   deshalb keinen eigenen Rahmen — sie gehört zur Zeile darüber. */
.verbtabelle td, .verbtabelle th { vertical-align: baseline; }
.verbtabelle .verb-bsp td {
  padding-top: 0; border-top: 0; color: var(--ink-3);
}
.verbtabelle .verb-bsp .satzpaar { margin: 0 0 .3rem; }
.verb-gruppe { margin-top: 2.4rem; }
/* Die Untergruppen einer Verbgruppe (tools/verbfarbe.py): die Signatur in
   Formen der Zielsprache als kleine Ueberschrift, darunter ihre Tabelle. */
.verb-untergruppe { margin-top: 1.6rem; }
.verb-unter-kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem;
  margin: 0 0 .55rem; font-size: 1.05rem; line-height: 1.4;
}
.verb-unter-zeichen { font-weight: 600; }
.verb-unter-kopf .zeile-still { font-size: .85rem; font-weight: 400; }
.verb-farblegende { font-size: .92rem; color: var(--ink-2, var(--ink)); }

.wendungsliste { display: grid; gap: .7rem; }
.wendung {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund-s); padding: .95rem 1.1rem;
}
.wendung-kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
  margin-bottom: .4rem;
}
/* Auch hier das Lesemaß: Eine Redewendung mit ihrer Erklärung ist
   Fließtext, und auf einem breiten Schirm lief sie über 1110 Pixel. */
.wendung-bedeutung { margin: 0 0 .35rem; max-width: var(--lesebreite); }
.wendung-deutsch {
  margin: 0 0 .5rem; font-size: .93rem; color: var(--ink-2);
  max-width: var(--lesebreite);
}
.wendung-deutsch span { color: var(--ink-3); }
.wendung-gruppe { margin-top: 2.4rem; }

/* Das Zeitenraster ist die einzige Tabelle der Seite, die auf einem Telefon
   wirklich nicht passt — vier Spalten mit Formen darin. Sie scrollt in
   ihrem Rahmen, wie jede andere auch, und bekommt eine Mindestbreite, damit
   die Zellen nicht zu vier Buchstaben je Zeile zusammenfallen. */
.zeitenraster { min-width: 34rem; }
.zeitenraster th[scope="row"] { white-space: nowrap; }
.zeit-bsp {
  display: block; margin-top: .2rem; font-size: .88rem; color: var(--ink-3);
}

/* Der Anfängerweg: eine nummerierte Liste, in der die Nummer etwas wiegt. */
.anf-liste { list-style: none; padding: 0; margin: 0; display: grid;
             gap: .8rem; }
.anf-schritt {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 1.1rem 1.2rem;
}
.anf-kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
  margin-bottom: .45rem;
}
.anf-nummer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; flex: 0 0 auto;
  border-radius: 50%; background: var(--marke); color: var(--knopf-ink);
  font-family: var(--schrift-titel); font-size: .95rem;
}
.anf-kopf a { font-size: 1.08rem; display: inline-block; padding: .3rem 0; }
.anf-warum { margin: 0; color: var(--ink-2); }
.anf-vokabeln { margin: .6rem 0 0; font-size: .93rem; color: var(--ink-3); }

.quiz-ergebnis h3 { margin: 1.4rem 0 .5rem; font-size: 1.05rem; }

/* --- 13. Vorlesen --------------------------------------------------------
   Der Knopf hängt hinter dem englischen Satz oder Wort, an dem er hängt.
   Zwei Dinge, die er nicht darf: die Zeile aufblähen und beim Umbruch
   allein in der nächsten Zeile landen.

   `vertical-align: middle` statt `baseline`, weil ein SVG keine Grundlinie
   hat und sonst zu tief sitzt; und `line-height: 0`, damit der Knopf die
   Zeilenhöhe des Absatzes nicht anhebt — ein Knopf von 1.4rem in einer
   Zeile von 1.6 macht sonst jede zweite Zeile höher als die erste.

   Sichtbar wird er erst, wenn das Skript festgestellt hat, dass es
   überhaupt eine englische Stimme gibt: data-vorlesbar am <html>. Ein Knopf,
   der nichts tut, ist schlimmer als keiner.

   `data-vorlesbar` und nicht `data-vorlesen` — das zweite bedeutet an einem
   Element „sprich diesen Text statt deines eigenen". Ein Name mit zwei
   Bedeutungen hat das Skript einmal versuchen lassen, dem <html> einen
   Knopf danebenzustellen. */

.vorlesen { display: none; }

:root[data-vorlesbar="ja"] .vorlesen {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; line-height: 0;
  width: 1.55rem; height: 1.55rem; margin-left: .35rem; padding: 0;
  border: 1px solid transparent; border-radius: var(--rund-voll);
  background: transparent; color: var(--ink-3); cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
:root[data-vorlesbar="ja"] .vorlesen:hover,
:root[data-vorlesbar="ja"] .vorlesen:focus-visible {
  color: var(--marke-ink); background: var(--marke-weich);
  border-color: var(--linie);
}
:root[data-vorlesbar="ja"] .vorlesen[data-spricht] {
  color: var(--marke-ink); background: var(--marke-weich);
}
.vorlesen svg { width: 15px; height: 15px; }

/* Beim Drucken hat ein Lautsprecher nichts verloren. */
@media print { .vorlesen { display: none !important; } }

/* Der Anhören-Knopf in einer Höraufgabe. Größer als der kleine Lautsprecher
   neben einem Satz: Hier ist er nicht Zugabe, sondern die Aufgabe selbst —
   ohne ihn steht auf dem Schirm nichts, womit sich arbeiten ließe. */
.hoerknopf {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: .2rem 0 1rem;
}
.hoerknopf svg { width: 20px; height: 20px; }
.hoerknopf[data-spricht] {
  border-color: var(--marke); color: var(--marke-ink);
  background: var(--marke-weich);
}

/* --- Grammatikregister ---------------------------------------------------
   Der dritte Zugang zur Grammatik: nach dem Zweifel und nach dem Alphabet.
   Die Filterleiste liegt `hidden` im HTML und wird von register.js
   aufgedeckt — sichtbar ist nur, was auch funktioniert.               */

.gr-einstieg {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.2rem); align-items: center;
  margin: 0 0 2.2rem; padding: clamp(1.1rem, 3vw, 1.8rem);
  border: 1px solid var(--linie); border-radius: var(--rund-l);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--marke) 7%, var(--karte)) 0%,
      var(--karte) 62%);
  box-shadow: var(--schatten-1);
}
.gr-einstieg h2 { margin: 0 0 .5rem; font-size: 1.25rem; }
.gr-einstieg p { margin: 0 0 1rem; color: var(--ink-2); max-width: 46ch; }
.gr-einstieg-proben {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .45rem;
}
.gr-einstieg-proben a {
  display: inline-block; padding: .42rem .72rem;
  border: 1px solid var(--linie-kraeftig); border-radius: var(--rund-voll);
  background: var(--karte); color: var(--ink-2);
  font-size: .86rem; text-decoration: none;
  transition: border-color .16s, color .16s, box-shadow .16s, transform .16s;
}
.gr-einstieg-proben a:hover {
  border-color: var(--marke); color: var(--marke-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marke) 14%, transparent);
  transform: translateY(-1px);
}
@media (max-width: 46rem) {
  .gr-einstieg { grid-template-columns: 1fr; }
}

.reg-leiste {
  position: sticky; top: var(--kopf-hoehe, 3.6rem); z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem;
  margin: 0 0 1.6rem; padding: .7rem .8rem;
  border: 1px solid var(--linie); border-radius: var(--rund);
  background: color-mix(in srgb, var(--karte) 88%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: var(--schatten-1);
}
.reg-suchfeld {
  display: flex; align-items: center; gap: .5rem; flex: 1 1 18rem;
  padding: .5rem .75rem;
  border: 1px solid var(--linie-kraeftig); border-radius: var(--rund-voll);
  background: var(--bg-tief);
  transition: border-color .16s, box-shadow .16s;
}
.reg-suchfeld:focus-within {
  border-color: var(--marke);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marke) 16%, transparent);
}
.reg-lupe { display: flex; color: var(--ink-3); }
.reg-suchfeld input {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--ink);
  font: inherit; font-size: .95rem; outline: none;
}
.reg-knoepfe { display: flex; flex-wrap: wrap; gap: .3rem; }
.reg-knopf {
  padding: .34rem .6rem; font-size: .8rem; font-weight: 600;
  border: 1px solid var(--linie-kraeftig); border-radius: var(--rund-voll);
  background: var(--karte); color: var(--ink-2); cursor: pointer;
  transition: border-color .16s, color .16s, background .16s;
}
.reg-knopf:hover { border-color: var(--ink-3); color: var(--ink); }
.reg-knopf.reg-an {
  border-color: var(--stufe-farbe, var(--marke));
  color: var(--knopf-ink);
  background: var(--stufe-farbe, var(--marke));
}
.reg-zaehler {
  margin: 0; font-size: .82rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums; min-width: 6ch;
}

.reg-abschnitt { margin: 0 0 2.4rem; }
.reg-abschnitt > h2 { margin-bottom: .3rem; }
.reg-abschnitt > p { margin-bottom: 1.1rem; }

.reg-fragen { display: grid; gap: .5rem; }
.reg-frage {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .85rem 1rem; text-decoration: none;
  border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--karte); color: inherit;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.reg-frage:hover, .reg-frage:focus-visible {
  border-color: color-mix(in srgb, var(--marke) 45%, var(--linie));
  box-shadow: var(--schatten-2); transform: translateY(-1px);
}
.reg-frage-text { display: block; min-width: 0; }
.reg-frage-titel {
  display: block; font-weight: 600; color: var(--ink); margin-bottom: .2rem;
}
.reg-frage-antwort {
  display: block; color: var(--ink-2); font-size: .92rem; line-height: 1.5;
}
.reg-frage-ziel {
  display: block; margin-top: .35rem;
  font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--marke-ink);
}
.reg-frage i, .reg-thema i { font-style: italic; }

.reg-themen {
  display: grid; gap: .4rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}
.reg-thema {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .6rem .8rem; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--rund-s);
  color: inherit;
  transition: border-color .16s, background .16s;
}
.reg-thema:hover, .reg-thema:focus-visible {
  border-color: var(--linie); background: var(--karte-2);
}
.reg-thema-text { display: block; min-width: 0; flex: 1; }
.reg-thema-titel { display: block; font-weight: 600; color: var(--ink); }
.reg-thema-kurz {
  display: block; color: var(--ink-3); font-size: .86rem; line-height: 1.45;
}
.reg-thema-bereich {
  flex: 0 0 auto; align-self: center;
  font-size: .74rem; color: var(--ink-3); text-align: right; max-width: 9rem;
}
@media (max-width: 40rem) { .reg-thema-bereich { display: none; } }

.reg-nichts {
  padding: 1.1rem; border: 1px dashed var(--linie-kraeftig);
  border-radius: var(--rund); color: var(--ink-2); text-align: center;
}
.reg-weiter { margin-top: 1.6rem; }

/* --- Dranbleiben: Jahreskalender, Wochenrückblick, Serienschutz ----------- */

.jk-rahmen {
  display: grid; grid-template-columns: auto 1fr; gap: .3rem .45rem;
  overflow-x: auto; padding-bottom: .4rem;
}
.jk-ecke { grid-column: 1; grid-row: 1; }
.jk-monate {
  grid-column: 2; grid-row: 1;
  display: grid; grid-auto-flow: column; grid-auto-columns: 13px;
  color: var(--ink-3); min-width: max-content;
}
/* Der Monatsname ist breiter als seine Spalte und darf sie verlassen. Ohne
   das bricht „Aug" auf drei Zeilen zu „Au / g" um — die Spalte ist elf
   Pixel breit, der Name nicht.

   Die Größe stand bei .68rem und damit bei 10,88 Pixeln. Das ist unter der
   Grenze, ab der ein Etikett auf einem Telefon zu einem grauen Strich
   wird, den man für Dekoration hält — `layout` misst genau das und hat es
   gefunden. 12,8 Pixel passen weiterhin: Zwischen zwei Beschriftungen
   liegen mindestens drei Spalten, also 39 Pixel, und „Aug" ist bei dieser
   Größe rund 27 breit. */
.jk-monat {
  white-space: nowrap; overflow: visible; font-size: .8rem;
}
.jk-tage {
  grid-column: 1; grid-row: 2;
  display: grid; grid-template-rows: repeat(7, 13px);
  font-size: .8rem; color: var(--ink-3); align-items: center;
}
.jk-spalten { grid-column: 2; grid-row: 2; min-width: max-content; }
.jk-raster { display: grid; grid-auto-flow: column; gap: 2px; }
.jk-woche { display: grid; grid-template-rows: repeat(7, 11px); gap: 2px; }
.jk-zelle {
  width: 11px; height: 11px; border-radius: 2px;
  background: var(--bg-tief); border: 1px solid var(--linie);
  transition: transform .12s;
}
.jk-zelle:hover { transform: scale(1.45); }
.jk-leer { background: none; border-color: transparent; }
.jk-s0 { background: var(--bg-tief); }
.jk-s1 { background: color-mix(in srgb, var(--marke) 28%, var(--bg-tief));
         border-color: color-mix(in srgb, var(--marke) 30%, var(--linie)); }
.jk-s2 { background: color-mix(in srgb, var(--marke) 62%, var(--bg-tief));
         border-color: color-mix(in srgb, var(--marke) 55%, var(--linie)); }
.jk-s3 { background: var(--marke); border-color: var(--marke); }
.jk-fuss {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .6rem; margin-top: .9rem;
}
.jk-summe { margin: 0; color: var(--ink-2); font-size: .9rem; }
.jk-legende { display: flex; align-items: center; gap: 3px; }
.jk-legende .jk-zelle:hover { transform: none; }
.jk-legende-text { font-size: .8rem; color: var(--ink-3); margin: 0 .3rem; }

.wr-zahlen {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.wr-zahl {
  padding: .8rem .9rem; border: 1px solid var(--linie);
  border-radius: var(--rund-s); background: var(--karte-2);
}
.wr-wert {
  display: block; font-family: var(--schrift-titel); font-size: 1.9rem;
  line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.wr-titel { display: block; color: var(--ink-3); font-size: .84rem; }
.wr-diff { display: block; margin-top: .35rem; font-size: .8rem; font-weight: 600; }
.wr-hoch { color: var(--ok-ink); }
.wr-runter { color: var(--akzent-ink); }
.wr-gleich { color: var(--ink-3); font-weight: 400; }
.wr-satz { margin: 1rem 0 0; color: var(--ink-2); max-width: 52ch; }

.ss-punkte { display: flex; gap: .4rem; align-items: center; }
.ss-punkt {
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  border: 2px solid var(--linie-kraeftig);
}
.ss-frei { background: var(--ok); border-color: var(--ok); }
.ss-weg { background: none; }
.ss-satz { margin: .7rem 0 .3rem; color: var(--ink-2); }

.erin-zeile {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem;
  margin-top: 1rem;
}
.erin-feld { display: flex; flex-direction: column; gap: .3rem;
             font-size: .84rem; color: var(--ink-3); }
.erin-feld input {
  padding: .5rem .6rem; border: 1px solid var(--linie-kraeftig);
  border-radius: var(--rund-s); background: var(--bg-tief); color: var(--ink);
  font: inherit;
}
/* Sieben Kacheln nebeneinander, und auf 320 Pixeln passen sie nicht: Als
   Flex-Reihe mit fester Mindestbreite ragten sie drei Pixel über den Rand
   und machten die ganze Seite seitlich scrollbar. Ein Raster aus sieben
   gleichen Spalten mit `minmax(0, 1fr)` kann schrumpfen — die Kacheln
   werden auf einem schmalen Telefon enger und laufen nie über. */
.erin-tage {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .25rem; border: 0; padding: 0; margin: 0;
}
.erin-tage label { position: relative; cursor: pointer; }
.erin-tage input { position: absolute; opacity: 0; width: 0; height: 0; }
.erin-tage span {
  display: block; padding: .5rem .2rem;
  text-align: center; font-size: .82rem; font-weight: 600;
  border: 1px solid var(--linie-kraeftig); border-radius: var(--rund-s);
  color: var(--ink-3); background: var(--karte);
  transition: background .14s, color .14s, border-color .14s;
}
.erin-tage input:checked + span {
  background: var(--marke); border-color: var(--marke); color: var(--knopf-ink);
}
.erin-tage input:focus-visible + span {
  outline: 2px solid var(--marke); outline-offset: 2px;
}
/* Ein Balken, dessen Zahl nicht trägt. Dieselbe Regel wie bei den Säulen:
   gezeigt, aber nicht als Aussage. */
.balken-blass { opacity: .55; }
.balken-blass .balken-spur i { background: var(--linie-kraeftig); }

/* ==========================================================================
   Der Feinschliff
   ==========================================================================

   Eine Schicht über allem, was schon da ist: Anhebung, Schein, Lichtsaum
   und ein einheitlicher Tastaturring. Sie ändert keine Farbe und keine
   Fläche — nur Schatten, Rahmen und Übergänge. Das ist Absicht und keine
   Zurückhaltung: `tools/thema_pruefen.mjs` misst den Kontrast jedes Textes
   gegen das, was wirklich dahinterliegt, und eine Politur, die eine Fläche
   umfärbt, müsste dort neu bestehen. Ein Schein liegt außerhalb der
   Fläche und kann den Text darauf nicht erreichen.

   Vier Regeln, unter denen das hier steht:

   1. **Im Ruhezustand ist der Schein fast nichts.** Eine Seite, auf der
      dreißig Karten leuchten, leuchtet nicht — sie flimmert. Der Schein
      ist die Antwort auf den Zeiger und nicht der Normalzustand.
   2. **Angehoben wird um einen Pixel.** Zwei sind schon eine Bewegung, und
      eine Bewegung bei jedem Überfahren macht eine Liste unruhig.
   3. **Der Tastaturring ist überall derselbe** und ist nicht der
      Zeigerschein. Wer mit der Tastatur navigiert, braucht eine Marke, die
      man nicht übersieht; wer mit der Maus fährt, einen Hinweis, den man
      kaum bemerkt.
   4. **`prefers-reduced-motion` schaltet die Übergänge ab**, nicht den
      Schein. Wer keine Bewegung will, will trotzdem sehen, worauf er
      zeigt. Das erledigt der Block weiter oben, der alle Übergangsdauern
      auf null setzt.                                                     */

/* --- Der Tastaturring, einmal für alles ---------------------------------- */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--marke);
  outline-offset: 2px;
  border-radius: var(--rund-s);
}

/* Die beiden aufklappbaren Bloecke auf einer Grammatikseite. Sie erben,
   was `vertiefung` und `ausnahmen` schon haben — eine dritte und vierte
   Gestalt fuer dieselbe Geste waere Unruhe und kein Unterschied. */
.mehr-beispiele { margin-top: .9rem; }
.mehr-beispiele > summary {
  cursor: pointer; color: var(--marke-ink); font-size: .93rem;
  padding: .35rem 0; list-style: none;
}
.mehr-beispiele > summary::-webkit-details-marker { display: none; }
.mehr-beispiele > summary::before { content: '+ '; }
.mehr-beispiele[open] > summary::before { content: '– '; }
.mb-inhalt { padding-top: .5rem; border-top: 1px solid var(--linie);
             margin-top: .35rem; }

/* --- Flächen, die liegen ------------------------------------------------- */

.karte, .modus, .wortliste-karte, .kat-karte, .anl-karte,
.sprachkarte, .weg, .reg-frage, .gr-einstieg, .wendungskarte {
  /* `background-image` und nicht `background`: Die Flaechenfarbe steht
     weiter oben je Klasse und soll dort stehen bleiben. Ein Kurzform-
     `background` hier wuerde sie alle auf dieselbe Farbe ziehen. */
  background-image: var(--schein);
  box-shadow: var(--lift), var(--halo), var(--schein-hof), var(--saum);
  transition: box-shadow .18s ease, transform .18s ease,
              border-color .18s ease;
}

.modus:hover, .wortliste-karte:hover, .kat-karte:hover, .anl-karte:hover,
.sprachkarte:hover, .weg:hover, .reg-frage:hover,
.modus:focus-visible, .wortliste-karte:focus-visible,
.kat-karte:focus-visible, .anl-karte:focus-visible,
.sprachkarte:focus-visible, .weg:focus-visible,
.reg-frage:focus-visible {
  box-shadow: var(--lift-hi), var(--halo-hi), var(--schein-hof-hi),
              var(--saum);
  transform: translateY(-1px);
}

/* Eine Karte, die eine eigene Farbe trägt, leuchtet in ihrer eigenen Farbe.
   Elf Kategoriefarben und sechs Stufenfarben unter einem gemeinsamen
   grünen Schein wären elf beziehungsweise sechs getrübte Farben. */
.kat-karte, .leiter-sprosse, .gr-stufe, .stufe-kopf {
  --glanz-eigen: var(--stufe-farbe, var(--kat-farbe, var(--marke)));
}
.kat-karte:hover, .leiter-sprosse:hover, .gr-stufe:hover {
  /* Der weisse Hof steht hier VOR dem farbigen und damit hinter ihm: Zwei
     Schimmer nebeneinander waeren zwei, einer unter dem anderen ist Licht
     mit Farbe darin. */
  box-shadow:
    var(--lift-hi),
    var(--schein-hof-hi),
    0 0 0 1px color-mix(in srgb, var(--glanz-eigen) 40%, transparent),
    0 0 20px -8px color-mix(in srgb, var(--glanz-eigen) 70%, transparent),
    var(--saum);
}

/* --- Knöpfe --------------------------------------------------------------
   Der gefüllte Knopf bekommt einen Verlauf und eine Lichtkante oben. Beides
   ist so schwach, dass es nur zusammen wirkt — und beides sitzt INNEN, weil
   ein Verlauf auf der Fläche den Text darauf trägt und deshalb gemessen
   werden muss. Gemessen ist er: Die hellste und die dunkelste Stelle des
   Verlaufs liegen beide über 4,5:1 gegen --knopf-ink, weil er nur acht
   Prozent zwischen Anfang und Ende spannt.                                */

.knopf {
  background-image: linear-gradient(180deg,
    color-mix(in srgb, #fff 8%, transparent) 0%,
    transparent 55%,
    color-mix(in srgb, #000 6%, transparent) 100%);
  box-shadow: var(--lift), var(--halo);
  transition: box-shadow .18s ease, transform .18s ease, filter .18s ease;
}
.knopf:hover {
  box-shadow: var(--lift-hi),
              0 0 24px -8px color-mix(in srgb, var(--marke) 70%, transparent);
  transform: translateY(-1px);
  filter: saturate(1.06);
}
.knopf:active { transform: translateY(0); }

.knopf-2, .knopf-zweit, .knopf-still {
  transition: box-shadow .18s ease, border-color .18s ease,
              color .18s ease, background .18s ease, transform .18s ease;
}
.knopf-2:hover, .knopf-zweit:hover, .knopf-still:hover {
  box-shadow: var(--lift), var(--halo-hi);
  transform: translateY(-1px);
}

/* --- Zeilen und Listen ---------------------------------------------------
   Eine Zeile in einer langen Liste darf sich nicht heben — sonst springt
   beim Überfahren die halbe Liste. Sie bekommt stattdessen eine Kante in
   der Markenfarbe, die von links hereinwächst.                            */

.thema-zeile, .reg-thema, .sts-treffer, .wortzeile {
  position: relative;
  transition: background .16s ease, border-color .16s ease;
}
.thema-zeile::before, .reg-thema::before {
  content: ""; position: absolute; left: 0; top: 8%; bottom: 8%;
  width: 2px; border-radius: 2px;
  background: var(--marke);
  transform: scaleY(0); transform-origin: center;
  transition: transform .18s ease;
}
.thema-zeile:hover::before, .reg-thema:hover::before,
.thema-zeile:focus-visible::before, .reg-thema:focus-visible::before {
  transform: scaleY(1);
}

/* --- Aufklappbares -------------------------------------------------------
   Das Dreieck dreht sich mit. Ohne das dreht es sich sprunghaft, und ein
   sprunghaftes Dreieck ist das erste, was an einer Oberfläche billig
   aussieht.                                                               */

.aus-karte > summary, .vertiefung > summary {
  transition: background .16s ease;
}
.aus-karte > summary::marker, .vertiefung > summary::marker { color: var(--ink-3); }

/* Der Kopf hat weiter oben schon eine Regel fuer den gescrollten Zustand;
   hier steht deshalb nichts dazu. Zwei Regeln fuer denselben Zustand sind
   zwei Wahrheiten, und die spaetere gewinnt aus dem falschen Grund. */
/* Die deutsche Fassung über einem zu legenden Satz. Sie ist die Aufgabe und
   nicht ein Hinweis — deshalb in der Leseschrift und nicht in der stillen. */
.ordnen-deutsch {
  font-family: var(--schrift-titel); font-size: 1.15rem;
  margin: 0 0 .3rem; color: var(--ink);
}

/* --------------------------------------------------------------------------
   Lesetexte

   Der Text steht in einer schmalen Spalte — rund 66 Zeichen, nicht die
   Breite der Karte. Alles andere auf dieser Seite ist zum Nachschlagen
   gebaut; das hier ist zum Lesen, und eine Zeile über die halbe
   Bildschirmbreite verliert man beim Umbruch.
   -------------------------------------------------------------------------- */
.lesetext { position: relative; max-width: 40rem; font-size: 1.08rem; line-height: 1.85; }
.lesetext p { margin: 0 0 1.1rem; }
.lesetext p:last-child { margin-bottom: 0; }

/* Ein anklickbares Wort darf nicht aussehen wie ein Verweis. Die Seite ist
   voll von Verweisen, und dreihundert unterstrichene Wörter in einem
   Absatz wären keine Hilfe, sondern ein Muster. Es zeigt sich erst unter
   dem Zeiger — und auf dem Telefon, wo es keinen gibt, beim Antippen. */
.lw { cursor: pointer; border-radius: 3px; }
.lw:hover, .lw:focus-visible { background: var(--marke-weich); outline: none; }
.lw-offen { background: var(--marke-weich); box-shadow: 0 0 0 1px var(--marke); }

.lw-karte {
  position: absolute; z-index: 5; min-width: 12rem; max-width: 18rem;
  padding: .6rem .75rem; border-radius: 10px;
  background: var(--karte); color: var(--ink);
  border: 1px solid var(--linie-kraeftig); box-shadow: var(--schatten-3);
  font-size: .92rem; line-height: 1.45;
}
.lw-karte p { margin: 0; }
.lw-wort { font-weight: 600; }
.lw-de { margin-top: .15rem !important; }
.lw-quelle { color: var(--ink-3); font-size: .82rem; margin-top: .3rem !important; }
.lw-stufe {
  display: inline-block; padding: 0 .35rem; border-radius: 4px;
  border: 1px solid var(--linie-kraeftig); font-size: .8rem;
}

/* Der Absatz, in dem die Antwort steht. Ein Strich am Rand und kein
   Farbfeld: Der Satz bleibt lesbar, die Stelle ist trotzdem zu finden. */
.lp-treffer {
  border-left: 3px solid var(--marke); padding-left: .7rem; margin-left: -.85rem;
}

.lesezahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .6rem; margin: 1.4rem 0 0;
}
.lesezahlen > div {
  padding: .6rem .7rem; border: 1px solid var(--linie); border-radius: 10px;
  background: rgba(var(--tint), .03);
}
.lesezahlen dt { font-size: .85rem; color: var(--ink-3); margin: 0; }
.lesezahlen dd {
  margin: .2rem 0 0; font-size: 1.15rem; font-family: var(--schrift-titel);
  font-variant-numeric: tabular-nums;
}

/* „Über die Sprache": derselbe Steckbrief wie die Lesezahlen, aber mit
   Wörtern statt Zahlen — also breitere Spalten und Fließtextschrift. */
.sprachinfo-steckbrief {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-bottom: 2.2rem;
}
.sprachinfo-steckbrief dd {
  font-family: inherit; font-size: 1rem; line-height: 1.45;
}
.sprachinfo h2 { margin-top: 2.4rem; }
.sprachinfo h2:first-child { margin-top: .4rem; }
.sprachinfo p { line-height: 1.7; }

.lesekarten {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: .8rem; margin-bottom: 1.6rem;
}
.lesekarte {
  display: block; padding: .9rem 1rem; border-radius: 12px;
  border: 1px solid var(--linie); background: rgba(var(--tint), .03);
  color: inherit; text-decoration: none;
}
.lesekarte:hover { border-color: var(--marke); box-shadow: var(--schatten-2); }
.lesekarte h3 { margin: .35rem 0 .3rem; font-size: 1.05rem; }
.lesekarte p:last-child { margin: 0; color: var(--ink-2); font-size: .92rem; }

.lesefragen { display: grid; gap: .9rem; }
.lesefrage {
  padding: .9rem 1rem; border: 1px solid var(--linie); border-radius: 12px;
  background: rgba(var(--tint), .03);
}
.lf-frage { margin: 0 0 .6rem; }
.lf-antworten { display: grid; gap: .4rem; }
.lf-antwort {
  text-align: left; padding: .55rem .7rem; border-radius: 9px;
  border: 1px solid var(--linie-kraeftig); background: transparent;
  color: inherit; font: inherit; cursor: pointer;
}
.lf-antwort:hover:not(:disabled) { border-color: var(--marke); }
.lf-antwort:disabled { cursor: default; opacity: 1; }
.lf-richtig { border-color: var(--ok); background: var(--ok-weich); }
.lf-falsch { border-color: var(--fehler); background: var(--fehler-weich); }
.lf-beleg {
  margin: .7rem 0 0; padding-left: .7rem; border-left: 3px solid var(--linie-kraeftig);
  color: var(--ink-2); font-style: italic;
}
.lf-stand { margin-top: 1rem; color: var(--ink-3); }

/* Vom nachgeschlagenen Wort zurück in die Abfrage: der Weg auf die
   Wortliste und der Knopf, der sie auf die Merkliste legt. */
.lw-wege { display: flex; gap: .4rem; margin-top: .5rem !important; flex-wrap: wrap; }
.lw-weg {
  display: inline-block; padding: .25rem .5rem; border-radius: 7px;
  border: 1px solid var(--linie-kraeftig); background: transparent;
  color: inherit; font: inherit; font-size: .82rem; cursor: pointer;
  text-decoration: none;
}
.lw-weg:hover { border-color: var(--marke); }

/* Das Band der Wortlisten unter dem Text trägt eine Zahl je Liste. */
.quellenband .quellen-marke span {
  margin-left: .3rem; padding: 0 .3rem; border-radius: 5px;
  background: rgba(var(--tint), .10); font-variant-numeric: tabular-nums;
}

/* Der Lesestand: was von diesem Text schon sitzt. Dieselben Kacheln wie
   die Messwerte darüber — es ist dieselbe Art von Auskunft, nur über den
   Leser statt über den Text. */
.lesestand { margin-top: 1.6rem; }
.lesestand .lesezahlen { margin-top: .8rem; }
.lesekarte-gelesen { border-color: var(--marke); }
.lese-haken {
  margin-left: .4rem; padding: 0 .35rem; border-radius: 5px;
  background: var(--marke-weich); color: var(--marke-ink); font-size: .78rem;
}

/* Wie viel eines Textes jemand schon kennt — auf der Karte, neben Stufe
   und Länge. Still gesetzt: Es ist eine Auskunft und keine Note. */
.lese-anteil {
  margin-left: .4rem; padding: 0 .35rem; border-radius: 5px;
  border: 1px solid var(--linie-kraeftig); font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Der Filter über der Grammatikliste

   Zwei Reihen Chips, und sie sollen wie ein Werkzeug aussehen und nicht wie
   eine Navigation: klein, ruhig, mit der Zahl daneben. Gewählt ist, was
   Farbe hat — `aria-pressed` trägt dieselbe Aussage für alle, die die Farbe
   nicht sehen.
   -------------------------------------------------------------------------- */
.gfilter {
  border: 1px solid var(--linie); border-radius: 12px;
  background: rgba(var(--tint), .03);
  padding: .8rem .9rem; margin: 0 0 1.6rem;
  display: grid; gap: .55rem;
}
.gfilter-reihe { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
/* Mindestens 32px hoch und keine Schrift unter 12,5px: Beides fordert die
   Gruppe `layout`, und beides ist hier keine Schikane — die Chips werden auf
   einem Telefon mit dem Daumen getroffen, und die Zahl daneben ist eine
   Auskunft und keine Verzierung. Die erste Fassung kam auf 28px und 12,48px
   und wurde gemeldet. */
.gfilter-schild {
  font-size: .82rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); margin-right: .35rem; min-width: 4.2rem;
}
.gchip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .4rem .7rem; min-height: 34px; border-radius: 999px; font: inherit;
  font-size: .9rem; line-height: 1.2; cursor: pointer;
  border: 1px solid var(--linie-kraeftig); background: transparent;
  color: var(--ink-2);
}
.gchip span {
  font-size: .82rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.gchip:hover { border-color: var(--marke); color: var(--ink); }
.gchip[aria-pressed="true"] {
  background: var(--marke); border-color: var(--marke); color: var(--knopf-ink);
}
.gchip[aria-pressed="true"] span { color: var(--knopf-ink); opacity: .8; }
.gchip[data-stufe][aria-pressed="true"] {
  background: var(--stufe-farbe, var(--marke));
  border-color: var(--stufe-farbe, var(--marke));
}
.gfilter-stand { margin: .2rem 0 0; color: var(--ink-3); font-size: .9rem; }

/* --------------------------------------------------------------------
   Glas auf den grossen Kaesten

   Nur auf den grossen: Ein Chip von zwei Zentimetern Breite mit
   Unschaerfe darunter kostet dasselbe wie eine ganze Karte und sieht
   nach nichts aus. `backdrop-filter` ist die teuerste Eigenschaft in
   diesem Stylesheet — sie gehoert dorthin, wo man sie sieht.

   Die Reihenfolge ist Absicht: Diese Regeln stehen am Ende der Datei,
   damit sie das `background: var(--karte)` der Kastenregeln ueberschreiben,
   ohne dass dafuer eine hoehere Spezifitaet noetig waere. Ein
   `!important` waere die andere Loesung und die schlechtere — es nimmt
   der naechsten Aenderung die Moeglichkeit, es anders zu wollen.
   -------------------------------------------------------------------- */
/* **Die Vorführung ist kein Glaskasten**, und sie stand zuerst mit in
   dieser Liste.

   Sie sitzt als Einzige auf der Bühne, also über dem kräftigen Canvas —
   und ihr Inhalt ist eine Übungsaufgabe in kleiner Schrift. Bei siebzig
   Prozent Deckung schlägt der Grund durch, und `thema` hat auf der dunklen
   Fassung 1,67:1 gemessen, wo 4,5 nötig sind: an vier Stellen, alle
   innerhalb dieses einen Kastens.

   Glas ist eine Oberfläche für Karten, die man ansieht. Ein Kasten, in dem
   gelesen wird, braucht einen Grund, der steht. Er behält den Schein und
   den Saum und bekommt seine Deckung zurück. */
.vorfuehrung {
  background: var(--karte);
  box-shadow: var(--schatten-2), var(--halo), var(--glas-saum);
}

/* **Wer Glas bekommt, und wer nicht.**
   Milchglas ist nicht umsonst: Der Weichzeichner muss neu gerechnet
   werden, sooft sich hinter der Karte etwas bewegt — und hinter jeder
   Karte dieser Seite läuft eine Fläche mit vierundzwanzig Bildern in der
   Sekunde. Bei einer Handvoll Karten ist das nichts, bei
   vierhundertsechsundfünfzig ist es ein warmes Telefon. Nachgezählt auf
   den Seiten, die es betrifft: `.karte` fünf, `.modus` siebzehn, `.gfam`
   fünf, `.sprachkarte` fünf — und `.wortliste-karte` vierhundert­
   sechsundfünfzig. Deshalb steht die eine nicht in dieser Liste; sie
   behält den Schein und den Saum, die nichts kosten.
   Und `.vorfuehrung` steht aus dem anderen Grund nicht hier: Dort wird
   gelesen, und Glas hatte den Kontrast auf 1,67:1 gedrückt. Glas ist für
   Karten, die man ansieht. */
.sprachkarte,
.weg,
.aw-karte,
.karte,
.modus,
.gfam,
.kat-karte,
.anl-karte,
.lw-karte,
.kennzahl,
.reg-frage,
.anf-schritt {
  background: rgba(var(--glas), var(--glas-deckung));
  backdrop-filter: blur(var(--glas-unschaerfe)) saturate(var(--glas-saettigung));
  -webkit-backdrop-filter: blur(var(--glas-unschaerfe)) saturate(var(--glas-saettigung));
  box-shadow: var(--schatten-2), var(--halo), var(--glas-saum);
}

.sprachkarte:hover, .sprachkarte:focus-visible,
.weg:hover, .weg:focus-visible,
.modus:hover, .modus:focus-visible,
.kat-karte:hover, .kat-karte:focus-visible,
.anl-karte:hover, .anl-karte:focus-visible,
.reg-frage:hover, .reg-frage:focus-visible {
  box-shadow: var(--schatten-3), var(--halo-hi), var(--glas-saum);
}

/* Wo es keine Unschaerfe gibt, gibt es auch keine Durchsicht: Eine
   durchscheinende Flaeche ohne den Weichzeichner darunter ist kein Glas,
   sondern ein Text auf einem unruhigen Grund. Dann lieber deckend. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sprachkarte, .weg, .aw-karte { background: var(--karte); }
}

/* Wer wenig Bewegung will, will auch keinen wandernden Hintergrund durch
   seine Kaesten schimmern sehen. */
@media (prefers-reduced-transparency: reduce) {
  .sprachkarte, .weg, .aw-karte {
    background: var(--karte);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

/* Der Herausgeber ganz oben auf dem Impressum: ruhig, nicht klein
   gedruckt. Wer diese Seite aufschlaegt, sucht genau das. */
.impressum-herausgeber {
  margin: 0 0 1.2rem; color: var(--ink-2); font-size: 1.02rem;
}


/* Die Endung in einer Formtabelle.
   Farbe **und** Gewicht, nicht nur Farbe: Wer Rot und Gruen nicht
   auseinanderhaelt, sieht sonst eine Tabelle ohne jede Hervorhebung. Die
   Marke traegt die Farbe, weil sie auf beiden Fassungen gemessen ist —
   ein eigener Ton waere ein zweiter, den `pruefen.sh thema` erst wieder
   prueft, wenn jemand daran denkt. */
.formtabelle .endung {
  color: var(--marke-ink); font-weight: 700;
}

/* Die Farben der Konjugationstafel (tools/formfarbe.py).
   Jede Rolle hat Farbe **und** eine zweite Auszeichnung — Gewicht,
   Unterstreichung, Wellenlinie —, damit die Tafel auch ohne Farbsehen
   lesbar bleibt. Die Toene sind auf Papier und im Dunkeln gegen den
   Seitengrund gerechnet (mindestens 4,5 : 1).
   Verneinung, Fragebildung und Kurzform gehoeren zum Satz und stehen auch
   in Sonder- und Mustertafeln. Ihre Toene sind die der Kategoriefarben
   (--vk-mensch, --vk-grundlagen, --vk-freizeit), ihre zweite Auszeichnung
   ein Rahmen, eine gestrichelte und eine gepunktete Linie; die Pruefung
   `pruefen.sh formfarbe` rechnet den Kontrast aller neun Toene nach. */
:root {
  --ff-stamm: #1f2937; --ff-unregel: #b42318; --ff-zeit: #6d28d9;
  --ff-person: #047857; --ff-zeitperson: #1d4ed8; --ff-hilf: #8a5100;
  --ff-neg: #be185d; --ff-frage: #0f766e; --ff-kurz: #9a3412;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --ff-stamm: #e5e7eb; --ff-unregel: #ff9a8f; --ff-zeit: #c9b8ff;
    --ff-person: #6ee7b7; --ff-zeitperson: #9cc3ff; --ff-hilf: #f5c04a;
    --ff-neg: #f9a8d4; --ff-frage: #5eead4; --ff-kurz: #fdba74;
  }
}
:root[data-thema="dunkel"] {
  --ff-stamm: #e5e7eb; --ff-unregel: #ff9a8f; --ff-zeit: #c9b8ff;
  --ff-person: #6ee7b7; --ff-zeitperson: #9cc3ff; --ff-hilf: #f5c04a;
  --ff-neg: #f9a8d4; --ff-frage: #5eead4; --ff-kurz: #fdba74;
}
.ff-stamm { color: var(--ff-stamm); font-weight: 600; }
.ff-unregel { color: var(--ff-unregel); font-weight: 700;
  text-decoration: underline wavy; text-underline-offset: 0.2em; }
.ff-zeit { color: var(--ff-zeit); font-weight: 700;
  text-decoration: underline; text-underline-offset: 0.2em; }
.ff-person { color: var(--ff-person); font-weight: 700; }
.ff-zeitperson { color: var(--ff-zeitperson); font-weight: 700;
  text-decoration: underline double; text-underline-offset: 0.2em; }
.ff-hilf { color: var(--ff-hilf); font-weight: 700; font-style: italic; }
.ff-neg { color: var(--ff-neg); font-weight: 700; border-radius: 0.25em;
  box-shadow: inset 0 0 0 1.5px currentColor; padding: 0 0.15em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ff-frage { color: var(--ff-frage); font-weight: 700;
  text-decoration: underline dashed; text-decoration-thickness: 2px;
  text-underline-offset: 0.22em; }
.ff-kurz { color: var(--ff-kurz); font-weight: 700;
  text-decoration: underline dotted; text-decoration-thickness: 2px;
  text-underline-offset: 0.22em; }
.ff-legende { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem;
  margin: 0 0 0.6rem; font-size: 0.92rem; }
.ff-legende span::before { content: "■ "; text-decoration: none;
  display: inline-block; }

/* Die Farben der Beispielsaetze (tools/beispielfarbe.py): der Kern — die
   Form, um die es im Thema geht — wie mit einem Leuchtstift unterlegt, das
   Signal — das Wort, das sie verlangt — blau und gepunktet unterstrichen.
   Auch hier traegt jede Rolle eine zweite Auszeichnung neben der Farbe
   (Unterlegung und Strich unten, Punktlinie), damit sie ohne Farbsehen
   lesbar bleibt; die Schrift selbst bleibt in der Textfarbe, also so
   kontrastreich wie der Satz drumherum. */
:root {
  --bf-kern-grund: rgba(250, 204, 21, 0.32); --bf-kern-strich: #b45309;
  --bf-signal: #0f766e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --bf-kern-grund: rgba(250, 204, 21, 0.2); --bf-kern-strich: #f5c04a;
    --bf-signal: #5eead4;
  }
}
:root[data-thema="dunkel"] {
  --bf-kern-grund: rgba(250, 204, 21, 0.2); --bf-kern-strich: #f5c04a;
  --bf-signal: #5eead4;
}
.bf-kern {
  background: var(--bf-kern-grund);
  box-shadow: inset 0 -2px 0 var(--bf-kern-strich);
  border-radius: 3px;
  padding: 0 0.1em;
  font-weight: 700;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.bf-signal {
  font-weight: 600;
  border-radius: 4px;
  padding: 0 0.15em;
  box-shadow: inset 0 0 0 1.5px var(--bf-signal);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Japanisch: Die Umschrift unter einer markierten Stelle gehoert zu ihr
   und traegt dieselbe Farbe — sonst stuende der Kern oben farbig und
   unten grau, als waeren es zwei Dinge. */
.bf-kern .ja-w::after { font-weight: 700; color: var(--bf-kern-strich); }
.bf-signal .ja-w::after { color: inherit; }
.bf-legende { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem;
  margin: 0 0 0.6rem; font-size: 0.92rem; color: var(--ink-2, inherit); }

/* --- Der Zeitstrahl ---------------------------------------------------------

   Die Achse läuft über tausend Einheiten und nicht über hundert, damit das
   Seitenverhältnis von selbst stimmt. Der erste Entwurf rechnete in
   Hundertstel und stellte `preserveAspectRatio="none"` — bei zwölf Spuren
   ergab das ein Bild von knapp viertausend Pixeln Höhe, und bei ungleicher
   Streckung wäre aus jedem Punkt eine Ellipse geworden.

   Das Bild ist ein `role="img"`; bedient wird die Liste darunter. Wer mit
   der Maus über eine Zeile fährt, sieht ihre Spur aufleuchten — auf
   Zeigergeräten, wie überall sonst auf dieser Seite. */
.zeitstrahl-block { margin: 1.4rem 0 2rem; }
.zeitstrahl {
  width: 100%; height: auto; display: block;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund-s); padding: .4rem 0;
}
.zs-achse { stroke: var(--linie-kraeftig); stroke-width: 1.5; }
.zs-jetzt {
  stroke: var(--marke); stroke-width: 1.5; stroke-dasharray: 4 4;
  opacity: .75;
}
.zs-marke {
  font-size: 13px; fill: var(--ink-3); font-family: var(--schrift);
}
.zs-jetzt-text { fill: var(--marke-ink); font-weight: 600; }
.zs-grund { stroke: var(--linie); stroke-width: 1; }
.zs-punkt { fill: var(--marke); stroke: none; }
.zs-bezug { fill: none; stroke: var(--ink-3); stroke-width: 1.2; }
.zs-spanne { stroke: var(--marke); stroke-width: 7; stroke-linecap: round; }
.zs-bis { stroke: var(--marke); stroke-width: 7; stroke-linecap: butt; }
.zs-band {
  stroke: var(--marke); stroke-width: 5; stroke-dasharray: 10 7;
  opacity: .8; stroke-linecap: butt;
}
/* Beim Hervorheben treten die anderen zurück, statt dass eine lauter
   wird: Elf gedämpfte Spuren und eine normale liest sich als „diese hier";
   eine grelle unter elf normalen liest sich als Fehler.

   Die hervorgehobene bekommt eine Klasse und wird nicht über ihren Index
   im Stylesheet angesprochen — CSS kann ein `data-spur` nicht gegen einen
   Wert am Vorfahren halten, und zwölf Regeln zu schreiben wäre eine
   Tabelle neben einer abgeleiteten. */
.zs-spur { opacity: .55; transition: opacity .12s; }
.zeitstrahl-block[data-hell] .zs-spur { opacity: .16; }
.zeitstrahl-block[data-hell] .zs-spur.zs-an { opacity: 1; }
.zs-zeile.zs-an { background: var(--karte-2); }

.zs-legende {
  display: flex; flex-wrap: wrap; gap: .3rem 1.1rem;
  margin: .6rem 0 1rem; font-size: .84rem; color: var(--ink-3);
}
.zs-legende > span { display: inline-flex; align-items: center; gap: .4rem; }
.zs-zeichen { display: inline-block; width: 1.1rem; height: .5rem; }
.zs-z-punkt {
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--marke);
}
.zs-z-spanne { background: var(--marke); border-radius: 999px; height: .32rem; }
.zs-z-bis { background: var(--marke); height: .32rem; }
.zs-z-band {
  height: .3rem;
  background: repeating-linear-gradient(90deg, var(--marke) 0 .3rem,
              transparent .3rem .5rem);
}
.zs-z-bezug {
  width: .5rem; height: .5rem; border-radius: 50%;
  border: 1.5px solid var(--ink-3);
}

.zs-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.zs-zeile {
  display: grid; gap: .1rem .9rem; padding: .45rem .6rem;
  border-bottom: 1px solid var(--linie);
  grid-template-columns: minmax(0, 15rem) minmax(0, 11rem) minmax(0, 1fr);
  align-items: baseline;
}
.zs-zeile > a, .zs-zeile > span:first-child { font-weight: 600; }
.zs-zeile > a {
  display: inline-flex; align-items: center; min-height: 32px;
}
.zs-form { color: var(--ink-2); font-size: .93rem; }
.zs-wann { color: var(--ink-3); font-size: .93rem; }
@media (max-width: 46rem) {
  .zs-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .zs-wann { grid-column: 1 / -1; }
}

/* --- Die Stufenseite, nach Familien -----------------------------------------

   Nebeneinander und nicht untereinander: Auf einer einzelnen Stufe hat ein
   Bereich oft ein oder zwei Themen, und in einer Spalte wird daraus eine
   Kolonne aus Überschriften. `auto-fill` mit einer Mindestbreite statt
   einer festen Spaltenzahl — auf dem Telefon bleibt es eine Spalte, ohne
   dass dafür eine eigene Regel nötig wäre. */
.stufe-familien {
  display: grid; gap: 1.6rem 2rem; margin-bottom: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  align-items: start;
}
.stufe-familie { min-width: 0; }
.stufe-familie-kopf {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .7rem; font-size: 1.18rem;
  padding-bottom: .35rem; border-bottom: 1px solid var(--linie-kraeftig);
}
.stufe-familie-kopf .zeile-still { margin-left: auto; font-size: .82rem; }
.stufe-familie .bereich-block { margin: 0 0 1rem; }
.stufe-familie .bereich-kopf h3 {
  margin: 0; font-size: 1rem; font-family: var(--schrift-titel);
}

/* --- Die Inhaltsleiste der Grammatik ----------------------------------------

   Am breiten Fenster eine Spalte links, klebend, mit eigener Rolle: Wer
   ein Thema liest, sieht daneben, wo es sitzt. Auf dem Telefon steht sie
   **unter** dem Text — `order: 2` —, denn hundert Verweise vor dem ersten
   Satz sind keine Navigation, sondern eine Mauer.

   Es ist ein `<details open>`: Die Zusammenfassung ist am Rand überflüssig
   und wird dort ausgeblendet, auf dem Telefon ist sie der Griff zum
   Zuklappen. Beides ohne eine Zeile JavaScript, und nichts ist je
   verborgen, ohne dass ein Griff daneben liegt. */
.mit-gnav { display: grid; gap: 1.4rem 2.2rem; grid-template-columns: minmax(0, 1fr); }
.mit-gnav > .gnav { order: 2; min-width: 0; }
.mit-gnav > .dokument { order: 1; min-width: 0; }

.gnav { font-size: .92rem; }
.gnav-kopf {
  cursor: pointer; font-family: var(--schrift-titel); font-weight: 600;
  padding: .55rem .8rem; border: 1px solid var(--linie);
  border-radius: var(--rund-s); background: var(--karte);
}
.gnav-familie { margin-bottom: 1.1rem; }
.gnav-familie-kopf {
  display: flex; align-items: center; gap: .45rem;
  margin: 0 0 .35rem; font-size: .95rem;
  font-family: var(--schrift-titel); font-weight: 600; color: var(--ink);
  line-height: 1.2; letter-spacing: -.01em;
  padding-bottom: .25rem; border-bottom: 1px solid var(--linie);
}
.gnav-familie-kopf .gfam-zeichen svg { width: 1em; height: 1em; }
.gnav-bereich {
  margin: .55rem 0 .2rem; font-size: .85rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3);
}
.gnav-themen { list-style: none; margin: 0; padding: 0; }
/* Zweiunddreißig Pixel hoch, weil ein Ziel, das man mit dem Daumen
   treffen soll, so hoch sein muss. `layout` besteht darauf, und in einer
   Leiste mit hundertzwanzig Verweisen ist es besonders wahr. */
.gnav-themen a {
  display: flex; align-items: center; gap: .4rem; min-height: 32px;
  padding: .25rem .35rem; border-radius: var(--rund-s);
  color: var(--ink-2); text-decoration: none; line-height: 1.35;
}
.gnav-themen a:hover { background: var(--karte-2); color: var(--ink); }
.gnav-themen a[aria-current="page"] {
  background: var(--karte-2); color: var(--ink); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--marke);
}
.gnav-titel { min-width: 0; overflow-wrap: anywhere; }
.gnav-stufe {
  /* Nie umbrechen: Bei langen chinesischen Titeln stand die Marke sonst
     als „A“ über „1“. */
  flex: none; white-space: nowrap;
  margin-left: auto; font-size: .85rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* **Die Leiste wandert mit, über die ganze Seite.** Geklebt hat vorher
   `.gnav-inhalt`, das Kind des `<details>` — und ein klebendes Element
   bewegt sich nur innerhalb seines Elternkastens. Das ist bei einem
   `<details>` nicht das `<details>` selbst (das die Gitterzeile auf
   voller Artikelhöhe ausfüllte), sondern der innere Inhaltskasten, und der
   ist genau so hoch wie die Liste. Gemessen auf „Weiche Laute" (Polnisch,
   1 280 Pixel): Leiste 688 Pixel hoch, Artikel 5 128 — nach einem halben
   Bildschirm war sie oben hinausgerollt, und links stand nur noch leere
   Fläche. Jetzt klebt das `<details>` selbst; sein Elternkasten ist das
   Gitter, und das ist so hoch wie der Artikel.

   `--leiste-oben` ist die Unterkante von Kopf und Reitern; themaseite.js
   misst sie nach (der Kopf kann zweizeilig werden), der Wert hier ist der
   gemessene Normalfall. `overscroll-behavior` hält das Mausrad in der
   Leiste, wenn sie am Ende ist — sonst rollt plötzlich die Seite. */
@media (min-width: 64rem) {
  .mit-gnav { grid-template-columns: 15.5rem minmax(0, 1fr); }
  .mit-gnav > .gnav {
    order: 0; align-self: start;
    position: sticky; top: var(--leiste-oben, 7.6rem);
    max-height: calc(100vh - var(--leiste-oben, 7.6rem) - 1rem);
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-gutter: stable;
    padding-right: .3rem;
  }
  .mit-gnav > .gnav > summary { display: none; }
}

/* ==========================================================================
   Der Lernpfad — eine Rosette und ein Weg

   Oben der Überblick: die Rosette (jede Kategorie ein Blatt, innen leicht,
   außen schwer), daneben genau ein nächster Schritt. Darunter klebt die
   Kategorienleiste — Filter und Stand je Kategorie in einem —, und dann der
   Weg: eine ruhige Schlangenlinie aus Steinen in der Farbe ihrer Kategorie.
   Schlicht mit Absicht: eine Sache zu tun, eine Sache zu sehen.
   ========================================================================== */
.lp.lp2 { position: relative; margin-top: 1rem; }

/* Die eine Stelle, an der eine Kategorie ihre drei Farben bekommt: Wer
   `data-kat` traegt — Stein, Knopf, Rosettenblatt, Chip, Listeneintrag,
   Themaseite —, erbt Flaeche, Toenung und Tinte. Die Werte selbst stehen
   oben in den Token-Bloecken der beiden Fassungen. */
[data-kat="fundament"]   { --kat: var(--k-fundament);   --kat-hell: var(--k-fundament-hell);   --kat-ink: var(--k-fundament-ink); }
[data-kat="bausteine"]   { --kat: var(--k-bausteine);   --kat-hell: var(--k-bausteine-hell);   --kat-ink: var(--k-bausteine-ink); }
[data-kat="zeiten"]      { --kat: var(--k-zeiten);      --kat-hell: var(--k-zeiten-hell);      --kat-ink: var(--k-zeiten-ink); }
[data-kat="verben"]      { --kat: var(--k-verben);      --kat-hell: var(--k-verben-hell);      --kat-ink: var(--k-verben-ink); }
[data-kat="satzbau"]     { --kat: var(--k-satzbau);     --kat-hell: var(--k-satzbau-hell);     --kat-ink: var(--k-satzbau-ink); }
[data-kat="feinschliff"] { --kat: var(--k-feinschliff); --kat-hell: var(--k-feinschliff-hell); --kat-ink: var(--k-feinschliff-ink); }
[data-kat="fundament"], [data-kat="bausteine"], [data-kat="zeiten"], [data-kat="verben"],
[data-kat="satzbau"], [data-kat="feinschliff"] { --kat-auf: var(--k-auf); }
.lp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lp-ic {
  width: 1.15rem; height: 1.15rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --- Überblick ----------------------------------------------------------- */
.lp-ueberblick {
  display: grid; gap: 1rem 2rem; align-items: center;
  grid-template-columns: minmax(0, 1fr);
  background: var(--karte); border-radius: calc(var(--rund) + 8px);
  padding: 1.3rem 1.4rem 1.2rem; box-shadow: var(--schatten-2);
}
@media (min-width: 860px) {
  .lp-ueberblick { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
  .lp-ueberblick .lp-rosette { grid-row: 1 / span 4; grid-column: 1; }
}
.lp-ueberblick-text h2 { margin: 0 0 .3rem; font-size: 1.3rem; }
/* Das Wahrzeichen der Lernsprache neben der Ueberschrift (Lernpfad und
   Startseite des Paares). Schmuck, deshalb aria-hidden und feste Masse. */
.lp-sprachbild {
  flex: none; width: 3rem; height: 3rem; margin: -.6rem 0 -.5rem -.2rem;
  object-fit: contain;
}
/* Bild und Ueberschrift nebeneinander, auch wenn die Ueberschrift auf dem
   Telefon umbricht: Die zweite Zeile beginnt unter dem Text, nicht unter
   dem Bild. */
.lp-ueberblick-text h2:has(.lp-sprachbild), .lp-teaser-text h2:has(.lp-sprachbild) {
  display: flex; align-items: center; gap: .5rem;
}
.lp-ueberblick-text p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.lp-rosette { width: 100%; max-width: 22rem; margin: 0 auto; }
.lp-rosette-bild { display: block; width: 100%; height: auto; overflow: visible; }
.lp-blatt { cursor: pointer; transition: opacity .25s ease; }
.lp-blatt-grund { fill: var(--kat); opacity: .22; }
.lp-blatt-leer { fill: var(--linie); opacity: .5; }
.lp-blatt-voll { fill: var(--kat); }
.lp-blatt-marke { fill: var(--kat-hell, var(--karte)); stroke: var(--kat); stroke-width: 1.6; }
.lp-blatt-zeichen { color: var(--kat-ink, var(--kat)); }
.lp-blatt-treffer { fill: transparent; }
.lp-blatt:hover .lp-blatt-grund { opacity: .34; }
.lp-blatt-aus { opacity: .28; }
.lp-rosette-mitte { fill: var(--karte); stroke: var(--linie); }
.lp-rosette-zahl {
  text-anchor: middle; font-size: 30px; font-weight: 700; fill: var(--ink);
  font-family: var(--schrift-titel, inherit);
}
.lp-rosette-von { text-anchor: middle; font-size: 11.5px; fill: var(--ink-3); }

.lp-weiter-karte {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem; border-radius: var(--rund);
  background: var(--ink); color: var(--bg);
}
.lp-weiter-text { min-width: 0; cursor: pointer; }
.lp-weiter-kopf { display: block; font-size: .78rem; opacity: .78; }
.lp-weiter-titel { display: block; font-size: 1.05rem; line-height: 1.3; }
.lp-weiter-karte .lp-weiter-los {
  flex: none; background: var(--bg); color: var(--ink);
}
.lp-niveau { font-size: .9rem; color: var(--ink-2); }
.lp-niveau summary { cursor: pointer; width: fit-content; }
.lp-niveau-knoepfe { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.lp-niveau-knopf {
  font: inherit; font-weight: 700; min-width: 3rem; padding: .3rem .7rem;
  border-radius: 999px; border: 2px solid var(--stufe); background: var(--karte);
  color: var(--ink); cursor: pointer;
}
.lp-niveau-knopf[aria-pressed="true"] { background: var(--stufe); color: #10213a; }
.lp2 .lp-schiene {
  display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0;
}
.lp2 .lp-schiene-punkt {
  display: inline-flex; align-items: baseline; gap: .35rem;
  padding: .22rem .65rem; border-radius: 999px; text-decoration: none;
  background: var(--karte-2); color: var(--ink); font-size: .85rem;
  box-shadow: inset 0 0 0 1.5px var(--stufe);
}
.lp2 .lp-schiene-zahl { color: var(--ink-3); font-size: .78rem; }

/* --- Kategorienleiste (Filter und Stand) ------------------------------- */
.lp-katleiste {
  /* Klebt unter Kopf und Reiterleiste, nicht hinter ihnen. */
  --oben: calc(var(--kopf-hoehe, 3.9rem) + 3.4rem);
  position: sticky; top: var(--oben); z-index: 5; scroll-margin-top: var(--oben);
  /* So viele Spalten wie Kategorien: Japanisch hat keine eigenen Zeiten. */
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .4rem;
  margin: 1rem 0 .4rem; padding: .55rem; border-radius: var(--rund);
  background: color-mix(in srgb, var(--lp-grund) 96%, transparent);
  box-shadow: 0 1px 0 var(--linie), 0 8px 20px rgba(15, 23, 42, .08);
}
.lp-kat-knopf {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  min-width: 0; padding: .4rem .2rem .45rem; border: 0; border-radius: 12px;
  background: transparent; color: var(--kat-ink, var(--ink)); font: inherit; cursor: pointer;
}
.lp-kat-knopf[aria-pressed="true"] {
  background: var(--kat-hell, var(--karte));
  box-shadow: inset 0 0 0 2px var(--kat, var(--ink)), 0 2px 6px rgba(15, 23, 42, .06);
}
.lp-kat-name {
  font-size: .74rem; font-weight: 600; color: var(--ink-2); max-width: 100%;
  overflow: hidden; text-overflow: clip; white-space: nowrap;
}
.lp-kat-zahl { font-size: .8rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lp-kat-balken {
  /* Die Spur in der Farbe der Kategorie und nicht grau: Auch bei 0 von 32
     sagt der Balken, wohin er gehört, und ein Fortschritt, den man sieht,
     zieht weiter (Zielgradient). */
  display: block; width: 100%; height: 7px; border-radius: 4px;
  background: color-mix(in srgb, var(--kat, var(--ink)) 24%, var(--linie)); overflow: hidden;
}
.lp-kat-knopf[data-kat="alle"] { --kat: var(--marke); --kat-hell: var(--marke-weich); --kat-ink: var(--marke-ink); }
.lp-kat-balken i { display: block; width: 0; min-width: 0; height: 100%; border-radius: 4px; background: var(--kat, var(--ink)); }
.lp-katleiste:not(.lp-mit-js) .lp-kat-balken,
.lp-katleiste:not(.lp-mit-js) .lp-kat-knopf[data-kat="alle"] { display: none; }
@media (max-width: 699px) {
  /* Auf dem Telefon eine Zeile zum Wischen: zwei Zeilen Leiste unter Kopf
     und Reitern ließen dem Weg kaum die Hälfte des Schirms. */
  .lp-katleiste {
    grid-auto-columns: max-content;
    overflow-x: auto; scrollbar-width: none; padding: .4rem; gap: .25rem;
  }
  .lp-katleiste::-webkit-scrollbar { display: none; }
  .lp-kat-knopf { min-width: 4.6rem; padding: .3rem .45rem .35rem; gap: .12rem; }
  .lp-kat-name { font-size: .68rem; }
}

@media (min-width: 96rem) {
  /* Dort steht die Reiterleiste am Rand und nimmt oben keinen Platz. */
  .lp-katleiste { --oben: calc(var(--kopf-hoehe, 3.9rem) + .6rem); }
}

/* --- Der Weg ------------------------------------------------------------ */
.lp-weg2 {
  --amp: min(7.5rem, 22vw);
  /* Halbe Breite des Weges: die Schrift neben einem Stein bekommt genau
     den Raum zwischen Stein und Rand, je nachdem, wo der Stein steht. */
  --halb: min(20rem, 50vw - 1.7rem);
  position: relative; list-style: none; margin: .4rem auto 0; padding: 1rem 0 1.5rem;
  max-width: 40rem;
  /* Ein zarter Himmel unter dem Weg, nach aussen ausgeblendet: Die Steine
     stehen auf Hellblau statt auf dem neutralen Grund, ohne dass ein Kasten
     daraus wird. */
  background: radial-gradient(ellipse 50% 50% at 50% 50%, var(--lp-grund) 72%, transparent 100%);
}
.lp-schritte { padding-left: 0; }
/* Nach einer Kategorie gefiltert: der Weg beginnt näher an der Leiste. */
.lp-gefiltert .lp-weg2 { padding-top: .4rem; }
.lp-weg-linie { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.lp-weg-pfad {
  fill: none; stroke: color-mix(in srgb, var(--k-zeiten) 45%, var(--linie-kraeftig)); stroke-width: 6;
  stroke-linecap: round; stroke-dasharray: .1 14;
}
.lp-weg2 .lp-stufenmarke {
  position: relative; display: flex; align-items: center; gap: .8rem;
  margin: 1.4rem 0 .6rem; font-size: .88rem; color: var(--ink-2);
}
.lp-weg2 .lp-stufenmarke::before, .lp-weg2 .lp-stufenmarke::after {
  content: ""; flex: 1; height: 1px; background: var(--linie);
}
.lp-stufenmarke-pille {
  display: inline-flex; align-items: center; gap: .5rem; max-width: 80%;
  padding: .25rem .8rem .25rem .3rem; border-radius: 999px;
  background: var(--karte); box-shadow: inset 0 0 0 1.5px var(--stufe);
}
.lp-weg2 .lp-stufenmarke-code {
  padding: .1rem .55rem; border-radius: 999px; background: var(--stufe);
  color: #10213a; font-weight: 700;
}
.lp-weg2 .lp-stufenmarke-name { line-height: 1.25; }
.lp-weg2 .lp-schritt { position: relative; height: 5.6rem; }
.lp-weg2 .lp-punkt {
  position: absolute; top: 50%; left: calc(50% + var(--x) * var(--amp));
  display: block; width: 3.6rem; height: 3.3rem; transform: translate(-50%, -50%);
  text-decoration: none; color: var(--ink);
}
/* Ein offener Stein ist in seiner Kategorie getönt und nicht weiß: Die
   Farbcodierung soll den Weg gliedern, bevor man irgendetwas erledigt hat
   (Ozcelik u. a. 2009), und ein Weg aus weißen Kästchen las sich als
   gesperrt. Gelesen, unsicher und verstanden bleiben die Stufen darüber. */
.lp-stein {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 1.3rem 1.3rem 1.45rem 1.45rem;
  background: var(--kat-hell); color: var(--kat-ink);
  box-shadow: inset 0 0 0 2.5px var(--kat), inset 0 -4px 0 color-mix(in srgb, var(--kat) 30%, transparent),
              0 3px 8px rgba(15, 23, 42, .08);
  transition: transform .18s ease;
}
.lp-stein .lp-ic { width: 1.45rem; height: 1.45rem; }
.lp-punkt:hover .lp-stein, .lp-punkt:focus-visible .lp-stein { transform: translateY(-2px); }
.lp-punkt:focus-visible { outline: none; }
.lp-punkt:focus-visible .lp-stein { outline: 3px solid var(--marke); outline-offset: 3px; }
.lp-weg2 .lp-text {
  position: absolute; top: 50%; left: calc(100% + .8rem);
  width: max-content; max-width: min(15rem, calc(var(--halb) - var(--x) * var(--amp) - 3rem));
  transform: translateY(-50%); line-height: 1.25; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word;
}
.lp-weg2 .lp-links .lp-text {
  left: auto; right: calc(100% + .8rem); text-align: right;
  max-width: min(15rem, calc(var(--halb) + var(--x) * var(--amp) - 3rem));
}
.lp-weg2 .lp-titel { display: block; font-size: .92rem; font-weight: 600; }
.lp-weg2 .lp-meta { display: block; margin-top: .1rem; font-size: .8rem; color: var(--ink-3); }
.lp-weg2 .lp-kurz {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.lp-haken {
  position: absolute; right: -.35rem; top: -.35rem; width: 1.25rem; height: 1.25rem;
  border-radius: 50%; display: none; place-items: center;
  background: var(--karte); box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
}
.lp-haken::before {
  content: ""; width: .45rem; height: .25rem; margin-top: -.12rem;
  border: solid var(--kat-ink); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg);
}
/* Stand: verstanden gefüllt, unsicher halb, gelesen mit kräftigem Rand. */
.lp-weg2 .lp-verstanden .lp-stein {
  background: var(--kat); color: var(--kat-auf);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .16), 0 4px 10px rgba(15, 23, 42, .14);
}
.lp-weg2 .lp-verstanden .lp-haken { display: grid; }
.lp-weg2 .lp-unsicher .lp-stein {
  background: linear-gradient(180deg, color-mix(in srgb, var(--kat) 22%, #fff) 50%, var(--kat) 50%);
  color: var(--kat-auf);
  box-shadow: inset 0 0 0 2.5px var(--kat), 0 3px 8px rgba(15, 23, 42, .1);
}
.lp-weg2 .lp-gelesen .lp-stein {
  background: color-mix(in srgb, var(--kat) 50%, #fff); color: var(--kat-auf);
  box-shadow: inset 0 0 0 3px var(--kat), 0 3px 8px rgba(15, 23, 42, .1);
}
.lp-weg2 .lp-darunter:not(.lp-verstanden) .lp-stein { opacity: .55; }
.lp-weg2 .lp-naechstes .lp-punkt { width: 4.4rem; height: 4rem; }
.lp-weg2 .lp-naechstes .lp-stein {
  background: var(--kat); color: var(--kat-auf);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .12), 0 0 0 6px color-mix(in srgb, var(--kat) 30%, transparent),
              0 6px 14px rgba(15, 23, 42, .16);
}
.lp-weg2 .lp-naechstes .lp-stein .lp-ic { width: 1.7rem; height: 1.7rem; }
.lp-weg2 .lp-naechstes .lp-titel { color: var(--kat-ink); }
.lp-weg2 .lp-schritt[hidden], .lp-weg2 .lp-stufenmarke[hidden] { display: none; }
/* Das Wortpaket vor einem Thema (tools/wortpakete.py): ein kleiner gruener
   Stein ueber dem Grammatikstein. Gruen (`--ok`) und nicht die Marke: Die
   Grammatik bleibt in ihrer Farbe, die Woerter sind der Schritt davor. */
.lp-weg2 .lp-schritt.lp-mit-woertern { height: 7.8rem; }
.lp-weg2 .lp-mit-woertern .lp-punkt { top: 64%; }
.lp-wortpakete {
  position: absolute; top: .2rem; left: calc(50% + var(--x) * var(--amp));
  transform: translateX(-50%); display: flex; gap: .3rem; z-index: 1;
}
.lp-wortpunkt {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 32px;
  padding: .15rem .6rem .15rem .25rem; border-radius: var(--rund-voll);
  background: var(--ok-weich); color: var(--ok-ink);
  box-shadow: inset 0 0 0 2px var(--ok);
  font-size: .8rem; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.lp-wortstein {
  width: 1.35rem; height: 1.35rem; border-radius: 50%; flex: none;
  background: var(--ok); position: relative;
}
.lp-wortstein::before {
  content: ""; position: absolute; inset: .38rem .33rem; border-radius: 2px;
  border: 2px solid var(--karte); border-top-width: 3px;
}
.lp-wortpunkt:hover { box-shadow: inset 0 0 0 2.5px var(--ok); }
.lp-wortpunkt:focus-visible { outline: 3px solid var(--marke); outline-offset: 2px; }
/* Geuebt: im Stein ein Haken statt der Karte — die Schrift bleibt, wie
   sie ist (Gruen auf hellem Gruen traegt keine weisse Schrift). */
.lp-wort-fertig .lp-wortstein::before {
  inset: auto; left: .42rem; top: .3rem; width: .4rem; height: .62rem;
  border: solid var(--karte); border-width: 0 2.5px 2.5px 0; border-radius: 0;
  transform: rotate(45deg);
}
/* Auf dem Telefon nur der Stein: Neben dem ausschwingenden Weg hat das
   Wort „Wörter" keinen Platz, und die Beschriftung steht im aria-label. */
@media (max-width: 640px) {
  .lp-wortpakete { left: clamp(1.2rem, calc(50% + var(--x) * var(--amp)), calc(100% - 1.2rem)); }
  .lp-wortpunkt { padding: .15rem; min-width: 32px; justify-content: center; }
  .lp-wortname { display: none; }
}
.lp-karte-woerter { margin: .5rem 0 0; font-size: .86rem; color: var(--ink-2); }
.lp-karte-woerter a { font-weight: 600; color: var(--ok-ink); }

/* Auf der Themenseite: „Diese Woerter brauchst du". */
.thema-woerter {
  margin: 0 0 1.2rem; border: 1px solid var(--ok); border-left-width: 4px;
  border-radius: var(--rund); background: var(--karte);
}
.thema-woerter > summary {
  display: flex; align-items: center; gap: .6rem; min-height: 44px;
  padding: .55rem .95rem; cursor: pointer; font-weight: 700; list-style: none;
}
.thema-woerter > summary::-webkit-details-marker { display: none; }
.thema-woerter > summary:focus-visible { outline: none; box-shadow: var(--ring); }
.tw-zahl {
  min-width: 1.6rem; padding: .05rem .5rem; border-radius: var(--rund-voll);
  background: var(--ok-weich); color: var(--ok-ink); font-size: .85rem; text-align: center;
}
.tw-inhalt { padding: 0 .95rem .9rem; }
.tw-text { margin: 0 0 .6rem; font-size: .9rem; color: var(--ink-2); }
.tw-liste {
  list-style: none; margin: 0 0 .8rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: .3rem 1rem;
}
.tw-liste li { display: flex; flex-wrap: wrap; gap: .1rem .5rem; align-items: baseline; }
.tw-liste .ziel { font-weight: 600; }
.tw-bed { color: var(--ink-2); font-size: .92rem; }
.thema-woerter .hero-knoepfe { margin: 0; }
@media (max-width: 699px) {
  .lp-weg2 .lp-schritt { height: 5.2rem; }
  .lp-weg2 .lp-titel { font-size: .84rem; }
}

/* --- Vorschaukarte -------------------------------------------------------- */
.lp2 .lp-karte {
  position: absolute; z-index: 6; width: min(19rem, 86vw); padding: .8rem .95rem;
  border-radius: var(--rund); background: var(--karte); color: var(--ink);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .18); border-top: 4px solid var(--kat);
}
.lp-karte-kopf { margin: 0; font-size: .8rem; color: var(--ink-3); }
.lp-karte-titel { margin: .15rem 0 0; font-weight: 700; }
.lp-karte-text { margin: .35rem 0 0; font-size: .88rem; color: var(--ink-2); }
.lp-karte-fuss { margin: .55rem 0 0; display: flex; justify-content: space-between; gap: .6rem; font-size: .82rem; }
.lp-karte-status { color: var(--ink-3); }
.lp-karte-status[data-status="verstanden"] { color: var(--ok-ink); }
.lp-karte-los { font-weight: 600; }

/* --- Ziel am Ende --------------------------------------------------------- */
.lp2 .lp-ziel {
  display: flex; align-items: center; gap: 1rem; max-width: 34rem;
  margin: .5rem auto 0; padding: 1rem 1.2rem; border-radius: var(--rund);
  background: var(--karte); box-shadow: var(--schatten-2);
}
.lp-ziel-titel { margin: 0; font-weight: 700; }
.lp2 .lp-ziel .muno { flex: none; width: 4.5rem; }

/* --- Der Einstieg auf der Startseite eines Paares --------------------- */
.lp-teaser {
  display: flex; align-items: center; gap: 1.4rem; margin: 1.6rem 0 .6rem;
  padding: 1rem 1.4rem; border-radius: calc(var(--rund) + 6px);
  text-decoration: none; color: var(--ink); box-shadow: var(--schatten-2);
  border: 1px solid var(--linie);
  /* Weiss wie jede andere Karte der Seite. Eine getoente Flaeche liest
     sich als Hinweis- oder Werbekasten und senkt den Kontrast der Schrift;
     Aufmerksamkeit holt die Karte ueber Rosette, Kategorien und den einen
     Knopf. Oben eine schmale Leiste in den sechs Kategoriefarben verbindet
     sie mit dem Lernpfad, ohne die Flaeche einzufaerben. */
  background:
    linear-gradient(90deg, var(--k-fundament) 0 16.66%, var(--k-bausteine) 0 33.33%,
                    var(--k-zeiten) 0 50%, var(--k-verben) 0 66.66%,
                    var(--k-satzbau) 0 83.33%, var(--k-feinschliff) 0)
      top / 100% 4px no-repeat,
    var(--karte);
  transition: transform .15s ease, box-shadow .15s ease;
}
.lp-teaser:hover { transform: translateY(-2px); box-shadow: var(--schatten-3); }
.lp-teaser-bild { flex: none; width: 12rem; height: auto; overflow: visible; }
/* Die Rosette der Startseite bekommt ihre Farben wie der Pfad ueber
   `data-kat` — keine Hexwerte im SVG, damit auch die dunkle Fassung greift. */
.lpt-ring { fill: var(--kat); }
.lpt-marke { fill: var(--kat-hell); stroke: var(--kat); }
.lpt-zeichen { color: var(--kat-ink); }
.lpt-mitte { fill: var(--karte); stroke: var(--linie); }
.lpt-zahl { fill: var(--ink); }
/* Die Kategorien als kleine Marken unter dem Text, in derselben Farbe und
   mit demselben Zeichen wie auf dem Lernpfad. */
.lp-teaser-kats { display: flex; flex-wrap: wrap; gap: .3rem .35rem; margin-top: .15rem; }
.lp-teaser-kat {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .55rem .15rem .4rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; color: var(--ink-2);
  background: var(--kat-hell);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kat) 60%, transparent);
}
.lp-teaser-kat .lp-ic { width: .95rem; height: .95rem; color: var(--kat-ink); }
.lp-teaser-text { display: grid; gap: .35rem; justify-items: start; }
.lp-teaser-text b { font-size: 1.3rem; font-family: var(--schrift-titel); }
.lp-teaser-text .knopf { margin-top: .3rem; }
@media (max-width: 640px) {
  .lp-teaser { flex-direction: column; align-items: stretch; padding: .9rem 1rem; }
  .lp-teaser-bild { width: 62%; max-width: 13rem; margin: 0 auto; }
}

/* --- Wie sitzt dieses Thema? (Themaseite) ------------------------------ */
.ts-stand {
  margin: 1rem 0 0; padding: .75rem .9rem; border-radius: var(--rund);
  background: var(--karte-2); border: 1px solid var(--linie); max-width: 40rem;
}
.ts-frage { margin: 0 0 .5rem; font-weight: 600; font-size: .95rem; }
.ts-knoepfe { display: flex; flex-wrap: wrap; gap: .45rem; }
.ts-knopf {
  font: inherit; font-size: .92rem; cursor: pointer; padding: .4rem .9rem;
  border-radius: 999px; border: 1.5px solid var(--linie);
  background: var(--karte); color: var(--ink);
}
.ts-knopf:hover { border-color: var(--marke); }
.ts-knopf:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }
/* Ein Punkt in der Farbe des Standes, schon bevor man wählt: grau, bernstein,
   grün — dieselben drei wie auf dem Lernpfad und ohne Rot, das auf einer
   Lernseite nach Fehler aussieht. */
.ts-knopf { display: inline-flex; align-items: center; gap: .45rem; }
.ts-knopf::before {
  content: ""; flex: none; width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--ts-farbe, #64748b);
}
.ts-knopf[data-status="unsicher"] { --ts-farbe: #b45309; }
.ts-knopf[data-status="verstanden"] { --ts-farbe: #15803d; }
.ts-knopf[aria-pressed="true"]::before { background: #fff; }
.ts-knopf[aria-pressed="true"] { color: #fff; border-color: transparent; }
/* „Noch offen" ist der Ausgangszustand und keine Wertung: umrandet statt
   grau gefüllt, sonst sieht jedes neue Thema wie ein Misserfolg aus. */
.ts-knopf[data-status="offen"][aria-pressed="true"] {
  background: var(--karte); color: var(--ink); box-shadow: inset 0 0 0 2px #64748b;
}
.ts-knopf[data-status="offen"][aria-pressed="true"]::before { background: #64748b; }
.ts-knopf[data-status="unsicher"][aria-pressed="true"] { background: #b45309; }
.ts-knopf[data-status="verstanden"][aria-pressed="true"] { background: #15803d; }
.ts-unten {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem;
  margin: .5rem 0 0; font-size: .85rem; color: var(--ink-2);
}

/* Die Pfadleiste oben auf der Themaseite: zurück an die Stelle auf dem
   Lernpfad, welche Nummer das Thema dort hat, und der eigene Stand als Chip
   (vom Skript gefüllt, führt zum Abschluss). */
.pfadleiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .8rem;
  margin: .9rem 0 0; padding: .45rem .55rem .45rem .5rem; border-radius: 999px;
  background: var(--karte); border: 1px solid var(--linie); width: fit-content;
  max-width: 100%; font-size: .9rem;
}
.pfadleiste-zurueck {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 .85rem;
  border-radius: 999px; font-weight: 600; text-decoration: none;
  color: var(--kat-ink, var(--marke));
  background: color-mix(in srgb, var(--kat, var(--marke)) 12%, var(--karte));
}
.pfadleiste-zurueck:hover { background: color-mix(in srgb, var(--kat, var(--marke)) 22%, var(--karte)); }
.pfadleiste-stelle { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pfad-stand {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem;
  padding: 0 .8rem; border-radius: 999px; text-decoration: none; font-weight: 600;
  color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ts-farbe, #64748b);
}
.pfad-stand::before {
  content: ""; width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--ts-farbe, #64748b);
}
.pfad-stand[data-status="unsicher"] { --ts-farbe: #b45309; }
.pfad-stand[data-status="verstanden"] {
  --ts-farbe: #15803d; color: #fff; background: #15803d;
}
.pfad-stand[data-status="verstanden"]::before { background: #fff; }
.pfad-stand[hidden] { display: none; }
@media (max-width: 639px) {
  .pfadleiste { border-radius: var(--rund); width: 100%; }
}

/* Der Abschluss am Seitenende: eine Karte in der Kategoriefarbe, der Stand
   darin ohne eigenen Kasten, darunter die zwei Wege. Steht der Stand auf
   „verstanden", wird die Karte grün gerahmt — eine Bestätigung, die man
   sieht, statt eines Häkchens, das man suchen muss. */
.abschluss {
  margin: 2.4rem 0 0; padding: 1.15rem 1.2rem 1.25rem; border-radius: var(--rund);
  background: var(--ok-weich); border: 1px solid var(--ok);
  border-top: 4px solid var(--ok);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}
.abschluss-frage { margin: 0 0 .4rem; font-weight: 600; }
.abschluss h2 { margin-top: 0; border-top: 0; padding-top: 0; }
.abschluss .ts-stand { margin: 0; padding: 0; background: none; border: 0; max-width: none; }
.abschluss .ts-hinweis { margin: .6rem 0 0; font-size: .88rem; color: var(--ink-2); }
/* Zwei Regeln, nicht eine Liste: Ein Browser ohne :has() verwirft eine
   Liste ganz — dann bliebe auch der leere Kasten stehen. */
.abschluss .ts-unten:empty { display: none; }
.abschluss .ts-unten:has(.ts-meldung:empty) { display: none; }
.abschluss .abschluss-wege { margin: 1rem 0 0; }

@media (max-width: 639px) {
  .abschluss { padding: 1rem .95rem 1.1rem; }
  .abschluss .abschluss-wege .knopf { width: 100%; justify-content: center; text-align: center; }
}

/* Das Ergebnis nach einer Trainingsrunde: was eingetragen wurde und warum. */
.tr-ergebnis {
  display: flex; align-items: flex-start; gap: .75rem; margin: 0 0 .9rem;
  padding: .8rem .95rem; border-radius: var(--rund);
  background: color-mix(in srgb, var(--ts-farbe) 10%, var(--karte));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ts-farbe) 45%, transparent);
}
.tr-ergebnis[data-status="verstanden"] { --ts-farbe: #15803d; }
.tr-ergebnis[data-status="unsicher"] { --ts-farbe: #b45309; }
.tr-ergebnis p { margin: 0; line-height: 1.45; }
.tr-ergebnis-zeichen {
  flex: none; position: relative; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--ts-farbe);
}
.tr-ergebnis[data-status="verstanden"] .tr-ergebnis-zeichen::after {
  content: ""; position: absolute; left: .62rem; top: .5rem; width: .42rem; height: .78rem;
  border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.tr-ergebnis[data-status="unsicher"] .tr-ergebnis-zeichen {
  background: linear-gradient(90deg, var(--ts-farbe) 50%, color-mix(in srgb, var(--ts-farbe) 25%, var(--karte)) 50%);
}
@media (prefers-reduced-motion: no-preference) {
  .tr-ergebnis-zeichen { animation: tr-pop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
}
@keyframes tr-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ==========================================================================
   Die Grammatikkarte — ein Raster, sechs Spalten, sechs sichtbare Bänder

   Ein Raster aus CSS-Grid und keine SVG-Zeichnung: Die Karte besteht aus
   Kästchen mit Text darin, in fünf Sprachen mit verschieden langen Namen.
   Ein SVG müsste jede Zeile selbst umbrechen und jede Breite selbst
   rechnen; ein Raster kann der Browser, und es ist anklickbar,
   durchsuchbar und vorlesbar, ohne dass jemand eine viewBox nachrechnet.

   **Die Spalte ist das Bauteil, nicht das Kästchen.** Der erste Entwurf
   gab jeder Zeile ihr eigenes Raster mit Abstand nach unten, und die
   Stufe stand nur oben an der Achse. Damit zerfiel die Karte in
   siebenundzwanzig einzelne Kästchen: Wer bei „Der Satz" in der vierten
   Spalte stand, musste nach oben schauen, um zu wissen, ob das B1 oder
   B2 ist. Jetzt läuft jede Stufe als ein durchgehendes Band von oben
   nach unten — eigene Randfarbe, eigener leiser Grund, oben und unten
   abgerundet. Der Zeilenabstand ist dafür null: Ein Band mit Lücken ist
   kein Band.

   Die Farben kommen aus der Stufenpalette, die es ohnehin gibt, und sie
   tragen als Rand und als sehr leiser Grund — kräftige Flächen wie auf
   einer Lehrtafel machen aus einer Übersicht ein Buntbild, und der Text
   darauf ist in keiner der beiden Fassungen mehr lesbar.
   ========================================================================== */

.gk {
  display: grid; gap: 0; margin: 1.2rem 0 0;
  overflow-x: auto; padding-bottom: .5rem;
}
/* Die beiden Karten unterscheiden sich in einem: Die Zeitenkarte hat
   wenige, lange Bereichsnamen („Die Vergangenheit"), die Gesamtkarte
   fünf kurze Familiennamen. Der Kopf darf deshalb verschieden breit
   sein — und `auszeichnung` hat zu Recht gemeldet, dass beide Klassen
   im HTML standen und in keiner Regel. Eine Klasse ohne Regel ist ein
   Haken, an dem nichts hängt. */
.gk-zeiten { --gk-kopf: 11rem; }
.gk-alles  { --gk-kopf: 9.5rem; }
.gk-achse, .gk-zeile {
  display: grid; column-gap: .45rem; row-gap: 0; align-items: stretch;
  grid-template-columns: var(--gk-kopf, 9.5rem) repeat(var(--gk-spalten, 6),
                          minmax(8rem, 1fr));
}
.gk-achse-ecke { display: block; }

/* Der Kopf einer Spalte. Er ist der kräftigste Teil des Bandes: Wenn
   sechs Bänder nebeneinanderstehen, muss der Blick am oberen Ende
   ankommen und dort sofort wissen, welches er anschaut. */
.gk-stufe {
  display: flex; flex-direction: column; align-items: center; gap: .05rem;
  padding: .45rem .3rem .4rem;
  border-radius: var(--rund) var(--rund) 0 0;
  border: 1px solid var(--linie); border-bottom: 0;
  border-top: 3px solid var(--stufe-farbe, var(--marke));
  background: color-mix(in srgb, var(--stufe-farbe, var(--marke)) 9%,
                        var(--karte));
  color: var(--ink); font: inherit; cursor: default;
}
.gk-bedienbar .gk-stufe, .gk-bedienbar .gk-zeile-kopf { cursor: pointer; }
.gk-stufe b { font-size: .92rem; letter-spacing: .05em;
              color: var(--stufe-ink, var(--ink)); }
.gk-stufe span { font-size: .8rem; color: var(--ink-3);
                 font-variant-numeric: tabular-nums; }
.gk-stufe.gk-an {
  background: color-mix(in srgb, var(--stufe-farbe, var(--marke)) 20%,
                        var(--karte));
  font-weight: 600;
}
.gk-stufe[data-stufe="A1"] { --stufe-farbe: var(--stufe-a1); }
.gk-stufe[data-stufe="A2"] { --stufe-farbe: var(--stufe-a2); }
.gk-stufe[data-stufe="B1"] { --stufe-farbe: var(--stufe-b1); }
.gk-stufe[data-stufe="B2"] { --stufe-farbe: var(--stufe-b2); }
.gk-stufe[data-stufe="C1"] { --stufe-farbe: var(--stufe-c1); }
.gk-stufe[data-stufe="C2"] { --stufe-farbe: var(--stufe-c2); }
.gk-stufe[data-stufe="N5"] { --stufe-farbe: var(--stufe-a1); }
.gk-stufe[data-stufe="N4"] { --stufe-farbe: var(--stufe-a2); }
.gk-stufe[data-stufe="N3"] { --stufe-farbe: var(--stufe-b1); }
.gk-stufe[data-stufe="N2"] { --stufe-farbe: var(--stufe-b2); }

.gk-zeile-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: .4rem; text-align: left; padding: .55rem .55rem;
  border: 0; border-top: 1px solid var(--linie);
  background: none; color: var(--ink-2); font: inherit;
  font-size: .85rem; line-height: 1.25;
}
.gk-achse + .gk-zeile .gk-zeile-kopf { border-top: 0; }
.gk-zeile-kopf.gk-an { color: var(--marke-ink); font-weight: 600; }
.gk-zeile-kopf.gk-an span:first-child {
  box-shadow: inset 0 -2px 0 var(--marke);
}
.gk-zeile-zahl { font-size: .8rem; color: var(--ink-3);
                 font-variant-numeric: tabular-nums; }
/* `display: contents` steht hier nicht — die Zeile bleibt ein Kasten,
   damit sie sich als Ganzes abdunkeln lässt. */
.gk-zeile.gk-aus { opacity: .3; }

/* Das Band. Kein Abstand nach oben oder unten, damit die Zellen einer
   Spalte zu einer Fläche zusammenwachsen; die Trennlinie zwischen zwei
   Zeilen ist eine Haarlinie im Band und kein Spalt zwischen zwei
   Kästen. */
.gk-zelle {
  display: flex; flex-direction: column; gap: .3rem;
  padding: .4rem .35rem; min-height: 2.6rem;
  border-left: 1px solid var(--stufe-farbe, var(--linie));
  border-right: 1px solid var(--stufe-farbe, var(--linie));
  border-top: 1px solid color-mix(in srgb,
                var(--stufe-farbe, var(--linie)) 24%, transparent);
  background: color-mix(in srgb, var(--stufe-farbe, var(--marke)) 4%,
                        transparent);
}
.gk-achse + .gk-zeile .gk-zelle { border-top: 0; }
.gk-zeile:last-child .gk-zelle {
  border-bottom: 1px solid var(--stufe-farbe, var(--linie));
  border-radius: 0 0 var(--rund) var(--rund);
  padding-bottom: .5rem;
}
.gk-zelle[data-stufe="A1"] { --stufe-farbe: var(--stufe-a1); }
.gk-zelle[data-stufe="A2"] { --stufe-farbe: var(--stufe-a2); }
.gk-zelle[data-stufe="B1"] { --stufe-farbe: var(--stufe-b1); }
.gk-zelle[data-stufe="B2"] { --stufe-farbe: var(--stufe-b2); }
.gk-zelle[data-stufe="C1"] { --stufe-farbe: var(--stufe-c1); }
.gk-zelle[data-stufe="C2"] { --stufe-farbe: var(--stufe-c2); }
.gk-zelle[data-stufe="N5"] { --stufe-farbe: var(--stufe-a1); }
.gk-zelle[data-stufe="N4"] { --stufe-farbe: var(--stufe-a2); }
.gk-zelle[data-stufe="N3"] { --stufe-farbe: var(--stufe-b1); }
.gk-zelle[data-stufe="N2"] { --stufe-farbe: var(--stufe-b2); }

.gk-kachel {
  display: flex; align-items: center; justify-content: space-between;
  gap: .3rem; padding: .4rem .45rem; min-height: 32px;
  border-radius: var(--rund-s);
  text-decoration: none; color: var(--ink); font-size: .8rem;
  line-height: 1.25; border: 1px solid var(--linie);
  border-left: 3px solid var(--stufe-farbe, var(--linie));
  background: var(--karte); box-shadow: var(--lift);
  transition: border-color .12s, background .12s, transform .12s,
              box-shadow .12s;
}
.gk-kachel[data-stufe="A1"] { --stufe-farbe: var(--stufe-a1); }
.gk-kachel[data-stufe="A2"] { --stufe-farbe: var(--stufe-a2); }
.gk-kachel[data-stufe="B1"] { --stufe-farbe: var(--stufe-b1); }
.gk-kachel[data-stufe="B2"] { --stufe-farbe: var(--stufe-b2); }
.gk-kachel[data-stufe="C1"] { --stufe-farbe: var(--stufe-c1); }
.gk-kachel[data-stufe="C2"] { --stufe-farbe: var(--stufe-c2); }
.gk-kachel[data-stufe="N5"] { --stufe-farbe: var(--stufe-a1); }
.gk-kachel[data-stufe="N4"] { --stufe-farbe: var(--stufe-a2); }
.gk-kachel[data-stufe="N3"] { --stufe-farbe: var(--stufe-b1); }
.gk-kachel[data-stufe="N2"] { --stufe-farbe: var(--stufe-b2); }
.gk-kachel:hover, .gk-kachel:focus-visible {
  background: var(--marke-weich); border-color: var(--marke);
  transform: translateY(-1px); box-shadow: var(--lift-hi);
}
/* Die Stufe steht an der Achse und am Band. Am Kästchen steht sie noch
   einmal, aber leise — für den, der quer liest. */
.gk-kachel-stufe {
  flex: 0 0 auto; font-size: .8rem; letter-spacing: .06em;
  color: var(--ink-3); opacity: .7;
}
.gk-kachel.gk-fertig .gk-kachel-titel::after { content: " ✓"; color: var(--ok-ink); }

/* Gefiltert wird über eine Klasse am Wurzelelement: ein Wechsel oben statt
   121 einzelner Änderungen unten. */
.gk[data-nur-stufe="A1"] .gk-zelle:not([data-stufe="A1"]),
.gk[data-nur-stufe="A2"] .gk-zelle:not([data-stufe="A2"]),
.gk[data-nur-stufe="B1"] .gk-zelle:not([data-stufe="B1"]),
.gk[data-nur-stufe="B2"] .gk-zelle:not([data-stufe="B2"]),
.gk[data-nur-stufe="C1"] .gk-zelle:not([data-stufe="C1"]),
.gk[data-nur-stufe="N5"] .gk-zelle:not([data-stufe="N5"]),
.gk[data-nur-stufe="N4"] .gk-zelle:not([data-stufe="N4"]),
.gk[data-nur-stufe="N3"] .gk-zelle:not([data-stufe="N3"]),
.gk[data-nur-stufe="N2"] .gk-zelle:not([data-stufe="N2"]),
.gk[data-nur-stufe="C2"] .gk-zelle:not([data-stufe="C2"]) { opacity: .2; }

@media (max-width: 52rem) {
  .gk-achse, .gk-zeile {
    --gk-kopf: 7rem;
    grid-template-columns: var(--gk-kopf) repeat(var(--gk-spalten, 6),
                            minmax(7rem, 1fr));
  }
  .gk-kachel { font-size: .8rem; }
}

/* ==========================================================================
   Die Zeitleiste — die Achse ist die Zeit

   Vorher stand hier dieselbe Tabelle wie bei der Grammatikkarte: waagerecht
   die Stufe, senkrecht die Bereiche. Das beantwortete zum dritten Mal die
   Frage, auf welcher Stufe was kommt, und kein einziges Mal die, wegen der
   man eine Zeitleiste anschaut. Jetzt laeuft von links nach rechts die
   Zeit, und die Zeitformen haengen daran.

   Die Schiene ist ein `::before` ueber die ganze Bahn und keine Kante an
   den Kaesten: Eine Linie, die aus sechs Rahmenstuecken besteht, hat fuenf
   Luecken genau dort, wo sie durchgehen muesste. Auf dem Telefon kippt sie
   in die Senkrechte — sechs Stationen nebeneinander sind auf 320 Pixeln
   keine Leiste, sondern ein Schiebefeld, und ein Schiebefeld verbirgt die
   Haelfte der Auskunft.
   ========================================================================== */

.zl { margin: 1.2rem 0 0; }

.zl-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin-bottom: 1.2rem;
}
 /* **Nichts auf dieser Seite ist kleiner als 0,8rem.**

    `layout` misst zwei Grenzen, und beide gelten für ein Telefon und
    nicht für den Bildschirm, auf dem etwas geschrieben wurde: Schrift
    unter 12,5 Pixeln wird zu einem grauen Strich, den man für Dekoration
    hält, und ein Berührungsziel unter 32 Pixeln geht daneben. Die
    Stufenkürzel standen auf .62rem, die Zahlen auf .7rem — leise
    gemeint, unlesbar geworden. Leise bleiben sie jetzt über die Farbe
    und die Sperrung, nicht über die Größe. */
.zl-filter-wort {
  font-size: .8rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin-right: .15rem;
}
.zl-stufe {
  display: inline-flex; align-items: baseline; gap: .32rem;
  padding: .3rem .65rem; border-radius: var(--rund-voll);
  border: 1px solid var(--linie); background: var(--karte);
  color: var(--ink-2); font: inherit; font-size: .8rem; cursor: default;
  transition: background .12s, border-color .12s;
}
.zl-bedienbar .zl-stufe { cursor: pointer; }
.zl-stufe b { letter-spacing: .04em; color: var(--stufe-ink, var(--ink)); }
.zl-stufe span { font-size: .8rem; color: var(--ink-3);
                 font-variant-numeric: tabular-nums; }
.zl-stufe.zl-an {
  border-color: var(--stufe-farbe, var(--marke)); font-weight: 600;
  background: color-mix(in srgb, var(--stufe-farbe, var(--marke)) 16%,
                        var(--karte));
}
.zl-stufe[data-stufe="A1"] { --stufe-farbe: var(--stufe-a1); }
.zl-stufe[data-stufe="A2"] { --stufe-farbe: var(--stufe-a2); }
.zl-stufe[data-stufe="B1"] { --stufe-farbe: var(--stufe-b1); }
.zl-stufe[data-stufe="B2"] { --stufe-farbe: var(--stufe-b2); }
.zl-stufe[data-stufe="C1"] { --stufe-farbe: var(--stufe-c1); }
.zl-stufe[data-stufe="C2"] { --stufe-farbe: var(--stufe-c2); }
.zl-stufe[data-stufe="N5"] { --stufe-farbe: var(--stufe-a1); }
.zl-stufe[data-stufe="N4"] { --stufe-farbe: var(--stufe-a2); }
.zl-stufe[data-stufe="N3"] { --stufe-farbe: var(--stufe-b1); }
.zl-stufe[data-stufe="N2"] { --stufe-farbe: var(--stufe-b2); }

.zl-bahn {
  position: relative; display: grid; gap: .7rem; align-items: start;
  grid-template-columns: repeat(var(--zl-stationen, 6), minmax(0, 1fr));
  padding: 1.95rem .15rem .3rem;
}
/* `align-items: start` und nicht die Vorgabe `stretch`: Eine Station mit
   einer Form wurde sonst so hoch wie die mit sechs, und zwischen den
   Karten stand mehr Weiss als Text. Alle beginnen oben an derselben
   Linie — das ist es, was die Reihe zu einer Leiste macht — und jede
   hoert dort auf, wo sie fertig ist. */
/* Die Schiene selbst: von links nach rechts, kuehl nach warm, und an
   beiden Enden ausgeblendet — die Zeit faengt nicht bei „Davor" an und
   hoert nicht bei „Bis dahin" auf. */
.zl-bahn::before {
  content: ""; position: absolute; left: .15rem; right: .15rem;
  top: .95rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg,
                transparent 0%,
                var(--linie-kraeftig) 5%,
                var(--marke) 52%,
                var(--akzent) 93%,
                transparent 100%);
}

.zl-station {
  position: relative; display: flex; flex-direction: column; gap: .4rem;
  padding: .85rem .7rem .75rem; border-radius: var(--rund);
  border: 1px solid var(--linie); background: var(--karte);
  box-shadow: var(--lift);
}
.zl-punkt {
  position: absolute; top: -1.29rem; left: 1rem;
  width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--karte); border: 2px solid var(--linie-kraeftig);
}
/* Das Jetzt ist der Nullpunkt und sieht danach aus. */
.zl-station[data-station="jetzt"] {
  border-color: color-mix(in srgb, var(--marke) 45%, var(--linie));
  box-shadow: var(--lift-hi);
}
.zl-station[data-station="jetzt"] .zl-punkt {
  top: -1.44rem; left: .85rem; width: 1rem; height: 1rem;
  border: 3px solid var(--marke);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--marke) 16%, transparent);
}
.zl-kopf {
  display: flex; align-items: baseline; gap: .4rem; margin: 0;
  font-family: var(--schrift-titel); line-height: 1.2;
  font-size: clamp(.86rem, .5rem + .6vw, .98rem);
  color: var(--ink);
}
/* Die Stationen tragen Fachbegriffe („Vergangenheit mit
   Gegenwartsbezug"): bei sechs Spalten auf dem Tablet trennen statt über
   den Kartenrand laufen. */
.zl-name { font-weight: 600; min-width: 0; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; }
.zl-zahl {
  flex-shrink: 0;
  margin-left: auto; font-size: .8rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums; font-family: var(--schrift);
}
.zl-satz { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--ink-3); }
.zl-formen { display: flex; flex-direction: column; gap: .3rem; margin-top: .1rem; }

.zl-form {
  display: flex; align-items: center; justify-content: space-between;
  gap: .3rem; padding: .4rem .45rem; min-height: 32px;
  border-radius: var(--rund-s);
  text-decoration: none; color: var(--ink); font-size: .8rem;
  line-height: 1.25; border: 1px solid var(--linie);
  border-left: 3px solid var(--stufe-farbe, var(--linie));
  background: var(--karte-2);
  transition: border-color .12s, background .12s, transform .12s;
}
.zl-form[data-stufe="A1"] { --stufe-farbe: var(--stufe-a1); }
.zl-form[data-stufe="A2"] { --stufe-farbe: var(--stufe-a2); }
.zl-form[data-stufe="B1"] { --stufe-farbe: var(--stufe-b1); }
.zl-form[data-stufe="B2"] { --stufe-farbe: var(--stufe-b2); }
.zl-form[data-stufe="C1"] { --stufe-farbe: var(--stufe-c1); }
.zl-form[data-stufe="C2"] { --stufe-farbe: var(--stufe-c2); }
.zl-form[data-stufe="N5"] { --stufe-farbe: var(--stufe-a1); }
.zl-form[data-stufe="N4"] { --stufe-farbe: var(--stufe-a2); }
.zl-form[data-stufe="N3"] { --stufe-farbe: var(--stufe-b1); }
.zl-form[data-stufe="N2"] { --stufe-farbe: var(--stufe-b2); }
.zl-form:hover, .zl-form:focus-visible {
  background: var(--marke-weich); border-color: var(--marke);
  transform: translateY(-1px);
}
.zl-form-stufe {
  flex: 0 0 auto; font-size: .8rem; letter-spacing: .06em;
  color: var(--ink-3); opacity: .7;
}
.zl-form.zl-fertig .zl-form-titel::after { content: " ✓"; color: var(--ok-ink); }

/* Die drei Baender unter der Achse. Gestrichelt, weil sie nicht auf der
   Leiste stehen — das ist ihre ganze Aussage. */
.zl-baender {
  display: grid; gap: .7rem; margin-top: 1.3rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.zl-band {
  display: flex; flex-direction: column; gap: .4rem;
  padding: .85rem .8rem .8rem; border-radius: var(--rund);
  border: 1px dashed var(--linie-kraeftig);
  background: rgba(var(--tint), .022);
}
.zl-band .zl-formen {
  display: grid; gap: .3rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

.zl[data-nur-stufe="A1"] .zl-form:not([data-stufe="A1"]),
.zl[data-nur-stufe="A2"] .zl-form:not([data-stufe="A2"]),
.zl[data-nur-stufe="B1"] .zl-form:not([data-stufe="B1"]),
.zl[data-nur-stufe="B2"] .zl-form:not([data-stufe="B2"]),
.zl[data-nur-stufe="C1"] .zl-form:not([data-stufe="C1"]),
.zl[data-nur-stufe="N5"] .zl-form:not([data-stufe="N5"]),
.zl[data-nur-stufe="N4"] .zl-form:not([data-stufe="N4"]),
.zl[data-nur-stufe="N3"] .zl-form:not([data-stufe="N3"]),
.zl[data-nur-stufe="N2"] .zl-form:not([data-stufe="N2"]),
.zl[data-nur-stufe="C2"] .zl-form:not([data-stufe="C2"]) { opacity: .2; }

@media (max-width: 52rem) {
  .zl-bahn {
    grid-template-columns: 1fr; gap: .6rem;
    padding: .2rem .15rem .3rem 1.3rem;
  }
  .zl-bahn::before {
    left: .3rem; right: auto; top: .5rem; bottom: .5rem;
    width: 2px; height: auto;
    background: linear-gradient(180deg,
                  transparent 0%, var(--linie-kraeftig) 4%,
                  var(--marke) 52%, var(--akzent) 94%, transparent 100%);
  }
  .zl-punkt { top: 1rem; left: -1.35rem; }
  .zl-station[data-station="jetzt"] .zl-punkt { top: .85rem; left: -1.5rem; }
}
  .gk { grid-auto-flow: row; }
}

/* Munos Zwischenjubel — kleiner als der Etappenschluss, weil er mitten in
   einer Runde steht und nicht an ihrem Ende. */
.muno-jubel {
  margin: .8rem 0 0; padding: .6rem .8rem; gap: .7rem;
  background: var(--ok-weich); border-color: transparent;
}
.muno-jubel .muno { width: 56px; height: 56px; }
.muno-jubel .muno-spruch { font-size: .98rem; }

/* Munos Trost nach einer falschen Antwort: genauso klein wie der Jubel und
   in der ruhigen Farbe der Seite, nicht in der des Fehlers — der steht
   schon im Kopf der Aufloesung. */
.muno-trost {
  margin: .7rem 0 .2rem; padding: .5rem .8rem; gap: .7rem;
  background: var(--karte-2); border-color: transparent;
}
.muno-trost .muno-spruch { font-size: .96rem; font-weight: 500; }


/* Muno als Foto — auf den Seiten eines Sprachpaares, in den Farben der
   Zielsprache (tools/maskottchen.py, `foto()`). Welches Bild, entscheiden
   `data-muno` auf <html> und `data-pose` an der Figur; so bekommt eine
   Figur, die ein Skript einsetzt, dasselbe Bild wie eine gebaute.

   `span.muno.muno-foto` und nicht `.muno-foto`: Die Groessen der
   Zeichnung stehen als `.mu-tipp .muno`, `.etappe .muno` usw. da und
   wuerden eine einklassige Regel schlagen. Das Foto ist breiter als hoch
   und darf deshalb breiter stehen als das quadratische SVG. */
span.muno.muno-foto {
  width: 120px; height: auto; aspect-ratio: 480 / 392;
  background: center bottom / contain no-repeat;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .14));
}
.mu-tipp span.muno.muno-foto { width: 128px; }
.etappe span.muno.muno-foto { width: 116px; }
.muno-vorstellung span.muno.muno-foto { width: 150px; }
.muno-jubel span.muno.muno-foto { width: 78px; }
.muno-trost span.muno.muno-foto { width: 72px; }
@media (max-width: 760px) {
  span.muno.muno-foto { width: 92px; }
  .mu-tipp span.muno.muno-foto { width: 96px; }
  .muno-vorstellung span.muno.muno-foto { width: 112px; }
  .muno-jubel span.muno.muno-foto,
  .muno-trost span.muno.muno-foto { width: 64px; }
}
@media (prefers-reduced-motion: no-preference) {
  .aufloesung span.muno.muno-foto { animation: mu-auftritt .35s ease-out both; }
}
@keyframes mu-auftritt {
  from { opacity: 0; transform: translateY(6px) scale(.94); }
  to { opacity: 1; transform: none; }
}
@media print { span.muno.muno-foto { filter: none; } }
html[data-muno="de"] .muno-foto[data-pose="winkt"] { background-image: url("../muno/muno-de-winkt.webp?v=759e3cf4"); }
html[data-muno="de"] .muno-foto[data-pose="feiert"] { background-image: url("../muno/muno-de-feiert.webp?v=115b4160"); }
html[data-muno="de"] .muno-foto[data-pose="hoppla"] { background-image: url("../muno/muno-de-hoppla.webp?v=f4eae7ff"); }
html[data-muno="de"] .muno-foto[data-pose="zeigt"] { background-image: url("../muno/muno-de-zeigt.webp?v=bebccfc8"); }
html[data-muno="de"] .muno-foto[data-pose="denkt"] { background-image: url("../muno/muno-de-denkt.webp?v=8587079a"); }
html[data-muno="de"] .muno-foto[data-pose="liest"] { background-image: url("../muno/muno-de-liest.webp?v=7c438fa3"); }
html[data-muno="de"] .muno-foto[data-pose="ruht"] { background-image: url("../muno/muno-de-ruht.webp?v=ba679bf1"); }
html[data-muno="en"] .muno-foto[data-pose="winkt"] { background-image: url("../muno/muno-en-winkt.webp?v=405e0e44"); }
html[data-muno="en"] .muno-foto[data-pose="feiert"] { background-image: url("../muno/muno-en-feiert.webp?v=b5abcfcb"); }
html[data-muno="en"] .muno-foto[data-pose="hoppla"] { background-image: url("../muno/muno-en-hoppla.webp?v=6f9e5e7d"); }
html[data-muno="en"] .muno-foto[data-pose="zeigt"] { background-image: url("../muno/muno-en-zeigt.webp?v=4f92dde3"); }
html[data-muno="en"] .muno-foto[data-pose="denkt"] { background-image: url("../muno/muno-en-denkt.webp?v=768b51ad"); }
html[data-muno="en"] .muno-foto[data-pose="liest"] { background-image: url("../muno/muno-en-liest.webp?v=1a872c7a"); }
html[data-muno="en"] .muno-foto[data-pose="ruht"] { background-image: url("../muno/muno-en-ruht.webp?v=a72b8bd1"); }
html[data-muno="es"] .muno-foto[data-pose="winkt"] { background-image: url("../muno/muno-es-winkt.webp?v=ec918348"); }
html[data-muno="es"] .muno-foto[data-pose="feiert"] { background-image: url("../muno/muno-es-feiert.webp?v=74872bb2"); }
html[data-muno="es"] .muno-foto[data-pose="hoppla"] { background-image: url("../muno/muno-es-hoppla.webp?v=5d6c83ea"); }
html[data-muno="es"] .muno-foto[data-pose="zeigt"] { background-image: url("../muno/muno-es-zeigt.webp?v=d47a7baa"); }
html[data-muno="es"] .muno-foto[data-pose="denkt"] { background-image: url("../muno/muno-es-denkt.webp?v=3d2138b1"); }
html[data-muno="es"] .muno-foto[data-pose="liest"] { background-image: url("../muno/muno-es-liest.webp?v=d37f881c"); }
html[data-muno="es"] .muno-foto[data-pose="ruht"] { background-image: url("../muno/muno-es-ruht.webp?v=8d5b9309"); }
html[data-muno="fr"] .muno-foto[data-pose="winkt"] { background-image: url("../muno/muno-fr-winkt.webp?v=1bf28e3a"); }
html[data-muno="fr"] .muno-foto[data-pose="feiert"] { background-image: url("../muno/muno-fr-feiert.webp?v=034b02b2"); }
html[data-muno="fr"] .muno-foto[data-pose="hoppla"] { background-image: url("../muno/muno-fr-hoppla.webp?v=8f6f4871"); }
html[data-muno="fr"] .muno-foto[data-pose="zeigt"] { background-image: url("../muno/muno-fr-zeigt.webp?v=f03db1a0"); }
html[data-muno="fr"] .muno-foto[data-pose="denkt"] { background-image: url("../muno/muno-fr-denkt.webp?v=17b2a670"); }
html[data-muno="fr"] .muno-foto[data-pose="liest"] { background-image: url("../muno/muno-fr-liest.webp?v=e26bc1bc"); }
html[data-muno="fr"] .muno-foto[data-pose="ruht"] { background-image: url("../muno/muno-fr-ruht.webp?v=a9126ee0"); }
html[data-muno="it"] .muno-foto[data-pose="winkt"] { background-image: url("../muno/muno-it-winkt.webp?v=789e3a8c"); }
html[data-muno="it"] .muno-foto[data-pose="feiert"] { background-image: url("../muno/muno-it-feiert.webp?v=d68b0f7b"); }
html[data-muno="it"] .muno-foto[data-pose="hoppla"] { background-image: url("../muno/muno-it-hoppla.webp?v=ce7a362e"); }
html[data-muno="it"] .muno-foto[data-pose="zeigt"] { background-image: url("../muno/muno-it-zeigt.webp?v=184bc86b"); }
html[data-muno="it"] .muno-foto[data-pose="denkt"] { background-image: url("../muno/muno-it-denkt.webp?v=7b61b00b"); }
html[data-muno="it"] .muno-foto[data-pose="liest"] { background-image: url("../muno/muno-it-liest.webp?v=e855b788"); }
html[data-muno="it"] .muno-foto[data-pose="ruht"] { background-image: url("../muno/muno-it-ruht.webp?v=dd33453b"); }
html[data-muno="pt"] .muno-foto[data-pose="winkt"] { background-image: url("../muno/muno-pt-winkt.webp?v=87a5f294"); }
html[data-muno="pt"] .muno-foto[data-pose="feiert"] { background-image: url("../muno/muno-pt-feiert.webp?v=10508223"); }
html[data-muno="pt"] .muno-foto[data-pose="hoppla"] { background-image: url("../muno/muno-pt-hoppla.webp?v=121ad415"); }
html[data-muno="pt"] .muno-foto[data-pose="zeigt"] { background-image: url("../muno/muno-pt-zeigt.webp?v=f1d35168"); }
html[data-muno="pt"] .muno-foto[data-pose="denkt"] { background-image: url("../muno/muno-pt-denkt.webp?v=3b849210"); }
html[data-muno="pt"] .muno-foto[data-pose="liest"] { background-image: url("../muno/muno-pt-liest.webp?v=19bfa057"); }
html[data-muno="pt"] .muno-foto[data-pose="ruht"] { background-image: url("../muno/muno-pt-ruht.webp?v=719e104f"); }
html[data-muno="ja"] .muno-foto[data-pose="winkt"] { background-image: url("../muno/muno-ja-winkt.webp?v=e41d286c"); }
html[data-muno="ja"] .muno-foto[data-pose="feiert"] { background-image: url("../muno/muno-ja-feiert.webp?v=ba0f2f67"); }
html[data-muno="ja"] .muno-foto[data-pose="hoppla"] { background-image: url("../muno/muno-ja-hoppla.webp?v=5baf72ff"); }
html[data-muno="ja"] .muno-foto[data-pose="zeigt"] { background-image: url("../muno/muno-ja-zeigt.webp?v=c2dc0fb2"); }
html[data-muno="ja"] .muno-foto[data-pose="denkt"] { background-image: url("../muno/muno-ja-denkt.webp?v=70e3a4f8"); }
html[data-muno="ja"] .muno-foto[data-pose="liest"] { background-image: url("../muno/muno-ja-liest.webp?v=f1851425"); }
html[data-muno="ja"] .muno-foto[data-pose="ruht"] { background-image: url("../muno/muno-ja-ruht.webp?v=0cdf48e1"); }
html[data-muno="zh"] .muno-foto[data-pose="winkt"] { background-image: url("../muno/muno-zh-winkt.webp?v=96b2c4db"); }
html[data-muno="zh"] .muno-foto[data-pose="feiert"] { background-image: url("../muno/muno-zh-feiert.webp?v=e448d1fe"); }
html[data-muno="zh"] .muno-foto[data-pose="hoppla"] { background-image: url("../muno/muno-zh-hoppla.webp?v=37f6b59e"); }
html[data-muno="zh"] .muno-foto[data-pose="zeigt"] { background-image: url("../muno/muno-zh-zeigt.webp?v=3079d029"); }
html[data-muno="zh"] .muno-foto[data-pose="denkt"] { background-image: url("../muno/muno-zh-denkt.webp?v=01445b7c"); }
html[data-muno="zh"] .muno-foto[data-pose="liest"] { background-image: url("../muno/muno-zh-liest.webp?v=4697e104"); }
html[data-muno="zh"] .muno-foto[data-pose="ruht"] { background-image: url("../muno/muno-zh-ruht.webp?v=f07e0868"); }
/* Der grüne Muno ohne Flagge — auf der Startseite mit der Sprachwahl und
   den Rechtsseiten, die keiner Sprache gehören. Er sitzt auf demselben Ast
   und im selben Format wie die Sprach-Munos; ohne Ast fehlte ihm auf der
   Startseite der Halt, und genau das ist aufgefallen. */
html[data-muno="basis"] .muno-foto[data-pose="winkt"] { background-image: url("../muno/muno-basis-winkt.webp?v=7ac80303"); }
html[data-muno="basis"] .muno-foto[data-pose="feiert"] { background-image: url("../muno/muno-basis-feiert.webp?v=83e499fc"); }
html[data-muno="basis"] .muno-foto[data-pose="hoppla"] { background-image: url("../muno/muno-basis-hoppla.webp?v=5a79239b"); }
html[data-muno="basis"] .muno-foto[data-pose="zeigt"] { background-image: url("../muno/muno-basis-zeigt.webp?v=cd5c5bed"); }
html[data-muno="basis"] .muno-foto[data-pose="denkt"] { background-image: url("../muno/muno-basis-denkt.webp?v=d8ea3a93"); }
html[data-muno="basis"] .muno-foto[data-pose="liest"] { background-image: url("../muno/muno-basis-liest.webp?v=3bcfecb3"); }
html[data-muno="basis"] .muno-foto[data-pose="ruht"] { background-image: url("../muno/muno-basis-ruht.webp?v=aa8e1f06"); }
html[data-muno="ko"] .muno-foto[data-pose="winkt"] { background-image: url("../muno/muno-ko-winkt.webp?v=1543b93d"); }
html[data-muno="ko"] .muno-foto[data-pose="feiert"] { background-image: url("../muno/muno-ko-feiert.webp?v=402a2689"); }
html[data-muno="ko"] .muno-foto[data-pose="hoppla"] { background-image: url("../muno/muno-ko-hoppla.webp?v=8085185c"); }
html[data-muno="ko"] .muno-foto[data-pose="zeigt"] { background-image: url("../muno/muno-ko-zeigt.webp?v=2dfb4ab6"); }
html[data-muno="ko"] .muno-foto[data-pose="denkt"] { background-image: url("../muno/muno-ko-denkt.webp?v=44a131c7"); }
html[data-muno="ko"] .muno-foto[data-pose="liest"] { background-image: url("../muno/muno-ko-liest.webp?v=55da5c81"); }
html[data-muno="ko"] .muno-foto[data-pose="ruht"] { background-image: url("../muno/muno-ko-ruht.webp?v=0a55e53f"); }

/* Acht weitere Gesten (tools/maskottchen.py, NEUE_POSEN) — mit Higgsfield
   erzeugt wie die ersten sieben, in allen zehn Faerbungen. */
html[data-muno="de"] .muno-foto[data-pose="klatscht"] { background-image: url("../muno/muno-de-klatscht.webp?v=58c8fbf5"); }
html[data-muno="de"] .muno-foto[data-pose="daumen"] { background-image: url("../muno/muno-de-daumen.webp?v=6911ca1a"); }
html[data-muno="de"] .muno-foto[data-pose="staunt"] { background-image: url("../muno/muno-de-staunt.webp?v=292ebe02"); }
html[data-muno="de"] .muno-foto[data-pose="lauscht"] { background-image: url("../muno/muno-de-lauscht.webp?v=650997c2"); }
html[data-muno="de"] .muno-foto[data-pose="spricht"] { background-image: url("../muno/muno-de-spricht.webp?v=3b92bbca"); }
html[data-muno="de"] .muno-foto[data-pose="schreibt"] { background-image: url("../muno/muno-de-schreibt.webp?v=a28002f7"); }
html[data-muno="de"] .muno-foto[data-pose="pokal"] { background-image: url("../muno/muno-de-pokal.webp?v=d7c06436"); }
html[data-muno="de"] .muno-foto[data-pose="lupe"] { background-image: url("../muno/muno-de-lupe.webp?v=5f5dfcd0"); }
html[data-muno="en"] .muno-foto[data-pose="klatscht"] { background-image: url("../muno/muno-en-klatscht.webp?v=b3c2e0d7"); }
html[data-muno="en"] .muno-foto[data-pose="daumen"] { background-image: url("../muno/muno-en-daumen.webp?v=e347196c"); }
html[data-muno="en"] .muno-foto[data-pose="staunt"] { background-image: url("../muno/muno-en-staunt.webp?v=d4419a15"); }
html[data-muno="en"] .muno-foto[data-pose="lauscht"] { background-image: url("../muno/muno-en-lauscht.webp?v=91fede90"); }
html[data-muno="en"] .muno-foto[data-pose="spricht"] { background-image: url("../muno/muno-en-spricht.webp?v=18f723e5"); }
html[data-muno="en"] .muno-foto[data-pose="schreibt"] { background-image: url("../muno/muno-en-schreibt.webp?v=3ce3c3a5"); }
html[data-muno="en"] .muno-foto[data-pose="pokal"] { background-image: url("../muno/muno-en-pokal.webp?v=30149bfd"); }
html[data-muno="en"] .muno-foto[data-pose="lupe"] { background-image: url("../muno/muno-en-lupe.webp?v=7d129ef0"); }
html[data-muno="es"] .muno-foto[data-pose="klatscht"] { background-image: url("../muno/muno-es-klatscht.webp?v=8a7f9633"); }
html[data-muno="es"] .muno-foto[data-pose="daumen"] { background-image: url("../muno/muno-es-daumen.webp?v=7680b33a"); }
html[data-muno="es"] .muno-foto[data-pose="staunt"] { background-image: url("../muno/muno-es-staunt.webp?v=253c93e8"); }
html[data-muno="es"] .muno-foto[data-pose="lauscht"] { background-image: url("../muno/muno-es-lauscht.webp?v=3c9f1666"); }
html[data-muno="es"] .muno-foto[data-pose="spricht"] { background-image: url("../muno/muno-es-spricht.webp?v=a14ed052"); }
html[data-muno="es"] .muno-foto[data-pose="schreibt"] { background-image: url("../muno/muno-es-schreibt.webp?v=eec12235"); }
html[data-muno="es"] .muno-foto[data-pose="pokal"] { background-image: url("../muno/muno-es-pokal.webp?v=3467e842"); }
html[data-muno="es"] .muno-foto[data-pose="lupe"] { background-image: url("../muno/muno-es-lupe.webp?v=0e3a02ec"); }
html[data-muno="fr"] .muno-foto[data-pose="klatscht"] { background-image: url("../muno/muno-fr-klatscht.webp?v=aec4fc7e"); }
html[data-muno="fr"] .muno-foto[data-pose="daumen"] { background-image: url("../muno/muno-fr-daumen.webp?v=240bfc1b"); }
html[data-muno="fr"] .muno-foto[data-pose="staunt"] { background-image: url("../muno/muno-fr-staunt.webp?v=0475a313"); }
html[data-muno="fr"] .muno-foto[data-pose="lauscht"] { background-image: url("../muno/muno-fr-lauscht.webp?v=390c273d"); }
html[data-muno="fr"] .muno-foto[data-pose="spricht"] { background-image: url("../muno/muno-fr-spricht.webp?v=501b1da4"); }
html[data-muno="fr"] .muno-foto[data-pose="schreibt"] { background-image: url("../muno/muno-fr-schreibt.webp?v=4e7c842a"); }
html[data-muno="fr"] .muno-foto[data-pose="pokal"] { background-image: url("../muno/muno-fr-pokal.webp?v=53398afd"); }
html[data-muno="fr"] .muno-foto[data-pose="lupe"] { background-image: url("../muno/muno-fr-lupe.webp?v=df6c195a"); }
html[data-muno="it"] .muno-foto[data-pose="klatscht"] { background-image: url("../muno/muno-it-klatscht.webp?v=87a6d8d6"); }
html[data-muno="it"] .muno-foto[data-pose="daumen"] { background-image: url("../muno/muno-it-daumen.webp?v=2ecb9c78"); }
html[data-muno="it"] .muno-foto[data-pose="staunt"] { background-image: url("../muno/muno-it-staunt.webp?v=faefaae6"); }
html[data-muno="it"] .muno-foto[data-pose="lauscht"] { background-image: url("../muno/muno-it-lauscht.webp?v=a4dc84a0"); }
html[data-muno="it"] .muno-foto[data-pose="spricht"] { background-image: url("../muno/muno-it-spricht.webp?v=4c3637c2"); }
html[data-muno="it"] .muno-foto[data-pose="schreibt"] { background-image: url("../muno/muno-it-schreibt.webp?v=dbcf9c10"); }
html[data-muno="it"] .muno-foto[data-pose="pokal"] { background-image: url("../muno/muno-it-pokal.webp?v=6b5d7f52"); }
html[data-muno="it"] .muno-foto[data-pose="lupe"] { background-image: url("../muno/muno-it-lupe.webp?v=ca3a86d2"); }
html[data-muno="pt"] .muno-foto[data-pose="klatscht"] { background-image: url("../muno/muno-pt-klatscht.webp?v=e16798aa"); }
html[data-muno="pt"] .muno-foto[data-pose="daumen"] { background-image: url("../muno/muno-pt-daumen.webp?v=b2338658"); }
html[data-muno="pt"] .muno-foto[data-pose="staunt"] { background-image: url("../muno/muno-pt-staunt.webp?v=0fd8604b"); }
html[data-muno="pt"] .muno-foto[data-pose="lauscht"] { background-image: url("../muno/muno-pt-lauscht.webp?v=7097ef05"); }
html[data-muno="pt"] .muno-foto[data-pose="spricht"] { background-image: url("../muno/muno-pt-spricht.webp?v=ed0f9cdc"); }
html[data-muno="pt"] .muno-foto[data-pose="schreibt"] { background-image: url("../muno/muno-pt-schreibt.webp?v=425b7657"); }
html[data-muno="pt"] .muno-foto[data-pose="pokal"] { background-image: url("../muno/muno-pt-pokal.webp?v=32293be1"); }
html[data-muno="pt"] .muno-foto[data-pose="lupe"] { background-image: url("../muno/muno-pt-lupe.webp?v=7637aba8"); }
html[data-muno="zh"] .muno-foto[data-pose="klatscht"] { background-image: url("../muno/muno-zh-klatscht.webp?v=22312d13"); }
html[data-muno="zh"] .muno-foto[data-pose="daumen"] { background-image: url("../muno/muno-zh-daumen.webp?v=d32ab606"); }
html[data-muno="zh"] .muno-foto[data-pose="staunt"] { background-image: url("../muno/muno-zh-staunt.webp?v=45bba100"); }
html[data-muno="zh"] .muno-foto[data-pose="lauscht"] { background-image: url("../muno/muno-zh-lauscht.webp?v=327487d6"); }
html[data-muno="zh"] .muno-foto[data-pose="spricht"] { background-image: url("../muno/muno-zh-spricht.webp?v=e1d57a3b"); }
html[data-muno="zh"] .muno-foto[data-pose="schreibt"] { background-image: url("../muno/muno-zh-schreibt.webp?v=2d5091dc"); }
html[data-muno="zh"] .muno-foto[data-pose="pokal"] { background-image: url("../muno/muno-zh-pokal.webp?v=c6ce7774"); }
html[data-muno="zh"] .muno-foto[data-pose="lupe"] { background-image: url("../muno/muno-zh-lupe.webp?v=4d58ff64"); }
html[data-muno="ja"] .muno-foto[data-pose="klatscht"] { background-image: url("../muno/muno-ja-klatscht.webp?v=f6002093"); }
html[data-muno="ja"] .muno-foto[data-pose="daumen"] { background-image: url("../muno/muno-ja-daumen.webp?v=d1357fa3"); }
html[data-muno="ja"] .muno-foto[data-pose="staunt"] { background-image: url("../muno/muno-ja-staunt.webp?v=089c71fe"); }
html[data-muno="ja"] .muno-foto[data-pose="lauscht"] { background-image: url("../muno/muno-ja-lauscht.webp?v=f08e89f9"); }
html[data-muno="ja"] .muno-foto[data-pose="spricht"] { background-image: url("../muno/muno-ja-spricht.webp?v=f96740d2"); }
html[data-muno="ja"] .muno-foto[data-pose="schreibt"] { background-image: url("../muno/muno-ja-schreibt.webp?v=ce32cd22"); }
html[data-muno="ja"] .muno-foto[data-pose="pokal"] { background-image: url("../muno/muno-ja-pokal.webp?v=1b1d0a36"); }
html[data-muno="ja"] .muno-foto[data-pose="lupe"] { background-image: url("../muno/muno-ja-lupe.webp?v=0a4ad1aa"); }
html[data-muno="ko"] .muno-foto[data-pose="klatscht"] { background-image: url("../muno/muno-ko-klatscht.webp?v=2c1c4101"); }
html[data-muno="ko"] .muno-foto[data-pose="daumen"] { background-image: url("../muno/muno-ko-daumen.webp?v=8a03cd52"); }
html[data-muno="ko"] .muno-foto[data-pose="staunt"] { background-image: url("../muno/muno-ko-staunt.webp?v=c21a03e5"); }
html[data-muno="ko"] .muno-foto[data-pose="lauscht"] { background-image: url("../muno/muno-ko-lauscht.webp?v=e9153970"); }
html[data-muno="ko"] .muno-foto[data-pose="spricht"] { background-image: url("../muno/muno-ko-spricht.webp?v=2102eda9"); }
html[data-muno="ko"] .muno-foto[data-pose="schreibt"] { background-image: url("../muno/muno-ko-schreibt.webp?v=bf23becd"); }
html[data-muno="ko"] .muno-foto[data-pose="pokal"] { background-image: url("../muno/muno-ko-pokal.webp?v=ce97c379"); }
html[data-muno="ko"] .muno-foto[data-pose="lupe"] { background-image: url("../muno/muno-ko-lupe.webp?v=b2e478e3"); }
html[data-muno="basis"] .muno-foto[data-pose="klatscht"] { background-image: url("../muno/muno-basis-klatscht.webp?v=4d54da35"); }
html[data-muno="basis"] .muno-foto[data-pose="daumen"] { background-image: url("../muno/muno-basis-daumen.webp?v=dc9235c4"); }
html[data-muno="basis"] .muno-foto[data-pose="staunt"] { background-image: url("../muno/muno-basis-staunt.webp?v=43ab8bd5"); }
html[data-muno="basis"] .muno-foto[data-pose="lauscht"] { background-image: url("../muno/muno-basis-lauscht.webp?v=5b96e2fc"); }
html[data-muno="basis"] .muno-foto[data-pose="spricht"] { background-image: url("../muno/muno-basis-spricht.webp?v=a5d7670f"); }
html[data-muno="basis"] .muno-foto[data-pose="schreibt"] { background-image: url("../muno/muno-basis-schreibt.webp?v=1ef2b96c"); }
html[data-muno="basis"] .muno-foto[data-pose="pokal"] { background-image: url("../muno/muno-basis-pokal.webp?v=b701c28b"); }
html[data-muno="basis"] .muno-foto[data-pose="lupe"] { background-image: url("../muno/muno-basis-lupe.webp?v=c1a3e4c5"); }

/* Muno ohne Sprechblase: eine Geste und ihr Satz (maskottchen.gestalt). */
.muno-gestalt { margin: .4rem 0 1.4rem; padding: .7rem 1rem; }
.muno-gestalt .muno { width: 76px; height: 76px; flex: none; }
.muno-gestalt span.muno.muno-foto { width: 108px; height: auto; }
@media (max-width: 760px) {
  .muno-gestalt span.muno.muno-foto { width: 84px; }
}

/* Munos Begruessung oben in der Buehne der Startseite (startseite.js,
   grussZeigen). Am breiten Schirm steht er gross in der rechten Spalte, wo
   frueher die Probierkarte stand, die Blase ueber ihm; auf dem Telefon als
   eine Zeile unter dem Text, direkt ueber der Sprachwahl, auf die sein Satz
   zeigt. Kein Overlay, nichts davor. Der Auftritt (`.mg-da`): Muno kommt
   hoch, dann geht die Blase auf — nur ohne Wunsch nach weniger Bewegung. */
.muno-gruss {
  display: flex; align-items: flex-end; gap: .7rem;
  margin-top: 1.3rem; max-width: 34rem;
}
.muno-gruss span.muno.muno-foto { width: 104px; flex: 0 0 auto; }
.mg-blase {
  position: relative; flex: 1 1 auto; margin: 0 0 1.2rem;
  padding: .75rem 2.3rem .75rem 1rem;
  border: 1px solid var(--linie); border-radius: var(--rund-l);
  background: var(--karte); box-shadow: var(--lift);
  font-family: var(--schrift-titel); font-size: 1.02rem; line-height: 1.45;
  color: var(--ink);
}
.mg-blase::before {
  content: ""; position: absolute; left: -7px; bottom: 1rem;
  width: 13px; height: 13px; transform: rotate(45deg);
  border: 1px solid var(--linie); border-top: 0; border-right: 0;
  border-bottom-left-radius: 3px; background: var(--karte);
}
.mg-blase .mu-zu { top: .25rem; right: .3rem; }
@media (min-width: 980px) {
  .marke-kopf > .zurueck,
  .marke-kopf > .muno-gruss { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .marke-kopf > .muno-gruss {
    flex-direction: column-reverse; align-items: center; gap: .2rem;
    margin-top: 0; max-width: none;
  }
  .muno-gruss span.muno.muno-foto { width: 300px; }
  .marke-kopf > .muno-gruss .mg-blase {
    margin: 0; align-self: stretch; font-size: 1.15rem; padding: 1rem 2.6rem 1rem 1.25rem;
  }
  .marke-kopf > .muno-gruss .mg-blase::before {
    left: 50%; bottom: -7px; margin-left: -6.5px; transform: rotate(-45deg);
  }
  /* Steht rechts nichts (Muno ausgeblendet, kein Lernstand), nimmt der Text
     die ganze Breite, statt neben einer leeren Spalte zu stehen. */
  .marke-kopf:not(:has(> .zurueck:not([hidden]), > .muno-gruss:not([hidden]))) {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .muno-gruss span.muno.muno-foto {
    opacity: 0; transform: translateY(18px) scale(.96);
    transition: opacity .5s ease-out, transform .65s cubic-bezier(.2, .8, .2, 1.15);
  }
  .muno-gruss .mg-blase {
    opacity: 0; transform: translateY(8px) scale(.94); transform-origin: 20% 100%;
    transition: opacity .35s ease-out .5s, transform .5s cubic-bezier(.2, .8, .2, 1.2) .5s;
  }
  .muno-gruss.mg-da span.muno.muno-foto,
  .muno-gruss.mg-da .mg-blase { opacity: 1; transform: none; }
}

/* Die Sprachwahl steht jetzt direkt unter der Buehne (Entwurf 1); die
   Probierkarte folgt ihr als zweites Angebot und braucht deshalb Luft
   nach oben. */
.huelle > .probe { margin-top: 2.4rem; max-width: 46rem; }
.marke-kopf > .zurueck { margin-top: 1.2rem; max-width: 34rem; }
@media (min-width: 980px) { .marke-kopf > .zurueck { margin-top: 0; max-width: none; } }
.marke-wahl > h2 { margin-top: 1.6rem; }
@media (max-width: 640px) {
  .marke-kopf.buehne-innen { padding-bottom: 1.6rem; }
  .muno-gruss { margin-top: .9rem; }
  .muno-gruss span.muno.muno-foto { width: 108px; }
  .mg-blase { font-size: .95rem; padding: .6rem 2.2rem .6rem .8rem; margin-bottom: .8rem; }
  .marke-wahl > h2 { margin-top: 1.1rem; }
}

/* Kurze Bewegungen an Meilensteinen (Kern.munoAnim): Solange die Figur
   `muno-bewegt` traegt, steht statt des Standbilds ein animiertes WebP da,
   das genau einmal ablaeuft und auf dem Standbild derselben Pose endet.
   Nur ohne Wunsch nach weniger Bewegung — sonst greift keine dieser Regeln
   und das Standbild bleibt (WCAG 2.3.3). Keine Toene, kein Blinken. */
@media (prefers-reduced-motion: no-preference) {
  html[data-muno="basis"] .muno-foto.muno-bewegt[data-anim="gruss"] { background-image: url("../muno/muno-basis-anim-gruss.webp?v=05439409"); }
  html[data-muno="de"] .muno-foto.muno-bewegt[data-anim="jubel"] { background-image: url("../muno/muno-de-anim-jubel.webp?v=0da35e06"); }
  html[data-muno="de"] .muno-foto.muno-bewegt[data-anim="klatscht"] { background-image: url("../muno/muno-de-anim-klatscht.webp?v=9b9af352"); }
  html[data-muno="de"] .muno-foto.muno-bewegt[data-anim="pokal"] { background-image: url("../muno/muno-de-anim-pokal.webp?v=5667050e"); }
  html[data-muno="en"] .muno-foto.muno-bewegt[data-anim="jubel"] { background-image: url("../muno/muno-en-anim-jubel.webp?v=002eba15"); }
  html[data-muno="en"] .muno-foto.muno-bewegt[data-anim="klatscht"] { background-image: url("../muno/muno-en-anim-klatscht.webp?v=a0b41b38"); }
  html[data-muno="en"] .muno-foto.muno-bewegt[data-anim="pokal"] { background-image: url("../muno/muno-en-anim-pokal.webp?v=38e09f32"); }
  html[data-muno="es"] .muno-foto.muno-bewegt[data-anim="jubel"] { background-image: url("../muno/muno-es-anim-jubel.webp?v=323a6079"); }
  html[data-muno="es"] .muno-foto.muno-bewegt[data-anim="klatscht"] { background-image: url("../muno/muno-es-anim-klatscht.webp?v=531e4882"); }
  html[data-muno="es"] .muno-foto.muno-bewegt[data-anim="pokal"] { background-image: url("../muno/muno-es-anim-pokal.webp?v=380506fe"); }
  html[data-muno="fr"] .muno-foto.muno-bewegt[data-anim="jubel"] { background-image: url("../muno/muno-fr-anim-jubel.webp?v=b2e1ffb3"); }
  html[data-muno="fr"] .muno-foto.muno-bewegt[data-anim="klatscht"] { background-image: url("../muno/muno-fr-anim-klatscht.webp?v=fd49e2a7"); }
  html[data-muno="fr"] .muno-foto.muno-bewegt[data-anim="pokal"] { background-image: url("../muno/muno-fr-anim-pokal.webp?v=6a2a44a5"); }
  html[data-muno="it"] .muno-foto.muno-bewegt[data-anim="jubel"] { background-image: url("../muno/muno-it-anim-jubel.webp?v=b092de8f"); }
  html[data-muno="it"] .muno-foto.muno-bewegt[data-anim="klatscht"] { background-image: url("../muno/muno-it-anim-klatscht.webp?v=4cf1d39f"); }
  html[data-muno="it"] .muno-foto.muno-bewegt[data-anim="pokal"] { background-image: url("../muno/muno-it-anim-pokal.webp?v=3bdcfc28"); }
  html[data-muno="pt"] .muno-foto.muno-bewegt[data-anim="jubel"] { background-image: url("../muno/muno-pt-anim-jubel.webp?v=36eb50e7"); }
  html[data-muno="pt"] .muno-foto.muno-bewegt[data-anim="klatscht"] { background-image: url("../muno/muno-pt-anim-klatscht.webp?v=fb4d2969"); }
  html[data-muno="pt"] .muno-foto.muno-bewegt[data-anim="pokal"] { background-image: url("../muno/muno-pt-anim-pokal.webp?v=7e6202c1"); }
  html[data-muno="zh"] .muno-foto.muno-bewegt[data-anim="jubel"] { background-image: url("../muno/muno-zh-anim-jubel.webp?v=f4f5baa3"); }
  html[data-muno="zh"] .muno-foto.muno-bewegt[data-anim="klatscht"] { background-image: url("../muno/muno-zh-anim-klatscht.webp?v=6a34549c"); }
  html[data-muno="zh"] .muno-foto.muno-bewegt[data-anim="pokal"] { background-image: url("../muno/muno-zh-anim-pokal.webp?v=9384b528"); }
  html[data-muno="ja"] .muno-foto.muno-bewegt[data-anim="jubel"] { background-image: url("../muno/muno-ja-anim-jubel.webp?v=08ac3f57"); }
  html[data-muno="ja"] .muno-foto.muno-bewegt[data-anim="klatscht"] { background-image: url("../muno/muno-ja-anim-klatscht.webp?v=a42596a3"); }
  html[data-muno="ja"] .muno-foto.muno-bewegt[data-anim="pokal"] { background-image: url("../muno/muno-ja-anim-pokal.webp?v=0ede3e6e"); }
  html[data-muno="ko"] .muno-foto.muno-bewegt[data-anim="jubel"] { background-image: url("../muno/muno-ko-anim-jubel.webp?v=544de54a"); }
  html[data-muno="ko"] .muno-foto.muno-bewegt[data-anim="klatscht"] { background-image: url("../muno/muno-ko-anim-klatscht.webp?v=be1b8052"); }
  html[data-muno="ko"] .muno-foto.muno-bewegt[data-anim="pokal"] { background-image: url("../muno/muno-ko-anim-pokal.webp?v=84a90566"); }
}


/* ==========================================================================
   Japanisch
   ==========================================================================
   Furigana stehen als <ruby> ueber den Kanji. Klein, aber nicht so klein,
   dass ein Kana unlesbar wird: Die Lesung ist auf diesen Seiten keine
   Fussnote, sondern fuer Anfaenger das, was sie lesen.

   Die Schrift: Plex und Literata haben keine japanischen Zeichen. Was der
   Rechner an japanischer Schrift hat, wird in einer festen Reihenfolge
   gesucht — es wird keine Schrift von einem fremden Rechner geladen. */
:lang(ja) {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
               "Noto Sans CJK JP", "Yu Gothic", "YuGothic", "Meiryo",
               var(--schrift), sans-serif;
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
  -webkit-hyphens: none; hyphens: none;
}
ruby { ruby-position: over; ruby-align: center; }
rt {
  font-size: .55em;
  line-height: 1;
  font-weight: 400;
  color: var(--ink-2, inherit);
  letter-spacing: 0;
  -webkit-user-select: none; user-select: none;
}
/* Wer die Lesehilfe abschaltet, sieht die Kanji allein — und die
   Klammern, die ein Browser ohne Ruby-Unterstuetzung zeigen wuerde,
   bleiben ebenso verborgen. */
.ohne-furigana rt, .ohne-furigana rp { display: none; }
.furigana-schalter[aria-pressed="false"] { opacity: .6; }

/* Chinesisch: Pinyin unter jedem Wort. Dieselbe Klammer wie die Furigana
   (`{银行|yínháng}`), dieselbe Ruby — nur steht die Lautschrift unten, dort,
   wo beim Japanischen die Umschrift steht, und sie ist etwas groesser:
   Ein Tonzeichen auf einem Buchstaben von 0,55em ist auf dem Telefon nicht
   mehr zu unterscheiden, und der Ton ist die halbe Information. */
:lang(zh) {
  font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC",
               "Noto Sans CJK SC", "Microsoft YaHei", "Source Han Sans SC",
               var(--schrift), sans-serif;
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
  -webkit-hyphens: none; hyphens: none;
}
[data-zielsprache="zh"] ruby {
  -webkit-ruby-position: after;
  ruby-position: under;
}
[data-zielsprache="zh"] rt {
  font-size: .62em;
  font-family: var(--schrift), sans-serif;
  letter-spacing: .01em;
  padding-top: .1em;
}

/* Koreanisch: Hangul aus der Schrift, die der Rechner hat — keine wird
   geladen. Korean bricht zwischen Woertern, nicht mitten in einem Wort:
   `word-break: keep-all` haelt 학생이에요 zusammen, wie ein englisches
   Wort zusammenbleibt. Die Umschrift darunter ist dieselbe Spalte wie
   die Romaji (.ja-w), gesetzt von assets/js/romanisierung.js. */
:lang(ko) {
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR",
               "Malgun Gothic", "Source Han Sans KR", "Nanum Gothic",
               var(--schrift), sans-serif;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-hyphens: none; hyphens: none;
}

/* Romaji: die Umschrift unter jedem Satzglied (assets/js/romaji.js).
   Ein Satzglied ist eine kleine Spalte — oben das Japanische mit seinen
   Furigana, darunter die Umschrift. `inline-flex` nimmt die Grundlinie des
   ersten Stuecks, also des Japanischen: Das Satzglied steht auf derselben
   Zeile wie der Text um es herum. Die Umschrift ist ein ::after aus
   `data-ro` und damit in keinem textContent — Antwortpruefung, Vorlesen und
   Kopieren sehen nur das Japanische; `/ ""` haelt sie auch vom
   Vorleseprogramm fern, das sonst jedes Wort zweimal laese. */
.ja-w {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-inline: .14em;
}
.ja-w:first-child { margin-inline-start: 0; }
.ja-w:last-child { margin-inline-end: 0; }
.ja-k { white-space: nowrap; }
.ja-w::after {
  content: attr(data-ro);
  content: attr(data-ro) / "";
  font-family: var(--schrift), sans-serif;
  font-size: .62em;
  line-height: 1.15;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: var(--ink-2, inherit);
  white-space: nowrap;
  -webkit-user-select: none; user-select: none;
}
.ja-w:not([data-ro])::after { content: ""; }
.ohne-romaji .ja-w { display: inline; margin: 0; }
.ohne-romaji .ja-w::after { content: none; }
.romaji-schalter[aria-pressed="false"] { opacity: .6; }


/* ==========================================================================
   Hindi
   ==========================================================================
   Plex und Literata haben keine Devanagari-Zeichen. Wie beim Japanischen
   wird keine Schrift von einem fremden Rechner geladen; die Liste nennt,
   was die Geraete der Leser mitbringen — Android und ChromeOS „Noto Sans
   Devanagari", Windows „Nirmala UI" und das aeltere „Mangal", Apple
   „Kohinoor Devanagari". Plex und Literata stehen trotzdem vorn: Der
   Browser waehlt je Zeichen, und die lateinischen Buchstaben einer
   Hindi-Seite — die englischen Beispielsaetze, A1, die Zahlen — sollen
   dieselben bleiben wie auf jeder anderen Seite.

   Gesetzt werden die beiden Variablen, nicht `font-family`: Jede Regel,
   die eine Ueberschrift oder einen Namen in die Titelschrift setzt, liest
   `--schrift-titel` und bekommt so die Devanagari-Fassung mit, auch dort,
   wo ein einzelnes Wort mit `lang="hi"` auf einer anderen Seite steht
   (die Sprachwahl auf der Startseite). */
[lang="hi"] {
  --schrift: "Plex Sans", "Noto Sans Devanagari", "Nirmala UI",
             "Kohinoor Devanagari", "Mangal", system-ui, -apple-system,
             "Segoe UI", Roboto, sans-serif;
  --schrift-titel: "Literata", "Noto Serif Devanagari",
                   "Noto Sans Devanagari", "Nirmala UI",
                   "Kohinoor Devanagari", "Mangal", Georgia,
                   "Times New Roman", serif;
}

/* Drei Dinge, die Devanagari nicht vertraegt oder nicht braucht.

   **Sperrung zerreisst die Schrift.** Devanagari setzt aus Konsonant,
   Vokalzeichen und Halbkonsonant eine einzige Glyphe zusammen (क्ष, त्र,
   कि); ein Browser, der zwischen die Buchstaben Abstand legt, schaltet
   genau diese Verbindungen ab, und aus einem Wort werden Einzelteile mit
   gebrochener Kopflinie. Vierzig Regeln dieser Datei sperren kleine
   Beschriftungen — sie bekommen auf Hindi keinen Abstand, und zwar mit
   `!important`, weil jede davon eine andere Spezifitaet hat und eine
   vergessene genau die Stelle waere, an der die Schrift bricht. Ein
   englischer Satz darin traegt `lang="en"` und behaelt seine Sperrung.

   **Silbentrennung gibt es fuer Hindi in keinem Browser**, und Devanagari
   bricht ohnehin an Leerzeichen; `hyphens: auto` vom `body` bleibt
   wirkungslos und steht hier ausdruecklich auf `manual`. `uppercase`
   bewirkt bei Devanagari nichts und schadet nicht — es bleibt.

   **Die Kopflinie und die Vokalzeichen darueber brauchen Luft.** Bei der
   Zeilenhoehe 1,2 der Ueberschriften stossen die Zeichen ueber der Linie
   (ि, ी, ें) an die Unterlaengen der Zeile davor. */
:lang(hi) {
  letter-spacing: 0 !important;
  -webkit-hyphens: manual; hyphens: manual;
}
:lang(hi) :is(h1, h2, h3, h4) { line-height: 1.4; }

/* Chinesisch als Oberflaeche (zh-en): dieselbe Ueberlegung wie bei Hindi.
   Plex und Literata haben keine chinesischen Zeichen; geladen wird keine
   fremde Schrift, genannt wird, was die Geraete mitbringen. Lateinische
   Buchstaben (die englischen Saetze, A1, Zahlen) bleiben Plex und Literata,
   weil der Browser je Zeichen waehlt. Ueberschriften in einer Antiqua mit
   Serifen wie im Rest der Seite (Songti), sonst die Schrift des Systems.
   Sperrung trennt chinesische Zeichen nicht, wirkt aber wie Fehlsatz;
   sie entfaellt wie bei Hindi. */
[lang="zh-CN"] {
  --schrift: "Plex Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC",
             "Noto Sans CJK SC", "Microsoft YaHei", "Source Han Sans SC",
             system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-titel: "Literata", "Noto Serif SC", "Source Han Serif SC",
                   "Songti SC", "STSong", "SimSun", "PingFang SC",
                   "Noto Sans SC", Georgia, serif;
}
html[lang="zh-CN"] :is(h1, h2, h3, h4, .marke-schild, .modusgruppe-titel,
                       .wz-schild, .fuss h4) {
  letter-spacing: 0;
}
html[lang="zh-CN"] { -webkit-hyphens: manual; hyphens: manual; }

/* Japanisch und Koreanisch als Oberflaeche (ja-en, ko-en): dieselbe Regel.
   Die Schriften, die die Geraete mitbringen; lateinische Zeichen bleiben
   Plex und Literata. Japanische Ueberschriften in einer Mincho, koreanische
   in einer Myeongjo — das Gegenstueck zur Antiqua des Rests der Seite. */
[lang="ja"] {
  --schrift: "Plex Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
             "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", "Meiryo",
             system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-titel: "Literata", "Hiragino Mincho ProN", "Noto Serif JP",
                   "Yu Mincho", "Noto Sans JP", Georgia, serif;
}
[lang="ko"] {
  --schrift: "Plex Sans", "Apple SD Gothic Neo", "Noto Sans KR",
             "Noto Sans CJK KR", "Malgun Gothic", system-ui, -apple-system,
             "Segoe UI", Roboto, sans-serif;
  --schrift-titel: "Literata", "Noto Serif KR", "AppleMyungjo",
                   "Nanum Myeongjo", "Noto Sans KR", Georgia, serif;
}
html:is([lang="ja"], [lang="ko"]) :is(h1, h2, h3, h4, .marke-schild,
                                      .modusgruppe-titel, .wz-schild, .fuss h4) {
  letter-spacing: 0;
}
html:is([lang="ja"], [lang="ko"]) { -webkit-hyphens: manual; hyphens: manual; }
/* Koreanisch bricht zwischen Woertern (Leerzeichen), nicht zwischen
   Silben — sonst zerfaellt ein Wort am Zeilenende. */
html[lang="ko"] { word-break: keep-all; overflow-wrap: anywhere; }

/* --- Startseite: Probierkarte, „Heute für dich", Gruss an Wiederkehrer ----
   Die Startseite zeigt, wie hier gelernt wird, statt es zu beschreiben: drei
   Fragen aus den Uebungen der gewaehlten Sprache (`startseite.js`). Auf
   breiten Schirmen steht die Karte neben der Ueberschrift, damit Frage und
   Versprechen im ersten Bild zusammen stehen. */
.probe { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 980px) {
  .marke-kopf {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
    gap: 3rem; align-items: center;
  }
  .marke-kopf .probe { margin-top: 0; }
}
.probe-karte {
  background: var(--karte); border-radius: var(--rund-l);
  box-shadow: var(--schatten-3); border-top: 5px solid var(--marke);
  padding: 1.25rem 1.35rem 1.35rem; display: grid; gap: .9rem;
}
.probe-titel { margin: 0; font-weight: 700; font-size: 1.05rem; }
.probe-sprachen { display: flex; flex-wrap: wrap; gap: .4rem; }
.probe-sprache {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .75rem .3rem .45rem; border-radius: var(--rund-voll);
  background: var(--karte); box-shadow: inset 0 0 0 1.5px var(--linie);
  color: var(--ink); font-weight: 600; font-size: .9rem; text-decoration: none;
}
.probe-sprache:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--linie-kraeftig); }
.probe-sprache.an {
  box-shadow: inset 0 0 0 2px var(--marke);
  background: color-mix(in srgb, var(--marke) 9%, var(--karte));
}
.probe-koerper { display: grid; gap: .7rem; min-height: 14rem; align-content: start; }
.probe-koerper > p { margin: 0; }
.probe-zaehler { font-size: .85rem; color: var(--ink-3); font-weight: 600; }
.probe-frage {
  font-family: var(--schrift-titel); font-size: 1.3rem; font-weight: 600;
  line-height: 1.4;
}
.probe-wahl { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.probe-option {
  width: 100%; text-align: left; padding: .75rem .95rem;
  border-radius: var(--rund); background: var(--karte); border: 0;
  box-shadow: inset 0 0 0 2px var(--linie); font: inherit; font-weight: 600;
  color: var(--ink); cursor: pointer; line-height: 1.5;
}
.probe-option:hover:not([disabled]) { box-shadow: inset 0 0 0 2px var(--marke); }
.probe-option:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }
.probe-option[disabled] { cursor: default; color: var(--ink); opacity: 1; }
.probe-option[data-stand="richtig"] { box-shadow: inset 0 0 0 2px var(--ok); background: var(--ok-weich); }
.probe-option[data-stand="falsch"] { box-shadow: inset 0 0 0 2px var(--fehler); background: var(--fehler-weich); }
.probe-aufloesung {
  border-radius: var(--rund); padding: .8rem .95rem; display: grid; gap: .35rem;
  background: color-mix(in srgb, var(--marke) 8%, var(--karte));
}
.probe-aufloesung p { margin: 0; }
.probe-urteil { font-weight: 700; }
.probe-aufloesung[data-stand="richtig"] .probe-urteil { color: var(--ok-ink); }
.probe-aufloesung[data-stand="falsch"] .probe-urteil { color: var(--fehler-ink); }
.probe-loesung { font-weight: 700; }
.probe-merksatz { color: var(--ink-2); font-size: .95rem; }
.probe-thema { font-weight: 600; font-size: .92rem; }
.probe-fuss, .probe-wege { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.probe-ergebnis { font-family: var(--schrift-titel); font-size: 1.2rem; font-weight: 600; }
.probe-nochmal {
  background: none; border: 0; padding: .5rem; color: var(--marke-ink);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline;
}

.zurueck {
  background: var(--karte); border-radius: var(--rund-l);
  box-shadow: var(--schatten-2); padding: 1rem 1.2rem; display: grid; gap: .8rem;
}
.vertiefung.ausfuehrlich { margin-top: .6rem; }
.zr-kopf { display: flex; gap: 1rem; align-items: center; }
.zr-ring { width: 58px; height: 58px; flex: none; }
.zr-ring-grund { fill: none; stroke: var(--linie); stroke-width: 7; }
.zr-ring-wert { fill: none; stroke: var(--ok); stroke-width: 7; stroke-linecap: round; }
.zr-text p { margin: 0; }
.zr-titel { font-weight: 700; font-size: 1.05rem; }
.zr-ziel { color: var(--ink-3); font-size: .92rem; }
.zr-serie {
  display: inline-block; margin-top: .3rem; font-size: .8rem; font-weight: 700;
  color: var(--akzent-ink); background: var(--akzent-weich);
  border-radius: var(--rund-voll); padding: .1rem .6rem;
}
.zr-wege { display: grid; gap: .5rem; }
.zr-weg {
  display: block; padding: .7rem .9rem; border-radius: var(--rund);
  box-shadow: inset 0 0 0 1.5px var(--linie); font-weight: 600;
  text-decoration: none; color: var(--ink);
}
.zr-weg::after { content: ' →'; color: var(--marke-ink); }
.zr-weg.zr-haupt { box-shadow: inset 0 0 0 2px var(--marke); }

.heute { margin-top: 2.6rem; }
.heute-raster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem; margin-top: 1rem;
}
.heute-karte {
  --f: var(--marke); background: var(--karte); border-radius: var(--rund-l);
  box-shadow: var(--schatten-1); border-top: 4px solid var(--f);
  padding: 1rem 1.15rem; display: grid; gap: .4rem; align-content: start;
}
.heute-karte[data-art="wort"] { --f: #0f766e; }
.heute-karte[data-art="falle"] { --f: #be185d; }
.heute-karte[data-art="thema"] { --f: #1d5fd6; }
.heute-karte p { margin: 0; }
.heute-eti {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: color-mix(in srgb, var(--f) 55%, var(--ink));
}
:lang(hi) .heute-eti { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.heute-wort {
  font-family: var(--schrift-titel); font-size: 1.45rem; font-weight: 700;
  line-height: 1.25;
}
.heute-thema { font-size: 1.22rem; }
.heute-ue { color: var(--ink-3); font-size: .92rem; }
.heute-karte .heute-satz { margin-top: .35rem; font-weight: 500; }
.heute-fr { border-radius: var(--rund-s); padding: .4rem .6rem; font-weight: 600; font-size: .95rem; }
.heute-fr[data-art="falsch"] { background: var(--fehler-weich); }
.heute-fr[data-art="richtig"] { background: var(--ok-weich); }
.heute-link { margin-top: .35rem; font-weight: 600; font-size: .92rem; }
@media (max-width: 640px) {
  /* Auf dem Telefon soll die Probierkarte im ersten Bild anfangen: Der
     Satz unter der Ueberschrift bleibt ganz im HTML, zeigt aber nur zwei
     Zeilen. */
  .marke-kopf .hero-sub {
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
  }
  .probe { margin-top: 1.2rem; }
  .probe-karte { padding: 1.05rem 1rem 1.15rem; }
  .probe-frage { font-size: 1.18rem; }
}

/* --- Startseite, Oktober 2026: erste Antwort ueber der Falz (M1), eine
   Sprachwahl (M5), Wiederkehr (M4), Zielwahl (M3) ---------------------------
   Die Wortsuche steht im HTML nach der Probierkarte (`.marke-suche`). Am
   breiten Schirm kommt sie unter den Text in der linken Spalte, die Karte
   steht rechts ueber beide Zeilen. Auf dem Telefon steht sie unter der
   Karte, und ueber der ersten Frage stehen nur Ueberschrift, Kurzfassung und
   die Zeile mit den Tatsachen. */
.hero-sub-kurz { display: none; }
.marke-suche .wb-start { margin-top: 1.4rem; }
@media (min-width: 980px) {
  .marke-kopf { grid-template-rows: auto auto; align-items: start; }
  .marke-kopf > .hero { grid-column: 1; grid-row: 1; align-self: end; }
  .marke-kopf > .probe { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .marke-kopf > .marke-suche { grid-column: 1; grid-row: 2; }
  .marke-suche .wb-start { margin-top: 0; }
}
@media (max-width: 640px) {
  .marke-kopf .claim { display: none; }
  .marke-kopf .hero h1 { margin-bottom: .45rem; }
  .marke-kopf .hero-sub {
    display: block; -webkit-line-clamp: unset; line-clamp: unset;
    overflow: visible; font-size: 1.02rem; margin-bottom: .5rem;
  }
  .marke-kopf .hero-sub-lang { display: none; }
  .marke-kopf .hero-sub-kurz { display: inline; }
  .marke-kopf .claim-beleg { margin-bottom: 0; font-size: .88rem; line-height: 1.5; }
  .marke-kopf .probe { margin-top: .9rem; }
  .probe-karte { gap: .65rem; }
  .probe-koerper { gap: .55rem; min-height: 0; }
  .probe-zaehler { display: none; }
  .probe-option { padding: .62rem .85rem; }
}

/* Die Sprache der Fragen: eine Zeile, die aufklappt — keine dritte
   Sprachwahl neben Kugelwaehler und Karten. */
.probe-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; }
.probe-sprachwahl { font-size: .88rem; color: var(--ink-2); }
.probe-sprachwahl > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center;
  gap: .3rem; padding: .15rem .1rem; border-radius: var(--rund-s);
}
.probe-sprachwahl > summary::-webkit-details-marker { display: none; }
.probe-sprachwahl > summary::after { content: '▾'; color: var(--marke-ink); }
.probe-sprachwahl[open] > summary::after { content: '▴'; }
.probe-sprachwahl > summary:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }
.probe-sprachwahl .probe-sprachen { list-style: none; margin: .5rem 0 .2rem; padding: 0; }
.probe-sprachwahl .probe-sprache { font-size: .85rem; }

/* Wer schon lernt: die Karte ist zu, ein Knopf oeffnet sie. */
.probe-auf {
  justify-self: start; background: none; border: 0; padding: .35rem .1rem;
  font: inherit; font-weight: 600; color: var(--marke-ink); cursor: pointer;
  text-decoration: underline; text-underline-offset: .18em;
}
.probe-karte[hidden] { display: none; }
.zr-satz { margin: 0; color: var(--ink-2); font-size: .92rem; }
.zr-leer { margin: 0; color: var(--ink-2); font-size: .92rem; }
.zr-neben { margin: 0; font-size: .9rem; font-weight: 600; }

/* Das Ergebnis der Probe: was zaehlt, Muno, der naechste Schritt, das Ziel. */
.probe-stand { display: flex; gap: .85rem; align-items: center; }
.probe-stand .zr-ring { width: 52px; height: 52px; }
.probe-stand p { margin: 0; }
.probe-zaehlt { color: var(--ink-2); font-size: .95rem; }
.probe-trost { color: var(--ink-2); font-size: .92rem; }
.probe-muno { display: flex; gap: .7rem; align-items: center; }
.probe-muno p { margin: 0; font-weight: 600; color: var(--ink-2); }
.probe-muno span.muno.muno-foto { width: 64px; flex: none; }
.probe-mehr { margin: 0; }
.probe-ziel {
  display: grid; gap: .55rem; margin-top: .3rem; padding-top: .9rem;
  border-top: 1px solid var(--linie);
}
.probe-ziel p { margin: 0; }
.probe-ziel-titel { font-weight: 700; }
.probe-ziel-wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.probe-ziel-knopf {
  display: grid; gap: .1rem; padding: .55rem .5rem; border-radius: var(--rund);
  background: var(--karte); color: var(--ink); border: 0; font: inherit;
  box-shadow: inset 0 0 0 1.5px var(--linie); cursor: pointer; text-align: center;
}
.probe-ziel-knopf b { font-weight: 700; font-size: .95rem; }
.probe-ziel-knopf span { font-size: .8rem; color: var(--ink-2); }
.probe-ziel-knopf:hover { box-shadow: inset 0 0 0 2px var(--marke); }
.probe-ziel-knopf:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }
.probe-ziel-knopf[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--marke);
  background: color-mix(in srgb, var(--marke) 9%, var(--karte));
}
.probe-ziel-still { font-size: .85rem; color: var(--ink-2); }
.probe-ziel-stand { font-weight: 600; font-size: .92rem; }
.probe-ziel-stand:empty { display: none; }
.probe-wann { display: grid; gap: .5rem; }
.probe-wann[hidden] { display: none; }

/* Die Zahlen der gewaehlten Sprache im Kugelwaehler (paarwahl.js). */
.sb-zahlen { margin: .4rem 0 0; color: var(--ink-2); font-size: .92rem; text-align: center; }
.sb-zahlen[hidden] { display: none; }

/* „So bleibt es haengen" und „Kurz erklaert" sind ein Abschnitt. */
.marke-wie { margin-top: 2.8rem; }
.marke-fragen-titel { margin: 1.8rem 0 .6rem; font-size: 1.12rem; }
.marke-fragen { display: grid; gap: .5rem; max-width: 46rem; }
.marke-frage > p { max-width: 42rem; }
.marke-frage {
  background: var(--karte); border-radius: var(--rund); box-shadow: var(--schatten-1);
  padding: .1rem 1rem;
}
.marke-frage > summary {
  cursor: pointer; font-weight: 700; padding: .75rem 0; list-style-position: inside;
}
.marke-frage > summary:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }
.marke-frage > p { margin: 0 0 .9rem; color: var(--ink-2); }

/* Auf dem Telefon stehen die drei Ideen kompakt: Zeichen neben dem Titel,
   der Text darunter — dieselben Worte, ein Drittel weniger Hoehe. */
@media (max-width: 640px) {
  .marke-schritte .marke-idee {
    display: grid; grid-template-columns: auto 1fr; gap: .35rem .7rem;
    align-items: center; padding: .95rem 1rem;
  }
  .marke-schritte .marke-idee h3 { font-size: 1.06rem; }
  .marke-schritte .marke-idee p { grid-column: 1 / -1; font-size: .95rem; }
  .marke-wie { margin-top: 2.2rem; }
}

/* Barrierefreiheit (abgestimmt, Oktober 2026): sichtbarer Fokus in Zeilen
   mit Feldern, ausreichend grosse Kaestchen, keine leeren Ueberschriften. */
.sts-zeile:focus-within, .ss-kopf:focus-within { outline: 2px solid var(--marke); outline-offset: 2px; }
.ss-kopf:focus-within { outline-offset: -2px; }
.fs-tag input[type="checkbox"], .fs-tag input[type="radio"] { width: 1.5rem; height: 1.5rem; margin: 0; flex: none; }
h2:empty, h3:empty { display: none; }

/* Woerter mit Umschrift (`.ja-w`, Japanisch und Koreanisch) sind kleine
   Kaestchen. In einem Flex-Verweis wird jedes davon ein eigenes Glied, und
   ohne Umbruch lief ein langer Titel auf dem Telefon seitlich aus dem Bild
   — in Knoepfen, in den Familienkarten der Grammatikuebersicht. */
.knopf, .knopf-still, .gfam-themen a, .gfam-bereich-kopf a {
  flex-wrap: wrap; max-width: 100%;
}
.gfam-bereiche { grid-template-columns: minmax(0, 1fr); }
.gfam-bereich, .gfam-bereich-kopf, .gfam-themen { min-width: 0; }

/* --- Die Regeln im Einzelnen: eine Karte je Regel --------------------------
   Gelesen wird am Bildschirm zuerst der Anfang jeder Zeile, und was als
   eigene, nummerierte Einheit dasteht, wird eher zu Ende gelesen. Deshalb:
   die Regel als kraeftige erste Zeile, das Beispiel darunter in einem
   eigenen Kasten, Satz und Lautsprecher in einer Zeile, die Uebersetzung
   direkt darunter. Die Karte hat einen festen Grund — Text direkt auf dem
   Hintergrundbild war schwerer zu lesen. */
.regelliste { counter-reset: regel; gap: .85rem; }
.thema-seite .regel {
  counter-increment: regel; position: relative;
  border: 1px solid var(--linie); border-left: 0;
  background: var(--karte); border-radius: var(--rund);
  box-shadow: var(--schatten-1);
  padding: 1rem 1.1rem 1rem 3.4rem;
}
.thema-seite .regel::before {
  content: counter(regel); position: absolute; left: 1rem; top: .95rem;
  width: 1.65rem; height: 1.65rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--kat, var(--marke)); color: var(--kat-auf, #fff);
  font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums;
}
.thema-seite .regel-text {
  margin: 0 0 .7rem; font-weight: 600; font-size: 1.04rem; line-height: 1.45;
  color: var(--ink);
}
.regel-beispiel {
  border-radius: var(--rund-s); padding: .7rem .85rem;
  background: color-mix(in srgb, var(--kat, var(--marke)) 6%, var(--karte));
  border-left: 3px solid color-mix(in srgb, var(--kat, var(--marke)) 55%, var(--karte));
}
.regel-beispiel .satzpaar { margin: 0; }

/* Satz und Lautsprecher in einer Zeile, die Uebersetzung darunter. Vorher
   stand der Lautsprecher allein in einer eigenen Zeile zwischen Satz und
   Uebersetzung und riss beide auseinander. */
.satzpaar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: .5rem; align-items: start;
}
.satzpaar > .ziel { grid-column: 1; }
.satzpaar > .vorlesen { grid-column: 2; grid-row: 1; margin: 0; }
.satzpaar > .de { grid-column: 1; margin-top: .15rem; }
.satzpaar > :not(.ziel):not(.vorlesen):not(.de) { grid-column: 1 / -1; }
:root[data-vorlesbar="ja"] .satzpaar > .vorlesen {
  width: 2.25rem; height: 2.25rem; margin-top: -.3rem;
  border-color: var(--linie); background: var(--karte); color: var(--marke-ink);
}
@media (pointer: coarse) {
  :root[data-vorlesbar="ja"] .satzpaar > .vorlesen { width: 2.6rem; height: 2.6rem; }
}
.satzpaar .vorlesen svg { width: 17px; height: 17px; }

/* Beispielsaetze: eine feine Linie zwischen zwei Saetzen, damit jeder als
   eigene Einheit gelesen wird. */
.thema-seite .karte > .satzpaar + .satzpaar,
.thema-seite .mb-inhalt > .satzpaar + .satzpaar {
  border-top: 1px solid var(--linie); padding-top: .85rem;
}

/* Die Legende ist ein Schluessel und keine Verweisleiste: dieselbe
   Auszeichnung wie im Satz, kleiner, ohne Unterstreichung. */
.bf-legende { gap: .4rem .9rem; font-size: .88rem; align-items: center; }
.bf-legende .bf-kern, .bf-legende .bf-signal { font-weight: 600; }

@media (max-width: 560px) {
  /* Auf dem Telefon nur die Regel eingerueckt; das Beispiel nutzt die
     ganze Breite der Karte, sonst bricht jeder Satz nach drei Woertern. */
  .thema-seite .regel { padding: .9rem; }
  .thema-seite .regel::before { left: .85rem; top: .9rem; width: 1.5rem; height: 1.5rem; }
  .thema-seite .regel-text { padding-left: 2.2rem; }
  .regel-beispiel { padding: .65rem .75rem; }
}

/* --- Startseite eines Sprachpaares: Einstieg und nächste Schritte ---------
   Nach der Sprachwahl eine einzige Frage: von vorn, oder schon etwas
   können? Zwei große Flächen statt zweier Knöpfe, weil beide Antworten
   gleich ernst gemeint sind; die erste ist gefüllt, weil sie die häufigere
   ist. Wer schon gelernt hat, sieht an derselben Stelle „Weiter mit …“
   (assets/js/paarstart.js). */
.buehne-kompakt .buehne-innen { display: block; padding-top: 2.6rem; padding-bottom: 2.2rem; }
.buehne-kompakt .hero { max-width: 46rem; }
.einstieg {
  display: grid; gap: .8rem; margin-top: .4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.einstieg-karte {
  display: flex; align-items: center; gap: .9rem; min-height: 4.6rem;
  padding: .9rem 1.1rem; border-radius: calc(var(--rund) + 4px);
  text-decoration: none; color: var(--ink);
  background: var(--karte); border: 1px solid var(--linie);
  box-shadow: var(--schatten-2);
  transition: transform .14s, box-shadow .2s;
}
.einstieg-karte:hover { transform: translateY(-2px); box-shadow: var(--schatten-3); color: var(--ink); }
.einstieg-karte b { display: block; font-size: 1.08rem; line-height: 1.25; }
.einstieg-karte b + span { display: block; margin-top: .15rem; font-size: .9rem; color: var(--ink-2); }
.einstieg-zeichen {
  flex: none; display: grid; place-items: center; min-width: 2.7rem; height: 2.7rem;
  padding: 0 .4rem; border-radius: 14px; font-weight: 700; font-size: .95rem;
  color: var(--marke-ink); background: var(--marke-weich);
}
.einstieg-neu { background: var(--marke); border-color: transparent; color: #fff; }
.einstieg-neu:hover { color: #fff; }
.einstieg-neu b + span { color: #fff; }
.einstieg-stufe .einstieg-zeichen { font-size: .85rem; letter-spacing: .02em; }
.einstieg-neu .einstieg-zeichen { background: rgba(255, 255, 255, .2); color: #fff; font-size: 1.2rem; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .einstieg-neu,
  :root:not([data-thema="hell"]) .einstieg-neu:hover { color: #0b1324; }
  :root:not([data-thema="hell"]) .einstieg-neu b + span { color: rgba(11, 19, 36, .82); }
  :root:not([data-thema="hell"]) .einstieg-neu .einstieg-zeichen { background: rgba(11, 19, 36, .14); color: #0b1324; }
}
:root[data-thema="dunkel"] .einstieg-neu,
:root[data-thema="dunkel"] .einstieg-neu:hover { color: #0b1324; }
:root[data-thema="dunkel"] .einstieg-neu b + span { color: rgba(11, 19, 36, .82); }
:root[data-thema="dunkel"] .einstieg-neu .einstieg-zeichen { background: rgba(11, 19, 36, .14); color: #0b1324; }

.einstieg-zurueck {
  display: flex; align-items: center; gap: 1.1rem; grid-template-columns: none;
  padding: 1rem 1.2rem; border-radius: calc(var(--rund) + 4px);
  background: var(--karte); border: 1px solid var(--linie); box-shadow: var(--schatten-2);
}
.ez-ring { flex: none; width: 4.4rem; height: 4.4rem; }
.ez-ring-grund { fill: none; stroke: var(--linie); stroke-width: 7; }
.ez-ring-wert { fill: none; stroke: #15803d; stroke-width: 7; stroke-linecap: round; }
.ez-ring-zahl { font: 700 14px var(--schrift); fill: var(--ink); }
.ez-text { min-width: 0; }
.ez-titel { margin: 0; font-family: var(--schrift-titel); font-size: 1.25rem; font-weight: 600; }
.ez-stand { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin: .25rem 0 .75rem; font-size: .9rem; color: var(--ink-2); }
.ez-text .hero-knoepfe { gap: .55rem; }
@media (max-width: 539px) {
  .einstieg-zurueck { flex-direction: column; align-items: flex-start; }
  .ez-text .knopf { width: 100%; justify-content: center; text-align: center; }
}

/* Der Lernpfad-Einstieg ist jetzt eine Karte mit Inhalt und kein einziger
   großer Link mehr: darin die nächsten fünf Themen. */
.lp-teaser:hover { transform: none; box-shadow: var(--schatten-2); }
@media (min-width: 641px) { .lp-teaser { align-items: flex-start; } }
/* Die Schatten, die Überschrift und Vorspann auf der Bühne lesbar halten,
   machen Schrift auf einer Karte unscharf. */
.einstieg, .einstieg * { text-shadow: none; }
.lp-teaser-bildlink { flex: none; display: block; }
.lp-teaser-text { min-width: 0; flex: 1; }
.lp-teaser-text h2 { margin: 0; font-size: 1.35rem; border: 0; padding: 0; }
.lp-teaser-text p { margin: 0; }
.np-kopf {
  margin: .8rem 0 .1rem !important; font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
}
.np-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; width: 100%; }
.np-liste a {
  display: flex; align-items: center; gap: .7rem; min-height: 2.75rem;
  padding: .3rem .7rem .3rem .35rem; border-radius: 12px; text-decoration: none;
  color: var(--ink); background: rgb(var(--bg-rgb) / .72);
  box-shadow: inset 0 0 0 1px var(--linie);
}
.np-liste a:hover { box-shadow: inset 0 0 0 1.5px var(--kat); }
.np-stein {
  flex: none; display: grid; place-items: center; width: 2.15rem; height: 2.15rem;
  border-radius: 10px; font-size: .82rem; font-weight: 700;
  color: var(--kat-ink);
  background: var(--kat-hell);
  box-shadow: inset 0 0 0 2px var(--kat);
  font-variant-numeric: tabular-nums;
}
.np-name { flex: 1; min-width: 0; font-weight: 600; font-size: .93rem; line-height: 1.25; }
.np-stufe { flex: none; font-size: .78rem; color: var(--ink-3); font-weight: 600; }
.np-liste li:first-child .np-stein,
.np-jetzt .np-stein { background: var(--kat); color: var(--kat-auf); box-shadow: 0 0 0 4px color-mix(in srgb, var(--kat) 30%, transparent); }
.np-gelesen .np-stein { background: color-mix(in srgb, var(--kat) 50%, #fff); color: var(--kat-auf); box-shadow: inset 0 0 0 2.5px var(--kat); }
.np-unsicher .np-stein {
  color: var(--kat-auf);
  background: linear-gradient(180deg, color-mix(in srgb, var(--kat) 22%, #fff) 50%, var(--kat) 50%);
  box-shadow: inset 0 0 0 2.5px var(--kat);
}
.lp-teaser-text > .knopf { margin-top: .8rem; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .np-liste a { background: rgb(15 23 42 / .72); }
}
:root[data-thema="dunkel"] .np-liste a { background: rgb(15 23 42 / .72); }

/* Die Vorführung steht jetzt unter dem Stoff und nicht mehr in der Bühne. */
.vf-platz { margin: 2.6rem 0 0; max-width: 44rem; }
.vf-szene { align-self: center; }

/* Auf dem Telefon die Stufen in zwei Spalten, nur mit Namen. Die Wege sind
   dort eine Liste mit ganzer Beschreibung (siehe „Wegweiser" unten). */
@media (max-width: 599px) {
  .leiter { grid-template-columns: 1fr 1fr; gap: .45rem; margin-top: 1.4rem; }
  .leiter-sprosse { grid-template-columns: auto minmax(0, 1fr); gap: .1rem .6rem; padding: .6rem .7rem; }
  .leiter-name { font-size: 1.15rem; grid-row: span 2; }
  .leiter-kurz, .leiter-sprosse br { display: none; }
  .leiter-titel { font-size: .9rem; }
  .leiter-zahl { font-size: .78rem; }
}

/* Der einmalige Hinweis neben dem Lautsprecher (nur iPhone, nur beim ersten
   Druck): Bei eingeschaltetem Stummschalter bleibt die Sprachausgabe still. */
.vorlesen-hinweis {
  display: inline-block; margin: .3rem 0 0 .4rem; padding: .25rem .6rem;
  border-radius: 999px; font-size: .82rem; line-height: 1.35;
  color: var(--ink); background: var(--marke-weich);
}

/* Der zweite Druck spricht langsam (assets/js/vorlesen.js). Gestrichelt
   statt gefuellt: derselbe Knopf, nur in seiner ruhigeren Fassung. */
:root[data-vorlesbar="ja"] .vorlesen[data-langsam] {
  border-color: var(--marke); border-style: dashed;
}

/* Der Hinweis auf eine natuerlichere Stimme: einmal, unten am Rand, wo er
   nichts verschiebt, und mit einem Knopf zum Schliessen. */
.stimmhinweis {
  position: fixed; left: 50%; z-index: 60;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(30rem, calc(100vw - 2rem));
  display: flex; align-items: flex-start; gap: .4rem;
  padding: .65rem .5rem .65rem .9rem;
  border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--karte); color: var(--ink);
  box-shadow: var(--lift-hi);
  font-size: .88rem; line-height: 1.45;
}
.stimmhinweis p { margin: 0; flex: 1; }
.stimmhinweis-zu {
  flex: none; width: 2rem; height: 2rem; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-3);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.stimmhinweis-zu:hover { background: var(--karte-2); color: var(--ink); }
.stimmhinweis-zu:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }
@media print { .stimmhinweis { display: none !important; } }

/* Die Stimmenwahl auf der Lernstand-Seite. */
.stimmenwahl { display: grid; gap: .35rem; max-width: 28rem; }

/* Munos Blase lässt sich einklappen (assets/js/kern.js, munoSchalter). */
.mu-blase { padding-right: 2.4rem; }
.mu-zu {
  position: absolute; top: .35rem; right: .4rem; width: 2rem; height: 2rem;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-3); font-size: 1.25rem; line-height: 1;
  cursor: pointer;
}
.mu-zu:hover { background: var(--karte-2); color: var(--ink); }
.mu-zu:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }
.mu-tipp.mu-klein { margin: .6rem 0; }
.mu-tipp.mu-klein .mu-blase { display: none; }
/* Eingeklappt: Muno bleibt in voller Groesse und Farbe stehen, und eine
   kleine Blase daneben sagt, was ein Druck auf ihn tut. Vorher war es eine
   blasse Figur von 52 Pixeln ohne jeden Hinweis — sie sah aus wie ein
   Bild, das zu klein geraten ist, und niemand ahnte, dass sie ein Knopf
   ist. Der Text kommt aus dem aria-label, das kern.js ohnehin setzt
   (muno.einblenden), steht also in jeder Oberflaeche in deren Sprache. */
.mu-tipp.mu-klein .mu-tipp-figur {
  cursor: pointer; display: inline-flex; align-items: center; gap: .6rem;
  border-radius: 1rem; transition: transform .2s;
}
.mu-tipp.mu-klein .mu-tipp-figur:hover { transform: translateY(-1px); }
.mu-tipp.mu-klein .mu-tipp-figur:focus-visible { outline: 2px solid var(--marke); outline-offset: 3px; }
.mu-tipp.mu-klein .muno, .mu-tipp.mu-klein span.muno.muno-foto { width: 88px; height: auto; flex: none; }
.mu-tipp.mu-klein .mu-tipp-figur[aria-label]::after {
  content: attr(aria-label);
  padding: .4rem .8rem; border-radius: 1rem 1rem 1rem .25rem;
  background: var(--karte-2); color: var(--ink);
  border: 1px solid var(--rand, var(--flaeche-umriss));
  font-size: .9rem; font-weight: 600; line-height: 1.3; max-width: 13rem;
}

/* Sehr schmale Telefone: Die Marke etwas kleiner, damit Marke, Hell/Dunkel,
   Sprache und Menue in einer Zeile bleiben. */
@media (max-width: 400px) {
  .marke { font-size: 1.02rem; gap: .4rem; }
  .sprachmenue > summary svg { display: none; }
}

@media (max-width: 640px) {
  .lp-teaser-bildlink { display: flex; justify-content: center; }
}

/* ==========================================================================
   Wegweiser, Werkzeugkasten, Fusszeile — nach Ziel gefaerbt, auf dem
   Telefon als Liste.

   Karten eignen sich zum Stoebern, Listen zum Ueberfliegen und Waehlen
   (NN/g, Material). Auf dem Telefon waren die Wege sieben gleiche Kaesten
   ueber drei Bildschirme, und eine fruehere Fassung hatte deshalb die
   Beschreibungen weggelassen — gespart am Inhalt. Jetzt sind es Zeilen:
   Zeichen im getoenten Feld, Titel, die ganze Beschreibung, ein Pfeil, die
   ganze Zeile tippbar und mindestens 56 Pixel hoch. Am Rechner bleiben es
   Karten.

   Die Farbe sagt, was man dort tut — lernen, ueben, pruefen, lesen. Gleiche
   Farbe fuer gleiche Art Tun hilft beim Wiederfinden (Ozcelik u. a. 2009);
   sie ist nie das einzige Merkmal, Zeichen und Titel bleiben.
   ========================================================================== */
:root {
  --ziel-lernen: #1d4ed8;  --ziel-lernen-weich: #e8effd;
  --ziel-ueben: #15803d;   --ziel-ueben-weich: #e5f6ea;
  --ziel-pruefen: #6d28d9; --ziel-pruefen-weich: #efe9fd;
  --ziel-lesen: #b45309;   --ziel-lesen-weich: #fcf1e0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --ziel-lernen: #93c5fd;  --ziel-lernen-weich: rgb(147 197 253 / .14);
    --ziel-ueben: #86efac;   --ziel-ueben-weich: rgb(134 239 172 / .13);
    --ziel-pruefen: #c4b5fd; --ziel-pruefen-weich: rgb(196 181 253 / .15);
    --ziel-lesen: #fcd34d;   --ziel-lesen-weich: rgb(252 211 77 / .13);
  }
}
:root[data-thema="dunkel"] {
  --ziel-lernen: #93c5fd;  --ziel-lernen-weich: rgb(147 197 253 / .14);
  --ziel-ueben: #86efac;   --ziel-ueben-weich: rgb(134 239 172 / .13);
  --ziel-pruefen: #c4b5fd; --ziel-pruefen-weich: rgb(196 181 253 / .15);
  --ziel-lesen: #fcd34d;   --ziel-lesen-weich: rgb(252 211 77 / .13);
}
.weg { --ziel: var(--ziel-lernen); --ziel-weich: var(--ziel-lernen-weich); }
.weg[data-ziel="ueben"] { --ziel: var(--ziel-ueben); --ziel-weich: var(--ziel-ueben-weich); }
.weg[data-ziel="pruefen"] { --ziel: var(--ziel-pruefen); --ziel-weich: var(--ziel-pruefen-weich); }
.weg[data-ziel="lesen"] { --ziel: var(--ziel-lesen); --ziel-weich: var(--ziel-lesen-weich); }

.wegweiser .weg { display: flex; flex-direction: column; gap: .65rem; }
.wegweiser .weg-zeichen {
  display: grid; place-items: center; flex: none;
  width: 2.6rem; height: 2.6rem; border-radius: .8rem;
  background: var(--ziel-weich); color: var(--ziel);
}
.wegweiser .weg-zeichen svg { width: 22px; height: 22px; margin: 0; color: inherit; }
.wegweiser .weg-text { display: block; min-width: 0; }
.wegweiser .weg-text b { margin-bottom: .25rem; color: var(--ink); }
.wz-kachel .wz-text b { color: var(--ink); }
.wegweiser .weg-text span {
  display: block; color: var(--ink-3); font-size: .93rem; line-height: 1.5;
}
.weg-pfeil {
  display: none; flex: none; width: .55rem; height: .55rem; margin-left: auto;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(-45deg); opacity: .7;
}
.wegweiser .weg:hover .weg-zeichen { background: var(--ziel); color: var(--karte); }

/* Werkzeuge: dieselbe Zeile, das Knetbild statt des Zeichens. */
.wz-text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.wz-kachel .wz-text span { color: var(--ink-3); font-size: .92rem; line-height: 1.45; }
.wz-kachel .wz-text b { overflow-wrap: anywhere; }

@media (max-width: 599px) {
  .wegweiser, .wz-raster {
    grid-template-columns: 1fr; gap: 0;
    background: var(--karte); border: 1px solid var(--linie);
    border-radius: var(--rund-l); overflow: hidden;
    box-shadow: var(--schatten-1);
  }
  .wegweiser .weg, .wz-raster .wz-kachel {
    flex-direction: row; align-items: center; gap: .85rem;
    min-height: 3.5rem; padding: .85rem 1rem;
    border: 0; border-radius: 0; box-shadow: none; transform: none;
    background: transparent; background-image: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .wegweiser .weg + .weg, .wz-raster .wz-kachel + .wz-kachel {
    border-top: 1px solid var(--linie);
  }
  .wegweiser .weg:hover, .wegweiser .weg:focus-visible,
  .wz-raster .wz-kachel:hover, .wz-raster .wz-kachel:focus-visible {
    transform: none; box-shadow: none; background: var(--karte-2);
  }
  .wegweiser .weg-zeichen { width: 2.5rem; height: 2.5rem; border-radius: .75rem; }
  .wegweiser .weg-text b {
    font-family: var(--schrift); font-size: 1rem; font-weight: 650;
    margin-bottom: .1rem;
  }
  .wegweiser .weg-text span { font-size: .88rem; line-height: 1.45; }
  .weg-pfeil { display: block; }
  .wz-raster { margin-top: 1rem; }
  .wz-raster .wz-kachel img {
    width: 3.2rem; height: 3.2rem; margin: 0; flex: none;
  }
  .wz-raster .wz-kachel:hover img { transform: none; }
  .wz-kachel .wz-text b { font-family: var(--schrift); font-size: 1rem; font-weight: 650; }
  .wz-kachel .wz-text span { font-size: .86rem; }
  .wz-kopf img { width: 3.6rem; }
  .wz-eingang { min-height: 2.75rem; }
}

/* Fusszeile: die Gruppen sind <details>. Am Rechner ist die
   Zusammenfassung nur die Ueberschrift der Spalte. */
.fuss-gruppe > summary { list-style: none; cursor: default; }
.fuss-gruppe > summary::-webkit-details-marker { display: none; }
.fuss-gruppe > summary h4 { display: block; }
@media (min-width: 641px) {
  .fuss-gruppe > summary { pointer-events: none; }
}
@media (max-width: 640px) {
  .fuss { padding-top: 1.4rem; }
  .fuss-raster { gap: 0; }
  .fuss-gruppe { border-bottom: 1px solid var(--linie); }
  .fuss-gruppe > summary {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 3rem; cursor: pointer;
  }
  .fuss-gruppe > summary h4 { margin: 0; }
  .fuss-gruppe > summary::after {
    content: ""; width: .5rem; height: .5rem; margin-right: .35rem;
    border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
    transform: rotate(45deg); transition: transform .2s ease;
  }
  .fuss-gruppe[open] > summary::after { transform: rotate(225deg); }
  .fuss-gruppe > ul { padding-bottom: .7rem; }
  .fuss-gruppe[data-bleibt-offen] { border-bottom: 0; }
  .fuss-gruppe[data-bleibt-offen] > summary { pointer-events: none; }
  .fuss-gruppe[data-bleibt-offen] > summary::after { display: none; }
  .fuss-gruppe[data-bleibt-offen] > ul { display: flex; flex-wrap: wrap; gap: 0 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fuss-gruppe > summary::after { transition: none; }
}


/* ==========================================================================
   Navigation: „Du bist hier" eine Ebene tiefer und die Leiste unten
   ========================================================================== */

/* Der Punkt oben, unter dem die Seite liegt (`aria-current="true"`), sieht
   aus wie der Punkt der Seite selbst: Wer auf einem Thema steht, steht in
   der Grammatik. */
.hauptnavi > a[aria-current="true"] {
  background: var(--marke-weich); color: var(--marke-ink); font-weight: 600;
}

/* Auf dem Telefon die fuenf Hauptpunkte als Leiste am unteren Rand —
   sichtbar statt hinter dem Menueknopf, dort, wo der Daumen ist. Am Rechner
   gibt es sie nicht; dort stehen die Punkte oben. */
.tableiste { display: none; }
/* **Kein Ziel zweimal im Blick.** Was die Leiste unten auf dem Telefon
   zeigt, zeigen die Reiter dort nicht; was der Kopf zeigt, zeigen sie am
   Rechner nicht — „Lernpfad" und „Grammatik" standen sonst oben und
   gleich daneben noch einmal. Faltet sich der Kopf hinter den Menüknopf
   (`kopf-kompakt`, zwischen Telefon und breitem Schirm), bleiben sie in
   den Reitern stehen: Dort sind sie dann das einzige sichtbare Exemplar.
   Ohne Skript gilt dasselbe, denn ohne Skript faltet sich nichts.
   Die Klassen setzt tools/vorlage.py (`reiter`). */
@media (max-width: 780px) {
  .reiter-innen a.reiter-unten { display: none; }
}
@media (min-width: 781px) {
  .kopf:not(.kopf-kompakt) ~ .reiter a.reiter-oben { display: none; }
}
@media (max-width: 780px) {
  .tableiste {
    position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    padding: .3rem .25rem calc(.3rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--karte) 92%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border-top: 1px solid var(--linie);
    box-shadow: 0 -4px 18px rgb(15 23 42 / .06);
  }
  .tableiste a {
    display: flex; flex-direction: column; align-items: center; gap: .15rem;
    min-height: 3.1rem; padding: .3rem .15rem .25rem; border-radius: .8rem;
    color: var(--ink-3); text-decoration: none;
    font-size: .72rem; font-weight: 600; line-height: 1.15; text-align: center;
  }
  .tableiste a svg { width: 22px; height: 22px; }
  .tableiste a span {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* „Ścieżka nauki“ ist das längste Etikett der Leiste; bei 390 px fehlten
     acht Pixel, und es stand „Ścieżka n…“ da. Nur dieses, nur polnisch,
     eine Spur enger. */
  html[lang="pl"] .tableiste a[href$="sciezka-nauki.html"] span {
    font-size: .66rem; letter-spacing: -.015em;
  }
  .tableiste a[aria-current] { color: var(--marke-ink); }
  .tableiste a[aria-current] svg {
    background: var(--marke-weich); border-radius: 999px;
    padding: 2px 10px; box-sizing: content-box;
  }
  .tableiste a:focus-visible { outline: 2px solid var(--marke); outline-offset: -2px; }
  /* Platz fuer die Leiste: nichts darf unter ihr verschwinden — weder das
     Seitenende noch der klebende Fuss einer Uebung. */
  body:has(.tableiste) { padding-bottom: calc(3.9rem + env(safe-area-inset-bottom)); }
  body:has(.tableiste) .uebung-fuss { bottom: calc(3.9rem + env(safe-area-inset-bottom)); }
  body:has(.tableiste) .neue-fassung {
    bottom: calc(4.6rem + env(safe-area-inset-bottom));
  }
  body:has(.tableiste) .stimmhinweis {
    bottom: calc(4.6rem + env(safe-area-inset-bottom));
  }
  /* Im Menue stehen die fuenf Punkte dann nicht noch einmal — dort bleiben
     die Suche, die Schalter und was oben steht, aber nicht in der Leiste
     („Lesen", `.navi-menue`): Die Leiste bleibt bei fuenf Punkten, und
     ohne diese Ausnahme waere der sechste auf dem Telefon nirgends. */
  body:has(.tableiste) .hauptnavi > a:not(.navi-menue) { display: none; }
  body:has(.tableiste) .navi-werkzeuge { margin-top: 0; }
}
/* Dasselbe ohne :has() — fuer Safari vor 15.4, Chrome vor 105 und
   Samsung Internet vor 20. Die Leiste steht im HTML vor <main> und dem
   Fuss, also erreichen Geschwisterwaehler alles, was Platz braucht: Statt
   des Abstands am <body> bekommt der Seitenfuss einen Rand nach unten,
   und die klebenden Kaesten ruecken ueber die Leiste. Nur die doppelten
   Punkte im Menue bleiben dort stehen — sie stehen im Kopf, *vor* der
   Leiste, und dorthin reicht kein Geschwisterwaehler. Das kostet eine
   Wiederholung, nichts, was verdeckt waere. */
@supports not selector(:has(*)) {
  @media (max-width: 780px) {
    .tableiste ~ .fuss { margin-bottom: calc(3.9rem + env(safe-area-inset-bottom)); }
    .tableiste ~ * .uebung-fuss { bottom: calc(3.9rem + env(safe-area-inset-bottom)); }
    .tableiste ~ .neue-fassung, .tableiste ~ * .neue-fassung,
    .tableiste ~ .stimmhinweis, .tableiste ~ * .stimmhinweis {
      bottom: calc(4.6rem + env(safe-area-inset-bottom));
    }
  }
}


/* ==========================================================================
   Die Vokabelübersicht (.vk-*) — Vokabelseite, Themenübersicht, Kategorie

   Themen als Zeilen auf dem Telefon und als Karten am Rechner, Listen als
   kompakte Zeilen, eine mitlaufende Filterzeile, die Weiter-Karte. Gebaut
   in tools/seiten_lernen.py (`_vk_*`), belebt von
   assets/js/vokabeluebersicht.js, Zeichen und Familie aus
   tools/vokabelmotive.py.

   **Acht Familienfarben, nicht siebzehn.** Gleiche Farbe für Zusammen-
   gehöriges hilft beim Wiederfinden (Ozcelik u. a. 2009) — aber nur, wenn
   man die Töne auseinanderhalten kann, und das trägt eine Skala bis etwa
   acht. Die Farbe ist nie das einzige Merkmal: Zeichen und Name tragen die
   Bedeutung, der Stand steht immer auch als Zahl da. Schrift wird nie im
   Rohton gesetzt.

   Kontrast, nach WCAG gerechnet: hell ein weißes Zeichen auf dem satten
   Ton (5.0 bis 7.6 : 1), dunkel der helle Ton auf `--karte` #131b2a
   (9.3 bis 12.3 : 1). Balken und Ring halten den Nicht-Text-Kontrast von
   3 : 1 gegen ihre Bahn.

   **Kein Glas.** 456 Zeilen mit Weichzeichner machen ein Telefon heiß, und
   über dem gemalten Hintergrund ist ein deckender Grund der einzige, dessen
   Kontrast man vorher kennt.
   ========================================================================== */
:root {
  --vk-grundlagen: #0f766e; --vk-grundlagen-weich: #e3f3f1;
  --vk-alltag: #b45309;     --vk-alltag-weich: #fcf1e0;
  --vk-mensch: #be185d;     --vk-mensch-weich: #fce7f1;
  --vk-arbeit: #1d4ed8;     --vk-arbeit-weich: #e8effd;
  --vk-staat: #475569;      --vk-staat-weich: #eef1f5;
  --vk-wissen: #6d28d9;     --vk-wissen-weich: #efe9fd;
  --vk-natur: #15803d;      --vk-natur-weich: #e5f6ea;
  --vk-freizeit: #9a3412;   --vk-freizeit-weich: #fbebe3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --vk-grundlagen: #5eead4; --vk-grundlagen-weich: rgb(94 234 212 / .14);
    --vk-alltag: #fcd34d;     --vk-alltag-weich: rgb(252 211 77 / .13);
    --vk-mensch: #f9a8d4;     --vk-mensch-weich: rgb(249 168 212 / .14);
    --vk-arbeit: #93c5fd;     --vk-arbeit-weich: rgb(147 197 253 / .14);
    --vk-staat: #cbd5e1;      --vk-staat-weich: rgb(203 213 225 / .13);
    --vk-wissen: #c4b5fd;     --vk-wissen-weich: rgb(196 181 253 / .15);
    --vk-natur: #86efac;      --vk-natur-weich: rgb(134 239 172 / .13);
    --vk-freizeit: #fdba74;   --vk-freizeit-weich: rgb(253 186 116 / .14);
  }
}
:root[data-thema="dunkel"] {
  --vk-grundlagen: #5eead4; --vk-grundlagen-weich: rgb(94 234 212 / .14);
  --vk-alltag: #fcd34d;     --vk-alltag-weich: rgb(252 211 77 / .13);
  --vk-mensch: #f9a8d4;     --vk-mensch-weich: rgb(249 168 212 / .14);
  --vk-arbeit: #93c5fd;     --vk-arbeit-weich: rgb(147 197 253 / .14);
  --vk-staat: #cbd5e1;      --vk-staat-weich: rgb(203 213 225 / .13);
  --vk-wissen: #c4b5fd;     --vk-wissen-weich: rgb(196 181 253 / .15);
  --vk-natur: #86efac;      --vk-natur-weich: rgb(134 239 172 / .13);
  --vk-freizeit: #fdba74;   --vk-freizeit-weich: rgb(253 186 116 / .14);
}
[data-familie="grundlagen"] { --vk: var(--vk-grundlagen); --vk-weich: var(--vk-grundlagen-weich); }
[data-familie="alltag"]     { --vk: var(--vk-alltag);     --vk-weich: var(--vk-alltag-weich); }
[data-familie="mensch"]     { --vk: var(--vk-mensch);     --vk-weich: var(--vk-mensch-weich); }
[data-familie="arbeit"]     { --vk: var(--vk-arbeit);     --vk-weich: var(--vk-arbeit-weich); }
[data-familie="staat"]      { --vk: var(--vk-staat);      --vk-weich: var(--vk-staat-weich); }
[data-familie="wissen"]     { --vk: var(--vk-wissen);     --vk-weich: var(--vk-wissen-weich); }
[data-familie="natur"]      { --vk: var(--vk-natur);      --vk-weich: var(--vk-natur-weich); }
[data-familie="freizeit"]   { --vk: var(--vk-freizeit);   --vk-weich: var(--vk-freizeit-weich); }

/* `hidden` muss gewinnen: Jede dieser Klassen setzt ein `display`, und ein
   ausdrückliches `display` schlägt das Attribut. Ohne diese Zeile stünde
   der Filter da und blendete nichts aus. */
.vk [hidden], .vk-weiter[hidden], .vk-gabel[hidden], .vk-filter[hidden] {
  display: none !important;
}
.vk-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --- Das Zeichenfeld ------------------------------------------------------ */
.vk-zeichen {
  display: inline-grid; place-items: center; flex: none;
  width: 2.5rem; height: 2.5rem; border-radius: .75rem;
  background: var(--vk, var(--marke)); color: #fff;
}
.vk-zeichen svg { width: 22px; height: 22px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .vk-zeichen {
    background: var(--vk-weich, var(--marke-weich)); color: var(--vk, var(--marke));
  }
}
:root[data-thema="dunkel"] .vk-zeichen {
  background: var(--vk-weich, var(--marke-weich)); color: var(--vk, var(--marke));
}

/* --- Kopf: Kennzahlen links, Stand rechts --------------------------------- */
.vk-kopf { display: grid; gap: 0 2.5rem; }
.vk-kennzahlen {
  margin: -.2rem 0 .8rem; font-variant-numeric: tabular-nums;
}
.vk-kopf-stand { display: grid; gap: .7rem; align-content: start; margin-bottom: 1.2rem; }
@media (min-width: 64rem) {
  .vk-kopf { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
  .vk-kopf-stand { margin-top: 2.2rem; }
}
.vk-kat-kopf h1 { display: flex; align-items: center; gap: .7rem; }
.vk-kat-kopf h1 .vk-zeichen { width: 2.9rem; height: 2.9rem; }
.vk-kat-kopf h1 .vk-zeichen svg { width: 26px; height: 26px; }

/* --- Die Weiter-Karte ----------------------------------------------------- */
.vk-weiter {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem;
  padding: 1rem 1.1rem; border: 1px solid var(--linie);
  border-radius: var(--rund-l); background: var(--karte);
  box-shadow: var(--schatten-2);
}
.vk-ring { flex: none; width: 56px; height: 56px; }
.vk-ring circle { fill: none; stroke-width: 5; }
.vk-ring-bahn { stroke: var(--linie-kraeftig); }
.vk-ring-wert { stroke: var(--ok-ink); stroke-linecap: round; }
.vk-ring-zahl {
  fill: var(--ink); font-size: 12px; font-weight: 700;
  text-anchor: middle; dominant-baseline: central;
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: no-preference) {
  .vk-ring-wert { transition: stroke-dashoffset .6s ease-out; }
}
.vk-weiter-text { flex: 1 1 11rem; min-width: 0; display: grid; gap: .12rem; }
.vk-weiter-kopf { font-size: .82rem; color: var(--ink-3); }
.vk-weiter-titel {
  font-family: var(--schrift-titel); font-size: 1.1rem; line-height: 1.3;
  color: var(--ink); overflow-wrap: anywhere;
}
.vk-weiter-zeile { font-size: .88rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.vk-weiter-noch { font-size: .88rem; color: var(--ok-ink); font-weight: 600; margin-top: .15rem; }
.vk-weiter-los { flex: 1 1 100%; justify-content: center; text-align: center; }

/* --- Die Gabel ohne Stand -------------------------------------------------- */
.vk-gabel {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}
@media (min-width: 64rem) { .vk-gabel { grid-template-columns: 1fr; } }
.vk-gabel-karte {
  display: flex; align-items: center; gap: .75rem; min-height: 3.4rem;
  padding: .7rem .9rem; border: 1px solid var(--linie);
  border-radius: var(--rund); background: var(--karte); color: var(--ink);
  text-decoration: none; box-shadow: var(--schatten-1);
  transition: border-color .15s, box-shadow .15s;
}
.vk-gabel-karte:hover, .vk-gabel-karte:focus-visible {
  border-color: var(--linie-kraeftig); box-shadow: var(--schatten-2); color: var(--ink);
}
.vk-gabel-karte b { display: block; font-size: .98rem; line-height: 1.3; }
.vk-gabel-karte b + span { display: block; font-size: .86rem; color: var(--ink-2); line-height: 1.4; }
.vk-gabel-zeichen {
  display: grid; place-items: center; flex: none;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--marke-weich); color: var(--marke-ink); font-weight: 700;
}
.vk-gabel-zeichen svg { width: 18px; height: 18px; }
.vk-gabel-neu .vk-gabel-zeichen { background: var(--marke); color: var(--knopf-ink); }

/* --- Die Lernkarte: Heute fällig / alles erledigt ------------------------- */
.vk-weiter-faellig { color: var(--akzent-ink); font-weight: 600; }
.vk-weiter-fertig { color: var(--ok-ink); font-weight: 600; }
.vk-weiter-knoepfe { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .5rem; }
.vk-weiter-knoepfe .knopf { flex: 1 1 12rem; justify-content: center; text-align: center; }
.vk-weiter-knoepfe .vk-weiter-zweit { flex-basis: 100%; }

/* --- Die Modusleiste: dieselben Wörter auf fünf Arten ------------------- */
.vk-modi { margin: .2rem 0 0; }
.vk-modi-titel { margin: 0 0 .35rem; font-size: .85rem; color: var(--ink-3); }
.vk-modi-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.vk-modi .wb-chip {
  display: inline-flex; align-items: center; text-decoration: none;
}
.vk-modi .wb-chip[hidden] { display: none; }
.wortblock-modi, .uebung-karte + .vk-modi { margin: .6rem 0 1rem; }

/* Zugeklappte Begleittexte: „Über diese Wörter", „Mehr über diese Liste",
   die Rundengröße. Der Kopf ist ein Daumenziel wie auf der Übungsseite. */
.vk-ueber, .wl-einfuehrung { margin: 1.2rem 0; }
.vk-ueber > summary, .wl-einfuehrung > summary, .wb-groesse-auf > summary {
  cursor: pointer; min-height: 2.75rem; display: flex; align-items: center;
  gap: .5rem; list-style: none; color: var(--ink-2);
}
.vk-ueber > summary::-webkit-details-marker,
.wl-einfuehrung > summary::-webkit-details-marker,
.wb-groesse-auf > summary::-webkit-details-marker { display: none; }
.vk-ueber > summary::before, .wl-einfuehrung > summary::before,
.wb-groesse-auf > summary::before {
  content: "\203A"; display: inline-block; width: .8em; flex: none;
  color: var(--ink-3); transition: transform .15s;
}
.vk-ueber[open] > summary::before, .wl-einfuehrung[open] > summary::before,
.wb-groesse-auf[open] > summary::before { transform: rotate(90deg); }
.vk-ueber > summary { font-weight: 600; color: var(--ink); }
.wb-groesse-auf { margin: 0 0 .7rem; }
.wb-groesse-auf > summary { font-size: .92rem; font-variant-numeric: tabular-nums; }
.wb-groesse-auf[open] > .wb-groesse { margin-top: .4rem; }
.wb-stand { margin: 0 0 .6rem; font-size: .9rem; font-variant-numeric: tabular-nums; }
/* Auf der Wortliste folgt die Abfrage direkt auf den Kopf: kein zweiter
   grosser Abstand zwischen Untertitel und „Diese Liste abfragen". */
.seitenkopf + h2#ueben { margin-top: .3rem; }
.seitenkopf:has(+ h2#ueben) { padding: 1.4rem 0 .5rem; }
h2#ueben + .uebung-karte { margin-top: .7rem; }
.uebung-koerper.wb-start-liste { padding-top: 1rem; }
.wb-start-liste .hero-knoepfe { margin: 0 0 .5rem; }
.wb-start-liste .wb-start-titel { margin: .4rem 0 .5rem; font-size: .92rem; }
.wb-start-liste .wb-stufen { margin-bottom: .8rem; }
.wb-ende-zeile { margin: .4rem 0 0; font-variant-numeric: tabular-nums; }
.wl-zur-abfrage { margin: 1.2rem 0; font-size: .92rem; }

/* Ein Knopf, der wie ein Verweis aussieht — für Nebensachen neben den
   großen Knöpfen („Auf die Merkliste"). Ein Daumenziel bleibt er. */
.knopf-text {
  background: none; border: 0; padding: .5rem .2rem; min-height: 2.75rem;
  font: inherit; font-size: .92rem; color: var(--marke-ink);
  text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}
.knopf-text:hover { color: var(--ink); }

/* --- Die Filterzeile — läuft mit, solange die Listen laufen ---------------- */
.vk { position: relative; }
.vk-filter {
  position: sticky; z-index: 6;
  top: var(--vk-oben, calc(var(--kopf-hoehe, 3.9rem) + 2.7rem));
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem;
  margin: .6rem 0 1rem; padding: .55rem 0;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}
.vk-chips {
  display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none;
  max-width: 100%; padding: 2px;
}
.vk-chips::-webkit-scrollbar { display: none; }
.vk-chip {
  flex: none; display: inline-flex; align-items: center; gap: .35rem;
  min-height: 2.1rem; padding: .3rem .8rem; border-radius: var(--rund-voll);
  border: 1px solid var(--linie-kraeftig); background: var(--karte);
  color: var(--ink-2); font: inherit; font-size: .88rem; font-weight: 600;
  cursor: pointer;
}
.vk-chip[data-stufe]:not([data-stufe=""])::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--stufe-farbe, var(--marke));
}
.vk-chip:hover { border-color: var(--marke); color: var(--ink); }
.vk-chip[aria-pressed="true"] {
  background: var(--marke); border-color: var(--marke); color: var(--knopf-ink);
}
.vk-chip[aria-pressed="true"]::before { background: currentColor; }
.vk-chip:focus-visible, .vk-suche input:focus-visible, .vk-mehr:focus-visible {
  outline: 2px solid var(--marke); outline-offset: 2px;
}
.vk-suche { position: relative; flex: 1 1 12rem; max-width: 22rem; display: block; }
.vk-suche svg {
  position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
  width: 1rem; height: 1rem; color: var(--ink-3); pointer-events: none;
}
.vk-suche input {
  width: 100%; min-height: 2.3rem; padding: .35rem .7rem .35rem 2.1rem;
  border: 1px solid var(--linie-kraeftig); border-radius: var(--rund-voll);
  background: var(--karte); color: var(--ink); font: inherit; font-size: 1rem;
}
.vk-suche input::placeholder { color: var(--ink-3); opacity: 1; }
.vk-treffer {
  margin: 0; font-size: .85rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vk-leer { margin: 1rem 0; }

/* --- Die Themen: Zeilen auf dem Telefon, Karten am Rechner ---------------- */
.vk-themen {
  list-style: none; margin: 0 0 1.8rem; padding: 0;
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}
.vk-themen-gross { grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); }
.vk-thema {
  position: relative; display: grid; align-content: start;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "z t" "k k" "m m";
  column-gap: .75rem; row-gap: .35rem;
  padding: 1rem; border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--karte); box-shadow: var(--schatten-1);
  transition: transform .14s, box-shadow .2s, border-color .2s;
}
.vk-thema:hover { transform: translateY(-2px); box-shadow: var(--schatten-2); border-color: var(--linie-kraeftig); }
.vk-thema:focus-within { outline: 2px solid var(--marke); outline-offset: 2px; }
.vk-thema > .vk-zeichen { grid-area: z; }
.vk-thema-link {
  grid-area: t; align-self: center; min-width: 0;
  font-family: var(--schrift-titel); font-size: 1.04rem; line-height: 1.3;
  color: var(--ink); text-decoration: none; overflow-wrap: anywhere;
}
.vk-thema-link:focus-visible { outline: none; }
.vk-thema-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.vk-thema-kurz { grid-area: k; color: var(--ink-3); font-size: .92rem; line-height: 1.5; }
.vk-thema-meta {
  grid-area: m; display: flex; flex-wrap: wrap; align-items: center;
  gap: .35rem .7rem; font-size: .85rem; color: var(--ink-3);
}
.vk-thema-zahl { font-variant-numeric: tabular-nums; }
.vk-thema .kat-band { margin: 0; width: 5rem; flex: none; }
.vk-pfeil { display: none; grid-area: p; align-self: center; }
.vk-stand {
  flex: 1 1 100%; display: flex; align-items: center; gap: .55rem;
}
.vk-stand .vk-balken { flex: 1 1 auto; max-width: 11rem; }
.vk-stand-zahl { font-size: .82rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

@media (max-width: 599px) {
  .vk-themen {
    gap: 0; grid-template-columns: 1fr;
    background: var(--karte); border: 1px solid var(--linie);
    border-radius: var(--rund-l); overflow: hidden; box-shadow: var(--schatten-1);
  }
  .vk-thema {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "z t p" "z k p" "z m p";
    row-gap: .2rem; min-height: 3.5rem; padding: .75rem .9rem;
    border: 0; border-radius: 0; box-shadow: none; transform: none;
  }
  .vk-thema + .vk-thema { border-top: 1px solid var(--linie); }
  .vk-thema:hover { transform: none; box-shadow: none; background: var(--karte-2); }
  .vk-thema:focus-within { outline-offset: -2px; }
  .vk-thema > .vk-zeichen { align-self: start; }
  .vk-thema-link { font-family: var(--schrift); font-size: 1rem; font-weight: 650; }
  .vk-thema-kurz { font-size: .88rem; line-height: 1.45; }
  .vk-pfeil { display: block; }
}

/* --- Die Abschnitte und die Listenzeilen ---------------------------------- */
.vk-abschnitt {
  margin: 2rem 0 0;
  scroll-margin-top: calc(var(--vk-oben, 6.6rem) + var(--vk-filter-hoehe, 6rem) + .5rem);
}
.vk-abschnitt-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .65rem;
  margin: 0 0 .5rem;
}
.vk-abschnitt-kopf .vk-zeichen { width: 2.1rem; height: 2.1rem; border-radius: .6rem; }
.vk-abschnitt-kopf .vk-zeichen svg { width: 18px; height: 18px; }
.vk-abschnitt-titel a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.vk-abschnitt-kopf .zeile-still {
  font-family: var(--schrift); font-size: .82rem; font-weight: 400;
  font-variant-numeric: tabular-nums; flex-basis: 100%;
}
@media (min-width: 600px) { .vk-abschnitt-kopf .zeile-still { flex-basis: auto; } }

.vk-listen {
  list-style: none; margin: 0; padding: 0;
  display: grid; column-gap: 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
}
.vk-liste {
  position: relative; display: grid; align-items: center;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  grid-template-areas: "s t z" ". m m";
  column-gap: .6rem; row-gap: .15rem;
  min-height: 2.75rem; padding: .45rem .4rem;
  border-bottom: 1px solid var(--linie);
}
.vk-liste > .stufe-punkt { grid-area: s; justify-self: start; min-width: 2.35rem; }
.vk-liste-link {
  grid-area: t; min-width: 0; color: var(--ink); text-decoration: none;
  font-size: .97rem; line-height: 1.35; overflow-wrap: anywhere;
}
.vk-liste-link::after { content: ""; position: absolute; inset: 0; }
.vk-liste-link:focus-visible { outline: none; }
.vk-liste:focus-within { outline: 2px solid var(--marke); outline-offset: -2px; border-radius: var(--rund-s); }
.vk-liste:hover { background: var(--karte-2); }
.vk-liste:hover .vk-liste-link { color: var(--marke-ink); }
.vk-liste-zahl {
  grid-area: z; font-size: .82rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vk-mini { grid-area: m; display: flex; align-items: center; gap: .45rem; }
.vk-mini .vk-balken { width: 6rem; flex: none; }
.vk-mini-zahl { font-size: .8rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Je Thema sechs Listen offen, der Rest hinter „alle zeigen“ — nur mit
   Skript (`vk-gekappt`) und nur ohne Filter. */
.vk-gekappt:not(.vk-gefiltert) .vk-abschnitt:not(.vk-offen) .vk-ueber { display: none; }
.vk-mehr {
  margin: .6rem 0 0; min-height: 2.3rem; padding: .4rem 1rem;
  border: 1px solid var(--linie-kraeftig); border-radius: var(--rund-voll);
  background: var(--karte); color: var(--marke-ink);
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.vk-mehr:hover { border-color: var(--marke); }

/* --- Der Balken: sicher satt, angefasst blass, die Bahn darunter ---------- */
.vk-balken {
  display: flex; height: .45rem; min-width: 3rem; overflow: hidden;
  border-radius: var(--rund-voll);
  background: color-mix(in srgb, var(--vk, var(--marke)) 14%, var(--linie));
}
.vk-balken i { display: block; height: 100%; }
.vk-b-sicher { background: var(--vk, var(--marke)); }
.vk-b-angefasst { background: color-mix(in srgb, var(--vk, var(--marke)) 42%, var(--karte)); }
.vk-ic { display: block; flex: none; }
.vk-kopf-text { min-width: 0; }
.vk-themen-nav { margin-top: .2rem; }
.vk-abschnitte { margin-bottom: 2rem; }

/* ==========================================================================
   Lernstand-Seite (Neuaufbau): Heute, Stufe je Sprache, Schwachstellen,
   was sitzt, Prognose, Erinnerung. Praefix fs-.

   Farben nur aus den Tokens: Fortschritt in --marke, „sitzt" und
   „Ziel erreicht" in --ok, Schwachstellen im warmen --akzent — kein Rot,
   denn ein Fehler, den man noch üben kann, ist kein Alarm. Jede Farbe hat
   eine Zahl oder ein Wort daneben (WCAG 1.4.1).
   ========================================================================== */

.fs-seite .seitenkopf { margin-bottom: 1rem; }
.fs-unterkopf {
  font-family: var(--schrift); font-size: .95rem; font-weight: 600;
  color: var(--ink); margin: 1.4rem 0 .7rem;
}
.fs-mehr { margin-top: 1rem; }
.fs-mehr > summary { cursor: pointer; font-weight: 600; color: var(--marke-ink); }

/* --- Heute --- */
.fs-heute { margin: 0 0 1.8rem; padding: 1.3rem; }
.fs-heute-titel { margin: 0 0 .35rem; font-size: 1.3rem; }
.fs-heute-kopf { display: flex; gap: 1.2rem; align-items: center; }
.fs-heute-text { min-width: 0; flex: 1; }
.fs-heute-text p { margin: 0 0 .3rem; }
.fs-heute-ziel { font-weight: 600; color: var(--ink); }
.fs-heute-serie, .fs-heute-faellig { color: var(--ink-2); font-size: .95rem; }
.fs-heute-knopf { margin-top: .8rem !important; }
.fs-ring { width: 6.6rem; height: 6.6rem; }
.fs-ring .ez-ring-wert { stroke: var(--marke); }
.fs-ring.fs-ring-voll .ez-ring-wert { stroke: var(--ok); }
.fs-ring .ez-ring-zahl { font-size: 13px; }
.fs-heute-leer p { max-width: var(--lesebreite); }
.fs-woche { margin-top: 1.2rem; }
.fs-woche .wochenreihe { margin-bottom: .5rem; }
@media (max-width: 30rem) {
  .fs-heute { padding: 1rem; }
  .fs-heute-kopf { align-items: flex-start; gap: .9rem; }
  .fs-ring { width: 5.2rem; height: 5.2rem; }
  .fs-heute-knopf .knopf { width: 100%; }
}

/* Die sieben Tage voraus: kleine Säulen mit der Zahl darüber. */
.fs-prognose {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem;
  align-items: end;
}
.fs-saeule { display: grid; grid-template-rows: auto 3.6rem auto; gap: .2rem;
             text-align: center; }
.fs-saeule-zahl { font-size: .82rem; font-weight: 600; color: var(--ink-2);
                  font-variant-numeric: tabular-nums; }
.fs-saeule-spur { display: flex; align-items: flex-end; height: 100%;
                  background: var(--bg-tief); border-radius: var(--rund-s);
                  overflow: hidden; }
.fs-saeule-spur > i { display: block; width: 100%; background: var(--marke);
                      border-radius: var(--rund-s) var(--rund-s) 0 0; }
.fs-saeule:first-child .fs-saeule-spur > i { background: var(--akzent); }
.fs-saeule-name { font-size: .8rem; color: var(--ink-3); }

/* --- Sprachen mit Stufe --- */
.sp-stufe { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
            font-weight: 600; color: var(--ink); margin: .15rem 0 .3rem !important; }
.sp-stufe-marke {
  display: inline-block; padding: .05rem .5rem; border-radius: var(--rund-voll);
  font-size: .8rem; font-weight: 700; color: var(--stufe-ink, var(--marke-ink));
  border: 1px solid color-mix(in srgb, var(--stufe-farbe, var(--marke)) 55%, transparent);
  background: color-mix(in srgb, var(--stufe-farbe, var(--marke)) 12%, transparent);
}
:root:not([data-thema="dunkel"]) .sp-stufe-marke {
  color: color-mix(in srgb, var(--stufe-farbe, var(--marke)) 80%, #000);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .sp-stufe-marke {
    color: color-mix(in srgb, var(--stufe-farbe, var(--marke)) 55%, #fff);
  }
}
:root[data-thema="dunkel"] .sp-stufe-marke {
  color: color-mix(in srgb, var(--stufe-farbe, var(--marke)) 55%, #fff);
}
.sp-kann { font-size: .9rem; color: var(--ink-2); }
.sp-meilenstein { margin: .45rem 0 .3rem; height: .5rem; }
.sp-karte.sp-jetzt { border-color: var(--ok); }

/* --- Schwachstellen --- */
.fs-schwach { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.fs-schwach li {
  display: flex; gap: .8rem; align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding: .7rem .8rem; border-radius: var(--rund-s);
  border-left: 3px solid var(--akzent); background: var(--bg-tief);
}
.fs-schwach-text { display: grid; min-width: 0; }
.fs-schwach-text b { color: var(--ink); overflow-wrap: anywhere; }
.fs-schwach-text span { font-size: .85rem; color: var(--akzent-ink); }
.fs-schwach-wege { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.fs-klein { padding: .4rem .9rem; font-size: .88rem; }
.fs-ansehen { font-size: .88rem; font-weight: 600; }

/* --- Was sitzt --- */
.fs-stapel { margin: 0 0 1rem; }
.fs-stapel-kopf { display: flex; justify-content: space-between; gap: .8rem;
                  flex-wrap: wrap; margin: 0 0 .35rem; font-size: .92rem; }
.fs-stapel-kopf span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fs-stapel-spur {
  display: flex; height: .85rem; border-radius: var(--rund-voll); overflow: hidden;
  background: var(--bg-tief); box-shadow: inset 0 0 0 1px var(--linie-kraeftig);
}
.fs-stapel-spur > i { display: block; height: 100%; }
.fs-t-sitzt { background: var(--ok); }
.fs-t-aufbau { background: var(--marke); }
.fs-legende { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .2rem 0 0;
              font-size: .82rem; color: var(--ink-2); }
.fs-l::before {
  content: ""; display: inline-block; width: .75rem; height: .75rem;
  border-radius: 3px; margin-right: .35rem; vertical-align: -.08rem;
}
.fs-l-sitzt::before { background: var(--ok); }
.fs-l-aufbau::before { background: var(--marke); }

.fs-stufen .balken-zeile { grid-template-columns: 3rem 1fr 4rem; }
.fs-stufenfarbe { background: var(--stufe-farbe, var(--marke)) !important; }

/* --- Erinnerung --- */
.fs-erinnerung { margin-top: 1.2rem; padding-top: .4rem; border-top: 1px solid var(--linie); }
.fs-erinnerung-felder { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: end; }
.fs-erinnerung-felder > label { display: grid; gap: .3rem; }
.fs-tage { display: flex; flex-wrap: wrap; gap: .35rem; }
.fs-tag {
  display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
  padding: .3rem .6rem; border: 1px solid var(--linie-kraeftig);
  border-radius: var(--rund-voll); font-size: .88rem;
}
.fs-tag input { accent-color: var(--marke); margin: 0; }
.fs-tag:has(input:checked) { border-color: var(--marke); background: var(--marke-weich); }

/* --- Datenschutz, kurz und unten --- */
.fs-privat { font-size: .92rem; color: var(--ink-2); padding: .6rem .8rem;
             border-radius: var(--rund-s); background: var(--bg-tief); }

/* --- Der Einstufungstest (assets/js/einstufung.js) ---------------------
   Waehrend des Tests nur Karte, Linie, Tinte und Marke: kein Rot, kein
   Gruen, kein Stufenname. Die gewaehlte Antwort wird kurz „gewaehlt“
   markiert, in der Markenfarbe. Die Stufenfarbe kommt erst im Ergebnis,
   als --stufe-farbe am Kopf, und als Schrift nur ueber --stufe-ink, das
   in beiden Fassungen lesbar gemischt ist. Nur Token, keine festen Farben. */
.es-band { border-radius: 0; }
.es-zaehler { margin: 0 0 .5rem; }
.es-frage { margin-bottom: .6rem; }
.es-liste { margin-bottom: .6rem; }
.es-wahl { min-height: 3rem; align-items: center; }
.es-wahl[disabled], .es-weissnicht[disabled] { cursor: default; }
.es-wahl[data-gewaehlt="ja"], .es-weissnicht[data-gewaehlt="ja"] {
  border-color: var(--marke); background: var(--marke-weich);
  box-shadow: var(--ring);
}
.es-still { margin: 0; }
.es-weissnicht {
  width: 100%; min-height: 3rem; justify-content: center;
  border-radius: var(--rund); border-style: dashed;
}
.es-fuss { justify-content: flex-end; }
.es-start .hero-knoepfe { margin-top: 1rem; }

.es-kopf {
  border-left: 4px solid var(--stufe-farbe, var(--marke));
  padding: .1rem 0 .3rem 1rem; margin-bottom: 1rem;
}
.es-stufe {
  font-family: var(--schrift-titel); font-weight: 700; line-height: 1.05;
  font-size: clamp(2.6rem, 2rem + 3vw, 3.6rem);
  color: var(--stufe-ink); margin: .25rem 0 .35rem;
}
.es-titel { margin: 0; font-weight: 600; color: var(--ink); }
.es-kurz { margin: .2rem 0 0; color: var(--ink-2); }
.es-unsicher { font-size: 1.1rem; margin: 0 0 .25rem; color: var(--ink); }
.es-teile { margin: 1rem 0 .6rem; max-width: 34rem; }
.balken-spur > i.es-balken { background: var(--stufe-farbe, var(--marke)); }
.es-haupt { margin: 1.2rem 0 .4rem; }
.es-wege, .es-markieren {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin: .7rem 0;
}
.es-antworten { margin: 1rem 0; }
.es-antworten > summary { cursor: pointer; color: var(--marke-ink); width: fit-content; }
.es-rueckschau { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .8rem; }
.es-rueckschau > li {
  display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .4rem;
  padding-top: .7rem; border-top: 1px solid var(--linie);
}
.es-rueckschau .es-frage { font-size: 1rem; margin: 0 0 .2rem; }
.es-rueckschau .zeile-still { margin: 0; }
.es-zeichen { font-weight: 700; color: var(--ink-3); }
.es-rueckschau > li[data-antwort="r"] .es-zeichen { color: var(--ok-ink); }
.es-rueckschau > li[data-antwort="f"] .es-zeichen { color: var(--fehler-ink); }
@media (max-width: 539px) {
  .es-haupt .knopf { width: 100%; justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .es-band > i, .es-wahl { transition: none; }
}

/* --- Sprache im Einsatz (tools/seiten_anwendung.py) -------------------------
   Je Feld ein Akzent aus der Kategorienpalette des Lernpfads (`--kat`). Er
   faerbt Rand, Punkt und eine leichte Toenung; als Schrift steht er nie
   pur, sondern mit der Tinte gemischt — wie auf der Themenseite, damit er
   hell und dunkel ueber 4,5 : 1 bleibt. Weisse Schrift nur auf vollem
   Akzent (alle Palettentoene ueber 4,9 : 1). */
.anw-karte, .anw-wahl { --kat: var(--marke); }
.anw-karte {
  margin: 1.6rem 0; padding: 1.1rem 1.2rem 1rem;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund-l); box-shadow: var(--schatten-1);
}
/* „Weiterlesen" auf der Startseite eines Paares (tools/seiten_lesen.py,
   `startkarte`): dieselbe weisse Karte wie „Wofür lernst du?" darueber,
   ein Titel, eine Zeile, ein Verweis — kein zweiter Knopf neben dem
   Einstieg oben. */
.lesestart {
  margin: 1.6rem 0; padding: 1.1rem 1.2rem 1rem;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund-l); box-shadow: var(--schatten-1);
}
.lesestart .marke-schild { margin: 0 0 .3rem; }
.lesestart-titel { margin: 0 0 .25rem; font-size: 1.15rem; line-height: 1.35; }
.lesestart-titel a { color: var(--ink); text-decoration: none; }
.lesestart-titel a:hover, .lesestart-titel a:focus-visible {
  color: var(--marke-ink); text-decoration: underline;
}
.lesestart-zeile { margin: 0; color: var(--ink-2); max-width: var(--lesebreite); }
.lesestart-fuss { margin: .7rem 0 0; font-size: .95rem; }
.anw-karte-kopf h2 { margin: 0 0 .25rem; font-size: 1.15rem; }
.anw-karte-kopf p { margin: 0 0 .8rem; color: var(--ink-2); max-width: var(--lesebreite); }
.anw-chips {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
}
.anw-chips-gross { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); margin: 1.2rem 0; }
.anw-chip {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .7rem .85rem; border-radius: 14px; text-decoration: none;
  color: var(--ink);
  background: color-mix(in srgb, var(--kat) 6%, var(--karte));
  border: 1px solid color-mix(in srgb, var(--kat) 28%, var(--linie));
  border-left: 4px solid var(--kat);
  transition: box-shadow .15s ease, transform .15s ease;
}
.anw-chip:hover, .anw-chip:focus-visible {
  box-shadow: var(--schatten-2); transform: translateY(-1px);
}
.anw-chip-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.anw-chip-text b { color: var(--ink); font-weight: 650; line-height: 1.3; }
.anw-chip-kurz { color: var(--ink-2); font-size: .92rem; line-height: 1.45; }
.anw-chip-zahl {
  color: color-mix(in srgb, var(--kat) 55%, var(--ink)); font-size: .82rem; font-weight: 600;
}
.anw-punkt {
  flex: none; width: .7rem; height: .7rem; margin-top: .35rem;
  border-radius: 50%; background: var(--kat);
}
.anw-gewaehlt { box-shadow: inset 0 0 0 2px var(--kat); }
.anw-dein {
  align-self: flex-start; padding: .05rem .5rem; border-radius: var(--rund-voll);
  background: var(--kat); color: #fff; font-size: .74rem; font-weight: 700;
}
.anw-karte-fuss { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; margin: .8rem 0 0; font-size: .95rem; }
.anw-zurueck {
  margin-top: .7rem; padding: .3rem .8rem; border-radius: var(--rund-voll);
  border: 1px solid var(--linie-kraeftig); background: transparent;
  color: var(--ink-2); font: inherit; font-size: .88rem; cursor: pointer;
}
.anw-zurueck:hover, .anw-zurueck:focus-visible { color: var(--ink); border-color: var(--ink-3); }

.anw-seite { padding-bottom: 1rem; }
.anw-feld h1 { display: flex; align-items: center; gap: .6rem; }
.anw-feld h1 .anw-punkt { width: .85rem; height: .85rem; margin-top: 0; }
.anw-warum {
  margin: 1.2rem 0 1.6rem; padding: .9rem 1.1rem;
  border-left: 4px solid var(--kat); border-radius: 0 14px 14px 0;
  background: color-mix(in srgb, var(--kat) 6%, var(--karte));
}
.anw-warum h2 { margin-top: 0; font-size: 1.05rem; color: color-mix(in srgb, var(--kat) 55%, var(--ink)); }
.anw-warum p:last-child { margin-bottom: 0; }

.anw-saetze { list-style: none; margin: 1rem 0 1.8rem; padding: 0; display: grid; gap: .7rem; }
.anw-satz {
  padding: .8rem 1rem; background: var(--karte);
  border: 1px solid var(--linie); border-radius: 14px; box-shadow: var(--schatten-1);
}
.anw-satz .satzpaar { margin-bottom: .4rem; }
.anw-satz .satzpaar .ziel { font-size: 1.08rem; font-weight: 600; }
.anw-satz .satzpaar .de { color: var(--ink-2); }
.anw-meta { margin: 0; font-size: .9rem; color: var(--ink-2); line-height: 1.5; }
.anw-register {
  display: inline-block; margin-right: .35rem; padding: .05rem .55rem;
  border-radius: var(--rund-voll); font-size: .78rem; font-weight: 650;
  background: rgba(var(--tint), .08); color: var(--ink-2);
}
.anw-register[data-register="hoeflich"],
.anw-register[data-register="formell"] { background: var(--marke-weich); color: var(--marke-ink); }
.anw-register[data-register="fiktion"] { background: var(--akzent-weich); color: var(--akzent-ink); }
.anw-register[data-register="grob"] { background: var(--fehler-weich); color: var(--fehler-ink); }
.anw-alltag { margin: .45rem 0 0; font-size: .95rem; }
.anw-hinweis { color: var(--ink-2); }
.anw-alltag-titel { color: var(--ink-3); margin-right: .3rem; }

.anw-hinweise { padding-left: 1.2rem; }
.anw-hinweise li { margin-bottom: .55rem; }
.anw-hinweise li::marker { color: var(--kat); }

.anw-probe { margin: .8rem 0 1.8rem; padding-left: 1.4rem; max-width: var(--lesebreite); }
.anw-probe li { margin-bottom: .5rem; }
.anw-probe-satz { padding: .15rem 0; }
.anw-probe summary { cursor: pointer; color: var(--ink); }
.anw-probe summary::marker { color: color-mix(in srgb, var(--kat) 55%, var(--ink)); }
.anw-probe .satzpaar { margin: .4rem 0 .2rem; font-weight: 600; }

.anw-wege { display: grid; gap: 0 2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.anw-links { padding-left: 1.2rem; }
.anw-links li { margin-bottom: .35rem; }
.anw-herkunft { margin-top: 2rem; font-size: .92rem; }
@media (prefers-reduced-motion: reduce) {
  .anw-chip { transition: none; }
  .anw-chip:hover, .anw-chip:focus-visible { transform: none; }
}
.fs-seite .sp-karte { align-items: flex-start; }

/* ==========================================================================
   Üben: Heute-Karte, Tagesstand, Fokus und Ergebnis
   ==========================================================================

   Nur vorhandene Tokens. Die Startansicht ist auf dem Telefon eine Spalte —
   Heute, Übungsarten, freie Auswahl, Tagesstand — und ab 60rem zwei: links
   Heute und die Übungsarten, rechts Ziel, Woche und Serie. Während einer
   Runde (`body.ueben-fokus`) steht nur die Aufgabe da. */

.ueben-start { display: grid; gap: 1.4rem; margin-top: 1.2rem; }
.ueben-haupt, .ueben-neben { min-width: 0; }
@media (min-width: 60rem) {
  .ueben-start { grid-template-columns: minmax(0, 1fr) 19rem; align-items: start; }
  .ueben-neben { position: sticky; top: 5.5rem; }
}

/* Die eine Vorgabe: eine Karte mit Akzentkante und dem Grund als Zahl. */
.ueben-heute { border-left: 4px solid var(--marke); }
/* Waehrend des Ladens (ueben.js setzt `data-geladen`): der Inhalt unter dem
   Titel unsichtbar, die Karte schon so hoch wie fuer einen neuen Besucher —
   sonst springt die Seite, wenn Ratzeile und Knoepfe kommen. Nur mit
   Skript (html[data-js]); ohne bleibt die Karte, wie sie im HTML steht. */
html[data-js] .ueben-heute:not([data-geladen]) { min-height: 24rem; }
html[data-js] .ueben-heute:not([data-geladen]) > :not(.marke-schild):not(.ueben-heute-grund) { visibility: hidden; }
@media (min-width: 40rem) {
  html[data-js] .ueben-heute:not([data-geladen]) { min-height: 17rem; }
}
.ueben-heute .marke-schild { margin-bottom: .35rem; }
.ueben-heute-grund {
  margin: 0 0 .25rem; font-weight: 600; font-size: 1.05rem; color: var(--ink);
}
.ueben-heute-rat { margin: .7rem 0 0; color: var(--ink-2); max-width: var(--lesebreite); }
.ueben-heute-knoepfe {
  display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem;
}
.ueben-heute-knoepfe .knopf { min-height: 3rem; }
.knopf-breit { flex: 1 1 14rem; }

/* --- Heute zuerst, kompakt (Analyse Uebungsseite, Oktober 2026) ----------- */
/* Die Statuszeile: Tagesziel, Serie, Woche und Glimo von heute als Chips,
   ein Verweis auf „Dein Tag". Nur auf dem Telefon — am Rechner steht der
   Tagesstand daneben. Glimo in Bernstein, der Rest in der Handlungsfarbe. */
.ueben-status {
  display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .2rem;
  text-decoration: none; color: inherit;
}
.ueben-status[hidden] { display: none; }
/* Kopf, Statuszeile und Heute-Karte enger zusammen: Der erste Startknopf
   soll auf dem Telefon im oberen Drittel stehen (Ziel ≤ 360 px). */
.ueben-seite > .seitenkopf { padding: 1.5rem 0 .6rem; }
.ueben-seite .ueben-status + .ueben-start { margin-top: .7rem; }
.ueben-chip {
  display: inline-flex; align-items: center; min-height: 2rem;
  padding: .2rem .7rem; border-radius: var(--rund-voll);
  background: var(--marke-weich); color: var(--marke-ink);
  font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.ueben-chip-glimo { background: var(--akzent-weich); color: var(--akzent-ink); }
@media (min-width: 900px) { .ueben-status { display: none !important; } }

.ueben-heute-zusatz { margin: .5rem 0 0; color: var(--akzent-ink); }
.ueben-immer-schreiben {
  display: flex; align-items: center; gap: .5rem; min-height: 2.75rem;
  margin-top: .6rem; font-size: .92rem; color: var(--ink-2); cursor: pointer;
}
.ueben-immer-schreiben[hidden] { display: none; }
.ueben-immer-schreiben input { width: 1.2rem; height: 1.2rem; accent-color: var(--marke); }

/* „Kurz und gezielt" als Raster: zwei Spalten auf dem Telefon, vier ab
   900 px, alle Kacheln gleich hoch — mit einem Kurzsatz sind sie es auch
   vom Inhalt her. „Mehr" bleibt die Liste darunter. */
.modusgruppe:not(.modusgruppe-mehr) .modusliste {
  grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch;
}
@media (min-width: 900px) {
  .modusgruppe:not(.modusgruppe-mehr) .modusliste {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.modusgruppe:not(.modusgruppe-mehr) .modus {
  display: flex; flex-direction: column; padding: .8rem .85rem; height: 100%;
}
.modusgruppe:not(.modusgruppe-mehr) .modus .modus-dauer { margin-top: auto; align-self: flex-start; }
.modusgruppe:not(.modusgruppe-mehr) .modus > span:not(.modus-dauer) {
  margin-bottom: .45rem; line-height: 1.35;
}

/* Glimo und Coins in „Dein Tag" — nur Anzeige. */
.ueben-glimo { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--linie); }
.ueben-glimo[hidden], .ueben-coins[hidden] { display: none; }
.ueben-glimo-kopf { display: flex; align-items: center; gap: .45rem; margin: 0 0 .4rem; }
.ueben-glimo-rest { margin: .35rem 0 0; }
.ueben-coins { margin: .5rem 0 0; }
.ueben-speicher { margin: 1rem 0 0; font-size: .85rem; }
.ueben-warum { margin-top: .9rem; }
.ueben-warum > summary,
.ueben-offline > summary,
.modusgruppe-mehr > summary,
.freiwahl > summary {
  cursor: pointer; min-height: 2.75rem; display: flex; align-items: center;
  gap: .5rem; list-style: none;
}
.ueben-warum > summary::-webkit-details-marker,
.ueben-offline > summary::-webkit-details-marker,
.modusgruppe-mehr > summary::-webkit-details-marker,
.freiwahl > summary::-webkit-details-marker { display: none; }
.ueben-warum > summary::before,
.ueben-offline > summary::before,
.modusgruppe-mehr > summary::before,
.freiwahl > summary::before {
  content: "\203A"; display: inline-block; width: .8em; flex: none;
  color: var(--ink-3); transition: transform .15s;
}
.ueben-warum[open] > summary::before,
.ueben-offline[open] > summary::before,
.modusgruppe-mehr[open] > summary::before,
.freiwahl[open] > summary::before { transform: rotate(90deg); }
.ueben-warum > summary { font-size: .9rem; color: var(--ink-2); }
.ueben-warum p { margin: .3rem 0 0; font-size: .92rem; color: var(--ink-2);
                 max-width: var(--lesebreite); }

.ueben-arten-titel { margin: 2rem 0 .8rem; }
.modusgruppe-mehr { margin-top: 1.4rem; }
.modusgruppe-mehr > summary { margin-bottom: .5rem; }
.modus .modus-dauer {
  display: table; margin-top: .55rem; padding: .1rem .6rem;
  border-radius: var(--rund-voll); background: var(--karte-2);
  border: 1px solid var(--linie); color: var(--ink-2); font-size: .8rem;
  font-variant-numeric: tabular-nums;
}

.freiwahl { margin-top: 1.6rem; }
.freiwahl > summary { flex-wrap: wrap; row-gap: .1rem; }
.freiwahl-titel { font-weight: 600; color: var(--ink); }
.freiwahl-stand { flex-basis: 100%; padding-left: 1.3em; font-size: .88rem; }
.freiwahl[open] > summary { margin-bottom: 1rem; }
.freiwahl-unter { margin: 1.4rem 0 .2rem; font-size: 1rem; }

/* Ziel, Woche, Serie — dieselben Wochenfelder wie auf der Fortschrittsseite. */
.ueben-tagesstand p { margin: 0; }
.ueben-ziel-zeile { font-weight: 600; color: var(--ink); }
.ueben-tagesstand .fortschrittsband { display: block; margin: .5rem 0 .3rem; height: 8px; }
.ueben-tagesstand .wochenreihe { margin: .9rem 0 .35rem; gap: .25rem; }
.ueben-tagesstand .wochentag { padding: .4rem .1rem; }
.ueben-serie { margin-top: .9rem !important; font-weight: 600; color: var(--ink); }
.ueben-zielwahl-titel { margin-top: 1rem !important; font-size: .88rem; color: var(--ink-2); }
.ueben-zielwahl { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .35rem; }
.ueben-zielwahl .knopf { min-width: 3.2rem; min-height: 2.75rem; }
.ueben-zielwahl [aria-pressed="true"] {
  background: var(--marke); border-color: var(--marke); color: var(--knopf-ink);
}

.ueben-unten { margin-top: 2.2rem; }
.ueben-offline { margin-top: 1rem; }
.ueben-offline > summary { color: var(--ink-2); font-size: .92rem; }
.ueben-offline [data-rolle="mitnehmen"] { margin-top: .4rem; }
/* Weitere Paare, und was schon auf dem Geraet liegt (assets/js/offline.js). */
.mitnehmen-weitere { margin-top: .8rem; }
.mitnehmen-weitere > summary { cursor: pointer; padding: .65rem 0;
                               color: var(--ink-2); font-size: .92rem; }
.mitnehmen-zeile { display: flex; flex-wrap: wrap; align-items: center;
                   gap: .5rem; margin: .5rem 0 0; }
.mitnehmen-zeile select { flex: 0 1 22rem; min-width: 0; max-width: 100%; }
.mitnehmen-titel { margin: 1rem 0 .3rem; font-weight: 600; color: var(--ink); }
.mitnehmen-paare { list-style: none; margin: 0; padding: 0; }
.mitnehmen-paare li { display: flex; flex-wrap: wrap; align-items: center;
                      justify-content: space-between; gap: .4rem .8rem;
                      padding: .35rem 0; border-bottom: 1px solid var(--linie); }
.mitnehmen-paare li > span { min-width: 0; overflow-wrap: anywhere; }

/* --- Fokus: eine Aufgabe, sonst nichts ---------------------------------- */
.ueben-fokus .ueben-seite > .seitenkopf,
.ueben-fokus .ueben-unten,
.ueben-fokus .ueben-seite .werbeplatz { display: none; }
[data-rolle="lauf"] { scroll-margin-top: 5rem; }
.ueben-lauf-hinweis { margin: .8rem 0 0; max-width: 46rem; font-size: .92rem; color: var(--ink-2); }
@media (min-width: 60rem) {
  .ueben-fokus [data-rolle="lauf"] > * { margin-left: auto; margin-right: auto; }
}
/* Die Karte fuellt den Bildschirm, damit der Seitenfuss nicht direkt unter
   einer kurzen Aufgabe ins Bild rutscht; der Fuss mit dem Knopf bleibt
   unten in der Daumenzone. */
.ueben-fokus .uebung-karte {
  display: flex; flex-direction: column; margin-top: .7rem;
  min-height: calc(100vh - 9rem); min-height: calc(100dvh - 9rem);
}
.ueben-fokus .uebung-koerper { flex: 1 0 auto; }
@media (max-width: 780px) {
  .ueben-fokus .uebung-karte {
    min-height: calc(100vh - 13rem); min-height: calc(100dvh - 13rem);
  }
}
.uebung-kopf[data-fokus] { gap: .5rem .7rem; padding: .45rem .9rem .45rem .45rem; }
.uebung-zu {
  display: inline-grid; place-items: center; flex: none;
  width: 2.75rem; height: 2.75rem; border-radius: var(--rund-voll);
  background: none; border: 1px solid transparent; color: var(--ink-2);
  cursor: pointer;
}
.uebung-zu:hover { background: var(--karte-2); color: var(--ink); }
.uebung-zu:focus-visible { outline: 2px solid var(--marke); outline-offset: 1px; }
.uebung-zu svg { width: 20px; height: 20px; }
.uebung-name { color: var(--ink); font-weight: 600; margin-right: auto; }
.uebung-uhr { color: var(--ink); font-variant-numeric: tabular-nums; }
/* Auf dem Telefon passt die Aufgabenart nicht mehr in die Zeile — dort
   stehen nur Schliessen, Name und Stand; die Art sagt die Aufgabe selbst. */
@media (max-width: 30rem) {
  .uebung-kopf[data-fokus] .uebung-art,
  .uebung-kopf[data-fokus] .uebung-trenner { display: none; }
}
.uebung-kopf[data-fokus] ~ .uebung-fuss .knopf { flex: 1 1 auto; min-height: 3rem; }

/* Die Runde als Punkte. Richtig: gefuellt; noch nicht: eckig mit Rand —
   die Form sagt es auch ohne Farbe; laufend: Ring in der Markenfarbe. */
.rundenpunkte {
  display: flex; flex-wrap: wrap; gap: 5px; list-style: none;
  margin: 0; padding: .55rem 1.1rem; border-bottom: 1px solid var(--linie);
}
.rundenpunkte li {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--linie-kraeftig); background: transparent;
  transition: transform .2s, background .2s;
}
.rundenpunkte li[data-stand="jetzt"] { border: 2px solid var(--marke); transform: scale(1.25); }
.rundenpunkte li[data-stand="richtig"] { background: var(--ok); border-color: var(--ok); }
.rundenpunkte li[data-stand="falsch"] {
  border-radius: 2px; border: 2px solid var(--fehler); background: var(--fehler-weich);
}

.aufloesung-kurz { padding-top: .7rem; padding-bottom: .7rem; }
.aufloesung-kurz .satzpaar { margin-bottom: 0; }

/* --- Das Ergebnis ---------------------------------------------------------- */
.ueben-ergebnis .ergebnis-titel { margin: 0 0 1rem; font-size: 1.35rem; }
.ueben-ergebnis .kennzahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.ueben-ergebnis .kennzahl { padding: .8rem .4rem; }
.ueben-ergebnis .kennzahl b { font-size: 1.8rem; }
.ueben-ergebnis .kennzahl[data-art="richtig"] b { color: var(--ok-ink); }
.ueben-ergebnis .kennzahl[data-art="falsch"] b { color: var(--fehler-ink); }
.ergebnis-zeile { margin: .7rem 0 0; text-align: center; }
.ueben-daneben {
  margin-top: 1.1rem; border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--karte-2); padding: 0 .9rem;
}
.ueben-daneben > summary {
  cursor: pointer; min-height: 2.75rem; display: flex; align-items: center;
  gap: .5rem; font-weight: 600;
}
.zahlmarke {
  display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem;
  padding: 0 .4rem; border-radius: var(--rund-voll);
  background: var(--fehler-weich); color: var(--fehler-ink); font-size: .85rem;
}
.fehlerliste { list-style: none; margin: 0 0 .8rem; padding: 0; }
.fehlerliste li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .5rem;
  align-items: baseline; padding: .5rem 0; border-top: 1px solid var(--linie);
}
.fehlerliste svg { width: 16px; height: 16px; color: var(--fehler-ink); align-self: center; }
.fl-frage { color: var(--ink-2); overflow-wrap: anywhere; }
.fl-pfeil { display: none; }
.fl-loesung { grid-column: 2; color: var(--ink); overflow-wrap: anywhere; }
@media (min-width: 40rem) {
  .fehlerliste li { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); }
  .fl-pfeil { display: inline; color: var(--ink-3); }
  .fl-loesung { grid-column: auto; }
}
.ueben-ergebnis .etappe { margin-top: 1.1rem; font-size: .95rem; }
.ueben-ergebnis .etappe .muno { width: 64px; height: 64px; }
.ergebnis-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.ergebnis-knoepfe .knopf { flex: 1 1 14rem; min-height: 3rem; }
.ergebnis-wege { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 0; }
.ergebnis-wege .knopf-still { min-height: 2.75rem; }
@media (prefers-reduced-motion: reduce) {
  .rundenpunkte li, .ueben-warum > summary::before, .freiwahl > summary::before,
  .ueben-offline > summary::before, .modusgruppe-mehr > summary::before { transition: none; }
}


/* --- Infokarten: Ausnahmen und Besonderheiten (tools/infokarten.py) -----
   Vorher standen die Besonderheiten als loser Fliesstext auf dem Grund:
   fette Zeile, Absatz, Beispielsatz, dazwischen Haarlinien. Jetzt ist jeder
   Hinweis eine Karte mit derselben Gestalt — Etikett, Titel, Text,
   abgesetztes Beispiel, bei Ausnahmen das Warum. Gleiche Gestalt heisst:
   Man sieht sofort, wo ein Hinweis anfaengt und endet, und drei Hinweise
   lassen sich vergleichen.

   Dieselbe Flaechensprache wie die Formkarte und die Tafeln: Karte, Linie,
   `--rund-l`, `--schatten-1`, ein leicht getoenter Kopf. Die Art traegt
   einen Akzent — Besonderheit ruhig (`--marke`), Ausnahme im Warnton
   (`--warn`) —, aber nie allein: Jede Karte nennt ihre Art mit Symbol und
   Wort. Die Tinten sind die vorhandenen (`--marke-ink`, `--akzent-ink`,
   `--ink`, `--ink-2`), hell wie dunkel ueber 4.5:1 auf der Karte. */
.infoblock {
  --ib-farbe: var(--marke); --ib-ink: var(--marke-ink);
  --ib-weich: var(--marke-weich);
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund-l); box-shadow: var(--schatten-1);
  margin: 1rem 0; max-width: 46rem; overflow: hidden;
}
.infoblock[data-art="ausnahme"] {
  --ib-farbe: var(--warn); --ib-ink: var(--akzent-ink);
  --ib-weich: var(--warn-weich);
}
/* Der Kopf: eigenes Symbol, Titel, Zaehler als Schild, ein gezeichneter
   Pfeil statt des Dreiecks des Browsers — und eine Trefferflaeche ueber die
   ganze Breite, mindestens 52 Pixel hoch. */
.ib-kopf {
  display: flex; align-items: center; gap: .7rem;
  min-height: 3.25rem; padding: .65rem .9rem .65rem .8rem;
  cursor: pointer; list-style: none;
  font-family: var(--schrift-titel); font-weight: 600; font-size: 1.05rem;
  line-height: 1.35; color: var(--ink);
  transition: background-color .16s ease;
}
.ib-kopf::-webkit-details-marker { display: none; }
.ib-kopf::marker { content: ''; }
.ib-kopf:hover { background: color-mix(in srgb, var(--ib-farbe) 6%, var(--karte)); }
.ib-kopf:focus-visible {
  outline: 3px solid var(--marke); outline-offset: -3px;
  border-radius: var(--rund-l);
}
.infoblock[open] > .ib-kopf {
  background: color-mix(in srgb, var(--ib-farbe) 8%, var(--karte));
  border-bottom: 1px solid var(--linie);
}
.ib-symbol {
  flex: none; display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--ib-weich); color: var(--ib-ink);
}
.ib-symbol svg { width: 18px; height: 18px; }
.ib-titel { flex: 1 1 auto; min-width: 0; }
.ib-zahl {
  flex: none; min-width: 1.75rem; padding: .14rem .6rem;
  border-radius: var(--rund-voll); text-align: center;
  font-family: var(--schrift); font-size: .82rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--ib-weich); color: var(--ib-ink);
}
.ib-pfeil {
  flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--bg-tief);
}
.ib-pfeil::before {
  content: ''; width: .48rem; height: .48rem;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.infoblock[open] .ib-pfeil::before { transform: translateY(2px) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) {
  .ib-kopf, .ib-pfeil::before { transition: none; }
}

.infokarten {
  list-style: none; margin: 0; padding: 1rem;
  display: grid; gap: .85rem; background: var(--karte-2);
}
.infokarte {
  --ik-farbe: var(--marke); --ik-ink: var(--marke-ink);
  --ik-weich: var(--marke-weich);
  background: var(--karte); border: 1px solid var(--linie);
  border-left: 4px solid var(--ik-farbe); border-radius: var(--rund);
  box-shadow: var(--schatten-1); padding: .95rem 1.1rem 1.05rem;
}
.infokarte[data-art="ausnahme"] {
  --ik-farbe: var(--warn); --ik-ink: var(--akzent-ink);
  --ik-weich: var(--warn-weich);
}
.ik-etikett {
  display: inline-flex; align-items: center; gap: .45rem;
  margin: 0 0 .5rem; font-size: .8rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ik-ink);
}
.ik-symbol {
  display: grid; place-items: center; flex: none;
  width: 1.55rem; height: 1.55rem; border-radius: 50%;
  background: var(--ik-weich);
}
.ik-symbol svg { width: 15px; height: 15px; }
.ik-titel {
  margin: 0 0 .35rem; max-width: var(--lesebreite);
  font-family: var(--schrift-titel); font-weight: 600; font-size: 1.06rem;
  line-height: 1.42; color: var(--ink);
}
.ik-text {
  margin: 0; max-width: var(--lesebreite);
  color: var(--ink-2); line-height: 1.62;
}
/* „Wenn“, „dann“, „Warum?“ — die Gelenke einer Ausnahme, in der Tinte
   ihrer Art und fett: Wer nur die Anfaenge der Zeilen liest, hat die
   Gestalt schon. */
.ik-wort { font-family: var(--schrift); font-weight: 700; color: var(--ik-ink); }
/* Das Beispiel steht in einem eigenen Feld, wie das Beispiel einer Regel:
   abgesetzt, nicht nur durch eine Haarlinie getrennt. */
.ik-beispiel {
  margin: .85rem 0 0; padding: .7rem .85rem; max-width: var(--lesebreite);
  border-radius: var(--rund-s);
  background: color-mix(in srgb, var(--ik-farbe, var(--kat, var(--marke))) 7%, var(--karte));
  border-left: 3px solid color-mix(in srgb, var(--ik-farbe, var(--kat, var(--marke))) 55%, var(--karte));
}
.ik-beispiel .satzpaar { margin: 0; }
.vertiefung-inhalt .ik-beispiel + .ik-beispiel { margin-top: .6rem; }
.ik-warum {
  margin: .8rem 0 0; padding-top: .7rem; max-width: var(--lesebreite);
  border-top: 1px dashed var(--linie-kraeftig);
  color: var(--ink-2); font-size: .95rem; line-height: 1.58;
}
.ik-warum .ik-wort { color: var(--ink); }

/* Zielsprachliche Woerter im Erklaertext. `lang` steht am Element (fuer die
   Vorlesestimme), die Gestalt sagt es dem Auge: kursiv und in einer eigenen,
   ruhigen Tinte — so hebt sich „hardly" aus „heißt kaum" heraus, ohne dass
   der Absatz bunt wird. Die Kursive traegt die Unterscheidung auch ohne
   Farbsehen. Japanisch, Chinesisch, Koreanisch und Hindi bekommen keine
   kuenstliche Schraegschrift; dort unterscheidet schon die Schrift. */
:root { --zielwort: #0f5e57; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) { --zielwort: #7fd8cb; }
}
:root[data-thema="dunkel"] { --zielwort: #7fd8cb; }
:is(.ik-titel, .ik-text, .ik-warum, .vertiefung-inhalt > p,
    .regel-text, .kasten-falle > p) > .ziel,
:is(.ik-titel, .ik-text, .ik-warum, .vertiefung-inhalt > p,
    .regel-text, .kasten-falle > p) > :is(em, b, i) > .ziel {
  font-style: italic; font-weight: 500; color: var(--zielwort);
}
:is(.ik-titel, .ik-text, .ik-warum, .vertiefung-inhalt > p,
    .regel-text, .kasten-falle > p) .ziel:is(:lang(ja), :lang(zh), :lang(ko), :lang(hi)) {
  font-style: normal;
}

@media (max-width: 780px) {
  .infoblock { border-radius: var(--rund); }
  .ib-kopf { font-size: 1rem; padding: .6rem .7rem; gap: .55rem; }
  .ib-kopf:focus-visible { border-radius: var(--rund); }
  .infokarten { padding: .7rem; gap: .7rem; }
  .infokarte { padding: .85rem .9rem .95rem; }
  .ik-beispiel { padding: .65rem .7rem; }
}


/* --- Der Reiter „Wörterbuch“ im Kopf (tools/seiten_woerterbuch.py) -------
   Steht ausserhalb des Menues wie der Hell/Dunkel-Schalter, damit er auf
   dem Telefon nicht hinter dem Menueknopf verschwindet. Nur mit Zeichen;
   das Wort bleibt als Name fuer Vorleser (siehe „Der Kopf ist auf dem
   Rechner eine Zeile").
   Alles Weitere steht in assets/css/woerterbuch.css. */
.wb-kopf { flex: none; min-height: 2.75rem; min-width: 2.75rem; justify-content: center; }
.wb-kopf svg { width: 19px; height: 19px; }
.wb-kopf[aria-current="page"] { background: var(--marke-weich); color: var(--marke-ink); border-color: var(--marke); }
.marke + .wb-kopf { margin-left: auto; }
@media (max-width: 780px) {
  .wb-kopf { order: 1; margin-left: auto; }
  .wb-kopf + .thema-oben { margin-left: 0; }
}
@media print { .wb-kopf { display: none !important; } }

/* --- Sprache im Einsatz: Stand im Feld (assets/js/anwendung.js) -----------
   Auf der Startkarte und auf den Feldseiten derselbe schmale Balken: dunkel
   der sichere Teil, hell der geuebte. Ohne Skript `hidden`. */
.anw-chip-stand { display: block; margin-top: .35rem; }
.anw-balken {
  display: flex; height: .4rem; overflow: hidden;
  border-radius: var(--rund-voll); background: rgba(var(--tint), .1);
}
.anw-balken-sicher { background: var(--kat); width: 0; }
.anw-balken-gesehen { background: color-mix(in srgb, var(--kat) 40%, transparent); width: 0; }
.anw-chip-stand[hidden], .anw-stand[hidden] { display: none; }

/* --- Glimo: Punkte und Stufen (assets/js/glimo.js) -------------------------
   Die Zahl am Punkt „Mein Fortschritt", die Karte oben auf der
   Fortschrittsseite, „+N" nach einer Runde und die Feier beim Aufstieg.
   Nur Farben aus den Themenvariablen — hell und dunkel stimmen damit von
   selbst. */
.glimo-chip {
  display: inline-flex; align-items: center; gap: .22rem;
  margin-left: .35rem; padding: .05rem .42rem .05rem .3rem;
  border-radius: var(--rund-voll, 999px); background: var(--bg-tief);
  color: var(--ink-2); font-size: .78rem; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1.4; vertical-align: middle;
}
.glimo-chip img { width: 16px; height: 16px; display: block; }
/* Im Kopf darf die Zahl den Punkt nicht hoeher machen, sonst rueckt die
   ganze Zeile. */
.hauptnavi .glimo-chip {
  margin-block: -.3rem; padding: .08rem .38rem .08rem .26rem;
  font-size: .72rem; line-height: 1.15;
}
.hauptnavi .glimo-chip img { width: 14px; height: 14px; }
/* Zwischen Telefon (Leiste unten) und breitem Bildschirm ist im Kopf kein
   Platz: Dort bleibt die Zahl weg, statt die Zeile umbrechen zu lassen. */
@media (max-width: 1119px) { .hauptnavi .glimo-chip { display: none; } }
.tableiste a[data-glimo] { position: relative; }
.tableiste .glimo-chip {
  position: absolute; top: .05rem; left: calc(50% + 4px); margin: 0;
  padding: 0 .3rem; font-size: .62rem; line-height: 1.35;
  background: var(--karte); border: 1px solid var(--linie);
}
.tableiste .glimo-chip img { display: none; }
.tableiste a span.glimo-chip { max-width: none; }

.glimo-karte[hidden] { display: none; }
.glimo-karte { margin-bottom: 1.2rem; }
.glimo-kopf { display: flex; align-items: center; gap: 1rem; }
.glimo-stein {
  width: 72px; height: 72px; flex: none;
  filter: drop-shadow(0 4px 8px rgba(15, 23, 42, .18));
}
.glimo-zahlen { min-width: 0; }
.glimo-titel { margin: 0; font-size: .92rem; font-weight: 600; color: var(--ink-2); }
.glimo-summe { margin: .05rem 0 0; font-size: 1.05rem; color: var(--ink-2); }
.glimo-summe b {
  font-size: 1.75rem; color: var(--ink); font-variant-numeric: tabular-nums;
}
.glimo-stufe { margin: .1rem 0 0; color: var(--ink-2); }
.glimo-stufe b { color: var(--ink); }
.glimo-balken {
  margin-top: .9rem; height: .6rem; overflow: hidden;
  border-radius: var(--rund-voll, 999px); background: rgba(var(--tint), .12);
}
.glimo-balken i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--marke), var(--ok));
}
.glimo-noch { margin: .45rem 0 0; font-weight: 600; color: var(--ink); }
.glimo-heute { margin: .25rem 0 0; }
.glimo-leer { margin: .8rem 0 0; color: var(--ink-2); }
.glimo-sprachen {
  list-style: none; margin: .4rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: .3rem .9rem;
}
.glimo-sprachen li {
  display: flex; justify-content: space-between; gap: .6rem;
  padding: .3rem 0; border-bottom: 1px solid var(--linie); color: var(--ink-2);
}
.glimo-sprachen b { color: var(--ink); font-variant-numeric: tabular-nums; }
.glimo-regeln { margin: .7rem 0 0; padding-left: 1.2rem; color: var(--ink-2); }
.glimo-regeln li + li { margin-top: .3rem; }
.glimo-leiter {
  list-style: none; margin: .5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr));
  gap: .5rem;
}
.glimo-leiter li {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .45rem .3rem; border-radius: .8rem; text-align: center;
  background: rgba(var(--tint), .04); color: var(--ink-2); font-size: .85rem;
}
.glimo-leiter li img { width: 32px; height: 32px; filter: grayscale(.85); opacity: .55; }
.glimo-leiter li.glimo-erreicht img { filter: none; opacity: 1; }
.glimo-leiter li[aria-current] { outline: 2px solid var(--marke); outline-offset: -2px; }
.glimo-leiter-name { font-weight: 700; color: var(--ink); }
.glimo-leiter-ab { font-size: .78rem; font-variant-numeric: tabular-nums; }

.glimo-toast {
  position: fixed; z-index: 55; left: 50%; bottom: 1.4rem;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: .45rem;
  padding: .5rem 1rem .5rem .6rem; border-radius: var(--rund-voll, 999px);
  background: var(--karte); color: var(--ink); border: 1px solid var(--linie);
  box-shadow: var(--schatten-3); font-weight: 700;
  transition: opacity .25s ease;
}
.glimo-toast img { width: 24px; height: 24px; }
.glimo-toast.glimo-weg { opacity: 0; }
/* Auf der Startseite oben: unten steht dort der Knopf „Weiter mit …“. */
html body .glimo-toast.glimo-toast-oben {
  top: calc(4.6rem + env(safe-area-inset-top)); bottom: auto;
}
@media (max-width: 780px) {
  body:has(.tableiste) .glimo-toast,
  body:has(.tableiste) .glimo-feier { bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
}

.glimo-feier {
  position: fixed; z-index: 60; left: 50%; bottom: 1.6rem;
  transform: translateX(-50%);
  width: min(22rem, calc(100vw - 2rem)); box-sizing: border-box;
  padding: 1.1rem 1.2rem 1rem; border-radius: 1.2rem; text-align: center;
  background: var(--karte); color: var(--ink); border: 1px solid var(--linie);
  box-shadow: var(--schatten-3);
}
.glimo-feier-bild { display: flex; align-items: flex-end; justify-content: center; gap: .4rem; }
.glimo-feier span.muno.muno-foto { width: 104px; }
.glimo-feier-stein { width: 80px; height: 80px; filter: drop-shadow(0 6px 10px rgba(15, 23, 42, .2)); }
.glimo-feier-titel { margin: .6rem 0 .2rem; font-size: 1.2rem; font-weight: 800; }
.glimo-feier-text { margin: 0; color: var(--ink-2); }
.glimo-feier .hero-knoepfe { justify-content: center; margin: .8rem 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .glimo-toast { animation: glimo-rein .3s ease-out both; }
  .glimo-feier { animation: glimo-rein .4s cubic-bezier(.2, .9, .3, 1.2) both; }
  .glimo-feier-stein { animation: glimo-funkeln 1.6s ease-in-out 1; }
}
@keyframes glimo-rein {
  from { opacity: 0; transform: translate(-50%, 10px) scale(.96); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes glimo-funkeln {
  0%, 100% { transform: none; }
  40% { transform: scale(1.12) rotate(-6deg); }
  70% { transform: scale(.98) rotate(3deg); }
}
@media (max-width: 520px) {
  .glimo-stein { width: 56px; height: 56px; }
  .glimo-summe b { font-size: 1.45rem; }
}
@media print { .glimo-toast, .glimo-feier, .glimo-chip { display: none; } }

/* --- Profil, Lingua Coins und Sprachpass (assets/js/belohnung.js) ---------
   Der Pass ist Papier — auch im dunklen Thema: ein heller Bogen mit
   dunkler Tinte, damit Stempel aussehen wie Stempel. Seine Farben stehen
   deshalb fest und nicht in den Themenvariablen; der Kontrast ist fuer
   beide Themen derselbe. */
.glimo-stein-klein { width: 28px; height: 28px; vertical-align: -7px; margin-right: .2rem; }
.bl-avatar {
  --bl-groesse: 72px;
  display: inline-grid; place-items: center; flex: none;
  width: calc(var(--bl-groesse) + 10px); height: calc(var(--bl-groesse) + 10px);
  border-radius: 50%; background: var(--bg-tief);
  box-shadow: inset 0 0 0 2px var(--linie);
}
.bl-avatar img { width: var(--bl-groesse); height: var(--bl-groesse); border-radius: 50%; object-fit: cover; }
.bl-rahmen-minze { background: #bfeedd; box-shadow: inset 0 0 0 4px #2fae86; }
.bl-rahmen-koralle { background: #ffd9cf; box-shadow: inset 0 0 0 4px #e7664e; }
.bl-rahmen-nacht { background: #1e2a4a; box-shadow: inset 0 0 0 4px #7d8fd8; }
.bl-rahmen-gold { background: #fdeebf; box-shadow: inset 0 0 0 4px #c99a1c, 0 0 0 2px #f4d575; }
.bl-rahmen-regenbogen {
  background: conic-gradient(#e2364f, #f0a03a, #f3c63a, #62c27e, #2fbfbf, #3d6fe3, #a777e6, #e2364f);
  box-shadow: none;
}
.bl-coins { display: flex; align-items: center; gap: .35rem; margin: .25rem 0 0; color: var(--ink-2); }
.bl-coins b { color: var(--ink); font-variant-numeric: tabular-nums; }
.bl-kontostand { margin: .4rem 0 0; font-size: .85rem; color: var(--ink-2); }
.bl-wege { margin: .9rem 0 0; flex-wrap: wrap; }
.bl-wege .bl-weg { text-decoration: none; }
.bl-meldung:empty { display: none; }
.bl-meldung { margin: .6rem 0 0; font-weight: 700; color: var(--ok-ink); }
.bl-gruppe { margin-top: 1.6rem; }
.bl-raster {
  list-style: none; margin: .6rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .8rem;
}
.bl-ding {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  padding: .8rem .6rem; text-align: center;
}
.bl-ding > img { width: 88px; height: 88px; border-radius: 50%; background: var(--bg-tief); }
.bl-ding[data-besitz="gesperrt"] > img, .bl-ding[data-besitz="zu_teuer"] > img { filter: grayscale(.7); opacity: .7; }
.bl-ding-name { font-weight: 700; color: var(--ink); }
.bl-ding .knopf {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .4rem .75rem; font-size: .85rem; white-space: nowrap; max-width: 100%;
}
.bl-ding .knopf img { flex: none; }
.bl-hinweis { font-size: .85rem; color: var(--ink-2); }
.bl-titel { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .5rem; }
.bl-titel li {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .55rem .8rem; border: 1px solid var(--linie); border-radius: .8rem;
  background: var(--karte);
}
.bl-titel-name { font-weight: 700; color: var(--ink); }

/* --- Der Shop (Entwurf „Main“ und „Belohnungen“) ---------------------------
   Gold ist die Farbe der Coins: `--akzent` als Rand und Flaeche,
   `--akzent-ink` als Schrift — beide stehen in hell und dunkel in den
   Themenvariablen, der Kontrast stimmt in beiden. Die Plus-Karte und die
   Preisansicht gibt es nur mit ABO (tools/abo.py). */
.bl-kopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.bl-kopfzeile h1 { margin: 0; }
.bl-chip[hidden] { display: none; }
.bl-chip {
  display: inline-flex; align-items: center; gap: .4rem; margin: 0;
  padding: .35rem .9rem; border-radius: var(--rund-voll);
  border: 1px solid var(--akzent); background: var(--akzent-weich);
  color: var(--akzent-ink); font-weight: 600;
}
.bl-chip b { font-variant-numeric: tabular-nums; }
.bl-ueberschrift { margin: 2rem 0 .8rem; }

.bl-shop { display: grid; gap: 1.2rem; }
@media (min-width: 900px) {
  .bl-shop { grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); align-items: start; }
}
.bl-seite { display: grid; gap: 1rem; min-width: 0; }
.bl-profil { margin-bottom: 0; border-color: var(--akzent); }
.bl-kasse-titel { margin: 0; font-size: .9rem; color: var(--ink-2); }
.bl-kasse {
  display: flex; align-items: center; gap: .5rem; margin: .2rem 0 .3rem;
  font-size: 2.6rem; line-height: 1.1; color: var(--akzent-ink);
}
.bl-kasse b { font-weight: 700; font-variant-numeric: tabular-nums; }
.bl-kasse-satz { margin: 0 0 1rem; font-size: .9rem; color: var(--ink-2); line-height: 1.5; }
.bl-ich { padding-top: .9rem; border-top: 1px solid var(--linie); }
.bl-profil .zeile-still { margin: .8rem 0 0; }
.bl-verdienen h2 { margin: 0 0 .7rem; font-size: 1.05rem; }
.bl-wege-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.bl-wege-liste li { display: flex; justify-content: space-between; gap: .8rem; color: var(--ink); }
.bl-wege-liste b { color: var(--akzent-ink); font-variant-numeric: tabular-nums; }

.bl-auslage { margin-top: 0; min-width: 0; }
.bl-reiter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.bl-reiter-knopf {
  min-height: 44px; padding: 0 1.15rem; border-radius: var(--rund-voll);
  border: 1px solid var(--linie-kraeftig); background: var(--karte); color: var(--ink);
  font: inherit; font-weight: 600; cursor: pointer;
}
.bl-reiter-knopf:hover { background: var(--bg-tief); }
.bl-reiter-knopf[aria-selected="true"] {
  background: var(--marke); border-color: var(--marke); color: var(--knopf-ink);
}
.bl-reiter-knopf:focus-visible { outline: 3px solid var(--marke-ink); outline-offset: 2px; }
.bl-tafel[hidden] { display: none; }
.bl-tafel .bl-raster, .bl-tafel .bl-titel { margin-top: 0; }
.bl-raster { grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); }
@media (max-width: 479px) {
  .bl-raster { grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr)); }
  .bl-ding .knopf { white-space: normal; padding-inline: .6rem; }
}
.bl-ding { padding: 1.1rem .8rem; gap: .6rem; border-radius: var(--rund-l); }
.bl-ding-getragen { border: 2px solid var(--ok); }
.bl-ding[data-besitz="gesperrt"] .bl-avatar, .bl-ding[data-besitz="zu_teuer"] .bl-avatar {
  filter: grayscale(.7); opacity: .7;
}
.bl-ding .knopf, .bl-titel .knopf { min-height: 44px; width: 100%; justify-content: center; }
.bl-titel .knopf { width: auto; }
.bl-kaufen.knopf {
  background: transparent; color: var(--akzent-ink); border: 1px solid var(--akzent);
  box-shadow: none;
}
.bl-kaufen.knopf:hover { background: var(--akzent-weich); color: var(--akzent-ink); }
.bl-getragen {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; color: var(--ok-ink);
}
.bl-titel-getragen { border-color: var(--ok) !important; }
.bl-schloss { min-height: 44px; display: inline-flex; align-items: center; text-align: center; }

/* --- Plus: die Karte oben, die Preisansicht, das Angebot nach der Runde -- */
.plus-karte {
  display: grid; gap: 1.4rem; margin: 0 0 1rem;
  border-color: var(--marke); border-radius: var(--rund-l);
}
@media (min-width: 760px) {
  .plus-karte { grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); align-items: center; }
}
.plus-marke {
  display: inline-block; margin: 0 0 .5rem; padding: .2rem .7rem;
  border-radius: var(--rund-voll); background: var(--akzent-weich); color: var(--akzent-ink);
  font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.plus-karte h2 { margin: 0 0 .7rem; font-size: clamp(1.3rem, 3vw, 1.8rem); line-height: 1.25; }
.plus-karte h2 span { display: block; }
.plus-punkte { margin: 0; padding-left: 1.2rem; color: var(--ink-2); line-height: 1.75; }
.plus-karte-preis { display: grid; gap: .6rem; }
.plus-betrag { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; color: var(--ink-2); }
.plus-betrag b { font-size: 2.2rem; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.plus-klein { margin: 0; font-size: .88rem; color: var(--ink-2); }
.plus-mitte { text-align: center; }
.plus-los { width: 100%; min-height: 48px; }

.plus-preise { margin-top: 2.6rem; padding-top: 2rem; border-top: 1px solid var(--linie); scroll-margin-top: 5rem; }
.plus-preise > h2 { margin: 0 0 1.2rem; text-align: center; font-size: clamp(1.5rem, 4vw, 2.2rem); }
.plus-abrechnung {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem;
  width: fit-content; max-width: 100%; margin: 0 auto 1.4rem; padding: .3rem;
  border: 1px solid var(--linie); border-radius: var(--rund-voll); background: var(--karte);
}
.plus-abrechnung input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.plus-abrechnung label {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem;
  border-radius: var(--rund-voll); color: var(--ink-2); cursor: pointer; text-align: center;
}
.plus-abrechnung input:checked + label { background: var(--marke); color: var(--knopf-ink); font-weight: 600; }
.plus-abrechnung input:focus-visible + label { outline: 3px solid var(--marke-ink); outline-offset: 2px; }
.plus-stufen { display: grid; gap: 1.2rem; max-width: 62rem; margin: 0 auto; }
@media (min-width: 760px) { .plus-stufen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plus-stufe { display: flex; flex-direction: column; gap: 1rem; border-radius: var(--rund-l); }
.plus-stufe h3 { margin: 0; font-size: 1.3rem; }
.plus-stufe .plus-los { margin-top: auto; }
.plus-empfohlen { border: 2px solid var(--marke); }
.plus-stufe-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; }
.plus-abzeichen {
  padding: .2rem .7rem; border-radius: var(--rund-voll);
  background: var(--akzent-weich); color: var(--akzent-ink); font-size: .82rem; font-weight: 700;
}
.plus-nur-jahr, .plus-nur-monat { display: grid; gap: .25rem; }
.plus-form:has(#plus-plan-monat:checked) .plus-nur-jahr,
.plus-form:has(#plus-plan-jahr:checked) .plus-nur-monat { display: none; }
.plus-zusagen {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.6rem;
  margin: 1.4rem 0 0; padding: 0; font-size: .95rem;
}
.plus-fragen { max-width: 62rem; margin: 1.8rem auto 0; display: grid; gap: .6rem; }
.plus-fragen h3 { margin: 0 0 .2rem; font-size: 1.15rem; }
.plus-frage {
  padding: .9rem 1.2rem; border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--karte);
}
.plus-frage summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.plus-frage p { margin: .7rem 0 0; color: var(--ink-2); line-height: 1.6; }

.plus-nachrunde[hidden] { display: none; }
.plus-nachrunde {
  display: grid; gap: 1rem; max-width: 46rem; margin: 1rem auto;
  border-color: var(--marke); border-radius: var(--rund-l);
}
@media (min-width: 640px) {
  .plus-nachrunde { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .plus-nachrunde-regel { grid-column: 1 / -1; }
}
.plus-nachrunde .plus-marke { margin-bottom: .3rem; }
.plus-nachrunde-titel { margin: 0 0 .3rem; font-weight: 600; color: var(--ink); }
.plus-nachrunde-knoepfe { display: grid; gap: .5rem; margin: 0; }
.plus-nachrunde-knoepfe .knopf { min-height: 44px; }
.plus-nachrunde-regel { text-align: center; }

.bl-paesse, [data-rolle="sprachpaesse"] { display: grid; gap: 1rem; }
.bl-pass {
  border-radius: 1rem; background: #fbf6ea; color: #2b2416;
  border: 1px solid #e3d8bf; box-shadow: var(--schatten-2); overflow: hidden;
}
.bl-pass-kopf {
  display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem;
  cursor: pointer; list-style: none;
}
.bl-pass-kopf::-webkit-details-marker { display: none; }
.bl-pass-kopf:focus-visible { outline: 2px solid #1d4ed8; outline-offset: -2px; }
.bl-pass-einband { width: 60px; height: auto; flex: none; filter: drop-shadow(0 3px 5px rgba(43, 36, 22, .25)); }
.bl-pass-titel { display: grid; gap: .1rem; }
.bl-pass-titel b { font-size: 1.1rem; color: #2b2416; }
.bl-pass-zahl { font-weight: 700; color: #5b4a24; }
.bl-pass-einband-satz { font-size: .85rem; color: #5b4a24; }
.bl-felder {
  list-style: none; margin: 0; padding: 1rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr)); gap: .9rem .6rem;
  border-top: 1px dashed #d6c8a4;
  background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(91, 74, 36, .06) 27px 28px);
}
.bl-feld { display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center; }
.bl-platz {
  display: grid; place-items: center; width: 84px; height: 84px; position: relative;
  border-radius: 50%; border: 2px dashed #cbbb93; color: #a8996f;
}
.bl-gestempelt .bl-platz { border-color: transparent; }
.bl-leer-svg { width: 34px; height: 34px; }
.bl-leer-stufe { position: absolute; font-size: 1.15rem; color: #8f805a; }
.bl-stempel-svg { width: 84px; height: 84px; mix-blend-mode: multiply; }
.bl-feld-name { font-weight: 700; font-size: .85rem; color: #2b2416; line-height: 1.25; }
.bl-feld-stand { font-size: .78rem; color: #5b4a24; font-variant-numeric: tabular-nums; }
.bl-pass-regeln { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .bl-gestempelt .bl-stempel-svg { animation: bl-stempeln .45s ease-out both; }
}
@keyframes bl-stempeln {
  from { opacity: 0; transform: scale(1.35); }
  to { opacity: 1; }
}
@media (max-width: 520px) {
  .bl-felder { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: .8rem .5rem; }
  .bl-platz, .bl-stempel-svg { width: 72px; height: 72px; }
}

/* === Layout auf 320 Pixeln (tools/layout_pruefen.mjs, Befunde aus Bau 59) ===
   Ein abgeschlossener Block: Er stuetzt sich auf keine Regel, die erst nach
   Bau 59 dazukam, und gehoert ans Ende der Datei, damit er gleich spezifische
   Regeln weiter oben ueberstimmt.

   Fast alle Befunde haben dieselbe Ursache: Ein Grid- oder Flex-Kind hat
   `min-width: auto` und ist damit mindestens so breit wie sein laengstes
   unteilbares Stueck — ein deutsches Kompositum, eine Wortgruppe in einer
   `max-content`-Spalte, ein Kaestchen mit Umschrift, ein `nowrap`. Auf
   320 Pixeln ist das breiter als die Spalte. `overflow-wrap: anywhere`
   bricht ein Wort nur, wenn es allein nicht in die Zeile passt; auf breiten
   Schirmen aendert sich dadurch nur, was dort schon ueber den Rand lief
   (und der Aufklapp-Kopf unter Punkt 6). */

/* 1. Wortpaare (`.paarliste`, v. a. C2-Wortlisten und Vertiefungen): die
      linke Spalte war `max-content` und konnte nicht schrumpfen — auf 320
      Pixeln lief sie hinaus, auf 390 drueckte sie die Uebersetzung auf einen
      Buchstaben je Zeile. Auf dem Telefon bekommt die Uebersetzung eine
      Mindestbreite, die linke Spalte bricht um. */
.paarliste-zeile > * { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 36rem) {
  .paarliste { grid-template-columns: minmax(0, max-content) minmax(6.5rem, 1fr); }
}

/* 2. Infokarten (Grammatikthemen): die Karte ist ein Grid-Kind. */
.infokarten { grid-template-columns: minmax(0, 1fr); }
.infokarte { min-width: 0; overflow-wrap: anywhere; }

/* 3. Falsch/Richtig-Zeilen: Flex-Kinder mit einem langen Zahlwort
      (tausendneunhundertvierundachtzig ist auch auf dem Schreibtisch
      breiter als die Karte). Das Zielwort traegt `lang`, also darf der
      Browser dort richtig trennen, wo er ein Woerterbuch hat. */
.falsch-richtig { grid-template-columns: minmax(0, 1fr); }
.fr-zeile { min-width: 0; overflow-wrap: anywhere; }
.fr-zeile > * { min-width: 0; }
.fr-zeile .ziel { -webkit-hyphens: auto; hyphens: auto; }

/* 4. Schilder (`.marke-schild`): inline-flex, Grossbuchstaben, gesperrt —
      NEUNZEHNHUNDERTVIERUNDACHTZIG passt nicht in die Karte. */
.marke-schild { max-width: 100%; overflow-wrap: anywhere; }
.marke-schild > * { min-width: 0; }

/* 5. Ueberschrift einer Wortschatz-Kategorie: Zeichen und Text in einem
      Flex-H1; der Text ist ein anonymes Flex-Kind und laesst sich nur ueber
      die geerbte Eigenschaft schmaler machen. */
.vk-kat-kopf h1 { overflow-wrap: anywhere; }

/* 6. Aufklapp-Kopf mit Zielwoertern (`.vertiefung > summary`): Als Flex-Kasten
      wird jedes Textstueck und jedes `.ziel` ein eigenes, unteilbares Glied —
      mit Umschrift (`.ja-w`) eine Kette ohne Umbruch, und das Komma rueckte
      mit Abstand hinter das Wort. Mit Zielwoertern darin wird der Kopf ein
      gewoehnlicher Textblock, der zwischen den Woertern umbricht; der Pfeil
      bleibt rechts oben. */
.vertiefung > summary:has(> .ziel) { display: block; position: relative; padding-right: 2.6rem; }
.vertiefung > summary:has(> .ziel)::after { position: absolute; right: 1.1rem; top: 1.2rem; margin: 0; }

/* 7. Lernpfad: `.lp-kurz` ist eine Beschriftung nur fuer Vorleseprogramme
      (1 Pixel, abgeschnitten, `nowrap`). Woerter und Umschrift-Kaestchen
      darin reihten sich weit ueber den Rand hinaus — unsichtbar, aber
      messbar. Ohne `nowrap` bleiben sie in ihrem Pixel. */
.lp-weg2 .lp-kurz .ja-w { display: inline; margin: 0; }
.lp-weg2 .lp-kurz .ja-w::after { content: none; }
.lp-weg2 .lp-kurz, .lp-weg2 .lp-kurz * { white-space: normal; word-break: break-all; }

/* 8. Konjugation: der Verweis „→ Unregelmaessiges …" steht auf `nowrap`
      (konjugation.css); auf dem Telefon darf er umbrechen. */
@media (max-width: 36rem) {
  .kj-besonderheiten .kj-bes-link { white-space: normal; }
}

/* 9. Vorfuehrung auf der Startseite: Szenen sind Grid-Kinder, die Faecher
      und Zahlen `1fr`-Spalten (= minmax(auto, 1fr)); „Scatola 5" ist
      breiter als ein Fuenftel. */
.vf-buehne { grid-template-columns: minmax(0, 1fr); }
.vf-szene { min-width: 0; }
.vf-faecher { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vf-zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vf-fach, .vf-zahl { min-width: 0; overflow-wrap: anywhere; }
/* === Ende: Layout auf 320 Pixeln === */

/* === Mindestgroessen auf dem Telefon (tools/layout_pruefen.mjs, Bau 59) ===
   Etiketten unter 12,5 Pixeln und Bedienelemente unter 32 Pixeln Hoehe,
   die die Pruefung auf 390 Pixeln meldete. Schrift: 0,8rem (12,8 px);
   Ziele: 32 Pixel Mindesthoehe, Inhalt mittig — nur auf schmalen Schirmen,
   der Schreibtisch bleibt wie er ist. */
.wb-stufe-nr, .kw-zahl, .glimo-leiter-ab, .st-wahl-marke, .np-stufe,
.lp2 .lp-schiene-zahl, .sprech-schild, .np-kopf, .lp-weiter-kopf, .heute-eti,
.lk-buchstabe, .zband-achse li > span, .lk-papier-kopf > span {
  font-size: max(0.8rem, 12.8px);
}
@media (max-width: 48rem) {
  .vk-thema-link, .vk-liste-link, .heute-link, .sp-pfad,
  .paarwahl-hinweis-zu, .ab-lk-link, .lp2 .lp-schiene-punkt {
    min-height: 32px;
  }
  .lp2 .lp-schiene-punkt { align-items: center; }
  .heute-link, .sp-pfad { display: inline-flex; align-items: center; }
}
/* === Ende: Mindestgroessen === */

/* === Mindestgroessen, zweite Runde (tools/layout_pruefen.mjs, Bau 59) ===
   Was nach den ersten beiden Bloecken auf den 48 Seiten „je Art" noch
   gemeldet wurde. Schrift: max(0,8rem, 12,8px); Ziele: 32 Pixel. Nur auf
   schmalen Schirmen (die Pruefung misst dort), der Schreibtisch bleibt wie
   er ist — bis auf das Lesemass unter Punkt 4, das gilt dort.

   Spezifitaet: Einige Regeln stehen in Dateien, die nach stil.css laden
   (lehrkraefte.css, schreibtrainer.css, sprechstudio.css, konjugation.css),
   oder unter einer Elternklasse (.lp-weg2 .lp-meta). Die Selektoren hier
   sind mindestens so spezifisch — die doppelte Klasse ist Absicht. */

@media (max-width: 48rem) {
  /* 1. Etiketten und Schilder */
  .sb-schild, .sb-reihe-schild, .wz-schild, .form-dach,
  .leiter-sprosse .leiter-zahl,
  .jk-legende-text, .sp-hier,
  .lp-katleiste .lp-kat-name, .lp-katleiste .lp-kat-zahl,
  .lp-weg2 .lp-meta,
  .lk-buchstabe.lk-buchstabe,
  .st-wahl-marke.st-wahl-marke,
  .sprech-schild.sprech-schild {
    font-size: max(0.8rem, 12.8px);
  }
  /* Grossbuchstaben-Schilder: etwas weniger Sperrung, damit sie mit der
     groesseren Schrift so breit bleiben wie vorher. */
  .sb-schild, .sb-reihe-schild { letter-spacing: .08em; }
  .wz-schild { letter-spacing: .08em; }

  /* 2. Ziele: Verben im Konjugationsverzeichnis (die Verweise haben keine
        eigene Klasse) und „Alle Felder" unter der Feldwahl. */
  .kj-liste li > a { min-height: 32px; align-items: center; }
  .anw-karte-fuss > a { display: inline-flex; align-items: center; min-height: 32px; }
}

/* 3. Lernpfad-Leiste: die Kategorienamen stehen auf `nowrap` mit
      abgeschnittenem Rand; mit groesserer Schrift darf der Knopf mitwachsen
      (die Leiste wischt auf dem Telefon ohnehin seitlich). */
@media (max-width: 699px) {
  .lp-katleiste .lp-kat-name { overflow: visible; }
}

/* 4. Lesemass: der Erklaertext unter „Offline ueben" lief auf dem
      Schreibtisch ueber die ganze Breite (1147 Pixel). */
.ueben-offline p { max-width: 70ch; }
/* === Ende: Mindestgroessen, zweite Runde === */

/* === Zurueck zur Sprachwahl (Kopfzeile jeder Seite eines Paares) ===
   Flagge der Sprache, die man lernt; das Wort steht nur fuer Vorleser und
   im `title` (siehe „Der Kopf ist auf dem Rechner eine Zeile"). Auf dem
   Telefon steht der Knopf vorne in der rechten Gruppe. */
.kurs-kopf { flex: none; min-height: 2.75rem; min-width: 2.75rem;
  justify-content: center; gap: .45rem; }
.kurs-kopf .flagge { height: 1.05em; width: auto; }
.marke + .kurs-kopf { margin-left: auto; }
.kurs-kopf + .wb-kopf { margin-left: 0; }
@media (max-width: 780px) {
  .kurs-kopf { order: 1; margin-left: auto; }
  .kurs-kopf + .wb-kopf { margin-left: 0; }
}
/* Auf schmalen Telefonen passt die Zeile mit dem zusaetzlichen Knopf nur,
   wenn das Wort „EveryLingua" neben Muno weicht; Muno bleibt und fuehrt
   weiter zur Startseite, Vorleseprogramme hoeren den Namen weiterhin. */
@media (max-width: 440px) {
  .kopf-innen:has(.kurs-kopf) .marke > span { position: absolute; width: 1px;
    height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kopf-innen:has(.kurs-kopf) { column-gap: .35rem; }
}
@media print { .kurs-kopf { display: none !important; } }
/* === Ende: Zurueck zur Sprachwahl === */

/* Die Fussgruppen im Menue (kern.js, `naviMehr`) gibt es nur auf dem
   Telefon; wird das Fenster breiter, waehrend das Menue offen war, stehen
   sie nicht noch einmal im Kopf. */
@media (min-width: 781px) {
  .navi-mehr, .navi-oben, .navi-suche-wort { display: none; }
}

/* --- AP-5 und AP-7: Erinnerung am Rundenende, Wochenthema, Fortschritts-
   karte, faellige Grammatik, „Fehler melden" ---------------------------------
   Ein zusammenhaengender Block am Ende, damit parallele Arbeiten sich hier
   nicht ueberschreiben. Alles andere erben die Kaesten von .karte. */
.erinnerung-kasten, .wochenthema { margin-top: 1rem; }
.erinnerung-kasten .hero-knoepfe { align-items: center; gap: .6rem; flex-wrap: wrap; }
.erinnerung-kasten label { margin: 0; }
.wt-thema { font-size: 1.15rem; font-weight: 600; margin: .2rem 0 .4rem; }
.wt-thema .lw-stufe { vertical-align: middle; }
.fk-vorschau { margin-top: .8rem; }
.fk-vorschau img { display: block; }
.tz-faellig {
  margin-left: .5rem; padding: .05rem .45rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, var(--marke, #2457d6) 14%, transparent);
  color: var(--text, inherit);
}
.thema-zeile[data-faellig="ja"] { font-weight: 600; }
.melden { margin-top: 2rem; }
.melden > summary { cursor: pointer; font-weight: 600; min-height: 24px; }
.melden-form label { display: block; font-weight: 600; margin-bottom: .25rem; }
.melden-form select, .melden-form textarea { width: 100%; max-width: 36rem; }
.melden-form textarea { min-height: 5.5rem; resize: vertical; }
/* Der Honigtopf: aus dem Bild, nicht unsichtbar geschaltet — ein Automat
   erkennt `display:none`, ein Mensch sieht das Feld hier nie. */
.melden-falle {
  position: absolute; left: -10000px; top: auto; width: 1px; height: 1px;
  overflow: hidden;
}
.htr-stimmhilfe { display: block; margin-top: .5rem; }

/* === Über die Sprache: Abschnitte, Zeitleiste, Weltkarte, Wusstest du ===
   tools/seiten_sprachinfo.py, tools/weltkarte.py, assets/js/weltkarte.js.
   Die Abschnitte sind <details>: offen steht der Anfang der Geschichte,
   alles andere oeffnet, wer neugierig ist. */
.si-teil { border-top: 1px solid var(--linie); }
.si-teil:last-of-type { border-bottom: 1px solid var(--linie); }
.si-teil > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  gap: .6rem; min-height: 44px; padding: .55rem 0;
}
.si-teil > summary::-webkit-details-marker { display: none; }
.si-teil > summary::after {
  content: ""; margin-left: auto; flex: 0 0 auto; width: .6rem; height: .6rem;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .15s;
}
.si-teil[open] > summary::after { transform: rotate(-135deg); }
.sprachinfo .si-teil > summary h2 { margin: 0; font-size: 1.25rem; }
.si-teil > summary:hover h2 { color: var(--marke-ink); }
.si-teil-rumpf { padding: 0 0 1.2rem; }
.si-teil-rumpf > p:first-child { margin-top: .2rem; }

/* Die Zeitleiste: oben der Strahl (nur Bild, nummeriert), darunter die
   Liste, die die Auskunft ist. */
.si-zeit { margin: 1.6rem 0 .4rem; }
.sprachinfo .si-zeit h3 { margin: 0 0 .9rem; font-size: 1.05rem; }
.si-strahl {
  position: relative; height: 3.2rem; margin: 0 .9rem 1.2rem;
}
.si-strahl-linie {
  position: absolute; left: 0; right: 0; top: .9rem; height: 3px;
  border-radius: 3px; background: var(--linie-kraeftig);
}
.si-strahl-punkt {
  position: absolute; top: .9rem; left: calc(var(--si-pos) * 100%);
  transform: translate(-50%, -50%); width: 1.55rem; height: 1.55rem;
  border-radius: 50%; display: grid; place-items: center;
  font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--karte); color: var(--ziel-lesen, var(--marke-ink));
  border: 2px solid currentColor;
}
.si-strahl-ende {
  position: absolute; top: 2rem; font-size: .8rem; color: var(--ink-3);
  white-space: nowrap;
}
.si-strahl-anfang { left: -.9rem; }
.si-strahl-schluss { right: -.9rem; }
.si-zeitleiste {
  list-style: none; margin: 0; padding: 0; counter-reset: si-station;
  border-left: 3px solid var(--linie-kraeftig); margin-left: .75rem;
}
.si-zeitleiste li {
  counter-increment: si-station; position: relative;
  padding: 0 0 1rem 1.4rem;
}
.si-zeitleiste li::before {
  content: counter(si-station); position: absolute; left: -.85rem; top: .05rem;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .72rem; font-weight: 700;
  background: var(--karte); color: var(--ziel-lesen, var(--marke-ink));
  border: 2px solid currentColor;
}
.si-jahr {
  display: inline-block; font-family: var(--schrift-titel); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.sprachinfo .si-zeitleiste p { margin: .15rem 0 0; line-height: 1.55; }

/* „Wusstest du?" — die Liste auf der Seite; der Fakt, auf den ein Verweis
   vom Ende einer Runde zeigt, ist kurz markiert. */
.si-fakten { padding-left: 2.1rem; margin: .6rem 0 0; }
.si-fakten li { margin: 0 0 .7rem; line-height: 1.6; padding-left: .2rem; }
.si-fakten li::marker { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.si-fakt-hier {
  background: var(--ziel-lesen-weich, var(--marke-weich));
  border-radius: 6px; outline: 2px solid var(--ziel-lesen, var(--marke));
  outline-offset: 3px;
}
.si-weiter { margin-top: 2.4rem; }
.sprachinfo .si-weiter h2 { font-size: 1.1rem; margin: 0 0 .6rem; }

/* Die Weltkarte. Eine Akzentfarbe je Sprache (--wk-hell, --wk-dunkel aus
   tools/weltkarte.py, mit 3:1 gegen Land und Grund gerechnet); voll heisst
   amtlich, schraffiert Minderheit, ein Punkt mit Ring ein Kleinstaat. */
.weltkarte {
  --wk-farbe: var(--wk-hell); --wk-land: #d9e0ea; --wk-grund: var(--karte);
  margin: 1.4rem 0 .6rem; padding: .9rem; border: 1px solid var(--linie);
  border-radius: 14px; background: var(--wk-grund);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .weltkarte,
  :root:not([data-thema="hell"]) .wk-vorschau {
    --wk-farbe: var(--wk-dunkel); --wk-land: #2b3650;
  }
}
:root[data-thema="dunkel"] .weltkarte,
:root[data-thema="dunkel"] .wk-vorschau {
  --wk-farbe: var(--wk-dunkel); --wk-land: #2b3650;
}
.sprachinfo .wk-titel { margin: 0 0 .6rem; font-size: 1.05rem; }
.wk-buehne { position: relative; }
.wk-svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
.wk-land { fill: var(--wk-land); }
.wk-amtlich, .wk-minderheit, .wk-punkt {
  stroke: var(--wk-grund, var(--karte)); stroke-width: var(--wk-linie, .6);
  stroke-linejoin: round; transition: opacity .12s;
}
.wk-amtlich { fill: var(--wk-farbe); }
.wk-minderheit { fill: var(--wk-schraffur); }
.wk-schraffur-grund { fill: var(--wk-land); }
.wk-schraffur-strich { fill: var(--wk-farbe); }
.wk-punkt { stroke-width: calc(var(--wk-linie, .6) * 1.6); }
.wk-punkt.wk-amtlich { fill: var(--wk-farbe); }
.wk-punkt.wk-minderheit { fill: var(--wk-land); stroke: var(--wk-farbe); }
.wk-svg [data-name] { cursor: pointer; }
.wk-svg [data-name]:hover, .wk-svg .wk-hier {
  stroke: var(--ink); stroke-width: calc(var(--wk-linie, .6) * 2.2);
}
.wk-schild {
  position: absolute; z-index: 2; pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
  margin: 0; padding: .35rem .6rem; border-radius: 8px; max-width: 14rem;
  background: var(--ink); color: var(--karte); font-size: .82rem;
  line-height: 1.35; text-align: center; box-shadow: 0 4px 14px rgb(0 0 0 / .18);
}
.wk-schild-links { transform: translate(-90%, calc(-100% - 10px)); }
.wk-legende {
  list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem;
  margin: .7rem 0 0; padding: 0; font-size: .88rem; color: var(--ink-2);
}
.wk-legende li { display: flex; align-items: center; gap: .45rem; margin: 0; }
.wk-muster {
  flex: 0 0 auto; width: 1.1rem; height: .8rem; border-radius: 3px;
  background: var(--wk-farbe);
}
.wk-muster-minderheit {
  background: repeating-linear-gradient(45deg, var(--wk-farbe) 0 2px,
                                        var(--wk-land) 2px 5px);
}
.wk-muster-punkt {
  width: .8rem; border-radius: 50%; box-shadow: 0 0 0 2px var(--wk-grund),
    0 0 0 3px var(--wk-farbe);
}
.wk-liste {
  display: grid; gap: .2rem 1.4rem; margin-top: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.sprachinfo .wk-gruppe h4 { margin: .4rem 0 .3rem; font-size: .9rem; color: var(--ink-2); }
.wk-laender {
  margin: 0; padding: 0; list-style: none; columns: 2 9rem; column-gap: 1rem;
  font-size: .9rem; line-height: 1.5;
}
.wk-laender li { break-inside: avoid; margin: 0; }
.wk-fuss { margin-top: .8rem; font-size: .8rem; color: var(--ink-3); line-height: 1.5; }

/* Die kleine Karte auf der Startseite des Paares: ein Verweis, kein Inhalt. */
.wk-vorschau {
  --wk-farbe: var(--wk-hell); --wk-land: #d9e0ea; --wk-grund: var(--karte);
  display: grid; grid-template-columns: minmax(7rem, 15rem) 1fr auto;
  align-items: center; gap: 1rem; margin: 2rem 0 0; padding: .9rem 1rem;
  border: 1px solid var(--linie); border-radius: 14px;
  background: var(--karte); color: var(--ink); text-decoration: none;
}
.wk-vorschau:hover { border-color: var(--marke); }
.wk-vorschau-bild { display: block; }
.wk-vorschau-text { display: grid; gap: .2rem; }
.wk-vorschau-text b { font-family: var(--schrift-titel); font-size: 1.05rem; }
.wk-vorschau-text span { color: var(--ink-2); font-size: .92rem; line-height: 1.45; }
@media (max-width: 560px) {
  .wk-vorschau { grid-template-columns: 1fr auto; }
  .wk-vorschau-bild { grid-column: 1 / -1; }
}

/* „Wusstest du?" am Ende einer Runde und im Lernpfad: eine Zeile, die
   aufgeht, wer neugierig ist — zugeklappt, damit sie nicht vom Weiterueben
   ablenkt. */
.wusstest {
  margin: .9rem 0 0; border: 1px dashed var(--linie-kraeftig);
  border-radius: 12px; background: var(--karte);
}
.wusstest > summary {
  cursor: pointer; display: flex; align-items: center; gap: .55rem;
  min-height: 44px; padding: .4rem .9rem; font-weight: 600; color: var(--ink-2);
}
.wusstest > summary:hover { color: var(--marke-ink); }
.wusstest-zeichen {
  flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .85rem; font-weight: 700;
  background: var(--ziel-lesen-weich, var(--marke-weich));
  color: var(--ziel-lesen, var(--marke-ink));
}
.wusstest-text { margin: 0; padding: 0 .9rem; line-height: 1.6; }
.wusstest-text .ziel { font-style: italic; font-weight: 500; color: var(--zielwort); }
.wusstest-weg { margin: .5rem 0 0; padding: 0 .9rem .8rem; font-size: .9rem; }
.lp-wusstest { margin: .8rem 0 1.2rem; }
.lp-wusstest > p { margin: 0; }
@media print { .wusstest, .lp-wusstest, .wk-schild { display: none !important; } }
/* === Ende: Über die Sprache === */

/* --- Tageskarte „Heute: 6 Minuten" (Startseite eines Paares) --------------
   Ein kleiner Plan fuer heute: Grund --lp-grund wie der Lernpfad, Rand
   --marke, offene Punkte in --akzent, erledigte in --ok. Kein Rot, keine
   Zahl, die droht. Ohne Skript bleibt die Karte verborgen (`hidden`) —
   sie ist nichts als ein Blick in den eigenen Lernstand. */
.tageskarte {
  background: var(--lp-grund); border: 2px solid var(--marke);
  border-radius: var(--rund-l); padding: 1rem 1.15rem 1.05rem;
  margin: 1.2rem 0 1.4rem; display: grid; gap: .6rem;
}
.tageskarte[hidden] { display: none; }
.tk-kopf { display: grid; gap: .2rem; }
.tk-titel { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.tk-unter { margin: 0; color: var(--ink-2); font-size: .95rem; }
.tk-unter[hidden] { display: none; }
.tk-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.tk-liste li {
  display: flex; align-items: center; gap: .6rem; min-width: 0;
}
.tk-liste a {
  font-weight: 600; overflow-wrap: anywhere; min-width: 0;
  display: inline-flex; align-items: center; min-height: 32px;
}
.tk-punkt {
  flex: none; width: .72rem; height: .72rem; border-radius: 50%;
  background: var(--akzent);
}
.tk-liste li[data-stand="erledigt"] .tk-punkt { background: var(--ok); }
.tk-liste li[data-stand="erledigt"] a { color: var(--ink-2); font-weight: 500; }
.tk-fuss { display: grid; gap: .3rem; font-size: .92rem; color: var(--ink-2); }
.tk-fuss p { margin: 0; }
.tk-ziel { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.tk-balken {
  flex: 0 0 6rem; height: .5rem; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--marke) 18%, transparent);
}
.tk-balken i { display: block; height: 100%; background: var(--ok); border-radius: inherit; }
.tk-serie b { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .tk-balken i { transition: width .4s ease; }
}

/* --- Belohnungen, Teil zwei: Serienschutz, Wunschziel, Anprobe, Album ----
   Der Shop hat eigene Farben (Entwurf): eine warme Flaeche, Coins in Gold,
   Schrift in Braun; im Dunkeln dieselben Rollen. Gekauft ist --ok, Kaufen
   --marke. Sammelalben haben Set-Farben je Zielsprache, keine
   Seltenheitsfarben: Kein Teil ist „wertvoller" als ein anderes. */
:root {
  --shop-flaeche: #fffbeb; --shop-coin: #f59e0b; --shop-ink: #92400e;
  --set-en: #2563eb; --set-de: #b45309; --set-es: #dc2626; --set-fr: #4f46e5;
  --set-it: #16a34a; --set-pt: #0d9488; --set-ja: #db2777; --set-zh: #ca8a04;
  --set-ko: #7c3aed; --set-hi: #ea580c; --set-tr: #0891b2; --set-pl: #be123c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) { --shop-flaeche: #1c1708; --shop-coin: #fbbf24; --shop-ink: #fcd34d; }
}
:root[data-thema="dunkel"] { --shop-flaeche: #1c1708; --shop-coin: #fbbf24; --shop-ink: #fcd34d; }
.bl-profil { background: var(--shop-flaeche); }
.bl-kasse { color: var(--shop-ink); }
.bl-wege-liste b { color: var(--shop-ink); }
.bl-ding[data-besitz="gekauft"], .bl-ding[data-besitz="frei"] { box-shadow: inset 0 0 0 2px var(--ok); }

/* Ein Gegenstand ohne Bild-Datei: eine Vorschau aus CSS (Muster, Farbe). */
.bl-muster {
  display: grid; place-items: center; width: 88px; height: 88px;
  border-radius: 18px; border: 1px solid var(--linie-kraeftig);
  background: var(--karte); color: var(--ink); font-weight: 700; overflow: hidden;
}
.bl-muster svg { width: 70%; height: 70%; }
.bl-ding-preis { font-size: .82rem; color: var(--shop-ink); font-weight: 600; }
.bl-wunsch-knopf {
  border: 0; background: none; padding: .3rem .4rem; min-height: 32px;
  font: inherit; font-size: .82rem; color: var(--marke-ink); text-decoration: underline;
  cursor: pointer;
}
.bl-wunsch-knopf[aria-pressed="true"] { font-weight: 700; text-decoration: none; }
.bl-unterkopf { margin: 1.2rem 0 .5rem; font-size: 1rem; }
.bl-unterkopf:first-child { margin-top: 0; }
.bl-satz { margin: 0 0 .6rem; color: var(--ink-2); font-size: .92rem; }

/* Der Serienschutz: vorn im Schaufenster und in der Seitenleiste. */
.bl-schutz {
  display: grid; gap: .4rem; padding: .9rem 1rem; border-radius: var(--rund-l);
  border: 2px solid var(--shop-coin); background: var(--shop-flaeche);
}
.bl-schutz h3 { margin: 0; font-size: 1rem; }
.bl-schutz p { margin: 0; color: var(--ink-2); font-size: .9rem; }

/* Die Wochenauslage: vier Teile, fest aus der Kalenderwoche. */
.bl-auslage-woche {
  margin: 0 0 1.4rem; padding: 1rem; border-radius: var(--rund-l);
  background: var(--shop-flaeche); border: 1px solid var(--linie);
}
.bl-auslage-woche h2 { margin: 0 0 .3rem; font-size: 1.1rem; }
.bl-auslage-woche .bl-raster { margin-top: .6rem; }

/* Das Wunschziel: ein Balken, wie die Tageskarte. */
.tk-wunsch { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0; }
.abschluss-wunsch {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 1rem 0 0; color: var(--ink-2); font-size: .92rem;
}
.abschluss-wunsch[hidden] { display: none; }

/* Die Vorschauen im Shop — dieselben Merkmale wie auf der Seite. */
.bl-muster-hut { background: var(--mz-hut, none) center / 62% no-repeat, var(--karte); }
.bl-muster-ast { background: var(--mz-ast, none) center / 62% no-repeat, var(--karte); }
.bl-muster-seite { background: var(--bg); color: var(--ink); border: 3px solid var(--marke); position: relative; }
.bl-muster-seite b { font-family: var(--schrift-titel); font-size: 1.6rem; }
.bl-muster-seite i { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 6px; border-radius: 3px; background: var(--marke); }
.bl-muster-pfad { background: color-mix(in srgb, var(--pw, var(--marke)) 13%, var(--bg)); display: flex; gap: 8px; }
.bl-muster-pfad i { width: 14px; height: 14px; border-radius: 5px; background: var(--pw, var(--marke)); }
.bl-muster [class="lernkarte-wort"] { margin: 0; padding: .4rem .7rem; }
.bl-muster-effekt { position: relative; }
.bl-muster-effekt i { position: absolute; width: 9px; height: 13px; border-radius: 2px; background: #f59e0b; }
.bl-muster-effekt i:nth-child(1) { left: 18%; top: 22%; background: #2563eb; transform: rotate(20deg); }
.bl-muster-effekt i:nth-child(2) { left: 46%; top: 14%; background: #16a34a; transform: rotate(-30deg); }
.bl-muster-effekt i:nth-child(3) { left: 70%; top: 34%; background: #db2777; transform: rotate(50deg); }
.bl-muster-effekt i:nth-child(4) { left: 30%; top: 58%; transform: rotate(-12deg); }
.bl-muster-effekt i:nth-child(5) { left: 60%; top: 66%; background: #7c3aed; transform: rotate(35deg); }
.bl-muster-effekt[data-effekt="funken"] i { border-radius: 50%; width: 8px; height: 8px; }
.bl-muster-effekt[data-effekt$="effekt"] i { background: var(--efset, var(--marke)); }
.bl-muster-tinte { background: #fbf7ee; }
.bl-muster-tinte i { width: 54px; height: 54px; border-radius: 50%; border: 4px solid var(--tinte); box-shadow: inset 0 0 0 4px #fbf7ee, inset 0 0 0 6px var(--tinte); }
.bl-muster-klang i, .bl-muster-vitrine i, .bl-muster-schutz i, .bl-muster-urkunde i {
  width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--marke) 18%, var(--karte));
  border: 2px solid var(--marke);
}
.bl-muster-klang i { border-radius: 50%; }
.bl-muster-urkunde i { width: 56px; height: 42px; border-radius: 3px; background: #fffdf7; border: 3px double #92400e; }
.bl-muster-urkunde[data-design="goldurkunde"] i { border: 4px solid #b7791f; }
.bl-muster-urkunde[data-design="aquarell"] i { border: 0; background: radial-gradient(ellipse at 20% 20%, #dbeafe, transparent 60%), radial-gradient(ellipse at 80% 80%, #fce7f3, transparent 60%), #fffefb; }

/* --- Der Lernraum: Regler und Vorschau nebeneinander ----------------------
   Die Vorschau traegt die Wahl als Merkmal (`data-a-seite` usw.) — dieselben
   Regeln wie auf der Seite, nur fuer diesen Kasten. */
.lr-geteilt { display: grid; gap: 1rem; margin: .6rem 0 1rem; }
@media (min-width: 760px) { .lr-geteilt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.lr-regler { display: grid; gap: .6rem; }
.lr-gruppe { margin: 0; padding: .5rem .8rem .7rem; border: 1px solid var(--linie); border-radius: var(--rund); }
.lr-gruppe legend { padding: 0 .3rem; font-weight: 700; color: var(--ink); }
.lr-wahl { display: inline-flex; align-items: center; gap: .35rem; margin: .2rem .9rem .2rem 0; min-height: 32px; cursor: pointer; }
.lr-vorschau {
  padding: 1rem; border-radius: var(--rund-l); border: 2px solid var(--marke);
  background: var(--bg); color: var(--ink);
}
.lr-titel { margin: 0 0 .3rem; font-family: var(--schrift-titel); font-size: 1.2rem; color: var(--ink); }
.lr-text { margin: 0 0 .8rem; color: var(--ink-2); }
.lr-pfad {
  display: flex; justify-content: space-around; padding: .9rem; margin: 0 0 .8rem; border-radius: var(--rund);
  background: color-mix(in srgb, var(--pw, var(--marke)) 13%, var(--bg));
}
.lr-pfad i { width: 2.2rem; height: 2rem; border-radius: .8rem; background: var(--karte); box-shadow: inset 0 0 0 2.5px var(--pw, var(--marke)); }
.lr-vorschau .lernkarte-wort { margin: 0 0 .8rem; }
.lr-knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0; }
.lr-knoepfe [hidden] { display: none; }
.lr-aktionen .hero-knoepfe { margin: 0 0 .6rem; }
.lr-profile { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; }
.lr-profile li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; padding: .5rem .8rem; border: 1px solid var(--linie); border-radius: var(--rund); background: var(--karte); }
.lr-profile .bl-satz { margin: 0; }

/* --- Das Unterstuetzer-Paket (tools/abo.py, nur mit ABO) -------------------
   Echtgeld, deshalb sichtbar getrennt vom Gold der Coins: eigene Karte,
   ruhiger Rand in --marke. Der Rahmen „Danke“ steht schon hier, damit er
   mit dem Einschalten nicht erst entworfen werden muss. */
.uu-karte { margin-top: 1.6rem; border: 2px solid var(--marke); }
.uu-karte h2 { margin-top: 0; }
.uu-nicht { color: var(--ink); }
.uu-preis { font-size: 1.15rem; font-weight: 700; color: var(--marke-ink); }
.bl-rahmen-unterstuetzer {
  background: linear-gradient(135deg, #fde68a, #bfdbfe);
  box-shadow: inset 0 0 0 4px #1d4ed8, 0 0 0 2px #f59e0b;
}

/* --- Muno-Zubehoer: zwei Ebenen ueber jedem Foto ---------------------------
   `::before` sitzt am Doktorhut, `::after` steht auf dem Ast; wo genau,
   sagen die Anker je Foto (Block am Ende, tools/muno_zubehoer.py). Waehrend
   Muno sich bewegt (animiertes Bild), sind die Ebenen weg — sie wuerden
   nicht mitgehen. */
span.muno.muno-foto { position: relative; }
span.muno.muno-foto::before, span.muno.muno-foto::after {
  content: ""; position: absolute; pointer-events: none;
  background: center / contain no-repeat;
}
span.muno.muno-foto::before {
  left: var(--mz-hx, 50%); top: var(--mz-hy, 10%);
  width: var(--mz-hb, 7%); aspect-ratio: 1; transform: translate(-50%, -50%);
  background-image: var(--mz-hut, none);
}
span.muno.muno-foto::after {
  left: 9%; top: var(--mz-ay, 72%); width: 15%; aspect-ratio: 1;
  transform: translate(-50%, -96%);
  background-image: var(--mz-ast, none);
}
span.muno.muno-foto.muno-bewegt::before, span.muno.muno-foto.muno-bewegt::after { display: none; }

/* Die Anprobe: Muno gross, Zubehoer zum Antippen, nichts wird gekauft,
   solange niemand „Kaufen" drueckt. */
.mz-zimmer { display: grid; gap: 1rem; }
@media (min-width: 760px) { .mz-zimmer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.mz-buehne {
  display: grid; place-items: center; padding: 1rem; border-radius: var(--rund-l);
  background: var(--lp-grund); border: 1px solid var(--linie);
}
.mz-buehne span.muno.muno-foto { width: min(100%, 360px); }
.mz-posen { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; justify-content: center; }
.mz-posen button, .mz-wahl button {
  min-height: 36px; padding: .2rem .7rem; border-radius: var(--rund-voll);
  border: 1px solid var(--linie-kraeftig); background: var(--karte); color: var(--ink);
  font: inherit; font-size: .85rem; cursor: pointer;
}
.mz-posen button[aria-pressed="true"], .mz-wahl button[aria-pressed="true"] {
  background: var(--marke); border-color: var(--marke); color: var(--knopf-ink);
}
.mz-wahl { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 .9rem; }
.mz-hinweis { margin: .4rem 0 0; font-size: .88rem; color: var(--ink-2); }

/* --- Neue Rahmen: nur CSS ------------------------------------------------- */
.bl-rahmen-wolke { background: #e0f2fe; box-shadow: inset 0 0 0 4px #7dd3fc, 0 0 0 3px #f0f9ff; }
.bl-rahmen-kreide { background: #f5f5f4; box-shadow: inset 0 0 0 4px #a8a29e; outline: 2px dashed #78716c; outline-offset: -1px; }
.bl-rahmen-sterne {
  background: radial-gradient(circle at 20% 25%, #fde047 0 3px, transparent 4px),
              radial-gradient(circle at 80% 30%, #fde047 0 2px, transparent 3px),
              radial-gradient(circle at 70% 85%, #fde047 0 3px, transparent 4px), #1e1b4b;
  box-shadow: inset 0 0 0 3px #6366f1;
}
.bl-rahmen-diamantring {
  background: conic-gradient(from 45deg, #e0f2fe, #a5f3fc, #f5d0fe, #e0f2fe, #bae6fd, #f5d0fe, #e0f2fe);
  box-shadow: inset 0 0 0 3px #0e7490, 0 0 0 2px #cffafe;
}
.bl-rahmen-enrahmen, .bl-rahmen-derahmen, .bl-rahmen-esrahmen, .bl-rahmen-frrahmen, .bl-rahmen-itrahmen, .bl-rahmen-ptrahmen, .bl-rahmen-jarahmen, .bl-rahmen-zhrahmen, .bl-rahmen-korahmen, .bl-rahmen-hirahmen, .bl-rahmen-trrahmen, .bl-rahmen-plrahmen {
  background: color-mix(in srgb, var(--bl-set) 22%, #fff); box-shadow: inset 0 0 0 5px var(--bl-set);
}
.bl-rahmen-ensiegel, .bl-rahmen-desiegel, .bl-rahmen-essiegel, .bl-rahmen-frsiegel, .bl-rahmen-itsiegel, .bl-rahmen-ptsiegel, .bl-rahmen-jasiegel, .bl-rahmen-zhsiegel, .bl-rahmen-kosiegel, .bl-rahmen-hisiegel, .bl-rahmen-trsiegel, .bl-rahmen-plsiegel {
  background: repeating-conic-gradient(var(--bl-set) 0 10deg, #fff 10deg 20deg);
  box-shadow: 0 0 0 3px var(--bl-set);
}
.bl-rahmen-enrahmen, .bl-rahmen-ensiegel { --bl-set: var(--set-en); }
.bl-rahmen-derahmen, .bl-rahmen-desiegel { --bl-set: var(--set-de); }
.bl-rahmen-esrahmen, .bl-rahmen-essiegel { --bl-set: var(--set-es); }
.bl-rahmen-frrahmen, .bl-rahmen-frsiegel { --bl-set: var(--set-fr); }
.bl-rahmen-itrahmen, .bl-rahmen-itsiegel { --bl-set: var(--set-it); }
.bl-rahmen-ptrahmen, .bl-rahmen-ptsiegel { --bl-set: var(--set-pt); }
.bl-rahmen-jarahmen, .bl-rahmen-jasiegel { --bl-set: var(--set-ja); }
.bl-rahmen-zhrahmen, .bl-rahmen-zhsiegel { --bl-set: var(--set-zh); }
.bl-rahmen-korahmen, .bl-rahmen-kosiegel { --bl-set: var(--set-ko); }
.bl-rahmen-hirahmen, .bl-rahmen-hisiegel { --bl-set: var(--set-hi); }
.bl-rahmen-trrahmen, .bl-rahmen-trsiegel { --bl-set: var(--set-tr); }
.bl-rahmen-plrahmen, .bl-rahmen-plsiegel { --bl-set: var(--set-pl); }

/* --- Profilkarte: Hintergrund und Vitrine ---------------------------------
   Nur hinter dem Avatar — der Text der Karte steht weiter auf --karte. */
.bl-grund-morgen { background-image: linear-gradient(135deg, #fde68a, #fbcfe8); }
.bl-grund-abend { background-image: linear-gradient(135deg, #c4b5fd, #f9a8d4 60%, #fdba74); }
.bl-grund-sternenhimmel {
  background-image: radial-gradient(circle at 25% 30%, #fff 0 1.5px, transparent 2px),
                    radial-gradient(circle at 70% 60%, #fff 0 1px, transparent 1.5px),
                    linear-gradient(160deg, #1e1b4b, #312e81);
}
.bl-grund { display: inline-grid; place-items: center; padding: 6px; border-radius: 50%; }
.bl-vitrine { display: flex; gap: .3rem; margin: .5rem 0 0; }
.bl-vitrine .bl-stempel-svg { width: 44px; height: 44px; }

/* --- Lernpfad-Welten ------------------------------------------------------
   Der Himmel unter dem Weg und der Weg selbst. Der Himmel ist aus dem Grund
   der Seite gemischt, deshalb stimmt der Kontrast der Schrift neben den
   Steinen in hell und dunkel. */
[data-a-pfad="meer"] { --pw: #0e7490; }
[data-a-pfad="wald"] { --pw: #3f6b2a; }
[data-a-pfad="polar"] { --pw: #5b7fa6; }
[data-a-pfad="enpfad"] { --pw: var(--set-en); } [data-a-pfad="depfad"] { --pw: var(--set-de); }
[data-a-pfad="espfad"] { --pw: var(--set-es); } [data-a-pfad="frpfad"] { --pw: var(--set-fr); }
[data-a-pfad="itpfad"] { --pw: var(--set-it); } [data-a-pfad="ptpfad"] { --pw: var(--set-pt); }
[data-a-pfad="japfad"] { --pw: var(--set-ja); } [data-a-pfad="zhpfad"] { --pw: var(--set-zh); }
[data-a-pfad="kopfad"] { --pw: var(--set-ko); } [data-a-pfad="hipfad"] { --pw: var(--set-hi); }
[data-a-pfad="trpfad"] { --pw: var(--set-tr); } [data-a-pfad="plpfad"] { --pw: var(--set-pl); }
[data-a-pfad] .lp-weg2 { --lp-grund: color-mix(in srgb, var(--pw, var(--marke)) 13%, var(--bg)); }
[data-a-pfad] .lp-weg-pfad { stroke: var(--pw, var(--marke)); }
[data-a-pfad="meer"] .lp-weg-pfad { stroke-dasharray: 10 8; }
[data-a-pfad="polar"] .lp-weg-pfad { stroke-dasharray: .1 10; stroke-width: 7; }

/* --- Karteikarten-Designs: das Wort auf der Lernkarte ---------------------- */
[data-a-karte] .lernkarte-wort {
  padding: .7rem .9rem; border-radius: 14px; border: 1px solid var(--linie-kraeftig);
  background-color: var(--karte);
}
[data-a-karte="punkte"] .lernkarte-wort {
  background-image: radial-gradient(color-mix(in srgb, var(--marke) 22%, transparent) 1.2px, transparent 1.6px);
  background-size: 14px 14px;
}
[data-a-karte="papier"] .lernkarte-wort {
  background-image: repeating-linear-gradient(transparent 0 23px, color-mix(in srgb, var(--marke) 22%, transparent) 23px 24px);
  border-left: 4px solid color-mix(in srgb, var(--fehler) 45%, transparent);
}
[data-a-karte$="karte"] .lernkarte-wort {
  border: 2px solid var(--kset, var(--marke));
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--kset, var(--marke)) 16%, transparent) 0 18px, transparent 18px);
}
[data-a-karte="enkarte"] { --kset: var(--set-en); } [data-a-karte="dekarte"] { --kset: var(--set-de); }
[data-a-karte="eskarte"] { --kset: var(--set-es); } [data-a-karte="frkarte"] { --kset: var(--set-fr); }
[data-a-karte="itkarte"] { --kset: var(--set-it); } [data-a-karte="ptkarte"] { --kset: var(--set-pt); }
[data-a-karte="jakarte"] { --kset: var(--set-ja); } [data-a-karte="zhkarte"] { --kset: var(--set-zh); }
[data-a-karte="kokarte"] { --kset: var(--set-ko); } [data-a-karte="hikarte"] { --kset: var(--set-hi); }
[data-a-karte="trkarte"] { --kset: var(--set-tr); } [data-a-karte="plkarte"] { --kset: var(--set-pl); }

/* --- Erfolgs-Effekte (assets/js/aussehen.js) --------------------------------
   Eine Sekunde, ueber allem, ohne Zeiger; mit prefers-reduced-motion gar
   nicht (das Skript legt die Buehne dann nicht an — und hier steht es
   noch einmal). */
.ef-buehne { position: fixed; inset: 0; pointer-events: none; z-index: 9000; overflow: hidden; }
.ef-buehne i {
  position: absolute; left: var(--ef-x); top: -4%; width: 9px; height: 14px; border-radius: 2px;
  background: var(--ef-farbe, #f59e0b);
  animation: ef-fallen 1.4s ease-in var(--ef-v) both;
}
.ef-buehne i:nth-child(4n+1) { --ef-farbe: #2563eb; }
.ef-buehne i:nth-child(4n+2) { --ef-farbe: #16a34a; }
.ef-buehne i:nth-child(4n+3) { --ef-farbe: #db2777; }
.ef-buehne[data-effekt="funken"] i {
  left: 50%; top: 45%; width: 8px; height: 8px; border-radius: 50%;
  animation-name: ef-funken; animation-duration: 1s; animation-timing-function: ease-out;
}
.ef-buehne[data-effekt$="effekt"] i { --ef-farbe: var(--efset, var(--marke)); }
.ef-buehne[data-effekt$="effekt"] i:nth-child(2n) { --ef-farbe: color-mix(in srgb, var(--efset, var(--marke)) 55%, #fff); }
[data-effekt="eneffekt"] { --efset: var(--set-en); } [data-effekt="deeffekt"] { --efset: var(--set-de); }
[data-effekt="eseffekt"] { --efset: var(--set-es); } [data-effekt="freffekt"] { --efset: var(--set-fr); }
[data-effekt="iteffekt"] { --efset: var(--set-it); } [data-effekt="pteffekt"] { --efset: var(--set-pt); }
[data-effekt="jaeffekt"] { --efset: var(--set-ja); } [data-effekt="zheffekt"] { --efset: var(--set-zh); }
[data-effekt="koeffekt"] { --efset: var(--set-ko); } [data-effekt="hieffekt"] { --efset: var(--set-hi); }
[data-effekt="treffekt"] { --efset: var(--set-tr); } [data-effekt="pleffekt"] { --efset: var(--set-pl); }
@keyframes ef-fallen {
  from { transform: translateY(0) rotate(0); opacity: 1; }
  to { transform: translateY(105vh) rotate(540deg); opacity: .8; }
}
@keyframes ef-funken {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to { transform: translate(var(--ef-d), calc(var(--ef-d) * -.7)) scale(.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .ef-buehne { display: none; } }
@media print { .ef-buehne { display: none; } }

/* --- Das Sammelalbum ------------------------------------------------------- */
.bl-album { display: grid; gap: 1rem; }
.bl-album-set {
  border: 2px solid var(--bl-set); border-radius: var(--rund-l); padding: .9rem 1rem;
  background: color-mix(in srgb, var(--bl-set) 7%, var(--karte));
}
.bl-album-set h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.bl-album-set .bl-raster { grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr)); }
.bl-album-teil[data-besitz="geschenk"] .bl-muster, .bl-album-teil[data-besitz="set"] .bl-muster { opacity: .55; }
[data-set="en"] { --bl-set: var(--set-en); } [data-set="de"] { --bl-set: var(--set-de); }
[data-set="es"] { --bl-set: var(--set-es); } [data-set="fr"] { --bl-set: var(--set-fr); }
[data-set="it"] { --bl-set: var(--set-it); } [data-set="pt"] { --bl-set: var(--set-pt); }
[data-set="ja"] { --bl-set: var(--set-ja); } [data-set="zh"] { --bl-set: var(--set-zh); }
[data-set="ko"] { --bl-set: var(--set-ko); } [data-set="hi"] { --bl-set: var(--set-hi); }
[data-set="tr"] { --bl-set: var(--set-tr); } [data-set="pl"] { --bl-set: var(--set-pl); }

/* --- Urkunde: druckbar, ohne Pruefungsbezug ------------------------------- */
.ur-urkunde {
  max-width: 42rem; margin: 1.2rem auto; padding: 2.4rem 2rem; text-align: center;
  background: #fffdf7; color: #1f2937; border: 3px double #92400e; border-radius: 6px;
}
.ur-urkunde h2 { font-family: var(--schrift-titel); font-size: 2rem; margin: 0 0 .6rem; color: #1f2937; }
.ur-urkunde p { margin: .4rem 0; color: #374151; }
.ur-urkunde .ur-stufe { font-size: 3rem; font-weight: 800; color: #92400e; margin: .4rem 0; }
.ur-urkunde .ur-klein { font-size: .85rem; color: #4b5563; }
.ur-urkunde[data-design="goldurkunde"] {
  border: 6px solid #b7791f; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px #d69e2e;
  background: linear-gradient(#fffbeb, #fff);
}
.ur-urkunde[data-design="aquarell"] {
  border: 0;
  background: radial-gradient(ellipse at 15% 20%, #dbeafe, transparent 45%),
              radial-gradient(ellipse at 85% 80%, #fce7f3, transparent 45%), #fffefb;
}
.ur-knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
@media print {
  body.ur-druck > *:not(main), body.ur-druck main > *:not(.ur-druckbar) { display: none !important; }
  body.ur-druck .ur-druckbar > *:not(.ur-urkunde) { display: none !important; }
  .ur-urkunde { border-color: #92400e; }
}


/* --- Seitenthemen aus den Belohnungen (profil.aussehen.seite) -----------
   Je Thema eine helle und eine dunkle Fassung; welche gilt, entscheidet
   wie ueberall die Wahl hell/dunkel bzw. das System. Jede Textfarbe steht
   auf jeder Flaeche mit mindestens 4,5:1 (nachgerechnet, und die Gruppe
   `belohnungen` misst es im Browser). Die Selektoren gelten fuer <html> und
   fuer einen Vorschaukasten im Lernraum (`[data-a-seite]` an einem Element
   darin). */
@media (prefers-color-scheme: light) {
:root[data-a-seite="sepia"]:not([data-thema="dunkel"]), :root:not([data-thema="dunkel"]) [data-a-seite="sepia"] {
  --bg: #f6efe3;
  --bg-tief: #ece2d1;
  --karte: #fffaf1;
  --karte-2: #f9f2e6;
  --linie: #e4d8c4;
  --linie-kraeftig: #d2c2a6;
  --ink: #2b2118;
  --ink-2: #4f4234;
  --ink-3: #5f5142;
  --marke: #8a5a2b;
  --marke-ink: #74481d;
  --marke-weich: #f1e2cc;
  --lp-grund: #f3e8d6;
  --knopf-ink: #ffffff;
  --bg-rgb: 246 239 227;
  --flaeche-umriss: color-mix(in srgb, #d2c2a6 60%, #5f5142);
  color-scheme: light;
}
}
:root[data-thema="hell"][data-a-seite="sepia"], :root[data-thema="hell"] [data-a-seite="sepia"] {
  --bg: #f6efe3;
  --bg-tief: #ece2d1;
  --karte: #fffaf1;
  --karte-2: #f9f2e6;
  --linie: #e4d8c4;
  --linie-kraeftig: #d2c2a6;
  --ink: #2b2118;
  --ink-2: #4f4234;
  --ink-3: #5f5142;
  --marke: #8a5a2b;
  --marke-ink: #74481d;
  --marke-weich: #f1e2cc;
  --lp-grund: #f3e8d6;
  --knopf-ink: #ffffff;
  --bg-rgb: 246 239 227;
  --flaeche-umriss: color-mix(in srgb, #d2c2a6 60%, #5f5142);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root[data-a-seite="sepia"]:not([data-thema="hell"]), :root:not([data-thema="hell"]) [data-a-seite="sepia"] {
  --bg: #1b1611;
  --bg-tief: #130f0b;
  --karte: #261f18;
  --karte-2: #2e261d;
  --linie: #3d3227;
  --linie-kraeftig: #52443a;
  --ink: #f1e7d8;
  --ink-2: #d2c3ad;
  --ink-3: #b5a48c;
  --marke: #d9a86b;
  --marke-ink: #e4bb85;
  --marke-weich: #3a2c1b;
  --lp-grund: #221b14;
  --knopf-ink: #1b1209;
  --bg-rgb: 27 22 17;
  --flaeche-umriss: color-mix(in srgb, #52443a 60%, #b5a48c);
  color-scheme: dark;
}
}
:root[data-thema="dunkel"][data-a-seite="sepia"], :root[data-thema="dunkel"] [data-a-seite="sepia"] {
  --bg: #1b1611;
  --bg-tief: #130f0b;
  --karte: #261f18;
  --karte-2: #2e261d;
  --linie: #3d3227;
  --linie-kraeftig: #52443a;
  --ink: #f1e7d8;
  --ink-2: #d2c3ad;
  --ink-3: #b5a48c;
  --marke: #d9a86b;
  --marke-ink: #e4bb85;
  --marke-weich: #3a2c1b;
  --lp-grund: #221b14;
  --knopf-ink: #1b1209;
  --bg-rgb: 27 22 17;
  --flaeche-umriss: color-mix(in srgb, #52443a 60%, #b5a48c);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
:root[data-a-seite="pastell"]:not([data-thema="dunkel"]), :root:not([data-thema="dunkel"]) [data-a-seite="pastell"] {
  --bg: #f8f5fc;
  --bg-tief: #efe9f8;
  --karte: #ffffff;
  --karte-2: #faf7fe;
  --linie: #e6def3;
  --linie-kraeftig: #d3c7ea;
  --ink: #231b33;
  --ink-2: #463b5c;
  --ink-3: #574b6e;
  --marke: #7c4dcc;
  --marke-ink: #6a3bb8;
  --marke-weich: #ece3fb;
  --lp-grund: #f1ecfb;
  --knopf-ink: #ffffff;
  --bg-rgb: 248 245 252;
  --flaeche-umriss: color-mix(in srgb, #d3c7ea 60%, #574b6e);
  color-scheme: light;
}
}
:root[data-thema="hell"][data-a-seite="pastell"], :root[data-thema="hell"] [data-a-seite="pastell"] {
  --bg: #f8f5fc;
  --bg-tief: #efe9f8;
  --karte: #ffffff;
  --karte-2: #faf7fe;
  --linie: #e6def3;
  --linie-kraeftig: #d3c7ea;
  --ink: #231b33;
  --ink-2: #463b5c;
  --ink-3: #574b6e;
  --marke: #7c4dcc;
  --marke-ink: #6a3bb8;
  --marke-weich: #ece3fb;
  --lp-grund: #f1ecfb;
  --knopf-ink: #ffffff;
  --bg-rgb: 248 245 252;
  --flaeche-umriss: color-mix(in srgb, #d3c7ea 60%, #574b6e);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root[data-a-seite="pastell"]:not([data-thema="hell"]), :root:not([data-thema="hell"]) [data-a-seite="pastell"] {
  --bg: #17131f;
  --bg-tief: #100d16;
  --karte: #211b2c;
  --karte-2: #2a2337;
  --linie: #372e47;
  --linie-kraeftig: #4b3f5f;
  --ink: #efe9f8;
  --ink-2: #cdc2df;
  --ink-3: #ae9fc6;
  --marke: #c4a6f5;
  --marke-ink: #d2baf8;
  --marke-weich: #2e2343;
  --lp-grund: #1d1727;
  --knopf-ink: #1a0f2e;
  --bg-rgb: 23 19 31;
  --flaeche-umriss: color-mix(in srgb, #4b3f5f 60%, #ae9fc6);
  color-scheme: dark;
}
}
:root[data-thema="dunkel"][data-a-seite="pastell"], :root[data-thema="dunkel"] [data-a-seite="pastell"] {
  --bg: #17131f;
  --bg-tief: #100d16;
  --karte: #211b2c;
  --karte-2: #2a2337;
  --linie: #372e47;
  --linie-kraeftig: #4b3f5f;
  --ink: #efe9f8;
  --ink-2: #cdc2df;
  --ink-3: #ae9fc6;
  --marke: #c4a6f5;
  --marke-ink: #d2baf8;
  --marke-weich: #2e2343;
  --lp-grund: #1d1727;
  --knopf-ink: #1a0f2e;
  --bg-rgb: 23 19 31;
  --flaeche-umriss: color-mix(in srgb, #4b3f5f 60%, #ae9fc6);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
:root[data-a-seite="nachtblau"]:not([data-thema="dunkel"]), :root:not([data-thema="dunkel"]) [data-a-seite="nachtblau"] {
  --bg: #eef3fb;
  --bg-tief: #e2eaf7;
  --karte: #fbfdff;
  --karte-2: #f2f6fd;
  --linie: #d6e0f0;
  --linie-kraeftig: #b9c8e2;
  --ink: #0f1b33;
  --ink-2: #2f3f5e;
  --ink-3: #3f4f6e;
  --marke: #1e40af;
  --marke-ink: #1e3a8a;
  --marke-weich: #dbe5fb;
  --lp-grund: #e6edfa;
  --knopf-ink: #ffffff;
  --bg-rgb: 238 243 251;
  --flaeche-umriss: color-mix(in srgb, #b9c8e2 60%, #3f4f6e);
  color-scheme: light;
}
}
:root[data-thema="hell"][data-a-seite="nachtblau"], :root[data-thema="hell"] [data-a-seite="nachtblau"] {
  --bg: #eef3fb;
  --bg-tief: #e2eaf7;
  --karte: #fbfdff;
  --karte-2: #f2f6fd;
  --linie: #d6e0f0;
  --linie-kraeftig: #b9c8e2;
  --ink: #0f1b33;
  --ink-2: #2f3f5e;
  --ink-3: #3f4f6e;
  --marke: #1e40af;
  --marke-ink: #1e3a8a;
  --marke-weich: #dbe5fb;
  --lp-grund: #e6edfa;
  --knopf-ink: #ffffff;
  --bg-rgb: 238 243 251;
  --flaeche-umriss: color-mix(in srgb, #b9c8e2 60%, #3f4f6e);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root[data-a-seite="nachtblau"]:not([data-thema="hell"]), :root:not([data-thema="hell"]) [data-a-seite="nachtblau"] {
  --bg: #0a1230;
  --bg-tief: #060c22;
  --karte: #121c40;
  --karte-2: #18234b;
  --linie: #263364;
  --linie-kraeftig: #33437c;
  --ink: #e6ecfb;
  --ink-2: #b9c5e6;
  --ink-3: #9aa9d3;
  --marke: #7aa2ff;
  --marke-ink: #93b4ff;
  --marke-weich: #1a2a5c;
  --lp-grund: #0e1738;
  --knopf-ink: #071233;
  --bg-rgb: 10 18 48;
  --flaeche-umriss: color-mix(in srgb, #33437c 60%, #9aa9d3);
  color-scheme: dark;
}
}
:root[data-thema="dunkel"][data-a-seite="nachtblau"], :root[data-thema="dunkel"] [data-a-seite="nachtblau"] {
  --bg: #0a1230;
  --bg-tief: #060c22;
  --karte: #121c40;
  --karte-2: #18234b;
  --linie: #263364;
  --linie-kraeftig: #33437c;
  --ink: #e6ecfb;
  --ink-2: #b9c5e6;
  --ink-3: #9aa9d3;
  --marke: #7aa2ff;
  --marke-ink: #93b4ff;
  --marke-weich: #1a2a5c;
  --lp-grund: #0e1738;
  --knopf-ink: #071233;
  --bg-rgb: 10 18 48;
  --flaeche-umriss: color-mix(in srgb, #33437c 60%, #9aa9d3);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
:root[data-a-seite="waldgruen"]:not([data-thema="dunkel"]), :root:not([data-thema="dunkel"]) [data-a-seite="waldgruen"] {
  --bg: #f1f6f0;
  --bg-tief: #e4eee2;
  --karte: #fbfdfa;
  --karte-2: #f3f8f2;
  --linie: #d7e5d4;
  --linie-kraeftig: #b8cfb3;
  --ink: #14261a;
  --ink-2: #34493a;
  --ink-3: #44594a;
  --marke: #2f6b3a;
  --marke-ink: #24572e;
  --marke-weich: #dcefdf;
  --lp-grund: #e7f1e5;
  --knopf-ink: #ffffff;
  --bg-rgb: 241 246 240;
  --flaeche-umriss: color-mix(in srgb, #b8cfb3 60%, #44594a);
  color-scheme: light;
}
}
:root[data-thema="hell"][data-a-seite="waldgruen"], :root[data-thema="hell"] [data-a-seite="waldgruen"] {
  --bg: #f1f6f0;
  --bg-tief: #e4eee2;
  --karte: #fbfdfa;
  --karte-2: #f3f8f2;
  --linie: #d7e5d4;
  --linie-kraeftig: #b8cfb3;
  --ink: #14261a;
  --ink-2: #34493a;
  --ink-3: #44594a;
  --marke: #2f6b3a;
  --marke-ink: #24572e;
  --marke-weich: #dcefdf;
  --lp-grund: #e7f1e5;
  --knopf-ink: #ffffff;
  --bg-rgb: 241 246 240;
  --flaeche-umriss: color-mix(in srgb, #b8cfb3 60%, #44594a);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root[data-a-seite="waldgruen"]:not([data-thema="hell"]), :root:not([data-thema="hell"]) [data-a-seite="waldgruen"] {
  --bg: #0d1a12;
  --bg-tief: #08120c;
  --karte: #14261a;
  --karte-2: #1a3022;
  --linie: #26402e;
  --linie-kraeftig: #33533c;
  --ink: #e3f1e5;
  --ink-2: #b7d0bc;
  --ink-3: #98b7a0;
  --marke: #6fcf86;
  --marke-ink: #8ddca0;
  --marke-weich: #173a22;
  --lp-grund: #102016;
  --knopf-ink: #06180c;
  --bg-rgb: 13 26 18;
  --flaeche-umriss: color-mix(in srgb, #33533c 60%, #98b7a0);
  color-scheme: dark;
}
}
:root[data-thema="dunkel"][data-a-seite="waldgruen"], :root[data-thema="dunkel"] [data-a-seite="waldgruen"] {
  --bg: #0d1a12;
  --bg-tief: #08120c;
  --karte: #14261a;
  --karte-2: #1a3022;
  --linie: #26402e;
  --linie-kraeftig: #33533c;
  --ink: #e3f1e5;
  --ink-2: #b7d0bc;
  --ink-3: #98b7a0;
  --marke: #6fcf86;
  --marke-ink: #8ddca0;
  --marke-weich: #173a22;
  --lp-grund: #102016;
  --knopf-ink: #06180c;
  --bg-rgb: 13 26 18;
  --flaeche-umriss: color-mix(in srgb, #33533c 60%, #98b7a0);
  color-scheme: dark;
}

/* --- Muno-Zubehoer: Anker je Foto (tools/muno_zubehoer.py --schreiben) --- */
/* Jedes Foto: wo der Anstecker am Hut sitzt (--mz-hx, --mz-hy,
   Breite --mz-hb) und wo der Ast ist (--mz-ay). Gemessen am Bild,
   festgehalten in tools/muno_anker.json. */
html[data-muno="basis"] .muno-foto[data-pose="daumen"] { --mz-hx: 49.81%; --mz-hy: 24.3%; --mz-hb: 7.14%; --mz-ay: 70.26%; }
html[data-muno="basis"] .muno-foto[data-pose="denkt"] { --mz-hx: 48.77%; --mz-hy: 22.51%; --mz-hb: 7.14%; --mz-ay: 71.79%; }
html[data-muno="basis"] .muno-foto[data-pose="feiert"] { --mz-hx: 49.18%; --mz-hy: 20.98%; --mz-hb: 7.14%; --mz-ay: 66.94%; }
html[data-muno="basis"] .muno-foto[data-pose="hoppla"] { --mz-hx: 46.89%; --mz-hy: 20.72%; --mz-hb: 7.14%; --mz-ay: 67.45%; }
html[data-muno="basis"] .muno-foto[data-pose="klatscht"] { --mz-hx: 49.39%; --mz-hy: 24.3%; --mz-hb: 7.14%; --mz-ay: 68.98%; }
html[data-muno="basis"] .muno-foto[data-pose="lauscht"] { --mz-hx: 49.81%; --mz-hy: 24.3%; --mz-hb: 7.14%; --mz-ay: 70.26%; }
html[data-muno="basis"] .muno-foto[data-pose="liest"] { --mz-hx: 51.89%; --mz-hy: 29.65%; --mz-hb: 7.14%; --mz-ay: 70.77%; }
html[data-muno="basis"] .muno-foto[data-pose="lupe"] { --mz-hx: 49.81%; --mz-hy: 24.3%; --mz-hb: 7.14%; --mz-ay: 70.26%; }
html[data-muno="basis"] .muno-foto[data-pose="pokal"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.26%; }
html[data-muno="basis"] .muno-foto[data-pose="ruht"] { --mz-hx: 49.18%; --mz-hy: 26.34%; --mz-hb: 7.14%; --mz-ay: 71.02%; }
html[data-muno="basis"] .muno-foto[data-pose="schreibt"] { --mz-hx: 50.64%; --mz-hy: 24.3%; --mz-hb: 7.14%; --mz-ay: 70.26%; }
html[data-muno="basis"] .muno-foto[data-pose="spricht"] { --mz-hx: 49.81%; --mz-hy: 24.3%; --mz-hb: 7.14%; --mz-ay: 70.26%; }
html[data-muno="basis"] .muno-foto[data-pose="staunt"] { --mz-hx: 49.81%; --mz-hy: 24.3%; --mz-hb: 7.14%; --mz-ay: 70.26%; }
html[data-muno="basis"] .muno-foto[data-pose="winkt"] { --mz-hx: 47.1%; --mz-hy: 25.06%; --mz-hb: 7.14%; --mz-ay: 68.72%; }
html[data-muno="basis"] .muno-foto[data-pose="zeigt"] { --mz-hx: 48.56%; --mz-hy: 21.74%; --mz-hb: 7.14%; --mz-ay: 70.26%; }
html[data-muno="de"] .muno-foto[data-pose="daumen"] { --mz-hx: 49.81%; --mz-hy: 25.57%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="de"] .muno-foto[data-pose="denkt"] { --mz-hx: 49.81%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="de"] .muno-foto[data-pose="feiert"] { --mz-hx: 47.1%; --mz-hy: 12.74%; --mz-hb: 7.14%; --mz-ay: 62.77%; }
html[data-muno="de"] .muno-foto[data-pose="hoppla"] { --mz-hx: 49.81%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="de"] .muno-foto[data-pose="klatscht"] { --mz-hx: 49.81%; --mz-hy: 25.57%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="de"] .muno-foto[data-pose="lauscht"] { --mz-hx: 49.81%; --mz-hy: 25.57%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="de"] .muno-foto[data-pose="liest"] { --mz-hx: 49.6%; --mz-hy: 12.58%; --mz-hb: 7.14%; --mz-ay: 57.09%; }
html[data-muno="de"] .muno-foto[data-pose="lupe"] { --mz-hx: 49.81%; --mz-hy: 25.57%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="de"] .muno-foto[data-pose="pokal"] { --mz-hx: 49.81%; --mz-hy: 25.57%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="de"] .muno-foto[data-pose="ruht"] { --mz-hx: 49.6%; --mz-hy: 12.56%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="de"] .muno-foto[data-pose="schreibt"] { --mz-hx: 50.64%; --mz-hy: 26.08%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="de"] .muno-foto[data-pose="spricht"] { --mz-hx: 49.81%; --mz-hy: 25.57%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="de"] .muno-foto[data-pose="staunt"] { --mz-hx: 49.81%; --mz-hy: 25.57%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="de"] .muno-foto[data-pose="winkt"] { --mz-hx: 49.81%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="de"] .muno-foto[data-pose="zeigt"] { --mz-hx: 47.31%; --mz-hy: 12.52%; --mz-hb: 7.14%; --mz-ay: 62.81%; }
html[data-muno="en"] .muno-foto[data-pose="daumen"] { --mz-hx: 49.81%; --mz-hy: 24.81%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="en"] .muno-foto[data-pose="denkt"] { --mz-hx: 49.39%; --mz-hy: 12.52%; --mz-hb: 7.14%; --mz-ay: 62.81%; }
html[data-muno="en"] .muno-foto[data-pose="feiert"] { --mz-hx: 49.6%; --mz-hy: 12.52%; --mz-hb: 7.14%; --mz-ay: 62.81%; }
html[data-muno="en"] .muno-foto[data-pose="hoppla"] { --mz-hx: 49.81%; --mz-hy: 12.27%; --mz-hb: 7.14%; --mz-ay: 62.81%; }
html[data-muno="en"] .muno-foto[data-pose="klatscht"] { --mz-hx: 49.81%; --mz-hy: 24.81%; --mz-hb: 7.14%; --mz-ay: 70.26%; }
html[data-muno="en"] .muno-foto[data-pose="lauscht"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="en"] .muno-foto[data-pose="liest"] { --mz-hx: 49.39%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="en"] .muno-foto[data-pose="lupe"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="en"] .muno-foto[data-pose="pokal"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="en"] .muno-foto[data-pose="ruht"] { --mz-hx: 49.6%; --mz-hy: 12.27%; --mz-hb: 7.14%; --mz-ay: 62.81%; }
html[data-muno="en"] .muno-foto[data-pose="schreibt"] { --mz-hx: 50.64%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="en"] .muno-foto[data-pose="spricht"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="en"] .muno-foto[data-pose="staunt"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="en"] .muno-foto[data-pose="winkt"] { --mz-hx: 49.81%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="en"] .muno-foto[data-pose="zeigt"] { --mz-hx: 49.6%; --mz-hy: 12.27%; --mz-hb: 7.14%; --mz-ay: 62.81%; }
html[data-muno="es"] .muno-foto[data-pose="daumen"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="es"] .muno-foto[data-pose="denkt"] { --mz-hx: 49.6%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="es"] .muno-foto[data-pose="feiert"] { --mz-hx: 50.01%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="es"] .muno-foto[data-pose="hoppla"] { --mz-hx: 50.22%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="es"] .muno-foto[data-pose="klatscht"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="es"] .muno-foto[data-pose="lauscht"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="es"] .muno-foto[data-pose="liest"] { --mz-hx: 49.6%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="es"] .muno-foto[data-pose="lupe"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="es"] .muno-foto[data-pose="pokal"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="es"] .muno-foto[data-pose="ruht"] { --mz-hx: 49.6%; --mz-hy: 11.29%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="es"] .muno-foto[data-pose="schreibt"] { --mz-hx: 50.64%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="es"] .muno-foto[data-pose="spricht"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="es"] .muno-foto[data-pose="staunt"] { --mz-hx: 49.6%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.26%; }
html[data-muno="es"] .muno-foto[data-pose="winkt"] { --mz-hx: 49.81%; --mz-hy: 12.27%; --mz-hb: 7.14%; --mz-ay: 62.81%; }
html[data-muno="es"] .muno-foto[data-pose="zeigt"] { --mz-hx: 49.6%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="fr"] .muno-foto[data-pose="daumen"] { --mz-hx: 49.81%; --mz-hy: 25.32%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="fr"] .muno-foto[data-pose="denkt"] { --mz-hx: 49.39%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="fr"] .muno-foto[data-pose="feiert"] { --mz-hx: 49.39%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="fr"] .muno-foto[data-pose="hoppla"] { --mz-hx: 50.01%; --mz-hy: 12.56%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="fr"] .muno-foto[data-pose="klatscht"] { --mz-hx: 49.81%; --mz-hy: 24.81%; --mz-hb: 7.14%; --mz-ay: 70.26%; }
html[data-muno="fr"] .muno-foto[data-pose="lauscht"] { --mz-hx: 49.81%; --mz-hy: 25.57%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="fr"] .muno-foto[data-pose="liest"] { --mz-hx: 49.6%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="fr"] .muno-foto[data-pose="lupe"] { --mz-hx: 49.81%; --mz-hy: 24.81%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="fr"] .muno-foto[data-pose="pokal"] { --mz-hx: 49.81%; --mz-hy: 24.81%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="fr"] .muno-foto[data-pose="ruht"] { --mz-hx: 49.39%; --mz-hy: 12.29%; --mz-hb: 7.14%; --mz-ay: 57.94%; }
html[data-muno="fr"] .muno-foto[data-pose="schreibt"] { --mz-hx: 50.64%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="fr"] .muno-foto[data-pose="spricht"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="fr"] .muno-foto[data-pose="staunt"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="fr"] .muno-foto[data-pose="winkt"] { --mz-hx: 49.6%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="fr"] .muno-foto[data-pose="zeigt"] { --mz-hx: 49.6%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="it"] .muno-foto[data-pose="daumen"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="it"] .muno-foto[data-pose="denkt"] { --mz-hx: 49.6%; --mz-hy: 11.29%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="it"] .muno-foto[data-pose="feiert"] { --mz-hx: 48.35%; --mz-hy: 11.39%; --mz-hb: 7.14%; --mz-ay: 62.93%; }
html[data-muno="it"] .muno-foto[data-pose="hoppla"] { --mz-hx: 49.39%; --mz-hy: 11.8%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="it"] .muno-foto[data-pose="klatscht"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="it"] .muno-foto[data-pose="lauscht"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="it"] .muno-foto[data-pose="liest"] { --mz-hx: 49.18%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="it"] .muno-foto[data-pose="lupe"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="it"] .muno-foto[data-pose="pokal"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="it"] .muno-foto[data-pose="ruht"] { --mz-hx: 49.39%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="it"] .muno-foto[data-pose="schreibt"] { --mz-hx: 50.64%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="it"] .muno-foto[data-pose="spricht"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="it"] .muno-foto[data-pose="staunt"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="it"] .muno-foto[data-pose="winkt"] { --mz-hx: 49.6%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="it"] .muno-foto[data-pose="zeigt"] { --mz-hx: 49.6%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="ja"] .muno-foto[data-pose="daumen"] { --mz-hx: 49.81%; --mz-hy: 24.3%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="ja"] .muno-foto[data-pose="denkt"] { --mz-hx: 49.81%; --mz-hy: 11.8%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="ja"] .muno-foto[data-pose="feiert"] { --mz-hx: 49.39%; --mz-hy: 11.29%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="ja"] .muno-foto[data-pose="hoppla"] { --mz-hx: 49.81%; --mz-hy: 11.54%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="ja"] .muno-foto[data-pose="klatscht"] { --mz-hx: 49.81%; --mz-hy: 24.3%; --mz-hb: 7.14%; --mz-ay: 70.26%; }
html[data-muno="ja"] .muno-foto[data-pose="lauscht"] { --mz-hx: 49.81%; --mz-hy: 24.3%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="ja"] .muno-foto[data-pose="liest"] { --mz-hx: 49.6%; --mz-hy: 11.8%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="ja"] .muno-foto[data-pose="lupe"] { --mz-hx: 49.81%; --mz-hy: 24.3%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="ja"] .muno-foto[data-pose="pokal"] { --mz-hx: 49.81%; --mz-hy: 24.3%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="ja"] .muno-foto[data-pose="ruht"] { --mz-hx: 49.6%; --mz-hy: 12.05%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="ja"] .muno-foto[data-pose="schreibt"] { --mz-hx: 50.64%; --mz-hy: 24.04%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="ja"] .muno-foto[data-pose="spricht"] { --mz-hx: 49.81%; --mz-hy: 24.3%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="ja"] .muno-foto[data-pose="staunt"] { --mz-hx: 49.81%; --mz-hy: 24.04%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="ja"] .muno-foto[data-pose="winkt"] { --mz-hx: 50.22%; --mz-hy: 11.8%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="ja"] .muno-foto[data-pose="zeigt"] { --mz-hx: 49.6%; --mz-hy: 11.29%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="ko"] .muno-foto[data-pose="daumen"] { --mz-hx: 49.81%; --mz-hy: 24.3%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="ko"] .muno-foto[data-pose="denkt"] { --mz-hx: 49.39%; --mz-hy: 12.56%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="ko"] .muno-foto[data-pose="feiert"] { --mz-hx: 49.18%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="ko"] .muno-foto[data-pose="hoppla"] { --mz-hx: 49.6%; --mz-hy: 11.88%; --mz-hb: 7.14%; --mz-ay: 57.09%; }
html[data-muno="ko"] .muno-foto[data-pose="klatscht"] { --mz-hx: 49.81%; --mz-hy: 24.3%; --mz-hb: 7.14%; --mz-ay: 70.26%; }
html[data-muno="ko"] .muno-foto[data-pose="lauscht"] { --mz-hx: 49.81%; --mz-hy: 24.3%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="ko"] .muno-foto[data-pose="liest"] { --mz-hx: 49.6%; --mz-hy: 11.88%; --mz-hb: 7.14%; --mz-ay: 57.09%; }
html[data-muno="ko"] .muno-foto[data-pose="lupe"] { --mz-hx: 49.81%; --mz-hy: 24.3%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="ko"] .muno-foto[data-pose="pokal"] { --mz-hx: 49.81%; --mz-hy: 24.3%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="ko"] .muno-foto[data-pose="ruht"] { --mz-hx: 49.6%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="ko"] .muno-foto[data-pose="schreibt"] { --mz-hx: 50.43%; --mz-hy: 24.04%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="ko"] .muno-foto[data-pose="spricht"] { --mz-hx: 49.81%; --mz-hy: 24.3%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="ko"] .muno-foto[data-pose="staunt"] { --mz-hx: 49.81%; --mz-hy: 24.3%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="ko"] .muno-foto[data-pose="winkt"] { --mz-hx: 49.6%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="ko"] .muno-foto[data-pose="zeigt"] { --mz-hx: 49.6%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="pt"] .muno-foto[data-pose="daumen"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="pt"] .muno-foto[data-pose="denkt"] { --mz-hx: 49.39%; --mz-hy: 12.26%; --mz-hb: 7.14%; --mz-ay: 57.68%; }
html[data-muno="pt"] .muno-foto[data-pose="feiert"] { --mz-hx: 59.81%; --mz-hy: 12.37%; --mz-hb: 7.14%; --mz-ay: 58%; }
html[data-muno="pt"] .muno-foto[data-pose="hoppla"] { --mz-hx: 49.6%; --mz-hy: 12.12%; --mz-hb: 7.14%; --mz-ay: 57.09%; }
html[data-muno="pt"] .muno-foto[data-pose="klatscht"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.26%; }
html[data-muno="pt"] .muno-foto[data-pose="lauscht"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="pt"] .muno-foto[data-pose="liest"] { --mz-hx: 49.6%; --mz-hy: 12.19%; --mz-hb: 7.14%; --mz-ay: 57.62%; }
html[data-muno="pt"] .muno-foto[data-pose="lupe"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="pt"] .muno-foto[data-pose="pokal"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="pt"] .muno-foto[data-pose="ruht"] { --mz-hx: 50.22%; --mz-hy: 12.12%; --mz-hb: 7.14%; --mz-ay: 57.09%; }
html[data-muno="pt"] .muno-foto[data-pose="schreibt"] { --mz-hx: 50.64%; --mz-hy: 24.3%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="pt"] .muno-foto[data-pose="spricht"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="pt"] .muno-foto[data-pose="staunt"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="pt"] .muno-foto[data-pose="winkt"] { --mz-hx: 50.22%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="pt"] .muno-foto[data-pose="zeigt"] { --mz-hx: 49.6%; --mz-hy: 12.26%; --mz-hb: 7.14%; --mz-ay: 57.68%; }
html[data-muno="zh"] .muno-foto[data-pose="daumen"] { --mz-hx: 49.81%; --mz-hy: 24.81%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="zh"] .muno-foto[data-pose="denkt"] { --mz-hx: 49.6%; --mz-hy: 11.8%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="zh"] .muno-foto[data-pose="feiert"] { --mz-hx: 50.43%; --mz-hy: 11.11%; --mz-hb: 7.14%; --mz-ay: 63.14%; }
html[data-muno="zh"] .muno-foto[data-pose="hoppla"] { --mz-hx: 49.39%; --mz-hy: 11.8%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="zh"] .muno-foto[data-pose="klatscht"] { --mz-hx: 49.81%; --mz-hy: 24.81%; --mz-hb: 7.14%; --mz-ay: 70.26%; }
html[data-muno="zh"] .muno-foto[data-pose="lauscht"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="zh"] .muno-foto[data-pose="liest"] { --mz-hx: 50.64%; --mz-hy: 12.31%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="zh"] .muno-foto[data-pose="lupe"] { --mz-hx: 49.81%; --mz-hy: 24.81%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="zh"] .muno-foto[data-pose="pokal"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="zh"] .muno-foto[data-pose="ruht"] { --mz-hx: 49.39%; --mz-hy: 11.54%; --mz-hb: 7.14%; --mz-ay: 62.6%; }
html[data-muno="zh"] .muno-foto[data-pose="schreibt"] { --mz-hx: 50.64%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="zh"] .muno-foto[data-pose="spricht"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="zh"] .muno-foto[data-pose="staunt"] { --mz-hx: 49.81%; --mz-hy: 24.55%; --mz-hb: 7.14%; --mz-ay: 70.51%; }
html[data-muno="zh"] .muno-foto[data-pose="winkt"] { --mz-hx: 49.6%; --mz-hy: 12.27%; --mz-hb: 7.14%; --mz-ay: 62.81%; }
html[data-muno="zh"] .muno-foto[data-pose="zeigt"] { --mz-hx: 49.6%; --mz-hy: 10.49%; --mz-hb: 7.14%; --mz-ay: 57.09%; }
/* Die Ebenen: je gewaehltem Teil ein Bild, als Variable — so
   gewinnt in der Anprobe der naechste Vorfahre (die Vorschau) vor
   der Wahl auf <html>. */
[data-a-hut="blume"] { --mz-hut: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22><g fill=%22%23f472b6%22 stroke=%22%239d174d%22 stroke-width=%221.2%22><circle cx=%2220%22 cy=%229%22 r=%227%22/><circle cx=%2230.5%22 cy=%2216.5%22 r=%227%22/><circle cx=%2226.5%22 cy=%2229%22 r=%227%22/><circle cx=%2213.5%22 cy=%2229%22 r=%227%22/><circle cx=%229.5%22 cy=%2216.5%22 r=%227%22/></g><circle cx=%2220%22 cy=%2220%22 r=%226%22 fill=%22%23fde047%22 stroke=%22%23a16207%22 stroke-width=%221.2%22/></svg>"); }
[data-a-hut="deanstecker"] { --mz-hut: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22><circle cx=%2220%22 cy=%2220%22 r=%2218%22 fill=%22%23fff%22 stroke=%22%231f2937%22 stroke-width=%222.5%22/><path d=%22M20 7.5l3.7 7.6 8.3 1.2-6 5.9 1.4 8.3L20 26.6l-7.4 3.9 1.4-8.3-6-5.9 8.3-1.2z%22 fill=%22%23b45309%22 stroke=%22%231f2937%22 stroke-width=%221.2%22 stroke-linejoin=%22round%22/></svg>"); }
[data-a-hut="enanstecker"] { --mz-hut: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22><circle cx=%2220%22 cy=%2220%22 r=%2218%22 fill=%22%23fff%22 stroke=%22%231f2937%22 stroke-width=%222.5%22/><path d=%22M20 7.5l3.7 7.6 8.3 1.2-6 5.9 1.4 8.3L20 26.6l-7.4 3.9 1.4-8.3-6-5.9 8.3-1.2z%22 fill=%22%232563eb%22 stroke=%22%231f2937%22 stroke-width=%221.2%22 stroke-linejoin=%22round%22/></svg>"); }
[data-a-hut="esanstecker"] { --mz-hut: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22><circle cx=%2220%22 cy=%2220%22 r=%2218%22 fill=%22%23fff%22 stroke=%22%231f2937%22 stroke-width=%222.5%22/><path d=%22M20 7.5l3.7 7.6 8.3 1.2-6 5.9 1.4 8.3L20 26.6l-7.4 3.9 1.4-8.3-6-5.9 8.3-1.2z%22 fill=%22%23dc2626%22 stroke=%22%231f2937%22 stroke-width=%221.2%22 stroke-linejoin=%22round%22/></svg>"); }
[data-a-hut="feder"] { --mz-hut: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22><path d=%22M21 38C17 28 18 14 30 2c3 10 1 22-9 36z%22 fill=%22%2338bdf8%22 stroke=%22%23075985%22 stroke-width=%221.4%22 stroke-linejoin=%22round%22/><path d=%22M21 38c2-12 5-22 9-36%22 fill=%22none%22 stroke=%22%23075985%22 stroke-width=%221.2%22/></svg>"); }
[data-a-hut="franstecker"] { --mz-hut: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22><circle cx=%2220%22 cy=%2220%22 r=%2218%22 fill=%22%23fff%22 stroke=%22%231f2937%22 stroke-width=%222.5%22/><path d=%22M20 7.5l3.7 7.6 8.3 1.2-6 5.9 1.4 8.3L20 26.6l-7.4 3.9 1.4-8.3-6-5.9 8.3-1.2z%22 fill=%22%234f46e5%22 stroke=%22%231f2937%22 stroke-width=%221.2%22 stroke-linejoin=%22round%22/></svg>"); }
[data-a-hut="hianstecker"] { --mz-hut: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22><circle cx=%2220%22 cy=%2220%22 r=%2218%22 fill=%22%23fff%22 stroke=%22%231f2937%22 stroke-width=%222.5%22/><path d=%22M20 7.5l3.7 7.6 8.3 1.2-6 5.9 1.4 8.3L20 26.6l-7.4 3.9 1.4-8.3-6-5.9 8.3-1.2z%22 fill=%22%23ea580c%22 stroke=%22%231f2937%22 stroke-width=%221.2%22 stroke-linejoin=%22round%22/></svg>"); }
[data-a-hut="itanstecker"] { --mz-hut: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22><circle cx=%2220%22 cy=%2220%22 r=%2218%22 fill=%22%23fff%22 stroke=%22%231f2937%22 stroke-width=%222.5%22/><path d=%22M20 7.5l3.7 7.6 8.3 1.2-6 5.9 1.4 8.3L20 26.6l-7.4 3.9 1.4-8.3-6-5.9 8.3-1.2z%22 fill=%22%2316a34a%22 stroke=%22%231f2937%22 stroke-width=%221.2%22 stroke-linejoin=%22round%22/></svg>"); }
[data-a-hut="jaanstecker"] { --mz-hut: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22><circle cx=%2220%22 cy=%2220%22 r=%2218%22 fill=%22%23fff%22 stroke=%22%231f2937%22 stroke-width=%222.5%22/><path d=%22M20 7.5l3.7 7.6 8.3 1.2-6 5.9 1.4 8.3L20 26.6l-7.4 3.9 1.4-8.3-6-5.9 8.3-1.2z%22 fill=%22%23db2777%22 stroke=%22%231f2937%22 stroke-width=%221.2%22 stroke-linejoin=%22round%22/></svg>"); }
[data-a-hut="koanstecker"] { --mz-hut: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22><circle cx=%2220%22 cy=%2220%22 r=%2218%22 fill=%22%23fff%22 stroke=%22%231f2937%22 stroke-width=%222.5%22/><path d=%22M20 7.5l3.7 7.6 8.3 1.2-6 5.9 1.4 8.3L20 26.6l-7.4 3.9 1.4-8.3-6-5.9 8.3-1.2z%22 fill=%22%237c3aed%22 stroke=%22%231f2937%22 stroke-width=%221.2%22 stroke-linejoin=%22round%22/></svg>"); }
[data-a-hut="planstecker"] { --mz-hut: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22><circle cx=%2220%22 cy=%2220%22 r=%2218%22 fill=%22%23fff%22 stroke=%22%231f2937%22 stroke-width=%222.5%22/><path d=%22M20 7.5l3.7 7.6 8.3 1.2-6 5.9 1.4 8.3L20 26.6l-7.4 3.9 1.4-8.3-6-5.9 8.3-1.2z%22 fill=%22%23be123c%22 stroke=%22%231f2937%22 stroke-width=%221.2%22 stroke-linejoin=%22round%22/></svg>"); }
[data-a-hut="ptanstecker"] { --mz-hut: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22><circle cx=%2220%22 cy=%2220%22 r=%2218%22 fill=%22%23fff%22 stroke=%22%231f2937%22 stroke-width=%222.5%22/><path d=%22M20 7.5l3.7 7.6 8.3 1.2-6 5.9 1.4 8.3L20 26.6l-7.4 3.9 1.4-8.3-6-5.9 8.3-1.2z%22 fill=%22%230d9488%22 stroke=%22%231f2937%22 stroke-width=%221.2%22 stroke-linejoin=%22round%22/></svg>"); }
[data-a-hut="stern"] { --mz-hut: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22><circle cx=%2220%22 cy=%2220%22 r=%2218%22 fill=%22%23fff%22 stroke=%22%2392400e%22 stroke-width=%222.5%22/><path d=%22M20 7.5l3.7 7.6 8.3 1.2-6 5.9 1.4 8.3L20 26.6l-7.4 3.9 1.4-8.3-6-5.9 8.3-1.2z%22 fill=%22%23facc15%22 stroke=%22%2392400e%22 stroke-width=%221.2%22 stroke-linejoin=%22round%22/></svg>"); }
[data-a-hut="transtecker"] { --mz-hut: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22><circle cx=%2220%22 cy=%2220%22 r=%2218%22 fill=%22%23fff%22 stroke=%22%231f2937%22 stroke-width=%222.5%22/><path d=%22M20 7.5l3.7 7.6 8.3 1.2-6 5.9 1.4 8.3L20 26.6l-7.4 3.9 1.4-8.3-6-5.9 8.3-1.2z%22 fill=%22%230891b2%22 stroke=%22%231f2937%22 stroke-width=%221.2%22 stroke-linejoin=%22round%22/></svg>"); }
[data-a-hut="zhanstecker"] { --mz-hut: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22><circle cx=%2220%22 cy=%2220%22 r=%2218%22 fill=%22%23fff%22 stroke=%22%231f2937%22 stroke-width=%222.5%22/><path d=%22M20 7.5l3.7 7.6 8.3 1.2-6 5.9 1.4 8.3L20 26.6l-7.4 3.9 1.4-8.3-6-5.9 8.3-1.2z%22 fill=%22%23ca8a04%22 stroke=%22%231f2937%22 stroke-width=%221.2%22 stroke-linejoin=%22round%22/></svg>"); }
[data-a-ast="laterne"] { --mz-ast: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22><path d=%22M20 1v5%22 stroke=%22%2344403c%22 stroke-width=%222%22/><rect x=%2211%22 y=%226%22 width=%2218%22 height=%224%22 rx=%221.5%22 fill=%22%2344403c%22/><rect x=%2212%22 y=%2210%22 width=%2216%22 height=%2224%22 rx=%223%22 fill=%22%23fde68a%22 stroke=%22%2344403c%22 stroke-width=%222%22/><path d=%22M20 16c3 3 3 9 0 12-3-3-3-9 0-12z%22 fill=%22%23f59e0b%22/><rect x=%2210%22 y=%2234%22 width=%2220%22 height=%225%22 rx=%221.5%22 fill=%22%2344403c%22/></svg>"); }
[data-a-ast="pilz"] { --mz-ast: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22><path d=%22M16 22h8l1.5 17h-11z%22 fill=%22%23fef3c7%22 stroke=%22%2378350f%22 stroke-width=%221.3%22/><path d=%22M3 23C3 11 11 4 20 4s17 7 17 19z%22 fill=%22%23dc2626%22 stroke=%22%237f1d1d%22 stroke-width=%221.4%22/><g fill=%22%23fff%22><circle cx=%2213%22 cy=%2213%22 r=%222.6%22/><circle cx=%2224%22 cy=%2210%22 r=%222.2%22/><circle cx=%2229%22 cy=%2218%22 r=%222.4%22/><circle cx=%2218%22 cy=%2219%22 r=%221.8%22/></g></svg>"); }
[data-a-hut="ohne"] { --mz-hut: none; }
[data-a-ast="ohne"] { --mz-ast: none; }
/* --- Ende Muno-Zubehoer --- */


/* --- Rueckfall fuer color-mix() -------------------------------------------
   Erzeugt von tools/browser_pruefen.py --schreiben. Nicht von Hand aendern:
   Die Pruefgruppe `browser` vergleicht ihn mit den Regeln darueber. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --ring: 0 0 0 3px var(--marke);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-thema="hell"]) {
      --ring: 0 0 0 3px var(--marke);
    }
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-thema="hell"]) * {
      --stufe-ink: var(--stufe-farbe, var(--marke));
    }
  }
  :root[data-thema="dunkel"] * {
    --stufe-ink: var(--stufe-farbe, var(--marke));
  }
  :root[data-thema="dunkel"] {
    --ring: 0 0 0 3px var(--marke);
  }
  * {
    --stufe-ink: var(--stufe-farbe, var(--marke));
  }
  .kopf {
    background: var(--bg);
  }
  .reiter {
    background: var(--bg);
  }
  .stufe-punkt {
    background: var(--karte);
    border: 1px solid var(--stufe-farbe, var(--marke));
  }
  .tafel-text {
    background: var(--karte);
  }
  .fr-zeile {
    background: var(--karte);
  }
  .buehne-schleier {
    background: linear-gradient(to bottom, var(--bg) calc(var(--schleier-oben) * 100%) 0%, var(--bg) calc(var(--schleier-rand) * 100%) 62%, var(--bg) 100%);
  }
  .wz {
    border: 1px solid var(--linie);
  }
  .paarwahl.sb {
    border: 1px solid var(--linie);
  }
  .sb-seite::before {
    background: radial-gradient(closest-side, transparent, transparent);
  }
  .sb-kreis {
    background: radial-gradient(circle at 50% 42%, var(--karte), var(--karte) 72%);
    box-shadow: 0 0 0 6px transparent, 0 18px 40px -16px var(--sf);
  }
  .sb-ring {
    border: 2px dashed var(--sf);
  }
  .sb-pfeil:hover {
    background: transparent;
  }
  .sb-blasen {
    border-top: 1px solid var(--linie);
  }
  .sb-blase:hover .sb-bild {
    box-shadow: 0 0 0 3px var(--sf), 0 10px 18px -8px var(--sf);
  }
  .sb-blase.sb-gewaehlt {
    background: transparent;
  }
  .sb-blase.sb-gewaehlt .sb-bild {
    box-shadow: 0 0 0 3px var(--sf), 0 10px 18px -8px var(--sf);
  }
  .sb-los {
    box-shadow: 0 12px 26px -12px var(--marke);
  }
  .form-kopf {
    background: var(--karte);
  }
  .spick-signale li {
    background: var(--karte);
  }
  .zband-achse .an i {
    box-shadow: 0 0 0 4px transparent;
  }
  .tr-tipp, .tr-faellig, .tr-wieder {
    background: var(--karte);
  }
  .stufe-kopf {
    background: var(--karte);
    border: 1px solid transparent;
  }
  .paarliste {
    background: var(--karte);
  }
  .uebung-fuss {
    background: var(--karte);
  }
  .ladeplatz {
    background: linear-gradient(90deg, var(--bg-tief) 25%, var(--bg-tief) 50%, var(--bg-tief) 75%);
  }
  .gr-einstieg {
    background: linear-gradient(135deg, var(--karte) 0%, var(--karte) 62%);
  }
  .gr-einstieg-proben a:hover {
    box-shadow: 0 0 0 3px transparent;
  }
  .reg-leiste {
    background: var(--karte);
  }
  .reg-suchfeld:focus-within {
    box-shadow: 0 0 0 3px transparent;
  }
  .reg-frage:hover, .reg-frage:focus-visible {
    border-color: var(--marke);
  }
  .jk-s1 {
    background: var(--bg-tief);
    border-color: var(--marke);
  }
  .jk-s2 {
    background: var(--marke);
    border-color: var(--marke);
  }
  .kat-karte:hover, .leiter-sprosse:hover, .gr-stufe:hover {
    box-shadow: var(--lift-hi), var(--schein-hof-hi), 0 0 0 1px var(--glanz-eigen), 0 0 20px -8px var(--glanz-eigen), var(--saum);
  }
  .knopf {
    background-image: linear-gradient(180deg, transparent 0%, transparent 55%, transparent 100%);
  }
  .knopf:hover {
    box-shadow: var(--lift-hi), 0 0 24px -8px var(--marke);
  }
  .lp-katleiste {
    background: var(--lp-grund);
  }
  .lp-kat-balken {
    background: var(--linie);
  }
  .lp-weg-pfad {
    stroke: var(--k-zeiten);
  }
  .lp-stein {
    box-shadow: inset 0 0 0 2.5px var(--kat), inset 0 -4px 0 var(--kat), 0 3px 8px rgba(15, 23, 42, .08);
  }
  .lp-weg2 .lp-unsicher .lp-stein {
    background: linear-gradient(180deg, #fff 50%, var(--kat) 50%);
  }
  .lp-weg2 .lp-gelesen .lp-stein {
    background: var(--kat);
  }
  .lp-weg2 .lp-naechstes .lp-stein {
    box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .12), 0 0 0 6px var(--kat), 0 6px 14px rgba(15, 23, 42, .16);
  }
  .lp-teaser-kat {
    box-shadow: inset 0 0 0 1px var(--kat);
  }
  .pfadleiste-zurueck {
    background: var(--karte);
  }
  .pfadleiste-zurueck:hover {
    background: var(--karte);
  }
  .tr-ergebnis {
    background: var(--karte);
    box-shadow: inset 0 0 0 1.5px var(--ts-farbe);
  }
  .tr-ergebnis[data-status="unsicher"] .tr-ergebnis-zeichen {
    background: linear-gradient(90deg, var(--ts-farbe) 50%, var(--karte) 50%);
  }
  .gk-stufe {
    background: var(--karte);
  }
  .gk-stufe.gk-an {
    background: var(--karte);
  }
  .gk-zelle {
    border-top: 1px solid transparent;
    background: transparent;
  }
  .zl-stufe.zl-an {
    background: var(--karte);
  }
  .zl-station[data-station="jetzt"] {
    border-color: var(--marke);
  }
  .zl-station[data-station="jetzt"] .zl-punkt {
    box-shadow: 0 0 0 4px transparent;
  }
  .probe-sprache.an {
    background: var(--karte);
  }
  .probe-aufloesung {
    background: var(--karte);
  }
  .heute-eti {
    color: var(--ink);
  }
  .probe-ziel-knopf[aria-pressed="true"] {
    background: var(--karte);
  }
  .regel-beispiel {
    background: var(--karte);
    border-left: 3px solid var(--kat, var(--marke));
  }
  .np-liste li:first-child .np-stein, .np-jetzt .np-stein {
    box-shadow: 0 0 0 4px var(--kat);
  }
  .np-gelesen .np-stein {
    background: var(--kat);
  }
  .np-unsicher .np-stein {
    background: linear-gradient(180deg, #fff 50%, var(--kat) 50%);
  }
  @media (max-width: 780px) {
    .tableiste {
      background: var(--karte);
    }
  }
  .vk-filter {
    background: var(--bg);
  }
  .vk-balken {
    background: var(--linie);
  }
  .vk-b-angefasst {
    background: var(--vk, var(--marke));
  }
  .sp-stufe-marke {
    border: 1px solid var(--stufe-farbe, var(--marke));
    background: transparent;
  }
  :root:not([data-thema="dunkel"]) .sp-stufe-marke {
    color: #000;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-thema="hell"]) .sp-stufe-marke {
      color: #fff;
    }
  }
  :root[data-thema="dunkel"] .sp-stufe-marke {
    color: #fff;
  }
  .anw-chip {
    background: var(--karte);
    border: 1px solid var(--linie);
  }
  .anw-chip-zahl {
    color: var(--ink);
  }
  .anw-warum {
    background: var(--karte);
  }
  .anw-warum h2 {
    color: var(--ink);
  }
  .anw-probe summary::marker {
    color: var(--ink);
  }
  .ib-kopf:hover {
    background: var(--karte);
  }
  .infoblock[open] > .ib-kopf {
    background: var(--karte);
  }
  .ik-beispiel {
    background: var(--karte);
    border-left: 3px solid var(--ik-farbe, var(--kat, var(--marke)));
  }
  .anw-balken-gesehen {
    background: var(--kat);
  }
  .tz-faellig {
    background: transparent;
  }
  .tk-balken {
    background: transparent;
  }
  .bl-muster-pfad {
    background: var(--bg);
  }
  .bl-muster-klang i, .bl-muster-vitrine i, .bl-muster-schutz i, .bl-muster-urkunde i {
    background: var(--karte);
  }
  .lr-pfad {
    background: var(--bg);
  }
  .bl-rahmen-enrahmen, .bl-rahmen-derahmen, .bl-rahmen-esrahmen, .bl-rahmen-frrahmen, .bl-rahmen-itrahmen, .bl-rahmen-ptrahmen, .bl-rahmen-jarahmen, .bl-rahmen-zhrahmen, .bl-rahmen-korahmen, .bl-rahmen-hirahmen, .bl-rahmen-trrahmen, .bl-rahmen-plrahmen {
    background: #fff;
  }
  [data-a-pfad] .lp-weg2 {
    --lp-grund: var(--bg);
  }
  [data-a-karte="punkte"] .lernkarte-wort {
    background-image: radial-gradient(transparent 1.2px, transparent 1.6px);
  }
  [data-a-karte="papier"] .lernkarte-wort {
    background-image: repeating-linear-gradient(transparent 0 23px, transparent 23px 24px);
    border-left: 4px solid var(--fehler);
  }
  [data-a-karte$="karte"] .lernkarte-wort {
    background-image: linear-gradient(135deg, transparent 0 18px, transparent 18px);
  }
  .ef-buehne[data-effekt$="effekt"] i:nth-child(2n) {
    --ef-farbe: var(--efset, var(--marke));
  }
  .bl-album-set {
    background: var(--karte);
  }
  @media (prefers-color-scheme: light) {
    :root[data-a-seite="sepia"]:not([data-thema="dunkel"]), :root:not([data-thema="dunkel"]) [data-a-seite="sepia"] {
      --flaeche-umriss: #d2c2a6;
    }
  }
  :root[data-thema="hell"][data-a-seite="sepia"], :root[data-thema="hell"] [data-a-seite="sepia"] {
    --flaeche-umriss: #d2c2a6;
  }
  @media (prefers-color-scheme: dark) {
    :root[data-a-seite="sepia"]:not([data-thema="hell"]), :root:not([data-thema="hell"]) [data-a-seite="sepia"] {
      --flaeche-umriss: #52443a;
    }
  }
  :root[data-thema="dunkel"][data-a-seite="sepia"], :root[data-thema="dunkel"] [data-a-seite="sepia"] {
    --flaeche-umriss: #52443a;
  }
  @media (prefers-color-scheme: light) {
    :root[data-a-seite="pastell"]:not([data-thema="dunkel"]), :root:not([data-thema="dunkel"]) [data-a-seite="pastell"] {
      --flaeche-umriss: #d3c7ea;
    }
  }
  :root[data-thema="hell"][data-a-seite="pastell"], :root[data-thema="hell"] [data-a-seite="pastell"] {
    --flaeche-umriss: #d3c7ea;
  }
  @media (prefers-color-scheme: dark) {
    :root[data-a-seite="pastell"]:not([data-thema="hell"]), :root:not([data-thema="hell"]) [data-a-seite="pastell"] {
      --flaeche-umriss: #4b3f5f;
    }
  }
  :root[data-thema="dunkel"][data-a-seite="pastell"], :root[data-thema="dunkel"] [data-a-seite="pastell"] {
    --flaeche-umriss: #4b3f5f;
  }
  @media (prefers-color-scheme: light) {
    :root[data-a-seite="nachtblau"]:not([data-thema="dunkel"]), :root:not([data-thema="dunkel"]) [data-a-seite="nachtblau"] {
      --flaeche-umriss: #b9c8e2;
    }
  }
  :root[data-thema="hell"][data-a-seite="nachtblau"], :root[data-thema="hell"] [data-a-seite="nachtblau"] {
    --flaeche-umriss: #b9c8e2;
  }
  @media (prefers-color-scheme: dark) {
    :root[data-a-seite="nachtblau"]:not([data-thema="hell"]), :root:not([data-thema="hell"]) [data-a-seite="nachtblau"] {
      --flaeche-umriss: #33437c;
    }
  }
  :root[data-thema="dunkel"][data-a-seite="nachtblau"], :root[data-thema="dunkel"] [data-a-seite="nachtblau"] {
    --flaeche-umriss: #33437c;
  }
  @media (prefers-color-scheme: light) {
    :root[data-a-seite="waldgruen"]:not([data-thema="dunkel"]), :root:not([data-thema="dunkel"]) [data-a-seite="waldgruen"] {
      --flaeche-umriss: #b8cfb3;
    }
  }
  :root[data-thema="hell"][data-a-seite="waldgruen"], :root[data-thema="hell"] [data-a-seite="waldgruen"] {
    --flaeche-umriss: #b8cfb3;
  }
  @media (prefers-color-scheme: dark) {
    :root[data-a-seite="waldgruen"]:not([data-thema="hell"]), :root:not([data-thema="hell"]) [data-a-seite="waldgruen"] {
      --flaeche-umriss: #33533c;
    }
  }
  :root[data-thema="dunkel"][data-a-seite="waldgruen"], :root[data-thema="dunkel"] [data-a-seite="waldgruen"] {
    --flaeche-umriss: #33533c;
  }
}
/* --- Ende des Rueckfalls fuer color-mix() --- */

/* Suchfeld auf der Fehlerseite (tools/seiten_bauen.py, fehlerseite). */
.fehler-suche { display: flex; gap: .5rem; align-items: center; margin-top: 1.2rem; }
.fehler-suche .antwort-feld { flex: 1 1 auto; min-width: 0; }

/* Wortpaket: erst vorstellen, dann abfragen (assets/js/ueben.js, vorstellung). */
.wortpaket-liste { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .7rem; }
.wortpaket-liste li { border-top: 1px solid var(--linie, rgba(0,0,0,.1)); padding-top: .6rem; }
.wortpaket-wort { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.wortpaket-wort b { font-size: 1.15rem; }
.wortpaket-wort .hoerknopf { min-height: 32px; padding: .2rem .5rem; }
.wortpaket-satz { margin: .3rem 0 0; }

/* Munos Gruss auf der Startseite eines Paares (paarstart.js, munoGruss). */
.muno-gruss.mg-paar { margin: 1rem 0 .5rem; }

/* --- „Diese Zeit mit anderen Verben“ (seiten_konjugation.zeitkasten) ------
   Unter der Formtafel eines Zeitformen-Themas, eingeklappt: eine Zeile, bis
   jemand sie braucht. Die Verben oeffnen den Konjugator bei dieser Zeit. */
.zeitkasten {
  margin: 1rem 0 1.4rem; border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--karte); box-shadow: var(--schatten-1);
}
.zeitkasten > summary {
  cursor: pointer; padding: .75rem 1rem; font-weight: 600; color: var(--ink);
  min-height: 2.75rem; display: flex; align-items: center; gap: .5rem;
}
.zeitkasten > summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--rund); }
.zeitkasten[open] > summary { border-bottom: 1px solid var(--linie); }
.zeitkasten > :not(summary) { margin-left: 1rem; margin-right: 1rem; }
.zeitkasten > p { margin-top: .75rem; margin-bottom: .6rem; }
.zeitkasten .kj-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .8rem; }
.zeitkasten .kj-chips a {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: .35rem .85rem;
  border: 1px solid var(--linie-kraeftig); border-radius: var(--rund-voll);
  background: var(--karte); color: var(--ink); text-decoration: none; font-weight: 500;
}
.zeitkasten .kj-chips a:hover, .zeitkasten .kj-chips a:focus-visible {
  background: var(--marke-weich); border-color: var(--marke); color: var(--marke-ink);
}
.zeitkasten-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; margin-bottom: 1rem; }
.zeitkasten-feld { display: grid; gap: .25rem; flex: 1 1 12rem; font-size: .9rem; color: var(--ink-2); }
.zeitkasten-feld input {
  font: inherit; font-size: 1rem; padding: .5rem .7rem; min-height: 2.75rem;
  border: 1.5px solid var(--linie-kraeftig); border-radius: var(--rund-s);
  background: var(--karte); color: var(--ink);
}
.zeitkasten-feld input:focus-visible { outline: none; border-color: var(--marke); box-shadow: var(--ring); }
@media print { .zeitkasten { display: none; } }

/* --- Platz vorab freihalten (CLS) -------------------------------------------
   Was ein Skript gleich nach dem Laden einblendet, schob bisher alles
   darunter nach unten: auf der Startseite Munos Begruessung (CLS 0,43 auf
   dem Telefon), auf den Wortlisten der Uebungskasten (0,19). Das Inline-
   Skript im Kopf (vorlage.py) setzt die Marken, bevor gezeichnet wird; hier
   steht nur der Platz, unsichtbar, bis das Skript den Inhalt bringt. */
/* `!important`, weil `[hidden] { display: none !important }` (oben) sonst
   gewinnt; diese Regeln sind spezifischer und gelten nur mit der Marke. */
html[data-gruss-platz] [data-rolle="muno-gruss"][hidden] {
  display: flex !important; visibility: hidden; min-height: 5.5rem;
}
html[data-js] .uebung-karte[data-rolle="wortblock"][hidden] {
  display: block !important; visibility: hidden; min-height: 261px;
}
@media (max-width: 640px) {
  html[data-js] .uebung-karte[data-rolle="wortblock"][hidden] { min-height: 513px; }
}
@media (max-width: 360px) {
  html[data-js] .uebung-karte[data-rolle="wortblock"][hidden] { min-height: 541px; }
}

/* Unter einer Wortart der Wortliste: die Grundlagenthemen dazu
   (seiten_lernen._wortart_grammatik). Eine stille Zeile, kein Kasten. */
.wortart-grammatik { margin: -.2rem 0 .7rem; font-size: .92rem; }
/* Kein `nowrap` an den Verweisen: Ein Thementitel wie „Ohne Artikel: dom
   heißt …" ist auf 320 Pixeln breiter als die Zeile (Layoutprüfung,
   2. November 2026: 32 Pixel seitliches Scrollen auf 289 Wortlisten). */
/* Das Wort des Tages weitergeben (startseite.js, teilenKnopf). */
.heute-teilen { align-self: flex-start; margin-top: .4rem; min-height: 2.5rem; font-size: .9rem; }

/* Die Serie im Kopf (glimo.js, serieZeichnen): neben den Glimo, im selben
   Format. Hohl, solange das Tagesziel heute offen ist. */
.serie-chip {
  display: inline-flex; align-items: center; gap: .18rem;
  margin-left: .3rem; padding: .05rem .4rem .05rem .3rem;
  border-radius: var(--rund-voll, 999px); background: var(--bg-tief);
  color: var(--warn); font-size: .78rem; font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.serie-chip svg path { fill: currentColor; }
.serie-chip[data-heute="offen"] svg path { fill: none; }
.hauptnavi .serie-chip { margin-block: -.3rem; font-size: .72rem; }
@media (max-width: 1119px) { .hauptnavi .serie-chip { display: none; } }
.tableiste .serie-chip {
  position: absolute; top: .05rem; right: calc(50% + 4px); margin: 0;
  padding: 0 .28rem; font-size: .62rem; line-height: 1.35;
  background: var(--karte); border: 1px solid var(--linie);
}
.tableiste .serie-chip svg { width: 10px; height: 10px; }
/* Im Kasten am Rundenende: der morgige Tag der Serie (dranbleiben.js). */
.erinnerung-serie { font-weight: 700; color: var(--warn); margin: .1rem 0 .3rem; }
/* „Weiß ich nicht" neben „Prüfen" (uebungsblock.js, aufgeben). */
.uebung-fuss .ub-weiss-nicht { min-height: 2.75rem; }
.wl-nachschlagen { margin: .4rem 0 1rem; }
/* Einmal nach der dritten Runde (uebungsblock.js, wunschFrage). */
.ergebnis-wunsch { margin: .8rem 0 0; font-size: .95rem; color: var(--ink-2); }
/* Der Knopf „Link kopieren“ kommt per Skript in den Kopf eines Themas
   (teilen.js) und schob alles darunter um 59 px nach unten. Bis er da
   ist, haelt der Kopf seinen Platz frei: Abstand der Zeile plus Knopf. */
@media screen {
  html[data-js] .thema-seite > header.seitenkopf:not(.teilen-da)::after {
    content: ""; display: block; height: calc(.9rem + 44px);
  }
}
/* Die Themenliste einer Grammatikseite steht im HTML offen (ohne Skript
   soll man sie lesen koennen), und themaseite.js klappt sie auf schmalen
   Schirmen zu — nach dem ersten Bild. Die ganze Seite sprang dabei um die
   Laenge der Liste (CLS bis 0,75). Mit Skript ist sie deshalb von Anfang an
   zu, bis das Skript `open` selbst setzt (`gnav-bereit`). */
@media (max-width: 63.99rem) {
  html[data-js] .mit-gnav > .gnav:not(.gnav-bereit) > :not(summary) { display: none !important; }
}
/* Auf dem Telefon ist der Knopf „Link kopieren“ etwas flacher (teilen.css). */
@media screen and (max-width: 30rem) {
  html[data-js] .thema-seite > header.seitenkopf:not(.teilen-da)::after { height: calc(.9rem + 2.5rem); }
}
/* Der Stand-Chip wird vom Skript sichtbar gemacht; mit Skript den Platz
   gleich halten, sonst rutscht auf dem Handy alles darunter um eine Zeile. */
html[data-js] .pfad-stand[hidden] { display: inline-flex !important; visibility: hidden; min-width: 6.5rem; }
/* Kästen, die ein Skript erst nach dem ersten Bild zeigt oder füllt: mit
   Skript den Platz vorab freihalten (etwas knapper als der fertige Kasten,
   damit nichts nach oben zurückspringt). Gemessen mit
   tools/springen_pruefen.mjs. */
html[data-js] .glimo-karte[data-rolle="glimo"][hidden] { display: block !important; visibility: hidden; min-height: 360px; }
html[data-js] .fs-heute[data-rolle="heute"]:empty { min-height: 220px; }
html[data-js] .bl-chip[data-rolle="coins-chip"][hidden] { display: inline-flex !important; visibility: hidden; min-height: 2.5rem; min-width: 10.5rem; }
html[data-js] .lesestand[data-rolle="lesepasst"][hidden] { display: block !important; visibility: hidden; min-height: 160px; }
html[data-js] .uebung-karte[data-rolle="einstufung"][hidden] { display: block !important; visibility: hidden; min-height: 210px; }
html[data-js] .uebung-karte[data-rolle="wortschatztest"][hidden] { display: block !important; visibility: hidden; min-height: 170px; }
/* „Kennst du das schon?" zeigt themaseite.js immer, sobald es läuft; der
   Inhalt steht schon im HTML. Also gleich in echter Höhe, unsichtbar — seit
   der Themakopf auf dem Telefon zusammengerückt ist, lag das Einblenden
   ganz im ersten Bildschirm und schob alles darunter um 230 Pixel. */
html[data-js] section.kennst[data-rolle="kennst"][hidden] { display: block !important; visibility: hidden; }
/* Die Tageskarte einer Paar-Startseite zeigt tageskarte.js immer, gefüllt
   erst im Skript (gemessen: 177 Pixel mit Lernstand, 226 ohne). Ohne den
   Platz schob sie alles darunter, und mit dem eingeklappten Werbesatz für
   Wiederkehrer lag das ganz im ersten Bildschirm (CLS 0,27). */
html[data-js] .tageskarte[data-rolle="tageskarte"][hidden] { display: grid !important; visibility: hidden; min-height: 180px; }
html[data-js] .kj-filter[data-rolle="kj-filter"][hidden] { display: block !important; visibility: hidden; }
html[data-js] .kj-filter [data-rolle="kj-stand"]:empty::before { content: "\00a0"; }
@media (max-width: 640px) {
  html[data-js] .glimo-karte[data-rolle="glimo"][hidden] { min-height: 400px; }
  html[data-js] .fs-heute[data-rolle="heute"]:empty { min-height: 290px; }
  html[data-js] .lesestand[data-rolle="lesepasst"][hidden] { min-height: 220px; }
  html[data-js] .uebung-karte[data-rolle="einstufung"][hidden] { min-height: 270px; }
  html[data-js] .uebung-karte[data-rolle="wortschatztest"][hidden] { min-height: 180px; }
}

/* === Saubere Umbrueche (Design Easy Wins, November 2026) ===
   Ueberschriften gleich lange Zeilen statt eines Wortes allein in der
   letzten; Absaetze ohne Einzelwort am Ende. Browser ohne Unterstuetzung
   ignorieren beides und brechen wie bisher. */
main h1, main h2, main h3 { text-wrap: balance; }
main p, main li, main dd { text-wrap: pretty; }

/* Tippflächen in dichten Listen auf dem Telefon: 44 statt 32 Pixel, wie
   Apple und Google es für Ziele untereinander empfehlen. Die Leiste ist dort
   ein zugeklapptes <details>; wer sie öffnet, will darin treffen. */
@media (max-width: 48rem) {
  .gnav-themen a { min-height: 44px; }
}

/* Der Kopf einer Themaseite auf dem Telefon (Design Easy Wins, November
   2026): Gemessen bei 390 Pixeln begann „Kennst du das schon?" erst bei
   675 von 844 Pixeln — Krumen, Titel, Einleitung, Teilen, Pfadleiste und
   Sprungleiste standen davor, jedes mit dem Abstand, den es am Desktop
   braucht. Nichts davon fällt weg; es rückt zusammen. Die letzte Krume ist
   der Titel darunter noch einmal und bleibt für Vorleseprogramme da. */
@media (max-width: 40rem) {
  .thema-seite > .seitenkopf { padding-top: .6rem; padding-bottom: .4rem; }
  .thema-seite .brotkrumen { margin-bottom: .2rem; }
  .thema-seite .brotkrumen > span:nth-last-child(2),
  .thema-seite .brotkrumen > [aria-current="page"] {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .thema-seite .teilen-zeile { margin-top: .5rem; }
  .thema-seite .pfadleiste {
    margin-top: .6rem; padding: .3rem .4rem; gap: .3rem .6rem;
  }
  .thema-seite .sprungleiste { margin: .5rem 0 .7rem; }
}

/* Die Startseite eines Paars für jemanden, der schon lernt (Design Easy
   Wins, November 2026): Gemessen bei 390 Pixeln stand die Tageskarte bei
   847 Pixeln, unter dem ersten Bildschirm, weil davor der Werbesatz für
   Neue 152 Pixel hoch stand. `data-dabei` setzt das Kopfskript vor dem
   ersten Bild (tools/vorlage.py), also springt nichts. */
@media (max-width: 40rem) {
  html[data-dabei] .buehne-kompakt .hero-sub { display: none; }
  html[data-dabei] .buehne-kompakt .buehne-innen { padding-top: 1.4rem; }
}

/* „Zu meiner Stelle" auf dem Lernpfad (lernpfad.js): schwebt fest am
   unteren Rand, auf dem Telefon über der Tableiste, und verschiebt nichts. */
.lp-zu-stelle {
  position: fixed; z-index: 40; left: 50%; transform: translateX(-50%);
  bottom: calc(1.2rem + env(safe-area-inset-bottom));
  min-height: 44px; padding: .55rem 1.1rem; border: 0; border-radius: 999px;
  background: var(--marke); color: var(--knopf-ink); font: inherit; font-weight: 700;
  box-shadow: 0 6px 20px rgb(15 23 42 / .22); cursor: pointer;
}
.lp-zu-stelle:hover { filter: brightness(1.08); }
.lp-zu-stelle:focus-visible { outline: none; box-shadow: var(--ring); }
.lp-zu-stelle[hidden] { display: none; }
/* Der Hinweis „Fortschritt sichern?" liegt an derselben Stelle und hat
   Vorrang; nach seinem Schließen ist der Knopf wieder da. */
body:has(> .konto-hinweis:not([hidden])) .lp-zu-stelle { display: none; }
@media (max-width: 780px) {
  .lp-zu-stelle { bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
}
@media print { .lp-zu-stelle { display: none !important; } }

/* --- Erklaerfilm (assets/js/erklaerfilm.js) --------------------------------
   Der Platz vor dem Merksatz ist mit Skript freigehalten, bis das Skript ihn
   fuellt — sonst rutscht der Merksatz nach unten, sobald der Knopf kommt. */
html[data-js] .ef-platz[hidden] { display: flex !important; visibility: hidden; }
.ef-platz { display: flex; align-items: center; gap: 1rem; min-height: 3.6rem; margin: .4rem 0 1rem; }
.ef-start { display: inline-flex; align-items: center; gap: .7rem; text-align: left; padding: .55rem 1.1rem .55rem .65rem; }
.ef-start-zeichen {
  display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--bg); color: var(--marke-ink); font-size: .9rem; padding-left: .15rem;
}
.ef-start-text { display: grid; line-height: 1.25; }
.ef-start-dauer { font-size: .8rem; font-weight: 400; opacity: .85; }
.ef-start-hinweis { font-size: .85rem; line-height: 1.3; color: var(--ink-3); max-width: 22rem; }
@media (max-width: 40rem) { .ef-start-hinweis { display: none; } }
.lp-weiter-karte { flex-wrap: wrap; }
.lp-weiter-karte .lp-weiter-film {
  flex: none; background: transparent; color: var(--bg); border-color: currentColor;
}
.lp-weiter-karte .lp-weiter-text { flex: 1 1 12rem; }
.lp-karte-film { font-weight: 600; margin-left: auto; }

.ef-buehne {
  pointer-events: auto; position: fixed; inset: 0; z-index: 2147483000;
  display: grid; place-items: center; background: rgb(15 23 42 / .72); padding: 1rem;
}
.ef-buehne[hidden] { display: none; }
html.ef-offen, html.ef-offen body { overflow: hidden; }
html.ef-offen .tableiste { display: none; }
.ef-rahmen {
  width: min(46rem, 100%); height: min(42rem, 100%); display: grid;
  grid-template-rows: auto 1fr auto auto auto;
  background: var(--karte); color: var(--ink); border-radius: 1rem;
  box-shadow: 0 20px 60px rgb(0 0 0 / .35); overflow: hidden;
}
.ef-punkte { display: flex; gap: .3rem; list-style: none; margin: 0; padding: .7rem 1rem 0; }
.ef-punkte li { flex: 1; display: flex; }
.ef-punkte button {
  flex: 1; height: 18px; padding: 7px 0; border: 0; background: var(--linie);
  background-clip: content-box; border-radius: 2px; cursor: pointer;
}
.ef-punkte button.ef-war, .ef-punkte button.ef-jetzt { background-color: var(--marke); }
.ef-punkte button.ef-jetzt { opacity: .55; }
.ef-ort { padding: 1rem 1.4rem; overflow: auto; display: grid; align-content: center; }
.ef-folie { display: grid; gap: .8rem; font-size: 1.15rem; }
.ef-rein { animation: ef-rein .4s ease-out; }
.ef-ut-rein { animation: ef-rein .25s ease-out; }
@keyframes ef-rein { from { opacity: 0; } to { opacity: 1; } }
.ef-kopf {
  margin: 0; font-size: .85rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--marke-ink);
}
.ef-folie h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0; }
.ef-merksatz .vm-satz, .ef-ende .vm-satz {
  display: block; font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 600; line-height: 1.4;
}
.ef-ende .vm-satz { font-size: 1.1rem; padding: .7rem .9rem; border-radius: .6rem; background: var(--marke-weich); }
.ef-tafel table { width: 100%; margin: 0; }
.ef-folie .satzpaar { display: grid; gap: .2rem; padding: .7rem .9rem; border-radius: .6rem; background: var(--karte-2); }
.ef-folie .satzpaar .ziel { font-size: 1.2em; font-weight: 600; }
.ef-falle .fr-zeile { font-size: 1.15em; padding: .5rem .8rem; border-radius: .5rem; }
/* Was noch nicht gesprochen ist, steht schon da (die Folie springt nicht),
   aber blass; was gerade dran ist, leuchtet. */
.ef-noch { opacity: .14; }
.ef-tafel tr, .ef-beispiel, .ef-falle .fr-zeile { transition: opacity .35s ease, background-color .35s ease; }
.ef-jetzt-zeile { background-color: var(--marke-weich); }
.ef-ende-knoepfe { margin: .4rem 0 0; }
.ef-untertitel {
  --ut: 1.05rem;
  margin: 0; padding: 0 1.2rem; box-sizing: border-box; height: calc(var(--ut) * 2.8 + 1.4rem);
  display: flex; align-items: center; overflow: hidden;
  background: #0f172a; color: #f8fafc; font-size: var(--ut); line-height: 1.4;
}
.ef-untertitel.ef-ut-lang { font-size: calc(var(--ut) * .8); line-height: 1.25; }
/* Lesung und Umschrift im Untertitel (Pinyin, Furigana, Romaji, die
   koreanische und die Hindi-Umschrift — alle als .ja-w): auf dem dunklen
   Balken hell, nicht in der Tintenfarbe der Seite. */
.ef-untertitel rt, .ef-untertitel .ja-w::after { color: #cbd5e1; }
.ef-ohne-ut .ef-untertitel { visibility: hidden; }
.ef-leiste { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem; flex-wrap: wrap; }
.ef-leiste button {
  min-width: 44px; min-height: 44px; border-radius: 999px; border: 1px solid var(--linie);
  background: var(--karte); color: var(--ink); font: inherit; cursor: pointer;
}
.ef-leiste .ef-cc, .ef-leiste .ef-tempo { font-size: .8rem; font-weight: 700; }
.ef-leiste .ef-cc[aria-pressed="false"] { text-decoration: line-through; opacity: .6; }
.ef-leiste .ef-zu { margin-left: auto; }
.ef-aufnahme-leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem;
  padding: .5rem 1rem .7rem; border-top: 1px solid var(--linie); font-size: .85rem;
}
.ef-aufnahme-leiste[hidden] { display: none; }
.ef-aufnahme-titel { font-weight: 700; }
.ef-aufnahme-leiste button {
  min-height: 36px; padding: 0 .8rem; border-radius: 999px; border: 1px solid var(--linie);
  background: var(--karte-2); color: var(--ink); font: inherit; cursor: pointer;
}
.ef-meldung { flex-basis: 100%; color: var(--ink-3); }
/* Waehrend der Aufnahme: ein festes Bildformat, ohne Bedienleiste. */
.ef-aufnahme .ef-leiste, .ef-aufnahme .ef-aufnahme-leiste { display: none; }
/* So gross wie das Fenster es zulaesst — mehr Pixel, schaerferes Video.
   Die Schrift waechst mit dem Rahmen (Container-Einheiten), damit sie im
   fertigen Clip auf dem Telefon gross genug ist. */
.ef-aufnahme { padding: 0; background: #0f172a; }
.ef-aufnahme .ef-rahmen {
  grid-template-rows: auto 1fr auto; border-radius: 0; box-shadow: none;
  container-type: size; aspect-ratio: var(--ef-format); width: auto; height: auto;
  max-width: 100vw; max-height: 100vh;
}
.ef-aufnahme.ef-hoch .ef-rahmen { --ef-format: 9 / 16; height: 100vh; }
.ef-aufnahme.ef-feed .ef-rahmen { --ef-format: 4 / 5; height: 100vh; }
.ef-aufnahme.ef-quer .ef-rahmen { --ef-format: 16 / 9; width: 100vw; }
.ef-aufnahme .ef-folie { font-size: 4.6cqw; }
.ef-aufnahme.ef-quer .ef-folie { font-size: 3.6cqh; }
.ef-aufnahme .ef-folie h1 { font-size: 2em; }
.ef-aufnahme .ef-merksatz .vm-satz { font-size: 1.35em; }
.ef-aufnahme .ef-kopf { font-size: .7em; }
.ef-aufnahme .ef-muno { width: 38cqw; }
.ef-aufnahme.ef-quer .ef-muno { width: 22cqh; }
/* Sichere Zone: Bei TikTok, Reels und Shorts liegen unten die
   Bildunterschrift und rechts die Knoepfe der App ueber dem Video. Darum im
   Hochformat Abstand rechts und die Untertitel ueber dem unteren Fuenftel. */
.ef-aufnahme.ef-hoch .ef-ort { padding: 6cqh 14cqw 2cqh 6cqw; }
.ef-aufnahme.ef-hoch .ef-untertitel { margin: 0 14cqw 18cqh 6cqw; border-radius: .5em; }
.ef-aufnahme .ef-untertitel { --ut: 4.2cqw; }
.ef-aufnahme.ef-quer .ef-untertitel { --ut: 3.6cqh; }
.ef-aufnahme .ef-punkte { padding: 2cqh 6cqw 0; }
/* Die Endkarte (nur in der Aufnahme): die Adresse gross, weil man im
   Video nichts anklicken kann. */
.ef-cta { justify-items: center; text-align: center; }
.ef-cta-titel { margin: 0; font-size: 1.2em; font-weight: 700; }
.ef-cta-adresse {
  margin: 0; font-size: 1.6em; font-weight: 800; color: var(--marke-ink);
  padding: .25em .7em; border-radius: 999px; background: var(--marke-weich);
}
.ef-cta-hinweis { margin: 0; font-size: .8em; color: var(--ink-3); }
@media (max-width: 40rem) {
  .ef-buehne { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .ef-rahmen { height: 100%; border-radius: 0; }
  .ef-folie { font-size: 1.05rem; }
  .ef-ort { padding: .8rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ef-rein { animation: none; }
  .ef-tafel tr, .ef-beispiel, .ef-falle .fr-zeile { transition: none; }
}
@media print { .ef-platz, .ef-buehne { display: none !important; } }
/* Das Titelbild des Films: Muno, Stufe und Bereich, das Thema — mittig. */
.ef-titel { justify-items: center; text-align: center; gap: .6rem; }
.ef-muno { width: 9.5rem; }
.ef-muno svg.muno, .ef-muno span.muno.muno-foto { width: 100%; height: auto; display: block; }
.ef-titel .ef-titelzeile { margin: 0; font-size: .9rem; color: var(--ink-3); }
.ef-titel .hero-sub { margin: 0; font-size: 1.15rem; color: var(--ink-2); }
.ef-aufnahme.ef-quer .ef-muno { width: 8rem; }
/* Offen: kein freigehaltener Rand fuer die Bildlaufleiste — der Film
   soll die ganze Breite haben (und die Aufnahme keinen Streifen). */
html.ef-offen { scrollbar-gutter: auto; }
/* In der Aufnahme kein leerer schwarzer Balken, wenn gerade niemand spricht. */
.ef-aufnahme.ef-hoch .ef-folie, .ef-aufnahme.ef-feed .ef-folie { font-size: 5.2cqw; }
/* Der Markenname auf der Endkarte, in Munos Farben des Sprachpaars. */
.ef-cta-marke { margin: 0; font-size: 2.3em; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.ef-cta-every { color: var(--mu-haut, #1a7034); }
.ef-cta-lingua { color: var(--mu-kamm-tief, #ab7824); }
.ef-cta .ef-cta-titel { font-size: 1em; font-weight: 600; color: var(--ink-2); }
.ef-cta .ef-cta-adresse { font-size: 1.3em; }
/* Das Titelbild als Haken: kraeftige Flaeche in Munos Farbe, weisse grosse
   Schrift, Marke oben, das Versprechen als farbige Pille — erkennbar im
   Feed schon als kleines Vorschaubild. */
.ef-rahmen.ef-rahmen-titel {
  background: radial-gradient(120% 80% at 50% 35%, var(--mu-haut-hell, #4364af) 0%, var(--mu-haut, #012e93) 45%, var(--mu-haut-tief, #01174a) 100%);
  color: #fff;
}
.ef-rahmen-titel .ef-titel { gap: .5rem; }
.ef-rahmen-titel .ef-cta-marke { font-size: 1.5em; }
.ef-rahmen-titel .ef-cta-every { color: #fff; }
.ef-rahmen-titel .ef-cta-lingua { color: var(--mu-kamm, #f03d5b); filter: brightness(1.15); }
.ef-rahmen-titel h1 { color: #fff; font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; text-shadow: 0 2px 12px rgb(0 0 0 / .25); }
.ef-rahmen-titel .hero-sub { color: rgb(255 255 255 / .88); }
.ef-rahmen-titel .ef-titelzeile { color: rgb(255 255 255 / .85); }
.ef-rahmen-titel .ef-titelzeile * { color: inherit; }
.ef-rahmen-titel .ef-muno { filter: drop-shadow(0 10px 24px rgb(0 0 0 / .35)); }
.ef-hook {
  margin: .3rem 0 0; padding: .35em 1em; border-radius: 999px; font-weight: 800;
  background: var(--mu-kamm, #f03d5b); color: #fff; box-shadow: 0 6px 18px rgb(0 0 0 / .25);
}
.ef-aufnahme .ef-rahmen-titel h1 { font-size: 2.4em; }
.ef-rahmen-titel .ef-untertitel { background: transparent; }
.ef-rahmen-titel .ef-punkte button:not(.ef-war):not(.ef-jetzt) { background-color: rgb(255 255 255 / .3); }
.ef-rahmen-titel .ef-titelzeile .stufe-schild, .ef-rahmen-titel .ef-titelzeile [class*="stufe"] { background: #fff; color: var(--mu-haut-tief, #01174a); }
/* Der Untertitel bleibt ruhig (kein Mitlese-Leuchten, das lenkte ab); die
   Wortgrenzen steuern nur noch, wann die Farbmarkierung oben aufleuchtet. */
/* Farbmarkierung im Takt: in der gerade gesprochenen Zeile erst neutral,
   dann leuchtet sie auf, wenn die Stimme dort ist. */
.ef-bf-warten .bf-kern:not(.ef-bf-an), .ef-bf-warten .bf-signal:not(.ef-bf-an) {
  background: transparent; box-shadow: none; outline-color: transparent; border-color: transparent;
}
.ef-folie .bf-kern, .ef-folie .bf-signal { transition: background-color .3s ease, box-shadow .3s ease, outline-color .3s ease, border-color .3s ease; }
/* Die neue Zeile pulst einmal kurz — ein Hinweis, keine Bewegung. */
.ef-jetzt-zeile { animation: ef-puls .9s ease-out 1; }
@keyframes ef-puls {
  0% { box-shadow: 0 0 0 0 rgb(37 99 235 / .35); }
  100% { box-shadow: 0 0 0 .7rem rgb(37 99 235 / 0); }
}
/* Wo bin ich: Abschnittsnamen unter den Strichen. */
.ef-punkte li { flex-direction: column; align-items: stretch; min-width: 0; }
.ef-pkt-name {
  font-size: .68rem; line-height: 1.2; color: var(--ink-3); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .15rem;
}
.ef-li-jetzt .ef-pkt-name { color: var(--marke-ink); font-weight: 700; }
@media (max-width: 40rem) {
  .ef-pkt-name { visibility: hidden; }
  .ef-li-jetzt .ef-pkt-name { visibility: visible; overflow: visible; }
}
.ef-rahmen-titel .ef-pkt-name { color: rgb(255 255 255 / .75); }
.ef-aufnahme .ef-pkt-name { font-size: 2.4cqw; }
/* Muno als Wegweiser neben dem Abschnittskopf. */
.ef-kopf { display: flex; align-items: center; gap: .5rem; }
.ef-zeiger { width: 2.6em; flex: none; }
.ef-zeiger svg.muno, .ef-zeiger span.muno.muno-foto { width: 100%; height: auto; display: block; }
/* Pause zum Nachdenken / Nachsprechen: ein Balken, der sich leert. */
.ef-pause { display: flex; align-items: center; gap: .45rem; font-size: 1.3em; animation: ef-rein .4s ease-out; }
.ef-pause b {
  width: .45em; height: .45em; border-radius: 50%; background: var(--marke);
  opacity: .25; animation: ef-atmen 1.6s ease-in-out infinite;
}
.ef-pause b:nth-of-type(2) { animation-delay: .25s; }
.ef-pause b:nth-of-type(3) { animation-delay: .5s; }
@keyframes ef-atmen { 50% { opacity: .9; } }
/* Nachsprechen: der Satz gross. */
.ef-nachsatz { display: block; font-size: 1.45em; font-weight: 700; line-height: 1.35; }
/* Falle: der Rest des Satzes leiser, der Unterschied kraeftig. */
.ef-falle .fr-zeile .ziel { color: var(--ink-2); }
.ef-falle .fr-zeile .bf-kern { color: var(--ink); font-weight: 800; }
.ef-falle.ef-aufgeloest .fr-zeile[data-art="falsch"] .bf-kern { text-decoration: line-through; text-decoration-color: #dc2626; text-decoration-thickness: .12em; }
.ef-leiste .ef-langsam[aria-pressed="true"] { background: var(--marke-weich); border-color: var(--marke); }
@media (prefers-reduced-motion: reduce) {
  .ef-jetzt-zeile, .ef-pause, .ef-pause b { animation: none; }
  .ef-pause b { opacity: .6; }
}
/* Fortsetzen: kurzer Hinweis ueber der Leiste. */
.ef-weiter-bei {
  margin: 0; display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .45rem 1rem; font-size: .9rem; background: var(--marke-weich); color: var(--ink);
  animation: ef-rein .3s ease-out;
}
.ef-weiter-bei button {
  min-height: 36px; padding: 0 .9rem; border-radius: 999px; border: 1px solid var(--marke);
  background: var(--karte); color: var(--marke-ink); font: inherit; font-weight: 700; cursor: pointer;
}
.ef-aufnahme .ef-weiter-bei { display: none; }
.ef-anzahl select { font: inherit; min-height: 36px; border-radius: .5rem; }
.ef-buehne:fullscreen { padding: 0; background: var(--karte); }
.ef-buehne:fullscreen .ef-rahmen { width: 100%; height: 100%; max-width: none; border-radius: 0; }
/* Neun Knoepfe passen am Telefon in eine Zeile (der Balken bleibt eine Zeile hoch). */
@media (max-width: 30rem) {
  .ef-leiste { gap: 2px; padding: .45rem .3rem; flex-wrap: nowrap; }
  .ef-leiste button { min-width: 34px; min-height: 40px; padding: 0; font-size: .85rem; flex: 1 1 0; }
}
/* Die Spalte darf nie breiter werden als der Rahmen (sonst schieben lange
   Knopfreihen alles ueber den rechten Rand). */
.ef-rahmen { grid-template-columns: minmax(0, 1fr); }
.ef-folie { min-width: 0; }
.ef-ende-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Typischer Fehler: Die Loesung steht waehrend der Denkpause nicht blass
   darunter, sondern gar nicht — der Platz bleibt frei, damit nichts springt. */
.ef-falle .fr-zeile.ef-noch { opacity: 0; }
.ef-untertitel { cursor: pointer; }
/* Im Export sind die Untertitel immer eingebrannt. */
.ef-aufnahme.ef-ohne-ut .ef-untertitel { visibility: visible; }
/* Teilen ohne System-Menue (am Computer): eine Zeile mit den Wegen. */
.ef-teilen { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; padding: .5rem 1rem; border-top: 1px solid var(--linie); animation: ef-rein .25s ease-out; }
.ef-teilen a, .ef-teilen button {
  min-height: 40px; display: inline-flex; align-items: center; padding: 0 .9rem; border-radius: 999px;
  border: 1px solid var(--linie); background: var(--karte-2); color: var(--ink); font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.ef-aufnahme .ef-teilen { display: none; }
/* Konjugationstafel im Film: Singular und Plural als zwei beschriftete Gruppen. */
.ef-tafel tr.ef-gruppe th {
  text-align: left; padding: .5rem 0 .2rem; font-size: .72em; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--marke-ink); border: 0; background: transparent;
}
.ef-tafel tr.ef-gruppe:not(:first-child) th { padding-top: .9rem; }
/* Abschnitte als Namensreihe unter der Fortschrittsleiste: blass, was
   kommt; dunkler, was geschafft ist; in Farbe, wo man gerade ist. */
.ef-pkt-name { display: none; }
.ef-kapitel {
  display: flex; gap: .35rem; padding: .45rem 1rem 0; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 .8rem, #000 calc(100% - .8rem), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 .8rem, #000 calc(100% - .8rem), transparent 100%);
}
.ef-kapitel::-webkit-scrollbar { display: none; }
.ef-kap {
  flex: none; padding: .2rem .65rem; border-radius: 999px; border: 1px solid var(--linie);
  background: transparent; color: var(--ink-3); opacity: .55; font: inherit; font-size: .74rem; font-weight: 600;
  white-space: nowrap; cursor: pointer; transition: color .3s ease, background-color .3s ease, opacity .3s ease;
}
.ef-kap-war { opacity: .85; color: var(--ink-2); }
.ef-kap-jetzt { opacity: 1; color: #fff; background: var(--marke); border-color: var(--marke); }
.ef-rahmen-titel .ef-kap { color: #fff; border-color: rgb(255 255 255 / .4); }
.ef-rahmen-titel .ef-kap-jetzt { background: rgb(255 255 255 / .22); }
.ef-aufnahme .ef-kap { font-size: 2.4cqw; }
.ef-punkte li { flex-direction: row; }
.ef-punkte button { flex: 1 1 auto; height: 18px; }
/* Namensreihe und Fortschrittsleiste beginnen auf derselben Kante. */
.ef-aufnahme .ef-kapitel { padding: 1.2cqh 6cqw 0; }
.ef-kapitel { -webkit-mask-image: none; mask-image: none; }
.ef-kapitel.ef-rollt {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.2rem), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - 1.2rem), transparent 100%);
}
/* Fortschritt: ein Strich je Abschnitt, der Name darunter, buendig. */
.ef-kapitel { display: none; }
.ef-punkte { gap: .4rem; padding: .7rem 1rem 0; align-items: flex-start; }
.ef-punkte li { flex: 1 1 0; min-width: 0; display: block; }
.ef-punkte button, .ef-punkte button.ef-war, .ef-punkte button.ef-jetzt {
  display: flex; flex-direction: column; gap: .3rem; width: 100%; height: auto; padding: 6px 0 0;
  border: 0; background: none; opacity: 1; cursor: pointer; text-align: left; font: inherit; color: var(--ink-3);
}
.ef-punkte button .ef-strich {
  display: block; width: 100%; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--marke) calc(var(--anteil, 0) * 100%), var(--linie) 0);
  transition: background .4s ease;
}
.ef-punkte button .ef-name {
  font-size: .68rem; line-height: 1.2; font-weight: 600; opacity: .5;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  transition: opacity .3s ease, color .3s ease;
}
.ef-punkte button.ef-war .ef-name { opacity: .85; color: var(--ink-2); }
.ef-punkte button.ef-jetzt .ef-name { opacity: 1; color: var(--marke-ink); }
.ef-rahmen-titel .ef-punkte button .ef-name { color: #fff; }
.ef-rahmen-titel .ef-punkte button .ef-strich { background: rgb(255 255 255 / .3); }
.ef-rahmen-titel .ef-punkte button:not(.ef-war):not(.ef-jetzt), .ef-punkte button.ef-war, .ef-punkte button.ef-jetzt { background-color: transparent; }
.ef-aufnahme .ef-punkte { padding: 2cqh 6cqw 0; }
.ef-aufnahme .ef-punkte button .ef-name { font-size: 2.5cqw; }
.ef-aufnahme .ef-punkte button .ef-strich { height: .8cqw; }
.ef-punkte button .ef-name { hyphens: manual; }
.ef-punkte button .ef-name { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: normal; word-break: normal; }
@media (max-width: 30rem) { .ef-punkte { gap: .3rem; padding-inline: .75rem; } .ef-punkte button .ef-name { font-size: .62rem; } }
/* Die Denkpunkte stehen von Anfang an da (unsichtbar) und werden nur sichtbar. */
.ef-pause { visibility: hidden; opacity: 0; transition: opacity .35s ease; animation: none; }
.ef-pause.ef-pause-an { visibility: visible; opacity: 1; }
.ef-pause:not(.ef-pause-an) b { animation: none; }
/* Der Hinweis „Weiter bei Folie …" liegt ueber der Leiste, statt Platz zu nehmen. */
.ef-rahmen { position: relative; }
.ef-weiter-bei { position: absolute; left: 0; right: 0; bottom: 4.2rem; z-index: 2; }