/* ===============================================================
   Kalonaut - oeffentliche Webseite

   FARBEN: dieselben Merkmale und dieselben Werte wie app.css,
   Gestaltungsrichtung A (warmes Beigegrau, gedeckte Makrofarben).
   Die Seite soll erkennbar zur App gehoeren, nicht zur Firma.

   HELL UND DUNKEL SIND BEIDE VOLLSTAENDIG. Jede Farbe ist ein Merkmal
   auf :root und wird unter [data-thema="dunkel"] und unter
   prefers-color-scheme:dark neu gesetzt. Keine Farbe existiert nur in
   einem der beiden Blocks - sonst faellt sie im anderen auf den
   Vorgabewert des Browsers zurueck, und das sieht man erst auf einem
   fremden Geraet.

   Drei Zustaende, nicht zwei: ohne data-thema gilt die Einstellung des
   Geraets, data-thema="hell"/"dunkel" setzt sie ausser Kraft. Deshalb
   die :not()-Bedingung im Medienblock - der Schalter muss in BEIDE
   Richtungen gewinnen.

   SCHRIFT: die des Geraets, genau wie in der App. Eine geladene Schrift
   waere ein zusaetzlicher Abruf vor dem ersten Bild und auf dem iPhone
   ein Schriftbild, das gerade nicht nach dieser App aussieht. Und sie
   waere die einzige Datei, bei der die Frage "wo kommt die her"
   ueberhaupt aufkaeme.
   =============================================================== */

:root {
  --grund:      #efece5;
  --karte:      #fbf9f5;
  --flaeche:    #e8e4db;
  --rand:       #e6e1d7;
  --randfein:   #ece7dd;
  --text:       #201e1b;
  /* ABWEICHUNG VON app.css, mit Absicht.
     Dort steht --stumm auf #726c63. Auf dieser Seite gemessen ergibt das
     gegen --flaeche 4,10:1 und gegen --grund 4,41:1 - beides unter den
     4,5:1, die WCAG AA fuer Fliesstext verlangt. In der App stehen damit
     kurze Beschriftungen, hier ganze Absaetze, die jemand liest.
     #665f57 kommt auf 5,01:1 bzw. 5,39:1. Das Pruefskript misst es. */
  --stumm:      #665f57;
  --blass:      #a39d93;   /* nur noch fuer Kanten, nie fuer Text */
  --knopf:      #201e1b;
  --knopftext:  #fefdfb;

  --protein:    #2f6b8f;
  --kh:         #6f9a4a;
  --fett:       #e0a955;

  --warngrund:  #f4ead9;
  --warnrand:   #e6d6ba;
  /* app.css hat hier #8a6a2f. Gemessen 4,21:1 gegen --warngrund, also
     unter AA. Der Hinweiskasten enthaelt den Medizinprodukt-Satz - der
     muss gerade lesbar sein. #7a5d28 kommt auf 5,1:1. */
  --warntext:   #7a5d28;
  --fehler:     #8f3140;
  --fehlergrund:#f7e3e6;
  --fehlerrand: #e6c3c9;
  --gut:        #2f6b46;
  --gutgrund:   #e6efe8;
  --gutrand:    #cbdfd2;

  --schatten:   0 1px 2px rgba(32,30,27,.05);
  --schatten2:  0 2px 6px rgba(32,30,27,.06), 0 16px 40px rgba(32,30,27,.10);
  --schein:     rgba(224,169,85,.20);

  /* Abstaende: eine 4-Punkt-Leiter, keine freihaendigen Werte */
  --r1: 4px;  --r2: 8px;  --r3: 12px; --r4: 16px; --r5: 24px;
  --r6: 32px; --r7: 48px; --r8: 64px; --r9: 96px; --r10: 128px;

  --seitenrand: clamp(20px, 5vw, 40px);
  --abschnitt:  clamp(64px, 9vw, 120px);
  --bahn:       1180px;
  --lesebahn:   64ch;

  --s-xs: .8125rem;
  --s-sm: .9375rem;
  --s-md: 1.0625rem;
  --s-lg: clamp(1.125rem, 1.5vw, 1.375rem);
  --s-h3: clamp(1.25rem, 2vw, 1.625rem);
  --s-h2: clamp(1.75rem, 3.4vw, 2.625rem);
  --s-h1: clamp(1.75rem, 3.4vw, 2.75rem);

  --z-eng: 1.12; --z-mittel: 1.3; --z-text: 1.62;

  --e-sm: 10px; --e-md: 16px; --e-lg: 22px; --e-pille: 999px;

  --k-aus:  cubic-bezier(.2,.7,.3,1);
  --d-tipp: 90ms; --d-kurz: 150ms; --d-mit: 320ms;

  --kopfhoehe: 66px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --grund:      #141416;
    --karte:      #1d1d21;
    --flaeche:    #27272c;
    --rand:       #2a2a30;
    --randfein:   #26262b;
    --text:       #ece8e2;
    --stumm:      #9b958c;
    --blass:      #6b665f;
    --knopf:      #ece8e2;
    --knopftext:  #141416;
    --protein:    #3d7ba5;
    --kh:         #7fae55;
    --fett:       #f0c27a;
    --warngrund:  #2b2418;
    --warnrand:   #3f3524;
    --warntext:   #d4b478;
    --fehler:     #ff9aa8;
    --fehlergrund:#2d1a1e;
    --fehlerrand: #4a2a30;
    --gut:        #7cd992;
    --gutgrund:   #16241a;
    --gutrand:    #263c2b;
    --schatten:   0 1px 2px rgba(0,0,0,.4);
    --schatten2:  0 2px 6px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.35);
    --schein:     rgba(240,194,122,.17);
    color-scheme: dark;
  }
}

