/* ==========================================================================
   Die Lernplattform zum Einbürgerungstest — 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).      */

/* Atkinson Hyperlegible Next (Braille Institute, SIL OFL): gebaut fuer
   Lesbarkeit — 0/O, 1/I/l, c/e sind bewusst unterscheidbar. Das hilft allen,
   die Deutsch als Zweitsprache lesen, und Menschen mit Sehschwaeche.
   Eine Schrift fuer alles, auch Ueberschriften: weniger Laden, ruhigeres Bild. */

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('../fonts/atkinson-hyperlegible-next-latin-400-normal.woff2') format('woff2');
  font-weight: 300 499;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('../fonts/atkinson-hyperlegible-next-latin-ext-400-normal.woff2') format('woff2');
  font-weight: 300 499;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('../fonts/atkinson-hyperlegible-next-latin-600-normal.woff2') format('woff2');
  font-weight: 500 649;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('../fonts/atkinson-hyperlegible-next-latin-ext-600-normal.woff2') format('woff2');
  font-weight: 500 649;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('../fonts/atkinson-hyperlegible-next-latin-700-normal.woff2') format('woff2');
  font-weight: 650 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('../fonts/atkinson-hyperlegible-next-latin-ext-700-normal.woff2') format('woff2');
  font-weight: 650 900;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB;
}

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

:root {
  /* Grundton: tiefes Nachtblau auf warmem Papier */
  --tinte:        #14213d;
  --tinte-weich:  #3d5668;
  --tinte-leise:  #6b8497;
  --papier:       #f8f5f0;
  --papier-hoch:  #ffffff;
  --papier-tief:  #efe9e0;
  --schleier:     248, 245, 240;   /* 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. */
  --grund-lichter:
    radial-gradient(120vw 80vh at 88% -12%, rgba(255, 214, 150, .32), transparent 62%),
    radial-gradient(100vw 70vh at 4% 108%, rgba(150, 199, 224, .28), transparent 60%);
  --knopf-grund:  #14213d;         /* Grundfarbe von .knopf und aktivem Filter */
  --knopf-schrift:#f8f5f0;
  --linie:        #ded5c8;
  --linie-fein:   #ebe4da;

  /* Akzente: Messing, Signalrot, Steuerbordgruen, Backbordrot */
  --messing:      #a9762a;
  --messing-hell: #f3e6cf;
  --gruen:        #1c6b4a;
  --gruen-hell:   #e0f0e7;
  --rot:          #a32218;
  --rot-hell:     #fbe6e3;
  --blau:         #17567f;
  --blau-hell:    #e2eef6;

  /* 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 in Messing, 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: 'Atkinson Hyperlegible Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  font-feature-settings: 'kern' 1, 'liga' 1;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

/* Ueberschriften in derselben Schrift, fett und etwas enger gesetzt. */
h1, h2, h3, h4 {
  font-family: 'Atkinson Hyperlegible Next', -apple-system, 'Segoe UI', sans-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: 700; letter-spacing: -.021em; line-height: 1.08;
}
h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  letter-spacing: -.016em; line-height: 1.16;
}
h3 { font-size: 1.22rem; letter-spacing: -.008em; }
h4 { font-size: 1.05rem; font-family: 'Atkinson Hyperlegible Next', 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(--messing); }

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(--messing);
  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; }

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

.huelle { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }
.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);
  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. */
.kopf {
  position: sticky; top: 0; z-index: 40;
  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: 'Atkinson Hyperlegible Next', sans-serif;
  font-size: 1.14rem; font-weight: 640; letter-spacing: -.018em;
  color: var(--tinte); text-decoration: none; white-space: nowrap;
}
.marke:hover { color: var(--tinte); }
.marke:hover svg { transform: rotate(-14deg); }
.marke svg {
  width: 28px; height: 28px; flex: none; color: var(--messing);
  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(--messing);
  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: 'Atkinson Hyperlegible Next', 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(--messing); 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 Messinglinie oben — dasselbe Detail wie an der Marke. */
  border-top: 3px solid var(--messing);
}
.fuss h4 {
  color: var(--papier); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .12em; margin-bottom: 1rem; font-weight: 640;
  font-family: 'Atkinson Hyperlegible Next', 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(--messing);
  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-messing { background: var(--messing); }
.knopf-messing: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; }
.raster-2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.raster-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
/* 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(--messing-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;
}

/* Die Leinwand liegt hinter allem und wird von see.js bemalt. Sie ist reine
   Dekoration — deshalb aria-hidden im HTML und keine Bedeutung im Text. */
#see {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -2; display: block;
}

/* Ein Schleier ueber dem Wasser, damit die Schrift auf jedem Bildausschnitt
   ruhig steht — Kontrast darf nicht davon abhaengen, wo gerade eine Welle ist. */
