/* ============================================================================
   ALBA — Konzept n° 8 · kfo media
   Zwei Farben plus Fotos. Vier Erscheinungsarten. Der Scroll bleibt frei.
   ========================================================================== */

:root {
  --bone: #EDE8E0;
  --ink:  #1C1B19;
  --grey: #8B867E;
  --bg: var(--bone);
  --fg: var(--ink);
  --display: "Bodoni Moda", "Times New Roman", serif;
  --text: "Cabinet Grotesk", system-ui, sans-serif;
  --mono: "Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: 8vw;
}
[data-theme="ink"] { --bg: var(--ink); --fg: var(--bone); --grey: #9C968C; }
/* color muss am Abschnitt selbst stehen: geerbt würde der berechnete Wert des
   Bodys gelten, nicht die im Abschnitt neu gesetzte Variable. */
[data-theme] { color: var(--fg); }

/* Der Grund: drei Steintöne und zwei Linienstärken, je Thema anders. */
:root {
  --seite: #EDE8E0;
  --f1: #E8E2D9; --f2: #EFEAE2; --f3: #EAE4DB; --f4: #E5DED3;
  --ader: rgba(28,27,25,.12); --saege: rgba(28,27,25,.07); --wurf: rgba(28,27,25,.038);
}
/* Grund und Formen mischt main.js laufend um (--seite, --f1 … --wurf). Nur
   die Schrift springt, und zwar in der Mitte des Wechsels: liefe sie mit,
   wären Text und Grund auf halbem Weg dieselbe Farbe. */
body.is-nacht { --fg: var(--bone); --grey: #9C968C; }
body, body .kopf { transition: color .5s var(--ease); }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--seite);
  color: var(--fg);
  font-family: var(--text);
  font-size: 1.05rem;
  line-height: 1.6;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.02; letter-spacing: -0.01em; }
em { font-style: italic; }
.mono { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.kicker { display: block; color: var(--grey); margin-bottom: 1.6rem; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }

/* ------------------------------------------------------------- KOPFZEILE */
.kopf {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  color: var(--fg); transition: color .45s var(--ease);
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px;
  pointer-events: none;
}
.kopf > * { pointer-events: auto; }
.kopf .nav { font-weight: 500; font-size: .84rem; }   /* Plex Mono 500, größer als die Kicker */
.kopf .ort, .kopf .cta { transition: color .45s var(--ease); }
.brand { font-family: var(--display); font-weight: 640; font-size: 1.42rem; letter-spacing: .2em; text-indent: .2em; }
.kopf .ort { color: var(--grey); }
.kopf .cta { position: relative; padding-bottom: 3px; }
.kopf .cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(1); transform-origin: right; transition: transform .6s var(--ease); }
.kopf .cta:hover::after { transform: scaleX(0); transform-origin: left; }

/* ═════════════════════════════════════════════════════════════ DIE NACHT */
/* ═══════════════════════════════════════════════ DER GRUND (Hintergrund) */
/* z-index -1, nicht 0: bei 0 wird der Grund nach dem Inline-Text nicht
   positionierter Abschnitte gemalt und verschluckt Buchstaben. */
