/* ==========================================================================
   Bootsschein-Trainer — Stylesheet
   Reines CSS, keine Abhaengigkeiten, keine externen Ressourcen.
   Aufbau: Schriften, Farben, Grundlagen, Bausteine, Seiten, Dunkelmodus, Druck.
   ========================================================================== */

/* --- Schriften -------------------------------------------------------------
   Lokal eingebunden, nicht ueber Google. Ein Aufruf von fonts.googleapis.com
   uebertraegt bei jedem Seitenaufruf die IP-Adresse der Besucher in die USA
   und ist in Deutschland abmahnfaehig (LG Muenchen I, Az. 3 O 17493/20).      */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  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: 'Inter';
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/source-serif-4-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/source-serif-4-latin-ext.woff2') format('woff2');
  font-weight: 200 900;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB;
}

/* --- Farben und Masse ---------------------------------------------------- */

:root {
  /* Grundton: tiefes Seewasser auf warmem Papier */
  --tinte:        #0d2233;
  --tinte-weich:  #3d5668;
  /* #6b8497 war es bis zur ersten Kontrastmessung: 3,59:1 auf dem Papier
     und 3,24:1 auf der tiefsten Karte — unter den 4,5:1, die WCAG für
     Fließtext verlangt, und das war die Ursache der meisten Befunde.
     Der Farbton ist derselbe geblieben, nur die Helligkeit ist so weit
     gesenkt, dass der schlechteste Fall 4,56:1 erreicht. */
  --tinte-leise:  #566a7a;
  /* Kuehler statt cremefarben. Das alte #f8f5f0 war Papier — schoen fuer
     ein Buch, aber eine Lernplattform liest sich als heller, ruhiger Raum,
     nicht als Seite. Der Unterschied ist klein und aendert den Charakter
     der Seite trotzdem vollstaendig. */
  --papier:       #f7f9fb;
  --papier-hoch:  #ffffff;
  --papier-tief:  #eaf1f7;
  --schleier:     247, 249, 251;   /* Papier als RGB-Tripel fuer rgba() */

  /* Tagfassung: warmes Licht oben rechts wie eine hohe Sonne, kuehler
     Wasserschein unten links. Beide sehr schwach — was auffaellt, ist zu
     viel; es soll nur nicht flach aussehen. */
  /* Kuehl statt warm: Das alte Licht war ein Sonnenton (255, 214, 150) und
     zog die ganze Seite ins Cremefarbene zurueck, gegen das der neue Akzent
     dann arbeiten musste. */
  --grund-lichter:
    radial-gradient(120vw 80vh at 88% -12%, rgba(180, 214, 244, .34), transparent 62%),
    radial-gradient(100vw 70vh at 4% 108%, rgba(150, 199, 224, .24), transparent 60%);
  --knopf-grund:  #196dbe;         /* Der Hauptknopf traegt den Akzent — so
                                      macht es jede Lernplattform, und so
                                      sieht man sofort, was das Wichtige ist. */
  --knopf-schrift:#f8f5f0;
  --linie:        #d3dfe9;
  --linie-fein:   #e4ecf3;

  /* EIN Akzent, und der ist blau.
     Vorher war es Messing auf cremefarbenem Papier — die Farbsprache eines
     Sachbuchs. Lernplattformen benutzen fast ausnahmslos eine einzige
     kraeftige Farbe auf hellem, kuehlem Grund; alles andere bleibt ruhig,
     damit der Stoff die einzige Sache auf der Seite ist, die um
     Aufmerksamkeit bittet. Blau ist hier zugleich die naheliegende
     Wassererbe — die Seite wird also nicht unmaritim, sie wird nur klarer.

     Das Messing bleibt an genau einer Stelle: dem Anker auf Kaept'n Ottos
     Muetze. Ein warmer Punkt in einer kuehlen Seite ist ein Merkzeichen;
     ueberall verteilt waere es ein zweiter Akzent, und zwei Akzente sind
     keiner.

     Der Wert ist gerechnet, nicht gewaehlt: 4,50:1 auf dem hellsten
     Akzentgrund, 5,29:1 auf Weiss. */
  --akzent:      #196dbe;
  --akzent-hell: #e3eefb;
  --gruen:        #1b7a54;   /* nur Erfolg */
  --gruen-hell:   #e2f2ea;
  --rot:          #c93128;   /* nur Fehler */
  --rot-hell:     #fce8e6;
  --blau:         #196dbe;   /* gleich dem Akzent: Verweise sind der Akzent */
  --blau-hell:    #e3eefb;

  /* Scheinfarben */
  --see:    #17567f;
  --binnen: #1c6b4a;
  --funk:   #6b4a94;
  --pyro:   #a9762a;

  /* Radien: drei Stufen, damit Kachel, Karte und Pille unterscheidbar bleiben */
  --radius:       15px;
  --radius-klein: 10px;
  --radius-fein:  7px;

  /* Schatten in drei Stufen. Jede Stufe hat einen scharfen Kontaktschatten
     und einen weichen Streuschatten — nur so wirkt eine Flaeche aufgelegt
     statt aufgemalt. Der Farbton ist die Tinte, nicht reines Schwarz. */
  --schatten-fein: 0 1px 1px rgba(13, 34, 51, .04),
                   0 2px 6px rgba(13, 34, 51, .045);
  --schatten:      0 1px 1px rgba(13, 34, 51, .05),
                   0 4px 10px rgba(13, 34, 51, .05),
                   0 12px 28px rgba(13, 34, 51, .05);
  --schatten-hoch: 0 1px 2px rgba(13, 34, 51, .06),
                   0 8px 20px rgba(13, 34, 51, .08),
                   0 26px 56px rgba(13, 34, 51, .09);

  --breite:       1180px;
  --breite-text:  680px;

  /* Abstandsraster: alles Vielfache von 4, damit nichts um ein Pixel danebensteht */
  --luft-1: .25rem;
  --luft-2: .5rem;
  --luft-3: .75rem;
  --luft-4: 1rem;
  --luft-6: 1.5rem;
  --luft-8: 2rem;
  --luft-12: 3rem;

  --tempo:      160ms cubic-bezier(.2, .7, .3, 1);
  --tempo-lang: 320ms cubic-bezier(.2, .7, .3, 1);
}

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

/* --- Grundlagen ---------------------------------------------------------- */

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

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

/* --- Der Glanz auf den Kategoriekarten ------------------------------------
   Ein weicher Lichtschein, der dem Zeiger folgt, plus ein feiner Saum an der
   Kante. Er liegt in einem ::before über der Karte und nicht im Hintergrund:
   So bleibt der Kartengrund, wie er ist, und der Schein legt sich darüber,
   statt ihn zu ersetzen.

   pointer-events: none ist keine Feinheit, sondern Bedingung — eine Schicht
   über der Karte fängt sonst jeden Klick ab, und ein Verweis, der sich nicht
   anklicken lässt, ist schlimmer als kein Schein.

   Ohne glanz.js stehen --gx und --gy nicht; dann sitzt der Schein in der
   Mitte und die Karte leuchtet beim Überfahren trotzdem. Das ist der Fall,
   den es öfter gibt als man denkt: Skript blockiert, Skript noch nicht
   geladen, Tastaturbedienung.                                             */

.weg-karte, .abschnitt-karte, .scheinwahl-karte, .schein-karte {
  position: relative;
  isolation: isolate;
}
.weg-karte::before, .abschnitt-karte::before,
.scheinwahl-karte::before, .schein-karte::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .32s ease;
  background:
    radial-gradient(240px circle at var(--gx, 50%) var(--gy, 40%),
      rgba(217, 163, 78, .16), rgba(217, 163, 78, .05) 42%, transparent 72%);
}
.weg-karte:hover::before, .abschnitt-karte:hover::before,
.scheinwahl-karte:hover::before, .schein-karte:hover::before,
.weg-karte:focus-visible::before, .abschnitt-karte:focus-visible::before,
.scheinwahl-karte:focus-visible::before, .schein-karte:focus-visible::before {
  opacity: 1;
}

/* Im Dunkeln trägt derselbe Schein weniger weit — auf einem hellen Grund
   sieht man ein Prozent Licht, auf einem dunklen nicht. */
:root[data-thema="dunkel"] .weg-karte::before,
:root[data-thema="dunkel"] .abschnitt-karte::before,
:root[data-thema="dunkel"] .scheinwahl-karte::before,
:root[data-thema="dunkel"] .schein-karte::before {
  background:
    radial-gradient(260px circle at var(--gx, 50%) var(--gy, 40%),
      rgba(217, 163, 78, .26), rgba(217, 163, 78, .08) 44%, transparent 74%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .weg-karte::before,
  :root:not([data-thema="hell"]) .abschnitt-karte::before,
  :root:not([data-thema="hell"]) .scheinwahl-karte::before,
  :root:not([data-thema="hell"]) .schein-karte::before {
    background:
      radial-gradient(260px circle at var(--gx, 50%) var(--gy, 40%),
        rgba(217, 163, 78, .26), rgba(217, 163, 78, .08) 44%, transparent 74%);
  }
}

/* Der Saum: eine Linie im Akzent, die beim Überfahren aufscheint. Sie
   liegt in einem zweiten Kasten, weil ein border-color-Wechsel die ganze
   Kante auf einmal umfärbt — hier soll sie aufleuchten, nicht umspringen. */
.weg-karte::after, .abschnitt-karte::after,
.scheinwahl-karte::after, .schein-karte::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(217, 163, 78, .55),
              0 0 22px -6px rgba(217, 163, 78, .5);
  opacity: 0;
  transition: opacity .32s ease;
}
.weg-karte:hover::after, .abschnitt-karte:hover::after,
.scheinwahl-karte:hover::after, .schein-karte:hover::after,
.weg-karte:focus-visible::after, .abschnitt-karte:focus-visible::after,
.scheinwahl-karte:focus-visible::after, .schein-karte:focus-visible::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .weg-karte::before, .abschnitt-karte::before,
  .scheinwahl-karte::before, .schein-karte::before,
  .weg-karte::after, .abschnitt-karte::after,
  .scheinwahl-karte::after, .schein-karte::after { transition: none; }
}

/* --- Tag und Nacht -------------------------------------------------------
   Die ganze Seite hat zwei Fassungen, nicht nur die Startseite mit ihrem
   Wasser. Der Unterschied steckt hier: zwei sehr weiche Lichter im
   Hintergrund, die im Hellen wie ein hoher Sommermittag wirken und im
   Dunkeln wie eine klare Nacht — dort kommen Sterne dazu.

   Alles aus Farbverläufen, nichts nachgeladen: kein Bild, keine Lizenz,
   keine zusätzliche Anfrage. Die Lichter stehen fest (background-attachment)
   und fahren beim Scrollen nicht mit — ein Himmel bleibt, wo er ist.

   Auf schmalen Schirmen wird das abgeschaltet: Ein festgeklebter Hintergrund
   ist auf manchen Telefonen teuer, und zu sehen ist davon dort fast nichts. */

body {
  margin: 0;
  background-color: var(--papier);
  background-image: var(--grund-lichter, none);
  background-size: var(--grund-kacheln, auto);
  background-repeat: var(--grund-wiederholung, no-repeat);
  background-attachment: fixed;
  color: var(--tinte);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  font-feature-settings: 'kern' 1, 'liga' 1, 'cv05' 1;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

/* Source Serif 4 hat eine optische Groessenachse (opsz 8-60). Grosse Grade
   bekommen den Displayschnitt: engere Weiten, feinere Haarstriche. Kleine
   Grade bleiben beim Lesetext-Schnitt, sonst brechen die Haarstriche weg.
   Browser regeln das ueber font-optical-sizing selbst — hier wird es fuer die
   Ueberschriften bewusst uebersteuert. */
h1, h2, h3, h4 {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  color: var(--tinte);
  line-height: 1.18;
  letter-spacing: -.014em;
  margin: 0 0 .5em;
  font-weight: 600;
  font-optical-sizing: auto;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.05rem, 1.25rem + 2.9vw, 3.35rem);
  font-weight: 620; letter-spacing: -.021em; line-height: 1.08;
  font-variation-settings: 'opsz' 54;
}
h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  letter-spacing: -.016em; line-height: 1.16;
  font-variation-settings: 'opsz' 34;
}
h3 { font-size: 1.22rem; letter-spacing: -.008em; font-variation-settings: 'opsz' 22; }
h4 { font-size: 1.05rem; font-family: 'Inter', sans-serif; font-weight: 620;
     letter-spacing: -.004em; }

/* Zahlen in Tabellen, Uhren und Zaehlern laufen auf gleicher Breite —
   sonst zappelt die Anzeige bei jedem Tick. */
.zaehler, .uhr, td.zahl, .teil-tabelle, .siegel b, .zahlenband b,
.reife-zahl b, .serie b { font-variant-numeric: tabular-nums; }

p { margin: 0 0 1.05em; }
a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--akzent); }

img { max-width: 100%; height: auto; }

/* Symbole nehmen Groesse und Farbe vom Text an und sitzen auf der
   Schriftlinie statt darueber. */
.zeichen {
  width: 1.05em; height: 1.05em; flex: none;
  vertical-align: -.16em;
}

/* Fokusring: zwei Ringe, damit er auf hellem wie dunklem Grund sichtbar ist
   und nicht mit dem Rahmen des Elements verschmilzt. */
:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(169, 118, 42, .18);
  border-radius: var(--radius-fein);
}

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

.sprungmarke {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--tinte); color: var(--papier);
  padding: .7rem 1.1rem; border-radius: 0 0 var(--radius-klein) 0;
}
.sprungmarke:focus { left: 0; }

/* Der Sprunglink muss den Fokus mitnehmen, nicht nur die Ansicht.

   Ohne tabindex="-1" am Ziel tut ein Sprunglink genau die Haelfte: Die Seite
   scrollt zum Inhalt, der Fokus bleibt oben stehen, und der naechste
   Tastendruck landet wieder in der Hauptnavigation — also dort, worueber
   gerade gesprungen werden sollte. Das ist der haeufigste Fehler dieser
   Bauform und war hier auf allen Seiten so, bis tools/zugang_pruefen.mjs
   danach gefragt hat.

   Der Rahmen am <main> selbst bleibt weg: Es ist kein Bedienelement, sondern
   nur ein Landeplatz, und ein Rechteck um die halbe Seite sagt weniger als
   das, was danach passiert — der naechste Tabschritt steht im Inhalt. */
#inhalt:focus { outline: none; }

/* --- Aufbau -------------------------------------------------------------- */

/* Quer gehalten sitzt die Kerbe an der Seite: Ohne die seitlichen
   Abstaende stuende der Text auf einem iPhone im Querformat halb
   darunter. `max()` und nicht `+`, weil der Rand von 2.5rem in aller Regel
   schon groesser ist als der Einzug — addieren wuerde die Spalte auf
   Geraeten mit Kerbe grundlos schmaler machen. */
.huelle {
  width: min(100% - 2.5rem, var(--breite)); margin-inline: auto;
  padding-left: max(0px, env(safe-area-inset-left, 0px) - 1.25rem);
  padding-right: max(0px, env(safe-area-inset-right, 0px) - 1.25rem);
}
.huelle-schmal { width: min(100% - 2.5rem, var(--breite-text)); margin-inline: auto; }
/* Üben und Prüfung laufen in einer eigenen, schmaleren Spalte. Überschrift,
   Fortschritt und Karte stehen dadurch auf derselben Achse — vorher hing die
   Karte mittig unter einer linksbündigen Überschrift. */
.huelle-bogen { width: min(100% - 2.5rem, 800px); margin-inline: auto; }

/* Auf Arbeitsseiten tritt die Seitenueberschrift zurueck. Wer uebt, soll die
   Frage lesen und nicht den Seitennamen. */
.huelle-bogen h1 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem);
  font-variation-settings: 'opsz' 30;
  margin-bottom: .25rem;
}

main { min-height: 60vh; padding-bottom: 5rem; }

/* --- Kopfleiste ---------------------------------------------------------- */

/* Am Seitenanfang schwebt die Leiste randlos ueber dem Inhalt; sobald
   gescrollt wird, setzt sie sich mit Linie und Schatten ab. Das gibt der
   Seite oben Ruhe und im Betrieb Halt. */
/* DIE SICHEREN RAENDER, UND WARUM SIE ZUSAMMENGEHOEREN

   Im Viewport-Meta steht seit 2026-09 `viewport-fit=cover`: Die Seite geht
   damit bis unter die Kerbe und die Wischleiste, statt zwischen zwei
   farbigen Balken zu stehen. Erst dadurch wird `env(safe-area-inset-*)`
   ueberhaupt groesser als null — die eine Zeile, die es vorher am unteren
   Knopf schon gab, war bis dahin wirkungslos.

   Das Deckblatt dieser Aenderung: `cover` OHNE diese Abstaende waere
   schlechter als vorher, denn dann liegt die Kopfleiste unter der Kerbe.
   Beides gehoert in einen Commit und nicht in zwei. */
.kopf {
  position: sticky; top: 0; z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(var(--schleier), .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--tempo), box-shadow var(--tempo),
              background var(--tempo);
}
.kopf[data-gescrollt="ja"] {
  border-bottom-color: var(--linie-fein);
  box-shadow: var(--schatten-fein);
  background: rgba(var(--schleier), .92);
}
.kopf-innen {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 68px;
}
.marke {
  display: inline-flex; align-items: center; gap: .62rem;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.14rem; font-weight: 640; letter-spacing: -.018em;
  color: var(--tinte); text-decoration: none; white-space: nowrap;
  font-variation-settings: 'opsz' 20;
}
.marke:hover { color: var(--tinte); }
.marke:hover svg { transform: rotate(-14deg); }
.marke svg {
  width: 28px; height: 28px; flex: none; color: var(--akzent);
  transition: transform var(--tempo-lang);
}

.hauptnavi {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: .1rem; margin-left: auto; align-items: center;
}
.hauptnavi a {
  position: relative;
  padding: .5rem .78rem; border-radius: var(--radius-fein);
  color: var(--tinte-weich); text-decoration: none;
  font-size: .93rem; font-weight: 520; letter-spacing: -.002em;
  transition: color var(--tempo);
}
.hauptnavi a::after {
  content: ''; position: absolute; left: .78rem; right: .78rem; bottom: .12rem;
  height: 2px; border-radius: 2px; background: var(--akzent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--tempo);
}
.hauptnavi a:hover { color: var(--tinte); }
.hauptnavi a:hover::after { transform: scaleX(.4); opacity: .45; }
.hauptnavi a[aria-current="page"] { color: var(--tinte); font-weight: 600; }
.hauptnavi a[aria-current="page"]::after { transform: scaleX(1); opacity: 1; }

/* Der Schalter zwischen Tag- und Nachtfassung. Er trägt sein Wort neben dem
   Symbol: Ein Mond allein sagt nicht, dass es hier zwei Fassungen gibt — und
   der Hintergrund ist der halbe Grund, warum es sie gibt. Auf schmalen
   Schirmen bleibt nur das Symbol; dort zählt jeder Millimeter der
   Kopfleiste. */
.thema-schalter {
  display: inline-flex; align-items: center; gap: .38rem;
  height: 34px; padding: 0 .7rem 0 .55rem; margin-left: .4rem;
  border-radius: 99px;
  border: 1px solid var(--linie);
  font-family: 'Inter', sans-serif; font-size: .8rem; font-weight: 600;
  color: var(--tinte-weich);
  transition: border-color var(--tempo), color var(--tempo);
}
.thema-schalter:hover { border-color: var(--akzent); color: var(--tinte); }
.thema-schalter .zeichen { flex: none; }
.thema-wort { line-height: 1; }
@media (max-width: 1180px) {
  .thema-schalter { padding: 0; width: 34px; justify-content: center; }
  .thema-wort { display: none; }
}
@media (max-width: 860px) {
  /* Im aufgeklappten Menü ist wieder Platz. */
  .thema-schalter { padding: 0 .7rem 0 .55rem; width: auto; }
  .thema-wort { display: inline; }
}

.navi-schalter {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--linie); border-radius: var(--radius-fein);
  padding: .4rem .5rem; cursor: pointer; color: var(--tinte);
  line-height: 0;
}
.navi-schalter svg { width: 22px; height: 22px; }

@media (min-width: 861px) and (max-width: 1180px) {
  .hauptnavi a { padding: .5rem .5rem; font-size: .87rem; }
  .hauptnavi a::after { left: .5rem; right: .5rem; }
  .thema-schalter { margin-left: .15rem; }
}

@media (max-width: 860px) {
  .navi-schalter { display: block; }
  .hauptnavi {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--papier-hoch); border-bottom: 1px solid var(--linie);
    padding: .5rem 1.25rem 1rem; box-shadow: var(--schatten);
  }
  .hauptnavi.offen { display: flex; }
  .hauptnavi a { padding: .8rem .6rem; font-size: 1rem; }
}

@media (max-width: 700px) {
  body { background-image: none; background-attachment: scroll; }
}

/* --- Fussleiste ---------------------------------------------------------- */

.fuss {
  background: var(--tinte); color: #b9cbd8;
  padding: 3.6rem 0 2.4rem; margin-top: 5rem;
  font-size: .91rem; line-height: 1.6;
  /* Eine feine Akzentlinie oben — dasselbe Detail wie an der Marke. */
  border-top: 3px solid var(--akzent);
}
/* Die Fusszeile ist in BEIDEN Themen dunkel — im hellen traegt sie
   var(--tinte), im dunklen ein festes #081319. Ihre Textfarben duerfen
   deshalb nicht am Thema haengen, und die vier anderen tun das auch nicht
   (#b9cbd8, #93a9b8, #fff). Nur diese Ueberschrift stand auf var(--papier),
   und das ist im hellen Thema fast weiss und im dunklen fast schwarz: Die
   Spaltenueberschriften der Fusszeile waren im Dunkelmodus unsichtbar,
   1,06:1. Gefunden hat es tools/kontrast_pruefen.mjs beim ersten Lauf. */
.fuss h4 {
  color: #f8f5f0; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .12em; margin-bottom: 1rem; font-weight: 640;
  font-family: 'Inter', sans-serif;
}
.fuss a {
  color: #b9cbd8; text-decoration: none;
  transition: color var(--tempo);
}
.fuss a:hover { color: #fff; }
.fuss li a { position: relative; }
.fuss li a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 1px; background: var(--akzent);
  transition: right var(--tempo);
}
.fuss li a:hover::after { right: 0; }
.fuss-raster {
  display: grid; gap: 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .5rem; }
.fuss-schluss {
  margin-top: 2.6rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .13);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  color: #93a9b8; font-size: .86rem;
}

/* --- Schaltflaechen ------------------------------------------------------ */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .78rem 1.35rem;
  border: 1px solid transparent; border-radius: var(--radius-klein);
  background: var(--knopf-grund); color: var(--knopf-schrift);
  font: inherit; font-size: .96rem; font-weight: 560; letter-spacing: -.004em;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--schatten-fein);
  transition: transform var(--tempo), background var(--tempo),
              box-shadow var(--tempo), border-color var(--tempo);
}
.knopf:hover {
  background: #163449; color: var(--knopf-schrift);
  transform: translateY(-1px); box-shadow: var(--schatten);
}
/* Beim Druecken federt der Knopf sichtbar ein — die Rueckmeldung, die
   ein echter Schalter gibt. */
.knopf:active { transform: translateY(0) scale(.985); box-shadow: var(--schatten-fein); }
.knopf[disabled] { opacity: .4; cursor: not-allowed; transform: none;
  box-shadow: none; }
.knopf .zeichen { width: 1.1em; height: 1.1em; }

.knopf-zweit {
  background: var(--papier-hoch); color: var(--tinte); border-color: var(--linie);
}
.knopf-zweit:hover {
  background: var(--papier-hoch); color: var(--tinte);
  border-color: var(--tinte-leise);
}

