/* ══════════════════════════════════════════════════════════════
   threestar.studio — Die Parallele

   Zwei Küchen, eine Naht. Links das Restaurant bei Nacht, rechts
   das Studio bei Tag. Jedes Kapitel liest sich als Paar: was Sie
   tun, was wir tun — zur selben Uhrzeit, mit demselben Vokabular.
   Die Sätze auf der Naht nehmen auf beiden Seiten die Gegenfarbe an.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Küche, nach Feierabend */
  --nacht:        #26201a;
  --nacht-schrift:#f1e9dc;
  --nacht-fliess: #d6cbb9;
  --nacht-leise:  #b9ad9c;
  --nacht-bild:   #3a3027;
  --nacht-linie:  rgba(241, 233, 220, .25);

  /* Studio, bei Tageslicht */
  --tag:          #f4f4f1;
  --tag-schrift:  #14130f;
  --tag-fliess:   #4a4842;
  --tag-leise:    #6b6862;
  --tag-bild:     #dcdcd6;
  --tag-linie:    rgba(20, 19, 15, .25);

  --naht:         #8a8378;

  --serif: 'Spectral', 'Iowan Old Style', Georgia, serif;
  --mono: 'Red Hat Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gasse: 40px;
  --kopfhoehe: 58px;
}

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

/* Die Hälften liegen auf dem Body, nicht auf der Zeichenfläche —
   sonst hätten die Sätze auf der Naht nichts zum Verrechnen. */
html { background: var(--nacht); }

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(90deg, var(--nacht) 50%, var(--tag) 50%);
  font-family: var(--serif);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

a { color: inherit; text-decoration: none; transition: opacity .2s; }
a:hover { opacity: .62; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.skip {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 60;
  transform: translateY(-180%);
  background: var(--tag-schrift);
  color: var(--tag);
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: transform .25s;
}
.skip:focus { transform: none; opacity: 1; }

/* ─────────────── Die Naht ─────────────── */

.naht {
  position: fixed;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--naht);
  z-index: 19;
  pointer-events: none;
}

/* Kopf und Kapitelleiste schweben über dem Text. Damit beides
   lesbar bleibt, liegt darunter ein Schleier in genau denselben
   zwei Farben — der Text läuft weich hinein statt dagegen. */
.schleier {
  position: fixed;
  left: 0; right: 0;
  z-index: 18;
  pointer-events: none;
  background: linear-gradient(90deg, var(--nacht) 0 50%, var(--tag) 50% 100%);
}
/* Deckend genau so weit, wie Kopf und Leiste reichen — darüber
   läuft der Schleier schnell aus, damit er nicht halbe Absätze frisst. */