.grund { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.grund__l {
  position: absolute; left: 0; top: -20vh; width: 100%; height: 260vh;
  overflow: visible;   /* sonst schneidet das SVG die Unschärfe am Rand hart ab */
  transform-origin: 50% 50%;
  will-change: transform; transform: translate3d(0, 0, 0);
}
/* Tiefe: hinten Dunst, in der Mitte Schlagschatten, vorn ein großer
   unscharfer Brocken. Die Filter sind einmal gerastert, bewegt wird nur. */
.grund__l[data-lay="0"] { filter: blur(1.3px); }
.grund__l[data-lay="1"] { filter: drop-shadow(9px 15px 24px var(--wurf)); }
.grund__l[data-lay="3"] { filter: blur(4px); }
.grund__l polygon { transition: fill 1.4s var(--ease); }
.grund__l path, .grund__l line { transition: stroke 1.4s var(--ease); }

/* ═══════════════════════════════════════════════════════ 01 · THE QUARRY */
/* Die Sektion ist nur der Scrollweg (Höhe setzt main.js). */
/* Nur der Wert, bevor main.js läuft: dort setzt `measureHero()` die Höhe aus
   L (dem Scrollweg der Choreografie) plus einem Bildschirm. Das Tempo wird
   also in main.js gestellt, nicht hier; beide müssen zusammenpassen.
   540 = L 4,4 + 1 (vorher 440 bei L 3,6, das wirkte stellenweise hektisch). */
.quarry { position: relative; height: 540vh; }
.quarry__static { display: none; width: 100%; height: 100vh; object-fit: cover; object-position: 100% 50%; }

/* Die Bühne: Szene ohne Block, fixiert, fährt nach rechts, verblasst beim Abheben */
.plate { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 18; pointer-events: none; overflow: hidden; will-change: opacity, transform, width, height, clip-path; }
.plate__img { width: 100%; height: 100%; object-fit: cover; object-position: 0 50%; opacity: 0; transition: opacity 1.2s var(--ease); }
.plate__img.ok, .plate__img.ph { opacity: 1; }
.plate__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 50%; opacity: 0; }
/* Tiefenschicht: solange sie nicht läuft, bleibt das flache Bild stehen */
.plate__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.plate.gl-on .plate__gl { display: block; }
.plate.gl-on .plate__img { opacity: 0; transition: none; }
.trav__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.trav.gl-on .trav__gl { display: block; }
.trav.gl-on .trav__img { opacity: 0; transition: none; }
/* Der Block: freigestellt, Rechteck kommt jeden Frame aus main.js */
.trav {
  position: fixed; left: 0; top: 0; width: 40vw; height: 30vw;
  z-index: 20; transform-origin: 50% 50%;
  will-change: transform, width, height, filter; pointer-events: none;
}
.trav { overflow: hidden; }   /* ab dem Prolog ein Fenster: das Bild fährt dahinter hinein */
.trav__img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; opacity: 0; transition: opacity .8s var(--ease); }
.trav__img.ok, .trav__img.ph { opacity: 1; }
.trav .cap { position: absolute; right: 0; bottom: 0; opacity: 0; }

.sat {
  position: fixed; left: 0; top: 0; margin: 0; z-index: 21; overflow: hidden;
  background: #DAD5CC; opacity: 0; pointer-events: none; will-change: transform, width, height, clip-path;
}
.sat img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ease); }
.sat img.ok, .sat img.ph { opacity: 1; }
.sat .cap { position: absolute; left: 0; bottom: 0; }

.cap {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bone); background: var(--ink); padding: 6px 10px; white-space: nowrap;
}

/* Overlay: Titel, Sätze, Ader, HUD. Nur während des Heros sichtbar. */
.heroOverlay { position: fixed; inset: 0; pointer-events: none; z-index: 22; transition: opacity .5s var(--ease); }
.heroOverlay.is-off { opacity: 0; }
.heroOverlay > * { position: absolute; }
.vein { inset: 0; width: 100%; height: 100%; z-index: 23; overflow: visible; }
.vein path { fill: none; stroke: var(--fg); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.blockDraw { inset: 0; width: 100%; height: 100%; z-index: 23; overflow: visible; opacity: 0; }
.blockDraw path { fill: none; stroke: var(--fg); stroke-width: 1.1; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.blockDraw path.dim { stroke-width: .8; }
.blockDraw polygon { fill: none; stroke: var(--bone); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 6px rgba(0,0,0,.35)); }
.blockDraw .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; fill: var(--fg); opacity: 0; }

/* Titel: steht unten links auf dem Bild und bleibt dort; wird beim Auseinandergehen Tinte.
   Drei Zeilen, gestaffelt: Roman, kursiv eingerückt, letzte Zeile als Kontur, die sich füllt. */