.buehne::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    /* waagerecht: deckt die Textspalte, gibt das Wasser rechts frei */
    /* Die Marken liegen weiter rechts als frueher: Neben dem Text steht
       jetzt die Vorfuehrung, und die braucht zwar keinen Schleier — sie
       hat ihren eigenen Grund —, aber 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 Himmel in den Seitenhintergrund uebergehen.
       Er endet bewusst oberhalb der Kimm — sonst waere der Horizont, also
       das, was die Tiefe erst sichtbar macht, unter Papier begraben. */
    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 Schleier von oben kommen statt von der Seite. */
  .buehne::before {
    /* Auf schmalen Schirmen steht der Text ueber dem Wasser statt daneben.
       Der Schleier muss deshalb weiter herunterreichen — Lesbarkeit vor
       Bildwirkung. */
    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 Vorführung 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 Vorführung über beide
   Zeilen. Drei Kästen statt zwei, weil auf einem Telefon die Reihenfolge
   eine andere sein muss: Dort steht die Vorführung 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: 'Atkinson Hyperlegible Next', sans-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(--messing); }
.scheinwahl-kurz {
  display: block; font-family: 'Atkinson Hyperlegible Next', sans-serif;
  font-size: .7rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--messing);
}
.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: 'Atkinson Hyperlegible Next', sans-serif; font-size: .82rem; font-weight: 640;
  color: var(--tinte-weich);
}
.scheinwahl-karte:hover .scheinwahl-pfeil { color: var(--messing); }

.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(--messing);
  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: 'Atkinson Hyperlegible Next', sans-serif;
  font-size: 2.15rem; font-weight: 640; line-height: 1.05;
  letter-spacing: -.02em;
  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(--messing); 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(--messing);
  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(--messing); }

/* --- 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(--messing);
  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(--messing-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; }

/* --- 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(--messing); }
.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(--messing);
}
.naechster p { color: var(--tinte-weich); }
.naechster .knopf { margin-top: .6rem; }

.etappen-block { margin-bottom: 2.8rem; }
.etappen-block h2 {
  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 h2 .zaehler { font-family: 'Atkinson Hyperlegible Next', 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(--messing); color: var(--messing);
}
.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 h3 { margin: 0; font-size: 1.1rem; }
.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(--messing); transform: translateX(3px); }

.etikett-offen     { background: var(--papier-tief);  color: var(--tinte-leise); }
.etikett-begonnen  { background: var(--messing-hell); color: #7d5518; }
.etikett-geschafft { background: var(--gruen-hell);   color: var(--gruen); }
.etikett-sitzt     { background: var(--gruen);        color: #fff; }
:root[data-thema="dunkel"] .etikett-begonnen { color: var(--messing); }
: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(--messing); background: var(--messing-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: 'Atkinson Hyperlegible Next', sans-serif;
  font-size: 1.2rem; font-weight: 620; letter-spacing: -.01em;
}
.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: 'Atkinson Hyperlegible Next', sans-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; }

/* 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(--messing); }
.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(--messing-hell); border-color: var(--messing); color: #7d5518;
}
:root[data-thema="dunkel"] .erfolg-punkte span[data-erreicht="ja"] { color: var(--messing); }

/* --- 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: 'Atkinson Hyperlegible Next', sans-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(--messing-hell); border-color: var(--messing);
}
.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); }

/* --- 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
   das Messing, 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(--messing); }
.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(--messing);
  background: var(--papier-tief);
  border-radius: 0 var(--radius-fein) var(--radius-fein) 0;
  max-width: 62ch;
}
.rationszettel b {
  display: block; font-family: 'Atkinson Hyperlegible Next', sans-serif;
  font-size: .74rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--messing); 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;
}
.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: 'Atkinson Hyperlegible Next', sans-serif;
  font-size: clamp(1.24rem, 1.1rem + .5vw, 1.42rem);
  line-height: 1.36; font-weight: 560; letter-spacing: -.011em;
  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(--messing-hell);
  box-shadow: 0 0 0 2px var(--messing-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: 'Atkinson Hyperlegible Next', 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: 'Atkinson Hyperlegible Next', 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(--messing-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: 'Atkinson Hyperlegible Next', 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
   --messing-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(--messing); }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .erklaerung-merksatz .erklaerung-marke {
    color: var(--messing);
  }
}

.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.

   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. */

