/* ==========================================================================
   Diamond Reisen — Türkei-Spezialist
   Fassung 2 (19.08.2026). Fassung 1 war Baukasten-Grammatik: Kästen mit Rand,
   Pillen, große flache Farbflächen. Bei Fünf-Sterne-Häusern tragen die BILDER
   die Seite — die Fläche hält sich zurück. Deshalb: fast schwarz, warmes
   Off-White, ein einziger Akzent in Champagner. Keine Rahmen, keine Radien.
   ========================================================================== */

@font-face {
  font-family: 'Boska';
  src: url('../assets/fonts/Boska-Variable.woff2') format('woff2-variations');
  font-weight: 200 900; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../assets/fonts/Switzer-Variable.woff2') format('woff2-variations');
  font-weight: 100 900; font-display: swap;
}

:root {
  /* Aus dem Material abgeleitet: Kalkstein, Schmiedeeisen, Schirmkiefer, Beckenblau. */
  --eisen:   #0B0E11;   /* dunkle Bühne — kühl, nie #000, Ton der Torgitter */
  --kalk:    #EFEAE1;   /* helle Bühne — warm, aber kein Creme: Blau ist der tiefste Kanal */
  --tinte:   #14181C;   /* Text auf heller Bühne */
  --becken:  #1E6F78;   /* DER EINZIGE AKZENT. Beckenblau. Budget: max. 8 pro Bildschirmhöhe */
  --stein:   #C3BDB2;   /* ruhige Auszeichnung, kein Akzent */
  --leise-d: #8C8880;   /* Nebentext auf Dunkel */
  --leise-h: #6A665F;   /* Nebentext auf Hell */
  --strich:   rgba(239, 234, 225, .16);
  --strich-h: rgba(20, 24, 28, .14);

  /* Altnamen als Aliasse — damit die bewährten Bauteile unverändert weiterlaufen */
  --nacht:   var(--eisen);
  --papier:  var(--kalk);
  --kohle:   #12171B;
  --champ:   var(--stein);
  --champ-h: #FFFFFF;

  --display: 'Boska', 'Times New Roman', serif;
  --text: 'Switzer', 'Segoe UI', sans-serif;

  --breit: 1320px;
  --lese: 640px;

  /* Bewegung */
  --ease-aus:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-halt: cubic-bezier(0.65, 0, 0.35, 1);
  --t-tipp: 140ms;
  --t-ui:   240ms;
  --t-szene: 700ms;

  /* Schriftgrade — viewport-relativ, ohne oberen Deckel bis 2560 px.
     Die alte Skala fror ab 1415 px ein; auf großen Monitoren wuchs nichts mehr. */
  --t-riese:  clamp(3.4rem, 1.0rem + 7.2vw, 12rem);
  --t-gross:  clamp(2.3rem, 1.1rem + 4.0vw, 6.4rem);
  --t-mittel: clamp(1.45rem, 1.0rem + 1.7vw, 2.8rem);
  --t-mass:   clamp(.62rem, .58rem + .14vw, .78rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--nacht);
  color: var(--papier);
  font-family: var(--text);
  font-size: clamp(1rem, .95rem + .22vw, 1.08rem);
  font-weight: 350;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

/* --- Typografie: Display groß, leicht, weit ----------------------------- */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: var(--t-riese); font-weight: 200; line-height: .94; letter-spacing: -.022em; }
h2 { font-size: var(--t-gross); font-weight: 200; line-height: .98; letter-spacing: -.018em; }
h3 { font-size: var(--t-mittel); font-weight: 300; letter-spacing: -.01em; }
/* Zweiter Kontrastkanal: Gewicht innerhalb derselben Überschrift.
   Ersetzt Oreos Kontur-gegen-Vollton ohne zweite Farbe und ohne zweite Schrift. */
h1 b, h2 b, h3 b { font-weight: 700; font-style: normal; }
/* Zahlen müssen untereinanderstehen — Stempel und Jahresachse bestehen daraus */
.stempel, .achse, .leiter dt, time, .jahr { font-variant-numeric: tabular-nums lining-nums; }
p { margin: 0 0 1.1em; max-width: var(--lese); }

/* Kleine, weit gesperrte Auszeichnung statt Pillen und Kästchen */
.label {
  font-family: var(--text);
  font-size: .7rem; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--champ);
  margin: 0 0 1.6rem;
}
.label-h { color: var(--leise-h); }

a { color: inherit; text-decoration-color: var(--champ); text-underline-offset: 5px; text-decoration-thickness: 1px; }
a:hover { color: var(--champ-h); }

:focus-visible { outline: 2px solid var(--champ); outline-offset: 4px; }

.huelle { width: 100%; max-width: var(--breit); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 4rem); }
.lese { max-width: var(--lese); }

section { padding-block: clamp(4.5rem, 11vw, 10rem); }
/* Die Bühne: EIN festes Element hinter allem, dessen Farbe beim Scrollen
   interpoliert wird. Damit 0 harte Vollbreitkanten statt bisher 6. */