.title {
  position: fixed; left: var(--gutter); bottom: 9vh; z-index: 21; pointer-events: none;
  color: var(--bone); max-width: 88vw; text-shadow: 0 1px 24px rgba(0,0,0,.28);
  transition: color 1s var(--ease), text-shadow 1s var(--ease);
}
.title.settled { z-index: 19; }
.title.ink { color: var(--fg); text-shadow: none; }
.title h1 { font-size: clamp(3rem, 8.6vw, 9.6rem); font-weight: 560; line-height: .88; letter-spacing: -0.02em; }
.title .l1, .title .l2, .title .l3 { display: block; opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform 1.1s var(--ease), -webkit-text-stroke-color 1s var(--ease), color 1s var(--ease); }
.title .l2 { font-size: .62em; padding-left: .9em; margin: .06em 0; transition-delay: .1s; }
.title .l3 { transition-delay: .2s; }
.title.ink .l3 { -webkit-text-stroke: 1.8px var(--fg); color: transparent; }   /* auf Beige als Kontur */
.title .dot { color: var(--grey); -webkit-text-stroke: 0; }
.title.on .l1, .title.on .l2, .title.on .l3 { opacity: 1; transform: none; }
.title__kicker, .title__sub { opacity: 0; transition: opacity .9s var(--ease) .5s; }
.title__kicker { margin-bottom: 2.2vh; color: color-mix(in srgb, var(--bone) 78%, transparent); }
.title__sub { margin-top: 2.4vh; font-family: var(--text); font-size: .95rem; letter-spacing: .02em; color: color-mix(in srgb, var(--bone) 80%, transparent); max-width: 60ch; }
.title.on .title__kicker, .title.on .title__sub { opacity: 1; }
.title.settled .title__kicker, .title.settled .title__sub { opacity: 0; transition-delay: 0s; }

.say {
  margin: 0; width: 24ch; z-index: 24;
  font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.6rem); line-height: 1.12;
  opacity: 0; transform: translateY(14px);
  transition: opacity .9s var(--ease), transform 1.1s var(--ease);
}
.say.on { opacity: 1; transform: none; }
.say.plate { background: var(--bone); color: var(--ink); padding: 1.2rem 1.4rem; width: 26ch; z-index: 21; }
.s1 { left: 60vw; top: 12vh; width: 18ch; }
.s2 { left: 60vw; top: 12vh; width: 18ch; }