@media (max-width: 900px) {
  .bogen-fuss[data-tun="ja"] {
    position: sticky; bottom: 0; z-index: 5;
    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));
    /* Deckend als Rückfall — ein Band, durch das man nichts sieht, ist
       immer noch besser als eines, das man nicht lesen kann. */
    background: var(--papier);
    border-top: 1px solid var(--linie);
    box-shadow: 0 -12px 28px -22px rgba(13, 34, 51, .55);
  }
  :root[data-thema="dunkel"] .bogen-fuss[data-tun="ja"] {
    box-shadow: 0 -12px 28px -18px rgba(0, 0, 0, .65);
  }

  /* 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"] {
      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(--messing); color: var(--messing); }
.merken[aria-pressed="true"] {
  background: var(--messing-hell); border-color: var(--messing); color: #7d5518;
}
:root[data-thema="dunkel"] .merken[aria-pressed="true"] { color: var(--messing); }
.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: 'Atkinson Hyperlegible Next', sans-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(--messing);
  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: 'Atkinson Hyperlegible Next', sans-serif;
  font-size: 1.14rem; line-height: 1.45; margin: .4rem 0 0;
}
.karte-loesung .zaehler { font-family: 'Atkinson Hyperlegible Next', 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: 'Atkinson Hyperlegible Next', sans-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;
  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(--messing-hell); color: #7d5518;
}
.serie b {
  display: block; font-family: 'Atkinson Hyperlegible Next', sans-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(--messing); }

/* 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(--messing);
}
.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(--messing); }
.thema-quote {
  margin-left: auto; font-family: 'Atkinson Hyperlegible Next', 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(--messing); }
.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(--messing); }
.thema[data-ton="schwach"]  .balken i { background: var(--rot); }
.thema-zahlen {
  font-family: 'Atkinson Hyperlegible Next', 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: 'Atkinson Hyperlegible Next', sans-serif; font-size: .78rem; color: var(--tinte-leise);
}
.fach[data-art="nie"] { background: var(--messing-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(--messing); }
/* 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(--messing) 0 4px, var(--messing-hell) 4px 7px);
}
.verlauf-achse {
  display: flex; justify-content: space-between;
  font-family: 'Atkinson Hyperlegible Next', 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: 'Atkinson Hyperlegible Next', 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(--messing);
}

/* --- 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(--messing); }
.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(--messing); }
.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(--messing);
  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: 'Atkinson Hyperlegible Next', 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: 'Atkinson Hyperlegible Next', 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(--messing); opacity: .28; }
.kalender-spalte i[data-stufe="2"] { background: var(--messing); opacity: .5; }
.kalender-spalte i[data-stufe="3"] { background: var(--messing); opacity: .75; }
.kalender-spalte i[data-stufe="4"] { background: var(--messing); }
.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: 'Atkinson Hyperlegible Next', 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(--messing); }
.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(--messing); opacity: .12; }
.kurve-gesehen {
  fill: none; stroke: var(--messing); 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: 'Atkinson Hyperlegible Next', 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(--messing);
  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(--messing); 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 -------------------------------------------------------- */

.pruefteile { width: 100%; border-collapse: collapse; font-size: .92rem; }
.pruefteile th, .pruefteile td {
  padding: .55rem .4rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--linie-fein);
}
.pruefteile th {
  font-family: 'Atkinson Hyperlegible Next', sans-serif; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--tinte-leise);
}
.pruefteile .num { text-align: right; font-variant-numeric: tabular-nums; }
.pruefteile 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 { color: var(--gruen); font-weight: 660; }
.pruefteile 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: 'Atkinson Hyperlegible Next', 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(--messing-hell); color: #7d5518;
}
.hartnaeckig-quote[data-ton="gut"] { background: var(--gruen-hell); color: var(--gruen); }
.hartnaeckig-fach {
  font-family: 'Atkinson Hyperlegible Next', sans-serif; font-size: .72rem; color: var(--tinte-leise);
}
.hartnaeckig-frage {
  margin: 0 0 .35rem; font-size: .95rem; line-height: 1.45;
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
}
.hartnaeckig-verweis {
  font-family: 'Atkinson Hyperlegible Next', sans-serif; font-size: .82rem;
  color: var(--tinte-leise); text-decoration: none;
}
.hartnaeckig-verweis:hover { color: var(--messing); text-decoration: underline; }
:root[data-thema="dunkel"] .hartnaeckig-quote[data-ton="mittel"] { color: var(--messing); }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .hartnaeckig-quote[data-ton="mittel"] {
    color: var(--messing);
  }
}

@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: 'Atkinson Hyperlegible Next', 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: 'Atkinson Hyperlegible Next', 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); }

/* --- 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: 'Atkinson Hyperlegible Next', sans-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(--messing);
  background: var(--papier-tief);
  font-family: 'Atkinson Hyperlegible Next', sans-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(--messing); background: var(--messing-hell); }
.hinweis[data-art="info"]    { border-left-color: var(--blau); background: var(--blau-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 ---------------------------------------------------------- */

.werbeplatz {
  border: 1px dashed var(--linie); border-radius: var(--radius-klein);
  padding: 1.1rem; text-align: center; color: var(--tinte-leise);
  font-size: .82rem; letter-spacing: .05em; text-transform: uppercase;
  background: var(--papier-tief);
  margin: 2rem 0;
}
.werbeplatz:empty::before { content: 'Anzeige'; }

