/* ====================================================================
   ANANAS — Aussehen der Wortseiten (/wort/... und /woerter/...)
   ====================================================================

   Diese Datei gehoert NUR zu den Wortseiten fuer Google. Das Lernspiel
   selbst benutzt sie nicht und wird davon nicht beruehrt.

   Die Farben sind dieselben wie in styles.css, damit die Wortseiten
   aussehen wie der Rest der Seite. Sie stehen hier noch einmal, weil
   die Wortseiten styles.css (4.400 Zeilen fuer das Spiel) nicht laden
   sollen — das waere unnoetiger Ballast fuer eine kleine Textseite.
   ==================================================================== */

:root {
  --bg: #fffefb;
  --text: #181818;
  --muted: #6b6b6b;
  --muted-2: #565656;
  /* Die drei Grautoene einer GESPERRTEN Karte. Sie stehen WORTGLEICH
     so in styles.css (Zeile 259 ff.). Ohne sie sah eine gesperrte
     Geschichte anders aus als ein gesperrtes Fach im Lernspiel --
     blasser, und die Nummer verschwand im Kartenhintergrund.
     Bo hat das am 07.09.2026 im Vergleich der beiden Seiten gesehen.
     WER EINEN DIESER WERTE AENDERT, MUSS IHN IN styles.css GENAUSO
     AENDERN. Zwei Blaetter, eine Farbe. */
  --n-grau-a: #9aa0a6;
  --n-grau-b: #b3b8bd;
  --n-flaeche-hell: #f1f2f4;
  --border: #e8e5df;
  --btn-bg: #fafaf8;
  --btn-border: #e4e1db;
  --btn-hover: #f2f0ea;
  --accent: #1c1c1c;
  --brand-green: #08a63c;
  --brand-red: #ec1023;
  --brand-yellow: #ffb800;
  --n-kopf-schleier: rgba(255, 254, 251, 0.98);
  --n-kopf-schatten: 0 2px 14px rgba(0, 0, 0, 0.12);
  --green-bg: #e8f8ee;
  --green-border: #34a853;
  --green-text: #1a7c36;
  --red-bg: #fdecec;
  --red-border: #e5484d;
  --red-text: #c62828;
  --radius-pill: 999px;
  /* 07.09.2026 von 28 auf 16 px (Bo: "too curvy, too big radius").
     Gilt auf den festen Seiten fuer .chapter-card (Geschichten,
     Kurse), .spielen-block und .antwort.
     DIESELBE ZAHL STEHT IN styles.css fuer das Lernspiel. Beide
     zusammen aendern, sonst sehen die Karten verschieden aus. */
  --radius-card: 16px;
  --radius-lg: 22px;
  --radius-md: 14px;
  --shadow-card: 0 18px 40px rgba(31, 40, 24, 0.07);
  /* Farben, die vorher fest im Blatt standen. Sie muessen Variablen
     sein, sonst bleiben diese Stellen im dunklen Modus hell. */
  --card: #ffffff;
  --accent-text: #ffffff;
  --accent-hover: #333333;
  --link: #0b6bcb;
  --a-der: #1a7c36;
  --a-die: #c62828;
  --a-das: #8a6100;
  --widerruf-text: #7a5b00;
  --widerruf-bg: #fff8e6;
  --schatten-knopf: rgba(24, 24, 24, 0.30);
  /* Gleiche Namen und Werte wie in styles.css -- Kopf und Fuss
     sollen auf jeder Seite gleich aussehen. */
  --flaeche: #faf9f5;
  --schatten-fein: rgba(16, 24, 40, 0.04);
  --schatten-mittel: rgba(16, 24, 40, 0.06);

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

     Vorher hatte jede Seite ihre eigene Breite: die App 1120,
     /spielen/ und /hoeren-und-lesen/ 1200, /alphabet/ und
     /lernen-von-null/ 1080, die Wortseiten 860. Gemessen bei
     1440 px: SECHS verschiedene Startpunkte fuer die
     Ueberschrift (61, 161, 193, 221, 303, 598).

     Jetzt gibt es zwei Zahlen, und alles rechnet damit:

       --seite-max   wie breit der Inhalt hoechstens wird
       --seite-pad   wie weit er vom Rand wegbleibt

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

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

  /* Ueberschriften. Eine Groesse fuer alle Seitentitel. */
  --titel-gross: clamp(28px, 5vw, 40px);
  --titel-mittel: clamp(21px, 3vw, 26px);

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

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

  color-scheme: light;
}

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

/* ================================================================
   DUNKLER MODUS
   ================================================================
   Gleicher Aufbau wie in styles.css. Die Reihenfolge ist wichtig:
     1) :root oben  = hell, der Normalfall
     2) @media      = das GERAET steht auf dunkel und niemand hat
                      selbst gewaehlt (Bremse :not([data-theme="light"]))
     3) [data-theme] = der Besucher hat den Knopf gedrueckt, gewinnt
   Gesetzt wird data-theme ganz frueh im <head> jeder Seite.
   HIER STEHEN NUR VARIABLEN. Wer eine feste Farbe ins Blatt
   schreibt, bricht den dunklen Modus, ohne es zu merken.
   ================================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14161a;
    --text: #eceef0;
    --muted: #a6adb5;
    --muted-2: #c6ccd3;
    /* Gesperrte Karte, dunkel -- wortgleich mit styles.css. */
    --n-grau-a: #7e848a;
    --n-grau-b: #6d7379;
    --n-flaeche-hell: #262a31;
    --border: #2c313a;
    --btn-bg: #21252c;
    --btn-border: #353b44;
    --btn-hover: #2a2f37;
    --accent: #f0efec;
    --n-kopf-schleier: rgba(20, 22, 26, 0.98);
    --n-kopf-schatten: 0 2px 14px rgba(0, 0, 0, 0.45);
    --green-bg: #13291d;
    --green-border: #3fbf67;
    --green-text: #7fe3a3;
    --red-bg: #2e171a;
    --red-border: #e5686d;
    --red-text: #ff9b9e;
    --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.5);

    --card: #1c1f25;
    --accent-text: #16181c;
    --accent-hover: #ffffff;
    --link: #79b0f5;
    --a-der: #6ee79a;
    --a-die: #ff9b9e;
    --a-das: #f0c561;
    --widerruf-text: #ffd76a;
    --widerruf-bg: #3a2f10;
    --schatten-knopf: rgba(0, 0, 0, 0.6);
    --flaeche: #101216;
    --schatten-fein: rgba(0, 0, 0, 0.35);
    --schatten-mittel: rgba(0, 0, 0, 0.45);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
    --bg: #14161a;
    --text: #eceef0;
    --muted: #a6adb5;
    --muted-2: #c6ccd3;
    /* Gesperrte Karte, dunkel -- wortgleich mit styles.css. */
    --n-grau-a: #7e848a;
    --n-grau-b: #6d7379;
    --n-flaeche-hell: #262a31;
    --border: #2c313a;
    --btn-bg: #21252c;
    --btn-border: #353b44;
    --btn-hover: #2a2f37;
    --accent: #f0efec;
    --n-kopf-schleier: rgba(20, 22, 26, 0.98);
    --n-kopf-schatten: 0 2px 14px rgba(0, 0, 0, 0.45);
    --green-bg: #13291d;
    --green-border: #3fbf67;
    --green-text: #7fe3a3;
    --red-bg: #2e171a;
    --red-border: #e5686d;
    --red-text: #ff9b9e;
    --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.5);

    --card: #1c1f25;
    --accent-text: #16181c;
    --accent-hover: #ffffff;
    --link: #79b0f5;
    --a-der: #6ee79a;
    --a-die: #ff9b9e;
    --a-das: #f0c561;
    --widerruf-text: #ffd76a;
    --widerruf-bg: #3a2f10;
    --schatten-knopf: rgba(0, 0, 0, 0.6);
    --flaeche: #101216;
    --schatten-fein: rgba(0, 0, 0, 0.35);
    --schatten-mittel: rgba(0, 0, 0, 0.45);

    color-scheme: dark;
}