.knopf-akzent { background: var(--akzent); }
.knopf-akzent:hover { background: #96671f; }

.knopf-still {
  background: none; border-color: transparent; color: var(--tinte-weich);
  padding: .55rem .8rem; box-shadow: none;
}
.knopf-still:hover {
  background: var(--papier-tief); color: var(--tinte);
  box-shadow: none; transform: none;
}

.knopf-reihe { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

/* --- Karten -------------------------------------------------------------- */

/* Der helle Saum an der Oberkante ist das, was eine Flaeche als Material
   lesen laesst statt als Rechteck: Licht faellt von oben. */
.karte {
  background: var(--papier-hoch);
  border: 1px solid var(--linie-fein);
  border-radius: var(--radius);
  padding: 1.7rem;
  box-shadow: var(--schatten-fein), inset 0 1px 0 rgba(255, 255, 255, .7);
}
:root[data-thema="dunkel"] .karte {
  box-shadow: var(--schatten-fein), inset 0 1px 0 rgba(255, 255, 255, .045);
}
@media (max-width: 560px) { .karte { padding: 1.3rem; } }

.raster { display: grid; gap: 1.2rem; }
/* `min(100%, …)` und nicht nur die Mindestbreite: Eine Spalte, die 290
   Pixel breit sein MUSS, ist auf einem 320er Telefon breiter als der Platz,
   den die Karte ihr lässt — dann schiebt die Seite seitwärts. Genau das
   stand auf /lernstand.html: 332 Pixel Dokument in einem 320er Fenster.
   `.raster-trainer` trug die Lösung schon; die anderen beiden nicht, weil
   sie nie auf einer geprüften Seite standen. */
.raster-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.raster-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
/* Der Block der fünf Trainer. Bei drei Spalten stehen fünf Karten als
   3 + 2 — mit `auto-fit` blieb bei manchen Breiten eine allein in der
   zweiten Reihe stehen, und jede Karte trägt hier einen ganzen Satz,
   der Platz braucht. */
.raster-trainer {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  max-width: 1020px;
}
/* Sechs Wegekarten: feste Dreierreihen, damit die letzte Zeile nicht mit
   zwei einsamen Karten endet. */
.raster-wege { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .raster-wege { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .raster-wege { grid-template-columns: 1fr; } }

/* --- Etiketten ----------------------------------------------------------- */

.etikett {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .24rem .66rem; border-radius: 100px;
  font-size: .74rem; font-weight: 640; letter-spacing: .015em;
  background: var(--papier-tief); color: var(--tinte-weich);
  white-space: nowrap; line-height: 1.5;
}
.etikett-frei    { background: var(--gruen-hell);   color: var(--gruen); }
.etikett-gesperrt{ background: var(--akzent-hell); color: #7d5518; }
.etikett-geplant { background: var(--papier-tief);  color: var(--tinte-leise); }
.etikett-premium { background: #efe7fa; color: #5b3b8c; }

/* --- Startseite ---------------------------------------------------------- */

.buehne {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--linie-fein);
  /* Unten mehr Luft als oben: Dort steht das Wasser, und der Horizont
     gehört zum Bild. Ohne diesen Streifen sieht man von der Tag- und
     Nachtfassung nichts als eine Farbe. */
  padding: clamp(2.2rem, 4.5vw, 3.4rem) 0 clamp(5rem, 9vw, 8rem);
  isolation: isolate;
}

/* Der Farbverlauf ueber der Buehne.

   Hier lag einmal eine Leinwand mit einem WebGL-Wasser darunter, und dieser
   Verlauf war der Schleier darueber, damit die Schrift auf jedem
   Bildausschnitt ruhig steht. Wasser und Leinwand sind weg (siehe README,
   „Der Kopf der Startseite"); der Verlauf ist geblieben, weil er auch ohne
   sie tut, wofuer er da ist: Er gibt der Buehne oben mehr Farbe als dem
   Rest der Seite und laeuft nach unten und nach rechts aus, damit der
   Uebergang keine Kante hat. */
.buehne::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    /* waagerecht: kraeftig unter der Textspalte, durchsichtig nach rechts.
       Die Marken liegen weit rechts, weil dort die Probefrage steht: Sie
       hat ihren eigenen Grund, und ein harter Schnitt genau an ihrer Kante
       saehe aus wie ein Fehler. */
    linear-gradient(96deg,
      rgb(var(--schleier)) 0%, rgba(var(--schleier), .95) 28%,
      rgba(var(--schleier), .76) 48%,
      rgba(var(--schleier), .26) 70%,
      rgba(var(--schleier), 0) 90%),
    /* senkrecht: laesst den oberen Rand in den Seitenhintergrund
       uebergehen, damit die Buehne nicht als Kasten endet. */
    linear-gradient(180deg,
      rgb(var(--schleier)) 0%, rgba(var(--schleier), .52) 15%,
      rgba(var(--schleier), 0) 32%);
}
@media (max-width: 760px) {
  /* Auf schmalen Schirmen laeuft der Text ueber die volle Breite — dann muss
     der Verlauf von oben kommen statt von der Seite. */
  .buehne::before {
    background: linear-gradient(180deg,
      rgb(var(--schleier)) 0%, rgba(var(--schleier), .96) 50%,
      rgba(var(--schleier), .74) 72%, rgba(var(--schleier), .05) 100%);
  }
}

/* Der Buehnentext sitzt in der Hülle, aber linksbündig — nicht mittig.
   Sonst beginnt die Überschrift weiter rechts als jeder Abschnitt darunter. */
.buehne-innen { position: relative; z-index: 1; max-width: 700px; }

/* Zwei Spalten: links, warum man hier ist — rechts, wie es aussieht.
   Beschreiben hilft an dieser Stelle wenig; was diese Seite von einem PDF
   unterscheidet, passiert erst, nachdem man auf eine Antwort getippt hat. */
.buehne-zwei {
  position: relative; z-index: 1; max-width: none;
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.4rem) clamp(2rem, 4vw, 3.4rem);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  /* Die zweite Zeile nimmt, was die Probefrage an Höhe übrig lässt. Mit
     zwei auto-Zeilen verteilt sich der Rest gleichmäßig, und zwischen
     Vorspann und Knöpfen klafft eine Lücke, die niemand gesetzt hat. */
  grid-template-rows: auto 1fr;
}
/* Die Textspalte oben, die Knöpfe darunter, die Probefrage über beide
   Zeilen. Drei Kästen statt zwei, weil auf einem Telefon die Reihenfolge
   eine andere sein muss: Dort steht die Probefrage zwischen Text und
   Knöpfen — wer auf einem Handy erst an vier Absätzen vorbeimuss, bevor
   etwas passiert, sieht nie, dass etwas passiert. */
.buehne-text { grid-column: 1; grid-row: 1; max-width: 34rem; align-self: end; }

/* Die zweite Zeile unter der Überschrift. Sie trägt das Versprechen; die
   Überschrift trägt nur noch, worum es überhaupt geht — nach beidem sucht
   jemand, und beides muss oben stehen, nicht eines statt des anderen. */
.buehne-zweitzeile {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(1.12rem, 2.1vw, 1.45rem);
  line-height: 1.35; font-weight: 560; color: var(--tinte);
  margin: .1rem 0 .9rem; max-width: 36ch; text-wrap: balance;
}

/* Zwei Karten statt zwei Knöpfen: Welchen Schein jemand braucht, ist die
   erste Frage — und die Antwort steht auf der Karte statt in einer
   Klammer daneben. */
.scheinwahl {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem; margin-top: .3rem;
}
@media (max-width: 420px) { .scheinwahl { grid-template-columns: 1fr; } }

.scheinwahl-karte {
  position: relative; overflow: hidden;
  display: block; text-decoration: none; color: inherit;
  padding: .95rem 1.05rem;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--papier-hoch);
  box-shadow: var(--schatten-fein), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform var(--tempo), border-color var(--tempo),
              box-shadow var(--tempo);
}
:root[data-thema="dunkel"] .scheinwahl-karte {
  box-shadow: var(--schatten-fein), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.scheinwahl-karte:hover { transform: translateY(-2px); border-color: var(--akzent); }
.scheinwahl-kurz {
  display: block; font-family: 'Inter', sans-serif;
  font-size: .7rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--akzent);
}
.scheinwahl-karte b {
  display: block; font-size: 1.22rem; letter-spacing: -.02em; margin: .15rem 0 .1rem;
}
.scheinwahl-wo {
  display: block; font-size: .85rem; color: var(--tinte-leise); line-height: 1.4;
}
.scheinwahl-pfeil {
  display: block; margin-top: .6rem;
  font-family: 'Inter', sans-serif; font-size: .82rem; font-weight: 640;
  color: var(--tinte-weich);
}
.scheinwahl-karte:hover .scheinwahl-pfeil { color: var(--akzent); }

.buehne-auch {
  margin: .9rem 0 0; font-size: .9rem; line-height: 1.6;
  color: var(--tinte-leise); max-width: 40ch;
}
.buehne-auch a { color: var(--tinte-weich); }
.buehne-fuss { grid-column: 1; grid-row: 2; max-width: 34rem; align-self: start; }
.buehne-fuss .zahlenband { margin-top: 1.6rem; }
.buehne-schau { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

@media (max-width: 940px) {
  .buehne-zwei { grid-template-columns: 1fr; grid-template-rows: none; }
  .buehne-text, .buehne-fuss, .buehne-schau {
    grid-column: 1; grid-row: auto; max-width: none;
  }
}

/* Kleiner Vorspann ueber der Ueberschrift: ordnet ein, bevor man liest. */
.buehne .oberzeile {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 640; letter-spacing: .08em;
  text-transform: uppercase; color: var(--akzent);
  margin-bottom: 1.1rem;
}
.buehne .oberzeile::before {
  content: ''; width: 26px; height: 1.5px; background: currentColor; opacity: .6;
}
.buehne p.vorspann {
  font-size: clamp(1.06rem, .98rem + .45vw, 1.24rem);
  line-height: 1.58; color: var(--tinte-weich); max-width: 58ch;
  text-wrap: pretty;
}

.zahlenband {
  display: flex; flex-wrap: wrap; gap: 2.4rem;
  margin-top: 2.4rem; padding-top: 1.8rem;
  border-top: 1px solid var(--linie);
}
.zahlenband div { min-width: 96px; }
.zahlenband b {
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2.15rem; font-weight: 640; line-height: 1.05;
  letter-spacing: -.02em; font-variation-settings: 'opsz' 36;
  font-variant-numeric: tabular-nums;
}
.zahlenband span {
  display: block; margin-top: .18rem;
  font-size: .82rem; color: var(--tinte-leise); letter-spacing: .012em;
}

/* --- Abschnitte ----------------------------------------------------------- */

.abschnitt { margin-top: clamp(3rem, 6vw, 5rem); }

.abschnitt-kopf { max-width: 64ch; margin-bottom: 1.9rem; }
.abschnitt-kopf::before {
  content: ''; display: block; width: 34px; height: 2px;
  background: var(--akzent); border-radius: 2px; margin-bottom: 1.1rem;
}
.abschnitt-kopf h2 { margin-bottom: .4rem; }
.abschnitt-kopf p { color: var(--tinte-weich); margin-bottom: 0; }

/* Breite Karte mit Text links und Beiwerk rechts */
.karte-breit {
  display: flex; gap: 2rem; flex-wrap: wrap; align-items: center;
}
.karte-breit > div:first-child { flex: 1 1 340px; }
.karte-beiwerk { flex: 0 0 auto; }

/* --- Wegekarten auf der Startseite ---------------------------------------- */

.weg-karte {
  display: flex; flex-direction: column;
  padding: 1.6rem 1.5rem 1.4rem;
  background: var(--papier-hoch);
  border: 1px solid var(--linie-fein); border-radius: var(--radius);
  box-shadow: var(--schatten);
  text-decoration: none; color: inherit;
  transition: transform var(--tempo), box-shadow var(--tempo),
              border-color var(--tempo);
}
.weg-karte:hover {
  transform: translateY(-3px); box-shadow: var(--schatten-hoch);
  border-color: var(--linie); color: inherit;
}
.weg-zeichen {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--papier-tief); color: var(--akzent);
  margin-bottom: 1rem;
}
.weg-zeichen svg { width: 23px; height: 23px; }
.weg-karte h3 { margin-bottom: .35rem; }
.weg-karte p { color: var(--tinte-weich); font-size: .94rem; margin-bottom: 1.1rem; }
.weg-pfeil {
  margin-top: auto; font-size: .9rem; font-weight: 600; color: var(--blau);
}
.weg-karte:hover .weg-pfeil { color: var(--akzent); }

/* --- Suchfeld -------------------------------------------------------------- */

.suchfeld { position: relative; max-width: 640px; }
.suchfeld input {
  width: 100%; font: inherit; font-size: 1.05rem;
  padding: .9rem 1rem .9rem 3rem;
  border: 1.5px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--papier-hoch); color: var(--tinte);
  transition: border-color var(--tempo), box-shadow var(--tempo);
}
.suchfeld input::placeholder { color: var(--tinte-leise); }
.suchfeld input:focus {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(169, 118, 42, .16);
}
.suchfeld-zeichen {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--tinte-leise); pointer-events: none;
  display: grid; place-items: center;
}
.suchfeld-zeichen svg { width: 19px; height: 19px; }

/* Fundstellen im Treffertext */
mark {
  background: var(--akzent-hell); color: inherit;
  padding: 0 .12em; border-radius: 3px;
}

.treffer-karte {
  background: var(--papier-hoch); border: 1px solid var(--linie-fein);
  border-radius: var(--radius); padding: 1.3rem 1.4rem; margin-bottom: .9rem;
  box-shadow: var(--schatten);
}
.treffer-karte .herkunft {
  font-size: .74rem; color: var(--tinte-leise); letter-spacing: .05em;
  text-transform: uppercase; font-weight: 620;
}
.treffer-karte h3 {
  font-size: 1.08rem; margin: .35rem 0 .6rem; line-height: 1.4;
}
.treffer-karte .loesung {
  font-size: .94rem; padding: .6rem .85rem; border-radius: var(--radius-klein);
  background: var(--gruen-hell); border-left: 3px solid var(--gruen);
}
.treffer-karte img { max-height: 84px; width: auto; margin-top: .6rem; }

/* --- Lerntafeln ------------------------------------------------------------ */

.tafel-gruppe { margin-bottom: 2.8rem; break-inside: avoid; }
.tafel-gruppe h2 {
  font-size: 1.35rem; padding-bottom: .5rem; margin-bottom: 1.2rem;
  border-bottom: 2px solid var(--linie);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.tafel-gruppe h2 span {
  font-family: 'Inter', sans-serif; font-size: .82rem; font-weight: 560;
  color: var(--tinte-leise);
}

.tafel-raster {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.tafel {
  background: var(--papier-hoch); border: 1px solid var(--linie-fein);
  border-radius: var(--radius-klein); overflow: hidden;
  display: flex; flex-direction: column; break-inside: avoid;
}
.tafel-bild {
  display: grid; place-items: center; min-height: 130px; padding: 1rem;
  background: var(--papier-tief);
}
.tafel-bild img { max-height: 108px; width: auto; }
.tafel-text { padding: .85rem 1rem 1rem; font-size: .9rem; }
.tafel-text b { display: block; line-height: 1.4; margin-bottom: .3rem; }
.tafel-text a {
  font-size: .82rem; color: var(--tinte-leise); text-decoration: none;
}
.tafel-text a:hover { color: var(--akzent); text-decoration: underline; }

/* --- Lernplan: Etappen ------------------------------------------------------
   Ein senkrechter Weg statt eines Rasters. Die Reihenfolge ist die Botschaft:
   erst dieser Abschnitt, dann der nächste.                                    */

.plan-kopf {
  display: grid; gap: 1.2rem; margin-bottom: 2.6rem;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.naechster { border-left: 3px solid var(--akzent); }
.naechster[data-fertig="ja"] { border-left-color: var(--gruen); }
.naechster .herkunft {
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 640; color: var(--akzent);
}
.naechster p { color: var(--tinte-weich); }
.naechster .knopf { margin-top: .6rem; }

.etappen-block { margin-bottom: 2.8rem; }
.etappen-block h3 {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  font-size: 1.3rem; padding-bottom: .5rem; margin-bottom: 0;
  border-bottom: 2px solid var(--linie);
}
.etappen-block h3 .zaehler { font-family: 'Inter', sans-serif; font-weight: 520; }

/* Die Kette: eine durchgehende Linie hinter den Marken */
.etappen { position: relative; padding-top: .4rem; }
.etappen::before {
  content: ''; position: absolute; left: 21px; top: 1.6rem; bottom: 1.6rem;
  width: 2px; background: var(--linie-fein);
}

.etappe {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; gap: 1.1rem;
  padding: 1.15rem 1.2rem 1.15rem 0;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--linie-fein);
  transition: background var(--tempo);
}
.etappe:last-child { border-bottom: 0; }
.etappe:hover { background: var(--papier-hoch); color: inherit; }

.etappe-marke {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--papier); color: var(--tinte-leise);
  border: 2px solid var(--linie);
  font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums;
}
.etappe[data-zustand="begonnen"] .etappe-marke {
  border-color: var(--akzent); color: var(--akzent);
}
.etappe[data-zustand="geschafft"] .etappe-marke {
  border-color: var(--gruen); background: var(--gruen-hell); color: var(--gruen);
}
.etappe[data-zustand="sitzt"] .etappe-marke {
  border-color: var(--gruen); background: var(--gruen); color: #fff;
}

.etappe-mitte { flex: 1; min-width: 0; }
.etappe-kopf {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  margin-bottom: .25rem;
}
.etappe-kopf h4 { margin: 0; font-size: 1.1rem; font-family: inherit;
  font-weight: 650; letter-spacing: -.01em; }
.etappe-mitte p {
  color: var(--tinte-weich); font-size: .93rem; margin: 0 0 .7rem;
}
.etappe-zahlen {
  display: flex; gap: 1.1rem; flex-wrap: wrap;
  margin-top: .45rem; font-size: .82rem; color: var(--tinte-leise);
  font-variant-numeric: tabular-nums;
}
.etappe-pfeil {
  flex: none; align-self: center; color: var(--tinte-leise);
  font-size: 1.1rem; transition: transform var(--tempo), color var(--tempo);
}
.etappe:hover .etappe-pfeil { color: var(--akzent); transform: translateX(3px); }

.etikett-offen     { background: var(--papier-tief);  color: var(--tinte-leise); }
.etikett-begonnen  { background: var(--akzent-hell); color: #7d5518; }
.etikett-geschafft { background: var(--gruen-hell);   color: var(--gruen); }
.etikett-sitzt     { background: var(--gruen);        color: #fff; }
/* Dieselbe Falle wie bei der Fußzeilen-Überschrift: eine fest eingetragene
   Farbe neben einer, die mit dem Thema wechselt. #7d5518 ist dunkelbraun und
   sitzt auf var(--akzent-hell) — im hellen Thema ein helles Sandgelb, im
   dunklen ein fast schwarzes Braun. „Genehmigung ausstehend" stand dort bei
   2,16:1. Für .etikett-begonnen gab es die Ausnahme schon, für
   .etikett-gesperrt fehlte sie. */
:root[data-thema="dunkel"] .etikett-begonnen,
:root[data-thema="dunkel"] .etikett-gesperrt { color: var(--akzent); }
:root[data-thema="dunkel"] .etikett-sitzt { color: #0c1a24; }

/* --- Erfolge ----------------------------------------------------------------- */

.erfolg-raster {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.erfolg {
  display: flex; align-items: flex-start; gap: .9rem;
  padding: .95rem 1.1rem; border-radius: var(--radius-klein);
  border: 1px solid var(--linie-fein); background: var(--papier);
}
.erfolg[data-erreicht="ja"] {
  border-color: var(--akzent); background: var(--akzent-hell);
}
.erfolg[data-erreicht="nein"] { opacity: .55; }
.erfolg-zeichen {
  flex: none; font-size: 1.5rem; line-height: 1.1;
  filter: grayscale(1);
}
.erfolg[data-erreicht="ja"] .erfolg-zeichen { filter: none; }
.erfolg b { display: block; font-size: .95rem; margin-bottom: .15rem; }
.erfolg p {
  margin: 0; font-size: .84rem; color: var(--tinte-weich); line-height: 1.45;
}

@media (max-width: 560px) {
  .etappe { gap: .8rem; padding-right: 0; }
  .etappe-marke { width: 36px; height: 36px; font-size: .85rem; }
  .etappen::before { left: 17px; }
  .etappe-pfeil { display: none; }
}

/* --- Lernmodus ---------------------------------------------------------------
   Eine Leseseite, keine Anwendung: viel Weissraum, klare Trennung zwischen
   Frage und Antwort, nichts, was zum Klicken auffordert.                     */

.lernblock {
  background: var(--papier-hoch);
  border: 1px solid var(--linie-fein); border-radius: var(--radius);
  box-shadow: var(--schatten-fein);
  padding: 1.4rem 1.6rem; margin-bottom: 1rem;
  break-inside: avoid;
}
.lernblock[data-gelesen="ja"] { border-left: 3px solid var(--gruen); }

.lernblock > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.lernblock > summary::-webkit-details-marker { display: none; }
.lernblock-name {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.2rem; font-weight: 620; letter-spacing: -.01em;
  font-variation-settings: 'opsz' 22;
}
.lernblock-zahl { font-size: .85rem; color: var(--tinte-leise); }
.lernblock > summary::after {
  content: '▾'; font-size: .8rem; color: var(--tinte-leise); order: 3;
}
.lernblock[open] > summary::after { content: '▴'; }
.lernblock-worum {
  color: var(--tinte-weich); font-size: .93rem;
  margin: .5rem 0 1.2rem; max-width: 68ch;
}

.lernfragen { list-style: none; margin: 0; padding: 0; }
.lernfrage {
  display: flex; gap: 1rem;
  padding: 1.05rem 0; border-top: 1px solid var(--linie-fein);
  break-inside: avoid;
}
.lernfrage-nr {
  flex: none; width: 2.4rem; text-align: right;
  font-size: .82rem; font-weight: 700; color: var(--tinte-leise);
  font-variant-numeric: tabular-nums; padding-top: .18rem;
}
.lernfrage-koerper { flex: 1; min-width: 0; }
.lernfrage-text {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.06rem; line-height: 1.45; font-weight: 560;
  margin: 0 0 .55rem; text-wrap: pretty;
}
.lernfrage-bilder {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end;
  margin: 0 0 .7rem; padding: .8rem 1rem;
  background: var(--papier-tief); border-radius: var(--radius-fein);
  width: fit-content;
}
.lernfrage-bilder img { max-height: 108px; width: auto; }

.lernfrage-antwort {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: 0; padding: .55rem .8rem;
  background: var(--gruen-hell); border-left: 3px solid var(--gruen);
  border-radius: 0 var(--radius-fein) var(--radius-fein) 0;
  font-size: .96rem;
}
.lernfrage-antwort .zeichen { color: var(--gruen); margin-top: .22rem; }
/* EIN FLEX-ELEMENT SCHRUMPFT NICHT UNTER SEIN LÄNGSTES WORT

   `overflow-wrap: break-word` steht längst weiter oben und half hier
   nichts: Ein Flex-Element hat `min-width: auto`, und das ist die Breite
   seines längsten Wortes. Im Deutschen heißt dieses Wort dann
   „Befahrensbeschränkungen" — 241 Pixel, gemessen auf einem 360er Fenster,
   das damit auf 382 Pixel aufging. Erst `min-width: 0` erlaubt dem Kasten,
   kleiner zu werden als sein Inhalt; dann greift auch der Umbruch. */
.lernfrage-antwort > span { min-width: 0; }

/* Antworten verbergen: zum Selbsttest beim Lesen. Erst beim Überfahren oder
   bei Tastaturfokus wieder sichtbar. */
#lernstoff[data-antworten="verdeckt"] .lernfrage-antwort span {
  color: transparent; background: var(--linie-fein); border-radius: 4px;
  transition: color var(--tempo), background var(--tempo);
}
#lernstoff[data-antworten="verdeckt"] .lernfrage-antwort:hover span,
#lernstoff[data-antworten="verdeckt"] .lernfrage-antwort:focus-within span {
  color: inherit; background: none;
}
#lernstoff[data-antworten="verdeckt"] .lernfrage-antwort .zeichen { opacity: .35; }

.lernfrage-kuerzel {
  margin: .5rem 0 0; font-size: .84rem; color: var(--tinte-leise);
}
.lernfrage-andere { margin-top: .5rem; }
.lernfrage-andere summary {
  cursor: pointer; font-size: .84rem; color: var(--tinte-leise);
  width: fit-content;
}
.lernfrage-andere summary:hover { color: var(--akzent); }
.lernfrage-andere ul {
  margin: .5rem 0 0; padding-left: 1.2rem;
  font-size: .9rem; color: var(--tinte-weich);
}
.lernfrage-andere li { margin-bottom: .25rem; }

.lernblock-fuss {
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: center;
  margin-top: 1.3rem; padding-top: 1.1rem;
  border-top: 1px solid var(--linie-fein);
}

/* Zehn Punkte statt eines Balkens — erreichte tragen ihr Zeichen. */
.erfolg-punkte { display: flex; gap: .35rem; flex-wrap: wrap; }
.erfolg-punkte span {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--papier-tief); color: var(--tinte-leise);
  border: 1px solid var(--linie-fein);
}
.erfolg-punkte span[data-erreicht="ja"] {
  background: var(--akzent-hell); border-color: var(--akzent); color: #7d5518;
}
:root[data-thema="dunkel"] .erfolg-punkte span[data-erreicht="ja"] { color: var(--akzent); }

/* --- Erfolgsseite -------------------------------------------------------------- */

.erfolg-block { margin-bottom: 3rem; }
.erfolg-kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding-bottom: .8rem; margin-bottom: 1.4rem;
  border-bottom: 2px solid var(--linie);
}
.erfolg-punktstand {
  text-align: right; line-height: 1.15;
  padding: .5rem 1rem; border-radius: var(--radius-klein);
  background: var(--papier-tief);
}
.erfolg-punktstand b {
  display: block; font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.7rem; font-variant-numeric: tabular-nums;
}
.erfolg-punktstand span { font-size: .76rem; color: var(--tinte-leise); }

.erfolg.gross {
  padding: 1.15rem 1.25rem; align-items: flex-start; gap: 1rem;
  background: var(--papier-hoch); border-color: var(--linie-fein);
  box-shadow: var(--schatten-fein);
}
.erfolg.gross[data-erreicht="ja"] {
  background: var(--akzent-hell); border-color: var(--akzent);
}
.erfolg.gross[data-erreicht="nein"] { opacity: .72; }
.erfolg-text { flex: 1; min-width: 0; }
.erfolg-stand {
  display: flex; align-items: center; gap: .7rem; margin-top: .7rem;
}
.erfolg-stand .zaehler { font-size: .8rem; white-space: nowrap; }

/* --- Werkzeuge in der Kopfleiste --------------------------------------------- */

.navi-werkzeuge { display: inline-flex; align-items: center; gap: .15rem;
  margin-left: .5rem; }
.navi-symbol {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  color: var(--tinte-weich);
}
.navi-symbol svg { width: 18px; height: 18px; }
.navi-symbol:hover { background: var(--papier-tief); color: var(--tinte); }

/* --- Navigationsaufgaben ---------------------------------------------------- */

.navi-aufgabe { margin-bottom: 1.6rem; }
.navi-aufgabe[data-fertig="ja"] { border-left: 3px solid var(--gruen); }

.navi-kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.navi-kopf h2 { font-size: 1.3rem; }

.navi-lage {
  padding: 1.1rem 1.3rem; border-radius: var(--radius-klein);
  background: var(--papier-tief); font-size: .97rem;
}
.navi-lage p:last-child { margin-bottom: 0; }

.navi-schritte {
  margin: 1.4rem 0 0; padding: 0; list-style: none; counter-reset: schritt;
}
.navi-schritte > li {
  counter-increment: schritt;
  padding: .9rem 0 .9rem 2.6rem; position: relative;
  border-top: 1px solid var(--linie-fein);
}
.navi-schritte > li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: .95rem;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--papier-tief); color: var(--tinte-weich);
  font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.navi-frage { margin: 0 0 .5rem; }

.navi-loesung summary {
  cursor: pointer; font-size: .88rem; color: var(--tinte-leise);
  width: fit-content;
}
.navi-loesung summary:hover { color: var(--akzent); }
.navi-loesung[open] summary { margin-bottom: .4rem; }
.navi-loesung p {
  margin: 0; padding: .65rem .9rem; border-radius: var(--radius-klein);
  background: var(--gruen-hell); border-left: 3px solid var(--gruen);
  font-variant-numeric: tabular-nums; font-size: .96rem;
}

.navi-fragenliste {
  margin: 0; padding-left: 1.3rem; font-size: .93rem;
  color: var(--tinte-weich); line-height: 1.5;
}
.navi-fragenliste li { margin-bottom: .3rem; list-style: none; margin-left: -1.3rem; }

.navi-kuerzel { margin-top: 1.2rem; font-size: .9rem; }
.navi-kuerzel summary { cursor: pointer; color: var(--tinte-leise); width: fit-content; }
.navi-kuerzel dl {
  display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem;
  margin: .8rem 0 0; padding: .9rem 1.1rem;
  background: var(--papier-tief); border-radius: var(--radius-klein);
}
.navi-kuerzel dt { font-weight: 640; color: var(--tinte); }
.navi-kuerzel dd { margin: 0; color: var(--tinte-weich); }

/* Eintippen und prüfen. Die Zeile bricht um, statt das Feld auf 60 Pixel zu
   quetschen: Auf 320px steht der Knopf dann unter dem Feld, und das ist die
   richtige Reihenfolge — erst tippen, dann drücken. */
.navi-eingabe {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin: .65rem 0 0;
}
.navi-eingabe input {
  flex: 1 1 13rem; min-width: 0; width: 100%;
  font: inherit;
  /* 16px oder mehr: darunter zoomt iOS beim Hineintippen. */
  font-size: 1.02rem;
  padding: .62rem .8rem;
  border: 1.5px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--papier-hoch); color: var(--tinte);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--tempo), box-shadow var(--tempo);
}
.navi-eingabe input::placeholder { color: var(--tinte-leise); opacity: 1; }
.navi-eingabe input:focus {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(169, 118, 42, .16);
}
.navi-pruefknopf { flex: 0 0 auto; padding: .62rem 1.1rem; }

.navi-urteil {
  margin: .55rem 0 0; padding: .5rem .75rem;
  border-radius: var(--radius-klein); font-size: .92rem;
  background: var(--papier-tief); color: var(--tinte-weich);
  border-left: 3px solid var(--linie);
}
.navi-schritte > li[data-lage="richtig"] .navi-urteil {
  background: var(--gruen-hell); color: var(--gruen); border-left-color: var(--gruen);
}
.navi-schritte > li[data-lage="falsch"] .navi-urteil {
  background: var(--rot-hell); color: var(--rot); border-left-color: var(--rot);
}
/* Die Ziffer am Rand trägt das Urteil mit — sonst muss man beim
   Durchsehen jede Zeile einzeln lesen. */
.navi-schritte > li[data-lage="richtig"]::before,
.navi-schritte > li[data-lage="selbst"]::before {
  background: var(--gruen-hell); color: var(--gruen);
  box-shadow: inset 0 0 0 1.5px var(--gruen);
}
.navi-schritte > li[data-lage="falsch"]::before {
  background: var(--rot-hell); color: var(--rot);
  box-shadow: inset 0 0 0 1.5px var(--rot);
}

.navi-handarbeit {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem;
  align-items: center; margin: .65rem 0 0;
}
.navi-marke {
  font-size: .82rem; color: var(--tinte-leise);
  text-transform: none; letter-spacing: 0;
}
.navi-selbst {
  display: inline-flex; align-items: center; gap: .4rem;
  font: inherit; font-size: .86rem; cursor: pointer;
  padding: .34rem .75rem; border-radius: 999px;
  border: 1px solid var(--linie); background: var(--papier-hoch);
  color: var(--tinte-weich);
  transition: border-color var(--tempo), color var(--tempo), background var(--tempo);
}
.navi-selbst:hover { border-color: var(--tinte-leise); color: var(--tinte); }
.navi-selbst[aria-pressed="true"] {
  background: var(--gruen-hell); border-color: var(--gruen); color: var(--gruen);
}
.navi-selbst .zeichen { width: 14px; height: 14px; }
.navi-selbst[aria-pressed="true"] .zeichen { fill: currentColor; stroke-width: 1.2; }

.navi-bilanz {
  margin: 1rem 0 0; padding: .6rem .85rem;
  border-radius: var(--radius-klein); font-size: .92rem;
  background: var(--papier-tief); color: var(--tinte-weich);
  border-left: 3px solid var(--linie);
  font-variant-numeric: tabular-nums;
}
.navi-bilanz[data-lage="gut"] {
  background: var(--gruen-hell); color: var(--gruen); border-left-color: var(--gruen);
}

.navi-leiste { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }

/* Der Ansatz steht offen daneben und verrät nichts; die Rechnung steckt in
   der Musterlösung, weil sie das Ergebnis enthält. */
.navi-ansatz { margin: .6rem 0 0; font-size: .92rem; }
.navi-ansatz summary {
  cursor: pointer; color: var(--akzent); width: fit-content;
  font-weight: 560;
}
.navi-ansatz summary:hover { text-decoration: underline; }
.navi-ansatz p {
  margin: .45rem 0 0; padding: .6rem .85rem;
  border-radius: var(--radius-klein);
  background: var(--akzent-hell); color: var(--tinte-weich);
  border-left: 3px solid var(--akzent);
  max-width: 62ch;
}

.navi-rechnung { margin: .7rem 0 0; font-size: .92rem; }
.navi-rechnung b { display: block; margin-bottom: .35rem; color: var(--tinte); }
.navi-rechnung ol {
  margin: 0; padding-left: 1.25rem; color: var(--tinte-weich);
  line-height: 1.65;
}
.navi-rechnung li { font-variant-numeric: tabular-nums; }

