/* ==========================================================================
   Speisepilzzucht – Von Zero to Hero
   Swiss / editorial. Grayscale + ein einziger Akzent (Links, Hover, Marken).
   Kein Bild, kein Icon, keine Fläche, die nicht Typografie oder Weißraum ist.
   ========================================================================== */

:root {
  /* Farbe: Schwarz, Papier, ein schmaler Graubereich, ein Akzent */
  --paper:      #FBFAF8;
  --ink:        #131211;
  --gray-70:    #4B4945;
  --gray-50:    #77746E;
  --gray-30:    #A7A39B;
  --gray-15:    #D6D2C9;
  --hairline:   #E2DED5;
  --accent:     #B3301F;

  /* Schrift */
  --sans:  Inter, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue",
           Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", Charter, "Palatino Linotype", Palatino,
           "Book Antiqua", Georgia, "Times New Roman", serif;

  /* Raster: alle Abstände sind Vielfache von --unit */
  --unit: 0.5rem;
  --measure: 44rem;          /* Satzbreite */
  --bleed: 4rem;             /* Überhang für Tabellen und Bilder, beidseitig */
  --rail: 19rem;             /* Navigationsspalte */
  --gutter: 7vw;
}

/* Dunkle Darstellung: entweder per Systemeinstellung (solange der Leser
   nichts anderes gewählt hat) oder explizit über data-theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:    #111110;
    --ink:      #EDEAE4;
    --gray-70:  #B6B2AA;
    --gray-50:  #8B8781;
    --gray-30:  #5E5B56;
    --gray-15:  #35332F;
    --hairline: #2B2926;
    --accent:   #E0664F;
  }
}

:root[data-theme="dark"] {
  --paper:    #111110;
  --ink:      #EDEAE4;
  --gray-70:  #B6B2AA;
  --gray-50:  #8B8781;
  --gray-30:  #5E5B56;
  --gray-15:  #35332F;
  --hairline: #2B2926;
  --accent:   #E0664F;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--unit) * 8);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ink); color: var(--paper); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: var(--unit) calc(var(--unit) * 2);
  font-family: var(--sans); font-size: 0.75rem;
}
.skip:focus { left: 0; z-index: 100; }

/* --------------------------------------------------------------------------
   Lesefortschritt – ein Haarstrich, sonst nichts
   -------------------------------------------------------------------------- */
.progress {
  position: fixed; top: 0; left: 0; z-index: 50;
  height: 1px; width: 0;
  background: var(--accent);
}

/* --------------------------------------------------------------------------
   Navigation: nur Textlinks
   -------------------------------------------------------------------------- */
.toc {
  position: fixed;
  top: 0; left: 0;
  width: var(--rail);
  height: 100vh;
  padding: calc(var(--unit) * 7) calc(var(--unit) * 4) calc(var(--unit) * 5)
           max(2.5rem, calc(var(--gutter) * 0.6));
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.45;
  scrollbar-width: thin;
}

.toc__title {
  margin: 0 0 calc(var(--unit) * 3);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-50);
}
.toc__title a { color: inherit; text-decoration: none; border: 0; }
.toc__title a:hover { color: var(--accent); }

.toc__filter { display: block; margin-bottom: calc(var(--unit) * 4); }
.toc__filter input {
  width: 100%;
  padding: 0 0 calc(var(--unit) * 0.75);
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  border-radius: 0;
  appearance: none;
}
.toc__filter input::placeholder { color: var(--gray-30); }
.toc__filter input:focus {
  outline: 0;
  border-bottom-color: var(--accent);
}

/* Sammelschalter für alle Kapitel */
.toc__tools {
  margin: 0 0 calc(var(--unit) * 4);
  padding-bottom: calc(var(--unit) * 3);
  border-bottom: 1px solid var(--hairline);
}

.toc__all {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--gray-50);
  cursor: pointer;
  transition: color 120ms linear;
}
.toc__all:hover { color: var(--accent); }
.toc__all:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

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