/* Beim Umschalten wuerden sonst alle Uebergaenge gleichzeitig
   loslaufen -- das sieht einen Moment lang kaputt aus. */
html.theme-wechselt,
html.theme-wechselt *,
html.theme-wechselt *::before,
html.theme-wechselt *::after {
  transition: none !important;
}

@font-face {
  font-family: "Noto Naskh Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  size-adjust: 120%;
  src: url("/assets/schriften/noto-naskh-arabic-400.woff2") format("woff2");
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS",
               -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--link); }
a:focus-visible, button:focus-visible { outline: 3px solid #2b6ef2; outline-offset: 2px; }

/* --- Kopf: bewusst schlicht, damit die Seite schnell laedt ---------- */
.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 860px;
  margin: 0 auto;
  padding: 14px 20px;
}

.marke {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.2px;
  color: var(--text);
  text-decoration: none;
}

.marke b { color: var(--brand-green); }
.marke i { color: var(--brand-red); font-style: normal; }
.marke u { color: var(--brand-yellow); text-decoration: none; }

.kopf-spielen {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}

.kopf-spielen:hover { background: var(--accent-hover); }

/* EINE Breite fuer jede Seite. Kein Seitentyp bekommt mehr seine
   eigene. Frueher: Wortseiten 860, /alphabet/ 1080, die
   Bereichsseiten 1200 -- der Besucher sah bei jedem Klick eine
   andere linke Kante. */
main {
  max-width: var(--seite-max);
  margin: 0 auto;
  padding: var(--abstand-s) var(--seite-pad) 60px;
}

/* KEINE eigene Lesebreite fuer die Absaetze: der Kundenwunsch war
   ausdruecklich Symmetrie ("position of the main text etc should be
   symmetrical"). Jeder Block hat dieselbe linke UND rechte Kante --
   auch der Text. */

.brotkrumen {
  font-size: 14px;
  color: var(--muted);
  margin: 6px 0 22px;
}

.brotkrumen a { color: var(--muted-2); }

h1 {
  font-size: var(--titel-gross);
  line-height: 1.2;
  margin: 0 0 8px;
  letter-spacing: -0.4px;
}

/* ------------------------------------------------------------------
   DER SEITENKOPF -- gilt fuer JEDE feste Seite, ohne Ausnahmeliste
   ------------------------------------------------------------------
   Frueher stand der Abstand in jeder erzeugten Seite noch einmal
   einzeln im <style>-Block (h1.bereich-titel, .kurs-titel). Genau so
   entstehen Listen, die veralten -- Fehlerliste Q9. Deshalb steht der
   Normalfall jetzt hier, ein Mal.

   WARUM :first-child:
   Auf den 2.066 Wortseiten und unter /woerter/ steht die
   Brotkrumen-Zeile VOR dem h1. Dort ist das h1 nicht das erste Kind,
   und dort bleibt alles genau so, wie es war.
   ------------------------------------------------------------------ */
main > h1:first-child {
  /* main bringt oben bereits --abstand-s an Innenabstand mit.
     Zusammen ergibt das genau --kopf-oben. Die Rechnung steht hier,
     damit sie stimmen bleibt, wenn jemand --abstand-s aendert. */
  margin-top: calc(var(--kopf-oben) - var(--abstand-s));
  margin-bottom: var(--kopf-mitte);
  font-size: var(--titel-gross);
}

main > h1:first-child + .lede {
  margin: 0 0 var(--kopf-unten);
  font-size: clamp(16px, 3vw, 18px);
  line-height: 1.6;
  color: var(--muted);
}

h2 {
  font-size: 21px;
  margin: 36px 0 10px;
  letter-spacing: -0.2px;
}

p { margin: 0 0 14px; }

/* --- Die Antwort: das Wichtigste, sofort sichtbar ------------------- */
.antwort {
  margin: 22px 0 8px;
  padding: 26px 24px;
  background: var(--green-bg);
  border: 2px solid var(--green-border);
  border-radius: var(--radius-card);
  text-align: center;
}

.antwort-gross {
  display: block;
  font-size: clamp(30px, 7vw, 46px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--green-text);
  letter-spacing: -0.5px;
}

/* Die Artikelfarben folgen dem Logo (der grün, die rot, das gelb).
   Das Gelb des Logos ist auf Weiß zu hell zum Lesen, deshalb steht
   hier ein dunkleres Ocker mit demselben Charakter. */
.a-der { color: var(--a-der); font-weight: 700; }
.a-die { color: var(--a-die); font-weight: 700; }
.a-das { color: var(--a-das); font-weight: 700; }

.antwort-plural {
  display: block;
  margin-top: 12px;
  font-size: clamp(19px, 4vw, 24px);
  font-weight: 700;
  color: var(--text);
}

.antwort-plural span { color: var(--muted-2); font-weight: 600; font-size: 15px; }

.karte {
  margin: 14px 0;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.karte p:last-child { margin-bottom: 0; }

.hinweis {
  font-size: 15px;
  color: var(--muted-2);
}

/* --- Tabellen: muessen auf dem Handy seitlich scrollen koennen ------ */
.tabelle-rahmen { overflow-x: auto; }

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 16px;
}

th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th { font-weight: 700; white-space: nowrap; color: var(--muted-2); }

td[lang="ar"] {
  font-family: "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
  direction: rtl;
  text-align: right;
}

/* --- Wortlisten ----------------------------------------------------- */
.wortliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wortliste li { margin: 0; }

.wortliste a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
}

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

.buchstaben {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.buchstaben a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 46px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}

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

/* --- Aufruf zum Spiel ---------------------------------------------- */
.spielen-block {
  margin: 34px 0 10px;
  padding: 24px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--btn-bg);
  text-align: center;
}

.spielen-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 6px;
  padding: 0 26px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
}

.spielen-knopf:hover { background: var(--accent-hover); }

/* ZWEI KNOEPFE IN EINEM KASTEN (09.09.2026, Bo).
   Nur ein Abstand-Behaelter -- der Knopf selbst bleibt unveraendert
   (.spielen-knopf). Ein zweiter Knopfstil waere eine zweite Wahrheit.

   space-between: "Zurueck" klebt am LINKEN Rand, "Weiter" am RECHTEN
   (Bo: "the forward button should be at the edge, and the backwards
   button should also be at the edge").
   flex-wrap sorgt dafuer, dass die Knoepfe auf dem Handy untereinander
   rutschen statt aus dem Bild zu laufen. */
.spielen-knopfpaar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

/* Nur EIN Knopf im Kasten (A1.1 hat kein Zurueck): mittig statt links. */
.spielen-knopfpaar .spielen-knopf:only-child { margin-inline: auto; }