.hud { left: 32px; bottom: 26px; z-index: 24; }
.hud__label { color: var(--grey); transition: opacity .5s; }
.hud__label.swap { opacity: 0; }
.hint { right: 32px; bottom: 26px; z-index: 24; color: var(--grey); transition: opacity .5s; }
.hint span { display: inline-block; animation: nudge 1.8s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ══════════════════════════════════════════════════════════ 02 · PROLOGUE
   Die Fahrt in die Wand. Rechts ein hohes, randloses Fenster (klebt), links
   zwei Textzustände übereinander, die mit der Fahrt wechseln. */
.prologue {
  position: relative; z-index: 1;
  min-height: 205vh;   /* die Fahrt dauert 1,7 Bildschirme, danach etwas Ruhe */
  padding: 20vh var(--gutter) 14vh;
}
/* Das Fenster der Fahrt sitzt bildschirmfest (main.js) — der Text daneben tut
   es jetzt auch. Vorher lief er als klebender Block von unten durchs Bild,
   wurde auf halbem Weg schon wieder ausgeblendet und stand nie still; auf dem
   Handy lag er dabei zusätzlich hinter dem Fenster. Jetzt erscheint er an
   seinem Platz und bleibt dort stehen, solange die Kamera fährt. Ein- und
   Ausblenden macht main.js pro Bild, die Zeilen kommen wie überall gestaffelt. */
.prologue__text {
  position: fixed; left: var(--gutter); top: 50%; transform: translateY(-50%);
  display: grid; z-index: 19; width: min(42vw, 46ch);
  opacity: 0; pointer-events: none;
}
.pro { grid-area: 1 / 1; transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.pro--a.is-past { opacity: 0; transform: translateY(-22px); pointer-events: none; }
.pro--b { opacity: 0; transform: translateY(22px); pointer-events: none; }
.pro--b.is-on { opacity: 1; transform: none; }
.pro--b .kicker { margin-bottom: 2.4rem; }

.slot { display: none; }   /* das Fenster kommt aus main.js, nicht aus dem Fluss */

.vline { border: 0; height: 1px; background: var(--fg); margin: 0 0 8vh; transform: scaleX(0); transform-origin: left; }
.vline.is-in { transform: scaleX(1); transition: transform 1.6s var(--ease); }
.lead { font-family: var(--display); font-size: clamp(1.8rem, 3.4vw, 3.6rem); line-height: 1.14; max-width: 22ch; }
.meta { display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; margin-top: 7vh; color: var(--grey); }

/* ═════════════════════════════════════════════════════════ 03 · THE BLOCK */
.block { padding: 6vh var(--gutter) 18vh; }
/* Kopf zweispaltig: so bleibt die Sektion auf einem Bildschirm, Überschrift
   und Fläche sind zusammen zu sehen. */
.block__head { display: grid; grid-template-columns: 1fr auto; gap: 0 5vw; align-items: end; }
.block__head h2 { font-size: clamp(2.6rem, 5.4vw, 5.6rem); }
.block__head p { max-width: 34ch; color: var(--grey); padding-bottom: .6em; }
.polish {
  position: relative; margin: 6vh auto 0; width: 100%; aspect-ratio: 3 / 2;
  /* nie höher als der Bildschirm: die Fläche muss auf einmal zu sehen sein */
  max-height: 66vh; max-width: calc(66vh * 3 / 2);
  background: #D9D4CB; overflow: hidden; touch-action: pan-y;
}
.polish canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ring {
  position: absolute; left: 0; top: 0; width: 80px; height: 80px;
  border: 1px solid var(--bone); border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; opacity: 0;
  mix-blend-mode: difference; transition: opacity .3s, width .2s, height .2s;
}
.polish:hover .ring, .ring.is-auto { opacity: 1; }
.ring.is-auto { transition: opacity .5s var(--ease); }
.polish__hud {
  position: absolute; left: 0; bottom: 0; display: flex; gap: 2rem; align-items: center;
  background: var(--ink); color: var(--bone); padding: 10px 14px;
}
.polish__hud b { font-weight: 400; font-variant-numeric: tabular-nums; }
.polish__hud button { letter-spacing: inherit; text-transform: inherit; font-size: inherit; color: var(--grey); }
.polish__hud button:hover { color: var(--bone); }
.polish__line {
  position: absolute; right: 5%; bottom: 10%; max-width: 30ch;
  font-family: var(--display); font-size: clamp(1.3rem, 2.2vw, 2.3rem); line-height: 1.15;
  background: var(--bone); color: var(--ink); padding: 1.2rem 1.4rem;
  opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}
.polish__line.is-on { opacity: 1; transform: none; }

/* ═════════════════════════════════════════════════════════ 04 · THE HOUSE */
.house { padding: 8vh var(--gutter) 20vh; }
.house__grid { display: grid; grid-template-columns: 6fr 5fr; gap: 6vw; align-items: start; }
.house__sticky { position: sticky; top: 8vh; }
.house__sticky .cut figure { height: 82vh; }
.house__text { padding-top: 6vh; max-width: 48ch; }
.house__text h2 { font-size: clamp(2.4rem, 5vw, 5.4rem); margin-bottom: 5vh; }
.house__text p { margin-bottom: 4vh; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; margin: 6vh 0; border-top: 1px solid var(--fg); }
.facts div { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); }
.facts dt { color: var(--grey); }
.facts dd { margin: 0; font-family: var(--display); font-size: 1.5rem; }
.cut.small { margin: 8vh 0; }
.cut.small figure { aspect-ratio: 3 / 2; }
.cut figcaption { margin-top: 10px; color: var(--grey); }

/* Bild aus der Schnittkante: eine Linie, dann öffnet sich das Bild daraus. */
.cut { position: relative; }
.cut figure { margin: 0; overflow: hidden; clip-path: inset(50% 0 50% 0); background: #D9D4CB; }
.cut figure img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); }
.cutline { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: left; z-index: 2; pointer-events: none; }
.cut.is-in .cutline { transform: scaleX(1); opacity: 0; transition: transform .8s var(--ease), opacity .6s var(--ease) 1.3s; }
.cut.is-in figure { clip-path: inset(0 0 0 0); transition: clip-path 1.5s var(--ease) .55s; }
.cut.is-in figure img { transform: scale(1); transition: transform 2.2s var(--ease) .55s; }
.cut figure figcaption { clip-path: none; }