.toc__item { margin-bottom: calc(var(--unit) * 1.5); }
.toc__item a {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.25rem;
  color: var(--gray-70);
  text-decoration: none;
  border: 0;
  transition: color 120ms linear;
}
.toc__num {
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--gray-30);
  padding-top: 0.1em;
  transition: color 120ms linear;
}
.toc__item a:hover { color: var(--ink); }
.toc__item a:hover .toc__num { color: var(--accent); }

.toc__item.is-active a { color: var(--ink); }
.toc__item.is-active .toc__num { color: var(--accent); }
.toc__item.is-active .toc__label { box-shadow: 0 1px 0 var(--ink); }

.toc__divider {
  margin: calc(var(--unit) * 4) 0 calc(var(--unit) * 2);
  padding-top: calc(var(--unit) * 2);
  border-top: 1px solid var(--hairline);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-30);
}

.toc__item.is-hidden, .toc__divider.is-hidden { display: none; }

/* Darstellung: drei Textschalter oben in der Navigation, aktiver unterstrichen */
.theme { margin-bottom: calc(var(--unit) * 4); }

.theme__opts {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--unit) * 3);
}

.theme__opt {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--gray-30);
  cursor: pointer;
  transition: color 120ms linear, box-shadow 120ms linear;
}
.theme__opt:hover { color: var(--accent); }
.theme__opt[aria-pressed="true"] {
  color: var(--ink);
  box-shadow: 0 1px 0 var(--accent);
}
.theme__opt:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Kopfleiste – nur auf schmalen Viewports
   -------------------------------------------------------------------------- */
.topbar { display: none; }

.nav-toggle {
  padding: calc(var(--unit) * 2) 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Dokument-Spalte – asymmetrisch, füllt den Viewport bewusst nicht
   -------------------------------------------------------------------------- */
/* Die Spalte steht mittig im Feld rechts der Navigation */
.doc {
  margin-left: var(--rail);
  padding: 0 var(--gutter) calc(var(--unit) * 20);
}

.cover,
.chapter__head,
.prose,
.colophon {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   Titelei
   -------------------------------------------------------------------------- */
.cover {
  padding: calc(var(--unit) * 22) 0 calc(var(--unit) * 10);
  border-bottom: 1px solid var(--ink);
  margin-bottom: calc(var(--unit) * 12);
}

.cover__eyebrow {
  margin: 0 0 calc(var(--unit) * 6);
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-50);
}

.cover__title {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(3rem, 9.5vw, 8.5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.045em;
  hyphens: auto;
}

.cover__lede {
  max-width: var(--measure);
  margin: calc(var(--unit) * 9) 0 0;
  font-size: 1.25rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.cover__meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--unit) * 5);
  margin: calc(var(--unit) * 9) 0 0;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-30);
}

/* --------------------------------------------------------------------------
   Kapitel
   -------------------------------------------------------------------------- */
.chapter { padding-bottom: 0; }

/* Der Kapitelkopf ist zugleich der Schalter zum Ein- und Ausklappen */
.chapter__head {
  display: grid;
  grid-template-columns: 6.5rem 1fr auto;
  align-items: start;
  column-gap: calc(var(--unit) * 4);
  padding-top: calc(var(--unit) * 8);
  padding-bottom: calc(var(--unit) * 8);
  border-top: 1px solid var(--ink);
  cursor: pointer;
  list-style: none;
}
.chapter__head::-webkit-details-marker { display: none; }
.chapter__head::marker { content: ""; }
.chapter__head:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

.chapter__details[open] > .prose { padding-bottom: calc(var(--unit) * 14); }

/* Kapitelbild: eine flache Bahn über dem Titel, randlos ins Papier laufend */
.chapter__art {
  display: block;
  grid-column: 1 / -1;
  margin: calc(var(--unit) * 5) 0 calc(var(--unit) * 7);
}

.chapter__art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 440;
  object-fit: cover;
}