/* --- 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;
}
.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(--messing); background: var(--messing-hell); }
.preis .betrag { font-family: 'Atkinson Hyperlegible Next', sans-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(--messing);
}

/* --- 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(--messing); 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(--messing); 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(--messing); 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: 'Atkinson Hyperlegible Next', sans-serif;
  font-size: 1.5rem; line-height: 1.1; letter-spacing: -.02em;
  color: var(--messing); font-variant-numeric: tabular-nums;
}
.termin-zahl span {
  display: block; margin-top: .2rem;
  font-family: 'Atkinson Hyperlegible Next', 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(--messing) 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: 'Atkinson Hyperlegible Next', sans-serif;
  font-size: 2.1rem; line-height: 1; letter-spacing: -.02em;
  color: var(--messing); font-variant-numeric: tabular-nums;
}
.bestehen-ring span {
  display: block; margin-top: .25rem;
  font-family: 'Atkinson Hyperlegible Next', 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: 'Atkinson Hyperlegible Next', sans-serif;
  font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em;
}
.erklaerung-schalter:focus-visible {
  outline: 2px solid var(--messing); 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(--messing);
  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:  #7d94a3;
    --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:  #d9a34e;
    --knopf-schrift:#0c1a24;
    --linie:        #274453;
    --linie-fein:   #1e3644;

    --messing:      #d9a34e;
    --messing-hell: #33291a;
    --gruen:        #5cc294;
    --gruen-hell:   #12302a;
    --rot:          #f08b7e;
    --rot-hell:     #35201e;
    --blau:         #79bce6;
    --blau-hell:    #14293a;

    --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; }
}

/* Manuelle Umschaltung: [data-thema="dunkel"] erzwingt Dunkelmodus. */
:root[data-thema="dunkel"] {
  --tinte:        #e8eef3;
  --tinte-weich:  #a9bcc9;
  --tinte-leise:  #7d94a3;
  --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:  #d9a34e;
  --knopf-schrift:#0c1a24;
  --linie:        #274453;
  --linie-fein:   #1e3644;
  --messing:      #d9a34e;
  --messing-hell: #33291a;
  --gruen:        #5cc294;
  --gruen-hell:   #12302a;
  --rot:          #f08b7e;
  --rot-hell:     #35201e;
  --blau:         #79bce6;
  --blau-hell:    #14293a;
  --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; }

/* --- 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: 'Atkinson Hyperlegible Next', sans-serif;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--messing); border-bottom: 2px solid var(--linie);
}
.vergleich tbody th {
  font-family: 'Atkinson Hyperlegible Next', 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(--messing); }

.brotkrumen {
  font-family: 'Atkinson Hyperlegible Next', 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(--messing); text-decoration: underline; }
.brotkrumen span { opacity: .5; margin: 0 .18rem; }

.quellenzeile {
  max-width: 72ch; margin: 0;
  font-family: 'Atkinson Hyperlegible Next', 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(--messing);
  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: 'Atkinson Hyperlegible Next', sans-serif;
  font-size: .72rem; font-weight: 660;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--messing);
}

/* 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 h4 {
  font-family: 'Atkinson Hyperlegible Next', 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(--messing); text-decoration: underline; }

@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; }
}


/* ==========================================================================
   Einbürgerungstest — Bausteine, die die Vorlage nicht hatte
   ========================================================================== */

/* --- Ruhige Bühne: ohne gerechnetes Wasser, nur Licht ------------------- */
.buehne-ruhig { padding-bottom: clamp(2.6rem, 5vw, 4rem); }
.buehne-ruhig::before {
  background:
    radial-gradient(60rem 30rem at 85% 10%, rgba(233, 185, 73, .14), transparent 65%),
    radial-gradient(50rem 30rem at 0% 100%, rgba(20, 33, 61, .07), transparent 60%);
}
.buehne-ruhig h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.08; letter-spacing: -.02em; }

/* --- Schautafel: wie der Lernstand aussieht ------------------------------ */
.schau {
  background: var(--papier-hoch); border: 1px solid var(--linie);
  border-radius: calc(var(--radius) + 4px); box-shadow: var(--schatten-hoch);
  padding: 1.3rem 1.4rem 1rem; max-width: 26rem; margin-left: auto;
}
.schau-kopf { display: flex; align-items: center; gap: .55rem; font-size: .82rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-leise); }
.schau-punkt { width: .55rem; height: .55rem; border-radius: 50%; background: var(--gruen); }
.schau-mitte { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: end; margin: 1.1rem 0 1rem; }
.schau-ring { position: relative; width: 8.2rem; height: 8.2rem; }
.schau-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.schau-ring circle { fill: none; stroke-width: 10; }
.schau-ring-grund { stroke: var(--papier-tief); }
.schau-ring-wert { stroke: var(--messing); stroke-linecap: round;
  stroke-dasharray: var(--anteil) 100; }
