/* Shared styles for the Sauerteig Tools website collection
   (Sammelseite + DoughCalculator + future DoughPilot Web) */

/* Das hidden-Attribut gewinnt immer, auch gegen display-Regeln einzelner Klassen. */
[hidden] {
  display: none !important;
}

:root {
  --color-bg: #f7f4ea;
  --color-surface: #ffffff;
  --color-border: #e2ddcc;
  --color-text: #1f2c23;
  --color-text-muted: #5c6b5f;
  --color-primary: #2d4635;
  --color-primary-dark: #24382a;
  --color-primary-contrast: #f7f4ea;
  /* Gold ist der Akzent, nicht die Grundfarbe - sparsam einsetzen, sonst
     kippt die Seite ins Dekorative. Im Zeichen tragt es den Laib. */
  --color-accent: #b8862c;
  --color-danger: #a8412c;
  /* Flaechen, die sich nicht allein aus den Farben oben ergeben: der
     Teaser-Verlauf, die Badge und die beiden Hover-Toene. Als Variablen
     gefuehrt, damit der Dark-Mode-Block unten sie mit umschalten kann,
     statt dass irgendwo ein heller Farbwert stehen bleibt. */
  --color-teaser-top: #f2efdf;
  --color-teaser-border: #d8d0b4;
  --color-badge-bg: #eae6d5;
  --color-btn-hover: #f1eee2;
  --color-danger-hover: #f8eae7;
  /* Ergebnisflaeche (Quelle: App DoughCalculator, Theme.swift, D29/D32):
     alle berechneten Ausgaben stehen auf diesem Gruen, Eingaben bleiben auf
     --color-bg. Kontur = Hauptfarbe mit 35 % Deckkraft. */
  --color-result-bg: #e0eee0;
  --color-result-border: rgba(45, 70, 53, 0.35);
  --radius: 10px;
  --shadow: 0 1px 3px rgba(31, 44, 35, 0.08), 0 1px 2px rgba(31, 44, 35, 0.06);
  --shadow-hover: 0 4px 14px rgba(31, 44, 35, 0.12);
  --max-width: 880px;
  font-size: 16px;
  /* Laesst Scrollbalken, Zahlenfelder und Auswahllisten im Dark Mode
     mitziehen. Ohne das bleiben genau diese nativen Bedienelemente hell
     und stechen aus der dunklen Seite heraus. */
  color-scheme: light dark;
}

/* Dunkle Variante, automatisch nach Systemeinstellung. Statt neutralem Grau
   ein sehr dunkles Gruen, damit die Seite in beiden Modi dieselbe Anmutung
   behaelt. Die Rollen von Gruen und Gold tauschen dabei - siehe Kommentar
   unten. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #141c17;
    --color-surface: #1d2821;
    --color-border: #324439;
    --color-text: #edf1e8;
    --color-text-muted: #a2b3a6;
    /* Rollentausch gegenueber hell: Dort ist Dunkelgruen die Akzentflaeche
       (aktiver Umschalter, Kachel im Kopf) mit hellem Text darauf. Auf
       dunkelgruenem Grund haette dieselbe Farbe keinen Kontrast mehr,
       deshalb uebernimmt hier Gold diese Rolle - genau wie im Zeichen. */
    --color-primary: #d2a04a;
    --color-primary-dark: #e3ba71;
    --color-primary-contrast: #141c17;
    /* Dunkler als das helle Pendant erwarten liesse, und das mit Absicht:
       Im Dark Mode traegt die Uebersicht Gold (#d2a04a). Das bisherige
       #8fb39a hatte praktisch dieselbe Helligkeit wie dieses Gold -
       nachgemessen 1,02:1 -, die beiden Raender unterschieden sich also
       allein im Farbton. Wer Farben schlecht unterscheidet, saehe zweimal
       dasselbe. Mit diesem Wert liegen sie bei 1,67:1 und bleiben zugleich
       mit 3,85:1 gegen die Kartenflaeche ueber der Schwelle fuer
       Bedienelemente. */
    --color-accent: #5c8a6c;
    --color-danger: #e0806c;
    --color-teaser-top: #23301f;
    --color-teaser-border: #3d4a2e;
    --color-badge-bg: #324439;
    --color-btn-hover: #26332b;
    --color-danger-hover: #3a2723;
    --color-result-bg: #324439;
    --color-result-border: rgba(210, 160, 74, 0.35);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.5);
  }
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
}

a {
  color: var(--color-primary-dark);
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px 64px;
}

header.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0 18px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 28px;
}

/* Hinweis-Banner auf die andere Sprachfassung (C1, 03.10.2026). Standardmaessig
   per [hidden] unsichtbar - das Inline-Skript in build.js (buildLangSuggestBanner)
   blendet es nur ein, wenn die Browser-Sprache von der Seitensprache abweicht.
   Dadurch verschiebt sich bei den meisten Besuchern gar nichts; margin-top statt
   margin-bottom auf dem Header haette ein Layout-Zucken verursacht, sobald das
   Skript nachtraeglich einblendet. */
.lang-suggest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -14px 0 24px;
  /* -14px zieht das Banner naeher an den Header heran, statt den vollen
     28px-Abstand des Headers plus einen eigenen obendrauf zu haben - bleibt
     aber deutlich unter dessen Rahmenlinie. */
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  font-size: 0.9rem;
  color: var(--color-text);
}

.lang-suggest p {
  margin: 0;
}

.lang-suggest a {
  color: var(--color-accent);
}

.lang-suggest-close {
  flex: none;
  background: none;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px 6px;
}

.brand {
  display: flex;
  /* Mittig statt auf der Schriftlinie: Bei "baseline" haengt sich das
     34px-Zeichen an die Grundlinie der ersten Textzeile und sitzt dadurch
     tiefer als seine eigene Mitte. Auf der Sammelseite mit ihrer zweiten
     Zeile faellt das zusaetzlich gegen den Sprachumschalter auf, der ueber
     die Kopfzeile ohnehin mittig sitzt. Mit "center" liegen Zeichen,
     Wortmarke und Umschalter auf einer Mittellinie. */
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.brand .logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: 700;
  font-size: 16px;
  flex: none;
}

/* Das Zeichen im Seitenkopf gibt es in zwei Formen: als Bild (Rechner-Seite,
   siehe favicon.svg) und als Buchstabenkachel (Sammelseite, solange dort noch
   kein eigenes Zeichen existiert). Die Bildvariante bringt Flaeche und Rundung
   selbst mit, deshalb muss der Kachelhintergrund hier wieder weg - sonst
   schaut er an den abgerundeten Ecken hervor. */
img.logo-mark {
  background: none;
}

/* Wortmarke: fettes "Dough" plus leichtes Suffix. Das bindet die Produkte
   (DoughCalculator, spaeter DoughPilot) sichtbar zusammen, ohne dass sie
   dasselbe Zeichen tragen muessen. Seiten ohne <b> bleiben unveraendert
   fett - die Sammelseite hat nur ein Wort. */