@media (min-width: 1400px) {
  .chapter__art {
    width: calc(100% + var(--bleed) * 2);
    margin-left: calc(var(--bleed) * -1);
  }
}

:root[data-theme="dark"] .chapter__art img { opacity: 0.82; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chapter__art img { opacity: 0.82; }
}

.chapter--front .chapter__art { margin-top: 0; }

.chapter__kicker {
  display: block;
  grid-column: 1 / -1;
  margin: 0 0 calc(var(--unit) * 8);
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-50);
}

/* Zustandszeichen: + geschlossen, − offen */
.chapter__state {
  align-self: start;
  padding-top: 0.35em;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1;
  color: var(--gray-30);
  transition: color 120ms linear;
}
.chapter__state::after { content: "\2212"; }
.chapter__details:not([open]) .chapter__state::after { content: "+"; }
.chapter__head:hover .chapter__state { color: var(--accent); }
.chapter__head:hover .chapter__num { color: var(--gray-50); }

.chapter__num {
  display: block;
  margin: 0;
  font-family: var(--sans);
  font-size: 3.75rem;
  font-weight: 300;
  line-height: 0.8;
  letter-spacing: -0.04em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--gray-30);
}

.chapter__title {
  margin: 0;
  max-width: 22ch;
  font-family: var(--sans);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* Eingeklappt: die Kapitelköpfe stehen als Register untereinander, ohne Bild */
.chapter__details:not([open]) .chapter__art { display: none; }
.chapter__details:not([open]) .chapter__kicker { margin-bottom: calc(var(--unit) * 3); }
.chapter__details:not([open]) .chapter__head {
  padding-top: calc(var(--unit) * 4);
  padding-bottom: calc(var(--unit) * 4);
  border-top-color: var(--hairline);
}
.chapter__details:not([open]) .chapter__num { font-size: 2rem; }
.chapter__details:not([open]) .chapter__title {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
}

/* Direkt unter der Titelei genügt die eine Linie des Covers */
.chapter--front .chapter__head { border-top: 0; padding-top: 0; }

.chapter--front .prose > p:first-of-type {
  font-size: 1.1875rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Überschriften im Fließtext
   -------------------------------------------------------------------------- */
.sec, .sub {
  position: relative;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.sec {
  margin: calc(var(--unit) * 12) 0 calc(var(--unit) * 3);
  padding-top: calc(var(--unit) * 3);
  border-top: 1px solid var(--hairline);
  font-size: 1.375rem;
  line-height: 1.2;
}

.sub {
  margin: calc(var(--unit) * 8) 0 calc(var(--unit) * 2);
  font-size: 1rem;
  line-height: 1.3;
}

.h-num {
  display: block;
  margin-bottom: calc(var(--unit) * 1);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--gray-30);
}

.sub .h-num { margin-bottom: calc(var(--unit) * 0.5); }

/* Ab hier hat die Marginalspalte Platz: Abschnittsnummern hängen aus */
@media (min-width: 1500px) {
  .h-num {
    position: absolute;
    left: calc(var(--unit) * -12);
    top: calc(var(--unit) * 3.4);
    margin: 0;
    width: calc(var(--unit) * 10);
    text-align: right;
  }
  .sub .h-num { top: 0.3em; }
}

.anchor {
  margin-left: 0.5em;
  border: 0;
  color: var(--gray-15);
  text-decoration: none;
  font-weight: 400;
  opacity: 0;
  transition: opacity 120ms linear, color 120ms linear;
}
.sec:hover .anchor, .sub:hover .anchor { opacity: 1; }
.anchor:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Fließtext
   -------------------------------------------------------------------------- */
p { margin: 0 0 calc(var(--unit) * 3); text-wrap: pretty; }

/* Deutsche Komposita im schmalen Satz: Trennung reduziert den Flattersatz */
.prose p, .prose li, .glossary dd { hyphens: auto; -webkit-hyphens: auto; }
.prose table, .prose .note, .prose code { hyphens: none; -webkit-hyphens: none; }

strong { font-weight: 700; }
em { font-style: italic; }

code {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.85em;
  letter-spacing: -0.01em;
  color: var(--gray-70);
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--gray-15);
  transition: color 120ms linear, border-color 120ms linear;
}
a:hover { color: var(--accent); border-bottom-color: var(--accent); }
a:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

.xref {
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}

/* [HOBBY] / [PROFI] – gesetzt, nicht gerahmt */
.tag {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-50);
  white-space: nowrap;
  box-shadow: 0 1px 0 var(--gray-15);
}