/* --- Prüfungsrunde für die Navigationsaufgaben ------------------------------ */

.navi-runde-lauf {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  justify-content: space-between;
  padding: .9rem 1.1rem; border-radius: var(--radius-klein);
  background: var(--akzent-hell); border-left: 3px solid var(--akzent);
}
.navi-runde-lauf p { margin: .25rem 0 0; font-size: .92rem;
  color: var(--tinte-weich); max-width: 46ch; }
.navi-runde-rechts { display: flex; align-items: center; gap: .9rem; }
.navi-uhr {
  font-size: 1.5rem; font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--tinte);
}

.navi-runde-auftrag {
  padding: .8rem 1rem; margin-bottom: 1rem;
  border-radius: var(--radius-klein);
  background: var(--papier-tief); border-left: 3px solid var(--akzent);
}
.navi-runde-auftrag p { margin: .3rem 0 0; font-size: .93rem;
  color: var(--tinte-weich); max-width: 56ch; }

.navi-runde-urteil {
  padding: .9rem 1.1rem; margin-bottom: 1rem;
  border-radius: var(--radius-klein);
  background: var(--papier-tief); border-left: 3px solid var(--linie);
}
.navi-runde-urteil[data-lage="gut"] {
  background: var(--gruen-hell); border-left-color: var(--gruen);
}
.navi-runde-urteil[data-lage="gut"] b { color: var(--gruen); }
.navi-runde-urteil[data-lage="schlecht"] {
  background: var(--rot-hell); border-left-color: var(--rot);
}
.navi-runde-urteil[data-lage="schlecht"] b { color: var(--rot); }
.navi-runde-urteil[data-lage="offen"] { border-left-color: var(--akzent); }
.navi-runde-urteil p { margin: .3rem 0 0; font-size: .93rem;
  color: var(--tinte-weich); }
.navi-runde-ehrlich { font-size: .88rem !important; }

.navi-runde-start {
  display: flex; flex-wrap: wrap; gap: .9rem; align-items: center;
}
.navi-runde-bilanz { font-size: .9rem; color: var(--tinte-leise);
  font-variant-numeric: tabular-nums; }

/* In der laufenden Runde ist die Lösung nicht zugeklappt, sondern weg. Eine
   Versuchung, die man wegklicken muss, ist noch eine Versuchung. */
.navi-aufgabe[data-pruefung="ja"] .navi-loesung,
.navi-aufgabe[data-pruefung="ja"] .navi-ansatz,
.navi-aufgabe[data-pruefung="ja"] .navi-leiste,
.navi-aufgabe[data-pruefung="ja"] .merken { display: none; }

/* --- Kursrechnen ----------------------------------------------------------- */

.drill-frage {
  font-size: 1.12rem; line-height: 1.55; margin: .5rem 0 1.1rem;
  max-width: 56ch;
}
.drill-eingabe { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.drill-eingabe input {
  flex: 1 1 12rem; min-width: 0;
  font: inherit; font-size: 1.15rem; font-variant-numeric: tabular-nums;
  padding: .7rem .9rem;
  border: 1.5px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--papier-hoch); color: var(--tinte);
  transition: border-color var(--tempo), box-shadow var(--tempo);
}
.drill-eingabe input::placeholder { color: var(--tinte-leise); opacity: 1; }
.drill-eingabe input:focus {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(169, 118, 42, .16);
}
.drill-eingabe input[readonly] { background: var(--papier-tief); }
.drill-eingabe .knopf { flex: 0 0 auto; }

/* Die Urteilszeile steht von Anfang an da und ist nur leer. Erschiene sie
   erst beim Prüfen, schöbe sie den Rechenweg und alles darunter nach unten —
   und auf einem Telefon rutscht dann die Aufgabe unter dem Finger weg. */
.drill-urteil {
  min-height: 2.6rem; display: flex; align-items: center;
  margin: .9rem 0 0; padding: .55rem .8rem;
  border-radius: var(--radius-klein); font-size: .95rem;
  background: var(--papier-tief); color: var(--tinte-leise);
  border-left: 3px solid var(--linie);
  font-variant-numeric: tabular-nums;
}
.drill-urteil[data-lage="richtig"] {
  background: var(--gruen-hell); color: var(--gruen); border-left-color: var(--gruen);
}
.drill-urteil[data-lage="falsch"] {
  background: var(--rot-hell); color: var(--rot); border-left-color: var(--rot);
}

.drill-weg { margin-top: .8rem; font-size: .93rem; }
.drill-weg summary { cursor: pointer; color: var(--akzent); width: fit-content; }
.drill-weg ol {
  margin: .6rem 0 0; padding-left: 1.25rem;
  color: var(--tinte-weich); line-height: 1.65;
}
.drill-weg li { font-variant-numeric: tabular-nums; }

.drill-rundenzeile {
  margin: 1.2rem 0 0; padding: .7rem .9rem;
  border-radius: var(--radius-klein); font-size: .96rem;
  background: var(--papier-tief); border-left: 3px solid var(--linie);
  color: var(--tinte-weich);
}
.drill-rundenzeile[data-lage="gut"] {
  background: var(--gruen-hell); color: var(--gruen); border-left-color: var(--gruen);
}

.drill-leer { color: var(--tinte-weich); margin: 0; font-size: .95rem; }

.drill-zahlen {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem;
  text-align: center;
}
.drill-zahlen > div {
  padding: .8rem .4rem; border-radius: var(--radius-klein);
  background: var(--papier-tief);
}
.drill-zahlen b {
  display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums;
  color: var(--tinte);
}
.drill-zahlen span { font-size: .8rem; color: var(--tinte-leise); }
@media (max-width: 480px) {
  .drill-zahlen { grid-template-columns: repeat(2, 1fr); }
}

.drill-typen { margin-top: 1.2rem; display: grid; gap: .5rem; }
.drill-typzeile {
  display: flex; align-items: center; gap: .7rem; font-size: .88rem;
}
.drill-typname { flex: 0 0 9.5rem; color: var(--tinte-weich); }
.drill-typzahl {
  flex: 0 0 3.2rem; text-align: right; color: var(--tinte-leise);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
  .drill-typname { flex-basis: 7rem; }
}

/* --- Filterknöpfe ---------------------------------------------------------- */

.filterband {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
}
.filterband button {
  font: inherit; font-size: .88rem; cursor: pointer;
  padding: .4rem .8rem; border-radius: 100px;
  border: 1px solid var(--linie); background: var(--papier-hoch);
  color: var(--tinte-weich);
  transition: background var(--tempo), color var(--tempo), border-color var(--tempo);
}
.filterband button:hover { border-color: var(--tinte-leise); color: var(--tinte); }
/* Der gewaehlte Filter nimmt die Farbe des Hauptknopfs an — im Dunkeln ist
   den Akzent, deshalb laeuft beides ueber dieselben Variablen. */
.filterband button[aria-pressed="true"] {
  background: var(--knopf-grund, var(--tinte));
  border-color: var(--knopf-grund, var(--tinte));
  color: var(--knopf-schrift, var(--papier));
}

/* --- Scheinkarten -------------------------------------------------------- */

.schein-karte {
  position: relative; display: flex; flex-direction: column;
  background: var(--papier-hoch);
  border: 1px solid var(--linie-fein); border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.35rem;
  text-decoration: none; color: inherit;
  box-shadow: var(--schatten);
  transition: transform var(--tempo), box-shadow var(--tempo), border-color var(--tempo);
  overflow: hidden;
}
/* Der Farbstreifen laeuft nach unten aus — eine harte Kante wirkt
   aufgeklebt, ein Verlauf gehoert zur Karte. */
.schein-karte::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(180deg,
    var(--akzent, var(--tinte-leise)) 0%,
    var(--akzent, var(--tinte-leise)) 55%,
    transparent 100%);
}
.schein-karte[data-farbe="see"]    { --akzent: var(--see); }
.schein-karte[data-farbe="binnen"] { --akzent: var(--binnen); }
.schein-karte[data-farbe="funk"]   { --akzent: var(--funk); }
.schein-karte[data-farbe="pyro"]   { --akzent: var(--pyro); }

a.schein-karte:hover {
  transform: translateY(-3px); box-shadow: var(--schatten);
  border-color: var(--linie); color: inherit;
}
a.schein-karte:hover::before { width: 5px; }
.schein-karte::before { transition: width var(--tempo); }
.schein-karte h3 { margin-bottom: .3rem; }
.schein-karte .kurz {
  font-size: .73rem; font-weight: 700; letter-spacing: .11em;
  color: var(--akzent); text-transform: uppercase; margin-bottom: .5rem;
}
.schein-karte h3 { font-size: 1.16rem; }
.schein-karte p { color: var(--tinte-weich); font-size: .945rem; margin-bottom: 1.1rem; }
.schein-karte .fuss-zeile {
  margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--linie-fein);
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  font-size: .87rem; color: var(--tinte-leise);
}
.schein-karte[data-status="genehmigung-noetig"],
.schein-karte[data-status="geplant"] { opacity: .78; }

/* --- Fortschrittsbalken -------------------------------------------------- */

.balken {
  height: 6px; border-radius: 100px; background: var(--papier-tief);
  overflow: hidden;
}
.balken i {
  display: block; height: 100%; border-radius: 100px;
  background: var(--akzent, var(--gruen));
  transition: width 520ms cubic-bezier(.2, .7, .3, 1);
}

/* Die Uhr der Blitzrunde läuft rückwärts, deshalb schrumpft der Balken.
   Unter fünfzehn Sekunden schlägt er in Rot um — das ist die Stelle, an der
   man aufhört nachzudenken und anfängt zu wissen oder nicht. */
.balken[data-art="zeit"] i { background: var(--akzent); }
.blitz-uhr {
  font-variant-numeric: tabular-nums; font-weight: 700;
  min-width: 3.2rem;
}
.blitz-uhr[data-knapp="ja"] { color: var(--rot); }
.balken[data-art="zeit"] i { transition: width 260ms linear; }

/* Der Zettel über der Tagesration. Er sagt, woraus die Auswahl besteht —
   eine Auswahl, die niemand erklärt, sieht aus wie Zufall, und dann
   vertraut ihr niemand genug, um sie zu benutzen. */
.rationszettel {
  margin-top: .9rem; padding: .85rem 1rem;
  border-left: 3px solid var(--akzent);
  background: var(--papier-tief);
  border-radius: 0 var(--radius-fein) var(--radius-fein) 0;
  max-width: 62ch;
}
.rationszettel b {
  display: block; font-family: 'Inter', sans-serif;
  font-size: .74rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--akzent); margin-bottom: .25rem;
}
.rationszettel span { display: block; font-size: .95rem; line-height: 1.5; }
.rationszettel-fein {
  margin-top: .35rem; font-size: .84rem !important; color: var(--tinte-leise);
}

/* --- Werkzeugleiste beim Üben --------------------------------------------
   Auf breiten Schirmen offen und unauffaellig, auf schmalen zugeklappt, damit
   die erste Frage ohne Scrollen sichtbar bleibt.                            */

.werkzeugfach summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .9rem; font-weight: 560; color: var(--tinte-weich);
  padding: .45rem .8rem; border: 1px solid var(--linie);
  border-radius: var(--radius-klein); background: var(--papier-hoch);
  margin-bottom: .8rem;
}
.werkzeugfach summary::-webkit-details-marker { display: none; }
.werkzeugfach summary::after { content: '▾'; font-size: .8rem; }
.werkzeugfach[open] summary::after { content: '▴'; }
.werkzeugfach summary:hover { border-color: var(--tinte-leise); color: var(--tinte); }

@media (min-width: 860px) {
  /* Offen ist hier der Normalfall — dann braucht es die Zeile nicht. */
  .werkzeugfach[open] summary { display: none; }
}

/* --- Fragebogen ---------------------------------------------------------- */

.bogen { max-width: 800px; margin-inline: auto; }

.bogen-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin-bottom: 1.4rem;
  /* Platz für beide Zeilen von Anfang an. „1 von 1 richtig" erscheint erst
     nach der ersten Antwort und schob die Karte darunter sonst um 26 Pixel
     nach unten — einmal je Durchgang, aber genau an der Stelle, an der
     gerade nichts wackeln soll. */
}
/* Platz für beide Zeilen von Anfang an. „1 von 1 richtig" erscheint erst
   nach der ersten Antwort und schob die Karte darunter sonst um 26 Pixel
   nach unten — einmal je Durchgang, aber genau an der Stelle, an der gerade
   nichts wackeln soll.

   Zwei Klassen im Wähler, und das ist kein Zierrat: `.platz-kopf` setzt
   weiter unten in dieser Datei ebenfalls ein min-height. Zwei min-height auf
   demselben Element bilden kein Maximum — die spätere Regel gewinnt. Mit
   gleicher Spezifität wäre diese hier wirkungslos, und zwar unsichtbar. */
.bogen-kopf.platz-kopf { min-height: 4.2rem; align-content: center; }

.bogen-kopf .zaehler {
  font-variant-numeric: tabular-nums; font-size: .92rem;
  color: var(--tinte-leise); font-weight: 560;
}
.bogen-kopf .balken { flex: 1 1 180px; }

.uhr {
  display: inline-flex; align-items: center; gap: .45rem;
  font-variant-numeric: tabular-nums; font-weight: 640;
  padding: .35rem .75rem; border-radius: 100px;
  background: var(--papier-tief); color: var(--tinte);
  font-size: .95rem;
}
.uhr[data-knapp="ja"] { background: var(--rot-hell); color: var(--rot); }

.frage-karte {
  background: var(--papier-hoch);
  border: 1px solid var(--linie-fein); border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 2rem 2.1rem;
  /* Jede neue Frage kommt kurz von unten herein. Nicht als Spielerei: der
     Wechsel wird dadurch als Wechsel wahrgenommen und nicht als Umspringen. */
  animation: frage-herein 260ms cubic-bezier(.2, .7, .3, 1);
}
@media (max-width: 560px) { .frage-karte { padding: 1.35rem 1.25rem; } }

@keyframes frage-herein {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .frage-karte { animation: none; }
}

.frage-marke {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: .85rem;
}
.frage-marke .herkunft {
  font-size: .73rem; color: var(--tinte-leise); letter-spacing: .09em;
  text-transform: uppercase; font-weight: 640;
}

.frage-text {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(1.24rem, 1.1rem + .5vw, 1.42rem);
  line-height: 1.36; font-weight: 560; letter-spacing: -.011em;
  font-variation-settings: 'opsz' 26;
  text-wrap: pretty;
  margin-bottom: 1.3rem;
}

/* Die amtlichen Grafiken sind kleine Strichzeichnungen. Auf einer eigenen
   Tafel mit Innenrand wirken sie wie ein Ausschnitt aus der Verordnung und
   nicht wie ein verrutschtes Bild im Text. */
.frage-bilder {
  display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-end;
  justify-content: center;
  margin: 0 0 1.5rem;
  padding: 1.4rem 1.15rem; border-radius: var(--radius-klein);
  background: var(--papier-tief);
  border: 1px solid var(--linie-fein);
  box-shadow: inset 0 1px 2px rgba(13, 34, 51, .04);
}
.frage-bilder img {
  max-height: 190px; width: auto;
  image-rendering: -webkit-optimize-contrast;
}

.antworten { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }

.antwort {
  display: flex; align-items: flex-start; gap: .9rem; width: 100%;
  text-align: left; font: inherit; color: inherit;
  padding: 1rem 1.15rem;
  line-height: 1.5;
  background: var(--papier-hoch);
  border: 1.5px solid var(--linie); border-radius: var(--radius-klein);
  cursor: pointer;
  transition: border-color var(--tempo), background var(--tempo),
              transform var(--tempo), box-shadow var(--tempo);
}
.antwort:hover:not([disabled]) {
  border-color: var(--tinte-leise);
  transform: translateY(-1px);
  box-shadow: var(--schatten-fein);
}
.antwort:active:not([disabled]) { transform: translateY(0) scale(.994); box-shadow: none; }
.antwort[disabled] { cursor: default; }

.antwort .buchstabe {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--papier-tief); color: var(--tinte-weich);
  font-size: .82rem; font-weight: 700;
  border: 1px solid transparent;
  transition: background var(--tempo), color var(--tempo),
              border-color var(--tempo), transform var(--tempo);
}
.antwort:hover:not([disabled]) .buchstabe { background: var(--linie-fein); }
.antwort .inhalt { flex: 1; }
.antwort .inhalt img { max-height: 130px; width: auto; display: block; margin-top: .5rem; }

/* --- Wo sich die Antworten unterscheiden ---------------------------------
   Hervorgehoben, nicht weggenommen: Der gemeinsame Teil bleibt in voller
   Stärke stehen. Ihn blasser zu setzen wäre bequemer zu lesen und würde den
   amtlichen Wortlaut zurückdrängen — und quellen.html verspricht, dass
   nichts gekürzt ist.

   Ein warmer Untergrund statt Fettschrift allein: Fett in einem Satz, der
   ohnehin fünf Zeilen lang ist, sieht aus wie Betonung; eine Unterlegung
   sieht aus wie eine Markierung mit dem Textmarker — und genau das ist
   gemeint. Beides zusammen, damit es auch ohne Farbe zu erkennen ist. */

.antwort-unterschied {
  font-weight: 640;
  background: var(--akzent-hell);
  box-shadow: 0 0 0 2px var(--akzent-hell);
  border-radius: 2px;
}
:root[data-thema="dunkel"] .antwort-unterschied {
  background: rgba(212, 160, 74, .17);
  box-shadow: 0 0 0 2px rgba(212, 160, 74, .17);
}
/* Auf der aufgelösten Antwort trägt die Karte schon eine kräftige Farbe —
   eine zweite darüber wäre Lärm. Dort reicht die Schriftstärke. */
.antwort[data-stand] .antwort-unterschied {
  background: none; box-shadow: none;
}

/* --- Lange Antworten auf schmalen Schirmen --------------------------------
   Gemessen an Basisfrage 2, der längsten des Katalogs: Die vier Antworten
   brauchten zusammen 1284 Pixel auf einem 844 Pixel hohen Schirm — anderthalb
   Bildschirme allein für die Auswahl.

   Der Grund war nicht die Schrift, sondern die Breite. Von 390 Pixeln kamen
   nur 221 beim Text an; der Rest ging an Polster, den Buchstabenkreis in
   eigener Spalte und die Spalte für Haken und Kreuz. Elf Zeilen je Antwort,
   und jede Zeile fasste dreißig Zeichen.

   Deshalb wird hier Breite zurückgeholt und nicht Schrift verkleinert:

   Der Buchstabe rückt in die Zeile. Als eigene Spalte kostete er 28 Pixel
   plus Abstand, und zwar über die ganze Höhe der Antwort — bei elf Zeilen
   also 28 Pixel Leerraum mal elf. Vor dem ersten Wort kostet er dreimal
   nichts. Die Buchstaben stehen dadurch nicht mehr in einer Flucht; bei vier
   Antworten sucht sie ohnehin niemand.

   Haken und Kreuz rücken in die obere Ecke, absolut gesetzt. Eine Spalte
   dafür freizuhalten kostet Breite auf jeder Zeile, obwohl das Zeichen nur
   in einer steht — und nur nach dem Antworten.

   Polster und Zeilenhöhe rücken zusammen, aber maßvoll: 1,42 statt 1,5 ist
   noch bequem zu lesen, 1,3 wäre es nicht mehr.

   Die Schriftgröße bleibt. Sie ist das Letzte, woran man dreht: Wer die
   Antwort nicht lesen kann, wählt sie auch nicht richtig aus. */

@media (max-width: 560px) {
  /* Etwas Polster zurückgeben — je Seite fünf Pixel an der Karte und vier
     am Rand. Klingt nach wenig und ist auf 390 Pixeln ein Zwanzigstel der
     Zeile. */
  .huelle-bogen { width: min(100% - 2rem, 800px); }
  .frage-karte { padding-inline: .95rem; }

  .antwort {
    display: block; position: relative;
    padding: .72rem .8rem;
    line-height: 1.42;
    /* Silbentrennung. Deutsch hat Wörter wie
       „Blutalkoholkonzentration" — 24 Zeichen bei 38 pro Zeile. Passt so
       ein Wort nicht mehr, bleibt die halbe Zeile leer, und das viermal
       je Antwort. Der Browser trennt nach den Regeln der Sprache, die im
       <html lang="de"> steht; ohne diese Angabe täte er gar nichts. */
    hyphens: auto; -webkit-hyphens: auto;
    hyphenate-limit-chars: 8 4 3;
  }
  /* Auch der Fragetext, die Erklärung darunter und die statischen
     Fragenseiten unter /fragen/ und /frage/ — dieselbe Sprache, dieselben
     langen Wörter. Die tragen ihre Antworten als Liste und nicht als
     Knöpfe; ohne diese Zeile blieben ausgerechnet die Seiten ungetrennt,
     die zum Lesen gemacht sind. */
  .frage-text, .erklaerung-grund, .erklaerung-fehler span:last-child,
  .lernfrage-text, .lernfrage-antwort span, .lernfrage-andere li {
    hyphens: auto; -webkit-hyphens: auto;
    hyphenate-limit-chars: 8 4 3;
  }
  .antwort .buchstabe {
    float: left; width: 21px; height: 21px;
    margin: .12rem .45rem 0 0;
    font-size: .74rem;
  }
  .antwort .inhalt { display: block; }
  /* Ein umflossenes Element ragt aus seinem Elternteil heraus, wenn der Text
     kürzer ist als der Kreis — dann säße der Rahmen mitten im Buchstaben. */
  .antwort::after { content: ''; display: block; clear: both; }

  .antwort .zustand {
    position: absolute; top: .5rem; right: .5rem;
    opacity: .85;
  }
  /* Platz für das Zeichen, aber nur in der ersten Zeile und nur, wenn es da
     ist — nicht als reservierte Spalte über die ganze Höhe. */
  .antwort[data-stand="richtig"] .inhalt > span:first-child,
  .antwort[data-stand="falsch"] .inhalt > span:first-child {
    padding-right: 1.6rem;
  }

  .antworten { gap: .45rem; }
}

.antwort[data-stand="gewaehlt"] { border-color: var(--blau); background: var(--blau-hell); }
.antwort[data-stand="gewaehlt"] .buchstabe {
  background: var(--blau); color: #fff; transform: scale(1.06);
}

.antwort[data-stand="richtig"] {
  border-color: var(--gruen); background: var(--gruen-hell);
  box-shadow: 0 0 0 1px var(--gruen) inset;
}
.antwort[data-stand="richtig"] .buchstabe { background: var(--gruen); color: #fff; }

.antwort[data-stand="falsch"] { border-color: var(--rot); background: var(--rot-hell); }
.antwort[data-stand="falsch"] .buchstabe { background: var(--rot); color: #fff; }

/* Haken und Kreuz am Zeilenende — schneller zu erfassen als Farbe allein,
   und der einzige Hinweis, der auch bei Farbenblindheit traegt. */
.antwort .zustand { flex: none; align-self: center; margin-left: auto; }
.antwort .zustand .zeichen { width: 20px; height: 20px; }
.antwort[data-stand="richtig"] .zustand { color: var(--gruen); }
.antwort[data-stand="falsch"] .zustand { color: var(--rot); }

.aufloesung {
  margin-top: 1.3rem; padding: 1.1rem 1.25rem;
  border-radius: var(--radius-klein);
  border-left: 3px solid var(--gruen);
  background: var(--gruen-hell);
  font-size: .95rem;
  animation: aufloesung-herein 220ms cubic-bezier(.2, .7, .3, 1);
}
@keyframes aufloesung-herein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .aufloesung { animation: none; } }
.aufloesung[data-art="falsch"] { border-left-color: var(--rot); background: var(--rot-hell); }
.aufloesung b { display: block; margin-bottom: .25rem; }
.aufloesung p:last-child { margin-bottom: 0; }

/* --- Eigene Erklaerung ----------------------------------------------------
   Warum die richtige Antwort richtig ist, ein Merksatz, der uebliche
   Verwechsler. Steht innerhalb der Aufloesung, aber sichtbar abgesetzt: die
   Zeilen darueber sind amtlich, dieser Block ist es nicht. Deshalb ein
   eigener Grund und eine eigene Trennlinie statt nur eines Absatzes.      */

.erklaerung {
  margin-top: 1rem; padding: .95rem 1.05rem;
  border-top: 1px solid var(--linie);
  background: rgba(var(--schleier), .55);
  border-radius: var(--radius-fein);
}
.erklaerung-titel {
  font-family: 'Inter', sans-serif;
  font-size: .95rem; font-weight: 640; letter-spacing: -.01em;
  margin: 0 0 .45rem; color: var(--tinte);
}
.erklaerung-grund { margin: 0 0 .7rem; }
.erklaerung p:last-child { margin-bottom: 0; }

/* Marke und Text stehen im selben Absatz. Ein Block-Element als Marke wuerde
   den Satz umbrechen; ein Inline-Element traegt keine eigene Hoehe. Deshalb
   inline-block — dieselbe Falle wie beim Fortschrittsfaden. */
.erklaerung-marke {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: .72rem; font-weight: 660;
  text-transform: uppercase; letter-spacing: .07em;
  padding: .12rem .45rem; margin-right: .5rem;
  border-radius: var(--radius-fein);
  vertical-align: .08em;
}
.erklaerung-merksatz { margin: 0 0 .55rem; }
.erklaerung-merksatz .erklaerung-marke {
  background: var(--akzent-hell); color: #7d5518;
}
.erklaerung-merksatz q { font-style: italic; quotes: '\201E' '\201C'; }

.erklaerung-fehler { margin: 0 0 .55rem; }
.erklaerung-fehler .erklaerung-marke {
  background: var(--rot-hell); color: var(--rot);
}

.erklaerung-herkunft {
  font-family: 'Inter', sans-serif;
  font-size: .78rem; line-height: 1.45; color: var(--tinte-leise);
  margin: .7rem 0 0; padding-top: .55rem;
  border-top: 1px solid var(--linie-fein);
}

/* Im Lernmodus steht sie nicht in einer Aufloesung, sondern frei in der
   Fragenzeile — dort braucht sie ihren eigenen Rand. */
.erklaerung-lernmodus {
  margin: .7rem 0 .2rem;
  border-top: none;
  border-left: 3px solid var(--linie);
  background: var(--papier-tief);
}

/* Der Grund kommt aus --schleier und --papier-tief, die Marken aus
   --akzent-hell und --rot-hell — alle vier werden im Dunkelmodus neu
   gesetzt, deshalb ist hier nur der eine fest eingetragene Farbwert
   nachzuziehen. Und zwar in beiden Dunkelfaellen: der Systemvorgabe und dem
   Schalter. Wer nur einen der beiden bedient, hat die Haelfte der Leser
   uebersehen. */
:root[data-thema="dunkel"] .erklaerung-merksatz .erklaerung-marke { color: var(--akzent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .erklaerung-merksatz .erklaerung-marke {
    color: var(--akzent);
  }
}

.bogen-fuss {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
  margin-top: 1.4rem;
}
.bogen-fuss .rechts { margin-left: auto; display: flex; gap: .6rem; align-items: center; }

/* --- Der Fuß bleibt auf dem Telefon in Reichweite ------------------------
   Eine beantwortete Frage ist lang: Auflösung, Bildbeschreibung, vier
   Absätze Erklärung. „Weiter" stand am Ende davon, und wer 285 Fragen übt,
   scrollt 285-mal daran vorbei, um weiterzukommen.

   position: sticky und nicht fixed, und das ist der ganze Unterschied: Ein
   fester Balken liegt immer da, auch auf einer kurzen Seite, und verdeckt
   dort die letzte Zeile. Ein klebender bleibt im Fluss — er heftet sich an
   den unteren Rand, solange er sonst darunter läge, und setzt sich am Ende
   der Karte an seinen Platz. Man merkt ihn nur, solange man ihn braucht.

   Über die ganze Breite und nicht nur über die Spalte: Ein Kasten, der
   mitten im Text klebt, sieht aus wie ein Fehler; ein Band am Rand sieht
   aus wie ein Bedienelement. Der Trick mit den negativen Rändern zieht ihn
   bis an den Bildschirmrand und gibt den Inhalt innen wieder zurück.

   AUF JEDER BREITE, und das ist eine Korrektur. Hier stand: „Nur bis 900
   Pixel. Auf einem breiten Schirm ist die Karte selten länger als das
   Fenster, und ein Band, das nichts löst, ist bloß im Weg." Der erste
   Halbsatz war nie nachgemessen und stimmt nicht — auf 1280 × 900 liegt
   „Weiter" nach dem Antworten 104 Pixel unter der Kante, man scrollt also
   nach jeder einzelnen Frage.

   Der zweite Halbsatz stimmt, betrifft aber nur das Aussehen: `sticky`
   selbst tut nichts, solange das Element ohnehin im Bild steht. Rand,
   Schatten und Milchglas hängen deshalb an [data-klebt="ja"], das
   assets/js/klebeband.js setzt, wenn das Band wirklich klebt. */

.bogen-fuss[data-tun="ja"] {
  position: sticky; bottom: 0; z-index: 5;
}
.klebeband-fuehler { height: 1px; margin: 0; padding: 0; }

/* Sobald es klebt, braucht es einen Grund — auf jeder Breite. Ohne den
   stünde die Erklärung unter dem Knopf durch, und zwei übereinanderliegende
   Texte sind unlesbar. Auf schmalen Schirmen kommt weiter unten noch der
   randlose Zuschnitt dazu. */
.bogen-fuss[data-tun="ja"][data-klebt="ja"] {
  background: var(--papier);
  border-top: 1px solid var(--linie);
  padding-block: .75rem;
  box-shadow: 0 -12px 28px -22px rgba(13, 34, 51, .55);
}
:root[data-thema="dunkel"] .bogen-fuss[data-tun="ja"][data-klebt="ja"] {
  box-shadow: 0 -12px 28px -18px rgba(0, 0, 0, .65);
}

@media (max-width: 900px) {
  .bogen-fuss[data-tun="ja"] {
    margin-inline: calc(50% - 50vw);
    padding: .75rem calc(50vw - 50%);
    /* Der Fußraum moderner Telefone — sonst liegt der Knopf unter der
       Wischleiste. */
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  }

  /* Milchglas, wo der Browser es kann.

     Der erste Anlauf war deckend und in derselben Farbe wie der Grund —
     damit sah die Antwortkarte darüber aus, als wäre sie abgeschnitten,
     und ein abgeschnittener Kasten liest sich wie ein Fehler. Durch eine
     angelaufene Scheibe sieht man, dass es weitergeht; das Band liegt
     sichtbar *über* dem Inhalt statt ihn zu ersetzen. */
  @supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)) {
    .bogen-fuss[data-tun="ja"][data-klebt="ja"] {
      background: color-mix(in srgb, var(--papier) 72%, transparent);
      -webkit-backdrop-filter: blur(18px) saturate(118%);
      backdrop-filter: blur(18px) saturate(118%);
    }
  }

  /* Platz unter dem Inhalt, damit sich alles über das Band schieben lässt.

     Ohne diesen Raum verdeckt ein klebendes Band auf einer *kurzen* Seite
     das letzte Bedienelement dauerhaft: Die Seite lässt sich nicht weiter
     scrollen, also bleibt der Knopf darunter liegen, und kein Tippen
     erreicht ihn. Gefunden hat das die Prüfung — sie kam an den
     Erklärungs-Schalter nicht heran, nachdem die Erklärung zugeklappt und
     die Karte damit kurz war. Am Ende einer langen Seite fällt der Raum
     nicht auf, weil das Band dann darüberliegt.

     scroll-padding-bottom dazu, damit auch ein Sprung zu einem Anker oder
     ein scrollIntoView nicht unter dem Band landet. */
  #bogen { padding-bottom: 4.75rem; }
  html { scroll-padding-bottom: 5.5rem; }
}