.brand .brand-name {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.brand .brand-name.wordmark {
  font-weight: 400;
}

.brand .brand-name.wordmark b {
  font-weight: 700;
}

.brand .brand-tag {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Sprachmenue (Block 73): <details> mit Globus und Kuerzel, darin echte Links.
   Die aktuelle Sprache steht als <span> mit Haekchen, ohne Link - nur so kann
   eine Suchmaschine der anderen Fassung ueberhaupt folgen. */
.lang-menu {
  position: relative;
  flex: none;
}

.lang-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
}

.lang-menu summary::-webkit-details-marker {
  display: none;
}

.lang-menu summary:hover {
  color: var(--color-text);
}

.lang-menu summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.lang-menu-code {
  font-weight: 600;
}

.lang-menu-arrow {
  transition: transform 0.15s;
}

.lang-menu[open] .lang-menu-arrow {
  transform: rotate(180deg);
}

.lang-menu ul {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  min-width: 11rem;
  max-width: calc(100vw - 40px);
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.lang-menu li a,
.lang-menu li span {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px 0 28px;
  position: relative;
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--color-text);
  text-decoration: none;
}

.lang-menu li a:hover {
  background: var(--color-btn-hover);
}

.lang-menu li a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.lang-menu li span {
  font-weight: 600;
}

.lang-menu li span::before {
  content: "\2713";
  position: absolute;
  left: 9px;
}

@media (max-width: 560px) {
  .lang-menu summary {
    min-height: 40px;
  }
}

h1 {
  font-size: 1.6rem;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.15rem;
  margin: 0 0 12px;
}

h3 {
  font-size: 0.98rem;
  margin: 20px 0 6px;
}

p.lede {
  color: var(--color-text-muted);
  max-width: 60ch;
  margin: 0 0 28px;
}

/* Einleitung des Rechners: ueber die volle Seitenbreite statt 60ch. Der Text
   ist lang (vier Bereiche in einem Absatz) und stand auf dem Computer als
   schmale Spalte neben viel leerem Platz (Stefan, 14.10.2026). */
p.lede.lede-breit {
  max-width: none;
}

/* Hinweis auf eine Uebersetzung (Datenschutzseite sv, Block 74): hervorgehoben,
   weil rechtlich allein die deutsche Fassung gilt. */
p.translation-notice,
p.buch-draft {
  background: var(--color-result-bg);
  border: 1px solid var(--color-result-border);
  border-radius: var(--radius);
  font-weight: 600;
  max-width: 60ch;
  margin: 0 0 20px;
  padding: 12px 16px;
}

/* Fliesstext-Abschnitte (z.B. die Erklaerungen unter dem Rechner).
   Schmalere Zeilen als der Rest der Seite - eine Textspalte ueber die
   vollen 880px waere unangenehm zu lesen.

   Zum Wert: ch ist die Breite der Ziffer "0" und damit breiter als der
   Durchschnittsbuchstabe - 68ch ergaben nachgemessen 67 bis 83 echte
   Zeichen je Zeile, also am oberen Ende deutlich ueber der angenehm
   lesbaren Spanne von 45 bis 75. Mit 55ch liegen dieselben Absaetze bei
   60 bis 67 Zeichen. Auf dem Handy greift der Wert ohnehin nicht, dort
   ist der Bildschirm schmaler als 55ch. */
.prose p {
  color: var(--color-text-muted);
  max-width: 55ch;
  margin: 0 0 4px;
}

/* Rechner-Seite: Erklaertexte (FAQ, Teaser-Karten) ueber die volle
   Kartenbreite statt 55ch/68ch, wie die Einleitung (Entscheidung Stefan,
   20.10.2026). Nur dort wirksam - die Seite ist an der h1 mit
   data-i18n="pageHeading" erkennbar; Datenschutz, Support, Startseite und
   DoughCaptain-Seite behalten die schmale Lesespalte. */
main:has(> h1[data-i18n="pageHeading"]) .prose p,
main:has(> h1[data-i18n="pageHeading"]) .teaser-card p {
  max-width: none;
}

.prose h3:first-of-type {
  margin-top: 8px;
}

/* Hinweis auf die kommende DoughCaptain-App. Bewusst abgesetzt vom Rest:
   hier koennen Besucher sich freiwillig fuer eine Mail zum App-Start
   eintragen (T35, 02.10.2026) - also darf er auffallen. */
.teaser-card {
  background: linear-gradient(180deg, var(--color-teaser-top) 0%, var(--color-surface) 100%);
  border-color: var(--color-teaser-border);
  margin-top: 20px;
}

.teaser-card h2 {
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Das App-Zeichen neben der Teaser-Ueberschrift. Es steht hier stellvertretend
   fuer das Produkt, das es noch nicht gibt - deshalb bewusst klein und neben
   der Zeile, nicht als grosse Flaeche. */
.teaser-mark {
  border-radius: 7px;
  flex: none;
}

/* Auf der Sammelseite waren die Kachelsymbole Emoji. Als Bild braucht es die
   Schriftgroessen-Regel nicht mehr, dafuer die Rundung des Zeichens. */
img.tool-icon {
  border-radius: 9px;
  display: block;
}

/* Dunkle Kacheln brauchen im Dark Mode einen Rand, sonst verschwinden sie auf
   dem dunklen Seitengrund (Kontrast rund 1,7:1). Der Rand liegt hier in der
   Seite und nicht im SVG: Die Medienabfrage im Bild wurde auf dem iPhone
   unzuverlaessig ausgewertet - mal fehlte er beim Rechner, mal beim Buch
   (Stefan, 14.10.2026). Das Favicon im Tab behaelt seine Regel im SVG, dort
   kann keine Seiten-CSS greifen. Radius = 14/64 wie rx im SVG. Das Zeichen der
   Sammelseite (alltagshelfer) ist ausgenommen: Es ist in Gold schon
   kontrastreich genug. */
@media (prefers-color-scheme: dark) {
  img.tool-icon,
  .teaser-mark,
  .group-mark,
  .brand img.logo-mark:not([src*="alltagshelfer"]) {
    box-shadow: 0 0 0 1px #5c8a6c;
    border-radius: 21.875%;
  }
}

.teaser-card p {
  margin: 0;
  color: var(--color-text-muted);
  max-width: 68ch;
}

/* Anmeldung zum DoughCaptain-Start (T35). Gebraucht im Teaser des Rechners
   und auf /doughcaptain/. Feld und Knopf in einer Zeile, auf dem Handy
   untereinander. */
.launch-signup {
  margin-top: 16px;
  max-width: 68ch;
}

.launch-signup-label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.launch-signup-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.launch-signup-row input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  /* 16px verhindert das automatische Hineinzoomen von iOS beim Antippen. */
  font-size: 16px;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
}

.launch-signup-row input[type="email"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.launch-signup-row .btn {
  flex: none;
  justify-content: center;
}

.launch-signup-row .btn:disabled,
.launch-signup-row input:disabled {
  opacity: 0.6;
  cursor: default;
}

.teaser-card .launch-signup-note,
.launch-signup-note {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.launch-signup-note a {
  color: inherit;
}

.teaser-card .launch-signup-status,
.launch-signup-status {
  margin: 8px 0 0;
  font-size: 0.92rem;
  color: var(--color-text);
}

.launch-signup-status:empty {
  display: none;
}

.launch-signup-status.is-ok {
  font-weight: 600;
  color: var(--color-primary-dark);
}

.launch-signup-status.is-error {
  color: var(--color-danger);
}

/* Nach erfolgreichem Absenden braucht es Feld und Knopf nicht mehr. */
.launch-signup.is-done .launch-signup-label,
.launch-signup.is-done .launch-signup-row {
  display: none;
}

/* Honeypot: fuer Menschen unsichtbar, fuer einfache Bots ein ganz normales
   Feld. Nicht display:none - das erkennen manche Bots und lassen es aus. */
.launch-signup-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 520px) {
  .launch-signup-row .btn {
    flex: 1 1 100%;
  }
}

/* Ergebnis des Bestaetigungs-/Abmeldelinks auf /doughcaptain/. */
.launch-result h2 {
  margin-top: 0;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 20px;
}

/* Drei Ebenen statt lauter gleich aussehender Karten: Die Karte ist das
   Werkzeug, die Uebersicht das Ergebnis, der Fliesstext Beiwerk. Das ist
   eine Frage der Bedeutung und nicht des Platzes - deshalb gilt es in
   jeder Breite. (Anlass war die Enge auf dem Handy, das Argument gilt
   aber genauso auf dem Desktop, und wer zwischen beiden wechselt, soll
   dieselbe Gliederung vorfinden.)

   Spezifitaet: ".card.summary-card" schlaegt ".card" oben, die
   Reihenfolge im Stylesheet ist hier also nicht ausschlaggebend. */
.card.summary-card {
  border-color: var(--color-primary);
  border-width: 2px;
}

/* Zwei gleich wichtige Karten, zwei Farben. Das Skalieren ist der zweite
   Grund, aus dem jemand die Seite aufruft, und war als schlichte Karte
   leicht zu uebersehen. Es bekommt deshalb dasselbe Gewicht wie die
   Uebersicht - gleiche Randstaerke -, aber die Akzentfarbe statt der
   Markenfarbe: hier wird eingestellt, dort abgelesen. Beide gleich zu
   faerben waere der naheliegende Weg gewesen und der falsche - dann sehen
   zwei von drei Karten gleich aus, und die Hervorhebung sagt nichts mehr.

   Dass die Farbwelt im Dark Mode die Rollen von Gruen und Gold tauscht,
   trifft auch diese beiden Raender: hell ist Skalieren gold, dunkel
   gedaempft gruen. Innerhalb eines Modus bleiben sie unterscheidbar, und
   beide Modi sieht niemand nebeneinander. */
.card.scale-card {
  border-color: var(--color-accent);
  border-width: 2px;
}

/* Der Erklaerabschnitt traegt keine Karte, sondern steht direkt auf dem
   Seitengrund, abgesetzt durch eine feine Linie. "border: none" muss vor
   "border-top" stehen, sonst raeumt die Kurzschreibweise die Linie wieder
   ab. */
.card.prose {
  background: none;
  border: none;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  padding: 4px 0 0;
  margin-top: 20px;
}

/* Einheitliche Ergebnisflaeche fuer alle berechneten Ausgaben (siehe
   --color-result-bg). Innenabstand und Abstand nach aussen setzt jede
   Stelle selbst. */
.result-surface {
  background: var(--color-result-bg);
  border: 1px solid var(--color-result-border);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.tool-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Startseite: vier Karten 2 x 2 (Block 93); Handy bleibt einspaltig */
@media (min-width: 700px) {
  .tool-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

.tool-card:not(.disabled):not(.app-card):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.app-get {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

.app-badge {
  display: block;
  line-height: 0;
  padding: 10px;
  margin: -10px;
}

.app-qr {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.app-qr img {
  background: #fff;
  padding: 6px;
  border-radius: 6px;
  display: block;
}

.app-qr figcaption {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

@media (pointer: coarse) {
  .app-qr { display: none; }
}

.tool-card.disabled {
  opacity: 0.55;
  cursor: default;
}

.tool-card .tool-icon {
  font-size: 1.6rem;
}

.tool-card .tool-title {
  font-weight: 700;
  font-size: 1.05rem;
}

.tool-card .tool-desc {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-badge-bg);
  color: var(--color-text-muted);
  width: fit-content;
}

/* Trinkgeld-Zeile am Ende des Rechners: leise, keine Karte. */
.tip-line {
  margin: 28px 0 0;
  font-size: 0.8rem;
  text-align: center;
  color: var(--color-text-muted);
}

.tip-line a {
  color: inherit;
}

footer.site-footer {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* Impressum as a small, unobtrusive footnote - not a labeled section -
   one compact line rather than a heading plus a multi-line address block. */
footer.site-footer .impressum-footnote {
  font-style: normal;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

footer.site-footer .impressum-footnote a {
  color: inherit;
}

/* Forms / table used by DoughCalculator */

table.ingredients {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

table.ingredients {
  /* Fixed layout so the declared column widths (see the page-specific
     .col-* rules) are honored exactly - "auto" layout only treats them
     as hints and was truncating the longest category label. Applies at
     every width: the mobile view keeps the same row layout as desktop
     (just with the Zusatzinfo column hidden), not a different layout. */
  table-layout: fixed;
}

table.ingredients th {
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  padding: 0 8px 8px;
  font-weight: 600;
}

table.ingredients td {
  padding: 4px 8px;
  vertical-align: middle;
}

table.ingredients input[type="text"],
table.ingredients input[type="number"],
table.ingredients select {
  width: 100%;
  min-width: 0;
  /* Gleiche Hoehe fuer Zahlenfeld und Auswahlboxen (Zutat, Mehlsorte,
     Anstellgut-Verhaeltnis): Browser geben <select> trotz identischem
     padding von sich aus etwas weniger Innenhoehe als <input> - height
     plus box-sizing:border-box (global gesetzt) erzwingt hier dasselbe
     Kastenmass fuer beide. */
  height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.92rem;
  background: var(--color-bg);
  color: var(--color-text);
}

/* Der global gesetzte "color-scheme: light dark" (siehe :root) laesst
   Browser (vor allem Safari) den nativen Hintergrund von <select> nach dem
   Hell/Dunkel-Systemmodus einfaerben statt nach der hier gesetzten
   background-Farbe - dadurch wich der Hintergrund der Auswahlboxen (Zutat,
   Mehlsorte, Anstellgut-Verhaeltnis) sichtbar vom Zahlenfeld daneben ab.
   appearance:none nimmt dem Browser diese Eigenregie; der Aufklapp-Pfeil
   kommt stattdessen aus zwei Farbverlaeufen, die ein kleines V zeichnen -
   keine SVG-Datei noetig, faerbt sich mit --color-text-muted von selbst
   fuer Hell/Dunkel mit. */
table.ingredients select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position: right 14px top 55%, right 9px top 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 24px;
}

table.ingredients .col-amount input {
  text-align: right;
  /* Hide the native up/down spinner - it eats into the already tight
     column width (especially on mobile, see the max-width:560px block
     below) without adding anything the +/- stepper buttons in "Rezept
     skalieren" don't already do better. */
  -moz-appearance: textfield;
  appearance: textfield;
}

table.ingredients .col-amount input::-webkit-outer-spin-button,
table.ingredients .col-amount input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.icon-btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 6px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  color: var(--color-danger);
  font-size: 1rem;
  line-height: 1;
}

.icon-btn:hover {
  background: var(--color-danger-hover);
}

/* iOS Safari wertet zwei Tipper innerhalb von rund 300 ms auf dieselbe
   Stelle als Doppeltipp-Zoom. Wer die Pfeile in "Rezept skalieren" mehrfach
   hintereinander antippt, zoomt damit ungewollt die Seite und verliert den
   Bedienfaden. "manipulation" schaltet genau diese Geste fuer Knoepfe ab -
   Zwei-Finger-Zoom, Scrollen und der Doppeltipp auf dem uebrigen Text
   bleiben unberuehrt.

   Ausdruecklich NICHT die Loesung: user-scalable=no im Viewport. Das
   verbietet das Zoomen der ganzen Seite, ist ein Barrierefreiheitsproblem
   und wird von iOS seit Version 10 ohnehin ignoriert.

   user-select verhindert, dass beim schnellen Tippen die Beschriftung
   markiert wird und kurz aufblitzt. */
button {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.btn[hidden] {
  display: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 0.92rem;
  cursor: pointer;
  color: var(--color-text);
}

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

.btn.primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: 600;
}

.btn.primary:hover {
  background: var(--color-primary-dark);
}

.actions-row {
  display: flex;
  gap: 10px;
  margin: 14px 0 4px;
  flex-wrap: wrap;
}

/* "Übersicht": one boxed tile per computed value (like the original stat
   tiles), with a short explanation of how it's calculated underneath. */
.summary-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.summary-item {
  /* Flaeche, Kontur und Radius kommen von .result-surface (Markup). */
  padding: 12px 14px;
}

/* Two related tiles shown side by side (e.g. Brotgewicht/Teiggewicht,
   Mehlgewicht/Wassergewicht) instead of stacked. */
.summary-pair {
  display: flex;
  gap: 10px;
}

.summary-pair .summary-item {
  flex: 1 1 0;
  min-width: 0;
}

.summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.summary-row > * {
  min-width: 0;
}

.summary-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  overflow-wrap: break-word;
}

.summary-value {
  font-size: 1.3rem;
  font-weight: 700;
}

.summary-explain {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.target-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--color-border);
}

.target-row label {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.target-row input[type="number"] {
  width: 120px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.95rem;
}

.note {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 6px;
}

@media (max-width: 560px) {
  /* Auf dem Handy zaehlt jeder Pixel Breite. Vom 375px-Bildschirm blieben
     mit den Desktop-Abstaenden nur 293px fuer Text uebrig - der Fliesstext
     brach schon bei 31 Zeichen je Zeile um. Engere Raender und schmalere
     Kartenpolster bringen den Text auf 347px und rund 36 Zeichen. */
  .wrap {
    padding-left: 14px;
    padding-right: 14px;
  }
  .card {
    padding: 14px;
    margin-bottom: 14px;
  }
  /* Selektor muss "header.site-header" lauten: Die Desktop-Regel weiter oben
     ist genauso geschrieben und haette sonst die hoehere Spezifitaet. */
  header.site-header {
    padding: 16px 0 14px;
    margin-bottom: 20px;
  }
  p.lede {
    margin-bottom: 20px;
  }

  /* Die drei Ebenen (Karte / Uebersicht / Fliesstext) sind weiter oben
     fuer jede Breite geregelt. Hier folgt nur der engere Abstand, passend
     zum schmaleren Kartenabstand dieser Ansicht. */
  .card.prose {
    margin-top: 14px;
  }

  /* Die Kacheln der Uebersicht etwas kompakter - bei zwoelf Erklaerzeilen
     summiert sich das spuerbar. */
  .summary-item {
    padding: 8px 10px;
  }
  .summary-explain {
    font-size: 0.76rem;
    line-height: 1.4;
  }

  /* Marke und Sprachmenue bleiben in einer Zeile (Block 75): Der Markentext
     darf schrumpfen und innerhalb der Marke umbrechen, statt dass das Menue
     in eine zweite Zeile rutscht. Zeichen und Menue behalten ihre Groesse. */
  .brand {
    min-width: 0;
    flex: 1 1 auto;
  }
  .brand .logo-mark {
    flex: none;
  }
  .brand .brand-name,
  .brand .brand-tag {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .lang-menu {
    flex: none;
  }

  /* Paired summary tiles (Brotgewicht/Teiggewicht, Mehlgewicht/Wassergewicht)
     are half-width here, too narrow for the uppercase label at full size -
     shrink it a bit so words wrap on spaces instead of breaking mid-word.
     Fuer echte Bandwuermer ("GESAMTTEIGGEWICHT") reicht das nicht: die
     brechen sonst per overflow-wrap mitten im Wort um. hyphens:auto ist
     hier nur die Absicherung - es haengt daran, dass der Browser
     Trennmuster fuer die Sprache mitbringt (headless Chromium z.B. nicht).
     Verlassen tut sich das Layout deshalb auf die weichen Trennzeichen
     (U+00AD) in den betroffenen Labels, siehe I18N in doughcalculator.js. */
  .summary-pair .summary-label {
    font-size: 0.66rem;
    letter-spacing: 0.01em;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  .summary-pair .summary-value {
    font-size: 1.1rem;
  }

  /* Alle Paare stapeln auf dem Handy auf volle Breite (Label links, Wert
     rechts, Erklaerung darunter), statt sich zu zweit eine Zeile zu teilen:
     halbbreit wurden die Kacheln hoch und schmal (Block 64). Damit gilt
     die volle Schriftgroesse wieder, die Verkleinerung von oben entfaellt. */
  .summary-pair {
    flex-direction: column;
  }
  .summary-pair .summary-label {
    font-size: 0.75rem;
    letter-spacing: 0.03em;
  }
  .summary-pair .summary-value {
    font-size: 1.3rem;
  }

  /* Rechner-Seite: Kopf ueber den Pillen kompakter, damit die Bereiche
     schon im ersten Bildschirm stehen. Die Einleitung entfaellt hier (der
     Text bleibt im Markup), die Aufklappzeile rueckt unter die h1. */
  main:has(> h1[data-i18n="pageHeading"]) > h1 {
    font-size: 1.4rem;
    line-height: 1.2;
    margin-bottom: 10px;
  }
  main:has(> h1[data-i18n="pageHeading"]) > p.lede.lede-breit {
    display: none;
  }
  main:has(> h1[data-i18n="pageHeading"]) > .lede-details {
    margin: 0 0 10px;
  }

  /* Mobile keeps the same row-based table layout as the wide view, just
     narrower - no separate stacked/card layout. The Zusatzinfo column
     itself has no room here; its content (when there is any) moves into
     an extra row under the main one instead (see .ingredient-extra-row,
     built in renderRow() in doughcalculator.js) rather than disappearing -
     for Mehl/Anstellgut it affects the calculation, not just description. */
  table.ingredients th.col-name,
  table.ingredients td.col-name {
    display: none;
  }
  table.ingredients tr.ingredient-extra-row td {
    padding-top: 0;
    padding-left: 20px;
  }
  table.ingredients tr.ingredient-extra-row input[type="text"],
  table.ingredients tr.ingredient-extra-row select {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  /* 16px stops iOS Safari from auto-zooming the page when a field is
     focused, and gives every input/select/button a comfortable touch size.
     Horizontal padding is tighter than the vertical one - with the
     Zusatzinfo column gone, the remaining columns (esp. col-amount) are
     narrow, and every pixel of padding is a pixel the value doesn't have. */
  table.ingredients input[type="text"],
  table.ingredients input[type="number"],
  table.ingredients select {
    font-size: 16px;
    padding: 10px 6px;
    /* Die feste Desktop-Hoehe (siehe oben) wuerde hier die groesseren
       Touch-Polster abschneiden - auf dem Handy bestimmt das Padding die
       Hoehe wieder selbst. */
    height: auto;
  }
  table.ingredients select {
    /* padding-right fuer den Pfeil, siehe oben - die verkuerzte
       Handy-Regel direkt darueber ueberschreibt sonst mit 6px. */
    padding-right: 22px;
  }
  /* Zellenpolster von 8 auf 5px: Das sind ueber die vier sichtbaren
     Spalten 24px, die der Zutatenauswahl zugute kommen - dort stiess der
     Text bisher gegen den Aufklapp-Pfeil ("Anstellgut" wurde
     angeschnitten). Zusammen mit den geaenderten Spaltenbreiten in
     doughcalculator.html stehen dem Text jetzt 92 statt 58px zur
     Verfuegung. Die Schriftgroesse bleibt bei 16px - alles darunter
     laesst iOS Safari beim Antippen in die Seite zoomen. */
  table.ingredients th,
  table.ingredients td {
    padding-left: 5px;
    padding-right: 5px;
  }
  .icon-btn {
    width: 40px;
    height: 40px;
  }
  /* Same iOS-zoom fix for the other numeric inputs on the page (target
     weight, scaling inputs). */
  .target-row input[type="number"],
  .scale-option input[type="number"],
  .scale-option select {
    font-size: 16px;
  }
  .actions-row .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .target-row,
  .scale-option {
    align-items: stretch;
  }
  .target-row input[type="number"] {
    flex: 1 1 100px;
  }
}

/* Themengruppen auf der Sammelseite. Die Sammlung bleibt bewusst offen fuer
   andere Bereiche; bis dahin gibt es genau eine Gruppe. Die Ueberschrift
   traegt deshalb wenig Gewicht - sie soll ordnen, nicht dominieren, und
   nicht mit der H1 darueber konkurrieren. */
.tool-group + .tool-group {
  margin-top: 36px;
}

.tool-group > h2 {
  margin-bottom: 4px;
}

.tool-group .group-note {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0 0 16px;
  max-width: 55ch;
}

/* Zeichen neben der Gruppenueberschrift. Es markiert die Gruppe, zu der
   Rechner, Buch und App gehoeren - deshalb der gemeinsame Laib ohne Symbol
   (sauerteig.svg). Im Kopf der Sammelseite steht es bewusst nicht: Die
   Sammlung bleibt offen fuer andere Themen, ein Laib ueber allem waere dort
   die falsche Aussage. */
h2.group-heading {
  display: flex;
  align-items: center;
  gap: 9px;
}

.group-mark {
  border-radius: 6px;
  flex: none;
}

/* ==========================================================================
   Backen-Karte auf der Rechner-Seite
   ==========================================================================

   Bewusst keine dritte hervorgehobene Karte: Zutaten und Skalieren sind
   Eingabe, die Uebersicht ist das Ergebnis - die Backkarte ist ein
   Nebenprodukt daraus und traegt deshalb den schlichten Kartenrahmen.
   Sonst konkurrieren vier Karten um dieselbe Aufmerksamkeit. */
/* Das Teiggewicht steht vor Form und Dampf und in einer eigenen Zeile: Es
   ist die Groesse, an der der ganze Plan haengt. Der Knopf sitzt auf
   gleicher Hoehe wie das Feld, nicht darunter - er gehoert dazu und soll
   die Zeile nicht verdoppeln. */
.bake-weight {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin: 14px 0 0;
}

/* Das Feld nimmt die ganze Breite, der Knopf (wenn sichtbar) steht rechts
   daneben in derselben Zeile; sein Text darf umbrechen. */
.bake-weight .bake-option {
  flex: 1 1 0;
}

.bake-weight .btn {
  flex: 0 1 auto;
  max-width: 45%;
  min-height: 38px;
  line-height: 1.2;
  text-align: center;
}

/* "(g)" bleibt klein - die Beschriftungen daneben sind in Grossbuchstaben
   gesetzt, eine Einheit ist das nicht. */
.bake-einheit {
  text-transform: none;
}

.bake-weight input {
  font: inherit;
  font-size: 0.92rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text);
  /* Gleiche Hoehe wie .bake-option select daneben - siehe Kommentar dort. */
  height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg);
  width: 100%;
  font-variant-numeric: tabular-nums;
}

/* Zurueckhaltend: Der Knopf ist ein Weg zurueck, keine Hauptaktion. */
.btn-quiet {
  padding: 8px 12px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.bake-weight-hint {
  margin: 8px 0 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  max-width: none; /* volle Kartenbreite, Stefan 20.10.2026 */
}

.bake-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 16px;
}

.bake-option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 160px;
  min-width: 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.bake-option select {
  font: inherit;
  font-size: 0.92rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text);
  /* Gleiche Hoehe wie .bake-weight input daneben: color-scheme:light dark
     (siehe :root) laesst Browser dem nativen Select sonst eine eigene,
     etwas andere Innenhoehe UND einen Hintergrund nach Systemmodus geben
     statt der hier gesetzten background-Farbe - appearance:none nimmt dem
     Browser beides ab, der Pfeil kommt aus zwei Farbverlaeufen (siehe
     table.ingredients select fuer dieselbe Loesung). */
  height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background-color: var(--color-bg);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position: right 14px top 55%, right 9px top 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
  width: 100%;
}

/* Beim Topf ist der Deckel der Dampf - das Feld steht dann fest. Gedaempft
   statt per opacity, damit der Kontrast im Dark Mode nicht mitkippt. */
.bake-option select:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* Der Plan. Eine <ol>, aber ohne Zaehlung des Browsers - die Zeitspalte
   links ist die Ordnung, eine zweite Nummerierung daneben waere Ballast. */
.bake-plan {
  /* Ergebnisflaeche (Markup: .result-surface); Innenabstand grosszuegiger
     als der Standard, weil die Zeilen eigene Abstaende tragen. */
  padding: 4px 16px 12px;
}

.bake-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bake-steps li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  /* Dezente Trennlinie in der Konturfarbe der Flaeche, kein Rahmen oben
     und unten: den liefert die Flaeche selbst. */
  border-top: 1px solid var(--color-result-border);
  font-size: 0.92rem;
  flex-wrap: wrap;
}

.bake-steps li:first-child {
  border-top: 0;
}

/* Zeit und Temperatur eine Stufe groesser und fett (App D29). */
.bake-zeit {
  flex: 0 0 auto;
  min-width: 6.2em;
  font-size: 1.08rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bake-temp {
  flex: 0 0 auto;
  min-width: 3.8em;
  font-size: 1.08rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-dark);
  font-weight: 700;
}

/* Auf der Ergebnisflaeche in voller Textfarbe: Das gedaempfte Grau kaeme
   hier knapp ueber 4,5:1, der Text ist aber der Inhalt des Schritts. */
.bake-was {
  flex: 1 1 10em;
  min-width: 0;
  color: var(--color-text);
}

/* "Gesamt etwa ... Minuten" als eigene betonte Zeile. */
.bake-summe {
  margin: 4px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--color-result-border);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* Der Hinweis auf die frueh schliessende Kruste. Er erscheint nur in einem
   Fall (frei geschoben ohne Dampf) und darf deshalb auffallen - er ist der
   einzige Punkt auf dieser Karte, an dem der Rechner wirklich etwas zu
   warnen hat. */
.bake-risk {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--color-teaser-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-teaser-top);
  font-size: 0.9rem;
}

.bake-done {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.bake-done h3 {
  margin: 0 0 6px;
}

.bake-done p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  max-width: none; /* volle Kartenbreite, Stefan 20.10.2026 */
}

/* Die Hintergruende sind eingeklappt: Wer wissen will, wie lange er backen
   soll, will nicht erst drei Absaetze ueber Staerkeverkleisterung lesen.
   Anders als bei den Erklaerungen unter den Kennzahlen (die bewusst offen
   stehen, siehe Entscheidung vom 12.09.2026) ist das hier vertretbar - die
   Zahl daneben steht auch ohne sie fuer sich. */
.bake-details {
  margin-top: 16px;
}

.bake-details summary {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  /* Eigene Zeilenhoehe, damit das Dreieck des Browsers auf der Textlinie
     sitzt und der Treffbereich auf dem Telefon gross genug bleibt. */
  padding: 6px 0;
}

/* Aufklapper unter der Rechner-Einleitung: Liste der sechs Bereiche. */
.lede-details {
  margin: -16px 0 24px;
}

.lede-details ul {
  margin: 8px 0 0;
  padding-left: 20px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.lede-details li {
  margin: 4px 0;
}

.bake-details p {
  margin: 8px 0 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  max-width: none; /* volle Kartenbreite, Stefan 20.10.2026 */
}

/* Erklaerung der Auswahl und der Schritte. Als Begriffsliste, weil es
   genau das ist: ein Wort und was es bedeutet. Der Begriff steht in
   derselben Schreibweise da wie im Auswahlfeld und im Plan darueber -
   beides kommt aus demselben i18n-Schluessel. */
.bake-meaning h4 {
  margin: 18px 0 6px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

.bake-meaning h4:first-of-type {
  margin-top: 14px;
}

.bake-meaning dl {
  margin: 0;
}

.bake-meaning dt {
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 10px;
}

.bake-meaning dd {
  margin: 2px 0 0;
  /* Eingerueckt statt buendig: So bleibt auf einen Blick erkennbar, welcher
     Satz zu welchem Begriff gehoert, auch wenn die Erklaerung umbricht. */
  padding-left: 14px;
  border-left: 2px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  max-width: none; /* volle Kartenbreite, Stefan 20.10.2026 */
}

/* Steht direkt unter dem Plan, nicht im Aufklapptext: Die Temperaturen
   daruber gelten nur fuer Ober-/Unterhitze, und wer sie mit Umluft
   uebernimmt, backt 20 Grad zu heiss. Deshalb ohne Trennlinie darueber -
   der Hinweis gehoert zu den Zahlen, er schliesst keinen Abschnitt ab. */
.bake-ofen {
  margin: 12px 0 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  max-width: none; /* volle Kartenbreite, Stefan 20.10.2026 */
}

/* Rückweg ins Buch am Ende der Fragen. Abgesetzt durch eine Linie, damit
   er nicht wie eine weitere Antwort aussieht. */
/* Verweise ins Buch, jeweils unter der Antwort bzw. am Ende eines
   Bereichs. Bewusst leiser als der Text darueber: Sie sind ein Angebot,
   keine Fortsetzung. Die abgesetzte Variante schliesst einen ganzen
   Bereich ab und bekommt deshalb eine Linie. */
.mehr-dazu {
  margin: 14px 0 16px;
  padding: 10px 14px;
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  border-radius: 4px;
  box-sizing: border-box;
}

.mehr-dazu a {
  font-weight: 600;
  color: var(--color-accent);
}

.mehr-abgesetzt {
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.faq-weiter {
  margin: 26px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  max-width: none; /* volle Kartenbreite, Stefan 20.10.2026 */
}

.faq-weiter a {
  font-weight: 600;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Reiterleiste der drei Bereiche

   Bewusst dieselbe Form wie der Sprach- und der Fassungsumschalter: eine
   Pille mit Trennkanten, die aktive Flaeche gefuellt. Wer die Seite kennt,
   erkennt das Bedienteil damit sofort wieder.

   Unterschied zu jenen beiden: Hier sind es Schaltflaechen und keine
   Links, denn es wird keine andere Adresse geladen. Deshalb der
   ausdrueckliche Reset von Rahmen, Schrift und Hintergrund - ein <button>
   bringt sonst die Ofenoptik des Browsers mit.
   --------------------------------------------------------------------- */
.area-bar {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 0 0 18px;
}

.area-tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  background: var(--color-surface);
}

.area-tabs::-webkit-scrollbar {
  display: none;
}

/* Sechs Reiter: breit teilen sie sich die Leiste, schmal behalten sie ihre
   Textbreite (kein Umbruch) und die Leiste scrollt waagerecht. */
.area-tab {
  flex: 1 0 auto;
  white-space: nowrap;
  appearance: none;
  border: 0;
  border-left: 1px solid var(--color-border);
  background: transparent;
  padding: 9px 10px;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--color-text-muted);
  cursor: pointer;
}

.area-tab:first-child {
  border-left: 0;
}

.area-tab:hover {
  background: var(--color-btn-hover);
  color: var(--color-text);
}

.area-tab.active {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: 600;
}

/* Der Fokusring sitzt innen: Auf der aussersten Schaltflaeche wuerde ein
   aeusserer Ring von der Pille abgeschnitten. */
.area-tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -3px;
}

/* Buch-Knopf neben der Pille: gleiche Rundung, Rand und Flaeche wie die
   Pille. Bis 560 px nur das Symbol (Text bleibt fuer Screenreader). */
.area-book {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  padding: 0 14px;
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.area-book-brand,
.area-book-generic {
  width: 22px;
  height: 22px;
  display: block;
}

.area-book-generic {
  display: none;
}

.area-book:hover {
  background: var(--color-btn-hover);
  color: var(--color-text);
}

.area-book:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .area-book {
    min-width: 40px;
    min-height: 40px;
    padding: 0;
  }

  .area-book-brand {
    display: none;
  }

  .area-book-generic {
    display: block;
  }

  .area-book-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* Nur fuer Screenreader: Die Leiste braucht eine Beschriftung, auf dem
   Bildschirm waere sie ueberfluessig - die drei Namen sagen es selbst. */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   Levain-Karte
   --------------------------------------------------------------------- */
.levain-ref {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 14px 0 0;
}

.levain-field {
  display: flex;
  flex-direction: column;
  /* Eingabe unten buendig: Wird eine Beschriftung zweizeilig, stehen die
     Felder daneben trotzdem auf einer Linie. */
  justify-content: flex-end;
  gap: 6px;
  flex: 1 1 150px;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.levain-field input {
  appearance: none;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  /* Wie die Felder der Rezepttabelle: var(--color-bg) statt --color-surface,
     damit alle Eingabefelder auf allen Reitern gleich aussehen (14.10.2026).
     Im Dark Mode sind sie so dunkel und heben sich von der Karte ab. */
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.levain-field input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.levain-field select {
  /* Kein "appearance: none" - der Aufklapp-Pfeil des Browsers ist das
     einzige, was ein Auswahlfeld hier von einem Eingabefeld daneben
     unterscheidet. .bake-option select und table.ingredients select
     wurden davon abgebracht (02.10.2026): dort fiel per color-scheme
     sonst der Hintergrund gegenueber dem Zahlenfeld daneben sichtbar
     ab - hier (bislang) kein Nutzerwunsch, das ebenso zu aendern. */
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1rem;
}

/* Teiggare: das Feld fuer den eigenen Levain-Anteil steht unter dem Menue,
   die Felder daneben bleiben oben buendig. */
.pff-card .levain-ref {
  align-items: flex-start;
}

.levain-field select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

/* Das Ergebnis der beiden Hebel. Es ist die Antwort, wegen der jemand
   diesen Bereich oeffnet, und steht deshalb als einziges gross da - nicht
   als weitere Zeile zwischen den Tabellen. */
.levain-ergebnis {
  margin: 18px 0 0;
  padding: 14px 16px;
}

.levain-ergebnis-wert {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.levain-ergebnis-zusatz {
  margin: 4px 0 0;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

/* Die beiden Richtschnur-Tabellen. Nebeneinander, wo Platz ist;
   untereinander auf dem Telefon. Jede bleibt zweispaltig - ein Raster
   aus Verhaeltnis mal Temperatur waere auf 390 px nicht mehr lesbar. */
.levain-tabellen {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin: 22px 0 0;
}

/* Normale Tabellen im Kartenstil, ohne Ergebnisflaeche. */
.levain-tabelle {
  flex: 1 1 240px;
  min-width: 0;
  padding: 0;
}

.levain-tabelle h4 {
  margin: 0 0 8px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  font-weight: 600;
}

.levain-hint {
  margin: 10px 0 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  max-width: none; /* volle Kartenbreite, Stefan 20.10.2026 */
}

/* Der eigene Bezug (Teiggare) ist Datengrundlage, nicht Ergebnis - er
   bekommt eine eigene, abgesetzte Box statt derselben Flaeche wie die
   Rechnung darueber. Gedaempft, nicht hervorgehoben. */
.levain-bezug {
  margin: 26px 0 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.levain-bezug h3 {
  margin-top: 0;
}

.levain-bezug .actions-row {
  margin-top: 10px;
}

.levain-card h3 {
  margin: 22px 0 10px;
  font-size: 1rem;
}

/* Reifung: "Mischverhältnis bestimmen" und "Reifezeiten" eine Stufe groesser
   (Block 36); die Hierarchie bleibt h2 > h3 > h4. */
.levain-card h3.levain-haupt {
  margin: 26px 0 12px;
  font-size: 1.15rem;
}
.levain-card h3.levain-haupt:first-of-type {
  margin-top: 18px;
}

.levain-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.94rem;
}

.levain-table th,
.levain-table td {
  text-align: left;
  padding: 7px 12px 7px 0;
  border-bottom: 1px solid var(--color-border);
}

.levain-table tbody tr:last-child td {
  border-bottom: 0;
}

.levain-table th {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.82rem;
}

/* Zahlen untereinander: Ohne tabular-nums wandern die Doppelpunkte der
   Zeitangaben von Zeile zu Zeile. */
.levain-table td:first-child,
.levain-cell-time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.levain-cell-time {
  font-weight: 600;
}

.levain-cell-where {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* Die eigene Angabe ist der Bezugspunkt der ganzen Spalte und wird
   deshalb hervorgehoben - nicht durch Farbe allein, sondern zusaetzlich
   durch die Beschriftung "deine Angabe" in der letzten Spalte. */
.levain-row-ref {
  /* Auf der Ergebnisflaeche statt der Beige-Badge: ein Hauch der Hauptfarbe. */
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.levain-row-ref .levain-cell-where {
  color: var(--color-text);
  font-style: italic;
}

/* Die zwei Wege der Zielrechnung. Bewusst schwaecher gesetzt als
   .levain-ergebnis: Dort steht die eine grosse Antwort, hier stehen zwei
   gleichwertige Moeglichkeiten nebeneinander. Gleiche Breite, damit sich
   die beiden Verhaeltnisse direkt vergleichen lassen. */
.levain-wege {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 0;
}

.levain-weg {
  flex: 1 1 100%;
  min-width: 0;
  padding: 12px 14px;
}

.levain-weg-kopf {
  margin: 0;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  color: var(--color-text-muted);
}

.levain-weg-wert {
  margin: 6px 0 0;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.levain-weg-zusatz {
  margin: 4px 0 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* Steht in der Spalte, nicht in der gemeinsamen Warnzeile: Die Aussage
   "so nah kommst du hier" gehoert zu genau einer der beiden Temperaturen. */
.levain-weg-hinweis {
  margin: 6px 0 0;
  color: var(--color-danger);
  font-size: 0.85rem;
}

.levain-warn {
  margin: 8px 0 0;
  color: var(--color-danger);
  font-size: 0.88rem;
  max-width: none; /* volle Kartenbreite, Stefan 20.10.2026 */
}

/* PDF-Knopf ueber die volle Kartenbreite (nur dieser). */
.levain-pdf-row .btn {
  flex: 1 1 100%;
  justify-content: center;
}

@media (max-width: 560px) {
  .area-tab {
    padding: 9px 14px;
    font-size: 0.85rem;
  }
  /* 16px verhindert, dass iOS Safari beim Antippen in die Seite zoomt. */
  .levain-field input,
  .levain-field select,
  .bake-weight input {
    font-size: 16px;
  }
  .levain-ergebnis-wert {
    font-size: 1.5rem;
  }
  .levain-tabellen {
    gap: 14px;
  }
  .levain-cell-where {
    font-size: 0.8rem;
  }
  .bake-options {
    gap: 10px;
  }
  /* 16px verhindert, dass iOS Safari beim Antippen in die Seite zoomt. */
  .bake-option select {
    font-size: 16px;
  }
  .bake-steps li {
    gap: 8px;
  }
  .bake-zeit {
    min-width: 5.6em;
  }
  .bake-plan {
    padding: 2px 12px 10px;
  }
}

/* ==========================================================================
   Buch (/buch/)
   ==========================================================================

   Die Buchseiten sind das erste auf dieser Seite, was am Stueck gelesen
   wird - der Rechner wird bedient, das Buch wird gelesen. Deshalb gelten
   hier andere Regeln als fuer den Rest: eine schmalere Spalte, groessere
   Zeilenhoehe und Fliesstext in voller Textfarbe statt im gedaempften Ton,
   der auf den anderen Seiten die Erlaeuterungen vom Bedienteil abhebt.

   Der Seitenrahmen hat dieselbe Breite wie der Rest (--max-width), damit
   Kopfzeile, Bilder, Tabellen, Kaufkasten, Fassungskarten und Blaettern
   mit dem Rechner fluchten. Die Lesbarkeit sichert stattdessen die
   Textspalte: --buch-text (680px, bei dieser Schrift rund 72 Zeichen je
   Zeile) begrenzt Fliesstext, Ueberschriften, Listen, Merkkaesten, Gliederung
   und Inhaltsverzeichnis, linksbuendig in der breiten Spalte. */
.wrap-buch {
  --buch-text: 680px;
}

.wrap-buch main > :is(h1, h2, h3, p, ul, ol, blockquote, dl, .buch-toc, .kapitel-gliederung),
.wrap-buch .kapitel > :is(h2, h3, h4, p, ul, ol, blockquote, dl, .callout) {
  max-width: var(--buch-text);
}

/* --- Umschalter zwischen den Fassungen ---------------------------------
   Die Form ist bewusst die des Sprachumschalters: Beide tun dasselbe -
   dieselbe Stelle, andere Fassung. Wer die eine Bedienung verstanden hat,
   versteht die andere.

   Der dritte Zustand ist der interessante: Gibt es ein Kapitel nur in
   einer Fassung, verschwindet die Schaltflaeche der anderen
   nicht, sondern bleibt sichtbar und unbedienbar stehen. Ein Bedienteil,
   das je nach Kapitel da ist oder nicht, waere schwerer zu begreifen als
   eines, das erklaert, warum es hier nicht geht. */
.level-switch {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-surface);
  margin: 0 0 18px;
}

.level-option {
  display: inline-block;
  padding: 6px 16px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-decoration: none;
}

a.level-option:hover {
  background: var(--color-btn-hover);
  color: var(--color-text);
}

.level-option.active {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: 600;
}

/* Nicht ausgegraut per opacity: Das senkt den Kontrast unkontrolliert und
   trifft im Dark Mode staerker als im hellen. Stattdessen die gedaempfte
   Textfarbe, die ohnehin fuer Nebensaechliches gilt, plus der
   durchgestrichene Cursor als zweites, farbunabhaengiges Signal. */
.level-option.missing {
  color: var(--color-text-muted);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Begruendung unter dem Umschalter, wenn es das Kapitel in der anderen
   Fassung nicht gibt. Steht direkt unter dem Bedienteil, auf das es sich
   bezieht, und ruecke deshalb nach oben an den Umschalter heran. */
.level-hinweis {
  margin: -12px 0 18px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  max-width: 55ch;
}

/* --- Startseite des Buches --------------------------------------------- */
.level-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 24px 0 20px;
}

a.level-card {
  display: block;
  text-decoration: none;
  color: inherit;
  margin: 0;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

a.level-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--color-primary);
}

.level-card h2 {
  margin-bottom: 6px;
  color: var(--color-primary-dark);
}

.level-card .level-fuer {
  margin: 0 0 10px;
}

.level-card .level-umfang {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

.buch-hinweis {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  max-width: 55ch;
}

.buch-umfang {
  margin: 0 0 18px;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

/* --- Inhaltsverzeichnis -------------------------------------------------
   Eine echte <ol>, aber ohne die Zaehlung des Browsers: Die Nummer steht
   im Frontmatter des Kapitels und muss mit der Nummer im Buch
   uebereinstimmen. Bei der Hobby-Fassung stimmen beide ohnehin nicht mit
   der Position in der Liste ueberein, weil die vier Luecken mitgezaehlt
   wuerden. */
.buch-weiter {
  margin: 0 0 18px;
}

.buch-weiter .btn {
  text-align: left;
  text-decoration: none;
  line-height: 1.35;
}

/* Die Liste steht als Ganzes in einer Karte (wie .card), die Eintraege
   trennen feine Linien. overflow haelt die Hover-Flaeche im Radius. */
.buch-toc {
  list-style: none;
  margin: 0 0 20px;
  padding: 0 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.buch-toc li {
  border-top: 1px solid var(--color-border);
}

.buch-toc li:first-child {
  border-top: none;
}

.buch-toc a,
.buch-toc .toc-luecke {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 4px;
  text-decoration: none;
  color: inherit;
}

.buch-toc a:hover {
  background: var(--color-btn-hover);
}

.toc-nr {
  flex: none;
  width: 1.6em;
  text-align: right;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
}

.toc-text {
  flex: 1 1 auto;
  min-width: 0;
}

.toc-titel {
  display: block;
  font-weight: 600;
}

.toc-untertitel {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  margin-top: 2px;
}

.toc-zeit {
  flex: none;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* Die Luecken. Blass, aber nicht tot: Der Untertitel ist ein Link in die
   andere Fassung. Wer hier haengenbleibt, soll nicht zurueckblaettern
   muessen, um das Kapitel zu finden. */
.buch-toc .toc-luecke .toc-titel {
  font-weight: 400;
  color: var(--color-text-muted);
}

/* Der Verweis in die andere Fassung. Er braucht seine Unterstreichung
   ausdruecklich zurueck: text-decoration vererbt sich an eingeschlossene
   Elemente weiter, und die Regel fuer die Zeile setzt sie auf none - der
   Link saehe sonst aus wie gewoehnlicher Text. */
.buch-toc .toc-luecke a {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* --- Kapitelseite ------------------------------------------------------- */
.kapitel-oben {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: 0 0 14px;
  font-size: 0.88rem;
}

.kapitel-kennung {
  margin: 0 0 4px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* Gliederung des Kapitels. Erst ab zwei Abschnitten erzeugt - bei einem
   waere sie eine Ueberschrift, die auf sich selbst zeigt. */
.kapitel-gliederung {
  border-left: 2px solid var(--color-border);
  padding: 2px 0 2px 14px;
  margin: 0 0 26px;
}

.kapitel-gliederung ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kapitel-gliederung li + li {
  margin-top: 3px;
}

.kapitel-gliederung a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.88rem;
}

.kapitel-gliederung a:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.kapitel {
  font-size: 1.02rem;
  line-height: 1.68;
}

.kapitel h2 {
  font-size: 1.2rem;
  margin: 34px 0 10px;
  /* Ankerziele: Beim Sprung aus der Gliederung soll die Ueberschrift nicht
     am oberen Rand kleben. */
  scroll-margin-top: 16px;
}

.kapitel h3 {
  font-size: 1.02rem;
  margin: 22px 0 6px;
}

.kapitel p {
  margin: 0 0 14px;
}

.kapitel ul,
.kapitel ol {
  margin: 0 0 16px;
  padding-left: 1.3em;
}

.kapitel li + li {
  margin-top: 5px;
}

.kapitel img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.kapitel figure {
  margin: 20px 0;
}

.kapitel figcaption {
  color: var(--color-text-muted);
  font-size: 0.86rem;
  margin-top: 6px;
}

/* Merkkasten. Im Markdown ein Blockquote, das mit einem Symbol beginnt -
   das Symbol steht hier in einem eigenen Element, damit es nicht als Teil
   des Satzes vorgelesen wird und der Text daneben ausruecken kann.

   Farblich der Akzent und nicht die Grundfarbe: Die Kaesten kommen in
   jedem Kapitel ein- bis zweimal vor; in Dunkelgruen waeren sie so
   gewichtig wie die Ueberschriften. */
.callout {
  display: flex;
  gap: 10px;
  margin: 20px 0;
  padding: 14px 16px;
  background: var(--color-teaser-top);
  border: 1px solid var(--color-teaser-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
}

.callout p {
  margin: 0;
  font-size: 0.96rem;
}

.callout-mark {
  flex: none;
  line-height: 1.6;
}

/* Tabellen im Kapiteltext. Eigener Scrollbereich statt seitlich
   verschiebbarer Seite: Auf dem Telefon ist eine dreispaltige Tabelle das
   einzige, was breiter werden kann als der Bildschirm. */
.table-scroll {
  overflow-x: auto;
  margin: 0 0 18px;
}

.kapitel table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.94rem;
}

.kapitel th,
.kapitel td {
  text-align: left;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.kapitel th {
  font-weight: 600;
  white-space: nowrap;
}

/* --- Blaettern ---------------------------------------------------------- */
.buch-nav {
  display: flex;
  gap: 12px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.buch-nav a {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
}

.buch-nav a:hover {
  border-color: var(--color-primary);
  background: var(--color-btn-hover);
}

/* Der Weiter-Link steht rechts, auch wenn es keinen Zurueck-Link gibt -
   sonst spränge er im ersten Kapitel an die linke Seite und waere im
   zweiten ploetzlich woanders. */
.buch-nav-weiter {
  margin-left: auto;
  text-align: right;
}

.buch-nav-label {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.buch-nav-titel {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-top: 2px;
}

@media (max-width: 560px) {
  .kapitel {
    font-size: 1rem;
    line-height: 1.62;
  }
  .kapitel h2 {
    margin-top: 28px;
  }
  .buch-weiter .btn {
    display: flex;
    width: 100%;
    justify-content: flex-start;
  }
  .buch-toc {
    padding: 0 12px;
  }
  .buch-toc a,
  .buch-toc .toc-luecke {
    padding: 11px 2px;
    gap: 9px;
  }
  /* Die Lesezeit faellt auf dem Telefon weg: Sie ist die unwichtigste der
     drei Angaben, und ohne sie bleiben dem Titel rund 50px mehr. */
  .toc-zeit {
    display: none;
  }
  .buch-nav {
    flex-direction: column;
  }
  .buch-nav-weiter {
    margin-left: 0;
    text-align: left;
  }
}

/* ---------- Mengen-Rad (T46) ----------
   Bottom Sheet mit horizontalem Lineal, ersetzt auf Touch-Geraeten
   (pointer: coarse, iPhone und iPad) die Zifferntastatur beim Antippen von
   "Menge (g)". Mit Maus/Trackpad wird dieses Markup nie eingeblendet (kein
   Klick-Handler haengt dort daran). Das Sheet bleibt auch auf breiten
   Bildschirmen mittig mit max-width 480px am unteren Rand. Bewusst nicht
   in die media-Bloecke gepackt, weil das Sheet ein eigenstaendiges Bauteil
   ist, keine Anpassung einer bestehenden Komponente. */
.amount-wheel-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.42);
  /* Kein Scrollen/Nachlauf hinter dem Sheet (Block 49: "Fertig" brauchte nach
     dem Drehen zwei Tipps); Knoepfe und Wertfeld bleiben bedienbar. */
  overscroll-behavior: contain;
  touch-action: none;
}
.amount-wheel-sheet button,
.amount-wheel-value {
  touch-action: manipulation;
}
.amount-wheel-overlay[hidden] {
  display: none;
}
.amount-wheel-sheet {
  width: 100%;
  max-width: 480px;
  background: var(--color-surface);
  border-radius: 16px 16px 0 0;
  padding: 10px 20px 28px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
}
.amount-wheel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 2px;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}
.amount-wheel-close {
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
}
.amount-wheel-value {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 2.2rem;
  font-weight: 600;
  padding: 6px 0;
  margin-bottom: 4px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
}
.amount-wheel-value::-webkit-outer-spin-button,
.amount-wheel-value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.amount-wheel-unit {
  text-align: center;
  color: var(--color-text-muted);
  margin: 0 0 14px;
}
.amount-wheel-track {
  position: relative;
  height: 64px;
  overflow: hidden;
  margin: 0 -20px;
  /* none statt pan-y: die Spur wird nur waagerecht gezogen. Mit pan-y startete
     ein schraeges Ziehen auf iOS ein Scrollen mit Nachlauf; der naechste Tipp
     (z. B. auf "Fertig") stoppte nur den Nachlauf (Block 49). */
  touch-action: none;
}
.amount-wheel-ruler {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  height: 100%;
  will-change: transform;
}
.amount-wheel-tick {
  flex: 0 0 var(--px-per-step, 28px);
  width: var(--px-per-step, 28px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}
.amount-wheel-tick::before {
  content: "";
  display: block;
  width: 1px;
  height: 14px;
  background: var(--color-border);
  margin: 0 auto;
}
.amount-wheel-tick-hoch::before {
  height: 24px;
  background: var(--color-text-muted);
}
.amount-wheel-tick-aktiv::before {
  height: 36px;
  width: 2px;
  background: var(--color-accent);
}
.amount-wheel-tick-label {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.68rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.amount-wheel-pointer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--color-accent);
  opacity: 0.5;
  pointer-events: none;
}
.amount-wheel-hint {
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 10px 0 0;
}
.amount-wheel-actions {
  display: flex;
  gap: 10px;
  margin: 16px 0 0;
}
.amount-wheel-done,
.amount-wheel-cancel {
  display: block;
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
}
.amount-wheel-done {
  border: none;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}
.amount-wheel-cancel {
  border: 1px solid var(--color-border);
  background: none;
  color: var(--color-text-muted);
}
.amount-wheel-tick-leer::before {
  visibility: hidden;
}

/* Levain ansetzen (C7): Das Ergebnis ist ein ganzer Satz (drei Mengen), kein
   einzelner Wert - kleiner als die Zeit-Antworten, damit es auf dem Handy
   nicht ueber vier Zeilen laeuft. */
.feed-card .levain-ergebnis-wert {
  font-size: 1.3rem;
  line-height: 1.3;
}

.water-card {
  scroll-margin-top: 16px;
}
.water-card:focus {
  outline: none;
}
/* Bereichs-Panels sind nur fuer ARIA-Tabs fokussierbar; kein Ring um die
   ganze Flaeche (Tastaturfokus bleibt an Pillen und Feldern). */
.area[role="tabpanel"]:focus,
.area[role="tabpanel"]:focus-visible {
  outline: none;
}

/* Hobby-PDF-Download auf der Buch-Startseite (Block 83) */
.buch-pdf {
  margin: 24px 0 0;
}
.buch-pdf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.buch-pdf-actions .btn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}
@media (max-width: 560px) {
  .buch-pdf-actions .btn {
    flex: 1 1 0;
    min-height: 44px;
    padding-left: 8px;
    padding-right: 8px;
  }
}
.buch-pdf-meta {
  margin: 8px 0 0;
  font-size: 0.85em;
  opacity: 0.8;
}
.buch-pdf-status {
  margin: 4px 0 0;
  font-size: 0.85em;
}

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