/* Schmales Fenster: die Knoepfe stehen untereinander. Dann waeren sie
   mit space-between linksbuendig -- hier also wieder mittig. 640px ist
   ein Haltepunkt, den diese Datei schon benutzt. */
@media (max-width: 640px) {
  .spielen-knopfpaar { justify-content: center; }
}

footer {
  max-width: 860px;
  margin: 0 auto;
  padding: 22px 20px 40px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--muted);
}

footer a { color: var(--muted-2); }

/* ================================================================
   FUSSZEILE -- GENAU WIE IM SPIEL
   ================================================================
   Kundenwunsch 03.09.2026: die Fusszeile soll auf der ganzen Seite
   gleich aussehen. Diese Regeln sind Punkt fuer Punkt dieselben wie
   #site-footer / #site-footer-links in styles.css.
   Wer hier etwas aendert, muss es dort auch aendern.
   ================================================================ */
#site-footer {
  max-width: none;
  margin: 0;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: inherit;
}

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

#site-footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 4px;
  margin-top: 8px;
}

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

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

#site-footer-links a:not(:last-child)::after {
  content: "·";
  /* Gleiche Rechnung wie in styles.css: rechts vom Punkt liegen fest
     10 px + 4 px gap + 10 px = 24 px. Links muss dasselbe stehen,
     sonst klebt der Punkt am ersten Wort (Kundenmeldung 05.09.2026). */
  margin-inline-start: 24px;
  color: var(--border);
}

/* "Vertrag widerrufen" muss laut Ruecktrittsbelehrung ueberall
   hervorgehoben und ohne Umweg erreichbar sein. */
#site-footer-links a.site-footer-highlight {
  color: var(--widerruf-text);
  background: var(--widerruf-bg);
  border: 1px solid var(--brand-yellow);
  font-weight: 700;
  padding: 4px 10px;
}

/* Der Satz unter der Wortliste stand frueher IN der Fusszeile und
   hat sie dadurch anders aussehen lassen als im Spiel. Er steht
   jetzt darueber, sieht aber genauso aus wie vorher. */
.seiten-hinweis {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px 22px;
  font-size: 14px;
  color: var(--muted);
}


@media (max-width: 520px) {
  body { font-size: 16px; }
  .kopf { padding: 12px 16px; }
  .antwort { padding: 22px 16px; }
}

/* ================================================================
   "NACH OBEN"-KNOPF auf den Wortseiten
   ================================================================
   Wird von wort.js erzeugt und eingeblendet. Gleiche Optik wie im
   Lernspiel: unten in der Mitte, schwarz, weisser Pfeil.
   Grundzustand unsichtbar und nicht anklickbar -- ohne JavaScript
   ist der Knopf gar nicht erst im Seitenaufbau.
   ---------------------------------------------------------------- */
#to-top-btn {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 40;

  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  border: 0;
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: 0 10px 28px var(--schatten-knopf);

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

  visibility: hidden;
  opacity: 0;
  /* translateX(-50%) zentriert -- beim Ein- und Ausblenden MUSS
     dieser Wert mitgenommen werden, sonst springt der Knopf. */
  transform: translate(-50%, 10px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}

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

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

@media (max-width: 520px) {
  #to-top-btn {
    width: 52px;
    height: 52px;
    font-size: 24px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  #to-top-btn { transition: none; }
}

/* ================================================================
   HELL/DUNKEL-KNOPF IN DER KOPFZEILE
   ================================================================
   Der Knopf wird von wort.js erzeugt (nicht in 2.066 Dateien
   geschrieben). Optik bewusst wie im Lernspiel: nur das Zeichen,
   kein Kasten, aber 44 x 44 Pixel Beruehrungsziel.
   Er steht ganz rechts, hinter "Spielen".
   ================================================================ */
#theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  background: none;
  border-radius: var(--radius-pill);
  font-size: 20px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

#theme-toggle-btn:hover {
  background: var(--btn-hover);
}

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

/* ==================================================================
   KOPF UND FUSS — GENAU WIE IM LERNSPIEL
   ==================================================================
   Kundenwunsch 05.09.2026: "der Kopf und der Fuss muessen ueberall
   gleich sein". Vorher gab es DREI verschiedene Kopfzeilen: das Spiel
   (Ananas-Logo in einer schwebenden Karte), die Wortseiten
   ("der · die · das" plus Spielen-Knopf) und die Rechtsseiten (nur
   "der · die · das"). Jetzt tragen alle dasselbe.

   Die Regeln sind aus styles.css uebernommen und benutzen dieselben
   Variablen. Wer dort etwas am Kopf aendert, muss es HIER ebenfalls
   aendern -- die zwei Blaetter sind bewusst getrennt, damit die
   Wortseiten nicht 160 KB Spielregeln laden muessen.
   ================================================================== */
/* Zwei Logos liegen im Markup, sichtbar ist immer nur eines --
   genau wie im Lernspiel. Ohne diese vier Regeln stehen BEIDE
   Ananas nebeneinander (am 05.09.2026 genau so passiert). */
.logo-dunkel { display: none; }

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

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

body {
  background: var(--flaeche);
  /* KUNDENMELDUNG 05.09.2026 "fix the footer please":
     Auf kurzen Seiten stand die Fusszeile mitten im Bild und darunter
     war eine grosse leere Flaeche -- gemessen auf /tests/ bei 1032 px
     Fensterhoehe: 500 Pixel Leere, und die Seite scrollte nicht.
     Der body wird eine Spalte, die mindestens so hoch ist wie das
     Fenster; main nimmt den uebrigen Platz, die Fusszeile rutscht
     dadurch nach unten.
     dvh statt vh: auf dem Handy zaehlt vh die Adressleiste mit, dann
     waere die Seite immer ein Stueck zu hoch. Die vh-Zeile davor ist
     die Rueckfallebene fuer aeltere Browser.
     Im Lernspiel macht dasselbe "margin-top: auto" in styles.css. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1 0 auto;
}

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

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

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

   ACHTUNG: dieselben Werte stehen in styles.css UND in wort.css.
   Die zwei Kopfleisten muessen pixelgleich bleiben (Kundenwunsch
   05.09.2026: "these two header not the same"). Wer hier etwas
   aendert, aendert es in BEIDEN Dateien.
   ================================================================== */
#site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 10px;
  flex-shrink: 0;
  /* Der <body> der festen Seiten hat 17px und line-height 1.6, das
     Lernspiel 16px und "normal". Beide Werte hier ausdruecklich
     setzen -- sonst erbt die Kopfzeile den Fliesstext der Seite und
     ist zwei Pixel hoeher als im Spiel (Kundenwunsch 05.09.2026:
     "these two header not the same"). */
  font-size: 16px;
  line-height: normal;
}

#site-header {
  position: sticky;
  top: 0;
  z-index: 70;
  width: auto;
  max-width: none;
  margin: 0;
  /* Der Balken geht ueber die ganze Breite, sein INHALT steht aber
     genau da, wo auch der Text der Seite anfaengt. Darum die
     Rechnung: bei breiten Fenstern der halbe Ueberhang plus der
     normale Rand, bei schmalen nur der normale Rand.
     Ergebnis: Zurueck-Pfeil und Ueberschrift stehen auf einer Linie
     -- gemessen 0 px Unterschied. Dieselbe Regel in styles.css. */
  padding-block: 12px;
  padding-inline: max(var(--seite-pad),
                      calc((100% - var(--seite-max)) / 2 + var(--seite-pad)));
  background: var(--n-kopf-schleier);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: var(--n-kopf-schatten);
}


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

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

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

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

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