.buehne { position: fixed; inset: 0; z-index: -1; background: var(--eisen); }
body { background: transparent; }
.hell { color: var(--tinte); }
.hell .label { color: var(--leise-h); }
.hell a { text-decoration-color: var(--champ); }
.hell a:hover { color: #8A6E32; }

.springlink { position: absolute; left: -9999px; background: var(--nacht); color: var(--papier); padding: .8rem 1.2rem; z-index: 100; }
.springlink:focus { left: 1rem; top: 1rem; }

/* --- Kopf: schwebt über dem Bild ---------------------------------------- */
.kopf {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  padding-block: clamp(1.25rem, 3vw, 2.25rem);
}
.kopf .huelle { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.marke { font-family: var(--display); font-weight: 400; font-size: 1.4rem; letter-spacing: .02em; color: var(--papier); }
.marke small {
  display: block; font-family: var(--text); font-size: .62rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase; color: var(--champ); margin-top: .35rem;
}
.kopf-ruf {
  font-size: .85rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--papier); white-space: nowrap;
  padding: .7rem 0; border-bottom: 1px solid var(--champ);
}
.kopf-ruf:hover { color: var(--champ-h); }

/* --- Aktionen: kein Knopf-Look, sondern gesetzte Linie ------------------- */
.tat {
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: .82rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 2.2rem; background: var(--papier); color: var(--nacht);
  transition: background-color .25s ease, color .25s ease;
  min-height: 48px; border: 1px solid var(--papier);
}
.tat:hover { background: transparent; color: var(--papier); }
.hell .tat { background: var(--nacht); color: var(--papier); border-color: var(--nacht); }
.hell .tat:hover { background: transparent; color: var(--nacht); }
/* Zweitrangige Aktion: gleiche Groesse, nur ohne Fuellung — Text behaelt seinen Abstand zum Rahmen */
.tat-leise { background: transparent; color: var(--papier); border-color: rgba(246,244,240,.38); }
.tat-leise:hover { background: rgba(246,244,240,.12); color: var(--papier); border-color: var(--papier); }
.hell .tat-leise { background: transparent; color: var(--nacht); border-color: rgba(12,12,13,.28); }
.hell .tat-leise:hover { background: rgba(12,12,13,.06); color: var(--nacht); border-color: var(--nacht); }

/* --- Belegliste: Typografie statt Chips --------------------------------- */
.familien { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.familie { border-top: 1px solid var(--strich); padding-top: 1.4rem; }
.hell .familie { border-color: var(--strich-h); }
.familie h3 { font-size: 1.35rem; margin-bottom: .2rem; }
.familie .ort { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--champ); display: block; margin-bottom: 1rem; }
.familie ul { list-style: none; margin: 0; padding: 0; }
.familie li { font-size: 1.02rem; color: var(--leise-d); padding: .3rem 0; }
.hell .familie li { color: var(--leise-h); }
.familie li em { font-style: normal; font-size: .8rem; color: var(--champ); }

.regel {
  margin-top: clamp(3rem, 6vw, 5rem);
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  line-height: 1.25; max-width: 24ch;
}
.regel span { color: var(--champ); }

/* --- Vergleich: breite Redaktionsblöcke, kein Kasten -------------------- */
.vgl { border-top: 1px solid var(--strich-h); padding-block: clamp(2.5rem, 5vw, 4rem); }
.vgl:last-of-type { border-bottom: 1px solid var(--strich-h); }
.vgl-raster { display: grid; gap: 1.5rem clamp(2rem, 5vw, 5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .vgl-raster { grid-template-columns: 22ch 1fr; } }
.vgl h3 { margin-bottom: .3rem; }
.vgl .ort { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--leise-h); }
.vgl blockquote { margin: 0; }
.vgl blockquote p {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  line-height: 1.4; color: var(--nacht); max-width: 44ch;
}
.vgl cite { font-style: normal; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--leise-h); }

.merke {
  margin-top: 1.8rem; padding-left: 1.4rem;
  border-left: 1px solid var(--champ);
  font-size: .95rem; color: var(--leise-h); max-width: 52ch;
}
.merke b { color: var(--nacht); font-weight: 500; }

/* --- Budget: Linien, keine Kacheln -------------------------------------- */
.leiter { margin: 0; }
.leiter > div { display: grid; gap: .4rem 3rem; grid-template-columns: 1fr; padding-block: 1.6rem; border-top: 1px solid var(--strich-h); }
@media (min-width: 800px) { .leiter > div { grid-template-columns: 16rem 1fr; } }
.leiter dt { font-family: var(--display); font-weight: 300; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); }
.leiter dd { margin: 0; color: var(--leise-h); }