/* Merkzeichen */
.merken {
  background: none; border: 1px solid var(--linie); border-radius: 100px;
  padding: .42rem .85rem; cursor: pointer; color: var(--tinte-weich);
  display: inline-flex; align-items: center; gap: .42rem;
  font: inherit; font-size: .88rem; font-weight: 520;
  transition: border-color var(--tempo), color var(--tempo), background var(--tempo);
}
.merken:hover { border-color: var(--akzent); color: var(--akzent); }
.merken[aria-pressed="true"] {
  background: var(--akzent-hell); border-color: var(--akzent); color: #7d5518;
}
:root[data-thema="dunkel"] .merken[aria-pressed="true"] { color: var(--akzent); }
.merken .zeichen { width: 15px; height: 15px; }
.merken[aria-pressed="true"] .zeichen { fill: currentColor; stroke-width: 1.2; }

/* --- Karteikarten --------------------------------------------------------- */

.karteikarte {
  min-height: 300px; display: flex; flex-direction: column;
  border-width: 1px;
}
.karteikarte[data-seite="vorderseite"] {
  /* Angedeutete Kartenstapel-Kante: es liegt noch etwas darunter. */
  box-shadow: var(--schatten),
              0 0 0 1px var(--linie-fein) inset,
              6px 6px 0 -1px var(--papier-hoch),
              6px 6px 0 0 var(--linie-fein);
}
.karteikarte .frage-text { flex: 0 0 auto; }

.karte-aufdecken {
  margin: auto auto 0; min-width: 220px;
}
.karteikarte[data-seite="vorderseite"] .frage-bilder { margin-bottom: 1.6rem; }

.karte-loesung {
  margin-top: auto;
  padding: 1.15rem 1.3rem;
  border-radius: var(--radius-klein);
  background: var(--gruen-hell);
  border-left: 3px solid var(--gruen);
}

/* Die eigene, getippte Antwort im Schreibmodus. Sie steht über der
   richtigen und trägt bewusst kein Grün und kein Rot: Ob sie stimmt,
   entscheidet der Lernende gleich selbst — die Seite maßt sich hier kein
   Urteil an, und eine Farbe wäre schon eines. */
.karte-loesung[data-art="eigen"] {
  margin-top: 0; margin-bottom: .9rem;
  background: var(--papier-tief);
  border-left-color: var(--linie);
}
.karte-loesung[data-art="eigen"] .herkunft { color: var(--tinte-leise); }
.karte-loesung[data-art="eigen"] p { font-size: 1.02rem; }

/* Das Eingabefeld davor. Es wächst nicht mit — eine Antwort, die länger ist
   als drei Zeilen, ist keine Antwort auf eine Prüfungsfrage. */
.schreibfeld {
  display: block; width: 100%;
  margin: 1rem 0 .2rem;
  padding: .8rem .95rem;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.02rem; line-height: 1.5;
  color: var(--tinte);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  resize: vertical;
}
.schreibfeld:focus {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(217, 163, 78, .18);
}
.schreibfeld::placeholder { color: var(--tinte-leise); }
.karte-loesung .herkunft {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 640; color: var(--gruen);
}
.karte-loesung p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.14rem; line-height: 1.45; margin: .4rem 0 0;
}
.karte-loesung .zaehler { font-family: 'Inter', sans-serif; font-size: .86rem;
  margin-top: .6rem; }

.karte-urteil {
  display: grid; grid-template-columns: 1fr 1fr; gap: .7rem;
  margin-top: 1.2rem;
}
.karte-urteil .knopf { padding: .95rem 1rem; }

/* --- Tastaturhilfe --------------------------------------------------------- */

.tastaturhilfe { margin-top: 2rem; font-size: .9rem; }
.tastaturhilfe summary {
  cursor: pointer; color: var(--tinte-leise); width: fit-content;
}
.tastaturhilfe summary:hover { color: var(--tinte); }
.tastaturhilfe dl {
  display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem;
  margin: .9rem 0 0; padding: 1rem 1.2rem;
  background: var(--papier-tief); border-radius: var(--radius-klein);
}
.tastaturhilfe dt {
  font-weight: 640; font-variant-numeric: tabular-nums;
  color: var(--tinte); white-space: nowrap;
}
.tastaturhilfe dd { margin: 0; color: var(--tinte-weich); }

/* --- Werkzeuge am Fragenkopf ---------------------------------------------- */

.frage-werkzeuge { display: flex; gap: .45rem; flex-wrap: wrap; }

@media (max-width: 520px) {
  /* Auf kleinen Schirmen nur die Zeichen, sonst brechen die Knöpfe um. */
  .frage-werkzeuge .merken span:last-child { display: none; }
  .frage-werkzeuge .merken { padding: .5rem .6rem; }
}

/* --- Auswertung ---------------------------------------------------------- */

/* Das Ergebnis als Siegel: doppelter Ring wie auf einer Urkunde, innen die
   Punktzahl. Nach 45 Minuten Pruefung darf das Ergebnis etwas hermachen. */
.siegel {
  position: relative;
  display: grid; place-items: center; gap: .15rem;
  width: 164px; height: 164px; border-radius: 50%;
  border: 2px solid var(--gruen); color: var(--gruen);
  background: var(--gruen-hell);
  margin: .4rem auto 1.8rem;
  font-family: 'Source Serif 4', Georgia, serif;
  animation: siegel-setzen 420ms cubic-bezier(.2, .9, .3, 1.2);
}
.siegel::before {
  content: ''; position: absolute; inset: 7px; border-radius: 50%;
  border: 1px solid currentColor; opacity: .38;
}
.siegel[data-art="durchgefallen"] {
  border-color: var(--rot); color: var(--rot); background: var(--rot-hell);
}
.siegel b {
  font-size: 2.45rem; line-height: 1; font-variation-settings: 'opsz' 40;
  letter-spacing: -.02em;
}
.siegel .siegel-zeichen {
  display: block; margin-top: .3rem; opacity: .8;
}
.siegel .siegel-zeichen .zeichen { width: 19px; height: 19px; }
@keyframes siegel-setzen {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .siegel { animation: none; } }

/* Eine Tabelle mit drei Textspalten laesst sich unter 400 Pixeln nicht
   umbrechen, ohne unleserlich zu werden. Statt sie zu quetschen, rollt sie
   in ihrem eigenen Kasten — die Seite selbst bleibt schmal. */
.tabellenrolle { overflow-x: auto; }
.tabellenrolle .teil-tabelle { min-width: 460px; }
/* Die Prüfteil-Tabelle fällt unter rund 310 Pixeln nicht weiter zusammen.
   Ohne eigenen Rollkasten schiebt sie auf einem 320er Schirm die ganze
   Seite quer — sichtbar nur dort, wo niemand nachsieht. */
.tabellenrolle .pruefteile { min-width: 300px; }

.teil-tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; }
.teil-tabelle th, .teil-tabelle td {
  text-align: left; padding: .78rem .55rem;
  border-bottom: 1px solid var(--linie-fein);
}
.teil-tabelle th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .11em;
  color: var(--tinte-leise); font-weight: 640;
  border-bottom-width: 2px; border-bottom-color: var(--linie);
  padding-bottom: .55rem;
}
.teil-tabelle tbody tr:last-child td { border-bottom: 0; }
.teil-tabelle tbody tr { transition: background var(--tempo); }
.teil-tabelle tbody tr:hover { background: var(--papier-tief); }
.teil-tabelle td.zahl .zeichen { vertical-align: -.22em; }
.teil-tabelle td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.teil-tabelle .ja { color: var(--gruen); font-weight: 620; }
.teil-tabelle .nein { color: var(--rot); font-weight: 620; }

/* --- Heute-Karte und Serie ------------------------------------------------- */

.heute-kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.serie {
  text-align: right; line-height: 1.15;
  padding: .55rem .95rem; border-radius: var(--radius-klein);
  background: var(--akzent-hell); color: #7d5518;
}
.serie b {
  display: block; font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.85rem; font-variant-numeric: tabular-nums;
}
.serie span { font-size: .76rem; letter-spacing: .02em; }
:root[data-thema="dunkel"] .serie { color: var(--akzent); }

/* Kleiner Balkenverlauf der letzten Wochen */
.verlauf {
  display: flex; align-items: flex-end; gap: 3px;
  height: 52px; padding: 0;
}
.verlauf span {
  flex: 1; min-width: 4px; border-radius: 2px;
  background: var(--linie);
}
.verlauf span[data-erreicht="ja"] { background: var(--gruen); }

/* --- Auswertung -----------------------------------------------------------
   Die Seite ist eine Reihe von Karten, und jede beantwortet eine Frage. Die
   Gestaltung hält sich zurück: Was hier zählt, sind die Zahlen, und die
   stehen ohnehin in Zahlenschrift da.                                       */

.auswertung-titel {
  font-size: 1.22rem; margin: 0 0 .3rem;
}
.auswertung-unterzeile {
  color: var(--tinte-weich); font-size: .93rem; line-height: 1.6;
  margin: 0 0 1.2rem; max-width: 62ch;
}
.auswertung-zuwenig {
  color: var(--tinte-leise); font-size: .93rem; line-height: 1.6;
  margin: 0; padding: .8rem .95rem;
  border-left: 3px solid var(--linie);
  background: var(--papier-tief); border-radius: var(--radius-fein);
}

/* Die oberste Karte trägt die einzige Empfehlung der Seite und darf das
   zeigen — sonst geht sie zwischen sechs gleich aussehenden Karten unter. */
.empfehlung {
  border-left: 4px solid var(--akzent);
}
.empfehlung-titel {
  font-size: 1.32rem; margin: .5rem 0 .5rem; letter-spacing: -.015em;
}
.empfehlung p { max-width: 60ch; margin-bottom: 1.2rem; }

/* Themenliste */
.themenliste { list-style: none; margin: 0; padding: 0; }
.thema {
  padding: .85rem 0; border-top: 1px solid var(--linie-fein);
}
.thema:first-child { border-top: 0; padding-top: 0; }
.thema-kopf {
  display: flex; align-items: baseline; gap: .8rem; margin-bottom: .45rem;
}
.thema-name {
  font-weight: 560; text-decoration: none; color: var(--tinte);
  border-bottom: 1px solid transparent;
}
.thema-name:hover { border-bottom-color: var(--akzent); }
.thema-quote {
  margin-left: auto; font-family: 'Inter', sans-serif;
  font-size: .9rem; font-weight: 640; white-space: nowrap;
}
.thema[data-ton="gut"]      .thema-quote { color: var(--gruen); }
.thema[data-ton="mittel"]   .thema-quote { color: var(--akzent); }
.thema[data-ton="schwach"]  .thema-quote { color: var(--rot); }
.thema[data-ton="unbekannt"] .thema-quote { color: var(--tinte-leise); }
.thema[data-ton="gut"]      .balken i { background: var(--gruen); }
.thema[data-ton="mittel"]   .balken i { background: var(--akzent); }
.thema[data-ton="schwach"]  .balken i { background: var(--rot); }
.thema-zahlen {
  font-family: 'Inter', sans-serif; font-size: .84rem;
  color: var(--tinte-leise); margin: .45rem 0 0;
}

/* Leitner-Fächer */
.faecher {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.3rem;
}
.fach {
  flex: 1 1 78px; text-align: center;
  padding: .7rem .4rem; border-radius: var(--radius-fein);
  background: var(--papier-tief);
}
.fach b { display: block; font-size: 1.28rem; line-height: 1.15; }
.fach span {
  font-family: 'Inter', sans-serif; font-size: .78rem; color: var(--tinte-leise);
}
.fach[data-art="nie"] { background: var(--akzent-hell); }
.fach[data-art="nie"] span { color: #7d5518; }

.verlauf.vorschau span[data-erreicht="nein"] { background: var(--blau-hell); }
.verlauf.vorschau span[data-erreicht="ja"] { background: var(--akzent); }
/* Ein Balken, der oben anläuft, muss auch so aussehen — sonst liest man den
   Rückstand als "so viel wie am Dienstag". */
.verlauf.vorschau span[data-uebervoll="ja"] {
  background: repeating-linear-gradient(
    -45deg, var(--akzent) 0 4px, var(--akzent-hell) 4px 7px);
}
.verlauf-achse {
  display: flex; justify-content: space-between;
  font-family: 'Inter', sans-serif; font-size: .76rem;
  color: var(--tinte-leise); margin-top: .35rem;
}

/* Gliederung der Auswertung. Elf Karten in einer Reihe sind ein Stapel;
   drei Überschriften machen daraus eine Antwort auf drei Fragen. */
.auswertung-gruppe {
  font-size: 1.05rem; letter-spacing: -.01em;
  margin: 2.2rem 0 1rem; padding-top: 1.4rem;
  border-top: 1px solid var(--linie);
  color: var(--tinte-leise);
  font-family: 'Inter', sans-serif; font-weight: 660;
  text-transform: uppercase; letter-spacing: .08em; font-size: .78rem;
}

.auswertung-fazit {
  margin: 1.1rem 0 0; font-size: .93rem; line-height: 1.6;
  color: var(--tinte-weich);
  padding-left: .85rem; border-left: 3px solid var(--akzent);
}

/* --- Abdeckung: ein Band über den ganzen Katalog ------------------------- */

.abdeckung {
  display: flex; height: 22px; border-radius: 99px; overflow: hidden;
  background: var(--papier-tief); margin-bottom: .9rem;
}
/* Der Zielwert steht als --ziel am Element; von null dorthin wächst das
   Stylesheet, sobald die Karte data-belebt trägt. So weiß der Zeichenkod
   nichts von Bewegung und die Bewegung nichts von den Zahlen. */
.abdeckung-teil {
  display: block; height: 100%; width: 0;
  transition: width .8s cubic-bezier(.2, .7, .3, 1);
}
[data-belebt="ja"] .abdeckung-teil { width: var(--ziel, 0); }
.abdeckung-teil[data-art="sitzt"] { background: var(--gruen); }
.abdeckung-teil[data-art="unterwegs"] { background: var(--akzent); }
.abdeckung-teil[data-art="wackelt"] { background: var(--rot); opacity: .8; }
.abdeckung-teil[data-art="offen"] { background: var(--linie); }

.abdeckung-legende {
  list-style: none; margin: 0 0 1.4rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .3rem 1.2rem;
  font-size: .88rem;
}
.abdeckung-legende li { display: flex; align-items: baseline; gap: .4rem; }
.abdeckung-legende i {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  transform: translateY(-1px);
}
.abdeckung-legende i[data-art="sitzt"] { background: var(--gruen); }
.abdeckung-legende i[data-art="unterwegs"] { background: var(--akzent); }
.abdeckung-legende i[data-art="wackelt"] { background: var(--rot); }
.abdeckung-legende i[data-art="offen"] { background: var(--linie); }
.abdeckung-legende b { font-variant-numeric: tabular-nums; }
.abdeckung-legende span { color: var(--tinte-leise); }

/* --- Die fünf Fächer als Säulen ------------------------------------------ */

.faecher-saeulen {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem;
  align-items: start;
}
/* Jede Säule ist selbst ein Raster mit vier gleichen Zeilen. Ohne das
   richten sich die Säulen an ihrer Unterkante aus, und sobald eine
   Beschriftung zweizeilig wird — „kommt in einem Monat wieder" —, rutscht
   genau diese Säule nach oben. Der Vergleich, für den die Säulen da sind,
   ist dann keiner mehr. */
.faecher-saeule {
  text-align: center;
  display: grid; grid-template-rows: auto 74px auto 2.6em;
}
.faecher-saeule > b {
  display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums;
  margin-bottom: .3rem;
}
/* Der Stab ist der Kasten, die Farbe steckt im Kind. Ein Element, das seine
   eigene Höhe in Prozent setzt, braucht einen Elter mit fester Höhe —
   sonst ist „50 %" ein Anteil von nichts. */
.faecher-stab {
  height: 74px; display: flex; align-items: flex-end;
  background: var(--papier-tief); border-radius: var(--radius-fein);
  padding: 3px;
}
.faecher-stab span {
  display: block; width: 100%; height: 0;
  border-radius: calc(var(--radius-fein) - 2px);
  background: var(--akzent);
  transition: height .75s cubic-bezier(.2, .7, .3, 1);
}
[data-belebt="ja"] .faecher-stab span { height: var(--ziel, 0); }
.faecher-stab span[data-fach="1"] { background: var(--rot); opacity: .75; }
.faecher-stab span[data-fach="2"] { background: var(--rot); opacity: .45; }
.faecher-stab span[data-fach="4"] { background: var(--gruen); opacity: .7; }
.faecher-stab span[data-fach="5"] { background: var(--gruen); }
.faecher-nr {
  display: block; margin-top: .35rem;
  font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 640;
}
.faecher-wann {
  display: block; font-size: .68rem; color: var(--tinte-leise);
  line-height: 1.3; margin-top: .1rem;
}
@media (max-width: 480px) {
  .faecher-wann { display: none; }   /* fünf Spalten, kein Platz für Prosa */
}

/* --- Kalender der Übungstage --------------------------------------------- */

.kalender {
  display: flex; gap: 3px; margin-bottom: 1.2rem;
  overflow-x: auto; padding-bottom: .3rem;
}
.kalender-spalte { display: grid; gap: 3px; grid-template-rows: repeat(7, 1fr); }
.kalender-spalte i {
  display: block; width: 15px; height: 15px; border-radius: 3px;
  background: var(--papier-tief);
  /* Nur die Größe wächst, nicht die Deckkraft: Die Stufen des Kalenders
     stecken selbst in der Deckkraft, und zwei Regeln um dieselbe
     Eigenschaft ergeben keine Überblendung, sondern einen Streit — den die
     Stufe gewinnt, weil sie später steht. Der Kalender blieb dabei
     vollständig sichtbar und rührte sich nicht. */
  transform: scale(.55);
  transition: transform .38s cubic-bezier(.3, 1.5, .5, 1) var(--verzug, 0ms);
}
[data-belebt="ja"] .kalender-spalte i { transform: none; }
.kalender-kopf span {
  display: block; width: 22px; height: 15px; line-height: 15px;
  font-family: 'Inter', sans-serif; font-size: .62rem;
  color: var(--tinte-leise); text-align: right; padding-right: .25rem;
}
/* Vier Stufen, gemessen am eigenen Tagesziel. Eine feste Skala ginge an
   dem vorbei, was der Einzelne sich vorgenommen hat. */
.kalender-spalte i[data-stufe="0"] { background: var(--papier-tief); }
.kalender-spalte i[data-stufe="1"] { background: var(--akzent); opacity: .28; }
.kalender-spalte i[data-stufe="2"] { background: var(--akzent); opacity: .5; }
.kalender-spalte i[data-stufe="3"] { background: var(--akzent); opacity: .75; }
.kalender-spalte i[data-stufe="4"] { background: var(--akzent); }
.kalender-spalte i[data-stufe="-1"] {
  background: none; border: 1px dashed var(--linie-fein);
}

/* --- Prüfungen im Verlauf ------------------------------------------------- */

.pruefungsverlauf {
  display: flex; gap: .4rem; align-items: flex-end;
  margin-bottom: 1.2rem; overflow-x: auto; padding-bottom: .3rem;
}
.pruefung-saeule { flex: 1 1 0; min-width: 38px; text-align: center; }
.pruefung-saeule > b {
  display: block; font-size: .78rem; font-variant-numeric: tabular-nums;
  margin-bottom: .25rem; color: var(--tinte-leise);
}
.pruefung-stab {
  height: 88px; display: flex; align-items: flex-end;
  background: var(--papier-tief); border-radius: var(--radius-fein); padding: 3px;
}
.pruefung-stab span {
  display: block; width: 100%; height: 0;
  border-radius: calc(var(--radius-fein) - 2px);
  background: var(--rot); opacity: .75;
  transition: height .7s cubic-bezier(.2, .7, .3, 1);
}
[data-belebt="ja"] .pruefung-stab span { height: var(--ziel, 0); }
.pruefung-saeule[data-bestanden="ja"] .pruefung-stab span {
  background: var(--gruen); opacity: 1;
}
.pruefung-datum {
  display: block; margin-top: .3rem; font-size: .66rem; color: var(--tinte-leise);
}

/* --- Das Überblicksband --------------------------------------------------
   Vier Zahlen über den Karten. Es ist bewusst keine Karte: Karten sind auf
   dieser Seite Antworten auf eine Frage, das Band ist die Zusammenfassung
   davor — und wenn es aussähe wie eine Karte, wäre es die sechzehnte. */

.ueberblick { margin-bottom: 1.6rem; }
/* Nur die Kaesten stehen im Raster. Lief der Schlusssatz als Rasterkind ueber
   alle Spalten, galt keine davon als leer, und auto-fit klappte nichts ein —
   vier Kaesten links, ein Drittel der Breite rechts ungenutzt. */
.ueberblick-felder {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}
.ueberblick-fuss {
  margin: .8rem 0 0; font-size: .88rem; line-height: 1.55;
  color: var(--tinte-leise); max-width: 78ch;
}
.ueberblick-feld {
  padding: .9rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--linie-fein);
  background: var(--papier-hoch);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
:root[data-thema="dunkel"] .ueberblick-feld {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}
.ueberblick-feld b {
  display: block; font-size: 1.6rem; line-height: 1.1; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.ueberblick-feld span {
  display: block; margin-top: .15rem;
  font-family: 'Inter', sans-serif; font-size: .8rem; line-height: 1.4;
  color: var(--tinte-leise);
}
.ueberblick-feld[data-ton="gut"] b { color: var(--gruen); }
.ueberblick-feld[data-ton="mittel"] b { color: var(--akzent); }
.ueberblick-feld[data-ton="schwach"] b { color: var(--rot); }

/* --- Wissenskurve --------------------------------------------------------- */

/* preserveAspectRatio="none" zieht die Kurve auf die volle Breite. Das
   verzerrt die Steigung — aber die Steigung ist hier nicht die Aussage,
   sondern der Abstand zwischen den beiden Linien. */
.kurve {
  width: 100%; height: 170px; display: block; margin: .2rem 0 .3rem;
  overflow: visible;
}
.kurve-flaeche { fill: var(--akzent); opacity: .12; }
.kurve-gesehen {
  fill: none; stroke: var(--akzent); stroke-width: 2;
  stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.kurve-sitzt {
  fill: none; stroke: var(--gruen); stroke-width: 2.4;
  stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.kurve-achse {
  display: flex; justify-content: space-between;
  font-family: 'Inter', sans-serif; font-size: .74rem; color: var(--tinte-leise);
  margin-bottom: .9rem;
}

/* --- Tageszeiten ---------------------------------------------------------- */

.tageszeiten { display: grid; gap: .5rem; margin-bottom: .3rem; }
.tageszeit {
  display: grid; align-items: center; gap: .3rem .8rem;
  grid-template-columns: 5.5rem 1fr 3.2rem;
  grid-template-areas: 'name stab quote' 'wann stab anzahl';
  padding: .5rem .65rem; border-radius: var(--radius-fein);
}
.tageszeit[data-beste="ja"] { background: var(--gruen-hell); }
.tageszeit-name { grid-area: name; font-weight: 640; font-size: .95rem; }
.tageszeit-wann {
  grid-area: wann; font-size: .74rem; color: var(--tinte-leise);
}
.tageszeit-stab {
  grid-area: stab; height: 10px; border-radius: 99px;
  background: var(--papier-tief); overflow: hidden;
}
.tageszeit-stab span {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: var(--akzent);
  transition: width .7s cubic-bezier(.2, .7, .3, 1);
}
[data-belebt="ja"] .tageszeit-stab span { width: var(--ziel, 0); }
.tageszeit-stab span[data-ton="gut"] { background: var(--gruen); }
.tageszeit-stab span[data-ton="schwach"] { background: var(--rot); }
.tageszeit-quote {
  grid-area: quote; text-align: right; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tageszeit-anzahl {
  grid-area: anzahl; text-align: right;
  font-size: .72rem; color: var(--tinte-leise); white-space: nowrap;
}

/* --- Übungsmodi ----------------------------------------------------------- */

.modusliste { list-style: none; margin: 0 0 .3rem; padding: 0; }
.modusliste li {
  display: grid; align-items: center; gap: .8rem;
  grid-template-columns: minmax(7rem, 1fr) minmax(60px, 2fr) 3rem 3rem;
  padding: .38rem 0;
}
.modus-name { font-size: .92rem; }
.modus-stab {
  height: 8px; border-radius: 99px; background: var(--papier-tief);
  overflow: hidden;
}
.modus-stab span {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: var(--akzent); opacity: .7;
  transition: width .7s cubic-bezier(.2, .7, .3, 1);
}
[data-belebt="ja"] .modus-stab span { width: var(--ziel, 0); }
.modus-zahl, .modus-quote {
  text-align: right; font-variant-numeric: tabular-nums; font-size: .88rem;
}
.modus-zahl { color: var(--tinte-leise); }
.modus-quote { font-weight: 660; }
.modus-quote[data-ton="gut"] { color: var(--gruen); }
.modus-quote[data-ton="schwach"] { color: var(--rot); }
.modus-quote[data-ton="unbekannt"] { color: var(--tinte-leise); font-weight: 400; }
@media (max-width: 520px) {
  .modusliste li { grid-template-columns: minmax(6rem, 1fr) 2.6rem 3rem; }
  .modus-stab { display: none; }   /* drei Spalten oder ein Balkenrest */
}

/* --- Prüfungsteile -------------------------------------------------------- */

/* Zwei Tabellen, ein Aussehen — geteilt wird es hier und nicht über den
   Namen im HTML: `.pruefteile` wird von einer Prüfung gezählt, und zwei
   Tabellen unter demselben Namen zählen sich zusammen. */
.pruefteile, .teilbilanz {
  width: 100%; border-collapse: collapse; font-size: .92rem;
}
.pruefteile th, .pruefteile td, .teilbilanz th, .teilbilanz td {
  padding: .55rem .4rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--linie-fein);
}
.pruefteile th, .teilbilanz th {
  font-family: 'Inter', sans-serif; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--tinte-leise);
}
.pruefteile .num, .teilbilanz .num {
  text-align: right; font-variant-numeric: tabular-nums;
}
.pruefteile tr:last-child td, .teilbilanz tr:last-child td { border-bottom: 0; }
.pruefteil-fein {
  display: block; font-size: .76rem; color: var(--tinte-leise); margin-top: .1rem;
}
.pruefteile tr[data-reicht="ja"] td:last-child,
.teilbilanz tr[data-reicht="ja"] td:last-child { color: var(--gruen); font-weight: 660; }
.pruefteile tr[data-reicht="nein"] td:last-child,
.teilbilanz tr[data-reicht="nein"] td:last-child { color: var(--rot); font-weight: 660; }

@media (prefers-reduced-motion: reduce) {
  .tageszeit-stab span, .modus-stab span {
    transition: none !important; width: var(--ziel, 0);
  }
}

/* --- Hartnäckige Fragen --------------------------------------------------- */

.hartnaeckig { list-style: none; margin: 0; padding: 0; }
.hartnaeckig li {
  padding: .8rem 0; border-top: 1px solid var(--linie-fein);
}
.hartnaeckig li:first-child { border-top: 0; padding-top: 0; }
.hartnaeckig-kopf {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem;
}
.hartnaeckig-quote {
  font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 680;
  padding: .12rem .5rem; border-radius: 99px;
  background: var(--rot-hell); color: var(--rot);
}
.hartnaeckig-quote[data-ton="mittel"] {
  background: var(--akzent-hell); color: #7d5518;
}
.hartnaeckig-quote[data-ton="gut"] { background: var(--gruen-hell); color: var(--gruen); }
.hartnaeckig-fach {
  font-family: 'Inter', sans-serif; font-size: .72rem; color: var(--tinte-leise);
}
.hartnaeckig-frage {
  margin: 0 0 .35rem; font-size: .95rem; line-height: 1.45;
  font-family: 'Source Serif 4', Georgia, serif;
}
.hartnaeckig-verweis {
  font-family: 'Inter', sans-serif; font-size: .82rem;
  color: var(--tinte-leise); text-decoration: none;
}
.hartnaeckig-verweis:hover { color: var(--akzent); text-decoration: underline; }
:root[data-thema="dunkel"] .hartnaeckig-quote[data-ton="mittel"] { color: var(--akzent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .hartnaeckig-quote[data-ton="mittel"] {
    color: var(--akzent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .abdeckung-teil, .faecher-stab span, .pruefung-stab span, .kalender-spalte i {
    transition: none !important;
  }
  /* Ohne Skript bliebe sonst jeder Balken bei null stehen — das wäre keine
     schonende Fassung, sondern eine kaputte. */
  .abdeckung-teil { width: var(--ziel, 0); }
  .faecher-stab span, .pruefung-stab span { height: var(--ziel, 0); }
  .kalender-spalte i { transform: none; }
}

/* Kennzahlen — drei Zahlen nebeneinander, auf dem Handy untereinander */
.kennzahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .7rem; margin-bottom: 1.2rem;
}
.kennzahl {
  padding: .85rem .9rem; border-radius: var(--radius-fein);
  background: var(--papier-tief);
}
.kennzahl b {
  display: block; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.02em;
}
.kennzahl span {
  display: block; font-family: 'Inter', sans-serif; font-size: .84rem;
  color: var(--tinte-leise); margin-top: .2rem; line-height: 1.4;
}
.kennzahl .kennzahl-klein { font-size: .77rem; margin-top: .35rem; }

/* Verwechslungen */
.verwechslungen { list-style: none; margin: 0; padding: 0; }
.verwechslungen li {
  padding: 1rem 0; border-top: 1px solid var(--linie-fein);
}
.verwechslungen li:first-child { border-top: 0; padding-top: 0; }
.verwechslung-frage { margin: .4rem 0 .7rem; font-weight: 520; }
.verwechslung-bilder {
  display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .8rem;
}
.verwechslung-bilder img {
  max-height: 74px; width: auto; background: #fff;
  border: 1px solid var(--linie-fein); border-radius: var(--radius-fein);
  padding: 4px;
}
.verwechslung-falsch, .verwechslung-richtig {
  margin: 0 0 .4rem; font-size: .95rem; line-height: 1.55;
}
.marke-falsch, .marke-richtig {
  display: inline-block;
  font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 660;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .12rem .45rem; margin-right: .5rem;
  border-radius: var(--radius-fein); vertical-align: .08em;
}
.marke-falsch  { background: var(--rot-hell);   color: var(--rot); }
.marke-richtig { background: var(--gruen-hell); color: var(--gruen); }

/* Die Frage, die gerade vorgelesen wird.

   Ein Rahmen statt einer Fläche: Der Text darin muss lesbar bleiben, wer
   nebenher mitliest, und ein farbiger Grund unter langen Absätzen ist auf
   dem Papier des Ausdrucks auch noch da. */
.lernfrage[data-liest] {
  box-shadow: inset 3px 0 0 var(--akzent);
  background: var(--papier-tief);
  border-radius: var(--radius-fein);
}
@media print { .lernfrage[data-liest] { box-shadow: none; background: none; } }

/* Der leise Nachsatz auf einer Karte: eine Einschränkung, die dazugehört,
   aber nicht die Hauptsache ist. */
.zaehler-leise { font-size: .84rem; color: var(--tinte-leise); }

/* Das obere Band — nur für den, der schon mittendrin ist.

   ES GIBT ZWEI BÄNDER UND IMMER NUR EINES ZU SEHEN

   Das untere sitzt unter der Bühne, wo es seit jeher steht: für den
   Erstbesucher richtig, denn der soll zuerst lesen, worum es geht. Für den
   Wiederkehrer war es falsch — gemessen auf 390 × 844 lag es bei y = 2031,
   also zweieinhalb Bildschirme tief, und im ersten Bildschirm stand
   überhaupt kein Weg ins Üben. Wer gestern bei Frage 12 aufgehört hat, will
   nicht lesen, was diese Seite ist.

   Welches der beiden gilt, entscheidet ein Attribut an <html>, das ein
   Vierzeiler im Kopf setzt — vor dem ersten Bildaufbau. Deshalb springt
   nichts: Es wird nichts eingefügt und nichts umsortiert, es steht von
   Anfang an das Richtige da. Ohne JavaScript bleibt es beim unteren Band,
   und das ist der Zustand, der für jeden stimmt, der noch nichts geübt hat.

   `display: none` und nicht `hidden`: Ein Kasten, den eine Regel weiter
   unten wieder sichtbar macht, ist mit dem Attribut nicht zu haben — das
   ist dieselbe Lehre wie bei der Karteikarte. */
.fortsetzen-oben-huelle { display: none; }
:root[data-platz="ja"] .fortsetzen-oben-huelle {
  display: block; margin-top: 1.4rem; margin-bottom: -.6rem;
}
:root[data-platz="ja"] #fortsetzen { display: none; }

/* Begriffe quer über die Fragen

   Die Karte darüber zeigt Fragen, diese zeigt Sätze. Deshalb steht hier
   kein Bild und keine Frage: Der Befund ist eine Aussage über den Leser,
   und die verträgt keine Bebilderung, die ihn ablenkt. */
.begriffe { list-style: none; margin: 0; padding: 0; }
.begriffe li {
  padding: 1.1rem 0; border-top: 1px solid var(--linie-fein);
}
.begriffe li:first-child { border-top: 0; padding-top: .2rem; }
.begriff-satz {
  margin: .4rem 0 .5rem; font-size: 1.02rem; line-height: 1.55;
  font-weight: 480;
}
.begriff-satz b { font-weight: 660; }
/* Das falsch gewählte Wort und das richtige, farblich wie überall sonst
   auf der Seite: rot ist Fehler, grün ist Erfolg — und nichts sonst. */
.begriff-falsch  { color: var(--rot); }
.begriff-richtig { color: var(--gruen); }
.begriff-deutung {
  margin: 0 0 .7rem; font-size: .93rem; line-height: 1.6;
  color: var(--tinte-weich);
}
.begriff-leise { font-style: italic; }
.begriff-stellen {
  margin: 0 0 .8rem; font-size: .84rem; color: var(--tinte-weich);
  font-variant-numeric: tabular-nums;
}
/* Ein Satz in der Aufloesung, den nur der Irrtumsmodus zu sagen hat.
   Leicht abgesetzt, damit er nicht mit der Begruendung verschmilzt — er
   sagt etwas ueber den Leser und nicht ueber die Frage. */
.aufloesung-zusatz {
  margin: .5rem 0 0; font-size: .92rem; line-height: 1.55;
  font-style: italic;
}

/* Die Hörstrecke auf der Lernseite. Ein eigener Kasten und keine Karte:
   Sie gehört nicht zum Stoff darunter, sondern steht davor. */
.hoerstrecke {
  margin: 0 0 2rem; padding: 1.2rem 1.1rem 1.1rem;
  border: 1px solid var(--linie-fein); border-radius: var(--radius);
  background: var(--papier-hoch);
}
.hoerstrecke-titel { margin: 0 0 .4rem; font-size: 1.12rem; }
.hoerstrecke-satz {
  margin: 0 0 .9rem; max-width: 62ch; font-size: .95rem; line-height: 1.6;
  color: var(--tinte-weich);
}
.hoerstrecke-leise {
  margin: .9rem 0 0; max-width: 62ch; font-size: .86rem; line-height: 1.6;
  color: var(--tinte-weich);
}
.hoerstrecke-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  margin-bottom: .9rem;
}
/* Eine Zeile je Frage, dreispaltig — und auf dem Telefon umbrechend statt
   gestaucht: Der Fragetext ist das Einzige, was dort Platz braucht. */
.strecke-liste { list-style: none; margin: 0; padding: 0; }
.strecke-zeile {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  padding: .55rem 0; border-top: 1px solid var(--linie-fein);
  font-size: .92rem; line-height: 1.5;
}
.strecke-zeile:first-child { border-top: 0; }
/* Mitgelesen wird auf demselben Weg wie im Abschnitt: ein Attribut, kein
   zweiter Zustand im Programm. */
.strecke-zeile[data-liest] {
  background: var(--akzent-hell); box-shadow: inset 3px 0 0 var(--akzent);
  padding-left: .55rem;
}
.strecke-marke {
  flex: none; font-size: .74rem; letter-spacing: .04em;
  text-transform: uppercase; padding: .12rem .45rem; border-radius: 99px;
  border: 1px solid var(--linie-fein); color: var(--tinte-weich);
}
.strecke-marke[data-dran="ja"] { color: var(--akzent); border-color: var(--akzent); }
.strecke-text { flex: 1 1 14rem; min-width: 0; }
.strecke-quote {
  flex: none; font-size: .82rem; color: var(--tinte-weich);
  font-variant-numeric: tabular-nums;
}
/* Auf Papier hat eine Hörstrecke nichts verloren. */
@media print { .hoerstrecke { display: none; } }

/* Die geglaubte Antwort gegen die richtige. Zwei Zeilen, nicht eine mit
   Pfeil dazwischen: Auf 320 Pixeln bricht eine Antwort ohnehin um, und
   dann steht der Pfeil allein in einer Zeile und zeigt auf nichts.
   Farben wie überall — rot ist Fehler, grün ist richtig, und die Wörter
   davor sagen dasselbe noch einmal, damit die Farbe nicht die einzige
   Auskunft ist. */
.fehlerform-gegen {
  margin: .1rem 0 .7rem; padding-left: .8rem;
  border-left: 2px solid var(--linie-fein);
}
.fehlerform-gegen p {
  margin: .18rem 0; font-size: .93rem; line-height: 1.55;
}
.fehlerform-falsch  { color: var(--rot); }
.fehlerform-richtig { color: var(--gruen); }
.auswertung-hinweis {
  margin: -.3rem 0 1rem; font-size: .88rem; line-height: 1.6;
  color: var(--tinte-weich);
}
.auswertung-fussnote {
  margin: 1.2rem 0 1rem; padding-top: .9rem;
  border-top: 1px solid var(--linie-fein);
  font-size: .82rem; line-height: 1.6; color: var(--tinte-weich);
}
.knopf-klein {
  padding: .38rem .8rem; font-size: .86rem;
}

/* --- Prüfungsreife --------------------------------------------------------- */

.reife-ring {
  --anteil: 0;
  width: 156px; height: 156px; margin: 1.4rem auto .2rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    conic-gradient(var(--gruen) calc(var(--anteil) * 1%),
                   var(--papier-tief) 0);
  position: relative;
}
.reife-ring::before {
  content: ''; position: absolute; inset: 13px;
  border-radius: 50%; background: var(--papier-hoch);
}
.reife-zahl { position: relative; text-align: center; line-height: 1.15; }
.reife-zahl b {
  display: block; font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2.1rem; font-variant-numeric: tabular-nums;
}
.reife-zahl span {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinte-leise);
}

/* Woertliches Zitat einer amtlichen Angabe. Es soll als Beleg erkennbar sein
   und nicht als eigene Behauptung durchgehen. */
.beleg {
  margin: 1.2rem 0; padding: 1rem 1.3rem;
  border-left: 3px solid var(--akzent);
  background: var(--papier-tief);
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.02rem; font-style: italic; line-height: 1.5;
}

/* --- Hinweiskaesten ------------------------------------------------------ */

.hinweis {
  border-left: 3px solid var(--blau);
  background: var(--blau-hell);
  padding: 1.05rem 1.2rem; border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  font-size: .95rem; margin: 1.4rem 0;
}
.hinweis[data-art="warnung"] { border-left-color: var(--akzent); background: var(--akzent-hell); }
.hinweis[data-art="recht"]   { border-left-color: var(--tinte-leise); background: var(--papier-tief); }
.hinweis :last-child { margin-bottom: 0; }
.hinweis b { display: block; margin-bottom: .3rem; }

/* --- Werbeplatz ---------------------------------------------------------- */

/* Ein Werbeplatz steht nur dann im Dokument, wenn WERBUNG['an'] an ist und
   es wirklich eine Anzeige gibt. Vorher stand hier ein leerer, gestrichelter
   Kasten mit dem Wort „Anzeige" darin — auf vierzehn Seiten, ohne dass je
   eine kam.

   Das Wort steht sichtbar darueber und nicht als Titel-Attribut: Werbung
   muss als solche erkennbar und vom Inhalt getrennt sein (§ 6 TMG, § 22
   MStV), und ein Hinweis, den man erst durch Zeigen findet, ist keiner. */
.werbeplatz {
  display: block; margin: 2rem 0; padding: .8rem; text-align: center;
  border: 1px dashed var(--linie); border-radius: var(--radius-klein);
  background: var(--papier-tief);
}
.werbe-marke {
  display: block; margin-bottom: .5rem; font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-leise);
}
/* Der Platz steht, bevor das Bild da ist: aspect-ratio am Kasten plus width
   und height am Bild. Ohne das rutscht alles darunter nach unten, sobald das
   Bild ankommt — und genau das ist die Messgroesse, die Google „Cumulative
   Layout Shift" nennt und die diese Seite bisher bei null haelt. */
.werbe-bild {
  display: block; margin: 0 auto; width: 100%; max-width: 728px;
}
.werbe-bild img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-klein);
}