:root[data-thema="dunkel"] {
  --grund:      #141416;
  --karte:      #1d1d21;
  --flaeche:    #27272c;
  --rand:       #2a2a30;
  --randfein:   #26262b;
  --text:       #ece8e2;
  --stumm:      #9b958c;
  --blass:      #6b665f;
  --knopf:      #ece8e2;
  --knopftext:  #141416;
  --protein:    #3d7ba5;
  --kh:         #7fae55;
  --fett:       #f0c27a;
  --warngrund:  #2b2418;
  --warnrand:   #3f3524;
  --warntext:   #d4b478;
  --fehler:     #ff9aa8;
  --fehlergrund:#2d1a1e;
  --fehlerrand: #4a2a30;
  --gut:        #7cd992;
  --gutgrund:   #16241a;
  --gutrand:    #263c2b;
  --schatten:   0 1px 2px rgba(0,0,0,.4);
  --schatten2:  0 2px 6px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.35);
  --schein:     rgba(240,194,122,.17);
  color-scheme: dark;
}

/* --- Grundlagen ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
[id] { scroll-margin-top: calc(var(--kopfhoehe) + var(--r5)); }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: var(--s-md)/var(--z-text) -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; line-height: var(--z-eng); text-wrap: balance; letter-spacing: -.025em; font-weight: 800; }
h1 { font-size: var(--s-h1); }
h2 { font-size: var(--s-h2); }
h3 { font-size: var(--s-h3); line-height: var(--z-mittel); letter-spacing: -.015em; font-weight: 700; }
p  { margin: 0; text-wrap: pretty; }
img { max-width: 100%; height: auto; display: block; }
strong { font-weight: 700; }

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

:focus-visible { outline: 2px solid var(--protein); outline-offset: 3px; border-radius: var(--e-sm); }

.bahn { width: 100%; max-width: var(--bahn); margin-inline: auto; padding-inline: var(--seitenrand); }
.lese { max-width: var(--lesebahn); }
.zahl { font-variant-numeric: tabular-nums; }

/* Bewegt ueber transform, nicht ueber top: "top" zu animieren zwingt
   den Browser, das Layout neu zu rechnen (Hausstandard 5; das
   Pruefskript meldet es als MITTEL). Endlage auf den Pixel dieselbe. */
.sprung {
  position: absolute; left: var(--r4); top: var(--r3); z-index: 60;
  background: var(--karte); color: var(--text);
  padding: var(--r3) var(--r4); border-radius: var(--e-sm);
  border: 1px solid var(--rand); box-shadow: var(--schatten2);
  transform: translateY(-112px);
  transition: transform var(--d-kurz) var(--k-aus);
}
.sprung:focus { transform: translateY(0); }