.schau-ring-zahl { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.schau-ring-zahl b { font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; }
.schau-ring-zahl span { font-size: .78rem; color: var(--tinte-leise); margin-top: .25rem; }
.schau-faecher { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; height: 7rem; align-items: end; }
.schau-faecher div { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: .3rem; }
.schau-faecher i { align-self: end; height: calc(var(--h) * 100%); border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--blau), color-mix(in srgb, var(--blau) 60%, var(--papier-hoch))); }
.schau-faecher span { text-align: center; font-size: .72rem; color: var(--tinte-leise); }
.schau-zeilen { border-top: 1px solid var(--linie-fein); }
.schau-zeilen div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0;
  border-bottom: 1px solid var(--linie-fein); font-size: .92rem; }
.schau-zeilen span { color: var(--tinte-weich); }
.schau-fussnote { margin: .7rem 0 0; font-size: .72rem; color: var(--tinte-leise); text-align: right; }
@media (max-width: 760px) { .schau { margin: 0 auto; } }

/* --- Bundesland wählen ---------------------------------------------------- */
.start-wahl { padding: 1.2rem 1.3rem; }
.start-wahl .knopf-reihe { margin-top: .9rem; }
.land-wahl { display: grid; gap: .35rem; }
.land-wahl span { font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; color: var(--tinte-leise); }
.land-wahl select, .land-kasten select {
  font: inherit; color: var(--tinte); background: var(--papier-hoch);
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  padding: .65rem .9rem; min-height: 2.9rem; width: 100%; max-width: 24rem;
}
.land-wahl select:focus-visible, .land-kasten select:focus-visible {
  outline: 2px solid var(--messing); outline-offset: 2px;
}
.land-kasten { margin-bottom: 1.4rem; }
.land-kasten select { margin-top: .4rem; }

.land-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.land-liste a { display: block; padding: .8rem 1rem; border: 1px solid var(--linie);
  border-radius: var(--radius-klein); background: var(--papier-hoch); color: var(--tinte);
  text-decoration: none; transition: border-color var(--tempo), transform var(--tempo); }
.land-liste a:hover, .land-liste a:focus-visible { border-color: var(--messing); transform: translateY(-1px); }

/* --- Quelle und Abgrenzung ------------------------------------------------- */
.abgrenzung { margin: 0; }
.fuss-quelle { margin: 0; line-height: 1.6; font-size: .88rem; }
.quelle-liste { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.4rem; margin: 1rem 0 1.6rem; }
.quelle-liste dt { color: var(--tinte-leise); }
.quelle-liste dd { margin: 0; }
@media (max-width: 560px) {
  .quelle-liste { grid-template-columns: 1fr; }
  .quelle-liste dd { margin-bottom: .6rem; }
}
.quellenzeile { font-size: .84rem; color: var(--tinte-leise); line-height: 1.55; margin-top: 2rem; }

.buehne-fuss .zahlenband { display: grid; grid-template-columns: repeat(4, auto); gap: 1.4rem; justify-content: start; }
@media (max-width: 420px) { .buehne-fuss .zahlenband { grid-template-columns: repeat(2, auto); } }

/* Der Name ist lang; auf den schmalsten Telefonen wird er kleiner statt
   den Menüknopf aus dem Bild zu schieben. */
.marke span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 380px) {
  .marke { font-size: .95rem; gap: .45rem; }
  .marke svg { width: 26px; height: 26px; }
}

/* --- Code einlösen -------------------------------------------------------- */
.code-form { display: grid; gap: .5rem; max-width: 26rem; }
.code-form label { font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; color: var(--tinte-leise); }
.code-form input {
  font: inherit; font-variant-numeric: tabular-nums; letter-spacing: .08em;
  padding: .7rem .9rem; border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--papier-hoch); color: var(--tinte);
}
.code-form .knopf { justify-self: start; }
.code-meldung { margin: .3rem 0 0; min-height: 1.4em; color: var(--tinte-weich); }