/* --- Premium-Schranke ---------------------------------------------------- */

.schranke {
  position: relative; border-radius: var(--radius);
  border: 1px solid var(--linie); background: var(--papier-hoch);
  padding: 2.2rem; text-align: center; box-shadow: var(--schatten);
}
.schranke .schloss {
  width: 46px; height: 46px; margin: 0 auto 1rem; display: grid; place-items: center;
  border-radius: 50%; background: #efe7fa; color: #5b3b8c;
}
/* Der Hinweis, der an die Stelle eines gesperrten Inhalts tritt. Er sitzt
   INNERHALB der Karte, unter deren Ueberschrift und Unterzeile — die bleiben
   stehen, damit sichtbar ist, was das Abo dazugibt.

   Kein display:none und kein Weichzeichner ueber echten Zahlen: Ein
   verwischter Wert ist ein Versprechen, das man nicht einloesen kann, ohne
   die Entwicklerwerkzeuge zu oeffnen — und dann ist es peinlich statt
   verlockend. */
.pro-hinweis {
  margin-top: .9rem; padding: .85rem .95rem; text-align: left;
  border: 1px dashed var(--linie); border-radius: var(--radius-fein);
  background: var(--papier);
}
.pro-hinweis[data-gross="ja"] {
  margin-top: 1.6rem; padding: 1.1rem 1.2rem; text-align: center;
}
.pro-kopf {
  display: flex; align-items: center; justify-content: flex-start;
  gap: .45rem; margin: 0; font-size: .9rem; color: var(--tinte);
}
.pro-hinweis[data-gross="ja"] .pro-kopf { justify-content: center; }
.pro-kopf svg { flex: none; color: var(--akzent); }
.pro-satz {
  margin: .4rem 0 0; font-size: .85rem; line-height: 1.5;
  color: var(--tinte-leise);
}
.pro-leise { font-size: .78rem; }
.knopf-reihe.pro-knoepfe {
  margin-top: .8rem; gap: .5rem; flex-wrap: wrap;
}
.pro-hinweis[data-gross="ja"] .pro-knoepfe { justify-content: center; }
/* Eine gesperrte Karte soll nicht so aussehen, als fehle ihr etwas. Sie
   bekommt denselben Rahmen wie jede andere, nur eine Spur ruhiger. */
.karte[data-pro="ja"] { background: var(--papier-hoch); }

.preis-raster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-top: 1.6rem; text-align: left; }
.preis {
  border: 1.5px solid var(--linie); border-radius: var(--radius-klein); padding: 1.2rem;
  background: var(--papier);
}
.preis[data-hervor="ja"] { border-color: var(--akzent); background: var(--akzent-hell); }
.preis .betrag { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.9rem;
  font-weight: 620; line-height: 1; }
.preis .zeitraum { color: var(--tinte-leise); font-size: .85rem; }
.preis ul { list-style: none; margin: .9rem 0 0; padding: 0; font-size: .9rem; }
.preis li { padding-left: 1.3rem; position: relative; margin-bottom: .4rem; }
.preis li::before { content: '✓'; position: absolute; left: 0; color: var(--gruen);
  font-weight: 700; }

/* --- Tabellen / Listen im Fliesstext ------------------------------------- */

.saubere-liste { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.saubere-liste li {
  padding: .55rem 0 .55rem 1.6rem; position: relative;
  border-bottom: 1px solid var(--linie-fein);
}
.saubere-liste li::before {
  content: ''; position: absolute; left: .35rem; top: 1.15rem;
  width: 5px; height: 5px; border-radius: 50%; background: var(--akzent);
}

/* --- Ladeplatzhalter ---------------------------------------------------------
   Statt „wird geladen …" steht schon die Form da, die gleich gefuellt wird.
   Das wirkt ruhiger und verhindert, dass die Seite beim Eintreffen der Daten
   springt.                                                                    */

.geruest { display: grid; gap: 1rem; }
.geruest-zeile {
  height: 1em; border-radius: var(--radius-fein);
  background: linear-gradient(90deg,
    var(--papier-tief) 0%, var(--linie-fein) 40%,
    var(--papier-tief) 80%);
  background-size: 300% 100%;
  animation: geruest-wandern 1.5s ease-in-out infinite;
}
.geruest-zeile[data-breite="kurz"]  { width: 32%; }
.geruest-zeile[data-breite="mittel"]{ width: 64%; }
.geruest-zeile[data-hoehe="titel"]  { height: 1.7em; }
.geruest-zeile[data-hoehe="block"]  { height: 5.5em; }

@keyframes geruest-wandern {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .geruest-zeile { animation: none; }
}

/* Das Kleingedruckte unter einer Auswertungskarte: Woher die Zahl kommt und
   was sie nicht sagt. Kleiner und leiser als das Fazit, aber nicht versteckt
   — bei einer gerechneten Zahl gehört die Annahme dazu, unter der sie gilt. */
.auswertung-quelle {
  margin: 1rem 0 0; font-size: .82rem; line-height: 1.55;
  color: var(--tinte-leise);
}

/* --- Karten nebeneinander, wo Platz ist ---------------------------------
   auto-fit statt fester Spaltenzahl: Die Zahl der Spalten folgt der Breite
   und nicht einer Vermutung darüber, welches Gerät jemand hat. Ein Tablet
   quer bekommt zwei, ein breiter Schirm drei, ein Telefon eine.

   minmax(min(100%, 21rem), 1fr) und nicht minmax(21rem, 1fr): Die zweite
   Fassung erzwingt 21rem auch dann, wenn die Spalte schmaler ist — auf
   320 Pixeln ragt die Karte dann seitlich heraus und die ganze Seite rollt
   quer. min(100%, …) nimmt sich, was da ist.

   align-items: start, weil Karten verschieden hoch sind: Ohne das zieht das
   Raster jede Karte einer Zeile auf die Höhe der längsten, und unter kurzen
   Karten steht dann eine handhohe Leere. */

.kartenraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 1.2rem;
  align-items: start;
}

/* Was über die ganze Breite gehört: Bänder und Kalender, die eine Zeitachse
   zeigen. In eine halbe Spalte gequetscht wird aus einem Verlauf ein
   Gedränge. */
.kartenraster > .karte-breit { grid-column: 1 / -1; }

/* --- Zeilenlänge ---------------------------------------------------------
   Fließtext bekommt eine Höchstbreite in ch — also in Zeichen der laufenden
   Schrift und nicht in Pixeln. 68 Zeichen liegt in dem Bereich, in dem das
   Auge den Zeilenanfang wiederfindet; bei 132 verliert es ihn.

   Die Regel greift nur dort, wo sie etwas ändert: In einer Rasterspalte von
   21rem ist eine Zeile ohnehin kürzer, und max-width ohne margin verschiebt
   nichts. Tabellenzellen und Listen mit eigener Ausrichtung bleiben außen
   vor. */

main p, main li {
  max-width: 74ch;
}

/* Was die Breite braucht und deshalb ausgenommen ist: Zeilen einer Tabelle,
   Listen, die als Raster oder Reihe gesetzt sind, und alles, was mittig
   steht — dort verschoebe eine Hoechstbreite den Text nach links, statt ihn
   lesbarer zu machen. */
main table p, main table li,
.knopf-reihe li, .filterband li, .tafel-raster li, .fragenliste li,
.quote-reihe li, .kennzahlen li, [style*="text-align:center"] {
  max-width: none;
}

/* --- Eine Seite je Frage -------------------------------------------------
   Auf der Abschnittsseite steht unter jeder Frage der Weg zu ihrer eigenen
   Seite; auf der Einzelseite steht die Liste der Geschwister, damit die
   Seite nicht in einer Sackgasse endet — weder für einen Leser noch für
   einen Crawler. */

.lernfrage-mehr { margin: .9rem 0 0; font-size: .88rem; }
.lernfrage-mehr a { color: var(--akzent); text-decoration: none; }
.lernfrage-mehr a:hover, .lernfrage-mehr a:focus-visible {
  text-decoration: underline;
}

/* Die Einzelseite trägt genau eine Frage. Die Nummer davor wäre dort eine
   Aufzählung von eins — sie steht schon im Etikett über der Überschrift. */
.lernfragen-einzeln { padding-left: 0; }
.lernfragen-einzeln .lernfrage-nr { display: none; }
.lernfragen-einzeln .lernfrage { border: 0; padding-left: 0; }
/* Die Frage steht als <h1> darüber; ein zweites Mal als <h2> im Block wäre
   dieselbe Zeile zweimal untereinander. */
.lernfragen-einzeln .lernfrage-text { display: none; }

.fragenliste { list-style: none; margin: .8rem 0 0; padding: 0; }
.fragenliste li { border-top: 1px solid var(--linie-fein); }
.fragenliste li:first-child { border-top: 0; }
.fragenliste a {
  display: block; padding: .7rem 0;
  color: var(--tinte); text-decoration: none; line-height: 1.45;
}
.fragenliste a:hover, .fragenliste a:focus-visible {
  color: var(--akzent); text-decoration: underline;
}

/* --- Prüfungstermin ------------------------------------------------------
   Ein natives <input type="date">. Kein selbstgebauter Kalender: Auf dem
   Telefon öffnet das native Feld den Datumswähler des Systems, den jeder
   schon kennt, und es kostet kein einziges Byte Skript. */

.termin-zeile {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin: .2rem 0 1.1rem;
}
.termin-feld {
  font: inherit; font-size: .95rem;
  padding: .5rem .7rem;
  color: var(--tinte); background: var(--papier);
  border: 1px solid var(--linie); border-radius: var(--radius-fein);
  /* Damit der Systemwähler im Dunkelmodus nicht schwarz auf schwarz steht. */
  color-scheme: light dark;
}
.termin-feld:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 2px;
}

.termin-zahlen {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  margin-bottom: 1rem;
}
.termin-zahl {
  padding: .8rem .5rem; text-align: center;
  border: 1px solid var(--linie-fein); border-radius: var(--radius-fein);
  background: var(--papier);
}
.termin-zahl b {
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.5rem; line-height: 1.1; letter-spacing: -.02em;
  color: var(--akzent); font-variant-numeric: tabular-nums;
}
.termin-zahl span {
  display: block; margin-top: .2rem;
  font-family: 'Inter', sans-serif; font-size: .66rem; font-weight: 660;
  letter-spacing: .05em; text-transform: uppercase; color: var(--tinte-leise);
}

/* Trägt der Plan oder nicht — an der Farbe des Fazits ablesbar, aber nie
   nur daran: Der Satz sagt es ohnehin in Worten. */
.auswertung-fazit[data-art="gut"] { border-left-color: var(--gruen); }
.auswertung-fazit[data-art="knapp"] { border-left-color: var(--rot); }

@media (max-width: 400px) {
  .termin-zahl b { font-size: 1.3rem; }
}

/* --- Bestehenswahrscheinlichkeit ----------------------------------------
   Ein Ring statt eines Balkens: Die Zahl ist ein Anteil an einem Ganzen und
   kein Fortschritt auf einer Strecke. conic-gradient zeichnet ihn ohne
   Bild und ohne Skript; die Zahl steht in der Mitte, weil sie die Aussage
   ist und der Ring nur ihre Form. */

.bestehen-ring {
  --anteil: 0%;
  position: relative;
  width: 150px; height: 150px; margin: 1.1rem auto 1.2rem;
  border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background:
    conic-gradient(var(--akzent) var(--anteil), var(--linie-fein) 0);
}
/* Das Loch in der Mitte. Als Pseudoelement und nicht als zweiter Kasten,
   damit der Text darüber liegen kann, ohne dass etwas verschachtelt wird. */
.bestehen-ring::before {
  content: ''; position: absolute; inset: 13px;
  border-radius: 50%; background: var(--papier-hoch);
}
.bestehen-ring b, .bestehen-ring span { position: relative; }
.bestehen-ring b {
  display: block; font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2.1rem; line-height: 1; letter-spacing: -.02em;
  color: var(--akzent); font-variant-numeric: tabular-nums;
}
.bestehen-ring span {
  display: block; margin-top: .25rem;
  font-family: 'Inter', sans-serif; font-size: .7rem; font-weight: 640;
  letter-spacing: .07em; text-transform: uppercase; color: var(--tinte-leise);
}

.bestehen-satz { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .bestehen-ring { transition: none; }
}

/* --- Erklärung auf- und zuklappen ----------------------------------------
   Die Überschrift der Erklärung ist der Schalter. Es gab schon einen, im
   Fach „Bereich, Modus und Anzeige" — das auf dem Telefon zugeklappt ist.
   Eine Einstellung, die man erst suchen muss, gibt es für die meisten
   nicht. Der Schalter gehört dorthin, wo das steht, was er schaltet.

   Der Knopf füllt die Zeile und ist damit auf einem Telefon so groß, wie
   ein Ziel für den Daumen sein muss — nicht nur der Text ist anklickbar,
   sondern die ganze Breite. */

.erklaerung-titel { margin: 0; }

.erklaerung-schalter {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; width: 100%;
  padding: .15rem 0; margin: 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em;
}
.erklaerung-schalter:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 3px;
  border-radius: var(--radius-fein);
}

/* Ein Winkel aus zwei Strichen statt eines Zeichens aus der Schrift: Er
   dreht sich mit und braucht keine Datei. */
.erklaerung-pfeil {
  flex: 0 0 auto; width: 10px; height: 10px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: .55; transition: transform .2s ease;
}
.erklaerung[data-offen="nein"] .erklaerung-pfeil {
  transform: rotate(-45deg) translate(-2px, 2px);
}

.erklaerung[data-offen="nein"] .erklaerung-inhalt { display: none; }
/* Zugeklappt ist der Kasten nur noch eine Zeile — dann darf er nicht wie
   ein leerer Block dastehen. */
.erklaerung[data-offen="nein"] { padding-bottom: .75rem; }

@media (prefers-reduced-motion: reduce) {
  .erklaerung-pfeil { transition: none; }
}

