/* Mister Barber – Story-Scroll. Konzept und Bauvertrag: docs/gestaltung.md (Umbau v4 geht vor, dann v3).
   Farben, Schriften, Facetten und Maße stehen nur hier; app.js schreibt nur transform und opacity und setzt
   Zustandsklassen (.aktiv, html.schrift-an); Schrift, Glasinhalt und Rahmen bewegen sich per CSS. */

@font-face {
  font-family: "Noto Serif Display";
  src: url("assets/fonts/noto-serif-display-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif Display";
  src: url("assets/fonts/noto-serif-display-400i.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans Display";
  src: url("assets/fonts/noto-sans-display-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans Display";
  src: url("assets/fonts/noto-sans-display-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --espresso: #15100d;
  --leder: #4a2e1f;
  --porzellan: #f4efe7;
  --porzellan-leise: #bdb6ab;      /* auf Espresso-Glas ≥ 9:1; auf Glas über dem Film nur 4,4:1, dort nicht */
  --messing: #c8a862;
  --messing-hell: #e3c98b;         /* Kicker auf Glas über dem Film: 5,5:1 über Weiß gerechnet (Messing 3,9:1) */
  --blattgruen: #7e8c78;           /* nur Haarlinien */
  --haarlinie: rgba(126, 140, 120, .45);
  --serif: "Noto Serif Display", "Noto Serif", Georgia, serif;
  --sans: "Noto Sans Display", "Noto Sans", "Helvetica Neue", Arial, sans-serif;

  /* Glas (docs/gestaltung.md, „Umbau v3“, §4): Espresso ≥ 0,66 über dem Film. 0,76 ergibt über Weiß
     #4d4947: Porzellan 7,8:1, Messing-hell 5,5:1, Messing 3,9:1 (nur große Schrift). Über den leisen
     Espresso-Abschnitten ein Hauch Weiß. */
  --glas: rgba(21, 16, 13, .76);
  --glas-leise: rgba(255, 255, 255, .035);
  --glas-blur: blur(18px) saturate(140%);
  --glas-kante: rgba(244, 239, 231, .16);

  /* Kopfzeile: fest je Breakpoint, nie gemessen oder per JS gesetzt */
  --kopf: 56px;
  --rand: 16px;

  /* Schrift fließend (docs/gestaltung.md, „Schrift fließend“): am Handy von 320 bis 430 px linear, darüber
     ruhig bis 1440 px, bis 1800 px auf die Größe großer Schirme, nie unter 14 px. Text 16 → 17 → 19,
     klein 14 → 14,5 → 15, mittel 15 → 15,5 → 16. */
  --s-text: clamp(16px, max(min(13.09px + .909vw, 17px), 9px + .556vw), 19px);
  --s-klein: clamp(14px, max(min(12.55px + .455vw, 14.5px), 12.5px + .139vw), 15px);
  --s-mittel: clamp(15px, max(min(13.55px + .455vw, 15.5px), 13.5px + .139vw), 16px);

  /* Riesenwort: hochkant höchstens 30vw und nie angeschnitten (je Wort --rw-em, unten), quer ≈ 15vw */
  --rw: 30vw;

  /* Längen (docs/gestaltung.md, „Längenziel“). --kap für Kapitel 2–4 (darüber läuft nur der Raumfilm
     über drei Kapitel), --kap-echt für Kapitel 5: Die px-Untergrenze hält dort das Tempo der Fahrt
     (10 s in einem Kapitel) ≤ 10 ms/px hochkant auch bei kleiner svh (375×667, 390×664). */
  --k1-film: 30svh;
  --kap: 130svh;
  --kap-echt: max(130svh, 1010px);

  /* Verläufe statt Kanten (docs/gestaltung.md, „Fließend, ohne Boxen“). --ueber: so weit liegt
     der Verlauf vor den ruhigen Abschnitten über dem Ende von Kapitel 5 (keine neue Höhe). */
  --vorhang-verlauf: 35svh;
  --verlauf: 45svh;
  --ueber: 30svh;
  --fuss-verlauf: 20svh;
}
@supports not (height: 1svh) {
  :root { --k1-film: 30vh; --kap: 130vh; --kap-echt: max(130vh, 1010px); --vorhang-verlauf: 35vh; --verlauf: 45vh; --ueber: 30vh; --fuss-verlauf: 20vh; }
}
@media (min-width: 1024px) {
  :root { --kopf: 64px; --rand: 32px; }
}
@media (orientation: landscape) {
  /* quer: Die Fahrt braucht für ≤ 12 ms/px ≥ 834 px in Kapitel 5 (1024×768). Film pur nach dem Vorhang
     entfällt: Den Übergang trägt der 35svh-Verlauf, und 1024×768 braucht die Höhe (≤ 6 Schirme). */
  :root { --k1-film: 0px; --kap: 100svh; --kap-echt: max(100svh, 840px); --rw: min(15vw, 30svh); }
}
@media (orientation: landscape) and (max-height: 499px) {
  /* unter 500 px Höhe läuft kein Film: keine Tempo-Untergrenze */
  :root { --kap-echt: 100svh; }
}
@supports not (height: 1svh) {
  @media (orientation: landscape) { :root { --k1-film: 0px; --kap: 100vh; --kap-echt: max(100vh, 840px); --rw: min(15vw, 30vh); } }
  @media (orientation: landscape) and (max-height: 499px) { :root { --kap-echt: 100vh; } }
}
/* Ohne backdrop-filter dichteres Glas: über dem Film wie die Handy-Stufe ohne Blur (0,82); den Kopf macht die Regel
   nach .kopf deckend (docs/gestaltung.md, „Umbau v5“ §4) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glas: rgba(21, 16, 13, .82); }
}
/* Touch-Geräte ohne Blur (docs/gestaltung.md, „Umbau v3“ §4, Rückfall-Leiter; Entscheidung in „Umsetzung v3“):
   backdrop-filter über dem laufenden Film wird bei jedem Filmbild neu gerechnet. Dafür Tönung 0,84 (≥ 0,82), der Kopf
   deckend („Umbau v5“ §4, Regel nach .kopf). Lichtkante, Facetten und Schatten bleiben. */
@media (hover: none) and (pointer: coarse) {
  :root { --glas: rgba(21, 16, 13, .84); --glas-blur: none; }
}

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

html {
  background: #000;
  color: var(--porzellan);
  font-family: var(--sans);
  font-size: 100%;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  font-size: var(--s-text);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
em { font-style: italic; color: var(--messing); }

section[id] { scroll-margin-top: var(--kopf); }

/* --- Glas ---------------------------------------------------------------------------------
   Fläche: Tönung und backdrop-filter am Element, Facetten 45° per clip-path (--f). ::before ist die
   Lichtkante (1 px, oben links heller, ruht; Zeiger/Fokus: opacity 1), ::after der Messing-Glanz, der
   bei Zeiger/Fokus einmal quer zieht (transform und opacity, 0,7 s). Der clip-path beschneidet beide
   und hält den Glanz in den Facetten. Gehoben wird das Glas, gezeigt wird auf seinen ruhenden Rahmen
   (.karte, .kachel, .knopf): Der clip-path beschneidet auch die Trefferfläche, eine selbst gehobene
   Fläche gäbe ihre unteren 3 px frei und flackerte am Rand. Der weiche Außenschatten der Karten liegt
   am äußeren .karte, weil der clip-path ihn am Glas mit beschnitte. */
.glas {
  --f: 14px;
  position: relative;
  isolation: isolate;
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  clip-path: polygon(var(--f) 0, calc(100% - var(--f)) 0, 100% var(--f), 100% calc(100% - var(--f)),
                     calc(100% - var(--f)) 100%, var(--f) 100%, 0 calc(100% - var(--f)), 0 var(--f));
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.glas::before,
.glas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.glas::before {
  background: linear-gradient(135deg, rgba(244, 239, 231, .52) 0, rgba(244, 239, 231, .26) 28%,
                              var(--glas-kante) 55%, rgba(244, 239, 231, .1) 100%);
  clip-path: polygon(evenodd,
    var(--f) 0, calc(100% - var(--f)) 0, 100% var(--f), 100% calc(100% - var(--f)),
    calc(100% - var(--f)) 100%, var(--f) 100%, 0 calc(100% - var(--f)), 0 var(--f), var(--f) 0,
    calc(var(--f) + .414px) 1px, calc(100% - var(--f) - .414px) 1px, calc(100% - 1px) calc(var(--f) + .414px),
    calc(100% - 1px) calc(100% - var(--f) - .414px), calc(100% - var(--f) - .414px) calc(100% - 1px),
    calc(var(--f) + .414px) calc(100% - 1px), 1px calc(100% - var(--f) - .414px), 1px calc(var(--f) + .414px),
    calc(var(--f) + .414px) 1px);
  opacity: .62;
  transition: opacity .35s ease;
}
.glas::after {
  background: linear-gradient(105deg, rgba(226, 202, 140, 0) 34%, rgba(226, 202, 140, .14) 45%,
                              rgba(243, 223, 166, .26) 50%, rgba(226, 202, 140, .14) 55%, rgba(226, 202, 140, 0) 66%);
  opacity: 0;
  transform: translateX(-62%);
}
.glas-leise { background: var(--glas-leise); }
/* Glas auf Glas (Bewertung in der Karte von Kapitel 5): ohne eigenen Blur, nur Hauch, Kante, Glanz */
.glas-innen {
  background: var(--glas-leise);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Glanz: Streifen (Mitte der Ebene) von knapp links außen bis knapp rechts außen, 0,7 s sichtbar */
@keyframes glanz {
  0% { opacity: 0; transform: translateX(-62%); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateX(62%); }
}
/* Zeiger und Fokus: das Glas hebt sich, die Kante wird hell, der Glanz zieht einmal (Rahmen ruht) */
@media (hover: hover) {
  .karte:hover > .glas,
  .kachel:hover > .glas,
  .knopf:hover > .knopf-glas { transform: translateY(-3px); }
  .karte:hover > .glas::before,
  .kachel:hover > .glas::before,
  .knopf:hover > .knopf-glas::before { opacity: 1; }
  .karte:hover > .glas::after,
  .kachel:hover > .glas::after,
  .knopf:hover > .knopf-glas::after { animation: glanz .7s cubic-bezier(.35, .1, .3, 1) both; }
}
.kachel:has(summary:focus-visible) > .glas,
.knopf:focus-visible > .knopf-glas { transform: translateY(-3px); }
.kachel:has(summary:focus-visible) > .glas::before,
.knopf:focus-visible > .knopf-glas::before { opacity: 1; }
.kachel:has(summary:focus-visible) > .glas::after,
.knopf:focus-visible > .knopf-glas::after { animation: glanz .7s cubic-bezier(.35, .1, .3, 1) both; }
/* Am Finger nur ein kurzes Aufhellen */
@media (hover: none) {
  .glas:active::before,
  .knopf:active > .knopf-glas::before { opacity: 1; transition-duration: .08s; }
  .knopf:active > .knopf-glas { background-color: rgba(110, 72, 48, .72); transition-duration: .08s; }
}

/* --- Kopfzeile: Glas über dem Film ---------------------------------------------------------- */
.kopf {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: var(--kopf);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 max(var(--rand), env(safe-area-inset-right)) 0 max(var(--rand), env(safe-area-inset-left));
  white-space: nowrap;
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  border-bottom: 1px solid var(--glas-kante);
}
/* Ohne Blur der Kopf deckend, sonst scheint Text darunter durch („Umbau v5“ §4: bei 0,95 am iPhone): am Touch-Gerät
   (oben ohne Blur) und ohne backdrop-filter. Beide Regeln stehen nach der Grundregel .kopf, davor überschriebe sie
   sie. Am Rechner bleibt das Glas mit Blur. */
@media (hover: none) and (pointer: coarse) {
  .kopf { background: rgb(21, 16, 13); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopf { background: rgb(21, 16, 13); }
}
.kopf-marke {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  margin-left: -6px;
  padding: 0 6px;
}
.kopf-marke img { width: auto; height: clamp(30px, 24.2px + 1.82vw, 32px); }
.kopf-marke:focus-visible { outline: 2px solid var(--porzellan); outline-offset: 0; }
/* Knopf im Kopf: Trefferfläche ≥ 44 px wie jeder Knopf, das sichtbare Glas kleiner (34 px bei 56 px Kopf),
   damit Logo und Knopf zueinander passen */
.kopf .knopf { margin-left: auto; letter-spacing: .14em; }
.kopf .knopf-glas { margin: 5px 0; padding: 0 14px 0 calc(14px + .14em); }
@media (min-width: 1024px) {
  .kopf { gap: 24px; }
  .kopf-marke img { height: 36px; }
  .kopf .knopf-glas { margin: 3px 0; padding: 0 16px 0 calc(16px + .14em); }
}

/* --- Facettenknopf aus Glas ------------------------------------------------------------------
   Der Verweis (.knopf) ruht und ist die Trefferfläche (≥ 44 × 44 px); darin hebt sich das Glas
   (.knopf-glas): Leder als Glas, 1-px-Messinglinie innen (3 px vom Rand), Ecken 45° / 8 px, statischer
   Zuschnitt. Knöpfe liegen immer auf Glas oder Espresso: ohne eigenen Blur (ein Blur im Blur sähe nur
   die Tönung darunter). */
.knopf {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  font: 700 var(--s-klein)/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--porzellan);
  -webkit-tap-highlight-color: transparent;
}
.knopf:focus-visible { outline: none; }
.knopf-glas {
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px 0 calc(18px + .16em);
  background: rgba(74, 46, 31, .62);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px),
                     calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), background-color .2s ease;
}
.knopf:focus-visible > .knopf-glas { outline: 2px solid var(--porzellan); outline-offset: -7px; }
/* Knopf ohne Glas darunter (404): eigenes Glas statt Glas auf Glas (docs/gestaltung.md, „Umbau v3“ §4) */
.leer .knopf-glas {
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
}
.knopf-glas::before,
.knopf-glas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.knopf-glas::before {
  background: var(--messing);
  clip-path: polygon(evenodd,
    9.243px 3px, calc(100% - 9.243px) 3px, calc(100% - 3px) 9.243px, calc(100% - 3px) calc(100% - 9.243px),
    calc(100% - 9.243px) calc(100% - 3px), 9.243px calc(100% - 3px), 3px calc(100% - 9.243px), 3px 9.243px, 9.243px 3px,
    9.657px 4px, calc(100% - 9.657px) 4px, calc(100% - 4px) 9.657px, calc(100% - 4px) calc(100% - 9.657px),
    calc(100% - 9.657px) calc(100% - 4px), 9.657px calc(100% - 4px), 4px calc(100% - 9.657px), 4px 9.657px, 9.657px 4px);
  opacity: .72;
  transition: opacity .35s ease;
}
.knopf-glas::after {
  background: linear-gradient(105deg, rgba(226, 202, 140, 0) 30%, rgba(243, 223, 166, .34) 50%, rgba(226, 202, 140, 0) 70%);
  opacity: 0;
  transform: translateX(-62%);
}

/* --- Platzhalter (gestrichelt, gewollt) --------------------------------------------------------- */
.offen {
  display: inline-block;
  padding: 3px 9px;
  border: 1px dashed var(--messing);
  color: var(--porzellan);
  font-size: var(--s-mittel);
  line-height: 1.4;
}

/* --- Bühne: fester Raumfilm ----------------------------------------------------------- */
.buehne {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  overflow: hidden;
  background: #000;
}
/* Touch-Geräte: Die Bühne reicht 10svh über 100lvh hinaus. Klappt die Leiste weiter ein, als lvh meldet
   (Brave am iPhone: 44 px Schwarz unter dem Film), liegt dort sonst der Seitengrund. Eine feste Höhe statt
   bottom: 0, damit der Film beim Ein- und Ausfahren der Leiste nicht neu skaliert (docs/gestaltung.md,
   „Bühne am Handy“). */
@media (hover: none) and (pointer: coarse) {
  .buehne { height: calc(100vh + 10vh); height: calc(100lvh + 10svh); }
}
.buehne img,
.buehne video,
.buehne canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.buehne-schleier {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
}
.js .buehne-schleier { will-change: opacity; }
.svh-mass {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100vh;
  height: 100svh;
  visibility: hidden;
  pointer-events: none;
}

/* Videos sind unsichtbar, bis app.js sie geprimt und gemalt meldet, die Bildfolge bis zum ersten gemalten
   Bild (Poster darunter; ohne JS und bei den Gates bleibt es so, docs/gestaltung.md „Umbau v4“ §3). */
video,
canvas[data-folge] {
  opacity: 0;
  transition: opacity .3s ease;
}

main {
  position: relative;
  z-index: 1;
  overflow-x: clip;
}

/* --- Kapitel ---------------------------------------------------------------------------- */
.kapitel { position: relative; }
/* Kapitel 2–4 als Geschwister-Selektor: so steht nirgends die Zeichenfolge, nach der die
   statische Prüfung Telefon-Links sucht */
.kapitel + .kapitel { height: var(--kap); }
.echt { height: var(--kap-echt); }

.halt {
  position: sticky;
  top: var(--kopf);
  height: calc(100vh - var(--kopf));
  height: calc(100svh - var(--kopf));
  container: halt / size;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  /* unten fest 16 px (v4 §6): die Höhe kommt schon aus svh, ein Safe-Area-Wert, der mit der Leiste wechselt,
     ließe die Karte springen */
  padding: 14px var(--rand) 16px;
}

/* Karte: ruhender Rahmen mit dem weichen Außenschatten, darin das Glas (.glas). Der Schatten ist eine eigene
   Ebene (::after unter dem Glas), damit er mit dem Glas einblendet (v4 §5) */
.karte {
  position: relative;
  z-index: 2;
  flex: none;
  width: 100%;
  max-width: 34rem;
}
.karte::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  box-shadow: 0 22px 60px -20px rgba(0, 0, 0, .6);
  pointer-events: none;
}
.karte > .glas { padding: 18px 20px 16px; }
.kicker {
  font: 700 var(--s-klein)/1.3 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--messing);
  margin-bottom: 10px;
}
.glas .kicker { color: var(--messing-hell); }
.karte h2 {
  font: 400 clamp(28px, 16.36px + 3.64vw, 46px)/1.1 var(--serif);
  letter-spacing: -.005em;
  margin-bottom: 10px;
  text-wrap: balance;
}
.text {
  font-size: var(--s-text);
  line-height: 1.5;
}
.aktion { margin-top: 14px; }

/* Preise (docs/gestaltung.md, „Umbau v3“, §2): Leistung links, Preis rechts, feine Punktlinie
   dazwischen (::after, per order zwischen beide), Ziffern tabellarisch */
.preise {
  display: grid;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.preise li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  font-size: var(--s-text);
  line-height: 1.4;
}
.preise li::after {
  content: "";
  order: 1;
  flex: 1 1 12px;
  min-width: 12px;
  height: 2px;
  background: radial-gradient(circle, rgba(200, 168, 98, .75) 0 .7px, rgba(200, 168, 98, 0) 1px) 0 50% / 6px 2px repeat-x;
}
.leistung { min-width: 0; text-wrap: balance; }      /* schmal (320 px) bricht „(bis 8 J.)“ dann als Ganzes um */
.preis {
  order: 2;
  flex: none;
  white-space: nowrap;
  letter-spacing: .02em;
}

/* --- Riesenwort (docs/gestaltung.md, „Umbau v3“ §3, „Umbau v4“ §5) ------------------------------
   Das kursive Wort der Überschrift in Messing, aria-hidden, ohne Kasten. Zwei Fassungen übereinander:
   gefüllt hinter einem Wisch (.rw-wisch mit overflow hidden, das Wort darin gegenläufig) und ein
   hellerer Lichtstreif (.rw-band, weich maskiert, gleicher Trick). Einzug und Lichtstreif spielt CSS,
   sobald das Kapitel .aktiv ist (unten); ohne JS und bei reduced-motion steht das Wort gefüllt und voll
   sichtbar. .riesenwort stellt das Wort in die .halt (und darf schmaler werden), .rw-satz ist so breit
   wie das Wort: auf ihn beziehen sich alle Prozente. */
.riesenwort {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  flex: none;
  align-self: stretch;
  min-width: 0;
  font: italic 400 var(--rw)/1 var(--serif);
  color: var(--messing);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.kapitel[data-kapitel="3"] .riesenwort { justify-content: flex-end; }
/* Hochkant nie angeschnitten (v3 §3): höchstens --rw, sonst so groß, dass .rw-satz zwischen die Ränder der
   .halt passt. --rw-em ist die Breite des Satzes in em (Wort samt Innenabstand, gemessen in Chromium mit
   Noto Serif Display Italic, aufgerundet); tools/schauen.mjs prüft die Tinte im Bild von 320 bis 430 px. */
.kapitel[data-kapitel="2"] .riesenwort { --rw-em: 3.4; }      /* Schnitt 3,36 */
.kapitel[data-kapitel="3"] .riesenwort { --rw-em: 2.92; }     /* Rasur 2,89 */
.kapitel[data-kapitel="4"] .riesenwort { --rw-em: 2.86; }     /* Pflege 2,83 */
.kapitel[data-kapitel="5"] .riesenwort { --rw-em: 3; }        /* Laden 2,97 */
@media (orientation: portrait) {
  .riesenwort { font-size: min(var(--rw), calc((100vw - 2 * var(--rand)) / var(--rw-em, 3.4))); }
}
.rw-satz {
  position: relative;
  display: block;
  flex: none;
  width: max-content;
}
.rw-voll,
.rw-wisch,
.rw-wort { display: block; }
.rw-wisch { overflow: hidden; }
/* Innenabstand für die Tinte über die Zeile hinaus: g-Unterlänge (−0,24 em) und die Neigung */
.rw-wort { padding: .02em .06em .16em .04em; }
.rw-licht {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.rw-band {
  --licht-band: .34;             /* Breite des Lichtstreifs als Anteil des Worts (v4 §5); gilt auch in den Keyframes */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--licht-band) * 100%);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 30%, #000 70%, rgba(0, 0, 0, 0));
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 30%, #000 70%, rgba(0, 0, 0, 0));
}
.rw-band .rw-wort { width: calc(100% / var(--licht-band)); color: #f3dfa6; }

/* Zeitbasiert (v4 §5): html.schrift-an setzt app.js (mit JS und IntersectionObserver, ohne reduced-motion),
   .aktiv das Kapitel in der Bildmitte. Außerhalb von .aktiv steht das Wort im Ausgangszustand; beim Betreten
   fährt es ein (Wisch von links, Aufstieg 14 %, 0,9 s), danach zieht einmal der Lichtstreif (ab 0,7 s, 1,3 s).
   Beim Verlassen geht es schnell zurück, beim nächsten Betreten spielt alles wieder. Nur transform und
   opacity, kein will-change: eigene Ebenen gibt es nur, solange ein Übergang läuft. */
.schrift-an .riesenwort {
  opacity: 0;
  transform: translate3d(0, 14%, 0);
  transition: opacity .3s ease, transform .3s ease;
}
.schrift-an .rw-wisch { transform: translate3d(-101%, 0, 0); }
.schrift-an .rw-wisch > .rw-wort { transform: translate3d(101%, 0, 0); }
.schrift-an .rw-wisch,
.schrift-an .rw-wisch > .rw-wort { transition: transform .3s ease; }
.schrift-an .aktiv .riesenwort {
  opacity: 1;
  transform: none;
  transition: opacity .45s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}
.schrift-an .aktiv .rw-wisch,
.schrift-an .aktiv .rw-wisch > .rw-wort {
  transform: none;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.schrift-an .aktiv .rw-licht { animation: rw-licht 1.3s ease-in-out .7s both; }
.schrift-an .aktiv .rw-band { animation: rw-band 1.3s linear .7s both; }
.schrift-an .aktiv .rw-band > .rw-wort { animation: rw-band-wort 1.3s linear .7s both; }
/* Der Streifen (Breite b = --licht-band, Anteil der Wortbreite) läuft von ganz links außen (−100 % seiner
   Breite) bis ganz rechts außen (100 %/b), das Wort darin gegenläufig von b·100 % bis −100 % der Wortbreite:
   es steht dabei still, nur das Licht wandert. */
@keyframes rw-licht {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
@keyframes rw-band {
  from { transform: translate3d(-100%, 0, 0); }
  to { transform: translate3d(calc(100% / var(--licht-band)), 0, 0); }
}
@keyframes rw-band-wort {
  from { transform: translate3d(calc(var(--licht-band) * 100%), 0, 0); }
  to { transform: translate3d(-100%, 0, 0); }
}

/* --- Glasinhalt gestaffelt (v4 §5): Kapitel 1–5, nur opacity und transform (10 px), Abstand 70 ms ---------
   Zuerst die Glasfläche (Glas, Schatten, Karte), dann Kicker, Überschrift bzw. Text, Knopf, Preiszeilen,
   Bewertung, Öffnungszeiten (--i). Die Deckkraft liegt am Glas selbst und am Schatten, nie an der Karte:
   Deckkraft an einem Vorfahren nähme dem backdrop-filter am Rechner während des Einblendens den Film. Beim
   Verlassen schnell und ohne Staffel zurück. Kontakt und Fragen bleiben ruhig. */
.kapitel .karte { --i: 0; }
.kapitel .karte .kicker { --i: 1; }
.kapitel .karte h2,
.kapitel .karte .text { --i: 2; }
.kapitel .karte .aktion,
.kapitel .karte .kachel,
.kapitel .karte .preise li:nth-child(1) { --i: 3; }
.kapitel .karte .zeiten,
.kapitel .karte .preise li:nth-child(2) { --i: 4; }
.kapitel .karte .preise li:nth-child(3) { --i: 5; }
.kapitel .karte .preise li:nth-child(4) { --i: 6; }
.schrift-an .kapitel .karte .kicker,
.schrift-an .kapitel .karte h2,
.schrift-an .kapitel .karte .text,
.schrift-an .kapitel .karte .aktion,
.schrift-an .kapitel .karte .preise li,
.schrift-an .kapitel .karte .kachel,
.schrift-an .kapitel .karte .zeiten {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity .25s ease, transform .25s ease;
}
.schrift-an .kapitel .karte {
  transform: translate3d(0, 10px, 0);
  transition: transform .25s ease;
}
.schrift-an .kapitel .karte::after {
  opacity: 0;
  transition: opacity .25s ease;
}
.schrift-an .kapitel .karte > .glas {
  opacity: 0;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), opacity .25s ease;
}
.schrift-an .kapitel.aktiv .karte .kicker,
.schrift-an .kapitel.aktiv .karte h2,
.schrift-an .kapitel.aktiv .karte .text,
.schrift-an .kapitel.aktiv .karte .aktion,
.schrift-an .kapitel.aktiv .karte .preise li,
.schrift-an .kapitel.aktiv .karte .kachel,
.schrift-an .kapitel.aktiv .karte .zeiten {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease calc(var(--i) * 70ms + .15s), transform .6s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * 70ms + .15s);
}
.schrift-an .kapitel.aktiv .karte {
  transform: none;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1) .15s;
}
.schrift-an .kapitel.aktiv .karte::after {
  opacity: 1;
  transition: opacity .5s ease .15s;
}
.schrift-an .kapitel.aktiv .karte > .glas {
  opacity: 1;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), opacity .5s ease .15s;
}

/* --- Kapitel 1: Vorhang ---------------------------------------------------------------- */
.vorhang { height: calc(100svh + var(--k1-film)); }
@supports not (height: 1svh) { .vorhang { height: calc(100vh + var(--k1-film)); } }
.vorhang-block {
  position: relative;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: calc(var(--kopf) + 8px) var(--rand) max(16px, env(safe-area-inset-bottom));
  background: #000;
}
/* Vorhang → Film: 35svh Verlauf von #000 nach transparent, über dem Film, unter Karten und Riesenwörtern */
.vorhang-block::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: var(--vorhang-verlauf);
  pointer-events: none;
  background: linear-gradient(to bottom,
    #000 0, rgba(0, 0, 0, .976) 10%, rgba(0, 0, 0, .905) 20%, rgba(0, 0, 0, .794) 30%,
    rgba(0, 0, 0, .655) 40%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .345) 60%, rgba(0, 0, 0, .206) 70%,
    rgba(0, 0, 0, .095) 80%, rgba(0, 0, 0, .024) 90%, rgba(0, 0, 0, 0) 100%);
}
.vorhang-logo {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
.vorhang-logo img,
.vorhang-logo video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 49%;
}
.vorhang-logo img { transition: opacity .35s ease; }
.vorhang.endbild-weg .vorhang-logo img { opacity: 0; }
.vorhang.endbild-weg .vorhang-logo video { opacity: 1; transition: none; }
/* Logo-Start ohne Flackern: Wo der Clip spielen kann, ist das Endbild von Anfang an aus. Notbremse:
   nach 1,8 s blendet es per CSS ein, außer app.js meldet vorher „läuft“ (.endbild-weg, bleibt aus)
   oder „Rückfall“ (.endbild-da, sofort an). */