/* --- Einwilligung ----------------------------------------------------------- */
.einwilligung {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--papier-hoch); border-top: 1px solid var(--linie);
  box-shadow: 0 -8px 30px rgba(20, 33, 61, .12);
  padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom));
}
.einwilligung-innen { display: flex; gap: 1.2rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.einwilligung-innen > div:first-child { flex: 1 1 28rem; }
.einwilligung p { margin: .3rem 0; font-size: .92rem; color: var(--tinte-weich); }
.einwilligung a { font-size: .88rem; }

/* --- Übersetzungshilfe (nur wenn eingeschaltet) ---------------------------- */
.uebersetzung { margin-top: 1.2rem; border-top: 1px dashed var(--linie); padding-top: .9rem; }
.uebersetzung summary { cursor: pointer; color: var(--tinte-weich); font-size: .92rem; }
.uebersetzung select { margin: .7rem 0; font: inherit; padding: .45rem .7rem;
  border: 1px solid var(--linie); border-radius: var(--radius-fein); background: var(--papier-hoch); color: var(--tinte); }
.uebersetzung-inhalt { color: var(--tinte-weich); }
.uebersetzung-frage { font-weight: 560; }
.uebersetzung-hinweis { font-size: .8rem; color: var(--tinte-leise); margin: .6rem 0 0; }

/* Bild mit Beschriftung oder Urhebervermerk aus dem Katalog */
.bild-mit-vermerk { margin: 0; display: inline-block; }
.bild-mit-vermerk figcaption { font-size: .74rem; color: var(--tinte-leise); margin-top: .25rem; }

/* Lange Doppelformen aus dem Katalog („Ministerpräsidentin/Ministerpräsident")
   haben kein Leerzeichen und sprengen sonst schmale Telefone. Der Browser
   darf sie umbrechen — am Text selbst ändert das nichts. */
.lernfrage, .lernfrage-antwort span, .lernfrage-andere li, .antwort, .frage-text,
#lernstoff, .treffer, .karte-loesung {
  overflow-wrap: anywhere;
  hyphens: auto;
}
.lernfrage img, .frage-bilder img, .antwort img, .lernfrage-bilder img,
.bild-mit-vermerk img { max-width: 100%; height: auto; }

/* Platzhalter für ein Foto, dessen Rechte noch geklärt werden */
.bild-fehlt {
  display: inline-block; margin: .4rem 0; padding: .7rem .9rem;
  border: 1px dashed var(--linie); border-radius: var(--radius-klein);
  background: var(--papier-tief); color: var(--tinte-leise); font-size: .86rem;
}

/* ==========================================================================
   Hintergrundbild — Landschaft mit Fluss, Fachwerk, Weinbergen
   ==========================================================================
   Das Bild liegt fest hinter der Seite, mit einem Schleier aus der
   Papierfarbe darueber: oben fast deckend, unten durchscheinend. Text steht
   damit immer auf hellem, ruhigem Grund; die Landschaft ist Stimmung, nicht
   Inhalt. Fragen, Karten und Antworten haben ohnehin eigene, deckende
   Flaechen. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(var(--schleier), .92) 0%, rgba(var(--schleier), .86) 45%,
      rgba(var(--schleier), .74) 78%, rgba(var(--schleier), .66) 100%),
    url('../img/hintergrund-1280.webp') center bottom / cover no-repeat;
}
@media (min-width: 1300px) {
  body::before {
    background:
      linear-gradient(180deg,
        rgba(var(--schleier), .92) 0%, rgba(var(--schleier), .86) 45%,
        rgba(var(--schleier), .74) 78%, rgba(var(--schleier), .66) 100%),
      url('../img/hintergrund-2400.webp') center bottom / cover no-repeat;
  }
}
/* Nachts nur ein Hauch der Landschaft — ein heller Aquarell-Himmel auf
   dunklem Grund wuerde blenden. */
:root[data-thema="dunkel"] body::before { opacity: .14; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) body::before { opacity: .14; }
}
/* Die Startbuehne zeigt die Landschaft deutlicher. */
.buehne-ruhig::before {
  background:
    linear-gradient(180deg, rgba(var(--schleier), .72) 0%, rgba(var(--schleier), .55) 55%,
      rgba(var(--schleier), .2) 100%),
    url('../img/hintergrund-2400.webp') center 78% / cover no-repeat;
}
@media (max-width: 760px) {
  .buehne-ruhig::before {
    background:
      linear-gradient(180deg, rgba(var(--schleier), .9) 0%, rgba(var(--schleier), .8) 60%,
        rgba(var(--schleier), .4) 100%),
      url('../img/hintergrund-1280.webp') center bottom / cover no-repeat;
  }
}

/* ==========================================================================
   Adler — Maskottchen beim Üben und in der Testsimulation
   ========================================================================== */