/* --- Formular: Unterstriche statt Rahmen -------------------------------- */
.formraster { display: grid; gap: 0 3rem; grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 760px) { .formraster { grid-template-columns: 1fr 1fr; } .formraster .voll { grid-column: 1 / -1; } }
.feld { display: block; margin-bottom: 2rem; }
.feld > span { display: block; font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--champ); margin-bottom: .6rem; }
.feld input, .feld textarea {
  width: 100%; font: inherit; color: var(--papier); background: none;
  border: none; border-bottom: 1px solid var(--strich);
  padding: .7rem 0; min-height: 48px; border-radius: 0;
}
.feld input::placeholder, .feld textarea::placeholder { color: #6F6B66; }
.feld input:focus, .feld textarea:focus { outline: none; border-bottom-color: var(--champ); }
.feld textarea { min-height: 130px; resize: vertical; }
.feld .tipp { font-size: .82rem; letter-spacing: 0; text-transform: none; color: var(--leise-d); margin-top: .5rem; font-weight: 400; }
.zustimmung { display: flex; gap: .9rem; align-items: flex-start; font-size: .9rem; color: var(--leise-d); margin-bottom: 2rem; }
.zustimmung input { width: 1.1rem; height: 1.1rem; min-height: 0; margin-top: .45rem; accent-color: var(--champ); flex: none; }

/* --- Fuß ---------------------------------------------------------------- */
.fuss { border-top: 1px solid var(--strich); padding-block: clamp(3rem, 6vw, 5rem); font-size: .92rem; color: var(--leise-d); }
.fuss-raster { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.fuss h3 { font-family: var(--text); font-size: .68rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--champ); margin: 0 0 1rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .5rem; }
.fuss-unten { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--strich); font-size: .8rem; }

/* --- Bewegung: wenige, ruhige Momente ----------------------------------- */

/* Hero-Bild atmet sehr langsam. 24 s, 4 % - man sieht es nicht bewusst, es wirkt nur lebendig. */
.hero-bg img { animation: atem 24s ease-out forwards; transform-origin: 60% 55%; }
@keyframes atem { from { transform: scale(1.045); } to { transform: scale(1); } }

/* Beim Laden setzt sich der Text gestaffelt. Einmalig, nicht bei jedem Scrollen. */
.hero .label, .hero h1, .hero .fuehrung, .hero-fuss {
  opacity: 0; animation: herauf .9s cubic-bezier(.22,.61,.36,1) forwards;
}
.hero .label    { animation-delay: .15s; }
.hero h1        { animation-delay: .28s; }
.hero .fuehrung { animation-delay: .46s; }
.hero-fuss      { animation-delay: .60s; }
@keyframes herauf { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.auf { opacity: 0; transform: translateY(18px); transition: opacity .8s ease-out, transform .8s ease-out; }
.auf.da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .auf { opacity: 1; transform: none; }
  .hero-bg img { animation: none; }
  .hero .label, .hero h1, .hero .fuehrung, .hero-fuss { opacity: 1; animation: none; }
}

/* ==========================================================================
   Rechtstexte (Impressum, Datenschutz, Vermittlungsbedingungen)
   Eigene Seiten, gleiche Grammatik: Lesebreite, Haarlinien statt Kästen.
   ========================================================================== */
.recht { padding-block: clamp(7rem, 14vw, 11rem) clamp(4rem, 9vw, 7rem); }
.recht h1 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem); margin-bottom: 1.4rem; }
.recht .lese { max-width: 720px; }
.recht h2 {
  font-family: var(--text);
  font-size: .74rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--champ);
  margin: 3.4rem 0 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--strich);
}
.recht h3 {
  font-family: var(--text);
  font-size: .98rem; font-weight: 500; letter-spacing: .01em;
  text-transform: none; color: var(--papier);
  margin: 1.9rem 0 .5rem;
}
.recht p, .recht li { color: var(--leise-d); }
.recht strong { color: var(--papier); font-weight: 500; }
.recht ul { padding-left: 1.1rem; margin: .6rem 0 1rem; }
.recht li { margin-bottom: .35rem; }
.recht .anschrift { color: var(--papier); font-style: normal; line-height: 1.85; }
/* Noch fehlende Pflichtangabe — sichtbar, damit sie nicht untergeht */
.recht .offen {
  border: 1px solid var(--strich);
  border-left: 2px solid var(--champ);
  padding: 1rem 1.3rem;
  margin: 1.2rem 0;
  color: var(--stein);
}
.recht .stand { margin-top: 3.5rem; color: var(--leise-d); font-size: .9rem; }
.zurueck {
  display: inline-block; margin-top: 3rem;
  font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--papier); text-decoration-color: var(--champ);
}

/* Honigtopf gegen Formular-Bots: für Menschen unsichtbar, für Bots verlockend.
   Nicht display:none — manche Bots überspringen ausgeblendete Felder gezielt. */