@media (prefers-reduced-motion: no-preference) and (min-height: 500px) {
  .js .vorhang-logo img { opacity: 0; animation: logo-notbremse .35s ease 1.8s forwards; }
  .js .vorhang.endbild-weg .vorhang-logo img { opacity: 0; animation: none; }
  .js .vorhang.endbild-da .vorhang-logo img { opacity: 1; animation: none; }
}
@keyframes logo-notbremse { from { opacity: 0; } to { opacity: 1; } }
.name {
  flex: none;
  font: 400 clamp(17px, max(min(14.09px + .909vw, 18px), 2px + 1.111vw), 22px)/1.3 var(--serif);
  letter-spacing: .34em;
  padding-left: .34em;
  color: var(--porzellan);
  text-align: center;
}
.vorhang .karte { text-align: left; }

/* --- Kapitel 5: Riesenwort, Goldrahmen mit der Fahrt, Karte mit Bewertung und Zeiten -------- */
/* sticky bildet einen eigenen Stapelkontext: Damit der Verlauf der ruhigen Abschnitte, der über
   dem Ende von Kapitel 5 liegt, nur den Film abdunkelt und nicht Rahmen und Karte, liegt die
   .halt von Kapitel 5 darüber. Sie fängt keine Zeiger. */
.echt .halt { z-index: 1; pointer-events: none; }
.echt .karte { pointer-events: auto; }
.rahmen {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  height: 50%;
  max-height: 50%;
  max-width: 100%;
  aspect-ratio: 3 / 4;
  align-self: center;
  transform-origin: 50% 50%;
}
/* Der Goldrahmen wächst beim Betreten von 0,88 auf 1 (v4 §5: CSS-Übergang bei .aktiv statt am Scrollen);
   ohne JS und bei reduced-motion steht er in voller Größe */