/* --------------------------------------------------------------------------
   Listen – Zahlen als Rhythmus
   -------------------------------------------------------------------------- */
ul, ol { margin: 0 0 calc(var(--unit) * 4); padding: 0; list-style: none; }
li { margin-bottom: calc(var(--unit) * 1.5); }

.steps { counter-reset: step; }
.steps > li {
  position: relative;
  padding-left: calc(var(--unit) * 6);
  counter-increment: step;
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.35em;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.08em;
  color: var(--gray-30);
}

.marks > li {
  position: relative;
  padding-left: calc(var(--unit) * 6);
}
.marks > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: calc(var(--unit) * 3);
  height: 1px;
  background: var(--gray-30);
}

li > ul, li > ol {
  margin: calc(var(--unit) * 1.5) 0 calc(var(--unit) * 1.5);
}
li > ul > li, li > ol > li {
  position: relative;
  padding-left: calc(var(--unit) * 4);
  font-size: 0.9375rem;
  color: var(--gray-70);
}
li > ul > li::before, li > ol > li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--gray-30);
}
li > ol { counter-reset: substep; }
li > ol > li { counter-increment: substep; }
li > ol > li::before { content: counter(substep) "."; font-family: var(--sans); font-size: 0.75rem; }

/* --------------------------------------------------------------------------
   Tabellen – nur Haarlinien, keine Flächen
   -------------------------------------------------------------------------- */
.table-wrap {
  margin: calc(var(--unit) * 5) 0 calc(var(--unit) * 6);
  overflow-x: auto;
  width: 100%;
}

/* Ist Platz vorhanden, treten Tabellen beidseitig aus der Satzbreite heraus */
@media (min-width: 1400px) {
  .table-wrap {
    width: calc(100% + var(--bleed) * 2);
    margin-left: calc(var(--bleed) * -1);
  }
  .table-wrap--wide {
    width: calc(100% + var(--bleed) * 3);
    margin-left: calc(var(--bleed) * -1.5);
  }
}
/* Nur wenn eine Tabelle tatsächlich breiter ist als ihr Feld (per JS gesetzt) */
.table-hint {
  margin: 0 0 calc(var(--unit) * 1);
  font-family: var(--sans);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-30);
}

.table-wrap--wide table { font-size: 0.75rem; }
.table-wrap--wide tbody td { padding-right: var(--unit); }

table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

thead th {
  padding: 0 calc(var(--unit) * 2) calc(var(--unit) * 1.5) 0;
  border-bottom: 1px solid var(--ink);
  text-align: left;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-50);
  white-space: nowrap;
}

tbody td {
  padding: calc(var(--unit) * 2) calc(var(--unit) * 2) calc(var(--unit) * 2) 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  color: var(--gray-70);
}

tbody td.lead-cell { color: var(--ink); min-width: 8rem; }
tbody tr:last-child td { border-bottom: 1px solid var(--gray-15); }
tbody td strong { font-weight: 600; color: var(--ink); }

/* --------------------------------------------------------------------------
   Asides – Fußnoten-Logik, kein Kasten
   -------------------------------------------------------------------------- */
.note {
  margin: calc(var(--unit) * 5) 0;
  padding-left: calc(var(--unit) * 4);
  border-left: 1px solid var(--gray-15);
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.62;
  color: var(--gray-70);
}
.note p { margin-bottom: calc(var(--unit) * 2); }
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--ink); font-weight: 600; }