.adler {
  display: flex; align-items: center; gap: .8rem;
  margin: 0 0 1rem; position: relative;
}
.adler img { width: 64px; height: auto; flex: none; filter: drop-shadow(0 4px 8px rgba(20, 33, 61, .12)); }
.adler-blase {
  position: relative; margin: 0; padding: .55rem .85rem; max-width: 30rem;
  background: var(--papier-hoch); border: 1px solid var(--linie);
  border-radius: 14px; font-size: .95rem; color: var(--tinte-weich);
  box-shadow: var(--schatten-fein);
}
.adler-blase::before {
  content: ''; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px;
  background: inherit; border-left: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
  transform: translateY(-50%) rotate(45deg);
}
.adler[data-stimmung="richtig"] .adler-blase, .adler[data-stimmung="feiert"] .adler-blase {
  border-color: color-mix(in srgb, var(--gruen) 40%, var(--linie)); color: var(--gruen);
}
.adler-aus {
  position: absolute; top: -.4rem; left: 44px; width: 1.4rem; height: 1.4rem;
  border-radius: 50%; border: 1px solid var(--linie); background: var(--papier-hoch);
  color: var(--tinte-leise); font-size: .85rem; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity var(--tempo);
}
.adler:hover .adler-aus, .adler-aus:focus-visible { opacity: 1; }
@media (hover: none) { .adler-aus { opacity: .7; } }

/* Breite Schirme: im Rand rechts neben der Fragenkarte, gross. Die Karte
   ist 800 px breit; ab 1240 px ist daneben Platz, ohne etwas zu verdecken. */
@media (min-width: 1240px) {
  .huelle-bogen { position: relative; }
  .adler {
    position: absolute; left: calc(100% + 1.6rem); top: 0; width: 200px;
    flex-direction: column; align-items: center; margin: 0;
  }
  .adler img { width: 160px; }
  .adler-blase { text-align: center; }
  .adler-blase::before {
    left: 50%; top: -7px; transform: translateX(-50%) rotate(135deg);
  }
  .adler-aus { left: auto; right: .6rem; top: 0; }
}

/* Kleine Bewegung bei jedem Stimmungswechsel */
.adler-neu img { animation: adler-hopser .5s cubic-bezier(.3, 1.6, .5, 1); }
.adler-neu[data-stimmung="richtig"] img, .adler-neu[data-stimmung="feiert"] img {
  animation: adler-jubel .7s cubic-bezier(.3, 1.6, .5, 1);
}
.adler-neu .adler-blase { animation: adler-blase .35s ease-out; }
@keyframes adler-hopser { 0% { transform: translateY(4px) scale(.96); } 100% { transform: none; } }
@keyframes adler-jubel {
  0% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-14px) rotate(-4deg); }
  70% { transform: translateY(0) rotate(3deg); } 100% { transform: none; }
}
@keyframes adler-blase { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .adler-neu img, .adler-neu .adler-blase { animation: none; }
}
@media print { .adler { display: none !important; } }

/* ==========================================================================
   Vorführung auf der Startseite
   ========================================================================== */
.vorfuehrung { max-width: 30rem; margin-left: auto; }
.vf-rahmen {
  position: relative; background: var(--papier-hoch); border: 1px solid var(--linie);
  border-radius: calc(var(--radius) + 4px); box-shadow: var(--schatten-hoch);
  padding: 0 0 1rem; overflow: hidden;
}
.vf-leiste { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem;
  border-bottom: 1px solid var(--linie-fein); font-size: .78rem; color: var(--tinte-leise);
  letter-spacing: .05em; text-transform: uppercase; }
.vf-ampel { width: 34px; height: 8px; background:
  radial-gradient(circle, #f0a39a 3.5px, transparent 4px) 0 50%/12px 8px repeat-x; opacity: .7; }
.vf-buehne { padding: 1rem 1.1rem .4rem; min-height: 19.5rem; }
.vf-szene { position: relative; animation: vf-rein .45s ease-out; }
@keyframes vf-rein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.vf-herkunft { margin: 0 0 .35rem; font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinte-leise); }
.vf-frage { margin: 0 0 .8rem; font-weight: 700; font-size: 1.05rem; line-height: 1.35; }
.vf-antworten { display: grid; gap: .4rem; }
.vf-antwort { display: flex; gap: .55rem; align-items: center; padding: .5rem .7rem;
  border: 1px solid var(--linie); border-radius: var(--radius-klein); font-size: .92rem;
  background: var(--papier-hoch); transition: background .3s, border-color .3s; }
.vf-buchstabe { flex: none; width: 1.4rem; height: 1.4rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--papier-tief); font-size: .78rem; font-weight: 700; }
.vf-antwort[data-urteil="richtig"] { background: var(--gruen-hell); border-color: var(--gruen); }
.vf-antwort[data-urteil="richtig"] .vf-buchstabe { background: var(--gruen); color: #fff; }
.vf-antwort[data-urteil="falsch"] { background: var(--rot-hell); border-color: var(--rot); }
.vf-antwort[data-urteil="falsch"] .vf-buchstabe { background: var(--rot); color: #fff; }
.vf-zeiger { position: absolute; left: 0; top: 0; width: 22px; height: 22px; opacity: 0;
  border-radius: 50%; background: rgba(20, 33, 61, .25); border: 2px solid var(--tinte);
  transition: transform .8s cubic-bezier(.4, 0, .2, 1), opacity .3s; pointer-events: none; }
.vf-zeiger[data-sichtbar="ja"] { opacity: 1; }
.vf-zeiger[data-klick="ja"] { animation: vf-klick .35s ease-out; }
@keyframes vf-klick { 50% { box-shadow: 0 0 0 10px rgba(20, 33, 61, .12); } }

.vf-karte { position: relative; height: 12.5rem; perspective: 900px; }
.vf-karte-seite { position: absolute; inset: 0; display: grid; align-content: center;
  padding: 1.1rem; border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--papier-hoch); backface-visibility: hidden;
  transition: transform .7s cubic-bezier(.4, 0, .2, 1); }
.vf-hinten { transform: rotateY(180deg); background: var(--gruen-hell); border-color: var(--gruen); }
.vf-karte[data-gedreht="ja"] .vf-vorne { transform: rotateY(-180deg); }
.vf-karte[data-gedreht="ja"] .vf-hinten { transform: rotateY(0); }
.vf-hinweis { margin: .6rem 0 0; font-size: .8rem; color: var(--tinte-leise); }
.vf-loesung { margin: .3rem 0 0; font-weight: 700; font-size: 1.15rem; color: var(--gruen); }

.vf-pruef-kopf { display: flex; justify-content: space-between; font-size: .85rem;
  color: var(--tinte-weich); margin-bottom: .8rem; }
.vf-uhr { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--tinte); }
.vf-raster { display: grid; grid-template-columns: repeat(11, 1fr); gap: .3rem; }
.vf-feld { display: grid; place-items: center; height: 1.8rem; border-radius: 6px;
  border: 1px solid var(--linie); font-size: .72rem; color: var(--tinte-leise);
  transition: background .2s, color .2s; }