.schrift-an .rahmen {
  transform: scale(.88);
  transition: transform .3s ease;
}
.schrift-an .aktiv .rahmen {
  transform: none;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.rahmen img,
.rahmen video,
.rahmen canvas {
  position: absolute;
  top: 9px;
  left: 9px;
  width: calc(100% - 18px);
  height: calc(100% - 18px);
  object-fit: cover;
  background: #000;
  clip-path: polygon(8.728px 0, calc(100% - 8.728px) 0, 100% 8.728px, 100% calc(100% - 8.728px),
                     calc(100% - 8.728px) 100%, 8.728px 100%, 0 calc(100% - 8.728px), 0 8.728px);
}
.rahmen-linie {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.rahmen-linie::before,
.rahmen-linie::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--messing);
}
/* doppelte Haarlinie: 1 px + 3 px Abstand + 1 px, Facetten 14 px */
.rahmen-linie::before {
  clip-path: polygon(evenodd,
    14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px),
    calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px, 14px 0,
    14.414px 1px, calc(100% - 14.414px) 1px, calc(100% - 1px) 14.414px, calc(100% - 1px) calc(100% - 14.414px),
    calc(100% - 14.414px) calc(100% - 1px), 14.414px calc(100% - 1px), 1px calc(100% - 14.414px), 1px 14.414px, 14.414px 1px);
}
.rahmen-linie::after {
  clip-path: polygon(evenodd,
    15.657px 4px, calc(100% - 15.657px) 4px, calc(100% - 4px) 15.657px, calc(100% - 4px) calc(100% - 15.657px),
    calc(100% - 15.657px) calc(100% - 4px), 15.657px calc(100% - 4px), 4px calc(100% - 15.657px), 4px 15.657px, 15.657px 4px,
    16.071px 5px, calc(100% - 16.071px) 5px, calc(100% - 5px) 16.071px, calc(100% - 5px) calc(100% - 16.071px),
    calc(100% - 16.071px) calc(100% - 5px), 16.071px calc(100% - 5px), 5px calc(100% - 16.071px), 5px 16.071px, 16.071px 5px);
}