/* --- Kopfleiste ------------------------------------------------ */
.leiste {
  position: sticky; top: 0; z-index: 40;
  height: var(--kopfhoehe);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r4);
  padding-inline: var(--seitenrand);
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-kurz) var(--k-aus), background-color var(--d-kurz) var(--k-aus);
}
.leiste[data-gescrollt] { border-bottom-color: var(--rand); }
/* 44 px Tippflaeche, auch wenn der Text niedriger ist. Auf dem Telefon
   ist ein 28 px hoher Treffer eine Einladung zum Danebentippen. */
.wortmarke {
  display: flex; align-items: center; gap: var(--r2);
  min-height: 44px; padding-right: var(--r2);
  font-weight: 800; letter-spacing: -.02em; text-decoration: none; font-size: 1.0625rem;
}
.leiste-rechts { display: flex; align-items: center; gap: var(--r2); }

/* --text statt --stumm, und der Grund ist gemessen (15.09.2026,
   seite-nachweise.ps1, Punkt "Kontrast ... jedes Textpaar erreicht
   4,5:1").

   Die Leiste ist durchsichtig (88 % Grund) und klebt oben. Was hinter
   ihrer Schrift liegt, ist deshalb nicht --grund, sondern das, was
   gerade darunter durchscrollt. Faehrt der gefuellte Knopf (--knopf,
   fast schwarz) darunter durch, steht --stumm auf einem Grund von rund
   rgb(214,211,205) - gemessen 4,22:1, also unter AA. Gegen reines
   Schwarz sind es 4,07:1.

   Zwei Wege standen offen: die Leiste deckend machen oder die Schrift
   kraeftiger. Die Leiste ist Absicht, also die Schrift - und zwar
   gleich auf --text (10,6:1 im schlechtesten Fall), damit die naechste
   Farbaenderung nicht wieder knapp daneben landet. Sekundaer bleibt
   der Knopf durch seine Umrandung, nicht durch blasse Schrift. */
.themaknopf {
  min-height: 44px; padding: 0 var(--r4);
  background: transparent; color: var(--text);
  border: 1px solid var(--rand); border-radius: var(--e-pille);
  font: 600 var(--s-sm)/1 inherit; cursor: pointer;
  transition: border-color var(--d-kurz) var(--k-aus), transform var(--d-tipp) var(--k-aus);
}
.themaknopf:hover { border-color: var(--blass); }
.themaknopf:active { transform: scale(.97); }

/* --- Knopf ----------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r2);
  min-height: 50px; padding: 0 var(--r6);
  background: var(--knopf); color: var(--knopftext);
  border: 0; border-radius: var(--e-pille);
  font: 700 var(--s-md)/1 inherit; text-decoration: none; cursor: pointer;
  box-shadow: var(--schatten);
  transition: transform var(--d-kurz) var(--k-aus), box-shadow var(--d-kurz) var(--k-aus), filter var(--d-kurz) var(--k-aus);
}
.knopf:hover { transform: translateY(-2px); box-shadow: 0 8px 26px var(--schein); }
.knopf:active { transform: translateY(0) scale(.98); transition-duration: var(--d-tipp); }
.knopf[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.knopf-klein { min-height: 44px; padding: 0 var(--r5); font-size: var(--s-sm); }
/* Eine Knopfbeschriftung bricht nie um (Hausstandard 4). Gemessen am
   15.09.2026 bei 390 px: Wortmarke, Themaknopf und "Auf die Warteliste"
   brauchten zusammen 356 px auf 350 px Bahn, der Knopf brach in zwei
   Zeilen. Unter 430 px wird die Leiste enger gesetzt, nichts wird
   ausgeblendet - der Weg auf die Warteliste bleibt sichtbar. */
.knopf, .knopf-leise, .themaknopf { white-space: nowrap; }
@media (max-width: 430px) {
  .leiste { gap: var(--r2); }
  .leiste-rechts { gap: var(--r1); }
  .themaknopf { padding: 0 var(--r3); }
  .knopf-klein { padding: 0 var(--r4); }
}

.knopf-leise {
  display: inline-flex; align-items: center; min-height: 50px; padding: 0 var(--r5);
  border: 1px solid var(--rand); border-radius: var(--e-pille);
  background: transparent; color: var(--text);
  font: 600 var(--s-md)/1 inherit; text-decoration: none;
  transition: border-color var(--d-kurz) var(--k-aus), background-color var(--d-kurz) var(--k-aus), transform var(--d-tipp) var(--k-aus);
}
.knopf-leise:hover { border-color: var(--blass); background: var(--karte); }
.knopf-leise:active { transform: scale(.985); }