/* ------------------------------------------------------------------
   DEUTSCHER LERNSTOFF IN EINER ARABISCHEN SEITE
   ------------------------------------------------------------------
   Seit dem 05.09.2026 werden die Erklaertexte der festen Seiten
   uebersetzt (seiten-texte.js). Bei Arabisch stellt wort.js die Seite
   auf dir="rtl". Die deutschen Lernwoerter darin bleiben aber
   deutsch und muessen weiter von LINKS nach RECHTS laufen -- sonst
   wandert der Punkt oder die Klammer an die falsche Seite. Genau das
   ist frueher schon einmal passiert (Fehlerliste E13).

   Der Erzeuger schreibt an jedes solche Stueck lang="de". Eine
   einzige Regel reicht deshalb fuer alle -- besser als in jede
   Zeile ein dir="ltr" zu schreiben und eines zu vergessen.

   unicode-bidi: isolate sorgt dafuer, dass das deutsche Stueck den
   arabischen Satz drumherum nicht durcheinanderbringt.
   ------------------------------------------------------------------ */
[dir="rtl"] [lang="de"] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ------------------------------------------------------------------
   DAS ALPHABET LAEUFT IMMER VON A NACH Z
   ------------------------------------------------------------------
   GEFUNDEN AM 05.09.2026 AUF EINEM BILDSCHIRMFOTO, nicht durch eine
   Messung: sobald die Seite auf Arabisch dir="rtl" bekam, drehte das
   Raster die Karten um. In der ersten Zeile stand
       F  E  D  C  B  A
   statt A B C D E F. Dasselbe bei den Umlauten und den
   Buchstabenpaaren.

   WARUM DAS SCHLIMM IST: Die Reihenfolge des Alphabets ist LERNSTOFF,
   keine Leserichtung. Das deutsche Alphabet faengt bei A an -- auf
   einer Seite, die genau das beibringen soll, ist eine rueckwaerts
   laufende Buchstabenreihe schlicht falsch. Ein arabischer Anfaenger
   haette es fuer richtig gehalten.

   Gemessen wurde vorher nur, DASS die Uebersetzung ankommt. Die
   Reihenfolge faellt in keiner Messung auf -- nur im Bild
   (Fehlerliste E2 / Kurzfassung 31).

   LOESUNG: Das Raster selbst bleibt links-nach-rechts. Der
   ERKLAERTEXT auf den Karten wird wieder auf rechts-nach-links
   gestellt, denn der ist ja uebersetzt.
   ------------------------------------------------------------------ */
[dir="rtl"] .abc-raster {
  direction: ltr;
}

[dir="rtl"] .abc-hinweis {
  direction: rtl;
  text-align: right;
}

/* ------------------------------------------------------------------
   ARABISCH: UEBERSCHRIFTEN NICHT FETT
   ------------------------------------------------------------------
   Kundenmeldung 06.09.2026: "the text gets somehow thick when i
   choose the arabic language".
   Von Noto Naskh Arabic liegen nur zwei Schnitte bei (400 und 700).
   Alles ab Schnitt 600 landet auf derselben fetten Datei -- im
   Browser nachgemessen. Mit size-adjust: 120 % wird daraus dicke,
   gedraengte Schrift.
   Im Arabischen macht man Hervorhebung ohnehin ueber die GROESSE,
   nicht ueber Fettschrift.
   DIESELBE REGEL STEHT IN styles.css, dort auch die Messwerte und
   der verworfene zweite Weg. Wer eine aendert, aendert beide
   (Fehlerliste O16 / Q10).
   Stellen mit eigenem lang-Attribut bleiben unberuehrt -- das ist
   deutscher Lernstoff in Inter.
   ------------------------------------------------------------------ */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] p.subtitle,
[dir="rtl"] .lede,
[dir="rtl"] .mode-card-progress,
[dir="rtl"] .mode-card-title:not([lang]) {
  font-weight: 500;
}

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

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

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

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

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

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


.site-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 2px 6px;
  margin: 0;
  background: none;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

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

.site-brand-name {
  font-weight: 800;
  font-size: 21px;
  /* Genau wie im Lernspiel. Mit 0.2px war "Ananas" 3,7 px breiter
     und die ganze Leiste dadurch anders breit. */
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}

.site-header-actions {
  display: flex;
  align-items: center;
  /* 10px wie im Lernspiel, nicht 6px. */
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

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

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

/* ==================================================================
   SPRACHUMSCHALTER UND TON-KNOPF (aus styles.css uebernommen)
   ==================================================================
   Damit die Kopfzeile der festen Seiten genauso aussieht wie im
   Spiel. Wer die Regeln in styles.css aendert, muss sie HIER
   ebenfalls aendern -- die zwei Blaetter sind getrennt, damit die
   Wortseiten nicht 160 KB Spielregeln laden muessen.
   ================================================================== */
  #sound-toggle-btn,
  #theme-toggle-btn {
    flex-shrink: 0;
    /* Barrierefreiheit: die Flaeche bleibt 48x48 gross und damit gut
       treffbar, auch wenn man den Rahmen nicht mehr sieht. */
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 0;
    background: none;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    /* Hausschrift wie im Lernspiel -- ohne diese Zeile nimmt der
       Browser Arial und das Zeichen sitzt anders. */
    font-family: inherit;
    font-size: 22px;
    line-height: 22px;
    color: var(--text);
    transition: opacity 180ms ease, transform 180ms ease;
  }

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

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

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

  /* Sprachbutton wie in der Design-Vorlage: weiße Pille mit Globus-Emoji,
     Sprachcode und Schatten, statt der schmalen Standard-.text-btn-Optik.
     Nur Optik — Klick-/Dropdown-Verhalten (siehe setupSoundToggle()-
     Pendant für Sprache in JS) bleibt unverändert. */
  .lang-switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 92px;
    min-height: 44px;
    padding: 12px 16px;
    /* Ohne diese Zeile erbt der Knopf Arial vom Browser und wird
       50 statt 46 Pixel hoch -- dadurch war die ganze Leiste zwei
       Pixel hoeher als im Lernspiel. */
    font-family: inherit;
    line-height: normal;
    border-radius: var(--radius-pill);
    background: var(--card);
    /* 1px wie im Lernspiel. Mit 2px war der Knopf 48 statt 46
       Pixel hoch -- der letzte sichtbare Unterschied zwischen
       den beiden Kopfzeilen. */
    border: 1px solid var(--btn-border);
    box-shadow: var(--shadow-btn);
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    transition: transform 180ms ease, box-shadow 180ms ease, background 120ms ease;
  }

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

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

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

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

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

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

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

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

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

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

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

/* Wird von der Klappliste des Sprachumschalters gebraucht. In
   styles.css gibt es die Regel laengst -- auf den festen Seiten fehlte
   sie, dadurch stand die Liste dauerhaft offen (05.09.2026). */
.hidden {
  display: none !important;
}

/* ==================================================================
   GESCHICHTENSEITEN  /hoeren-und-lesen/<name>/   (05.09.2026)
   ==================================================================
   79 eigene Seiten statt #-Adressen: jede Geschichte hat jetzt eine
   echte Adresse, die Google einzeln zeigen kann -- genau wie die
   2.066 Wortseiten. Der Text steht als richtiger HTML-Text auf der
   Seite, nicht nur in einer JavaScript-Datei.

   Erzeugt von 3-REGELN-UND-NOTIZEN/geschichtenseiten-bauen/. Wer hier
   etwas aendert, aendert auch das Skript (Regel 122).
   ================================================================== */