/* Google-Bewertung als Glas in der Karte: große Serif-Zahl, Sterne in Messing, ruhig. Füllung per
   scaleX(--fuellung), von der Sternform beschnitten; Endzustand ohne JS und bei reduced-motion. */
.bewertung {
  --f: 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "wert sterne" "wert text";
  column-gap: 16px;
  row-gap: 4px;
  align-items: center;
  margin: 4px 0 14px;
  /* Die Schriftfläche der Zahl ragt (1,36 − 1)/2 em über ihre Zeile: oben und unten so viel Abstand,
     dass sie die Lichtkante nicht berührt */
  padding: 16px 16px 15px;
}
.bewertung-wert {
  grid-area: wert;
  font: 400 clamp(50px, 35.45px + 4.545vw, 60px)/1 var(--serif);
  letter-spacing: -.01em;
  color: var(--messing);
}
.sterne {
  grid-area: sterne;
  align-self: end;
  display: block;
  width: clamp(112px, 35vw, 140px);
  height: auto;
  aspect-ratio: 5 / 1;
  overflow: visible;
}
.sterne-kontur {
  fill: none;
  stroke: var(--messing);
  stroke-width: 1;
  opacity: .35;
}
.sterne-voll,
.sterne-glanz {
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(var(--fuellung, .96));
}
.sterne-voll { fill: var(--messing); }
.sterne-glanz { opacity: 0; }
.bewertung-text {
  grid-area: text;
  align-self: start;
  font-size: var(--s-mittel);
  line-height: 1.4;
  color: var(--porzellan);
}
.zaehlbar { position: relative; display: inline-block; }
.zaehler { position: absolute; top: 0; left: 0; white-space: nowrap; }
.zaehlt .zaehlbar { color: transparent; }
.zaehlt .bewertung-zahl .zaehler { color: var(--messing); }
.zaehlt .bewertung-anzahl .zaehler { color: var(--porzellan); }
@media (prefers-reduced-motion: no-preference) {
  .js .bewertung.wartet .sterne-voll { transform: scaleX(0); }
  /* app.js liest diese Dauer (transition-duration) für das Zählen von Zahl und Anzahl */
  .js .bewertung.laeuft .sterne-voll { transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); }
  .js .bewertung.laeuft .sterne-glanz { animation: sterne-glanz .9s ease-out 1.3s both; }
}
@keyframes sterne-glanz { 0% { opacity: 0; } 35% { opacity: .9; } 100% { opacity: 0; } }