/* --- Die eigene Bestehensquote ------------------------------------------
   Eine Zahl, eine Reihe, ein Satz. Die Reihe ist bewusst kein Diagramm: Bei
   zwanzig Werten, die nur ja oder nein kennen, ist eine Achse Beiwerk und
   der Verlauf die ganze Aussage.

   Die Farben kommen aus denselben zwei Tokens wie das Siegel am Ende der
   Prüfung — dieselbe Sache, dieselbe Farbe, sonst muss man zweimal lernen,
   was Grün hier heißt. */

.quotenkarte { margin-bottom: 1.4rem; }

.quote-satz { margin: .2rem 0 1rem; }
.quote-satz b {
  font-size: 2rem; letter-spacing: -.02em; color: var(--akzent);
  font-variant-numeric: tabular-nums; margin-right: .35rem;
}

.quote-reihe {
  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: .9rem;
}
.quote-reihe i {
  width: 15px; height: 15px; border-radius: 4px; flex: 0 0 auto;
}
/* Nicht nur Farbe: Ein bestandener Versuch ist gefüllt, ein nicht
   bestandener bleibt hohl. Wer Rot und Grün nicht unterscheidet, sieht
   den Unterschied trotzdem. */
.quote-reihe i[data-art="ja"] {
  background: var(--gruen);
}
.quote-reihe i[data-art="nein"] {
  background: transparent;
  border: 2px solid var(--rot);
}

@media (max-width: 400px) {
  .quote-reihe i { width: 13px; height: 13px; }
}

/* --- Leerzustand --------------------------------------------------------- */

.leer {
  text-align: center; padding: 3.5rem 1.5rem; color: var(--tinte-leise);
}
.leer p:last-child { margin-bottom: 0; }
.leer .zeichen { width: 40px; height: 40px; opacity: .3; margin-bottom: 1rem; }

/* --- Dunkelmodus --------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --tinte:        #e8eef3;
    --tinte-weich:  #a9bcc9;
    --tinte-leise:  #8197a6;   /* 4,35:1 auf der tiefsten Karte, jetzt 4,53 */
    --papier:       #0c1a24;
    --papier-hoch:  #12252f;
    --papier-tief:  #17303c;
    --schleier:     12, 26, 36;
  /* Nachtfassung: kaltes Mondlicht oben rechts, tiefes Blau unten, und ein
     Sternenfeld. Die Sterne sind vier winzige Kreise in einer gekachelten
     Lage — vier Verlaeufe kosten nichts, ein Sternenhimmel aus einzelnen
     Elementen kostete tausend Knoten. */
  --grund-lichter:
    radial-gradient(1.1px 1.1px at 22% 12%, rgba(214, 232, 255, .60), transparent),
    radial-gradient(1px 1px at 67% 31%, rgba(214, 232, 255, .45), transparent),
    radial-gradient(1.5px 1.5px at 41% 68%, rgba(226, 240, 255, .55), transparent),
    radial-gradient(1px 1px at 85% 84%, rgba(200, 222, 250, .40), transparent),
    radial-gradient(110vw 75vh at 90% -10%, rgba(126, 170, 214, .22), transparent 60%),
    radial-gradient(110vw 80vh at 0% 110%, rgba(20, 62, 92, .42), transparent 62%);
  --grund-kacheln: 190px 190px, 250px 250px, 320px 320px, 210px 210px, auto, auto;
  --grund-wiederholung: repeat, repeat, repeat, repeat, no-repeat, no-repeat;

    --knopf-grund:  #6db3f2;
    --knopf-schrift:#0a1620;
    --linie:        #274453;
    --linie-fein:   #1e3644;

    --akzent:      #6db3f2;
    --akzent-hell: #16293c;
    --gruen:        #5cc294;
    --gruen-hell:   #12302a;
    --rot:          #f08b7e;
    --rot-hell:     #35201e;
    --blau:         #6db3f2;
    --blau-hell:    #16293c;

    --see:    #79bce6;
    --binnen: #5cc294;
    --funk:   #b39ae0;
    --pyro:   #d9a34e;

    --schatten-fein: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .22);
    --schatten:      0 1px 1px rgba(0, 0, 0, .3), 0 4px 10px rgba(0, 0, 0, .26),
                     0 12px 28px rgba(0, 0, 0, .26);
    --schatten-hoch: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .34),
                     0 26px 56px rgba(0, 0, 0, .38);
  }
  :root:not([data-thema="hell"]) .kopf { background: rgba(12, 26, 36, .88); }
  :root:not([data-thema="hell"]) .fuss { background: #081319; }
  :root:not([data-thema="hell"]) .knopf:hover { background: #e8b969; }
  :root:not([data-thema="hell"]) .knopf-zweit { background: var(--papier-hoch);
    color: var(--tinte); }
  :root:not([data-thema="hell"]) .knopf-zweit:hover { background: var(--papier-tief); }
  :root:not([data-thema="hell"]) .antwort:hover:not([disabled]) { background: #17303c; }
  /* Die amtlichen Grafiken sind Strichzeichnungen auf Weiss — auf dunklem
     Grund brauchen sie eine helle Unterlage, sonst verschwinden sie. */
  :root:not([data-thema="hell"]) .frage-bilder,
  :root:not([data-thema="hell"]) .antwort .inhalt img {
    background: #f4f1ec; border-radius: 8px;
  }
  :root:not([data-thema="hell"]) .antwort .inhalt img { padding: 6px; }
  :root:not([data-thema="hell"]) .schranke .schloss { background: #2a2340; color: #cdb6f5; }
  :root:not([data-thema="hell"]) .etikett-premium { background: #2a2340; color: #cdb6f5; }
  :root:not([data-thema="hell"]) .etikett-begonnen,
  :root:not([data-thema="hell"]) .etikett-gesperrt { color: var(--akzent); }
}

/* Manuelle Umschaltung: [data-thema="dunkel"] erzwingt Dunkelmodus. */
:root[data-thema="dunkel"] {
  --tinte:        #e8eef3;
  --tinte-weich:  #a9bcc9;
  --tinte-leise:  #8197a6;
  --papier:       #0c1a24;
  --papier-hoch:  #12252f;
  --papier-tief:  #17303c;
  --schleier:     12, 26, 36;
  /* Nachtfassung: kaltes Mondlicht oben rechts, tiefes Blau unten, und ein
     Sternenfeld. Die Sterne sind vier winzige Kreise in einer gekachelten
     Lage — vier Verlaeufe kosten nichts, ein Sternenhimmel aus einzelnen
     Elementen kostete tausend Knoten. */
  --grund-lichter:
    radial-gradient(1.1px 1.1px at 22% 12%, rgba(214, 232, 255, .60), transparent),
    radial-gradient(1px 1px at 67% 31%, rgba(214, 232, 255, .45), transparent),
    radial-gradient(1.5px 1.5px at 41% 68%, rgba(226, 240, 255, .55), transparent),
    radial-gradient(1px 1px at 85% 84%, rgba(200, 222, 250, .40), transparent),
    radial-gradient(110vw 75vh at 90% -10%, rgba(126, 170, 214, .22), transparent 60%),
    radial-gradient(110vw 80vh at 0% 110%, rgba(20, 62, 92, .42), transparent 62%);
  --grund-kacheln: 190px 190px, 250px 250px, 320px 320px, 210px 210px, auto, auto;
  --grund-wiederholung: repeat, repeat, repeat, repeat, no-repeat, no-repeat;

  --knopf-grund:  #6db3f2;
  --knopf-schrift:#0a1620;
  --linie:        #274453;
  --linie-fein:   #1e3644;
  --akzent:      #6db3f2;   /* gerechnet: 6,96:1 auf der Karte */
  --akzent-hell: #16293c;
  --gruen:        #5cc294;
  --gruen-hell:   #12302a;
  --rot:          #f08b7e;
  --rot-hell:     #35201e;
  --blau:         #6db3f2;
  --blau-hell:    #16293c;
  --see:    #79bce6;
  --binnen: #5cc294;
  --funk:   #b39ae0;
  --pyro:   #d9a34e;
  --schatten-fein: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .22);
  --schatten:      0 1px 1px rgba(0, 0, 0, .3), 0 4px 10px rgba(0, 0, 0, .26),
                   0 12px 28px rgba(0, 0, 0, .26);
  --schatten-hoch: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .34),
                   0 26px 56px rgba(0, 0, 0, .38);
}
:root[data-thema="dunkel"] .kopf { background: rgba(12, 26, 36, .88); }
:root[data-thema="dunkel"] .fuss { background: #081319; }
:root[data-thema="dunkel"] .knopf:hover { background: #e8b969; }
:root[data-thema="dunkel"] .knopf-zweit { background: var(--papier-hoch); color: var(--tinte); }
:root[data-thema="dunkel"] .knopf-zweit:hover { background: var(--papier-tief); }
:root[data-thema="dunkel"] .antwort:hover:not([disabled]) { background: #17303c; }
:root[data-thema="dunkel"] .frage-bilder,
:root[data-thema="dunkel"] .antwort .inhalt img { background: #f4f1ec; border-radius: 8px; }
:root[data-thema="dunkel"] .antwort .inhalt img { padding: 6px; }
:root[data-thema="dunkel"] .schranke .schloss { background: #2a2340; color: #cdb6f5; }
:root[data-thema="dunkel"] .etikett-premium { background: #2a2340; color: #cdb6f5; }

/* --- Reiter ---------------------------------------------------------------
   Eine Leiste aus Ankern über mehreren Abschnitten. Ohne JavaScript stehen
   alle Abschnitte untereinander und die Leiste ist ein Inhaltsverzeichnis;
   reiter.js blendet dann aus, was nicht gewählt ist.

   Das !important auf [hidden] ist nicht Vorsicht, sondern Notwendigkeit:
   .reiter-feld hat mit display:block eine eigene Regel, und die schlägt die
   Vorgabe des Browsers für hidden. Ein Abschnitt, der trotz hidden dasteht,
   sieht aus wie ein Fehler im Inhalt.

   Ausgeblendet wird erst, wenn reiter.js data-bereit gesetzt hat. Vorher
   liegt die Entscheidung beim Generator, und es springt nichts. */
.reiter-leiste {
  display: flex; flex-wrap: wrap; gap: .3rem;
  margin: 1.4rem 0 0; padding: 0 0 .1rem;
  border-bottom: 2px solid var(--linie);
}
.reiter-knopf {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem .95rem; border-radius: 8px 8px 0 0;
  font-size: .95rem; font-weight: 600; line-height: 1.3;
  color: var(--tinte-weich); text-decoration: none;
  border: 2px solid transparent; border-bottom: none;
  margin-bottom: -2px; background: none;
  min-height: 44px;          /* Daumenmass, wie bei jedem anderen Knopf */
}
.reiter-knopf:hover { color: var(--akzent); background: var(--akzent-hell); }
.reiter-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.reiter-knopf .reiter-zahl {
  font-size: .82rem; font-weight: 500; color: var(--tinte-leise);
  font-variant-numeric: tabular-nums;
}
.reiter[data-bereit] .reiter-knopf.ist-an {
  color: var(--akzent); background: var(--papier);
  border-color: var(--linie); border-bottom-color: var(--papier);
}
.reiter[data-bereit] .reiter-knopf.ist-an .reiter-zahl { color: var(--akzent); }
.reiter-feld { display: block; margin-top: 1.6rem; }
.reiter-feld[hidden] { display: none !important; }
.reiter-feld:focus { outline: none; }

/* Ohne JavaScript ist die Leiste ein Inhaltsverzeichnis und braucht die
   Ueberschrift jedes Abschnitts; mit Reitern sagt der Reiter dasselbe noch
   einmal, direkt darueber. Weggeraeumt wird sie mit derselben Technik wie
   .nur-fuer-screenreader — ein Kasten von einem Pixel, nicht ein
   `left: -9999px`. Das Zweite schoebe die Seite quer, und genau darauf
   sieht tools/layout_pruefen.mjs auf 320 Pixeln. Die Ueberschrift bleibt
   fuer ein Vorleseprogramm da, und die Gliederung bleibt vollstaendig. */
.reiter[data-bereit] .reiter-feld > h2:first-child {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 560px) {
  .reiter-leiste {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .reiter-leiste::-webkit-scrollbar { display: none; }
  .reiter-knopf { flex: none; padding: .6rem .8rem; font-size: .9rem; }
}

/* --- Kostenlos gegen Abo --------------------------------------------------
   Links, was nichts kostet; rechts, was dazukommt. In dieser Reihenfolge,
   weil das die Reihenfolge der Fragen ist, die jemand hat — und weil eine
   Seite, die mit dem Preis anfaengt, die zweite vor der ersten beantwortet.

   Die rechte Spalte sagt „alles von links und zusaetzlich". Zwei Listen,
   von denen die eine die andere wiederholt, sind unlesbar und laden zum
   Vergleichen von Haken ein, statt zum Lesen. */
.zugaenge {
  display: grid; gap: 1rem; margin-top: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.zugang {
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; background: var(--papier-hoch); min-width: 0;
}
.zugang[data-hervor="ja"] {
  border-color: var(--akzent); background: var(--akzent-hell);
}
.zugang h3 { margin: 0 0 .2rem; font-size: 1.08rem; }
.zugang-preis {
  margin: 0 0 .9rem; font-size: 1.5rem; font-weight: 700;
  color: var(--akzent); letter-spacing: -.02em;
}
.zugang-preis span {
  display: block; font-size: .86rem; font-weight: 400;
  color: var(--tinte-leise); letter-spacing: 0;
}
.leistungen { list-style: none; margin: 0; padding: 0; }
.leistungen li {
  padding: .5rem 0 .5rem 1.6rem; position: relative;
  border-top: 1px solid var(--linie-fein); font-size: .94rem;
}
.leistungen li:first-child { border-top: 0; }
.leistungen li b { display: block; color: var(--tinte); font-weight: 620; }
.leistungen li span { color: var(--tinte-weich); line-height: 1.5; }
/* Der Haken ist gezeichnet, nicht getippt: Ein Zeichen aus der Schrift
   sieht auf jedem Geraet anders aus, und auf einem ohne Emoji-Schrift
   erscheint ein leeres Kaestchen. */
.leistungen li::before {
  content: ""; position: absolute; left: .2rem; top: .95rem;
  width: .55rem; height: .3rem; border-left: 2px solid var(--gruen);
  border-bottom: 2px solid var(--gruen); transform: rotate(-45deg);
}
.zugang .preis-raster {
  display: grid; gap: .6rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
}
.zugang .preis {
  border: 1px solid var(--linie); border-radius: var(--radius-fein);
  padding: .7rem .8rem; background: var(--papier); text-align: center;
}
.zugang .preis[data-hervor="ja"] { border-color: var(--akzent); }
.zugang .preis h4 {
  margin: 0; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--tinte-leise); font-weight: 700;
}
.zugang .preis .betrag {
  font-size: 1.3rem; font-weight: 700; color: var(--tinte);
  letter-spacing: -.02em;
}
.zugang .preis .zeitraum { font-size: .8rem; color: var(--tinte-leise); }
/* Der Weg zur Kasse. Steht nur im Dokument, wenn ANGEBOT['verkauf'] an ist —
   vorher erzeugt der Generator das Formular gar nicht erst. Der Knopf fuellt
   die Karte, damit auf einem Telefon nicht danebengezielt wird. */
.zugang .kaufen { margin: .7rem 0 0; }
.zugang .kaufen .knopf { width: 100%; padding: .55rem .6rem; font-size: .9rem; }
.zugang .preis-ust {
  margin: .45rem 0 0; font-size: .72rem; line-height: 1.35;
  color: var(--tinte-leise);
}

/* --- Glossar ------------------------------------------------------------

   Ein markiertes Wort soll auffindbar sein und den Lesefluss trotzdem nicht
   zerschneiden: gepunktete Unterlinie statt Farbe, sonst nichts. Vor allem
   erbt der Knopf die Schrift des Absatzes — ein <button> bringt von sich aus
   eine eigene Schriftart, eine eigene Groesse und einen Rahmen mit, und
   mitten in einem Satz sieht das aus wie ein Fehler. */
.glossar-wort {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  margin: 0; cursor: help;
  border-bottom: 1px dotted var(--tinte-leise);
  /* Der Knopf sitzt in einem Satz und darf ihn nicht auseinanderreissen. */
  display: inline;
}
.glossar-wort:hover { border-bottom-color: var(--akzent); }
.glossar-wort:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 2px;
}
.glossar-wort[aria-expanded="true"] {
  border-bottom-color: var(--akzent); font-weight: 600;
}
/* Der Kasten steht als eigener Block hinter dem Wort — inline waere er dem
   Zeilenfall ausgeliefert und liesse sich weder in der Breite begrenzen noch
   mit Innenabstand versehen: Ein Inline-Kasten ignoriert beides. */
.glossar-kasten {
  display: block; max-width: 30rem; margin: .5rem 0;
  padding: .7rem .85rem;
  border: 1px solid var(--akzent); border-radius: var(--radius-fein);
  background: var(--papier-hoch); font-size: .9rem; line-height: 1.5;
}
.glossar-kasten b { display: block; margin-bottom: .15rem; }
.glossar-text { display: block; color: var(--tinte-weich); }
.glossar-mehr { display: inline-block; margin-top: .4rem; font-size: .82rem; }

.glossar-band {
  display: flex; flex-wrap: wrap; gap: .3rem; margin: 1.2rem 0 1.6rem;
}
.glossar-band a {
  display: grid; place-items: center; min-width: 2rem; min-height: 2rem;
  border: 1px solid var(--linie); border-radius: var(--radius-fein);
  text-decoration: none; font-weight: 600;
}
.glossar-band a:hover { border-color: var(--akzent); }
.glossar-gruppe { margin-top: 1.8rem; }
.glossar-gruppe h2 {
  margin: 0 0 .6rem; padding-bottom: .3rem;
  border-bottom: 2px solid var(--linie);
}
.glossar-gruppe dl { margin: 0; }
.glossar-gruppe dt {
  font-weight: 700; margin-top: .8rem;
  /* Damit ein Sprung aus dem Text nicht unter der Kopfzeile landet. */
  scroll-margin-top: 5rem;
}
.glossar-gruppe dd { margin: .1rem 0 0; color: var(--tinte-weich); max-width: 62ch; }

/* --- Vertiefung: „Worum es hier geht" -----------------------------------

   Sie steht UEBER den Fragen und traegt deshalb die Last, den Leser nicht
   aufzuhalten: eine ruhige Flaeche, ein Sprung zu den Fragen gleich in der
   Kopfzeile, und eine Zeilenlaenge, die zum Lesen taugt statt zum
   Ueberfliegen. Deshalb auch kein Kartenrahmen — sie ist der Text der Seite,
   nicht ein Kasten darin. */
.vertiefung {
  margin: 1.6rem 0 0; padding: 1.3rem 0 0;
  border-top: 3px solid var(--akzent);
}
.vertiefung-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.vertiefung-kopf h2 { margin: 0; }
.vertiefung-sprung { flex: 0 0 auto; font-size: .85rem; }
.vertiefung p { max-width: 62ch; line-height: 1.7; }
.vertiefung-punkte {
  margin: 1.2rem 0; padding: .9rem 1.1rem;
  background: var(--papier-hoch); border-radius: var(--radius-fein);
  display: grid; grid-template-columns: max-content 1fr; gap: .35rem .9rem;
  align-items: baseline;
}
.vertiefung-punkte dt { font-weight: 700; }
.vertiefung-punkte dd { margin: 0; color: var(--tinte-weich); }
@media (max-width: 560px) {
  /* Ein „max-content" in der ersten Spalte laesst einen langen Begriff die
     Erklaerung an den Rand druecken. Auf dem Telefon deshalb untereinander. */
  .vertiefung-punkte { grid-template-columns: 1fr; gap: .1rem; }
  .vertiefung-punkte dd { margin-bottom: .5rem; }
}
.vertiefung-achtung {
  border-left: 3px solid var(--warnung, var(--akzent));
  padding-left: .9rem; margin: 1.2rem 0;
}
.vertiefung-quelle {
  font-size: .8rem; color: var(--tinte-leise); margin: 1.2rem 0 0;
}

/* --- Das Band „Weiter lernen" -------------------------------------------

   Es steht schon im ausgelieferten HTML und wird nur ERSETZT, nie eingefuegt
   — sonst schoebe es beim Laden die halbe Seite nach unten. Damit das
   aufgeht, muss der Kasten in beiden Zustaenden gleich hoch sein: „Üben"
   und „Weiter bei Frage 12 von 25" tragen dieselbe Zeilenzahl, und der
   Fortschrittsbalken sitzt in einem Feld, das auch leer seine Hoehe haelt.
   min-height ist die Zusicherung dafuer, nicht Zierrat. */
.fortsetzen {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  min-height: 5.4rem; padding: .9rem 1.1rem;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--papier-hoch); box-shadow: var(--schatten-fein, none);
}
.fortsetzen-text { flex: 1 1 16rem; min-width: 0; }
.fortsetzen-marke {
  display: block; font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinte-leise); margin-bottom: .15rem;
}
.fortsetzen-text b {
  display: block; font-size: 1.05rem; line-height: 1.3;
  /* Ein Abschnittsname kann lang sein; er darf den Knopf nicht wegdruecken. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Eine Zeile, notfalls mit Auslassung. Beide Zustaende des Bandes muessen
   gleich hoch sein — bricht dieser Satz in einem davon um, springt die
   Seite beim Laden um genau diese Zeile. */
.fortsetzen-stelle {
  display: block; font-size: .85rem; color: var(--tinte-leise);
  margin-top: .1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fortsetzen-balken {
  height: 4px; margin-top: .5rem; border-radius: 2px;
  background: var(--linie); overflow: hidden;
}
.fortsetzen-balken i {
  display: block; height: 100%; background: var(--akzent);
}
.fortsetzen[data-platz="ja"] { border-color: var(--akzent); }
.fortsetzen-knopf { flex: 0 0 auto; }
@media (max-width: 520px) {
  /* Auf dem Telefon unter den Text und ueber die ganze Breite: Ein Knopf,
     der neben einem umgebrochenen Namen klemmt, ist schwer zu treffen. */
  .fortsetzen-knopf { flex: 1 1 100%; text-align: center; }
}

/* --- Spickzettel ---------------------------------------------------------
   Eine lange Liste kurzer Saetze. Zwei Spalten, sobald Platz ist: Auf einem
   Schirm von 1000 Pixeln stuenden 513 Zeilen sonst als ein Band von zwei
   Zentimetern Breite und mehreren Metern Laenge da, und gedruckt waeren es
   doppelt so viele Blaetter wie noetig. Auf dem Telefon bleibt es eine
   Spalte — dort gibt es keine Wahl. */
.spick-teil {
  margin: 2.4rem 0 .2rem; padding-top: 1.1rem;
  border-top: 2px solid var(--linie);
}
.spick-worum { color: var(--tinte-leise); margin: 0 0 1rem; font-size: .92rem; }
.spick-zahl {
  font-size: .7em; font-weight: 600; color: var(--tinte-leise);
  font-variant-numeric: tabular-nums;
}
.spick-block { margin-top: 1.4rem; break-inside: avoid; }
.spick-block h3 {
  margin: 0 0 .5rem; font-size: 1rem;
  border-bottom: 1px solid var(--linie); padding-bottom: .3rem;
}
.spick-liste {
  margin: 0; padding-left: 1.4rem;
  columns: 2; column-gap: 2rem;
  font-size: .92rem; line-height: 1.5;
}
@media (max-width: 720px) { .spick-liste { columns: 1; } }
/* Ein Listenpunkt, den eine Spalte in der Mitte zerreisst, ist schwerer zu
   lesen als zwei Zentimeter verschenkter Platz. */
.spick-liste li { break-inside: avoid; margin-bottom: .35rem; }
.spick-liste a { color: var(--tinte); text-decoration-color: var(--linie); }
.spick-liste a:hover { text-decoration-color: var(--akzent); }

/* --- Druck --------------------------------------------------------------- */

/* Die Zeile unter den sechs Wegen: alles, was auch da ist, ohne dafür eine
   eigene Karte zu bekommen. Sechs Karten sind eine Auswahl, zwölf sind ein
   Inhaltsverzeichnis. */
.auch-noch {
  margin: 1.4rem 0 0; font-size: .92rem; line-height: 1.7;
  color: var(--tinte-leise); max-width: 74ch;
}
.auch-noch a { color: var(--tinte-weich); }

/* --- Vergleichstabelle See gegen Binnen ---------------------------------- */

.vergleich {
  width: 100%; border-collapse: collapse; font-size: .94rem;
  min-width: 560px;          /* darunter wird verglichen, nicht gelesen */
}
.vergleich th, .vergleich td {
  padding: .7rem .9rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--linie-fein);
}
.vergleich thead th {
  font-family: 'Inter', sans-serif;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--akzent); border-bottom: 2px solid var(--linie);
}
.vergleich tbody th {
  font-family: 'Inter', sans-serif; font-weight: 620; font-size: .86rem;
  color: var(--tinte-leise); width: 30%;
}
.vergleich tbody td { color: var(--tinte-weich); }
.vergleich tbody tr:last-child th,
.vergleich tbody tr:last-child td { border-bottom: 0; }

/* --- Fragenseiten ---------------------------------------------------------
   Der Katalog als lesbare Seiten: eine je Lernplan-Abschnitt, ohne Skript.
   Die Fragen selbst tragen dieselben Klassen wie im Lernmodus, damit beide
   gleich aussehen und nicht auseinanderlaufen; hier steht nur, was drum
   herum dazukommt.                                                          */

/* Eine Einleitung, die gelesen werden soll: breiter als Fliesstext waere,
   aber nicht ueber die Zeilenlaenge hinaus, ab der das Auge die naechste
   Zeile nicht mehr findet. */
.vorspann {
  max-width: 66ch; margin: 0 0 1rem;
  font-size: 1.04rem; line-height: 1.62; color: var(--tinte-weich);
  text-wrap: pretty;
}
.vorspann a { color: inherit; text-decoration-color: var(--akzent); }

.brotkrumen {
  font-family: 'Inter', sans-serif;
  font-size: .82rem; color: var(--tinte-leise);
  margin: 0 0 1.1rem;
}
.brotkrumen a { color: var(--tinte-leise); text-decoration: none; }
.brotkrumen a:hover { color: var(--akzent); text-decoration: underline; }
.brotkrumen span { opacity: .5; margin: 0 .18rem; }

.quellenzeile {
  max-width: 72ch; margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: .84rem; line-height: 1.6; color: var(--tinte-leise);
}

/* Die Uebersicht: eine Karte je Abschnitt. Ein <a> als Karte statt einer
   Karte mit einem Link darin — sonst ist nur die Ueberschrift anklickbar,
   und auf einem Telefon trifft man daneben. */
.abschnitt-karte {
  display: block; text-decoration: none; color: inherit;
  background: var(--papier-hoch);
  border: 1px solid var(--linie-fein);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--schatten-fein), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: transform var(--tempo), border-color var(--tempo),
              box-shadow var(--tempo);
}
:root[data-thema="dunkel"] .abschnitt-karte {
  box-shadow: var(--schatten-fein), inset 0 1px 0 rgba(255, 255, 255, .045);
}
.abschnitt-karte:hover {
  transform: translateY(-2px);
  border-color: var(--akzent);
  box-shadow: var(--schatten);
}
.abschnitt-karte h3 {
  font-size: 1.05rem; margin: .45rem 0 .4rem; letter-spacing: -.012em;
}
.abschnitt-karte p {
  margin: 0; font-size: .9rem; line-height: 1.55; color: var(--tinte-weich);
}
.abschnitt-zahl {
  font-family: 'Inter', sans-serif;
  font-size: .72rem; font-weight: 660;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--akzent);
}

/* Auf einer Fragenseite ist die Frage eine Ueberschrift, im Lernmodus ein
   Absatz — dieselbe Klasse, zwei Elemente. Ohne diese Zeile traegt das h2
   seine eigene Schriftgroesse und der Abschnitt sieht auf beiden Seiten
   verschieden aus. */
h2.lernfrage-text { font-size: 1.06rem; font-weight: 560; }

/* Die Verweisliste auf den Scheinseiten. Zwei Spalten, sobald Platz ist —
   bei 22 Abschnitten ist eine Spalte eine Rolltreppe. */
.nachlese-raster {
  display: grid; gap: 1.2rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 1.1rem;
}
.nachlese-raster h3 {
  font-family: 'Inter', sans-serif;
  font-size: .74rem; font-weight: 680; text-transform: uppercase;
  letter-spacing: .08em; color: var(--tinte-leise);
  margin: 0 0 .5rem;
}
.nachlese-liste { list-style: none; margin: 0; padding: 0; }
.nachlese-liste li {
  display: flex; justify-content: space-between; gap: .8rem;
  padding: .28rem 0; font-size: .93rem;
  border-bottom: 1px solid var(--linie-fein);
}
.nachlese-liste a { text-decoration: none; color: var(--tinte-weich); }
.nachlese-liste a:hover { color: var(--akzent); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Formular — bislang gab es auf dieser Seite keins, weil es nichts zu
   senden gab. Die Anmeldung ist das erste und einzige Feld, in das jemand
   etwas ueber sich selbst eintraegt; entsprechend gross die Trefferflaeche
   und entsprechend deutlich der Fehler daneben statt oben.
   -------------------------------------------------------------------------- */
.formular { max-width: 30rem; margin: 0; }
.formular .feld { margin-bottom: 1.15rem; }
.formular label {
  display: block; margin-bottom: .35rem;
  font-weight: 600; font-size: .95rem; color: var(--tinte);
}
.formular input[type="text"],
.formular input[type="email"] {
  width: 100%; font: inherit; font-size: 1.05rem;
  /* 16px oder mehr: darunter zoomt iOS beim Hineintippen in das Feld, und
     der Leser landet in einer Ansicht, aus der er selbst herausfinden muss. */
  padding: .8rem .9rem;
  border: 1.5px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--papier-hoch); color: var(--tinte);
  transition: border-color var(--tempo), box-shadow var(--tempo);
}
.formular input:focus {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(169, 118, 42, .16);
}
.formular input[aria-invalid="true"] { border-color: #b3261e; }
.formular .feld-fehler {
  display: none; margin: .35rem 0 0; font-size: .9rem; color: #b3261e;
}
.formular .feld[data-fehler="ja"] .feld-fehler { display: block; }

/* Die Falle fuer Maschinen. Nicht display:none — manche Ausfueller merken
   das; stattdessen aus dem Bild geschoben und aus der Vorlesereihenfolge
   genommen. */
.formular .honigtopf {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.formular .zustimmung {
  display: flex; gap: .7rem; align-items: flex-start;
  margin: 1.4rem 0;
}
.formular .zustimmung input {
  width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; flex: none;
  accent-color: var(--akzent);
}
.formular .zustimmung label {
  margin: 0; font-weight: 400; font-size: .95rem;
  line-height: 1.55; color: var(--tinte-weich);
}
.formular button[type="submit"] { width: 100%; }
.formular button[disabled] { opacity: .6; cursor: progress; }

.anmelde-lage {
  margin: 1.4rem 0 0; padding: 1rem 1.1rem;
  border-radius: var(--radius-klein);
  border-left: 3px solid var(--linie);
  background: var(--papier-tief); line-height: 1.6;
}
.anmelde-lage[hidden] { display: none; }
.anmelde-lage[data-art="ok"] { border-left-color: #1e7a4d; background: rgba(30, 122, 77, .08); }
.anmelde-lage[data-art="fehler"] { border-left-color: #b3261e; background: rgba(179, 38, 30, .07); }
.anmelde-lage[data-art="warnung"] { border-left-color: var(--akzent); background: var(--akzent-hell); }

/* --- Einstufungstest ------------------------------------------------------
   Die Spanne ist die eigentliche Aussage dieser Seite: eine Schiene von 0
   bis 100 %, darauf der geschätzte Wert als Strich und das Intervall als
   Balken. Ein Balken, der ein Drittel der Schiene einnimmt, sagt in einem
   Blick, was drei Absätze Text erklären müssten — dass dreißig Fragen keine
   genaue Auskunft geben. */
.einstufung-spanne { margin: .6rem 0 0; }
.einstufung-schiene {
  position: relative; height: 12px; border-radius: 100px;
  background: var(--papier-tief); border: 1px solid var(--linie-fein);
}
.einstufung-schiene i {
  position: absolute; top: 0; bottom: 0;
  background: var(--gruen); opacity: .38; border-radius: 100px;
  min-width: 2px;
}
.einstufung-schiene b {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--tinte); border-radius: 2px;
  transform: translateX(-1px);
}

.einstufung-teil {
  padding: 1rem 0; border-top: 1px solid var(--linie-fein);
}
.einstufung-teil:first-of-type { border-top: none; padding-top: .4rem; }
.einstufung-teil h3 { margin: 0; font-size: 1.02rem; }

.einstufung-urteil {
  font-size: .93rem; line-height: 1.55; padding-left: .8rem;
  border-left: 3px solid var(--linie);
}
.einstufung-urteil[data-stand="darueber"] { border-left-color: var(--gruen); }
.einstufung-urteil[data-stand="darunter"] { border-left-color: var(--rot); }
.einstufung-urteil[data-stand="offen"]    { border-left-color: var(--akzent); }

.einstufung-pfad { margin: 1rem 0 0; padding-left: 1.4rem; line-height: 1.75; }
.einstufung-pfad li { margin-bottom: .2rem; }
.einstufung-pfad a { font-weight: 600; }

.einstufung-pensum {
  margin-top: 1.1rem; padding: .85rem 1rem;
  background: var(--papier-tief); border-radius: var(--radius-klein);
  border-left: 3px solid var(--akzent); line-height: 1.6;
}

/* Das Band über den sechs Wegen. Es ist keine siebte Karte: Der
   Einstufungstest ist die Frage vor allen anderen, und eine siebte Kachel in
   einer Reihe von sechs sähe aus wie eine weitere Möglichkeit statt wie der
   Anfang. */
.einstufung-band {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem;
  justify-content: space-between;
  padding: 1.4rem 1.5rem; border-radius: var(--radius);
  background: var(--papier-hoch); border: 1px solid var(--linie-fein);
  border-left: 4px solid var(--akzent); box-shadow: var(--schatten);
}
.einstufung-band h2 { margin: 0 0 .4rem; font-size: 1.25rem; }
.einstufung-band p { margin: 0; max-width: 62ch; color: var(--tinte-weich); }
.einstufung-band > div { flex: 1 1 22rem; }
.einstufung-band .knopf { flex: none; }
@media (max-width: 560px) {
  .einstufung-band .knopf { width: 100%; text-align: center; }
}

/* --- Überschriften in Karten ---------------------------------------------
   Die Gliederung einer Seite und ihr Aussehen sind zwei verschiedene Dinge.
   „Der Fragenkatalog" und „Die Prüfung" auf einer Scheinseite sind
   Abschnitte der Seite und gehören auf h2 — vorher standen sie auf h3, und
   damit sprang die Gliederung von h1 direkt auf h3. Das kostet einen
   Screenreader die Struktur und eine Suchmaschine die Aussage, was auf
   dieser Seite gleichrangig ist.

   Optisch bleibt es, wie es war: In einer Karte ist eine Überschrift so
   groß wie die Karte es verträgt, nicht so groß wie ihre Stufe. Das ist der
   Sinn dieser Regeln — die Stufe stimmt jetzt, das Bild bleibt. */
.karte > h2,
.abschnitt-karte h2,
.preis h2 {
  font-size: 1.22rem; letter-spacing: -.008em;
  font-variation-settings: 'opsz' 22; line-height: 1.25;
}

/* --- Häufige Fragen -------------------------------------------------------
   <details> und nicht sechs offene Absätze: Wer die Antwort auf eine dieser
   Fragen sucht, sucht genau eine — sechs ausgeklappte Antworten sind sechsmal
   Suchen. Die Frage selbst steht immer da, und das ist die eigentliche
   Information: dass die Seite sie beantwortet.

   Zugeklappt heißt hier NICHT versteckt: Der Text steht vollständig im
   Quelltext, wird von einer Suchmaschine gelesen und deckt sich Wort für Wort
   mit der FAQPage-Auszeichnung im Kopf. */
.faq {
  border-top: 1px solid var(--linie-fein);
}
.faq:first-of-type { border-top: none; }
.faq summary {
  cursor: pointer; padding: .8rem 0; font-weight: 600;
  list-style: none; display: flex; gap: .7rem; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: '+'; color: var(--akzent); font-weight: 700;
  font-size: 1.1em; line-height: 1; flex: none; width: .8em;
}
.faq[open] summary::before { content: '−'; }
.faq summary:hover { color: var(--akzent); }
.faq p {
  margin: 0 0 1rem 1.5rem; color: var(--tinte-weich); line-height: 1.65;
  max-width: 66ch;
}

/* --- Platz, der schon da ist, bevor der Inhalt kommt ----------------------
   Gemessen, nicht geraten: Vor diesen Regeln lag der CLS — wie weit der
   Inhalt beim Laden springt — auf /pruefung bei 0,79, auf /lernplan bei
   0,75, auf /ueben bei 0,69. Google nennt alles über 0,25 schlecht. Die
   Ursache war überall dieselbe: ein Kasten, der leer ist oder ein Gerüst aus
   zwei grauen Karten trägt, und der dann durch das Vielfache an echtem
   Inhalt ersetzt wird — alles darunter rutscht nach.

   Das ist nicht nur eine Kennzahl. Wer beim Laden auf einen Knopf zielt,
   trifft einen anderen.

   Reserviert wird nach gemessenen Höhen: eine Fragenkarte ist auf dem Telefon
   rund 630 Pixel hoch, auf einem breiten Schirm rund 500. Genau lässt sich
   das nicht treffen — eine kurze Frage braucht weniger als eine mit vier
   langen Antworten und einem Bild. Die Reserve nimmt deshalb den unteren
   Rand des Üblichen: Sie fängt den Sprung, ohne bei kurzen Fragen eine
   auffällige Lücke zu lassen. tools/laden_pruefen.mjs misst nach.

   Was bleibt, ist ehrlich zu benennen: Unter einer kurzen Karte stehen jetzt
   bis zu 130 Pixel Weißraum. Der Tausch ist trotzdem richtig — vorher
   sprangen 630. Und er lässt sich nicht auflösen: Eine Reserve, die
   verschwindet, sobald der Inhalt da ist, verschiebt die Seite nach oben
   statt nach unten, und das zählt genauso. Entweder Weißraum oder Sprung. */
.platz-frage { min-height: 38rem; }
.platz-karten { min-height: 28rem; }

/* Die langen Listen — Lernplan, Lerntafeln, Erfolge — sind fünf- bis
   vierzigmal so hoch wie ein Bildschirm. Ihre Höhe lässt sich nicht
   reservieren, und das ist auch nicht nötig: In den CLS geht nur ein, was
   im sichtbaren Bereich verrutscht. Ist der Kasten schon einen Bildschirm
   hoch, wächst er unterhalb der Sichtkante weiter, und das zählt nicht mehr.
   Deshalb hier eine Reserve in Bildschirmhöhen statt in Zeilen. */
.platz-liste { min-height: 92vh; }

/* Die kleinen leeren Stellen — und die waren am Ende die hartnäckigsten.
   Nachdem die großen Kästen ihren Platz hatten, kam der Rest des Sprungs
   nicht mehr aus ihnen, sondern von ÜBER ihnen: eine leere <p>, die zwei
   Zeilen Text bekommt, eine leere Leiste, die zwei Knöpfe bekommt. Jede für
   sich vierzig Pixel — und weil alles darunter mitgeht, war das der halbe
   Befund. Ein Kasten, den JavaScript füllt, braucht seinen Platz vorher,
   egal wie klein er ist. */
.platz-zeile { min-height: 1.6em; }
.platz-zeile-zwei { min-height: 3.2em; }
/* Die Scheinleiste ist auf dem Telefon zwei Knopfreihen hoch (gemessen:
   87 Pixel), auf einem breiten Schirm eine (42). Ein einziger Wert für
   beides lässt entweder eine Lücke oder einen Sprung. */
.platz-leiste { min-height: 5.5rem; }
.platz-kopf { min-height: 2.4rem; }
.platz-werkzeuge { min-height: 40rem; }

@media (min-width: 560px) {
  .platz-zeile-zwei { min-height: 1.6em; }
  .platz-leiste { min-height: 2.6rem; }
}
@media (min-width: 768px) {
  .platz-werkzeuge { min-height: 16rem; }
}

@media (min-width: 768px) {
  .platz-frage { min-height: 30rem; }
  .platz-karten { min-height: 22rem; }
}

/* Das Gerüst einer Fragenkarte. Vorher war der Kasten schlicht leer — ein
   weißer Fleck, der sich ohne Vorwarnung füllt. */
.geruest-frage {
  border: 1px solid var(--linie-fein); border-radius: var(--radius);
  background: var(--papier-hoch); padding: 1.4rem;
  display: grid; gap: .9rem;
}

/* Die Scheinüberschrift über den Etappen. Sie steht im Dokument, damit die
   Seite ohne JavaScript beide Lernpläne zeigt und man sieht, welcher welcher
   ist; mit JavaScript ist immer nur einer da, und dann sagt sie dasselbe wie
   die Leiste darüber — deshalb ist sie dann nur für Vorleseprogramme da. */
.plan-schein-titel {
  font-size: 1.35rem; margin: 0 0 1rem;
}

/* --- Text auf dem Farbverlauf der Bühne -----------------------------------
   Der Verlauf wird nach rechts hin durchsichtig. Was dort steht, darf
   deshalb nicht die leiseste Tinte tragen: Gemessen wurden 4,05:1 unter den
   Kennzahlen, damals über dem bewegten Wasser. Eine Stufe kräftiger, und es
   gilt überall — ohne einen Kasten unter den Text zu legen, der dort nichts
   zu suchen hat. Das Wasser ist inzwischen weg; die Regel bleibt, weil sie
   nichts kostet. */
.buehne .zahlenband span { color: var(--tinte-weich); }

/* --- Käpt'n Otto ----------------------------------------------------------
   Das Maskottchen steht an drei Stellen und sonst nirgends: einmal zur
   Begrüßung, einmal beim Bestehen, einmal dort, wo noch nichts ist.

   Diese Zurückhaltung galt, solange Otto nichts zu sagen hatte. Jetzt hat
   er auf jeder Seite einen eigenen Tipp — und ein Maskottchen, das jedes
   Mal etwas Neues und Brauchbares sagt, ist keine Tapete, sondern ein
   Grund weiterzulesen. Wallpaper wird es erst, wenn es sich wiederholt;
   dagegen steht tools/otto_pruefen.py. */
.otto { display: block; flex: none; }
.otto-scheibe { fill: var(--akzent-hell); }

.otto-gruss {
  display: flex; gap: .9rem; align-items: center;
  margin-top: 1.6rem; padding: .9rem 1.1rem .9rem .8rem;
  background: var(--papier-hoch); border: 1px solid var(--linie-fein);
  border-radius: var(--radius); max-width: 32rem;
}
.otto-gruss p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--tinte-weich); }
.otto-gruss b { color: var(--tinte); }

/* --- Otto mit einem Tipp -------------------------------------------------
   Er steht jetzt auf fast jeder Seite, und genau deshalb sagt jeder Otto
   etwas anderes: Ein Maskottchen, das ueberall dasselbe erzaehlt, sieht man
   nach dem dritten Mal nicht mehr, und dann hat man Platz gegen nichts
   eingetauscht. Der Kasten ist bewusst leise — akzentgetoente Flaeche,
   duenne Linie, kein Ausrufezeichen. Er soll gelesen werden, nicht
   angesprungen.

   Auf dem Telefon rutscht Otto NICHT unter den Text: Nebeneinander bleibt
   die Zeile kurz genug, und uebereinander waere er ein Bild ohne Bezug. Er
   wird nur kleiner. */
.otto-tipp {
  display: flex; gap: .85rem; align-items: flex-start;
  margin: 1.6rem 0; padding: .85rem 1.05rem .85rem .75rem;
  background: var(--akzent-hell); border: 1px solid var(--linie-fein);
  border-radius: var(--radius); max-width: 46rem;
}
.otto-tipp .otto { margin-top: -.15rem; }
.otto-wort { min-width: 0; }
.otto-tipp p {
  margin: 0; font-size: .95rem; line-height: 1.6; color: var(--tinte-weich);
}
.otto-tipp b { color: var(--tinte); font-weight: 650; }

@media (max-width: 560px) {
  .otto-tipp { padding: .75rem .85rem .75rem .6rem; gap: .6rem; }
  .otto-tipp .otto { width: 52px; height: 52px; }
  .otto-tipp p { font-size: .9rem; }
}

/* Ein Winken, kein Zappeln: einmal beim Ankommen, dann Ruhe. Wer eine
   Bewegung abgestellt hat, bekommt gar keine — eine Begrüßung ist kein
   Grund, jemandem in die Augen zu springen. */
@media (prefers-reduced-motion: no-preference) {
  .otto-gruss-bild .otto-arm {
    transform-origin: 88px 112px;
    animation: otto-winken 2.4s ease-in-out 2;
  }
}
@keyframes otto-winken {
  0%, 60%, 100% { transform: rotate(0deg); }
  70%           { transform: rotate(-13deg); }
  80%           { transform: rotate(6deg); }
  90%           { transform: rotate(-9deg); }
}

/* --- Der Slogan ----------------------------------------------------------- */
.buehne-slogan {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(1.25rem, .95rem + 1.1vw, 1.7rem);
  line-height: 1.3; letter-spacing: -.012em;
  color: var(--tinte); margin: .9rem 0 1rem; max-width: 32ch;
  text-wrap: balance;
}

/* --- Schallsignale --------------------------------------------------------

   Die Punkt-Strich-Schrift wird selbst gezeichnet: ein Kreis fuer den kurzen
   Ton, ein Balken fuer den langen, beide auf derselben Zeitachse. Sechs
   Pixel je Sekunde — mehr, und das laengste Signal passt nicht mehr auf ein
   320 Pixel breites Telefon.

   Der leuchtende Ton bekommt die Akzentfarbe und wird nicht groesser: Ein
   wachsender Punkt verschoebe die ganze Zeile, waehrend man hinhoert.
   -------------------------------------------------------------------------- */

.schall-gruppe {
  margin: 1.8rem 0 .6rem; font-size: 1rem; color: var(--tinte-weich);
  text-transform: none; letter-spacing: 0;
}
.schall-gruppe:first-child { margin-top: 0; }

.schall-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.schall-zeile {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding: .7rem .85rem; border-radius: var(--radius-klein);
  background: var(--papier-tief); border: 1px solid var(--linie-fein);
}
.schall-bild { overflow-x: auto; max-width: 100%; flex: 0 1 auto; min-width: 0; }
/* Die Zeichnung traegt ihre Breite als Attribut, damit sie ohne CSS stimmt,
   und skaliert hier herunter, wo der Platz fehlt. „height: auto" ist dabei
   nicht schmueckend: Ohne sie wird nur die Breite gestaucht und die Toene
   werden oval. */
.schall-schrift { max-width: 100%; height: auto; }
.schall-worte { flex: 1 1 12rem; min-width: 0; }
.schall-worte b { display: block; font-weight: 600; line-height: 1.35; }
.schall-muster, .schall-takt {
  display: block; font-size: .84rem; color: var(--tinte-leise);
}
.schall-zeile .knopf { flex: 0 0 auto; }

.schall-schrift { display: block; }
.schall-taste .schall-schrift { flex: 0 1 auto; min-width: 0; }
.schall-ton { fill: var(--tinte); transition: fill var(--tempo); }
.schall-ton[data-an="ja"] { fill: var(--akzent); }
.schall-schlag { stroke: var(--papier-tief); stroke-width: 1.5; }

/* --- Die Runde ------------------------------------------------------------ */

.schall-frage { margin: 0 0 .6rem; font-weight: 600; }
.schall-bedeutung {
  margin: 0 0 1rem; font-size: 1.15rem; line-height: 1.4; color: var(--tinte);
}

/* Der Balken leuchtet mit jedem Ton mit. Er ist die ganze Barrierefreiheit
   dieser Seite: Wer nichts hoert, sieht dieselbe Folge. */
.schall-lampe {
  height: 3.2rem; border-radius: var(--radius-klein);
  background: var(--papier-tief); border: 1px solid var(--linie);
  transition: background var(--tempo), border-color var(--tempo);
  margin-bottom: .9rem;
}
.schall-lampe[data-an="ja"] {
  background: var(--akzent); border-color: var(--akzent);
}
.schall-leise { font-size: .85rem; color: var(--tinte-leise); margin: .6rem 0 0; }
.schall-nochmal { margin-top: 0; }

/* Platz fuer vier Tasten, bevor sie da sind. Die Runde wird aus einer
   JSON-Datei gebaut; ohne diese Hoehe rueckt beim Laden alles darunter nach
   unten. min-height polstert nur nach oben — eine hoehere Taste (mit
   Zeichnung darin) schiebt trotzdem nichts weg, weil sie ohnehin waechst. */
#schall-auswahl {
  display: grid; gap: .55rem; margin-top: 1.1rem; min-height: 13.4rem;
}
.schall-taste {
  font: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .75rem .9rem; border-radius: var(--radius-klein);
  border: 1px solid var(--linie); background: var(--papier-hoch);
  color: var(--tinte); line-height: 1.4;
  transition: border-color var(--tempo), background var(--tempo);
}
.schall-taste:hover:enabled { border-color: var(--tinte-leise); }
.schall-taste:disabled { cursor: default; }
.schall-nr {
  flex: 0 0 1.6rem; height: 1.6rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--papier-tief); color: var(--tinte-leise);
  font-size: .82rem; font-variant-numeric: tabular-nums;
}
.schall-text { flex: 1 1 8rem; min-width: 0; }
.schall-taste[data-lage="richtig"] {
  background: var(--gruen-hell); border-color: var(--gruen); color: var(--gruen);
}
.schall-taste[data-lage="falsch"] {
  background: var(--rot-hell); border-color: var(--rot); color: var(--rot);
}
.schall-taste[data-lage] .schall-ton { fill: currentColor; }

/* Wie beim Kursrechnen: Die Urteilszeile steht von Anfang an da und wird
   gefuellt, nicht eingeschoben. Sonst rutscht die Frage beim Antworten weg. */
#schall-urteil {
  min-height: 3.2rem; display: flex; align-items: center; flex-wrap: wrap;
  gap: .5rem; margin: 1rem 0 0; padding: .6rem .85rem;
  border-radius: var(--radius-klein); font-size: .95rem;
  background: var(--papier-tief); color: var(--tinte-leise);
  border-left: 3px solid var(--linie);
}
#schall-urteil[data-lage="richtig"] {
  background: var(--gruen-hell); color: var(--gruen); border-left-color: var(--gruen);
}
#schall-urteil[data-lage="falsch"] {
  background: var(--rot-hell); color: var(--rot); border-left-color: var(--rot);
}
.schall-warum { flex: 1 1 14rem; }
.schall-quelle { font-size: .85rem; }
.schall-zwilling { flex: 1 1 100%; font-size: .88rem; }
.schall-weiter { margin-left: auto; }
.schall-platzhalter { color: var(--tinte-leise); }

