/*
  Die gemeinsame Gestaltung aller Seiten unter kochbuch-web.

  Sie ist bewusst KEINE eigene Handschrift, sondern dieselbe wie in der App: Die
  Farben stehen wortgleich in ui/theme/Color.kt, die Radien und Abstaende in
  ui/theme/Dimens.kt, die Schriftrollen in ui/theme/Type.kt. Wer dort etwas
  aendert, aendert es hier mit - sonst sehen Store-Eintrag, Website und App nach
  drei verschiedenen Produkten aus.

  Kein Build-Schritt: eine Datei, statisch, fuer GitHub Pages. Der Rest des
  Auftritts sind reine HTML-Dateien, die sie einbinden.
*/

/* --- Die Schrift kommt von HIER, nicht von Google ------------------------- */
/*
  Die Seiten haben die Schrift frueher ueber fonts.googleapis.com geladen. Damit
  ging die IP-Adresse jedes Besuchers ohne Einwilligung an Google - genau der
  Fall, den das LG Muenchen I 2022 entschieden hat (Az. 3 O 17493/20) und der
  seitdem massenhaft abgemahnt wird. Auf einer DATENSCHUTZERKLAERUNG waere das
  besonders schlecht.

  **Zwei Schriften, dieselbe Aufteilung wie in der App** (ui/theme/Type.kt):
  Nunito traegt ausschliesslich Ueberschriften und Titel, Inter den Fliesstext,
  die Labels und die Zahlen. Bis zum 10.10.2026 stand hier Domine ueber den
  Ueberschriften und darunter schlicht die System-Sans - also weder dieselbe
  Ueberschriftenschrift wie die App noch ueberhaupt eine entschiedene fuer den
  Text. Der Kontrast Display/Sans ist die Hierarchie dieses Produkts; eine Seite,
  die ihn nicht traegt, sieht neben der App nach einem anderen Absender aus.

  Die Dateien sind woff2-SUBSETS der Variable Fonts aus der App
  (shared/src/commonMain/composeResources/font/) - erzeugt von
  tools/web_schrift_subset.py, Ergebnis eingecheckt. Domine lag hier als nackte
  360-KB-TTF; die beiden Subsets wiegen zusammen 120 KB und tragen trotzdem zwei
  Schriften statt einer. Die Begruendung von damals ("ein woff2-Subset waere
  kleiner, ist aber eine Optimierung, keine Voraussetzung") gilt nicht mehr:
  Zwei volle Variable-TTFs waeren 1,1 MB gewesen.

  **Die `font-weight`-Spanne muss zum Achsenbeschnitt des Subsets passen.** Das
  Skript schneidet Nunito auf 500-700 und Inter auf 400-600 - genau die
  Gewichte, die der Auftritt abruft. Eine weiter angegebene Achse laesst den
  Browser Gewichte versprechen, die die Datei nicht mehr hat; eine enger
  angegebene laesst ihn selbst faelschen (synthetisches Fett).

  `font-display: swap` zeigt sofort die Ersatzschrift statt einer leeren Flaeche.
*/
@font-face {
  font-family: "Nunito";
  src: url("schrift/nunito.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("schrift/inter.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /*
    60 % neutrale Basis - die Werte und ihre ROLLEN aus Color.kt (Stand 10.10.2026):
    --sand-100 ist der Grund UND die Karte, --sand-50 die Schrift auf Terracotta
    und die ruhige Zwischenstufe.

    **Der Grund ist seit dem 10.10.2026 wieder getoent** (Sand statt Weiss) - die
    App ist es, und eine weisse Website daneben ist der Bruch, den man zuerst
    sieht. Vom 15.09. bis 10.10. stand hier Weiss, davor ein Pfirsich.

    Dass Grund und Karte DERSELBE Ton sind, ist Absicht und kein Sparzwang: Was
    sich abheben soll, tut das ueber die Toenung (--clay-100) oder ueber seinen
    Rand - nicht ueber eine zweite Sandstufe, die es in Color.kt nicht gibt.

    --sand-50 ist damit HELLER als der Grund (1,16:1). Das ist auf der Website
    harmlos, weil sie die kritische Rolle der App nicht hat (dort ist es die
    Rezeptkarte ohne Bild): Hier traegt sie nur ruhige Flaechen MIT Rand.

    --sand-400 ist der Umriss mit Bedeutung (3,01:1 gegen den Sandgrund, Schwelle
    WCAG 1.4.11), --sand-200 die leise Trennlinie (1,31:1 - die muss nur zu sehen
    sein, nicht lesbar). Beide sind am 10.10. mit dem Grund nachgezogen worden;
    die alten Werte lagen bei 2,43:1 bzw. 1,06:1 und damit unter der Schwelle
    bzw. unsichtbar.
  */
  --sand-50:  #F9F2E9;
  --sand-100: #E8E2D6;
  --sand-200: #D9C4AE;
  --sand-400: #9B7B65;

  /* 30 % Text und Struktur - dunkles Rotbraun, kein neutrales Grau */
  --ink-900:  #2A1A13;
  --ink-700:  #4A3227;
  --ink-500:  #796054;

  /*
    10 % Akzent. Nur ZWEI Werte dieser Palette sind gesetzt - --sand-100 und
    --clay-500; jeder andere ist das Ergebnis einer Schwelle. Wer einen Ton
    verschiebt, rechnet sein Paar nach (tools/farbprobe/ in der App).

    --clay-500 ist am 10.10.2026 eine Stufe tiefer gegangen (#B54A2E -> #A7482E),
    und nicht dem Knopf zuliebe: Auf dem getoenten Grund traegt der Akzent als
    TEXT nur noch 4,51:1 - mit dem alten Wert waeren es 4,09:1 gewesen. Gegen
    --sand-50 als Schrift auf dem Knopf haelt er 5,24:1.

    --clay-100 musste mit dem Sandgrund TIEFER, nicht heller (#FBEADF ->
    #E4C5B5), und das ist der unerwartetste Teil der Umrechnung: --sand-100 liegt
    mit einer Leuchtdichte von 0,764 MITTEN im Bereich der alten Toenung, jeder
    hellere Kandidat landet bei 1,01 bis 1,17:1 und verschwindet im Grund.
  */
  --clay-500: #A7482E;
  --clay-600: #6E2D1B;
  --clay-100: #E4C5B5;

  /*
    Sage traegt auf der Website genau zwei Dinge: den Haken der
    Bestaetigungsseite und den Punkt der Statuszeile. Beide am 10.10. mit dem
    Grund nachgezogen. --sage-500 auf --sage-100 kommt dabei auf 3,61:1 - das
    genuegt, weil es dort GRAFIK ist (ein Strichpfad, Schwelle 3:1) und kein Text.
  */
  --sage-500: #4B6E40;
  --sage-100: #BAD3AF;
  /*
    ShadowTint aus Color.kt hat hier KEINE Entsprechung mehr: Der Auftritt wirft
    keine Schatten. Karten trennt ihr Rand, Bahnen trennt ihre Flaeche. Der
    Token stand hier, solange es Schatten gab, und ist mit ihnen gegangen.
  */

  /* Dimens.kt: Spacing.xs ... Spacing.xxxl */
  --sp-xs:   4px;
  --sp-sm:   8px;
  --sp-md:  12px;
  --sp-lg:  16px;
  --sp-xl:  24px;
  --sp-2xl: 32px;
  --sp-3xl: 48px;

  /* Dimens.kt: Radius.sm ... Radius.xxl */
  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-xxl: 28px;

  /* Die App ist bewusst hell - kein Umfaerben durch den Browser. */
  color-scheme: light;
}

* { box-sizing: border-box; }

/*
  Weiches Scrollen nur fuer die, die Bewegung nicht abbestellt haben: Ein Sprung
  ueber die halbe Startseite ist genau die Art Bewegung, die bei
  vestibulaeren Beschwerden Uebelkeit ausloest (WCAG 2.3.3).
*/
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--sand-100);
  color: var(--ink-700);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Kopf und Fuss ------------------------------------------------------- */