/* Öffnungszeiten in Kapitel 5 */
.zeiten dt {
  margin-bottom: 2px;
  font: 700 var(--s-klein)/1.3 var(--sans);
  letter-spacing: .04em;
  color: var(--messing-hell);
}
.zeiten dd { font-size: var(--s-text); line-height: 1.45; }

/* --- Leise Abschnitte ------------------------------------------------------------------ */
/* Film → Espresso: 45svh Verlauf, der um --ueber über dem Ende von Kapitel 5 liegt (dort unter
   Rahmen und Karte, die höher liegen); „Kontakt“ beginnt im Verlauf. Danach endet die Bühne
   unsichtbar unter Espresso. Ausklang ohne Knick, schnell deckend, damit Text lesbar ist. */
.leise-reihe {
  position: relative;
  margin-top: calc(-1 * var(--ueber));
  padding-top: var(--ueber);
  /* eine einzige Ebene (zwei Kacheln ließen an der Naht eine Pixelzeile Film durch) */
  background: linear-gradient(to bottom,
    rgba(21, 16, 13, 0) 0, rgba(21, 16, 13, .06) calc(var(--verlauf) * .05),
    rgba(21, 16, 13, .19) calc(var(--verlauf) * .1), rgba(21, 16, 13, .4) calc(var(--verlauf) * .2),
    rgba(21, 16, 13, .57) calc(var(--verlauf) * .3), rgba(21, 16, 13, .7) calc(var(--verlauf) * .4),
    rgba(21, 16, 13, .8) calc(var(--verlauf) * .5), rgba(21, 16, 13, .875) calc(var(--verlauf) * .6),
    rgba(21, 16, 13, .93) calc(var(--verlauf) * .7), rgba(21, 16, 13, .965) calc(var(--verlauf) * .8),
    rgba(21, 16, 13, .99) calc(var(--verlauf) * .9), var(--espresso) var(--verlauf));
}
.leise {
  position: relative;
  padding: 44px var(--rand) 38px;
}
.leise + .leise { padding-top: 22px; }
.leise h2 {
  font: 400 clamp(30px, 18.36px + 3.64vw, 50px)/1.1 var(--serif);
  margin-bottom: 22px;
  text-wrap: balance;
}