.schleier--oben {
  top: 0;
  height: calc(92px + env(safe-area-inset-top));
  -webkit-mask-image: linear-gradient(to bottom, #000 0 calc(52px + env(safe-area-inset-top)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 calc(52px + env(safe-area-inset-top)), transparent 100%);
}
.schleier--unten {
  bottom: 0;
  height: calc(98px + env(safe-area-inset-bottom));
  -webkit-mask-image: linear-gradient(to top, #000 0 calc(58px + env(safe-area-inset-bottom)), transparent 100%);
  mask-image: linear-gradient(to top, #000 0 calc(58px + env(safe-area-inset-bottom)), transparent 100%);
}

/* ─────────────── Kopf und Kapitelnavigation ───────────────
   Wortmarke, Kapitelleiste und die Sätze auf der Naht stehen in
   Weiß und werden gegen den Untergrund verrechnet: über der
   dunklen Hälfte werden sie hell, über der hellen dunkel. */

.kopf {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 22px var(--gasse);
  padding-top: max(22px, env(safe-area-inset-top));
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  pointer-events: none;
}
.kopf__seite { display: flex; justify-content: space-between; gap: 16px; }
.kopf__seite--kueche { color: var(--nacht-schrift); padding-right: 120px; }
.kopf__seite--studio { color: var(--tag-schrift); padding-left: 120px; }
.kopf .leise { opacity: .72; }

.wortmarke {
  position: fixed;
  top: 17px;
  top: max(17px, calc(env(safe-area-inset-top) - 5px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 21;
  color: #fff;
  mix-blend-mode: difference;
  font-size: 22px;
  font-style: italic;
  white-space: nowrap;
}
.wortmarke:hover { opacity: 1; }

.kapitelnav {
  position: fixed;
  bottom: 28px;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 14px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 21;
  display: flex;
  gap: 28px;
  color: #fff;
  mix-blend-mode: difference;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.kapitelnav a { padding: 6px 0; border-bottom: 1px solid transparent; }
.kapitelnav .kurz { display: none; }
.kapitelnav a:hover { opacity: 1; border-bottom-color: currentColor; }
.kapitelnav a[aria-current="true"] { border-bottom-color: currentColor; }

/* ─────────────── Kapitel und Hälften ─────────────── */

.kapitel {
  position: relative;
  padding: 120px 0;
  scroll-margin-top: var(--kopfhoehe);
}
.kapitel--auftakt { padding: 0; }

.paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.haelfte {
  padding: 0 var(--gasse);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.haelfte--kueche { color: var(--nacht-schrift); }
.haelfte--studio { color: var(--tag-schrift); }

/* Der Text hängt an der Außenkante — die Naht bleibt frei. */
.haelfte--rechts { align-items: flex-end; text-align: right; }
.haelfte--unten { justify-content: flex-end; }

.paar--mittig .haelfte { justify-content: center; min-height: 90vh; padding-block: 140px; }

/* Der Auftakt lässt unten Luft — dort liegt der Claim auf der Naht.
   Die Bilder werden über die Fensterhöhe bemessen, damit der Claim
   auch auf flachen Bildschirmen nicht unter die Falz rutscht. */
.paar--auftakt { min-height: 100vh; }
.paar--auftakt .haelfte {
  justify-content: space-between;
  gap: clamp(24px, 5vh, 48px);
  padding-block: clamp(92px, 13vh, 120px) clamp(148px, 22vh, 210px);
}
.paar--auftakt .bild {
  width: auto;
  max-width: 100%;
}
.paar--auftakt .bild--breit { height: min(360px, 34vh); }
.paar--auftakt .bild--hoch  { height: min(430px, 40vh); }

/* ─────────────── Schrift ─────────────── */

.marke {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.5;
}
.haelfte--kueche .marke { color: var(--nacht-leise); }
.haelfte--studio .marke { color: var(--tag-leise); }
.marke--fuss { margin-top: 14px; }

.gross {
  margin: 14px 0 0;
  font-size: clamp(34px, 4.2vw, 68px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.01em;
}
.mittel {
  margin: 14px 0 0;
  font-size: clamp(26px, 2.7vw, 42px);
  font-weight: 300;
  line-height: 1.1;
}
.gross em, .mittel em { font-style: italic; }
.gross--ohne-luft { margin-top: 0; }

.aussage {
  margin: 0;
  font-size: clamp(21px, 1.9vw, 29px);
  font-weight: 300;
  line-height: 1.28;
  max-width: 22ch;
}
.haelfte--rechts .aussage { max-width: 24ch; }

.fliess {
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.62;
  max-width: 44ch;
}
.haelfte--kueche .fliess { color: var(--nacht-fliess); }
.haelfte--studio .fliess { color: var(--tag-fliess); }

/* Die Sätze, die mitten auf der Naht liegen. */
.nahttitel,
.claim {
  margin: 0 0 72px;
  text-align: center;
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  letter-spacing: -.02em;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}
.nahttitel { font-size: clamp(30px, 4.2vw, 68px); }

.claim {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(44px, 7vh, 66px);
  margin: 0;
  padding: 0 24px;
  font-size: clamp(32px, min(6.6vw, 12vh), 116px);
}

/* ─────────────── Bilder ─────────────── */

.bild {
  position: relative;
  margin: 0;
  width: 100%;
  overflow: hidden;
}
.bild--nacht { background: var(--nacht-bild); background-image: repeating-linear-gradient(135deg, rgba(241, 233, 220, .07) 0 1px, transparent 1px 14px); }
.bild--tag   { background: var(--tag-bild);   background-image: repeating-linear-gradient(135deg, rgba(20, 19, 15, .07) 0 1px, transparent 1px 14px); }

.bild--breit   { max-width: 520px; aspect-ratio: 4 / 3; }
.bild--hoch    { max-width: 240px; aspect-ratio: 9 / 19; border-radius: 28px; }
.bild--quer    { max-width: 360px; aspect-ratio: 16 / 10; }
.bild--quadrat { max-width: 280px; aspect-ratio: 1; }
.bild--fuellt  { flex: 1; min-height: 320px; }

.bild figcaption {
  position: absolute;
  left: 12px; right: 12px; bottom: 10px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.4;
  text-align: left;
}
.bild--nacht figcaption { color: var(--nacht-leise); }
.bild--tag figcaption { color: var(--tag-fliess); } /* auf dem hellen Grau reicht --tag-leise nicht für AA */
.bild:has(img) figcaption { display: none; }

.bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─────────────── Ein Tag: zwei Abläufe ─────────────── */

.ablauf {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: clamp(19px, 1.6vw, 25px);
  font-weight: 300;
  line-height: 1.32;
}
.ablauf > li { display: grid; grid-template-columns: 1fr 1fr; }

.ablauf__seite {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 24px;
  padding: 22px var(--gasse);
}
.ablauf__seite--kueche { color: var(--nacht-schrift); border-top: 1px solid var(--nacht-linie); }
.ablauf__seite--studio { color: var(--tag-schrift); border-top: 1px solid var(--tag-linie); }
.ablauf > li:last-child .ablauf__seite--kueche { border-bottom: 1px solid var(--nacht-linie); }
.ablauf > li:last-child .ablauf__seite--studio { border-bottom: 1px solid var(--tag-linie); }
.ablauf > li:last-child .ablauf__seite span:last-child { font-style: italic; }

.uhr {
  font-family: var(--mono);
  font-size: 12px;
  padding-top: 7px;
  font-variant-numeric: tabular-nums;
}
.ablauf__seite--kueche .uhr { color: var(--nacht-leise); }
.ablauf__seite--studio .uhr { color: var(--tag-leise); }
.ablauf > li:last-child .ablauf__seite--kueche .uhr { color: var(--nacht-schrift); }
.ablauf > li:last-child .ablauf__seite--studio .uhr { color: var(--tag-schrift); }

/* ─────────────── Gegenüberstellungen an der Naht ─────────────── */

.gegenueber,
.glossar {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gegenueber li,
.glossar > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.gegenueber__links,
.glossar dt {
  padding: 22px var(--gasse);
  text-align: right;
  color: var(--nacht-schrift);
  border-top: 1px solid var(--nacht-linie);
}
.gegenueber__rechts,
.glossar dd {
  margin: 0;
  padding: 22px var(--gasse);
  color: var(--tag-schrift);
  border-top: 1px solid var(--tag-linie);
}

.gegenueber {
  font-size: clamp(18px, 1.5vw, 23px);
  font-weight: 300;
  line-height: 1.35;
}
.gegenueber__links { font-style: italic; }
.gegenueber__rechts b { font-weight: 400; }
.gegenueber li:last-child .gegenueber__links { border-bottom: 1px solid var(--nacht-linie); }
.gegenueber li:last-child .gegenueber__rechts { border-bottom: 1px solid var(--tag-linie); }

.glossar {
  font-size: clamp(20px, 2.1vw, 33px);
  font-weight: 300;
  line-height: 1.2;
}
.glossar__gleich dt { border-bottom: 1px solid var(--nacht-linie); font-style: italic; }
.glossar__gleich dd { border-bottom: 1px solid var(--tag-linie); font-style: italic; }

.fussnote {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.6;
}
.fussnote__links { padding: 0 var(--gasse); text-align: right; color: var(--nacht-leise); }
.fussnote__rechts { padding: 0 var(--gasse); color: var(--tag-leise); }

/* ─────────────── Häuser ─────────────── */

.paar--haus { margin-bottom: 80px; }
.paar--haus:last-child { margin-bottom: 0; }
.paar--haus-eins .haelfte { min-height: 68vh; }
.paar--haus-zwei .haelfte { min-height: 52vh; }
.paar--haus-drei .haelfte { min-height: 46vh; }
.paar--haus .haelfte--rechts .bild { margin-left: auto; }
/* Sonst frisst das Bild die Aussage darunter aus dem Bild. */
.bild--fuellt { max-height: 46vh; }

/* ─────────────── Der Beleg (bestätigte Reservierung) ─────────────── */

.beleg {
  width: min(100%, 420px);
  border: 1px solid var(--nacht-linie);
  padding: 22px 24px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.9;
  color: var(--nacht-fliess);
}
.beleg p { display: flex; justify-content: space-between; gap: 20px; margin: 0; }
.beleg__wert { color: var(--nacht-schrift); }
.beleg__summe {
  border-top: 1px solid var(--nacht-linie);
  margin-top: 8px !important;
  padding-top: 8px;
}

/* ─────────────── Das Formular ─────────────── */

.formular {
  width: min(100%, 420px);
  display: grid;
  gap: 18px;
  text-align: left;
}

.feld { display: grid; }
.feld__name {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.feld input {
  border: 0;
  border-bottom: 1px solid var(--tag-schrift);
  border-radius: 0;
  background: transparent;
  padding: 12px 0;
  font: inherit;
  font-size: 17px;
  color: var(--tag-schrift);
  outline: none;
  transition: border-color .2s;
}
.feld input::placeholder { color: var(--tag-leise); opacity: 1; }
.feld input:focus { border-bottom-width: 2px; padding-bottom: 11px; }
.feld input[aria-invalid="true"] { border-bottom-color: #a8331d; }

.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.knopf {
  justify-self: start;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--tag-schrift);
  color: var(--tag);
  border: 0;
  padding: 18px 28px;
  margin-top: 8px;
  cursor: pointer;
  transition: background .2s;
}
.knopf:hover { background: var(--nacht); }
.knopf[disabled] { opacity: .55; cursor: progress; }

.formular__stand {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--tag-leise);
  min-height: 2em;
}
.formular__stand[data-state="fehler"] { color: #a8331d; }
.formular__stand[data-state="erfolg"] { color: var(--tag-schrift); }

/* ─────────────── Fuß ─────────────── */

.fuss {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.9;
}
.fuss__seite {
  flex-direction: row;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 40px var(--gasse);
  padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 76px));
}
.fuss .haelfte--kueche { color: var(--nacht-leise); border-top: 1px solid var(--nacht-linie); }
.fuss .haelfte--studio { color: var(--tag-leise); border-top: 1px solid var(--tag-linie); }
.fuss__marke {
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--nacht-schrift);
}

/* ─────────────── Bewegung ─────────────── */

/* Beide Hälften blenden versetzt ein, links zuerst. Der Claim
   kommt zuletzt — halb hell, halb dunkel, ohne Bild dahinter. */
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
.einblenden { animation: einblenden 1.6s var(--verzug, 0s) both; }
.einblenden--a { --verzug: .2s; }
.einblenden--b { --verzug: .5s; }
.einblenden--c { --verzug: .8s; }
.einblenden--d { --verzug: 1.1s; }
.einblenden--e { --verzug: 1.6s; }

/* ══════════════════════════════════════════════════════════════
   Auf dem Telefon kippt die Naht: oben Küche, unten Studio.
   Jedes Kapitel wird ein Paar gestapelter Bänder.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  :root { --gasse: 22px; --kopfhoehe: 50px; }

  body { background: var(--nacht); font-size: 16px; }
  .naht { display: none; }

  /* Gekippt gibt es keine zwei Farben nebeneinander mehr: der Kopf
     bekommt ein durchgehendes dunkles Band, unten trägt die
     Kapitelleiste ihren Hintergrund selbst. */
  .schleier--oben {
    z-index: 19;
    height: calc(74px + env(safe-area-inset-top));
    background: var(--nacht);
    border-bottom: 1px solid var(--nacht-linie);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .schleier--unten { display: none; }

  .kapitel { padding: 0; }
  .paar { grid-template-columns: 1fr; }

  /* Jede Hälfte wird ein eigenes Band mit eigener Farbwelt. */
  .haelfte { padding: 64px var(--gasse); gap: 18px; }
  .haelfte--kueche { background: var(--nacht); }
  .haelfte--studio { background: var(--tag); }
  .haelfte--rechts { align-items: flex-start; text-align: left; }
  .haelfte--unten { justify-content: flex-start; }
  .paar--mittig .haelfte { min-height: 0; padding-block: 64px; }
  .paar--haus { margin-bottom: 0; }
  .paar--haus-eins .haelfte,
  .paar--haus-zwei .haelfte,
  .paar--haus-drei .haelfte { min-height: 0; }
  .paar--haus .haelfte--rechts .bild { margin-left: 0; }

  /* Die Sätze auf der Naht werden zu eigenen Bändern —
     Verrechnen funktioniert hier nicht mehr, also echte Farben. */
  .nahttitel, .claim {
    position: static;
    margin: 0;
    padding: 56px var(--gasse);
    background: var(--nacht);
    color: var(--nacht-schrift);
    mix-blend-mode: normal;
    text-align: left;
  }
  /* Unter dem Titel folgt dieselbe dunkle Hälfte — deren eigene
     Polsterung reicht, sonst klafft es doppelt. */
  .nahttitel {
    font-size: clamp(30px, 8.4vw, 46px);
    padding-bottom: 0;
  }
  .claim {
    font-size: clamp(34px, 11vw, 56px);
    border-top: 1px solid var(--nacht-linie);
    border-bottom: 1px solid var(--nacht-linie);
  }

  /* Der Claim gehört im Auftakt zwischen die beiden Hälften. */
  .kapitel--auftakt { display: flex; flex-direction: column; }
  .paar--auftakt { display: contents; }
  .paar--auftakt .haelfte {
    justify-content: flex-start;
    gap: 18px;
    padding-block: 64px;
  }
  .paar--auftakt .bild { width: 100%; }
  .paar--auftakt .bild--breit { height: auto; }
  .paar--auftakt .bild--hoch { height: auto; max-width: 190px; }
  .kapitel--auftakt .haelfte--kueche { order: 1; padding-top: 124px; }
  .kapitel--auftakt .claim { order: 2; }
  .kapitel--auftakt .haelfte--studio { order: 3; }

  /* Gestapelt hätten die beiden Mittellabels keinen Platz mehr —
     „Küche“ links und „Studio“ rechts sagen ohnehin das Nötige. */
  .kopf { padding: 16px var(--gasse); padding-top: max(16px, env(safe-area-inset-top)); font-size: 10px; }
  .kopf__seite--kueche { padding-right: 0; }
  .kopf__seite--studio { padding-left: 0; color: var(--nacht-schrift); justify-content: flex-end; }
  .kopf .leise { display: none; }
  .wortmarke { top: max(44px, calc(env(safe-area-inset-top) + 26px)); font-size: 17px; mix-blend-mode: normal; color: var(--nacht-schrift); }

  .kapitelnav {
    left: 0; right: 0;
    bottom: 0;
    transform: none;
    mix-blend-mode: normal;
    color: var(--nacht-schrift);
    background: var(--nacht);
    border-top: 1px solid var(--nacht-linie);
    gap: 22px;
    padding: 14px var(--gasse);
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    font-size: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start;
  }
  .kapitelnav::-webkit-scrollbar { display: none; }

  .gross { font-size: clamp(30px, 8.6vw, 44px); }
  .mittel { font-size: clamp(24px, 7vw, 34px); }
  .aussage { font-size: clamp(19px, 5.4vw, 26px); max-width: none; }
  .haelfte--rechts .aussage { max-width: none; }
  .fliess { font-size: 15.5px; max-width: none; }

  .bild--breit, .bild--quer, .bild--quadrat { max-width: none; }
  .bild--hoch { max-width: 190px; }
  .bild--fuellt { min-height: 240px; flex: none; aspect-ratio: 4 / 3; }

  .ablauf { font-size: 17px; }
  .ablauf > li { grid-template-columns: 1fr; }
  .ablauf__seite { grid-template-columns: 54px 1fr; gap: 14px; padding: 16px var(--gasse); }
  .ablauf__seite--kueche { background: var(--nacht); }
  .ablauf__seite--studio { background: var(--tag); border-top-color: transparent; }
  .ablauf > li:last-child .ablauf__seite--kueche { border-bottom: 0; }
  .uhr { font-size: 11px; padding-top: 4px; }

  /* Gegenüberstellungen stapeln: erst die Küche, dann das Studio. */
  .gegenueber li, .glossar > div, .fussnote { grid-template-columns: 1fr; }
  .gegenueber__links, .glossar dt {
    background: var(--nacht);
    text-align: left;
    padding: 18px var(--gasse) 10px;
    border-top: 1px solid var(--nacht-linie);
  }
  .gegenueber__rechts, .glossar dd {
    background: var(--tag);
    padding: 10px var(--gasse) 18px;
    border-top: 0;
  }
  .gegenueber { font-size: 16.5px; }
  .glossar { font-size: clamp(20px, 5.6vw, 26px); }
  .glossar dt { padding-bottom: 4px; }
  .glossar dd { padding-top: 4px; }
  .glossar__gleich dt { border-bottom: 0; }

  .fussnote { margin-top: 0; }
  .fussnote__links { background: var(--nacht); text-align: left; padding: 18px var(--gasse); }
  .fussnote__rechts { background: var(--tag); padding: 18px var(--gasse); }

  .beleg { width: 100%; }
  .formular { width: 100%; }
  .feld input { font-size: 16px; } /* verhindert das Hineinzoomen auf iOS */

  .fuss { grid-template-columns: 1fr; }
  .fuss__seite { padding: 32px var(--gasse); gap: 10px; flex-direction: column; }
  .fuss .haelfte--studio { padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 68px)); }
}

@media (max-width: 760px) {
  .kapitelnav .lang { display: none; }
  .kapitelnav .kurz { display: inline; }
}

@media (max-width: 400px) {
  .kapitelnav { gap: 18px; font-size: 9px; }
  .ablauf { font-size: 15.5px; }
  .ablauf li { grid-template-columns: 50px 1fr; gap: 12px; }
  .gegenueber { font-size: 15.5px; }
}

/* ─────────────── Ruhe bewahren ─────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .naht, .kopf, .wortmarke, .kapitelnav, .skip { display: none; }
  body { background: #fff; color: #14130f; }
  .haelfte--kueche, .haelfte--studio { color: #14130f; }
  .kapitel { page-break-inside: avoid; padding: 20px 0; }
  .nahttitel, .claim { color: #14130f; mix-blend-mode: normal; position: static; }
}