/*
  Derselbe Kopf wie auf der Startseite, und das ist der Grund fuer den ganzen
  Umbau dieser Datei: Wer aus der App auf die Datenschutzerklaerung tippt, soll
  nicht das Gefuehl haben, das Produkt gewechselt zu haben. Klebend, weil die
  Datenschutzerklaerung 380 Zeilen lang ist - der Weg zurueck zur Startseite
  war vorher nur am Seitenanfang erreichbar.
*/
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--sand-100) 92%, transparent);
  backdrop-filter: blur(12px);
  transition: border-color 0.3s ease;
}

.kopf[data-gescrollt="ja"] { border-bottom-color: var(--sand-200); }

/*
  Der Weg an der Kopfzeile vorbei. Sichtbar nur im Fokus - deshalb ausserhalb
  des Bildes statt auf display:none, das der Tabreihenfolge entginge.
*/
.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px var(--sp-lg);
  border-radius: 0 0 var(--r-md) 0;
  background: var(--ink-900);
  color: var(--sand-50);
  text-decoration: none;
  font-weight: 600;
}

.sprung:focus-visible { left: 0; outline-color: var(--clay-warm, #E9AA98); }

/*
  Der Fokusring steht HIER und nicht in start.css: Er gehoert zu jeder Seite,
  und die Rechtsseiten hatten bis dahin gar keinen eigenen - sie erbten den des
  Browsers, der auf hellem Sand kaum zu sehen ist.
*/
:focus-visible {
  outline: 2px solid var(--clay-600);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--clay-100); color: var(--ink-900); }

/*
  42rem fuer den FLIESSTEXT: Eine Rechtsseite wird gelesen, nicht ueberflogen,
  und ab etwa 90 Zeichen je Zeile findet das Auge den Anfang der naechsten nicht
  mehr zuverlaessig.
*/
.inhalt {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 var(--sp-xl);
}

/*
  Kopf und Fuss dagegen auf derselben Breite wie die Startseite (74rem, dort
  `.bahn`). Sie sind Seitenelemente, kein Lesetext - stehen sie auf 42rem,
  ruecken Marke und Navigation auf jeder Rechtsseite weiter nach innen als auf
  der Startseite, und beim Wechsel springt der Kopf sichtbar.
*/
.kopf-inhalt,
.fuss-inhalt {
  width: min(100% - 2 * var(--sp-xl), 74rem);
  margin-inline: auto;
}

/*
  Eine Kopfzeile fuer den ganzen Auftritt: links die Marke, rechts dieselben drei
  Anker und der Sprachumschalter. Auf den Rechtsseiten zeigen die Anker auf die
  Startseite - wer im Impressum steht, will von dort aus zurueck in die Seite und
  nicht erst ueber die Marke und dann ein zweites Mal klicken.

  Unterschiedlich ist allein der Container darum: `.kopf-inhalt` haelt die
  Rechtsseiten auf ihren 42rem, `.bahn` die Startseite auf 74rem.
*/
.kopf-inhalt,
.kopf-reihe {
  display: flex;
  align-items: center;
  gap: var(--sp-xl);
  min-height: 68px;
}

.marke { margin-right: auto; }

.kopf-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-xl);
  font-size: 0.95rem;
}