/* Kontakt: Angaben als Text (nie als Link) auf Glas-Kacheln, zwei Spalten; ebenso im Impressum */
.angaben {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.angaben > .kachel { display: grid; }
.angaben .glas { --f: 12px; padding: 12px 14px 13px; }
.angaben dt {
  margin-bottom: 4px;
  font: 700 var(--s-klein)/1.3 var(--sans);
  letter-spacing: .04em;
  color: var(--porzellan-leise);
}
.angaben dd {
  margin: 0;
  font-size: var(--s-text);
  line-height: 1.45;
  overflow-wrap: break-word;
}
.am-stueck { white-space: nowrap; }

/* Häufige Fragen (docs/seo.md, AEO): sechs <details> als Glas-Kacheln, zu Beginn zu – die Antworten
   stehen im DOM, die Seite bleibt kurz. Frage in Serif, Tippfläche ≥ 44 px. Das Zeichen rechts ist ein
   Plus, das sich beim Öffnen zum Kreuz dreht (nur transform). */
.fragen-liste { display: grid; gap: 8px; max-width: 46rem; }
.frage { --f: 12px; }
.frage summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 10px 16px;
  font: 400 clamp(18px, 15.09px + .909vw, 19px)/1.3 var(--serif);
  color: var(--porzellan);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--messing), var(--messing)) 50% 50% / 14px 1px no-repeat,
    linear-gradient(var(--messing), var(--messing)) 50% 50% / 1px 14px no-repeat;
  transition: transform .25s ease;
}
.frage[open] summary::after { transform: rotate(45deg); }
.frage summary:hover { color: var(--messing); }
.frage summary:focus-visible { outline: 2px solid var(--porzellan); outline-offset: -4px; }
.antwort {
  max-width: 40rem;
  padding: 0 50px 16px 16px;
  font-size: var(--s-text);
  line-height: 1.5;
  color: var(--porzellan);
}