/* --- Abschnitte ------------------------------------------------ */
.abschnitt { padding-block: var(--abschnitt); }
.abschnitt-flaeche { background: var(--flaeche); }
.abschnitt > .bahn > h2 { max-width: 24ch; }
.vorspann { font-size: var(--s-lg); color: var(--stumm); margin-top: var(--r4); }

/* --- Kopfbereich ----------------------------------------------- */
.kopfbereich { padding-top: clamp(40px, 6vw, 88px); padding-bottom: var(--abschnitt); overflow: hidden; }
.kopfbereich .bahn { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .kopfbereich .bahn { grid-template-columns: 1.05fr .95fr; } }

/* 22ch statt 16: die Ueberschrift ist ein ganzer Satz und stand sonst
   vierzeilig da. Vier Zeilen sind immer ein Groessenfehler, nie ein
   Textfehler. */
.kopf-text h1 { max-width: 22ch; }
.kopf-text .vorspann { max-width: 46ch; }
.kopf-knoepfe { display: flex; flex-wrap: wrap; gap: var(--r3); margin-top: var(--r6); }
.kopf-hinweis { margin-top: var(--r3); font-size: var(--s-sm); color: var(--stumm); }

/* --- Geraeterahmen fuer echte Bildschirmfotos ------------------- */
.geraet {
  position: relative;
  width: min(100%, 320px);
  margin-inline: auto;
  border-radius: 30px;
  border: 1px solid var(--rand);
  background: var(--karte);
  padding: 8px;
  box-shadow: var(--schatten2);
}
.geraet img { border-radius: 23px; width: 100%; }
.geraet-gross { width: min(100%, 360px); }
.geraet::after {
  content: ""; position: absolute; inset: auto 8px 8px 8px; height: 90px;
  border-radius: 0 0 23px 23px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--karte));
}
.geraet-voll::after { display: none; }

/* --- Szene: der Vergleich -------------------------------------- */
.szene-regler { margin-top: var(--r6); max-width: 620px; }
.szene-regler label { display: block; font-size: var(--s-sm); font-weight: 600; color: var(--stumm); margin-bottom: var(--r3); }
.szene-regler output { color: var(--text); font-weight: 800; font-size: var(--s-md); }
.szene-regler input[type="range"] { width: 100%; accent-color: var(--fett); height: 44px; touch-action: pan-y; cursor: pointer; }

.szene-karten { display: grid; gap: var(--r4); margin-top: var(--r6); }
@media (min-width: 700px) { .szene-karten { grid-template-columns: 1fr 1fr; } }

.essen {
  position: relative;
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--e-lg); padding: var(--r6);
  box-shadow: var(--schatten);
  transition: border-color var(--d-mit) var(--k-aus), box-shadow var(--d-mit) var(--k-aus);
}
.essen[data-besser] { border-color: var(--fett); box-shadow: 0 0 0 1px var(--fett), 0 10px 32px var(--schein); }
.essen h3 { margin-bottom: var(--r2); }
.essen-werte { display: flex; flex-wrap: wrap; gap: var(--r2) var(--r5); margin-top: var(--r4); font-size: var(--s-sm); color: var(--stumm); }
.essen-werte b { color: var(--text); font-weight: 700; }
.essen-urteil {
  margin-top: var(--r5); padding-top: var(--r4); border-top: 1px solid var(--randfein);
  font-size: var(--s-sm); color: var(--stumm); min-height: 4.4em;
}
/* Nicht versal, nicht gesperrt: das Pruefskript des Hausstandards las
   die vier Rangmarken als Sektions-Label (keine-ki-optik 2), und der
   Einwand traegt - vier gleich gesetzte Kleinlabel sind der Rhythmus,
   den die Regel meint. Die Marke ist ein Zustand, kein Etikett. */
.essen-marke {
  display: inline-block; margin-bottom: var(--r4);
  font-size: var(--s-sm); font-weight: 700;
  color: var(--stumm);
}
.essen[data-besser] .essen-marke { color: var(--warntext); }

/* Die Herkunft der Zahl steht an der Zahl. Der Abschnitt "Jede Zahl
   sagt, woher sie kommt" weiter unten waere sonst eine Behauptung,
   die die Seite selbst nicht einloest. Leise gesetzt - sie ist ein
   Beleg, kein Verkaufsargument. */