.kopf-nav a {
  color: var(--ink-700);
  text-decoration: none;
  padding: var(--sp-xs) 0;
  border-bottom: 1px solid transparent;
}

.kopf-nav a:hover { color: var(--ink-900); border-bottom-color: var(--clay-500); }

/*
  Auf schmalen Bildschirmen bleiben nur Marke und Sprache stehen. Die drei Anker
  fallen weg statt zu einem Hamburger zu werden: Es sind Sprungmarken innerhalb
  einer Seite, kein Menue - und im Fuss stehen sie ohnehin noch einmal.
*/
@media (max-width: 60rem) {
  .kopf-nav .nur-breit { display: none; }
}

/*
  Gemischt und in Ink900, nicht mehr gesperrt in Terracotta-Versalien. Die alte
  Fassung stammt aus der Zeit, als es nur die Bestaetigungsseite gab; seit der
  Startseite steht dieselbe Marke zweimal verschieden da.

  In Ink900 bleibt sie ausserdem unabhaengig von der Palette: Der Markenton hielt
  als Schrift auf dem Grund damals 4,25:1 und heute 4,51:1 - beides zu knapp fuer
  etwas, das auf jeder Seite oben links steht.
*/
.marke {
  font-family: "Nunito", system-ui, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--ink-900);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
}