/* --- 404: Espresso-Fläche ohne Film -------------------------------------------------- */
.leer {
  display: flex;
  align-items: center;
  min-height: 72vh;
  min-height: 72svh;
  padding-top: var(--kopf);
  background: var(--espresso);
}
.leer .leise { width: 100%; }
/* Die Fläche reicht bis an den Fuß, auch wenn die Seite kürzer als der Schirm ist (sonst Schwarz darunter) */
.seite-404 { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.seite-404 .leer { flex: 1 0 auto; }
.leer h1 {
  font: 400 clamp(34px, 9vw, 64px)/1.1 var(--serif);
  margin-bottom: 26px;
  text-wrap: balance;
}

/* --- Fuß ------------------------------------------------------------------------------ */
.fuss {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 20px;
  padding: 30px max(var(--rand), env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(var(--rand), env(safe-area-inset-left));
  /* Espresso → Leder: 20svh Verlauf statt Kante */
  background:
    linear-gradient(to bottom,
      rgb(21, 16, 13) 0, rgb(22, 17, 14) 10%, rgb(27, 19, 15) 20%, rgb(32, 22, 17) 30%, rgb(40, 27, 19) 40%,
      rgb(48, 31, 22) 50%, rgb(55, 35, 25) 60%, rgb(63, 40, 27) 70%, rgb(68, 43, 29) 80%, rgb(73, 45, 30) 90%,
      rgb(74, 46, 31) 100%) 0 0 / 100% var(--fuss-verlauf) no-repeat,
    var(--leder);
  color: var(--porzellan);
  font-size: var(--s-klein);
  line-height: 1.5;
}
.fuss-marke { display: grid; gap: 10px; justify-items: start; }
.fuss-marke img { width: 132px; height: auto; }
.fuss-name {
  font: 400 clamp(17px, 14.09px + .909vw, 18px)/1.3 var(--serif);
  letter-spacing: .2em;
}
/* Name, Adresse, Festnetz (NAP wie überall, docs/seo.md) und die Rechtsseiten */
.fuss-nap { display: grid; gap: 2px; font-style: normal; font-size: var(--s-mittel); }
.fuss-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.fuss-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--s-mittel);
  color: var(--porzellan);
  text-decoration: underline;
  text-decoration-color: rgba(200, 168, 98, .6);
  text-underline-offset: 4px;
}
.fuss-links a:hover { color: var(--messing); }
.fuss-links a:focus-visible { outline: 2px solid var(--porzellan); outline-offset: 2px; }
.fuss-links a[aria-current="page"] { color: var(--messing); text-decoration: none; }