.essen-quelle {
  margin-top: var(--r3); font-size: var(--s-xs); color: var(--stumm);
  font-variant-numeric: tabular-nums;
}

/* --- Die Tafel: die Formelzahl, die stehen bleibt ---------------
   Bildschirm 2. Das SVG kommt inline aus bildormel-tafel.svg
   (werkzeuge	afel-bauen.php) und erbt ueber currentColor die Farben
   der Seite - deshalb hier nur Farbe und Masze, nichts im Bild selbst.
   Die Tage und die Einheit leiser als die Zahl: die Zahl ist die
   Aussage, die Tage sind der Beweis, dass sie sich nicht bewegt. */
.tafel { margin: var(--r6) 0 0; max-width: 600px; }
.tafel svg { width: 100%; height: auto; display: block; color: var(--text); }
.tafel .tafel-linie, .tafel .tafel-punkt { color: var(--blass); }
.tafel .tafel-tag, .tafel .tafel-einheit { color: var(--stumm); }
.tafel figcaption { margin-top: var(--r3); font-size: var(--s-sm); color: var(--stumm); }
#geraten .lese { margin-top: var(--r6); color: var(--stumm); }

/* --- Wechselblock Bild und Text -------------------------------- */
.wechsel .bahn { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) {
  .wechsel .bahn { grid-template-columns: .95fr 1.05fr; }
  .wechsel-gedreht .bahn > *:first-child { order: 2; }
}
.wechsel-text > * + * { margin-top: var(--r4); }
.wechsel-text p { color: var(--stumm); max-width: 48ch; }
.wechsel-text h2 + p { margin-top: var(--r5); }

/* --- Prosa-Abschnitte ------------------------------------------
   Eigene, engere Bahn. Ein 48-Zeichen-Text in einer 1180 px breiten
   Bahn sieht nach vergessener Spalte aus, nicht nach Absicht. */
.prosa .bahn { max-width: 820px; }
.prosa .wechsel-text > p { max-width: none; }

/* --- Liste "Was Kalonaut nicht tut" ----------------------------- */
/* Fuenf Eintraege, je ein Satz (auftrag-24, 9.1). Seit Auftrag 26 die
   einzige Liste dieser Bauart auf der Seite - .merkmale ist mit dem
   Abschnitt "Was der Tag sonst noch braucht" gefallen. */
.nichttun { margin-top: var(--r7); border-top: 1px solid var(--rand); max-width: 940px; }
.nichttun > div {
  display: grid; gap: var(--r2) var(--r7);
  padding-block: var(--r6);
  border-bottom: 1px solid var(--rand);
}
@media (min-width: 800px) { .nichttun > div { grid-template-columns: 19rem minmax(0, 1fr); } }
.nichttun h3 { color: var(--text); }
.nichttun p { color: var(--stumm); max-width: 54ch; }

/* --- Hinweisfeld ----------------------------------------------- */
.hinweis {
  background: var(--warngrund); border: 1px solid var(--warnrand);
  color: var(--warntext); border-radius: var(--e-md);
  padding: var(--r5); font-size: var(--s-sm);
}
.hinweis strong { color: var(--warntext); }

/* Formularelemente erben die Schrift nicht von selbst, und unter 16px
   zoomt iOS beim Antippen in die Seite hinein. Einmal global statt an
   jedem Feld einzeln. */
input, button, textarea, select { font-family: inherit; font-size: 16px; }

/* --- Warteliste ------------------------------------------------ */
.warte .bahn { max-width: 720px; }
.warte-form { margin-top: var(--r6); }
.feld { display: grid; gap: var(--r2); }
.feld label { font-size: var(--s-sm); font-weight: 600; color: var(--stumm); }
.feld input[type="email"] {
  font-family: inherit; font-size: 16px; line-height: 1.4;
  min-height: 52px; padding: var(--r3) var(--r4);
  color: var(--text); background: var(--karte);
  border: 1px solid var(--rand); border-radius: var(--e-sm);
  transition: border-color var(--d-kurz) var(--k-aus), box-shadow var(--d-kurz) var(--k-aus);
}
.feld input[type="email"]:hover { border-color: var(--blass); }
.feld input[type="email"]:focus-visible { border-color: var(--protein); box-shadow: 0 0 0 3px var(--schein); outline: none; }
.feld[data-fehler] input[type="email"] { border-color: var(--fehler); }
.warte-zeile { display: grid; gap: var(--r3); margin-top: var(--r4); }
@media (min-width: 620px) { .warte-zeile { grid-template-columns: 1fr auto; align-items: end; } }
.warte-klein { margin-top: var(--r5); font-size: var(--s-sm); color: var(--stumm); max-width: 62ch; }
.warte .lese + .lese { margin-top: var(--r4); }
.warte h2 + .lese { margin-top: var(--r5); }
.warte .hinweis { margin-top: var(--r7); }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.meldung { margin-top: var(--r5); padding: var(--r4) var(--r5); border-radius: var(--e-md); font-size: var(--s-sm); border: 1px solid; }
.meldung-gut    { background: var(--gutgrund);    border-color: var(--gutrand);    color: var(--gut); }
.meldung-fehler { background: var(--fehlergrund); border-color: var(--fehlerrand); color: var(--fehler); }