.note__label {
  font-size: 0.625rem !important;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-50);
}
.note--warn { border-left-color: var(--accent); }
.note--warn .note__label { color: var(--accent); }

hr.rule {
  height: 0;
  margin: calc(var(--unit) * 7) 0;
  border: 0;
  border-top: 1px solid var(--hairline);
}

/* --------------------------------------------------------------------------
   Glossar – Begriff hängt aus, Definition folgt
   -------------------------------------------------------------------------- */
.glossary { margin: calc(var(--unit) * 4) 0 0; }

.glossary dt {
  margin-top: calc(var(--unit) * 4);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.glossary dd {
  margin: calc(var(--unit) * 0.5) 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--gray-70);
}

@media (min-width: 1500px) {
  .prose--glossar { max-width: 42rem; }
  .glossary dt {
    float: left;
    clear: left;
    width: 11rem;
    margin-top: calc(var(--unit) * 3.5);
    text-align: right;
    padding-right: calc(var(--unit) * 3);
  }
  .glossary dd {
    margin-left: 11rem;
    margin-top: calc(var(--unit) * 3.5);
    min-height: 1.6em;
  }
}

/* --------------------------------------------------------------------------
   Häufige Fragen – Frage als Anschlag, Antwort im Fließtext
   -------------------------------------------------------------------------- */
.qa { margin: 0 0 calc(var(--unit) * 5); }

.qa__q {
  margin: 0 0 calc(var(--unit) * 1);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.qa__a {
  margin: 0;
  color: var(--gray-70);
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Stichwortverzeichnis – zweispaltig, klein gesetzt
   -------------------------------------------------------------------------- */
.prose--index { max-width: 46rem; }
.prose--index .marks {
  columns: 2;
  column-gap: calc(var(--unit) * 8);
  font-family: var(--sans);
  font-size: 0.8125rem;
}
.prose--index .marks > li {
  break-inside: avoid;
  padding-left: 0;
  color: var(--gray-70);
}
.prose--index .marks > li::before { display: none; }

.index-letter {
  margin: calc(var(--unit) * 6) 0 calc(var(--unit) * 2);
  padding-bottom: calc(var(--unit) * 1);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-50);
}

/* --------------------------------------------------------------------------
   Kolophon
   -------------------------------------------------------------------------- */
.colophon {
  max-width: var(--measure);
  padding-top: calc(var(--unit) * 6);
  border-top: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--gray-50);
}
.colophon p { margin-bottom: calc(var(--unit) * 2); }

/* --------------------------------------------------------------------------
   Schmalere Viewports
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  :root {
    --gutter: 6vw;
    --bar: 3rem;             /* Höhe der Kopfleiste */
  }

  html { scroll-padding-top: calc(var(--bar) + var(--unit) * 3); }

  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--unit) * 3);
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 40;
    height: var(--bar);
    padding: 0 var(--gutter);
    padding-right: max(var(--gutter), env(safe-area-inset-right));
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
  }

  .topbar__title {
    border: 0;
    font-family: var(--sans);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gray-50);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-toggle {
    /* volle Fingerfläche, ohne sichtbaren Rahmen */
    min-height: 44px;
    padding: 0 0 0 calc(var(--unit) * 2);
    margin-right: calc(var(--unit) * -1);
  }

  .toc {
    position: fixed;
    inset: var(--bar) 0 0 0;
    width: 100%;
    height: auto;
    padding: calc(var(--unit) * 5) var(--gutter) calc(var(--unit) * 10);
    padding-bottom: max(calc(var(--unit) * 10), env(safe-area-inset-bottom));
    background: var(--paper);
    display: none;
    z-index: 30;
    -webkit-overflow-scrolling: touch;
  }
  .toc.is-open { display: block; }
  .toc__title { display: none; }
  .theme__opt, .toc__all { min-height: 44px; font-size: 0.75rem; }
  .theme { margin-bottom: calc(var(--unit) * 1); }
  .toc__tools { padding-bottom: 0; }
  .toc__filter { margin-bottom: calc(var(--unit) * 3); }
  .toc__filter input { font-size: 1rem; padding-bottom: calc(var(--unit) * 1.5); }

  .toc__list { columns: 2; column-gap: calc(var(--unit) * 6); }
  .toc__item { break-inside: avoid; margin-bottom: 0; }
  .toc__item a { padding: calc(var(--unit) * 1.5) 0; align-items: start; }
  .toc__label { line-height: 1.35; }

  .doc {
    margin-left: 0;
    padding: var(--bar) var(--gutter) calc(var(--unit) * 16);
    max-width: none;
  }
  /* Tabellen laufen bis an den Rand – der Anschnitt zeigt, dass mehr folgt */
  .table-wrap {
    width: 100%;
    margin-right: calc(var(--gutter) * -1);
    padding-right: var(--gutter);
  }

  /* Geöffnete Navigation friert den Text dahinter ein */
  html.nav-open, body.nav-open { overflow: hidden; }
}