.honigtopf {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* Rückmeldung des Formulars */
.formmeldung {
  grid-column: 1 / -1;
  margin: 1.4rem 0 0;
  padding: 1.1rem 1.4rem;
  border-left: 2px solid var(--champ);
  background: rgba(255, 255, 255, .04);
  color: var(--papier);
}
.formmeldung.schlecht { border-left-color: #C86B5A; color: var(--stein); }

/* ==========================================================================
   FASSUNG 4 — „DIE FASSUNG"
   Röhren statt Blöcke · Bewegtbild in gefasster Größe · Schnittstempel · Jahresachse
   Grundlage: 03_Konzept/design-plan.md (14.09.2026)
   ========================================================================== */

/* --- Die Röhre: eine Szene wird über mehrere Bildschirmhöhen festgehalten --
   Die Scrolltiefe INNERHALB der Röhre ist die Zeitachse der Szene. Das ist der
   Mechanismus, der aus einem Dokument eine Bühne macht — bisher: 0 sticky. */
.roehre { height: var(--tiefe, 300vh); position: relative; }
.halt {
  position: sticky; top: 0;
  height: 100svh;
  overflow: clip;
  display: grid; align-content: center;
  padding-block: clamp(4rem, 9vh, 7rem);
}

/* --- Die Fassung: Bewegtbild in gefasster Größe ---------------------------
   EISERNE REGEL: nie breiter angezeigt als die echten Bildpunkte der Quelle.
   --nativ steht inline je Fassung. Damit ist Unschärfe nicht gemildert,
   sondern rechnerisch ausgeschlossen. */
.fassung {
  margin: 0;
  width: min(58vw, calc(var(--nativ, 1920) * 1px));
  max-width: 100%;
  position: relative;
}
.fassung-bild {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0A0D10;
  /* Tiefe durch Versatz und Weichzeichnung, nicht durch Rahmen */
  box-shadow: 0 42px 90px -30px rgba(0, 0, 0, .72);
}
.fassung-bild img,
.fassung-bild video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.fassung-bild video { opacity: 0; transition: opacity 900ms var(--ease-aus); }
.fassung-bild video.laeuft { opacity: 1; }
/* Solange nur das Poster steht, bleibt es sichtbar; das Video legt sich darüber */
.fassung-bild img { z-index: 1; }
.fassung-bild video { z-index: 2; }

/* --- Der Schnittstempel: die Signatur -------------------------------------
   Datum und Uhrzeit kommen aus den Metadaten der Aufnahme, die Gehzeit aus der
   Sprache des Inhabers. Kostet null Bytes, behauptet nichts, beweist alles. */
.stempel {
  display: flex; flex-wrap: wrap; gap: .35em 1.15em; align-items: baseline;
  margin: 0; padding-top: .85rem;
  border-top: 1px solid var(--strich);
  font-family: var(--text); font-size: var(--t-mass); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--leise-d);
}
.hell .stempel { border-top-color: var(--strich-h); color: var(--leise-h); }
.stempel .uhr { color: var(--becken); }          /* der einzige Akzent in der Zeile */
.stempel .weg { color: var(--stein); }
.hell .stempel .weg { color: var(--tinte); }
/* Rückfallebene: lehnt der Browser das Abspielen ab, wird der Stempel zur Taste */
.stempel-taste {
  all: unset; cursor: pointer;
  color: var(--becken); letter-spacing: .16em;
}
.stempel-taste:focus-visible { outline: 2px solid var(--becken); outline-offset: 3px; }

/* --- Szenentitel ---------------------------------------------------------- */
.szene-kopf { max-width: 22ch; }
.szene-titel { font-size: var(--t-riese); font-weight: 200; line-height: .94;
               letter-spacing: -.022em; margin: 0 0 .5em; text-wrap: balance; }
.szene-titel b { font-weight: 700; }
.szene-text { color: var(--leise-d); max-width: 44ch; font-size: 1.05rem; }
.hell .szene-text { color: var(--leise-h); }

/* --- Die Jahresachse: Moons Leiste umgedreht -----------------------------
   Moons 001…010 ist gleichmäßig, weil sie erfunden ist.
   Diese Achse ist schief, weil sie stimmt: sechs Kerben an ihren wahren
   Zeitpositionen über 2013→2025, mit der Corona-Lücke als sichtbarem Loch. */
.achse {
  position: fixed; left: 0; right: 0; bottom: 0; height: 40px; z-index: 40;
  pointer-events: none;
  padding-inline: clamp(1.25rem, 5vw, 4rem);
}
.achse-spur { position: relative; height: 100%; }
.achse-spur::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 13px; height: 1px;
  background: var(--strich);
}
.hell .achse-spur::before, body.ist-hell .achse-spur::before { background: var(--strich-h); }
.kerbe {
  position: absolute; bottom: 13px; width: 1px; height: 8px;
  background: var(--leise-d);
  transition: height var(--t-ui) var(--ease-aus), background-color var(--t-ui) var(--ease-aus);
}
.kerbe[data-aktiv] { height: 18px; background: var(--becken); }
.kerbe::after {
  content: attr(data-jahr);
  position: absolute; left: 50%; bottom: -2px;
  transform: translate(-50%, 100%);
  font: 500 var(--t-mass)/1 var(--text);
  letter-spacing: .14em; color: var(--becken);
  opacity: 0; transition: opacity var(--t-ui) var(--ease-aus);
  white-space: nowrap;
}
.kerbe[data-aktiv]::after { opacity: 1; }