/* --- Fuss ------------------------------------------------------ */
.fuss { border-top: 1px solid var(--rand); background: var(--karte); padding-block: var(--r8); }
.fuss-innen { display: grid; gap: var(--r6); align-items: start; }
/* Zwei Knoepfe im Fusz statt einem: die Warteliste ist seit dem
   15.09.2026 der Hauptweg, der Weg in die App der stille daneben. */
.fuss-knoepfe { display: flex; flex-wrap: wrap; gap: var(--r3); align-items: center; }
@media (min-width: 860px) { .fuss-innen { grid-template-columns: 1fr auto auto; gap: var(--r8); } }
.fuss-marke { display: flex; gap: var(--r3); align-items: flex-start; }
.fuss-marke p { color: var(--stumm); font-size: var(--s-sm); max-width: 32ch; }
.fuss-wege { display: flex; flex-wrap: wrap; gap: 0 var(--r5); font-size: var(--s-sm); }
.fuss-wege a { display: inline-flex; align-items: center; min-height: 44px; color: var(--stumm); text-decoration: none; }
.fuss-wege a:hover { color: var(--text); text-decoration: underline; }

/* --- Rechtsseiten ---------------------------------------------- */
.recht { padding-block: var(--r8) var(--abschnitt); }
.recht .bahn { max-width: 760px; }
.recht h1 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.recht h2 { font-size: var(--s-h3); margin-top: var(--r8); }
.recht h3 { font-size: var(--s-md); margin-top: var(--r6); font-weight: 700; }
/* Zwischenueberschriften innerhalb eines Abschnitts. Erst seit
   Abschnitt 11 (15.09.2026) - ohne diese Zeile stuenden sie in der
   Browservorgabe: groeszer als die h3 darueber, mit fremden
   Abstaenden. Enger gesetzt als h3 und in --text, damit die Gliederung
   von oben nach unten leiser wird und nicht lauter. */
.recht h4 { font-size: var(--s-sm); margin-top: var(--r5); font-weight: 700;
            line-height: var(--z-mittel); letter-spacing: 0; color: var(--text); }
.recht p, .recht li { color: var(--stumm); margin-top: var(--r4); }
.recht li { margin-top: var(--r2); }
.recht ul { padding-left: var(--r5); margin-top: var(--r4); }
.recht strong { color: var(--text); }
.recht .stand { margin-top: var(--r7); font-size: var(--s-sm); color: var(--stumm); }
.recht dl { margin: var(--r4) 0 0; }
.recht dt { font-weight: 700; margin-top: var(--r5); }
.recht dd { margin: var(--r2) 0 0; color: var(--stumm); }

/* --- kleine Seiten (Bestaetigung, Abmeldung, 404) --------------- */
.klein { min-height: 60vh; display: grid; place-items: center; padding-block: var(--r9); }
.klein .bahn { max-width: 620px; text-align: center; }
.klein p { color: var(--stumm); margin-top: var(--r5); }
.klein .knopf { margin-top: var(--r7); }

/* --- Bewegung -------------------------------------------------- */
/* Startzustand der Einblendung. Ohne JavaScript hebt ohne-js.css das
   wieder auf, und der Waechter in seite.js tut dasselbe, falls die
   Bewegungsschicht nicht laedt. */
.zeig { opacity: 0; transform: translateY(14px); }
.zeig-da { opacity: 1; transform: none; transition: opacity var(--d-mit) var(--k-aus), transform var(--d-mit) var(--k-aus); }

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