/*
  Das App-Logo neben dem Schriftzug - dieselbe Datei, die auch als Favicon
  haengt (bilder/logo.svg). Bewusst eine gemeinsame Quelle statt eines zweiten,
  inline gezeichneten Logos: Zwei Fassungen laufen auseinander, und beim Icon
  faellt genau das nicht auf.

  Die Sperrung des Schriftzugs (0.12em) legt rechts vom letzten Buchstaben Luft
  an, links vom ersten aber nicht - das Logo stuende sonst optisch zu nah.
  Deshalb ein eigener Abstand hier und nicht nur das gap.
*/
.marke-logo {
  display: block;
  margin-right: 0.1rem;
  flex: none;
}

.marke:hover { color: var(--clay-600); }

/*
  Der Sprachumschalter - zwei Kuerzel, das aktuelle ohne Verweis. Die
  Tippflaeche ist groesser als die Schrift: Zwei Buchstaben bei 12,8px sind rund
  20px hoch, verlangt sind 44 (WCAG 2.5.5). Das Polster gehoert an den Link,
  nicht an den Container - sonst waechst nur der Abstand, nicht das Ziel.
*/
.sprachen {
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.sprachen a,
.sprachen > span[aria-current] {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  min-height: 44px;
}

.sprachen a { color: var(--ink-500); text-decoration: none; }
.sprachen a:hover { color: var(--clay-600); }
.sprachen [aria-current="true"] { color: var(--ink-900); font-weight: 600; }

/* --- Der Fuss, gemeinsam fuer alle Seiten -------------------------------- */
/*
  Er stand frueher nur auf der Startseite (dort hiess er `.start-fuss`), und die
  Rechtsseiten trugen darunter eine blasse Linkzeile. Zwei Fuesse fuer einen
  Auftritt: Wer aus der App auf die Datenschutzerklaerung tippt, landete auf
  einer Seite, die mit der Startseite nur die Schrift gemein hatte.

  Die Breite kommt von aussen (`.fuss-inhalt` traegt hier 42rem, auf der
  Startseite `.bahn` 74rem) - der Fuss selbst legt sie nicht fest.
*/
/*
  Kein margin-top: Auf der Startseite schliesst der Fuss unmittelbar an die
  letzte Bahn an, und ein Abstand hier risse dort einen hellen Streifen auf. Den
  Luftraum ueber dem Fuss bringt der Textbereich der Rechtsseiten selbst mit
  (siehe `.inhalt`).
*/
.seitenfuss {
  background: var(--ink-900);
  color: #C4B2A4;
  padding: var(--sp-3xl) 0 var(--sp-2xl);
  font-size: 0.92rem;
}

.fuss-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--sp-2xl);
  padding-bottom: var(--sp-2xl);
  border-bottom: 1px solid rgba(243, 235, 226, 0.14);
}

.fuss-marke {
  font-family: "Nunito", system-ui, "Segoe UI", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #F3EBE2;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  text-decoration: none;
}

.fuss-satz { margin-top: var(--sp-md); max-width: 22rem; line-height: 1.6; }

.fuss-spalte b {
  display: block;
  color: #F3EBE2;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-md);
}

/* Mindestens 40px hoch: auf dem Telefon sind das die einzigen Navigationslinks. */
.fuss-spalte a {
  display: flex;
  align-items: center;
  min-height: 40px;
  color: #C4B2A4;
  text-decoration: none;
}