.vf-feld[data-stand="beantwortet"] { background: var(--blau-hell); color: var(--blau); border-color: transparent; }
.vf-ergebnis { margin-top: 1rem; display: flex; gap: .7rem; align-items: baseline; opacity: 0;
  transform: scale(.95); transition: opacity .4s, transform .4s; }
.vf-ergebnis[data-sichtbar="ja"] { opacity: 1; transform: none; }
.vf-ergebnis b { font-size: 1.6rem; color: var(--gruen); }
.vf-ergebnis span { font-weight: 700; color: var(--gruen); }

.vf-adler { display: flex; align-items: flex-end; gap: .6rem; padding: 0 1.1rem; }
.vf-adler img { width: 76px; height: auto; flex: none; }
.vf-adler-neu img { animation: adler-hopser .5s cubic-bezier(.3, 1.6, .5, 1); }
.vf-adler-blase { margin: 0 0 .6rem; padding: .45rem .75rem; font-size: .86rem;
  background: var(--papier-tief); border-radius: 12px; color: var(--tinte-weich); }
.vf-fuss { display: flex; justify-content: space-between; align-items: center; margin-top: .7rem; }
.vf-punkte { display: flex; gap: .35rem; }
.vf-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--linie); transition: background .3s, width .3s; }
.vf-punkt[data-aktiv="ja"] { background: var(--messing); width: 22px; border-radius: 4px; }
.vf-schalter { font: inherit; font-size: .8rem; background: none; border: 0; color: var(--tinte-leise);
  text-decoration: underline; cursor: pointer; }
.vf-fussnote { font-size: .76rem; color: var(--tinte-leise); margin: .5rem 0 0; }
@media (max-width: 760px) { .vorfuehrung { margin: 0 auto; } .vf-buehne { min-height: 21rem; } }
@media (prefers-reduced-motion: reduce) { .vf-szene, .vf-adler-neu img { animation: none; } }

/* Was auf der Startbuehne ueber dem Foto steht, bekommt einen hellen Grund. */
.vf-fuss, .vf-fussnote, .buehne-fuss .zahlenband {
  background: rgba(var(--schleier), .88); border-radius: var(--radius-klein);
  padding: .5rem .8rem;
}
.buehne-fuss .zahlenband { padding: 1rem 1.2rem; border-top: 0; }

/* Emil als Zeichen in der Kopfleiste */
.marke-bild { width: 32px; height: 32px; flex: none; border-radius: 9px;
  box-shadow: 0 1px 2px rgba(13, 34, 51, .18); transition: transform var(--tempo-lang); }
.marke:hover .marke-bild { transform: rotate(-6deg) scale(1.05); }
@media (max-width: 380px) { .marke-bild { width: 28px; height: 28px; } }
/* Der Name ist laenger geworden: Er darf schrumpfen und wird zur Not gekuerzt,
   statt den Menueknopf aus dem Bild zu schieben. */
.kopf-innen .marke { min-width: 0; flex: 1 1 auto; }
@media (max-width: 380px) { .marke { font-size: .9rem; } }