.geschichte-meta {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted-2);
}

.geschichte-niveau {
  display: inline-block;
  margin-inline-end: 6px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--btn-hover);
  border: 1px solid var(--btn-border);
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* ================================================================
   UEBERSICHT "HOEREN UND LESEN" ALS ECHTE SEITE
   ================================================================
   Kundenwunsch 05.09.2026: "i want to make the hoeren as a site
   without hashtag, like the alphabet site". Diese Seite sieht jetzt
   aus wie der Bildschirm #hoeren im Lernspiel -- Hilfe-Kasten,
   Niveau-Ueberschrift mit Fortschritt, Kartenraster.
   Die Werte unten sind aus styles.css uebernommen (.spiel-hilfe,
   .chapter-cards-grid, .mode-card, .mode-card-badge,
   .chapter-card-done). Kopieren war noetig, weil die festen Seiten
   nur wort.css laden -- das ist die Falle aus Regel Q10, deshalb
   steht hier ausdruecklich, WOHER die Werte kommen. Wer sie dort
   aendert, aendert sie auch hier.
   ================================================================ */
/* Der Hilfe-Kasten war 720 px breit und mittig -- alles andere auf der
   Seite geht von Kante zu Kante. Damit stand er als einziger Block
   eingerueckt da (Kundenwunsch 05.09.2026: "position of the main text
   etc should be symmetrical"). Jetzt ist er so breit wie der Rest. */
.spiel-hilfe {
  width: 100%; max-width: none; margin: 22px 0 26px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--card); text-align: start;
}
.spiel-hilfe > summary {
  display: flex; align-items: center; min-height: 44px; padding: 10px 16px;
  font-size: 14px; font-weight: 700; color: var(--text);
  cursor: pointer; border-radius: var(--radius-md); list-style-position: inside;
}
.spiel-hilfe > summary:hover { background: var(--btn-hover); }
.spiel-hilfe-inhalt { padding: 0 16px 14px; }
.spiel-hilfe-inhalt p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--muted-2); }
.spiel-hilfe-inhalt p:last-child { margin-bottom: 0; }

/* Die Niveau-Ueberschrift ueber einem Kartenblock (A1, A2, B1, B2).
   07.09.2026, Bo: "position these in the middle and make these LVL
   letter bigger". Vorher stand sie links und war nur 20 px gross --
   zwischen den grossen Karten ging sie unter.
   DIESELBEN WERTE STEHEN IN styles.css fuer das Lernspiel (3000
   Woerter). Beide zusammen aendern, sonst sehen die zwei Bereiche
   verschieden aus. */
.hoeren-niveau-titel {
  margin: 30px 0 0;
  text-align: center;
  font-size: clamp(28px, 5vw, 36px);
  font-weight: 800;
  letter-spacing: .02em;
}
/* .tests-niveau-stand sieht genauso aus, heisst aber absichtlich
   anders: /tests/ fuehrt einen EIGENEN Stand (siehe wort.js). Mit
   demselben Klassennamen wuerde die Geschichten-Logik die Zeilen
   auf /tests/ mitzaehlen und dort den Lesestand der Geschichten
   hineinschreiben. (Bo, 07.09.2026) */
.hoeren-niveau-stand,
.tests-niveau-stand {
  margin: 6px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}

.chapter-cards-grid {
  margin-top: 14px; display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  /* Alle Karten gleich hoch (07.09.2026, Bo: "symmetrical").
     Dieselbe Zeile steht in styles.css fuer das Lernspiel. */
  grid-auto-rows: 1fr;
  gap: 16px; width: 100%; max-width: 1600px;
}

/* UND UEBER DIE BLOECKE HINWEG GLEICH HOCH.
   Auf /hoeren-und-lesen/ stehen VIER getrennte Raster (A1, A2, B1,
   B2). "grid-auto-rows: 1fr" macht die Karten nur INNERHALB eines
   Rasters gleich hoch. Gemessen am 07.09.2026: A1 kam auf 193 px,
   die anderen drei auf 225 px, weil dort die Titel laenger sind und
   in drei Zeilen umbrechen. Zwischen den Bloecken sah man den
   Sprung.
   Die Mindesthoehe hebt alle auf dasselbe Mass. Wird ein Titel
   spaeter noch laenger, waechst die Karte weiter -- die Zahl ist
   nur ein Boden, keine feste Hoehe. */
.chapter-cards-grid .chapter-card { min-height: 225px; }
@media (max-width: 1400px) { .chapter-cards-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .chapter-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .chapter-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px)  { .chapter-cards-grid { grid-template-columns: 1fr; } }

.chapter-card {
  /* position: relative wegen des Schlosses oben rechts auf einer
     gesperrten Karte (.chapter-card-lock steht absolut). Ohne das
     wuerde sich das Schloss an der ganzen Seite ausrichten und
     irgendwo oben landen. */
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 26px 20px 20px; text-align: center;
  background: var(--btn-bg); border: 1px solid var(--btn-border);
  border-radius: var(--radius-card); color: var(--text); text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 120ms ease;
}
.chapter-card:hover {
  background: var(--btn-hover); border-color: var(--accent); transform: translateY(-3px);
}
.chapter-card:active { transform: translateY(0); }

.mode-card-badge {
  flex: none; width: 52px; height: 52px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px;
  background: var(--btn-hover); color: var(--muted);
}
.mode-card-badge-active { background: var(--green-bg); color: var(--green-text); }

/* Lange Titel duerfen nicht ueber den Kartenrand hinausragen --
   derselbe Fehler wie bei den Kapitelkarten (Regel Q17). */
.chapter-card .mode-card-title {
  max-width: 100%; min-width: 0; overflow-wrap: break-word;
  font-size: clamp(17px, 2.4vw, 20px); font-weight: 800; letter-spacing: -0.01em;
}
.chapter-card .mode-card-desc {
  max-width: 100%; min-width: 0; overflow-wrap: break-word;
  font-size: 14px; line-height: 1.5; color: var(--muted-2);
}
.mode-card-progress {
  display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--muted-2);
}
.mode-card-progress:empty { display: none; }

.chapter-card-done { border-color: var(--green-border); background: var(--green-bg); }
.chapter-card-done:hover,
.chapter-card-done:active { border-color: var(--green-border); background: var(--green-bg); }
.chapter-card-done .mode-card-desc,
.chapter-card-done .mode-card-progress { color: var(--green-text); font-weight: 700; }

/* ---- "Als gelesen markieren" auf der Geschichtenseite --------------
   Der Knopf kommt aus wort.js, nicht aus dem HTML. Er sieht aus wie
   die Aktionsknoepfe im Lernspiel (.hoeren-action-btn in styles.css),
   ist hier aber eigenstaendig -- diese Seiten laden styles.css nicht. */
.geschichte-fertig {
  display: flex;
  justify-content: center;
  margin: 22px 0 0;
}