.fuss-spalte a:hover { color: #E9AA98; }

/*
  Die Seite, auf der man gerade steht, ist im Fuss hervorgehoben. `aria-current`
  allein saehe nur ein Screenreader - und wer vier Rechtstexte untereinander
  verlinkt, sollte auch mit den Augen erkennen, welcher davon offen ist.
*/
.fuss-spalte a[aria-current="page"] { color: #F3EBE2; font-weight: 600; }

.fuss-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  padding-top: var(--sp-xl);
  font-size: 0.85rem;
}

/* Clay600 haelt auf Ink900 nur 2,7:1 - dort braucht der Ring den warmen Ton. */
.seitenfuss :focus-visible { outline-color: #E9AA98; }

.seitenfuss .sprachen,
.seitenfuss .sprachen a { color: #C4B2A4; }
.seitenfuss .sprachen a:hover { color: #E9AA98; }
.seitenfuss .sprachen [aria-current="true"] { color: #F3EBE2; }

@media (max-width: 62rem) {
  .fuss-raster { grid-template-columns: 1fr 1fr; gap: var(--sp-2xl); }
}

@media (max-width: 34rem) {
  .fuss-raster { grid-template-columns: 1fr; }
}

/* --- Fliesstext ---------------------------------------------------------- */

main { padding: var(--sp-2xl) 0 var(--sp-3xl); }

/*
  Gewicht 600 und dieselbe optische Groesse wie auf der Startseite. 700 war eine
  Stufe zu fett: Die Serife traegt als Variable Font bei 700 deutlich mehr
  Strichkontrast, und neben einer 600er-Startseite sah dieselbe Marke zweimal
  verschieden aus.
*/
h1 {
  font-family: "Nunito", system-ui, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: clamp(1.85rem, 1.35rem + 2.1vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ink-900);
  margin: 0 0 var(--sp-md);
}

h2 {
  font-family: "Nunito", system-ui, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--ink-900);
  margin: var(--sp-2xl) 0 var(--sp-md);
  /*
    Sprungmarken aus dem Inhaltsverzeichnis duerfen nicht unter dem Kopf
    verschwinden - und der klebt jetzt, also braucht es seine volle Hoehe
    plus Luft statt der frueheren 24px.
  */
  scroll-margin-top: 84px;
}

h3 {
  font-family: "Nunito", system-ui, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--ink-900);
  margin: var(--sp-xl) 0 var(--sp-xs);
  scroll-margin-top: 84px;
}

p, ul, ol, table { margin: 0 0 var(--sp-lg); }

ul, ol { padding-left: var(--sp-xl); }
li { margin-bottom: var(--sp-xs); }

/*
  Clay600 statt Clay500, und das bleibt so.

  Als die Regel entstand, war sie eine Notwendigkeit: Clay500 (#B54A2E) kam auf
  Sand50 auf 4,25:1 und in einer Karte auf 3,94:1 - beides unter den 4,5:1 fuer
  Text dieser Groesse, und das betraf JEDEN Link in den Rechtstexten, also
  ausgerechnet die Seiten, die im Play-Eintrag verlinkt sind.

  Mit dem tieferen #A7482E traegt Clay500 jetzt 4,51:1 auf dem Grund und waere
  damit zulaessig - aber mit einem Hundertstel Luft. Ein Datenschutztext ist
  die falsche Stelle fuer eine Farbe, die bei der naechsten Verschiebung des
  Grundes umkippt; Clay600 haelt 7,93:1. Dass Links hier ruhiger stehen als der
  Markenton, ist auf einer Seite mit 380 Zeilen Fliesstext ohnehin richtig.
*/
a { color: var(--clay-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* Im Hover bleibt die Farbe und der Strich wird dicker - ein Zustand ist von
   der Kontrastregel nicht ausgenommen. */
a:hover { text-decoration-thickness: 2px; }

strong { color: var(--ink-900); font-weight: 600; }

.vorspann {
  font-size: 1.1rem;
  color: var(--ink-500);
  margin-bottom: var(--sp-xl);
}

.stand {
  font-size: 0.85rem;
  color: var(--ink-500);
  margin-bottom: var(--sp-2xl);
}

/* --- Karten und Hinweise ------------------------------------------------- */

.karte {
  background: var(--sand-100);
  border: 1px solid var(--sand-200);
  border-radius: var(--r-xxl);
  padding: var(--sp-xl);
  margin-bottom: var(--sp-lg);
}

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

/*
  Der Akzentkasten fuer das eine, was auf einer Seite heraussticht - ein
  Warnhinweis, ein Handlungsweg. Sparsam einsetzen: Zwei davon nebeneinander
  heben sich gegenseitig auf.
*/
.hinweis {
  background: var(--clay-100);
  border-radius: var(--r-lg);
  padding: var(--sp-lg) var(--sp-xl);
  margin-bottom: var(--sp-lg);
}

.hinweis > :last-child { margin-bottom: 0; }

/*
  Rot markierte Platzhalter, die vor der Veroeffentlichung gefuellt werden
  MUESSEN. Absichtlich haesslich: Ein dezenter Platzhalter im Impressum
  ueberlebt jede Durchsicht.

  **Am 10.10.2026 umgedreht**, und zwar nicht aus Geschmack: Der Chip war ein
  blasses Rosa (#FCE9E7) mit rotem Text - auf Weiss eine Flaeche, auf dem
  Sandgrund mit 1,10:1 keine mehr. Ein Platzhalter, der mit dem Grund
  verschwimmt, ist genau der Fehler, gegen den diese Regel geschrieben wurde.
  Jetzt volle Flaeche in Alert500: 5,07:1 gegen den Grund, 5,88:1 fuer die
  Schrift darauf. Die Werte stehen woertlich in Color.kt.
*/
.todo {
  background: #B3261E;
  color: var(--sand-50);
  border-radius: var(--r-sm);
  padding: 2px 6px;
  font-weight: 600;
}

/* --- Tabellen ------------------------------------------------------------ */

.tabelle { width: 100%; overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: var(--sp-sm) var(--sp-md) var(--sp-sm) 0;
  border-bottom: 1px solid var(--sand-200);
}

th { color: var(--ink-900); font-weight: 600; }

/* --- Inhaltsverzeichnis -------------------------------------------------- */

.verzeichnis {
  background: var(--sand-100);
  border: 1px solid var(--sand-200);
  border-radius: var(--r-lg);
  padding: var(--sp-lg) var(--sp-xl);
  margin-bottom: var(--sp-2xl);
}

.verzeichnis ol {
  margin: 0;
  padding-left: var(--sp-lg);
  font-size: 0.95rem;
}

.verzeichnis li { margin-bottom: var(--sp-xs); }

/* --- Die Startseite steht in start.css ----------------------------------- */
/*
  Hier standen frueher .held, .knopf, .kacheln und .kachel - die Bauteile der
  alten Startseite, die aus einer Textspalte und zwei Kachelreihen bestand. Die
  Startseite ist seit dem Umbau eine eigene Welt (web/start.css) und benutzt
  keinen dieser Namen mehr; die Rechtsseiten haben sie nie benutzt. Sie stehen
  bewusst NICHT vorsichtshalber weiter hier: Totes CSS ist die Sorte Ballast,
  die beim naechsten Umbau als "wird schon irgendwo gebraucht" ueberlebt.
*/

/* --- Die Bestaetigungsseite ---------------------------------------------- */
/*
  confirmed/index.html ist die einzige Seite ohne Kopf und Fuss: Sie ist das
  Ende eines Vorgangs, kein Ort zum Weiterlesen. Deshalb zentriert und ohne
  jeden Ausgang.
*/

body.mittig {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-xl);
}

.mittig .karte {
  width: 100%;
  max-width: 26rem;
  padding: 40px 32px 36px;
  text-align: center;
  animation: auftauchen 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.mittig .marke { display: inline-flex; margin-bottom: var(--sp-xl); font-size: 0.95rem; }

.haken {
  width: 84px;
  height: 84px;
  margin: 0 auto var(--sp-xl);
  border-radius: 50%;
  background: var(--sage-100);
  display: grid;
  place-items: center;
  animation: aufploppen 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) 0.1s both;
}

.haken svg { width: 40px; height: 40px; display: block; }

.haken path {
  fill: none;
  stroke: var(--sage-500);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: zeichnen 0.45s ease-out 0.35s both;
}

.mittig h1 { font-size: 1.75rem; }
.mittig p  { margin: 0; }

@keyframes auftauchen {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes aufploppen {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes zeichnen {
  to { stroke-dashoffset: 0; }
}

/* Wer Bewegung abbestellt hat, bekommt dasselbe Bild - nur sofort. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mittig .karte, .haken, .haken path { animation: none; }
  .haken path { stroke-dashoffset: 0; }
}