.schall-leer, .schall-zahlen { color: var(--tinte-weich); margin: 0; font-size: .95rem; }
.schall-zahlen { font-variant-numeric: tabular-nums; margin-bottom: .4rem; }
.schall-wackelig {
  margin: 0; padding-left: 1.2rem; color: var(--tinte-leise); font-size: .9rem;
  line-height: 1.6;
}

.filter-gruppe { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.filter-titel { font-size: .82rem; color: var(--tinte-leise); }

@media (max-width: 480px) {
  .schall-zeile { gap: .5rem; }
  .schall-worte { flex-basis: 100%; }
  .schall-weiter { margin-left: 0; width: 100%; }
}

/* --- Die Probefrage -------------------------------------------------------
   Sie ersetzt die frühere Vorführung. Der Kasten hat eine Mindesthöhe, weil
   sein Inhalt beim Laden getauscht wird — ohne die reservierte Höhe wäre
   genau hier der Sprung, den tools/laden_pruefen.mjs sonst überall
   verhindert. */
.probefrage {
  background: var(--papier-hoch);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.1rem 1.2rem 1.3rem;
  min-height: 30rem;
}
.probefrage-kopf { margin-bottom: .8rem; }
.probefrage-marke {
  font-family: 'Inter', sans-serif; font-size: .7rem; font-weight: 680;
  text-transform: uppercase; letter-spacing: .1em; color: var(--akzent);
}
.probefrage .frage-karte {
  border: 0; box-shadow: none; padding: 0; background: none;
}
.probefrage-text {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.12rem; line-height: 1.4; margin: 0 0 1rem; color: var(--tinte);
}
.probefrage-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.probefrage-liste li {
  border: 1.5px solid var(--linie); border-radius: var(--radius-klein);
  padding: .7rem .9rem; font-size: .95rem; line-height: 1.45;
  background: var(--papier);
}
.probefrage-hinweis {
  margin: 1rem 0 0; font-size: .88rem; color: var(--tinte-weich);
}
.probefrage-fuss .knopf-reihe { margin-top: .8rem; }

@media (max-width: 940px) {
  .probefrage { min-height: 26rem; }
  .otto-gruss { max-width: none; }
}

@media print {
  .kopf, .fuss, .werbeplatz, .bogen-fuss, .navi-schalter, .sprungmarke,
  .filterband, .suchfeld, .knopf-reihe, .hinweis, #tafel-werkzeuge,
  .werkzeugfach, .merken, .frage-werkzeuge {
    display: none !important;
  }

  body { background: #fff; color: #000; font-size: 10.5pt; }
  main { padding-bottom: 0; }
  .huelle, .huelle-schmal { width: 100%; }

  .karte, .frage-karte, .tafel {
    box-shadow: none; border: 1px solid #bbb; break-inside: avoid;
  }

  /* Lernmodus: die Fragen als Skript, ohne Bedienelemente. */
  .lernblock { border: 0; box-shadow: none; padding: 0; margin-bottom: 1.2rem; }
  .lernblock > summary::after, .lernblock-fuss { display: none !important; }
  .lernblock-name { font-size: 13pt; }
  .lernfrage-andere { display: none; }
  .lernfrage-antwort { background: none; border-left: 2px solid #666; }

  /* Die Erklaerung wird mitgedruckt — sie ist der halbe Grund, den Abschnitt
     ueberhaupt auszudrucken. Der Hinweis auf ihre Herkunft bleibt dabei
     stehen: Auf Papier ist erst recht nicht zu erkennen, was amtlich ist und
     was nicht. */
  .erklaerung {
    background: none; border: 0; border-left: 2px solid #bbb;
    padding: 0 0 0 .6rem; break-inside: avoid;
  }
  .erklaerung-marke {
    background: none !important; color: #000 !important;
    padding: 0; margin-right: .35rem;
  }
  .erklaerung-marke::after { content: ':'; }
  .erklaerung-herkunft { font-size: 8pt; color: #555; border-top: 0; padding-top: .2rem; }

  /* Lerntafeln als Spickzettel: mehr Zeichen je Seite, kein Grauschleier. */
  .tafel-raster { grid-template-columns: repeat(4, 1fr); gap: .5rem; }
  .tafel-bild { background: #fff; min-height: 0; padding: .4rem; }
  .tafel-bild img { max-height: 74px; }
  .tafel-text { padding: .4rem .5rem .5rem; font-size: 8.5pt; }
  .tafel-text a { display: none; }
  .tafel-gruppe { break-inside: auto; }
  .tafel-gruppe h2 { break-after: avoid; font-size: 13pt; }

  a[href^="http"]::after {
    content: ' (' attr(href) ')'; font-size: 8pt; color: #555;
  }
  a[href^="#"]::after, .tafel-text a::after { content: ''; }

  /* Fragenseiten als Spickzettel: was am Bildschirm fuehrt, fuehrt auf
     Papier nicht. Brotkrumen, Knopfreihen und der Werbeplatz sind Wege,
     und ein Blatt Papier hat keine. */
  .brotkrumen, .knopf-reihe, .abschnitt-karte .abschnitt-zahl { display: none; }
  .vorspann { font-size: 10.5pt; color: #333; }
  .quellenzeile { font-size: 8.5pt; color: #555; }
  .lernfrage-andere { display: block; }
  .lernfrage-andere[open] summary { color: #555; }

  @page { margin: 14mm; }
}

/* --- Lichterführung -------------------------------------------------------

   Die Zeichnung ist das Gegenteil der amtlichen Abbildung: kein Schiff, nur
   die Lichter. Wer nachts etwas entgegenkommen sieht, sieht auch kein Schiff.

   Der Grund bleibt in beiden Farbschemata dunkel, und das ist keine
   Nachlässigkeit: Ein rotes Licht auf weißem Papier ist ein roter Punkt, ein
   rotes Licht auf Schwarz ist ein Licht. Deshalb stehen die fünf Farben als
   feste Werte im Skript und nicht als Variablen des Stilblatts — es gibt
   keine helle Fassung von „rot".

   Jedes Licht besteht aus zwei Kreisen: einem weichen Hof und dem Punkt
   darin. Ohne den Hof sieht ein weißes Licht auf schwarzem Grund aus wie ein
   Loch im Papier.
   -------------------------------------------------------------------------- */

.lichter-bild {
  display: block; width: 100%; max-width: 190px; height: auto;
  border-radius: var(--radius-klein);
}
.lichter-grund { fill: #10141c; }
.lichter-deck { fill: #ffffff; opacity: .16; }
.lichter-hof { opacity: .22; }
.lichter-punkt { stroke: rgba(0, 0, 0, .35); stroke-width: .6; }

.lichter-gruppe {
  margin: 1.8rem 0 .6rem; font-size: 1rem; color: var(--tinte-weich);
  text-transform: none; letter-spacing: 0;
}
.lichter-gruppe:first-child { margin-top: 0; }

.lichter-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.lichter-zeile {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding: .7rem .85rem; border-radius: var(--radius-klein);
  background: var(--papier-tief); border: 1px solid var(--linie-fein);
}
.lichter-zeile .lichter-bild { flex: 0 0 84px; width: 84px; }
.lichter-zeilentext { flex: 1 1 14rem; min-width: 0; }
.lichter-zeilentext b { display: block; font-weight: 600; line-height: 1.35; }
.lichter-worte, .lichter-schein {
  display: block; font-size: .84rem; color: var(--tinte-leise);
}

/* --- Die Runde ------------------------------------------------------------ */

.lichter-frage { margin: 0 0 .6rem; font-weight: 600; }
.lichter-bedeutung {
  margin: 0 0 1rem; font-size: 1.15rem; line-height: 1.4; color: var(--tinte);
}

/* Beide Kästen haben eine Mindesthöhe und werden gefüllt, nicht eingefügt.
   Die Runde entsteht aus einer JSON-Datei; ohne die reservierte Höhe rückt
   beim Laden alles darunter nach unten, und auf einem Telefon springt die
   Frage unter dem Daumen weg. Die Höhe ist am größeren der beiden
   Richtungen gemessen — „Bedeutung → Bild" trägt vier Zeichnungen. */
#lichter-buehne { min-height: 13.2rem; }
#lichter-auswahl {
  display: grid; gap: .55rem; margin-top: 1.1rem; min-height: 18.6rem;
}
.lichter-taste {
  font: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .75rem .9rem; border-radius: var(--radius-klein);
  border: 1px solid var(--linie); background: var(--papier-hoch);
  color: var(--tinte); line-height: 1.4;
  transition: border-color var(--tempo), background var(--tempo);
}
.lichter-taste:hover:enabled { border-color: var(--tinte-leise); }
.lichter-taste:disabled { cursor: default; }
.lichter-taste .lichter-bild { flex: 0 0 62px; width: 62px; }
.lichter-nr {
  flex: 0 0 1.6rem; height: 1.6rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--papier-tief); color: var(--tinte-leise);
  font-size: .82rem; font-variant-numeric: tabular-nums;
}
.lichter-text { flex: 1 1 8rem; min-width: 0; }
.lichter-taste[data-lage="richtig"] {
  background: var(--gruen-hell); border-color: var(--gruen); color: var(--gruen);
}
.lichter-taste[data-lage="falsch"] {
  background: var(--rot-hell); border-color: var(--rot); color: var(--rot);
}

#lichter-urteil {
  min-height: 3.2rem; display: flex; align-items: center; flex-wrap: wrap;
  gap: .5rem; margin: 1rem 0 0; padding: .6rem .85rem;
  border-radius: var(--radius-klein); font-size: .95rem;
  background: var(--papier-tief); color: var(--tinte-leise);
  border-left: 3px solid var(--linie);
}
#lichter-urteil[data-lage="richtig"] {
  background: var(--gruen-hell); color: var(--gruen); border-left-color: var(--gruen);
}
#lichter-urteil[data-lage="falsch"] {
  background: var(--rot-hell); color: var(--rot); border-left-color: var(--rot);
}
.lichter-warum { flex: 1 1 14rem; }
.lichter-quelle { font-size: .85rem; }
.lichter-zwilling { flex: 1 1 100%; font-size: .88rem; }
.lichter-weiter { margin-left: auto; }
.lichter-platzhalter { color: var(--tinte-leise); }

.lichter-leer, .lichter-quote, .lichter-schwach {
  color: var(--tinte-weich); margin: 0; font-size: .95rem;
}
.lichter-quote { font-variant-numeric: tabular-nums; margin-bottom: .4rem; }

@media (max-width: 480px) {
  .lichter-zeile { gap: .5rem; }
  .lichter-zeilentext { flex-basis: 100%; }
  .lichter-weiter { margin-left: 0; width: 100%; }
}

/* --- Feuerkennungen -------------------------------------------------------

   Der Streifen ist auf der Zeitachse gezeichnet: Vierzehn Pixel je Sekunde,
   für jede Phase derselbe Maßstab. Eine Lichterscheinung von drei Sekunden
   ist wirklich fünfmal so breit wie eine von 0,6 — ein Balken mit fester
   Breite neben einem anderen zeigte das Gegenteil dessen, was gelernt
   werden soll.

   Der Grund bleibt in beiden Farbschemata dunkel: Eine Feuerkennung ist
   das, was man nachts sieht, und ein weißer Balken auf weißem Papier ist
   kein Licht.

   Die Lampe wächst beim Blinken nicht. Ein wachsender Kreis verschöbe die
   ganze Zeile, während man hinsieht.
   -------------------------------------------------------------------------- */

.feuer-bild { overflow-x: auto; max-width: 100%; }
.feuer-streifen { display: block; max-width: 100%; height: auto; }
.feuer-nacht { fill: #10141c; }
.feuer-licht { fill: #ffffff; }
.feuer-licht[data-farbe="rot"] { fill: #ee3b4e; }
.feuer-licht[data-farbe="gruen"] { fill: #2fbc6d; }
.feuer-licht[data-an="ja"] { stroke: var(--akzent); stroke-width: 1.5; }

.feuer-lampe {
  height: 3.2rem; border-radius: var(--radius-klein);
  background: #10141c; border: 1px solid var(--linie);
  transition: background var(--tempo);
  margin-bottom: .9rem;
}
.feuer-lampe[data-an="ja"] { background: #ffffff; }
.feuer-lampe[data-an="ja"][data-farbe="rot"] { background: #ee3b4e; }
.feuer-lampe[data-an="ja"][data-farbe="gruen"] { background: #2fbc6d; }
/* Wer weniger Bewegung eingestellt hat, bekommt gar kein Blinken. Der
   Kasten bleibt trotzdem stehen, damit nichts springt — und der Streifen
   darunter trägt dieselbe Folge. */
.feuer-lampe[data-an="ruhig"] {
  background: repeating-linear-gradient(90deg, #10141c 0 10px,
                                        #2a3140 10px 20px);
}

.feuer-gruppe {
  margin: 1.8rem 0 .6rem; font-size: 1rem; color: var(--tinte-weich);
  text-transform: none; letter-spacing: 0;
}
.feuer-gruppe:first-child { margin-top: 0; }
.feuer-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.feuer-zeile {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding: .7rem .85rem; border-radius: var(--radius-klein);
  background: var(--papier-tief); border: 1px solid var(--linie-fein);
}
.feuer-zeilentext { flex: 1 1 14rem; min-width: 0; }
.feuer-zeilentext b { display: block; font-weight: 600; line-height: 1.35; }
.feuer-worte, .feuer-verbuergt {
  display: block; font-size: .84rem; color: var(--tinte-leise);
}

.feuer-frage { margin: 0 0 .6rem; font-weight: 600; }
.feuer-bedeutung {
  margin: 0 0 1rem; font-size: 1.15rem; line-height: 1.4; color: var(--tinte);
}
.feuer-leise { font-size: .85rem; color: var(--tinte-leise); margin: .6rem 0 0; }

#feuer-buehne { min-height: 11.5rem; }
#feuer-auswahl {
  display: grid; gap: .55rem; margin-top: 1.1rem; min-height: 16.4rem;
}
.feuer-taste {
  font: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .75rem .9rem; border-radius: var(--radius-klein);
  border: 1px solid var(--linie); background: var(--papier-hoch);
  color: var(--tinte); line-height: 1.4;
  transition: border-color var(--tempo), background var(--tempo);
}
.feuer-taste:hover:enabled { border-color: var(--tinte-leise); }
.feuer-taste:disabled { cursor: default; }
.feuer-taste .feuer-bild { flex: 0 1 auto; min-width: 0; }
.feuer-nr {
  flex: 0 0 1.6rem; height: 1.6rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--papier-tief); color: var(--tinte-leise);
  font-size: .82rem; font-variant-numeric: tabular-nums;
}
.feuer-text { flex: 1 1 8rem; min-width: 0; }
.feuer-taste[data-lage="richtig"] {
  background: var(--gruen-hell); border-color: var(--gruen); color: var(--gruen);
}
.feuer-taste[data-lage="falsch"] {
  background: var(--rot-hell); border-color: var(--rot); color: var(--rot);
}

#feuer-urteil {
  min-height: 3.2rem; display: flex; align-items: center; flex-wrap: wrap;
  gap: .5rem; margin: 1rem 0 0; padding: .6rem .85rem;
  border-radius: var(--radius-klein); font-size: .95rem;
  background: var(--papier-tief); color: var(--tinte-leise);
  border-left: 3px solid var(--linie);
}
#feuer-urteil[data-lage="richtig"] {
  background: var(--gruen-hell); color: var(--gruen); border-left-color: var(--gruen);
}
#feuer-urteil[data-lage="falsch"] {
  background: var(--rot-hell); color: var(--rot); border-left-color: var(--rot);
}
.feuer-warum { flex: 1 1 14rem; }
.feuer-quelle { font-size: .85rem; }
.feuer-zwilling { flex: 1 1 100%; font-size: .88rem; }
.feuer-weiter { margin-left: auto; }
.feuer-platzhalter { color: var(--tinte-leise); }

.feuer-leer, .feuer-quote, .feuer-schwach {
  color: var(--tinte-weich); margin: 0; font-size: .95rem;
}
.feuer-quote { font-variant-numeric: tabular-nums; margin-bottom: .4rem; }

@media (max-width: 480px) {
  .feuer-zeile { gap: .5rem; }
  .feuer-zeilentext { flex-basis: 100%; }
  .feuer-weiter { margin-left: 0; width: 100%; }
}

/* --- Tonnen und Fahrwasser -------------------------------------------------

   Zwei Zeichnungen. Die Tonne selbst steht auf hellem Grund, weil man eine
   Tonne bei Tage sieht — anders als die Lichterführung, deren Grund immer
   schwarz ist. Und die Szene von oben, in der das eigene Boot unten steht
   und die Tonne voraus.

   Die Farben der Tonnen stehen als feste Werte im Skript und nicht hier:
   Es gibt keine helle und keine dunkle Fassung von „rot". Was hier steht,
   ist alles, was dem Thema folgen darf — der Umriss, das Wasser, der Pfeil.

   Warum die Szene eine feste Höhe hat: Sie wird nach der Antwort ersetzt,
   nicht ergänzt. Eine Szene, die dabei um ein paar Pixel wüchse, schöbe die
   Antwortmöglichkeiten unter dem Daumen weg.
   -------------------------------------------------------------------------- */

.tonnen-bild {
  display: block; width: 100%; max-width: 120px; height: auto;
}
.tonnen-gross { max-width: 150px; margin: 0 auto; }
.tonnen-riss { stroke: var(--tinte-leise); stroke-width: 1.4; }
.tonnen-stiel { stroke: var(--tinte-leise); stroke-width: 1.4; }
.tonnen-wasser {
  stroke: var(--tinte-leise); stroke-width: 1.6; opacity: .45;
  stroke-dasharray: 5 3;
}

.tonnen-szene {
  display: block; width: 100%; max-width: 340px; height: auto;
  margin: .8rem auto 0;
}
.tonnen-see { fill: var(--papier-tief); stroke: var(--linie-fein); }
.tonnen-boot {
  fill: var(--akzent); stroke: var(--tinte-leise); stroke-width: 1.2;
}
.tonnen-pfeil {
  stroke: var(--tinte-leise); stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.tonnen-marke {
  fill: var(--tinte-weich); font-size: 11px; font-family: inherit;
}

.tonnen-gruppe {
  margin: 1.8rem 0 .6rem; font-size: 1rem; color: var(--tinte-weich);
  text-transform: none; letter-spacing: 0;
}
.tonnen-gruppe:first-child { margin-top: 0; }

.tonnen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.tonnen-zeile {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding: .7rem .85rem; border-radius: var(--radius-klein);
  background: var(--papier-tief); border: 1px solid var(--linie-fein);
}
.tonnen-zeile .tonnen-bild { flex: 0 0 58px; width: 58px; }
.tonnen-zeilentext { flex: 1 1 14rem; min-width: 0; }
.tonnen-zeilentext b { display: block; font-weight: 600; line-height: 1.35; }
.tonnen-worte, .tonnen-schein, .tonnen-feuer {
  display: block; font-size: .84rem; color: var(--tinte-leise);
}

/* --- Die Runde ------------------------------------------------------------ */

.tonnen-frage { margin: 0 0 .4rem; font-weight: 600; }
.tonnen-lage { margin: 0 0 .2rem; color: var(--tinte-weich); }
.tonnen-bedeutung {
  margin: 0 0 1rem; font-size: 1.15rem; line-height: 1.4; color: var(--tinte);
}

/* Gemessen an der größten der drei Fragearten — „Bedeutung → Tonne" trägt
   vier Zeichnungen, die Szene ist am höchsten. */
#tonnen-buehne { min-height: 16.4rem; }
#tonnen-auswahl {
  display: grid; gap: .55rem; margin-top: 1.1rem; min-height: 16.4rem;
}
.tonnen-taste {
  font: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .75rem .9rem; border-radius: var(--radius-klein);
  border: 1px solid var(--linie); background: var(--papier-hoch);
  color: var(--tinte); line-height: 1.4;
  transition: border-color var(--tempo), background var(--tempo);
}
.tonnen-taste:hover:enabled { border-color: var(--tinte-leise); }
.tonnen-taste:disabled { cursor: default; }
.tonnen-taste .tonnen-bild { flex: 0 0 48px; width: 48px; }
.tonnen-nr {
  flex: 0 0 1.6rem; height: 1.6rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--papier-tief); color: var(--tinte-leise);
  font-size: .82rem; font-variant-numeric: tabular-nums;
}
.tonnen-text { flex: 1 1 8rem; min-width: 0; }
.tonnen-taste[data-lage="richtig"] {
  background: var(--gruen-hell); border-color: var(--gruen); color: var(--gruen);
}
.tonnen-taste[data-lage="falsch"] {
  background: var(--rot-hell); border-color: var(--rot); color: var(--rot);
}

#tonnen-urteil {
  min-height: 3.2rem; display: flex; align-items: center; flex-wrap: wrap;
  gap: .5rem; margin: 1rem 0 0; padding: .6rem .85rem;
  border-radius: var(--radius-klein); font-size: .95rem;
  background: var(--papier-tief); color: var(--tinte-leise);
  border-left: 3px solid var(--linie);
}
#tonnen-urteil[data-lage="richtig"] {
  background: var(--gruen-hell); color: var(--gruen); border-left-color: var(--gruen);
}
#tonnen-urteil[data-lage="falsch"] {
  background: var(--rot-hell); color: var(--rot); border-left-color: var(--rot);
}
.tonnen-warum { flex: 1 1 14rem; }
.tonnen-quelle { font-size: .85rem; }
.tonnen-zwilling { flex: 1 1 100%; font-size: .88rem; }
.tonnen-weiter { margin-left: auto; }
.tonnen-platzhalter { color: var(--tinte-leise); }

/* Die Gegenprobe: dieselbe Tonne, die andere Fahrtrichtung. Sie steht in
   voller Breite unter dem Urteil, weil sie die eigentliche Lehre ist und
   nicht eine Fußnote daneben. */
.tonnen-gegenprobe {
  flex: 1 1 100%; margin-top: .6rem; padding: .7rem .85rem;
  border-radius: var(--radius-klein); background: var(--papier-hoch);
  border: 1px solid var(--linie-fein); color: var(--tinte-weich);
  font-size: .9rem;
}
.tonnen-gegenprobe b { display: block; color: var(--tinte); }

.tonnen-leer, .tonnen-quote, .tonnen-schwach {
  color: var(--tinte-weich); margin: 0; font-size: .95rem;
}
.tonnen-quote { font-variant-numeric: tabular-nums; margin-bottom: .4rem; }

@media (max-width: 480px) {
  .tonnen-zeile { gap: .5rem; }
  .tonnen-zeilentext { flex-basis: 100%; }
  .tonnen-weiter { margin-left: 0; width: 100%; }
}

/* --- Ausweichregeln --------------------------------------------------------

   Eine Lage von oben: das eigene Boot unten, das andere Fahrzeug in seiner
   Peilung, beide Kurse als Linien auf denselben Punkt zu. Die Kurslinien
   sind der Grund, warum die Szene mehr sagt als zwei Symbole nebeneinander —
   man sieht, dass sich die Wege schneiden, und wo.

   Das eigene Boot ist in der Akzentfarbe, das andere in Tinte: Wer die
   Zeichnung nur überfliegt, muss auf einen Blick wissen, welches er selbst
   ist. Die Szene hat eine feste Höhe, weil sie nach der Antwort ersetzt
   wird — eine, die dabei wüchse, schöbe die Tasten unter dem Daumen weg.
   -------------------------------------------------------------------------- */

.ausweichen-szene {
  display: block; width: 100%; max-width: 400px; height: auto;
  margin: .8rem auto 0;
}
.ausweichen-see { fill: var(--papier-tief); stroke: var(--linie-fein); }
.ausweichen-kurs {
  stroke: var(--tinte-leise); stroke-width: 1.2; opacity: .5;
  stroke-dasharray: 4 3;
}
.ausweichen-rumpf {
  fill: var(--tinte-weich); stroke: var(--tinte); stroke-width: 1;
}
.ausweichen-ich .ausweichen-rumpf { fill: var(--akzent); }
.ausweichen-segel {
  fill: var(--papier-hoch); stroke: var(--tinte); stroke-width: .8;
}
.ausweichen-wind {
  stroke: var(--tinte-leise); stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.ausweichen-marke {
  fill: var(--tinte-weich); font-size: 11px; font-family: inherit;
}
.ausweichen-marke-ich {
  fill: var(--akzent); font-size: 11px; font-family: inherit;
  font-weight: 600;
}
.ausweichen-urteilsmarke {
  fill: var(--tinte); font-size: 12px; font-family: inherit;
  font-weight: 600;
}

.ausweichen-gruppe {
  margin: 1.8rem 0 .6rem; font-size: 1rem; color: var(--tinte-weich);
  text-transform: none; letter-spacing: 0;
}
.ausweichen-gruppe:first-child { margin-top: 0; }
.ausweichen-liste {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem;
}
.ausweichen-zeile {
  padding: .7rem .85rem; border-radius: var(--radius-klein);
  background: var(--papier-tief); border: 1px solid var(--linie-fein);
}
.ausweichen-zeile b { display: block; font-weight: 600; line-height: 1.4; }
.ausweichen-schein {
  display: block; font-size: .84rem; color: var(--tinte-leise);
}

/* --- Die Runde ------------------------------------------------------------ */

.ausweichen-frage { margin: 0 0 .4rem; font-weight: 600; }
.ausweichen-lage { margin: 0; color: var(--tinte-weich); line-height: 1.5; }

#ausweichen-buehne { min-height: 19rem; }
#ausweichen-auswahl {
  display: grid; gap: .55rem; margin-top: 1.1rem; min-height: 10.6rem;
}
.ausweichen-taste {
  font: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .75rem .9rem; border-radius: var(--radius-klein);
  border: 1px solid var(--linie); background: var(--papier-hoch);
  color: var(--tinte); line-height: 1.4;
  transition: border-color var(--tempo), background var(--tempo);
}
.ausweichen-taste:hover:enabled { border-color: var(--tinte-leise); }
.ausweichen-taste:disabled { cursor: default; }
.ausweichen-nr {
  flex: 0 0 1.6rem; height: 1.6rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--papier-tief); color: var(--tinte-leise);
  font-size: .82rem; font-variant-numeric: tabular-nums;
}
.ausweichen-text { flex: 1 1 8rem; min-width: 0; }
.ausweichen-taste[data-lage="richtig"] {
  background: var(--gruen-hell); border-color: var(--gruen); color: var(--gruen);
}
.ausweichen-taste[data-lage="falsch"] {
  background: var(--rot-hell); border-color: var(--rot); color: var(--rot);
}

#ausweichen-urteil {
  min-height: 3.2rem; display: flex; align-items: center; flex-wrap: wrap;
  gap: .5rem; margin: 1rem 0 0; padding: .6rem .85rem;
  border-radius: var(--radius-klein); font-size: .95rem;
  background: var(--papier-tief); color: var(--tinte-leise);
  border-left: 3px solid var(--linie);
}
#ausweichen-urteil[data-lage="richtig"] {
  background: var(--gruen-hell); color: var(--gruen); border-left-color: var(--gruen);
}
#ausweichen-urteil[data-lage="falsch"] {
  background: var(--rot-hell); color: var(--rot); border-left-color: var(--rot);
}
.ausweichen-warum { flex: 1 1 14rem; }
.ausweichen-quelle { font-size: .85rem; }
.ausweichen-kurshalten { flex: 1 1 100%; font-size: .88rem; }
.ausweichen-weiter { margin-left: auto; }
.ausweichen-platzhalter { color: var(--tinte-leise); }