/* ═════════════════════════════════════════════════════════ 05 · THE ROOMS */
.rooms__head { padding: 14vh var(--gutter) 6vh; }
.rooms__head h2 { font-size: clamp(2.6rem, 6vw, 6.4rem); max-width: 14ch; }
.room {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center;
  min-height: 100vh; padding: 8vh var(--gutter);
}
.room:nth-of-type(even) .cut { order: 2; }
.room .cut { width: 100%; max-width: 62vh; justify-self: center; }
.room .cut figure { aspect-ratio: 4 / 5; }
.room__text { max-width: 36ch; }
.room .num { display: block; color: var(--grey); margin-bottom: 1.6rem; font-size: .8rem; }
.room h3 { font-size: clamp(2rem, 4vw, 4.2rem); margin-bottom: 3vh; }
.room p { margin-bottom: 3vh; }
.room__facts { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; color: var(--grey); }
.room__facts span { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════ 06 · THE EVENING */
.evening { position: relative; margin-top: 10vh; }
.evening .cut.full figure { aspect-ratio: auto; height: 100vh; }
.evening .cut.full::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(to top, rgba(20,22,28,.55) 0%, rgba(20,22,28,.25) 32%, transparent 60%); }
.evening__text { position: absolute; left: var(--gutter); bottom: 10vh; max-width: 40ch; color: var(--bone); z-index: 3; }
.evening__text .kicker { color: color-mix(in srgb, var(--bone) 70%, transparent); }
.evening__text h2 { font-size: clamp(2.4rem, 5.6vw, 6rem); margin-bottom: 3vh; }
.evening__text p { color: color-mix(in srgb, var(--bone) 82%, transparent); }

/* ══════════════════════════════════════════════════════════════ 07 · FOOT */
.foot { position: relative; padding: 16vh var(--gutter) 4vh; overflow: hidden; }
.vein-end { position: absolute; left: 0; top: 0; width: 100%; height: 34vh; overflow: visible; }
.vein-end path { fill: none; stroke: var(--fg); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .8; }
.vein-end.is-in path { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s var(--ease); }
.foot__grid { position: relative; padding-top: 22vh; }
.foot h2 { font-size: clamp(4rem, 14vw, 15rem); line-height: .9; margin-bottom: 8vh; }
.foot__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3vw; max-width: 64rem; }
.foot__cols p { color: color-mix(in srgb, var(--fg) 78%, transparent); }
.foot__cols a { border-bottom: 1px solid color-mix(in srgb, var(--fg) 35%, transparent); }
.foot__base { display: flex; justify-content: space-between; gap: 2rem; margin-top: 18vh; padding-top: 2vh; border-top: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); color: var(--grey); }