/* --- Rechtsseiten (Impressum, Datenschutz): Espresso-Fläche ohne Film und ohne app.js ------- */
.seite-recht { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; background: var(--espresso); }
.recht {
  flex: 1 0 auto;
  padding: calc(var(--kopf) + 36px) var(--rand) 52px;
  background: var(--espresso);
}
.recht-text { max-width: 46rem; }
.recht h1 {
  font: 400 clamp(34px, 9vw, 64px)/1.1 var(--serif);
  margin-bottom: 10px;
}
.recht-unter {
  margin-bottom: 30px;
  font: italic 400 clamp(18px, 15.09px + .909vw, 19px)/1.35 var(--serif);
  color: var(--messing);
}
.recht h2 {
  margin: 30px 0 8px;
  font: 400 clamp(22px, 16.18px + 1.82vw, 24px)/1.25 var(--serif);
}
.recht p { max-width: 40rem; font-size: var(--s-text); line-height: 1.6; }
.recht-angaben { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .recht { padding-left: 48px; padding-right: 48px; }
  .recht-angaben { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
}

/* --- Quer: Karte und Riesenwort nebeneinander, Seite je Kapitel wechselnd ------------------ */
@media (orientation: landscape) {
  .halt {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 4vw;
    padding: 20px max(clamp(20px, 5vw, 96px), env(safe-area-inset-right)) 20px max(clamp(20px, 5vw, 96px), env(safe-area-inset-left));
  }
  .kapitel[data-kapitel="2"] .halt,
  .kapitel[data-kapitel="4"] .halt { flex-direction: row-reverse; }
  .karte { width: min(40vw, 32rem); }
  .karte > .glas { padding: 24px 28px 20px; }
  .karte h2 { font-size: clamp(28px, 3.1vw, 54px); }
  /* Das Wort steht oben auf der Gegenseite der Karte (der Einzug fällt in den Anstieg des Kapitels)
     und lehnt an der Lücke zur Karte; ist es breiter als sein Platz, wird es am äußeren Rand
     angeschnitten, nie über der Karte. */
  .riesenwort { flex: 1 1 0; align-self: flex-start; margin-top: 2svh; }
  .kapitel[data-kapitel="3"] .riesenwort { justify-content: flex-end; }
  /* Kapitel 5: links Wort über dem Rahmen, rechts die Karte */
  .echt .halt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas: "wort karte" "rahmen karte";
    align-content: center;
    column-gap: 4vw;
    row-gap: 12px;
  }
  .echt .riesenwort { grid-area: wort; margin-top: 0; }
  .echt .rahmen { grid-area: rahmen; justify-self: start; }
  .echt .karte { grid-area: karte; align-self: center; }
  .rahmen {
    height: auto;
    max-height: none;
    aspect-ratio: 16 / 9;
    /* Breite: höchstens 56 %, und so, dass Wort und Rahmen zusammen in die .halt passen */
    width: min(100%, calc((100svh - var(--kopf) - 40px - var(--rw) * 1.18 - 12px) * 16 / 9));
    max-width: min(100%, calc((100svh - var(--kopf) - 40px - var(--rw) * 1.18 - 12px) * 16 / 9));
  }
  .vorhang-block { padding-bottom: max(28px, env(safe-area-inset-bottom)); gap: 16px; }
  .vorhang .karte { width: min(92vw, 36rem); }
}
@media (orientation: landscape) and (max-height: 600px) {
  /* flache Querformate (844×390): Logo links, Karte rechts – sie überschneiden sich nie */
  .vorhang-block {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: 28px;
    row-gap: 8px;
    padding: calc(var(--kopf) + 10px) max(24px, env(safe-area-inset-right)) 16px max(24px, env(safe-area-inset-left));
  }
  .vorhang-logo { grid-column: 1; grid-row: 1; height: 100%; }
  .name { grid-column: 1; grid-row: 2; }
  .vorhang .karte { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 100%; }
  .vorhang .karte > .glas { padding: 18px 22px 14px; }
  .karte > .glas { padding: 14px 22px 12px; }
  .karte .text { font-size: var(--s-mittel); }
  .karte h2 { margin-bottom: 6px; }
  .kicker { margin-bottom: 6px; }
  .preise li { padding: 1px 0; }
  .bewertung { margin: 0 0 8px; padding: 12px 14px 11px; }
  .bewertung-wert { font-size: clamp(44px, 26.4px + 2.2vw, 46px); }
}
@media (orientation: landscape) and (min-width: 900px) {
  .leise-reihe { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .leise { padding: 36px clamp(24px, 5vw, 96px) 30px; }
  .leise + .leise { padding-top: 36px; }
  .leise h2 { font-size: clamp(28px, 3.3vw, 54px); margin-bottom: 20px; }
  /* Trennlinie zwischen den Spalten läuft oben und unten weich aus (keine Kante) */
  .leise + .leise::before {
    content: "";
    position: absolute;
    top: 36px;
    bottom: 30px;
    left: 0;
    width: 1px;
    background: linear-gradient(to bottom, rgba(126, 140, 120, 0), var(--haarlinie) 20%, var(--haarlinie) 80%, rgba(126, 140, 120, 0));
  }
  .recht { padding: calc(var(--kopf) + 56px) clamp(24px, 5vw, 96px) 64px; }
  .fuss {
    grid-template-columns: auto minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: clamp(28px, 4vw, 96px);
    align-items: start;
    padding-top: 28px;
    padding-left: max(clamp(24px, 5vw, 96px), env(safe-area-inset-left));
    padding-right: max(clamp(24px, 5vw, 96px), env(safe-area-inset-right));
  }
}
/* Rechner (docs/gestaltung.md, „Typografie am Rechner“): größere Überschriften, Kartentext und
   Kartenbreite. */
@media (orientation: landscape) and (min-width: 1000px) {
  .karte { width: min(34rem, 40vw); }
  .karte h2 { font-size: clamp(2.4rem, 3.2vw, 3.6rem); }
  .leise-reihe > .leise:first-child { padding-right: clamp(18px, 2.4vw, 56px); }
  .leise-reihe > .leise:last-child { padding-left: clamp(18px, 2.4vw, 56px); }
  .leise h2 { font-size: clamp(26px, 2.7vw, 48px); }
  .frage summary { font-size: clamp(17px, 14.5px + .25vw, 19px); min-height: 46px; padding: 7px 16px; }
  .fuss {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    padding-top: 22px;
    padding-bottom: max(22px, env(safe-area-inset-bottom));
  }
  .fuss-marke { grid-auto-flow: column; align-items: center; gap: 18px; }
  .fuss-marke img { width: 104px; }
}
@media (orientation: landscape) and (min-width: 1000px) and (min-height: 600px) and (max-aspect-ratio: 22/10) {
  :root { --ueber: 45svh; }
}
@supports not (height: 1svh) {
  @media (orientation: landscape) and (min-width: 1000px) and (min-height: 600px) and (max-aspect-ratio: 22/10) {
    :root { --ueber: 45vh; }
  }
}

/* Hochkant mit wenig Höhe (375×667, 390×664 = svh mit Adressleiste): Wort, Rahmen und Karte
   kleiner, damit freier Film bleibt */
/* Knapper Schirm hochkant: an der Höhe der klebenden .halt gemessen (100svh − Kopf), nicht an der
   Fensterhöhe. Die Fensterhöhe ändert sich am iPhone beim Ein- und Ausfahren der Leiste (≈ 660–750 px bei
   390×844); eine Regel an max-height: 720px kippte dabei mitten im Scrollen (docs/fallen.md). 664 = 720 − Kopf 56. */
@media (orientation: portrait) { @container halt (max-height: 664px) {
  .halt > * { --rw: 26vw; }
  .rahmen { height: 44%; max-height: 44%; }
  .karte > .glas { padding: 14px 18px 12px; }
  .karte h2 { font-size: clamp(26px, 17.27px + 2.73vw, 40px); margin-bottom: 8px; }
  .kicker { margin-bottom: 8px; }
  .preise li { padding: 3px 0; }
  .bewertung { margin: 2px 0 10px; padding: 13px 14px 12px; }
  .bewertung-wert { font-size: clamp(46px, 34.36px + 3.64vw, 50px); }
} }

/* Große Schirme: Karte und Schrift wachsen mit */
@media (min-width: 1800px) {
  :root { --kopf: 72px; --rand: 40px; }
  .kopf-marke img { height: 42px; }
  .knopf { min-height: 50px; }
  .knopf-glas { padding: 0 22px 0 calc(22px + .16em); }
  .kopf .knopf-glas { padding: 0 20px 0 calc(20px + .14em); }
  .karte > .glas { padding: 32px 38px 26px; }
  .karte h2 { margin-bottom: 14px; }
  .kicker { margin-bottom: 14px; }
  .text,
  .preise li,
  .zeiten dd { line-height: 1.55; }
  .vorhang .karte { width: min(60vw, 46rem); }
}

/* Hochkant ab Tablet: Karte bleibt lesbar schmal */
@media (orientation: portrait) and (min-width: 640px) {
  .kapitel[data-kapitel="2"] .karte,
  .kapitel[data-kapitel="4"] .karte { align-self: flex-end; }
  .kapitel[data-kapitel="3"] .karte { align-self: flex-start; }
  .leise { padding-left: 48px; padding-right: 48px; }
}

/* --- Diagnose (docs/gestaltung.md, „Umbau v4“ §7): nur mit ?diag bzw. ?ohne=…, sonst ohne Wirkung ------- */
.diag {
  position: fixed;
  left: 6px;
  bottom: 6px;
  z-index: 30;
  max-width: calc(100% - 12px);
  margin: 0;
  padding: 6px 8px;
  font: 14px/1.3 ui-monospace, Menlo, Consolas, monospace;
  color: #9f9;
  background: rgba(0, 0, 0, .8);
  white-space: pre-wrap;
  pointer-events: none;
}
.ohne-schrift .riesenwort { display: none; }
.ohne-facetten .glas,
.ohne-facetten .knopf-glas { clip-path: none; }
.ohne-facetten .glas::before,
.ohne-facetten .knopf-glas::before { display: none; }       /* die Lichtkanten sind selbst Zuschnitte */
.ohne-schatten .karte::after { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .glas::after,
  .knopf-glas::after { animation: none !important; }
}