.ausweichen-leer, .ausweichen-quote, .ausweichen-schwach {
  color: var(--tinte-weich); margin: 0; font-size: .95rem;
}
.ausweichen-quote { font-variant-numeric: tabular-nums; margin-bottom: .4rem; }

@media (max-width: 480px) {
  .ausweichen-weiter { margin-left: 0; width: 100%; }
}

/* --- Die Karteikarte als fester Rahmen -------------------------------------

   Sie war einmal ein Stapel Absätze, und das war der schlimmste Fehler
   dieser Seite. Gemessen auf 390 × 844: Beim Aufdecken wuchs die Karte von
   313 auf 1243 Pixel, und „Gewusst" stand danach bei 1671 — 827 Pixel
   unterhalb des Bildschirms. Der Knopf war nicht schwer erreichbar, er war
   nicht da, und die Seite hat das mit zwei Sprüngen je Frage ausgeglichen.

   Drei Zeilen, deren Höhe sich nicht ändert: Frage oben, Knopf unten, in
   der Mitte das, was wechselt. Beim Umdrehen bewegt sich nichts mehr — der
   Daumen bleibt liegen, wo er liegt.

   `minmax(0, 1fr)` und nicht `1fr`: Ein Rasterelement hat von sich aus die
   Mindestgröße seines Inhalts, und eine lange Erklärung sprengte damit den
   Rahmen, statt in ihm zu scrollen. Genau die Zeile macht den Unterschied
   zwischen „scrollt innen" und „schiebt den Fuß hinaus".

   Die Höhe folgt dem Fenster und nicht dem Inhalt, mit Grenzen nach beiden
   Seiten: Auf einem kurzen Schirm bleibt sie lesbar, auf einem hohen wird
   die Karte kein Plakat. `svh` statt `vh`, weil die Adressleiste eines
   Telefons `vh` zu groß macht und der Fuß dann doch unter der Kante läge.
   -------------------------------------------------------------------------- */

.karteikarte {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: clamp(23rem, calc(100svh - 12rem), 42rem);
  overflow: hidden;
}

/* Und der Browser darf auch nicht von sich aus scrollen.

   Beim Umdrehen wird die Karte nicht umgebaut, sondern ersetzt: Der Behälter
   wird geleert und neu gefüllt. In dem Augenblick dazwischen ist die Seite
   kürzer, und Chrome gleicht das mit „scroll anchoring" aus — es verschiebt
   den Scrollstand, damit der sichtbare Inhalt stehen bleibt. Gemessen: 71
   Pixel, ohne einen einzigen Scrollaufruf im Programm. Die Spur war leer,
   und genau deshalb hat es so lange gedauert, das zu finden.

   `overflow-anchor: none` schaltet diese Hilfe für den Fragenbereich ab. Sie
   ist hier nichts wert: Die Karte hat eine feste Höhe, es gibt nichts
   auszugleichen.

   DAS REICHTE NICHT, UND DER REST STAND IN DER PRÜFUNG

   `overflow-anchor: none` nimmt ein Element und seinen Inhalt aus der
   Ankerwahl — nicht die Seite. In der Prüfung wurde deshalb weiter
   ausgeglichen, nur mit einem Anker außerhalb von `#bogen`, und dort sind
   es keine 71 Pixel: Nach dem Antworten fuhr die Seite auf einem Telefon um
   635 Pixel nach oben, weich über fünfundzwanzig Bilder, in drei bis vier
   von zwanzig Durchgängen — abhängig davon, welche Frage gezogen wurde.

   Gemessen, nicht vermutet. Die Spur war wieder leer: kein
   `window.scrollTo`, kein `scrollBy`, kein `scrollIntoView`, kein
   `scrollTop`, auch nicht über `Element.prototype` — alle instrumentiert.
   Auch ohne jedes Fokussieren sprang es weiter, der Fokus war es also
   nicht. Mit `overflow-anchor: none` auf dem Body: 0 von 20 Sprüngen, und
   das Band klebte dabei viermal so oft (16 statt 4 von 20), weil die Seite
   ja stehenblieb, wo sie stand. Mehr Gelegenheiten, null Sprünge.

   Abgeschaltet wird es nur dort, wo der Inhalt beim Bedienen **ersetzt**
   wird — Üben, Prüfung, Einstufung. Auf einer Leseseite ist Anchoring
   nützlich: Lädt dort ein Bild nach, hält es die Zeile fest, die man gerade
   liest. Hier gibt es nichts festzuhalten, was nicht ohnehin neu ist. */
#bogen { overflow-anchor: none; }
body[data-bereich="ueben"],
body[data-bereich="pruefung"],
body[data-bereich="einstufung"] { overflow-anchor: none; }

.karteikarte .karte-kopf { flex: none; }
.karteikarte .karte-kopf .frage-text { margin-bottom: 0; }

/* Die Mitte ist das Einzige, was scrollt — und sie scrollt in sich.
   `overscroll-behavior: contain` verhindert, dass die Seite mitzieht,
   sobald man am Ende der Erklärung angekommen ist. */
.karteikarte .karte-mitte {
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: 1rem;
  padding-right: .25rem;
  /* Kurze Karten sollen nicht wie ein halb leeres Blatt aussehen: Wo der
     Inhalt den Rahmen nicht füllt, steht er in der Mitte statt oben mit
     einer Handbreit Leere darunter.

     `safe` ist hier das ganze Wort. Zentrierter Inhalt in einem
     Scrollbereich ist der klassische Fehler: Sobald er überläuft, ragt er
     oben hinaus, und der Anfang ist nicht mehr erreichbar — man kann nicht
     nach oben scrollen, wo nichts ist. `safe center` fällt in genau diesem
     Fall auf `start` zurück. Ohne das Wort wäre eine lange Erklärung oben
     abgeschnitten, und zwar unwiederbringlich. */
  display: grid;
  align-content: safe center;
  gap: 1rem;
}
.karteikarte .karte-mitte:focus { outline: none; }
.karteikarte .karte-mitte > :first-child { margin-top: 0; }
.karteikarte .karte-mitte > :last-child { margin-bottom: 0; }

/* Ein Bild darf die Antwort nicht aus dem Rahmen schieben. Auf der
   Vorderseite ist es die Frage und bekommt mehr Platz, auf der Rückseite
   hat man es schon gesehen. */
.karteikarte .karte-mitte .frage-bilder img { max-height: 34svh; }
.karteikarte[data-seite="rueckseite"] .karte-mitte .frage-bilder img {
  max-height: 22svh;
}

.karteikarte .karte-fuss {
  padding-top: 1rem;
  border-top: 1px solid var(--linie-fein);
  margin-top: .2rem;
  /* Beide Seiten sind verschieden hoch: vorne ein Knopf mit Hinweis, hinten
     zwei Knöpfe nebeneinander. Der Fuß hält deshalb eine Höhe, die für
     beides reicht, und richtet seinen Inhalt nach unten aus — so liegt die
     Knopfreihe vorher und nachher an derselben Stelle. */
  min-height: 8.6rem;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.karteikarte .karte-fuss .karte-aufdecken { width: 100%; }
.karteikarte .karte-fuss .karte-hinweis {
  text-align: center; margin: 0 0 .7rem;
}
.karteikarte .karte-fuss .karte-urteil { margin: 0; }

/* Der Rand zeigt an, dass es in der Mitte weitergeht. Ohne ihn sieht eine
   abgeschnittene Erklärung aus wie eine, die zu Ende ist. */
.karteikarte .karte-mitte {
  scrollbar-width: thin;
  scrollbar-color: var(--linie) transparent;
}
.karteikarte .karte-mitte::-webkit-scrollbar { width: 6px; }
.karteikarte .karte-mitte::-webkit-scrollbar-thumb {
  background: var(--linie); border-radius: 100px;
}

/* Sehr niedrige Fenster — ein Telefon quer. Dort ist ein fester Rahmen
   schlechter als ein normaler Fluss: Von 23rem Höhe blieben für die Mitte
   ein paar Zeilen. Dann lieber scrollen als quetschen. */
@media (max-height: 460px) {
  .karteikarte {
    height: auto;
    grid-template-rows: auto auto auto;
    overflow: visible;
  }
  .karteikarte .karte-mitte { overflow-y: visible; }
}