/* ═══════════════════════════════════════════════════ REVEAL: h · p · line */
[data-reveal="p"] { opacity: 0; transform: translateY(14px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
[data-reveal="p"].is-in { opacity: 1; transform: none; }
.ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.ln__i { display: block; transform: translateY(112%); transition: transform 1.15s var(--ease); }
.is-in .ln__i { transform: none; }
.w { display: inline-block; white-space: pre; }
.w.i { font-style: italic; }

/* ═════════════════════════════════════════════════════════════════ MOBILE */
@media (max-width: 900px) {
  :root { --gutter: 6vw; }
  .kopf { padding: 16px 18px; }
  .kopf .ort { display: none; }
  .prologue { min-height: 195vh; padding: 12vh var(--gutter) 10vh; }
  /* Das Fenster steht unten, der Text also oben — und er muss über der
     Fensterkante (52 vh) fertig sein. Deshalb enger gesetzt. */
  .prologue__text { top: 12vh; transform: none; width: auto; right: var(--gutter); }
  .prologue__text .vline { margin-bottom: 4vh; }
  .prologue__text .lead { font-size: clamp(1.5rem, 6.6vw, 2rem); max-width: 20ch; }
  .prologue__text .meta { margin-top: 3.4vh; gap: .5rem 1.6rem; font-size: .68rem; }
  .pro--b .kicker { margin-bottom: 1.4rem; }
  /* Der Titel steht über der Bildbahn auf ruhigem Grund, nicht auf hartem
     Stein, und rückt beim Auseinandergehen der Schichten in die Lücke
     zwischen der oberen und der unteren Bahn. */
  /* Dunst über der hinteren Schicht: die fernen Ketten lösen sich nach unten
     in den Grund auf. Er sitzt im Rechteck der Schicht, wird also von selbst
     dichter, je kleiner die Schicht wird — genau dann, wenn der Titel über
     dem dunklen Grat steht und sonst nicht zu lesen wäre. Die Wand (.trav,
     z-index 20) liegt darüber und bleibt klar. */
  .plate::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(to bottom, rgba(237,232,224,0) 26%, rgba(237,232,224,.56) 62%, rgba(237,232,224,.88) 100%);
  }
  /* Auf dem Handy steht der Titel auf hellem Dunst, nicht auf dunklem Fels —
     also von Anfang an Tinte. Bone auf blassem Himmel war nicht zu lesen. */
  .title { bottom: 46vh; max-width: 88vw; color: var(--fg); text-shadow: none;
           transition: color 1s var(--ease), bottom 1.2s var(--ease); }
  .title.settled { bottom: 42vh; }
  .title h1 { font-size: clamp(2.6rem, 13vw, 4.4rem); }
  .title__sub { font-size: .8rem; color: var(--grey); }
  .title__kicker { font-size: .62rem; margin-bottom: 2.8vh; color: var(--grey); }
  .s1, .s2 { left: var(--gutter); top: 60vh; width: 18ch; font-size: 1.15rem; }
  .blockDraw .lbl { font-size: 9px; }
  .say { width: 18ch; font-size: 1.35rem; }
  .hud, .hint { bottom: 18px; text-shadow: 0 1px 10px rgba(28,27,25,.45); }
  .hud { left: 18px; } .hint { right: 18px; }
  .house__grid, .room { grid-template-columns: 1fr; }
  .house__sticky { position: relative; top: auto; }
  .house__sticky .cut figure { height: auto; aspect-ratio: 3 / 2; }
  .room:nth-of-type(even) .cut { order: 0; }
  .room { min-height: 0; padding: 10vh var(--gutter); gap: 5vh; }
  .block__head { grid-template-columns: 1fr; gap: 3vh; }
  .block__head p { padding-bottom: 0; }
  .polish { aspect-ratio: 4 / 5; max-height: 62vh; max-width: calc(62vh * 4 / 5); }
  .polish__line { right: 4%; left: 4%; bottom: 16%; max-width: none; }
  .foot__cols { grid-template-columns: 1fr; gap: 5vh; }
  .foot__base { flex-direction: column; gap: .6rem; }
  .facts { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal="p"], .ln__i, .say, .cut figure, .cut figure img, .vline { transition: none !important; transform: none !important; opacity: 1 !important; clip-path: none !important; }
  .vein path, .vein-end path { stroke-dashoffset: 0 !important; }
  .trav, .sat, .plate, .heroOverlay { display: none !important; }
  .grund__l { transform: none !important; }
  .quarry { height: auto; } .quarry__static { display: block; }
  /* Ohne Bewegung läuft updateHero nicht, das den Prologtext einblendet — er
     steht hier wieder im Fluss, beide Zustände untereinander. */
  .prologue__text { position: static; transform: none; opacity: 1 !important; width: auto; max-width: 46ch; }
  .prologue__text .pro { grid-area: auto; opacity: 1 !important; transform: none !important; }
  .pro--b { margin-top: 8vh; }
  .slot { display: none; }
  .hint span { animation: none; }
}