@media (max-width: 640px) {
  :root { --measure: 100%; }

  body { font-size: 1rem; line-height: 1.68; }

  .prose { overflow-wrap: break-word; }

  .cover { padding: calc(var(--unit) * 12) 0 calc(var(--unit) * 8); }
  .cover__title { font-size: clamp(2.5rem, 13vw, 4.5rem); }
  .cover__eyebrow { margin-bottom: calc(var(--unit) * 4); }
  .cover__lede { font-size: 1.125rem; margin-top: calc(var(--unit) * 6); }
  .cover__meta { gap: calc(var(--unit) * 3); margin-top: calc(var(--unit) * 6); }

  .chapter__details[open] > .prose { padding-bottom: calc(var(--unit) * 10); }
  .chapter__head {
    grid-template-columns: 1fr auto;
    row-gap: calc(var(--unit) * 1);
    padding-top: calc(var(--unit) * 6);
    padding-bottom: calc(var(--unit) * 6);
  }
  .chapter__kicker { grid-column: 1 / -1; margin-bottom: calc(var(--unit) * 4); }
  .chapter__num { grid-column: 1; grid-row: 2; font-size: 2.25rem; }
  .chapter__state { grid-column: 2; grid-row: 2; align-self: center; padding: 0; }
  .chapter__title { grid-column: 1 / -1; grid-row: 3; }

  .sec { margin-top: calc(var(--unit) * 9); }
  .sub { margin-top: calc(var(--unit) * 6); }

  .toc__list { columns: 1; }
  .prose--index .marks { columns: 1; }

  /* Tabellen: kleinerer Satz auf dem Telefon */
  table { font-size: 0.75rem; }
  .table-wrap--wide table { font-size: 0.6875rem; }
  thead th { padding-right: calc(var(--unit) * 1.5); }
  tbody td { padding: calc(var(--unit) * 1.5) calc(var(--unit) * 1.5) calc(var(--unit) * 1.5) 0; }
  tbody td.lead-cell { min-width: 6.5rem; }

  .table-hint { font-size: 0.5625rem; }

  .note { padding-left: calc(var(--unit) * 3); }
  .steps > li, .marks > li { padding-left: calc(var(--unit) * 5); }
  .qa__q { font-size: 1rem; }
}

/* Auf Zeigergeräten ohne Hover bleiben Ankerzeichen dauerhaft unsichtbar */
@media (hover: none) {
  .anchor { display: none; }
}

/* --------------------------------------------------------------------------
   Druck
   -------------------------------------------------------------------------- */
@media print {
  :root { --paper: #fff; --ink: #000; --accent: #000; }
  .toc, .nav-toggle, .progress, .skip, .anchor { display: none !important; }
  .doc { margin: 0; padding: 0; max-width: none; }
  .chapter { break-before: page; }
  .sec, .sub, table, .note { break-inside: avoid; }
  a { border: 0; }
}