/* --- Auftritte: nur translate und opacity --------------------------------
   Die Referenzanalyse hat gemessen: 71 % aller Animationen bei Moon sind genau
   das. Der teure Eindruck kommt aus Dämpfung, nicht aus Aufwand. */
[data-auf] { opacity: 0; transform: translateY(26px);
             transition: opacity var(--t-szene) var(--ease-aus),
                         transform var(--t-szene) var(--ease-aus); }
[data-auf].da { opacity: 1; transform: none; }
[data-auf][data-verzug="1"] { transition-delay: 90ms; }
[data-auf][data-verzug="2"] { transition-delay: 180ms; }
[data-auf][data-verzug="3"] { transition-delay: 270ms; }

/* --- Aufteilung in der Röhre --------------------------------------------- */
.szene-raster {
  display: grid; gap: clamp(1.6rem, 3vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .szene-raster { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
  .szene-raster.links { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
  .szene-raster.links .szene-kopf { order: 2; }
}

/* --- Handy ----------------------------------------------------------------
   Schlimmster Einzelbefund der Prüfung: heute fallen auf dem Handy 72,3 % des
   Hero-Bildes weg, der Besucher sieht fast nur Himmel. Die Fassung behält ihr
   Seitenverhältnis — kein Hochkantschnitt mehr. */
@media (max-width: 899px) {
  .roehre { height: auto; }
  .halt { position: static; height: auto; padding-block: clamp(3rem, 9vw, 5rem); }
  .fassung { width: 100%; }
  .achse { height: 26px; }
  .kerbe:not([data-aktiv])::after { display: none; }
}

/* --- Reduzierte Bewegung -------------------------------------------------
   Dann ist die Seite genau das gute Dokument, das sie vorher schon war. */
@media (prefers-reduced-motion: reduce) {
  .roehre { height: auto; }
  .halt { position: static; height: auto; }
  [data-auf] { opacity: 1; transform: none; }
  .fassung-bild video { display: none; }
}

@media (hover: none) {
  .tat:hover, .tat-leise:hover { background: inherit; color: inherit; }
}

/* ==========================================================================
   Korrekturen nach der ersten Sichtprüfung (14.09.2026)
   Befund: Die Überschrift sprengte den Bildschirm, der Stempel wurde überlagert,
   die letzte Jahreszahl war am rechten Rand abgeschnitten.
   ========================================================================== */

/* 1) Riesengrad war mit 12rem (192 px) doppelt so groß wie bei den Referenzen
      (Oreo 101 px, Moon 72 px) — und sprengte die 100svh-Röhre. */
:root {
  --t-riese: clamp(2.6rem, 1.0rem + 3.9vw, 6.2rem);
  --t-gross: clamp(2.0rem, 1.0rem + 2.6vw, 4.0rem);
}

/* 2) Die Szene muss in die Röhre passen. Der Halt darf nichts abschneiden:
      Text bekommt Vorrang vor der Bildgröße, nicht umgekehrt. */
.halt { overflow: visible; }
.roehre { overflow: clip; }
.szene-kopf { max-width: 17ch; }
.szene-kopf .szene-text,
.szene-kopf blockquote { max-width: 42ch; }
.szene-titel { margin-bottom: .45em; }

/* Flache Fenster (Notebooks, 100 % Zoom): Grade und Abstände zusammenziehen,
   sonst steht die Szene nicht mehr auf einer Bildschirmhöhe. */
@media (min-width: 900px) and (max-height: 860px) {
  :root { --t-riese: clamp(2.2rem, .9rem + 2.6vw, 3.8rem); }
  .halt { padding-block: clamp(2rem, 5vh, 3.5rem); }
  .fassung { width: min(46vw, calc(var(--nativ, 1920) * 1px)); }
}
@media (min-width: 900px) and (max-height: 700px) {
  :root { --t-riese: clamp(1.9rem, .8rem + 2.0vw, 3rem); }
  .szene-kopf .szene-text { display: none; }   /* Kernaussage vor Beiwerk */
}

/* 3) Die Jahresachse braucht Luft, sonst wird die letzte Zahl abgeschnitten. */
.achse-spur { margin-inline: 1.5rem; }
.kerbe:first-child::after  { left: 0;    transform: translate(0, 100%); }
.kerbe:last-child::after   { left: auto; right: 0; transform: translate(0, 100%); }

/* Damit der Stempel nie unter der Achse verschwindet */
main { padding-bottom: 46px; }
@media (max-width: 899px) { main { padding-bottom: 30px; } }

/* --- Zweite Korrekturrunde -----------------------------------------------
   Befund 1: `max-width` in ch auf .szene-kopf rechnet mit der GRUNDSCHRIFT
   (ca. 8 px je Zeichen), nicht mit der Anzeigegröße der Überschrift. 17ch
   ergaben rund 150 px Spaltenbreite — daher brach jede Überschrift in
   einwortige Zeilen. Die Begrenzung gehört an die Überschrift selbst, wo ch
   mit ihrer eigenen Größe rechnet.
   Befund 2: Die erste Szene lief unter die Kopfleiste. */
.szene-kopf { max-width: none; }
.szene-titel { max-width: 11ch; }            /* ch zählt hier in Display-Größe */
.szene-kopf .szene-text,
.szene-kopf blockquote,
.szene-kopf blockquote p { max-width: 38ch; }
.szene-kopf .label { max-width: none; }

@media (min-width: 900px) {
  .szene-raster { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .szene-raster.links { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  /* Die erste Szene braucht Luft für die Kopfleiste */
  .roehre:first-of-type .halt { padding-top: clamp(6rem, 12vh, 9rem); }
}
@media (max-width: 899px) {
  .szene-titel { max-width: 13ch; }
  .roehre:first-of-type .halt { padding-top: clamp(6rem, 16vh, 8rem); }
}

/* --- Dritte Korrekturrunde ------------------------------------------------
   FEHLER, selbst eingebaut: `overflow: clip` auf .roehre macht die Röhre zum
   klebenden Vorfahren und hebt damit `position: sticky` im Inneren AUF. Gemessen:
   der Halt stand bei y=158 statt y=0 und ragte 158 px unter das Fenster — daher
   die abgeschnittenen Knöpfe. Die Klammer gehört an den Halt, nicht an die Röhre. */
.roehre { overflow: visible; }
.halt { overflow: clip; }

/* --- Vierte Korrekturrunde: die eigentliche Ursache -----------------------
   Die Röhre ist ein <section> und erbte damit `padding-block: clamp(4.5rem,
   11vw, 10rem)` = 158 px aus dem Altbestand. Der klebende Halt begann dadurch
   bei y=158 statt y=0 und ragte 158 px unter das Fenster — daher die
   abgeschnittenen Knöpfe. Gemessen, nicht vermutet. */
.roehre { padding-block: 0; }

/* --- Fünfte Korrekturrunde: Lesbarkeit -----------------------------------
   REGRESSION 1 (schwer): `body { background: transparent }` gilt für ALLE Seiten,
   die Bühne liegt aber nur auf der Startseite. Impressum, Datenschutz und
   Vermittlungsbedingungen standen dadurch cremefarben auf Weiß — unlesbar.
   Der Grundton gehört an das Wurzelelement; die Bühne legt sich darüber. */
html { background: var(--eisen); }

/* REGRESSION 2: Der Akzent hat auf dunklem Grund nur 3,31:1 (gefordert 4,5:1).
   Derselbe Farbton braucht je Bühne eine eigene Helligkeit. */
:root {
  --becken-hell: #56B8C2;   /* Akzent auf dunkler Bühne — 7,9:1 */
  --becken-tief: #15585F;   /* Akzent auf heller Bühne  — 6,2:1 */
}
.stempel .uhr { color: var(--becken-hell); }
.kerbe[data-aktiv] { background: var(--becken-hell); }
.kerbe::after { color: var(--becken-hell); }
.stempel-taste { color: var(--becken-hell); }
body.ist-hell .kerbe[data-aktiv],
body.ist-hell .kerbe::after { color: var(--becken-tief); background-color: currentColor; }
body.ist-hell .kerbe::after { background: none; }

/* Auszeichnungen auf heller Bühne brauchen den dunklen Grauton, nicht den Stein. */
.hell .ort,
.hell .familie .ort,
.hell .vgl .ort,
.hell .familie li em,
.hell .regel span { color: var(--leise-h); }
.hell .feld > span { color: var(--leise-h); }

/* Die Kopfleiste steht auf den Rechtsseiten auf dunklem Grund — das stimmt so. */

/* --- Sechste Korrekturrunde: Bühne ohne JavaScript-Abhängigkeit -----------
   Die interpolierte Bühne war ein Fehlentwurf: Läuft das Skript nicht (oder
   noch nicht), bleibt die Fläche dunkel — und die hellen Sektionen ständen mit
   dunklem Text auf dunklem Grund. Axe hat genau das gemeldet, und es ist kein
   Messfehler, sondern der echte Zustand vor dem ersten Takt.

   Jetzt umgekehrt: Jede helle Sektion trägt ihren Grund SELBST. Weich wird der
   Übergang durch zwei Verlaufsbänder, die über die Nachbarfläche greifen —
   reine CSS-Lösung, kein Skript nötig, keine harte Kante. */
.hell {
  background-color: var(--kalk);
  color: var(--tinte);
  position: relative;
  z-index: 0;
}
.hell::before, .hell::after {
  content: ''; position: absolute; left: 0; right: 0;
  height: clamp(48px, 8vh, 130px);
  pointer-events: none; z-index: -1;
}
.hell::before { top: 0;    transform: translateY(-100%);
                background: linear-gradient(to bottom, rgba(239,234,225,0), var(--kalk)); }
.hell::after  { bottom: 0; transform: translateY(100%);
                background: linear-gradient(to top,    rgba(239,234,225,0), var(--kalk)); }

/* Die Bühne bleibt als ruhiger Grundton liegen — ohne Umfärben. */
.buehne { background: var(--eisen) !important; }

/* --- Siebte Korrekturrunde: Handy ----------------------------------------
   Der Schnittstempel umbrach über zwei Zeilen und lief in die Jahresachse. */
@media (max-width: 899px) {
  .stempel { gap: .3em .8em; letter-spacing: .12em; }
  .stempel .weg { flex-basis: 100%; }         /* der Weg bekommt eine eigene Zeile */
  main { padding-bottom: 56px; }
  .achse { height: 30px; background: linear-gradient(to top, var(--eisen) 55%, transparent); }
  body.ist-hell .achse { background: linear-gradient(to top, var(--kalk) 55%, transparent); }
}

/* ==========================================================================
   ACHTE RUNDE — die Choreografie, die gefehlt hat
   Befund des Inhabers: „wirkt immer noch sehr billig und auch sehr langsam".
   Gemessen: 60 fps im Median, kein Ruckeln — die Technik war nie das Problem.
   Das Problem: --fortschritt wurde vom Skript berechnet und von NICHTS benutzt.
   Jede Szene hielt 2,4 bis 3 Bildschirmhöhen, in denen sich nichts bewegte.
   Das ist tote Scrollstrecke, und genau so fühlt es sich an.
   ========================================================================== */

.roehre { --auf: var(--fortschritt, 1); }

/* --- Die Fassung öffnet sich ---------------------------------------------
   Nicht skaliert (das würde Bewegtbild weichzeichnen), sondern beschnitten:
   der Rahmen geht auf wie eine Blende. Läuft auf der Grafikkarte. */
.fassung-bild {
  clip-path: inset(
    calc((1 - var(--auf)) * 7%) calc((1 - var(--auf)) * 5%)
    calc((1 - var(--auf)) * 7%) calc((1 - var(--auf)) * 5%));
  will-change: clip-path;
}
/* Das Bild wandert langsamer als die Seite — der Parallaxe-Versatz, der
   Tiefe erzeugt. Der Innenzoom von 1.07 gibt ihm den nötigen Spielraum. */
.fassung-bild > img,
.fassung-bild > video {
  transform: translate3d(0, calc((.5 - var(--auf)) * 5%), 0) scale(1.07);
  will-change: transform;
}

/* --- Der Text bewegt sich gegenläufig ------------------------------------ */
.halt .szene-kopf {
  transform: translate3d(0, calc((.5 - var(--auf)) * -26px), 0);
}
.halt .szene-kopf .label {
  opacity: calc(1 - var(--auf) * .55);
}

/* --- Die Gehzeit läuft mit ------------------------------------------------
   Eine Haarlinie unter dem Stempel, die sich über die Szene füllt. Das ist
   die Signatur in Bewegung: der Weg, den der Stempel nennt, wird zurückgelegt. */
.fassung { position: relative; }
.fassung .stempel { position: relative; }
.fassung .stempel::after {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--becken-hell);
  transform: scaleX(var(--auf)); transform-origin: left center;
}
.hell .fassung .stempel::after { background: var(--becken-tief); }

/* --- Kürzere Röhren -------------------------------------------------------
   Statt 240–300vh nur noch 150–190vh. Zusammen mit der Choreografie ist die
   Strecke jetzt bespielt statt abgesessen. */
.roehre { height: calc(var(--tiefe, 300vh) * .62); }

@media (prefers-reduced-motion: reduce) {
  .roehre { --auf: 1; height: auto; }
  .fassung-bild { clip-path: none; }
  .fassung-bild > img, .fassung-bild > video { transform: none; }
  .halt .szene-kopf { transform: none; }
  .halt .szene-kopf .label { opacity: 1; }
  .fassung .stempel::after { transform: none; }
}
@media (max-width: 899px) {
  /* Auf dem Handy ist der Halt statisch — dann gibt es keinen Fortschritt. */
  .roehre { --auf: 1; }
  .fassung-bild { clip-path: none; }
  .fassung-bild > img, .fassung-bild > video { transform: none; }
  .halt .szene-kopf { transform: none; }
  .halt .szene-kopf .label { opacity: 1; }
}

/* Kaskadenkollision: die gekürzte Röhrenhöhe stand NACH der Handy-Regel und
   hat deren `height: auto` überschrieben — das Handy wurde dadurch länger
   statt kürzer (11.091 → 13.287 px). Zurückgeholt. */
@media (max-width: 899px) { .roehre { height: auto; } }
@media (prefers-reduced-motion: reduce) { .roehre { height: auto; } }

/* ==========================================================================
   NEUNTE RUNDE — gegen „wirkt billig"
   Vier Eingriffe: kürzere Wege, ein echter Auftakt, Handwerk an der Fassung,
   eine Achse, die man auch sieht.
   ========================================================================== */

/* 1) Noch kürzere Röhren. Mit der Choreografie ist die Strecke jetzt bespielt —
      aber zwei Bildschirmhöhen je Szene bleiben zu viel Weg für zu wenig Ereignis. */
.roehre { height: calc(var(--tiefe, 300vh) * .5); }
@media (max-width: 899px) { .roehre { height: auto; } }
@media (prefers-reduced-motion: reduce) { .roehre { height: auto; } }

/* 2) Der Auftakt bricht die Achse -----------------------------------------
      Bisher war jede Szene gleich gebaut: Text links, Kasten rechts. Die erste
      Szene bekommt jetzt eine gebrochene Achse — die Fassung läuft über den
      Satzspiegel hinaus, der Text schiebt sich mit negativem Rand darüber.
      Das ist der Layoutbruch, den die Diagnose vermisst hat. */
@media (min-width: 1100px) {
  .roehre:first-of-type .halt > .huelle { max-width: none; padding-inline: 0; }
  .roehre:first-of-type .szene-raster {
    grid-template-columns: minmax(0, 46vw) minmax(0, 1fr);
    align-items: center; gap: 0;
  }
  .roehre:first-of-type .szene-kopf {
    padding-left: clamp(1.25rem, 5vw, 4rem);
    padding-right: clamp(1rem, 2vw, 2rem);
    position: relative; z-index: 2;
  }
  /* Die Fassung darf größer werden — mit 4K-Quelle bleibt sie trotzdem im Maß:
     72vw ergibt bei 2560 px Fenster 1843 gebrauchte Punkte gegen eine 1920er
     Datei, also Faktor 0,96. Die eiserne Regel hält. */
  .roehre:first-of-type .fassung {
    width: min(72vw, calc(var(--nativ, 1920) * 1px));
    margin-left: -10vw;
  }
}

/* 3) Handwerk an der Fassung ----------------------------------------------
      Die Maßlinie: eine Haarlinie, die links und rechts ÜBER die Bildkanten
      hinausragt und an den Enden nach unten abknickt — wie eine Bemaßung in
      einer Bauzeichnung. Sie bindet den Stempel an das Bild, statt ihn
      darunterzusetzen. Reine Pseudoelemente, keine Grafik. */
.fassung { padding-inline: 22px; }
.fassung-bild { margin-inline: -22px; }
.fassung .stempel { border-top: none; padding-top: 1.15rem; }
.fassung .stempel::before {
  content: ''; position: absolute; left: -22px; right: -22px; top: 0; height: 1px;
  background: var(--strich);
}
.hell .fassung .stempel::before { background: var(--strich-h); }
/* die Endhaken der Maßlinie */
.fassung::before, .fassung::after {
  content: ''; position: absolute; bottom: 0; width: 1px; height: 0;
  background: var(--strich); pointer-events: none;
}
.hell .fassung::before, .hell .fassung::after { background: var(--strich-h); }
.fassung .stempel::after { left: -22px; right: -22px; }

/* Innere Lichtkante: gibt dem Bild eine Fassung statt nur einen Rand */
.fassung-bild::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.05);
}
.hell .fassung-bild::after {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(20,24,28,.08);
}

/* 4) Die Achse muss man sehen ---------------------------------------------- */
.achse { height: 52px; }
.achse-spur::before { bottom: 18px; opacity: .55; }
.kerbe { bottom: 18px; height: 10px; background: var(--leise-d); opacity: .75; }
.kerbe[data-aktiv] { height: 26px; opacity: 1; width: 2px; }
.kerbe::after { font-size: .74rem; letter-spacing: .18em; bottom: -4px; }
.kerbe[data-aktiv]::after { font-weight: 600; }
main { padding-bottom: 62px; }
@media (max-width: 899px) { .achse { height: 34px; } main { padding-bottom: 60px; } }

/* --- Zehnte Runde: der Achsenbruch, der vorhin nicht griff ----------------
   Die Regel aus der neunten Runde war wirkungslos: `.fassung { max-width: 100% }`
   aus dem Grundbestand klemmte die Fassung in ihre Gitterspalte, die 72vw
   konnten nie wirksam werden. Jetzt darf die erste Fassung über den rechten
   Rand hinauslaufen — der Halt schneidet sie ab. Das ist der Layoutbruch, den
   die Diagnose vermisst hat: nicht alles endet am selben Satzspiegel.
   Die eiserne Regel bleibt gewahrt: 72vw ergeben bei 2560 px Fenster 1843
   gebrauchte Punkte gegen eine 1920er Datei — Faktor 0,96. */
@media (min-width: 1100px) {
  .roehre:first-of-type .szene-raster { grid-template-columns: minmax(0, 44vw) minmax(0, 1fr); }
  .roehre:first-of-type .fassung {
    max-width: none;
    width: min(68vw, calc(var(--nativ, 1920) * 1px));
    margin-left: 0;
  }
  /* Der Stempel bleibt im sichtbaren Bereich, auch wenn das Bild hinausläuft */
  .roehre:first-of-type .fassung .stempel { padding-right: clamp(1rem, 6vw, 5rem); }
}