.geschichte-gelesen-btn {
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

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

.geschichte-gelesen-btn.ist-gelesen {
  background: var(--green-bg);
  border-color: var(--green-border);
  color: var(--green-text);
}

/* ================================================================
   WOERTER-UEBUNG UND MINI-TEST AUF DER GESCHICHTENSEITE
   ================================================================
   Kundenwunsch 05.09.2026: "just let there the test and the
   wordgame". Beide Spiele laufen jetzt auf der festen Seite, nicht
   mehr nur im Lernspiel. Das Aussehen ist an die Spielkarten dort
   angelehnt (.vocab-game-card, .answer-btn, .feedback-line in
   styles.css) -- kopiert werden musste es, weil diese Seiten
   styles.css nicht laden (Regel Q10).
   Gebaut wird alles von wort.js; im HTML steht nur ein leerer Kasten
   und die Daten als JSON.
   ================================================================ */
.geschichte-spiele { margin: 34px 0 0; }

.geschichte-ueben,
.geschichte-test {
  margin: 0 0 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.geschichte-ueben h2,
.geschichte-test h2 {
  margin: 0 0 4px;
  font-size: clamp(20px, 3.6vw, 24px);
}

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

.spiel-karte {
  margin-top: 14px;
  padding: clamp(18px, 3.5vw, 28px);
  border: 1px solid var(--btn-border);
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 1px 2px var(--schatten-fein), 0 1px 3px var(--schatten-mittel);
  text-align: center;
}

.spiel-aufgabe {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Der Wortbereich hat eine feste Mindesthoehe. Sonst springen die
   Antwort-Knoepfe nach oben und unten, je nachdem ob gerade eine
   Rueckmeldung dasteht -- man klickt dann daneben. */
.spiel-wortbereich {
  min-height: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 10px 6px;
  border-radius: 18px;
  transition: background 160ms ease;
}

.spiel-wortbereich.ist-richtig { background: var(--green-bg); }
.spiel-wortbereich.ist-falsch  { background: var(--red-bg); }

/* Das Lernwort bleibt IMMER einzeilig -- wort.js verkleinert die
   Schrift so weit, dass auch das laengste Wort hineinpasst. Ein
   Umbruch mitten im Wort waere beim Lernen falsch. */
.spiel-wort {
  max-width: 100%;
  font-size: clamp(30px, 6vw, 46px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.spiel-frage {
  margin: 12px 0 0;
  font-size: clamp(18px, 3.4vw, 22px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}

.spiel-zaehler {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.spiel-rueckmeldung {
  margin: 0;
  min-height: 22px;
  font-size: 15px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 120ms ease;
}
.spiel-rueckmeldung.sichtbar { opacity: 1; }
.spiel-rueckmeldung.ist-richtig { color: var(--green-text); }
.spiel-rueckmeldung.ist-falsch  { color: var(--red-text); }

/* Beim Test steht die Rueckmeldung unter den Antworten und braucht
   dort ihren Platz von Anfang an. */
.geschichte-test .spiel-rueckmeldung { margin-top: 12px; }

.spiel-antworten {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 0;
}

/* Die Testantworten sind ganze Saetze -- die stehen untereinander,
   sonst wird jede Zeile zu schmal. */
.spiel-antworten-lang { flex-direction: column; align-items: stretch; }

.spiel-antwort-btn {
  flex: 1 1 160px;
  min-height: 56px;
  padding: 12px 18px;
  border-radius: 16px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.spiel-antworten-lang .spiel-antwort-btn { flex: none; }

.spiel-antwort-btn:hover:not(:disabled) { background: var(--btn-hover); border-color: var(--accent); }
.spiel-antwort-btn:disabled { cursor: default; }
.spiel-antwort-btn.richtig { background: var(--green-bg); border-color: var(--green-border); color: var(--green-text); }
.spiel-antwort-btn.falsch  { background: var(--red-bg);   border-color: var(--red-border);   color: var(--red-text); }
.spiel-antwort-btn.blass   { opacity: 0.45; }

.spiel-balken {
  display: block;
  width: 100%;
  height: 8px;
  margin: 18px 0 0;
  border: 0;
  border-radius: 999px;
  background: var(--btn-hover);
  appearance: none;
  -webkit-appearance: none;
}
.spiel-balken::-webkit-progress-bar { background: var(--btn-hover); border-radius: 999px; }
.spiel-balken::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.spiel-balken::-moz-progress-bar { background: var(--accent); border-radius: 999px; }

.spiel-stand {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* "1 Wiederholung offen" -- kam am 05.09.2026 mit Motor A dazu.
   Bleibt leer, solange kein Fehler offen ist; die Zeile behaelt aber
   ihre Hoehe, damit nichts springt, wenn sie erscheint
   (Fehlerliste E4). */
.spiel-wiederholungen {
  margin: 4px 0 0;
  min-height: 1.4em;
  font-size: 13px;
  color: var(--muted-2);
}

.spiel-neu-btn,
.spiel-start-btn {
  min-height: 52px;
  margin-top: 14px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.spiel-neu-btn:hover, .spiel-start-btn:hover { background: var(--btn-hover); }

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

.spiel-ergebnis {
  margin-top: 16px;
  padding: 22px 18px;
  border: 1px solid var(--btn-border);
  border-radius: 24px;
  background: var(--card);
  text-align: center;
}
.spiel-ergebnis-zahl { margin: 0; font-size: clamp(22px, 4vw, 28px); font-weight: 800; color: var(--text); }
.spiel-ergebnis-lob  { margin: 8px 0 0; font-size: 16px; color: var(--muted); }

/* ---- Ton zur Geschichte -------------------------------------------
   Diese Seiten laden NUR wort.css, nicht styles.css. Die Regeln fuer
   den Abspieler im Lernspiel (.hoeren-ton in styles.css) gelten hier
   also nicht -- sie muessen hier eigene Namen bekommen. Genau diese
   Falle steht als Regel Q10 in der Fehlerliste: Markup kopieren heisst
   die zugehoerigen CSS-Regeln mitnehmen.
   Der Kasten ist absichtlich durchgezogen umrandet (im Lernspiel ist
   er gestrichelt, solange dort nur der Hinweis "Ton kommt spaeter"
   steht). Hier gibt es den Kasten ueberhaupt nur, wenn es die Datei
   wirklich gibt.
   Die Abspielleiste selbst faerbt der Browser. Dunkel wird sie durch
   color-scheme in den Dunkel-Bloecken weiter oben -- ein <audio> mit
   controls laesst sich nicht frei umfaerben, das ist so gewollt. */
.geschichte-ton {
  margin: 18px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--btn-border);
  border-radius: 14px;
  background: var(--btn-hover);
}

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

/* Ersatzlink fuer sehr alte Browser ohne <audio>. In allen anderen
   zeigt der Browser die Abspielleiste und versteckt den Link selbst. */
.geschichte-ton-player a {
  font-size: 15px;
  color: var(--link);
}

/* Lesetext: laengere Zeilenhoehe und begrenzte Zeilenlaenge -- wer
   eine Fremdsprache liest, verliert sonst leicht die Zeile. Dieselbe
   Einstellung wie im Lernspiel (.hoeren-absatz in styles.css). */
.geschichte-text {
  margin: 22px 0 0;
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--btn-border);
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 1px 2px var(--schatten-fein), 0 1px 3px var(--schatten-mittel);
}

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

.geschichte-text p:last-child { margin-bottom: 0; }

/* ================================================================
   BEZAHLTE GESCHICHTE (seit 07.09.2026)
   ================================================================
   Je Niveau sind die Geschichten 1 bis 4 frei. Bei allen anderen
   setzt ein kleines Skript im Kopf der Seite die Klasse "ist-gesperrt"
   an das <html>, wenn niemand freigeschaltet ist.

   WARUM display:none UND NICHT DER TEXT WEGLASSEN: der Text muss im
   HTML stehen bleiben, sonst kann Google die Seite nicht lesen und
   die 96 Geschichtenseiten waeren fuer die Suche wertlos. Dass hier
   bezahlter Inhalt versteckt wird, steht ausdruecklich in den
   strukturierten Daten der Seite (isAccessibleForFree: false) --
   ohne diese Angabe koennte Google das Ausblenden fuer Tarnung
   halten.
   EHRLICH: das ist eine Sperre fuer normale Besucher, kein
   Kopierschutz. Wer den Quelltext ansieht, liest den Text trotzdem.
   Dasselbe gilt fuer die Spiele und die Tondateien.

   Die Klasse haengt am <html>, nicht an einzelnen Kaesten: Uebung
   und Mini-Test entstehen erst spaeter durch wort.js, eine Regel von
   oben erwischt auch die.
   ================================================================ */
.ist-gesperrt .geschichte-text,
.ist-gesperrt .geschichte-ton,
.ist-gesperrt .geschichte-spiele,
.ist-gesperrt .geschichte-fertig,
/* Seit 10.09.2026 gilt dieselbe Sperre auf den 72 Testseiten. Dort
   liegen Lesen, Hoeren, Fragen und Schreiben je in einem .test-teil.
   Nur die inneren Kaesten auszublenden wuerde leere Ueberschriften
   ("2. Hoeren") stehen lassen -- deshalb der ganze Abschnitt.
   Was SICHTBAR bleibt: Titel, Niveau-Marke und das Blaettern zu den
   anderen Tests. Der Besucher soll sehen, was ihn erwartet. */
.ist-gesperrt .test-teil {
  display: none;
}

/* ================================================================
   BEZAHLTE LEKTION (seit 07.09.2026)
   ================================================================
   Gratis ist nur der Kurs A1.1 (20 Lektionen). Die anderen sechs
   Stufen sind bezahlt -- 220 Lektionen. Dieselbe Technik wie bei
   den Geschichten: ein Skript im Kopf der Seite setzt
   "ist-gesperrt" ans <html>.

   SICHTBAR BLEIBEN Ueberschrift, Zwischenzeile und die Zeile
   "Kapitel 3, Lektion 2" -- der Lernende soll sehen, was ihn
   erwartet, und Google soll die Seite einordnen koennen.
   WEG SIND die fuenf Teile mit dem eigentlichen Unterricht
   (Dialog, Woerter, Grammatik, Uebungen, Mini-Test) und der Knopf
   "Lektion fertig".
   DER WEG ZURUECK (.lek-nav) BLEIBT -- niemand soll in einer
   gesperrten Lektion festsitzen.
   ================================================================ */
.ist-gesperrt .lek-teil,
.ist-gesperrt .lek-fertig-block {
  display: none;
}

/* Der Kasten mit dem Schloss: nur sichtbar, wenn wirklich gesperrt. */
.geschichte-schloss,
.kurs-schloss { display: none; }

.ist-gesperrt .geschichte-schloss,
.ist-gesperrt .kurs-schloss {
  display: block;
  margin: 22px 0 0;
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--btn-border);
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 1px 2px var(--schatten-fein), 0 1px 3px var(--schatten-mittel);
  text-align: center;
}

.geschichte-schloss h2,
.kurs-schloss h2 {
  margin: 0 0 10px;
  font-size: clamp(19px, 3.6vw, 22px);
  color: var(--text);
}

.geschichte-schloss p,
.kurs-schloss p {
  margin: 0 auto 18px;
  max-width: 46ch;
  font-size: clamp(15px, 3vw, 17px);
  line-height: 1.65;
  color: var(--muted);
}

/* Die zweite Zeile unter dem Knopf: der Weg zum gratis Kurs.
   Kleiner als der Knopf, damit klar ist, was der Hauptweg ist. */
.kurs-schloss-frei {
  margin-top: 14px !important;
  margin-bottom: 0 !important;
  font-size: 15px;
}

/* Eine bezahlte Lektion in der Liste der Uebersicht.
   ACHTUNG, HIER LAG EIN FEHLER (07.09.2026): diese Regeln hingen
   zuerst nur an data-gesperrt. Das Merkmal steht fest im HTML und
   weiss nichts davon, ob jemand bezahlt hat -- ein zahlender Kunde
   sah also ueberall Schloesser. Jetzt haengt alles zusaetzlich an
   "zugang-fehlt", das ein Skript im Kopf der Seite nur dann setzt,
   wenn NICHT freigeschaltet ist.
   Der Haken "erledigt" faellt weg: man kann nicht abhaken, was man
   nicht oeffnen kann. Die Zeile bleibt sonst gleich gross, damit
   beim Freischalten nichts springt. */
.zugang-fehlt .kurs-liste > li[data-gesperrt] .lek-haken { display: none; }

.zugang-fehlt .kurs-liste a[data-gesperrt] .kurs-lektion-titel,
.zugang-fehlt .kurs-liste a[data-gesperrt] .kurs-regel { color: var(--n-grau-a); }

/* Pfeil oder Schloss: beide stehen in der Seite, sichtbar ist immer
   genau eins. Voreinstellung ist der Pfeil -- so sieht ein Kunde
   (und auch ein Besucher ohne JavaScript) die gewohnte Zeile.
   Dieselbe Grauabstufung wie das Schloss auf einer Karte. */
.kurs-schloss-zeichen { display: none; font-size: 15px; color: var(--n-grau-b); }
.zugang-fehlt .kurs-schloss-zeichen { display: inline; }
.zugang-fehlt .kurs-pfeil-offen { display: none; }

/* Eine gesperrte Karte auf der Uebersicht /hoeren-und-lesen/.
   Gleiche Groesse und gleicher Aufbau wie jede andere Karte -- beim
   Freischalten soll nichts springen. Nur blasser, mit Schloss.
   Nachgebaut aus styles.css (.chapter-card-locked); wort.css hat
   seine eigene Kopie der Kartenregeln, siehe die Notiz weiter oben. */
/* GENAU dieselben Farben wie im Lernspiel (styles.css, Abschnitt
   "gesperrte Fachkarte"). Vorher stand hier ueberall var(--muted).
   Das ist ein HELLERES Grau: die gesperrte Geschichte sah dadurch
   weniger gesperrt aus als ein gesperrtes Fach, und die Nummer im
   Kreis verschwand ganz, weil der Kreis dieselbe Farbe hatte wie
   die Karte. Gemeldet von Bo am 07.09.2026 ("the design is not
   similar"). */
.chapter-card-locked .mode-card-title,
.chapter-card-locked .mode-card-desc,
.chapter-card-locked .mode-card-progress {
  color: var(--n-grau-a);
}

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

.chapter-card-lock {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--n-grau-b);
  pointer-events: none;
}

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

/* Vor und zurueck innerhalb eines Niveaus. */
.geschichte-blaettern {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
}

.geschichte-blaettern a {
  flex: 1 1 200px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}

.geschichte-blaettern a:hover { background: var(--btn-hover); }
.geschichte-blaettern .weiter { text-align: end; }

/* ==================================================================
   ALPHABET-SEITE  /alphabet/   (05.09.2026)
   ==================================================================
   Erzeugt von 3-REGELN-UND-NOTIZEN/alphabetseite-bauen/.
   Ein Raster aus Buchstabenkarten: gross der Buchstabe, darunter wie
   er heisst, darunter ein Beispielwort mit Artikel aus words-data.js.
   ================================================================== */
.lede {
  font-size: clamp(16px, 3vw, 18px);
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 8px;
}

/* Flex statt Grid: bei 26 Buchstaben bleibt in der letzten Zeile fast
   immer eine Luecke. Im Grid klebte die letzte Karte allein links und
   daneben war ein grosses leeres Feld (Kundenmeldung 05.09.2026:
   "u could organize these letters better, couldnt u?"). Mit Flex und
   justify-content: center steht eine angebrochene Zeile mittig --
   das sieht aus wie gewollt und nicht wie vergessen. */
/* ------------------------------------------------------------------
   SYMMETRIE (Kundenwunsch 05.09.2026: "the symmetrie of this site is
   importent")
   ------------------------------------------------------------------
   Vorher hatte die Alphabet-Seite DREI verschiedene linke Kanten:
   der Kartenkasten begann bei 163 px, die erste Karte bei 224 px,
   Titel und Text bei 343 px. Der Grund war, dass die Karten aus der
   Textspalte ausbrachen, um breiter zu sein.
   Jetzt ist es umgekehrt: die ganze Seite ist breiter (1080 px), und
   ALLES steht in derselben Spalte -- Titel, Text, Kaesten, Karten.
   Eine Kante links, eine rechts.

   Damit die Karten die Spalte auch wirklich ausfuellen, ist ihre
   Breite ausgerechnet: (100% minus die Luecken) geteilt durch die
   Zahl der Spalten. Eine volle Zeile endet dadurch genau am rechten
   Rand.

   GEAENDERT 05.09.2026, KUNDENWUNSCH mit Bildschirmfoto:
   Hier stand justify-content: center, damit eine angebrochene letzte
   Zeile mittig sitzt. Bei 26 Buchstaben in 6 Spalten sind das Y und Z
   -- die standen dadurch allein in der Mitte, mit einem Loch links
   UND rechts. Bo hat das Loch links eingekringelt und einen Pfeil
   nach links gezeichnet.
   Jetzt beginnt auch die letzte Zeile an derselben linken Kante wie
   alle Zeilen darueber. Volle Zeilen aendern sich dadurch nicht: die
   Karten sind fest 1/6 breit, eine volle Zeile fuellt die Spalte so
   oder so genau aus.
   ------------------------------------------------------------------ */
.abc-raster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
}

.abc-karte {
  /* Sechs Karten je Zeile, zusammen genau so breit wie die Spalte.
     KEIN flex-grow: sonst waere eine allein stehende Karte breiter
     als alle anderen. */
  flex: 0 0 calc((100% - 5 * 10px) / 6);
  display: flex;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--btn-border);
  box-shadow: 0 1px 2px var(--schatten-fein);
}

/* Innen sitzt eine "Flaeche". Gibt es zu dem Zeichen eine Tondatei,
   ist sie ein <button>, sonst ein <span> -- beide sehen gleich aus.
   So steht nie ein Knopf da, der nichts tut. */
.abc-flaeche {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 12px;
  border: 0;
  border-radius: 16px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
}

button.abc-flaeche { cursor: pointer; }
button.abc-flaeche:hover { background: var(--btn-hover); }
button.abc-flaeche:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Kleines Lautsprecherzeichen oben rechts -- nur auf Karten, die
   wirklich einen Ton haben. */
.abc-hoerbar { position: relative; }
.abc-hoerbar::after {
  content: "🔊";
  position: absolute;
  top: 8px;
  inset-inline-end: 10px;
  font-size: 13px;
  opacity: 0.6;
}
.abc-hoerbar.spielt::after { opacity: 1; }

/* Hoerknopf UNTER einem Textkasten (10.09.2026).
   Bo: "give for this text an audio. like, if the visitor clicks on
   it, he can hear it." -- gemeint war der Kasten zum scharfen s.

   WARUM EIN EIGENER KNOPF UND NICHT DER GANZE KASTEN
   Ein anklickbarer Textblock laesst sich nicht mehr mit der Maus
   markieren und kopieren, und auf dem Handy loest jede Beruehrung
   beim Lesen den Ton aus. Darum ein kleiner Knopf am Ende.

   WARUM NICHT .abc-hoerbar
   Dort sitzt das Lautsprecherzeichen ueber ::after oben rechts in
   einer grossen Karte. Hier steht es im Knopf selbst. Nichts an den
   bestehenden Regeln wurde geaendert -- das hier kommt nur dazu. */
.kasten-hoerknopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 9px 16px;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: inherit;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.kasten-hoerknopf::before { content: "🔊"; font-size: 15px; opacity: 0.75; }
.kasten-hoerknopf:hover { background: var(--btn-hover); }
.kasten-hoerknopf:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Laeuft der Ton, setzt wort.js die Klasse "spielt". */
.kasten-hoerknopf.spielt { border-color: var(--accent); }
.kasten-hoerknopf.spielt::before { opacity: 1; }

/* Die drei Umlaute und die Erklaerkarten brauchen mehr Platz --
   dort steht noch ein ganzer Satz dabei. */
/* Drei je Zeile: die drei Umlaute ergeben genau eine Zeile, die
   zwoelf Buchstabenpaare genau vier, die sechs Stolpersteine genau
   zwei. Nichts bleibt uebrig. */
.abc-raster-drei .abc-karte,
.abc-raster-text .abc-karte { flex: 0 0 calc((100% - 2 * 10px) / 3); }
.abc-raster-text .abc-zeichen { font-size: clamp(20px, 4vw, 26px); }

/* Mittlere Breite (Tablet hochkant, schmales Fenster): drei je Zeile.
   Seit die Karten Bilder haben (11.09.2026), waren sechs je Zeile
   dort zu eng -- die Bilder nur noch daumengross, "der Computer"
   zweizeilig. Muss VOR der 480px-Regel stehen, damit auf dem Handy
   weiter zwei je Zeile gelten. */
@media (max-width: 760px) {
  .abc-karte { flex: 0 0 calc((100% - 2 * 10px) / 3); }
}

@media (max-width: 480px) {
  .abc-karte { flex: 0 0 calc((100% - 10px) / 2); }
  .abc-raster-drei .abc-karte,
  .abc-raster-text .abc-karte { flex: 0 0 100%; }
}

.abc-zeichen {
  font-size: clamp(24px, 5vw, 30px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
}

.abc-name {
  font-size: 13px;
  color: var(--muted);
}

/* Bild zum Beispielwort (11.09.2026, Bo: "create for each letter a svg
   picture like u did"). Steht zwischen Buchstabe und Wort, mittig.
   Die Bilder sind flach gezeichnet und sehen auf hellen und dunklen
   Karten gleich gut aus -- deshalb keine eigene Regel fuer dunkel. */
.abc-bild {
  display: block;
  width: 80%;
  max-width: 112px;
  height: auto;
  margin: 6px auto 2px;
}

.abc-beispiel {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

/* Fuer Y gibt es in der Wortliste kein Substantiv -- dann steht dort
   die Wahrheit statt eines erfundenen Beispiels. */
.abc-ohne {
  font-weight: 400;
  font-style: italic;
  color: var(--muted);
}

.abc-hinweis {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}