/* N1 Secret-Rezept v0.8 (Wort hinter dem Turm, warmer Schein; Abschnitt v0.8 am Ende) · v0.7 (Lücke für den Turm, gelbe Kopie des Worts im Lichtstrahl; Abschnitt v0.7 am Ende) · v0.6.1 (Gras-Saum, Randblende des Worts, Handy-Tafel; Abschnitt v0.6.1 am Ende) · v0.6 (schleifen-film v1.0, lande-moewe v1.0, moewen v1.2; Flug läuft von selbst) · v0.4 — Seite um die Bauteile ebenen-fahrt v0.8, scroll-fahrt-canvas v1.4, moewen v1.1, linse-3d v0.3 (+ regie.js) */
:root {
  --nacht: #0b1830;
  --tinte: #eef3f7;
  --leise: rgba(238, 243, 247, .72);
  --glas: rgba(14, 28, 52, .42);
  --glas-rand: rgba(255, 255, 255, .16);
  --licht: #ffd79a;
  --wort-farbe: #e8eef3;
}
* { box-sizing: border-box; }
html { background: var(--nacht); color: var(--tinte); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/1.5 Inter, system-ui, sans-serif; background: var(--nacht); }
p, h1, h2 { margin: 0; }

/* ---- Strecke: in der CSS-Datei, nie inline (Rezept: sonst greift die Media-Query nicht) ---- */
.leuchte { --ef-strecke: 800vh; }   /* v0.6: der Flug braucht keine Scroll-Strecke mehr */   /* v0.4: länger, weil Szene 2 erst ohne Text steht */
.leuchte .ef-buehne { --ef-grund: var(--nacht); }
.ef-ebene picture { display: block; width: 100%; height: 100%; }
.ef-ebene img { object-position: 60% 50%; }

/* ---- Szene 1 (v0.3): Standbild = erstes Filmbild, darüber der Film. Der Film zeigt sich erst, wenn er läuft ---- */
.szene1 picture, .szene1 video { position: absolute; inset: 0; }
/* (v0.6: Film-Deckkraft setzt das Bauteil schleifen-film, siehe unten) */
/* Urteil v0.2 (2): Felsen und Gischt hinter dem Wort beruhigen — weicher Schatten nur im Wortband, der Turm bleibt hell */
.szene1::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 46% 15% at var(--ruhe-x, 56%) var(--ruhe-y, 60%), rgba(4, 12, 30, .58), rgba(4, 12, 30, 0) 100%); }

/* ---- Flug 1→2: Zeichenfläche des Bauteils scroll-fahrt-canvas; Deckkraft setzt regie.js (Überblendung vom Film) ---- */
.flug-flaeche { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; background-color: transparent; --alt: url("film/s1-quer-v07-poster.webp") 60% 50% / cover no-repeat; object-fit: cover; }

/* ---- Lage 3: das Riesenwort (Text als Ebene). Hell, nach unten auslaufend und durchscheinend (v0.2) ---- */
.wort {
  left: 0; right: 0;
  top: var(--wort-top, 51vh);
  padding-left: var(--wort-links, 16vw);   /* nach rechts: die Senke der Düne liegt unter dem L */
  text-align: center;
  font-family: "Inter Tight", Inter, sans-serif;
  font-weight: 400;
  font-size: var(--wort-groesse, min(27vw, 46vh));
  line-height: .9;
  letter-spacing: -.045em;
  background: linear-gradient(180deg, rgba(247, 250, 253, .96) 0%, rgba(228, 236, 244, .86) 40%, rgba(190, 206, 224, .55) 72%, rgba(160, 182, 206, .22) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.wort span { display: inline-block; }

/* ---- Kopf ---- */
.kopf {
  left: 0; right: 0; top: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 22px) clamp(20px, 4vw, 64px) 0;
  font-size: 13px; letter-spacing: .02em;
}
.marke { font-family: "Inter Tight", sans-serif; font-weight: 500; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.marke em { font-style: normal; color: var(--leise); font-weight: 400; margin-left: .35em; }
.stempel {
  font-family: "JetBrains Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  padding: 5px 10px; border: 1px solid var(--glas-rand); border-radius: 99px; color: var(--leise);
}

.kicker { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--licht); }

/* ---- Einstieg ---- */
.einstieg { left: clamp(20px, 4vw, 64px); top: 18vh; }
.einstieg .hinweis {
  position: fixed; left: 50%; bottom: 4.5vh; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--leise);
}
.einstieg .hinweis i { width: 1px; height: 34px; background: linear-gradient(var(--tinte), transparent); animation: tropfen 1.8s ease-in-out infinite; }
@keyframes tropfen { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---- Nach dem Stopp: Überschrift ---- */
.ueberschrift {
  left: clamp(20px, 4vw, 64px); top: 9vh; max-width: min(30rem, 38vw);
  padding: 26px 28px 28px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(10, 22, 44, .55), rgba(10, 22, 44, .25));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--glas-rand);
}
.ueberschrift :is(h1, h2) {
  margin: 12px 0 12px; font-family: "Inter Tight", sans-serif; font-weight: 400;
  font-size: clamp(28px, 2.7vw, 46px); line-height: 1.06; letter-spacing: -.02em; text-wrap: balance;
}
.ueberschrift .unter { color: var(--leise); font-size: 16px; max-width: 34ch; }

/* ---- Fuß ---- */
.fuss { padding: 48px clamp(20px, 4vw, 64px) 56px; background: var(--nacht); color: var(--leise); font-size: 14px; }
.fuss p { max-width: 70ch; }
.fuss p + p { margin-top: 8px; }
.fuss strong { color: var(--tinte); font-weight: 500; }

/* ---- Einstieg (v0.3): Kicker + ein Satz mit offener Frage, klein — das Wort „Licht" bleibt der Hook ---- */
.einstieg h1 {
  margin-top: 10px; max-width: 22ch;
  font-family: "Inter Tight", sans-serif; font-weight: 400; font-size: clamp(20px, 1.7vw, 28px); line-height: 1.18; letter-spacing: -.01em;
  text-shadow: 0 1px 18px rgba(4, 12, 28, .55);
}
.einstieg h1 span { display: block; color: var(--leise); }
.beispiel-inline {
  display: inline-block; margin-left: 6px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 99px; background: rgba(255, 215, 154, .14); color: var(--licht); vertical-align: 2px;
}
.u2 { top: auto; bottom: 9vh; }   /* Kapitel 2 unten links: die Linse oben rechts bleibt frei */

/* ---- Szene 3 · So funktioniert das Leuchtfeuer: Bild rechts, Schritte links (Master–Detail); Schritt aus regie.js ---- */
.s3 { inset: 0; background: #020f25; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(16px, 3vw, 64px); padding: 72px clamp(20px, 4vw, 64px) 40px; }
.s3-bild { position: relative; aspect-ratio: 1; height: min(84svh, 100%); max-width: 100%; justify-self: center; }
.s3-bild img { -webkit-mask-image: radial-gradient(ellipse 60% 56% at 50% 50%, #000 82%, transparent 100%); mask-image: radial-gradient(ellipse 60% 56% at 50% 50%, #000 82%, transparent 100%); position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .6s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.s3-explosion { opacity: 0; transform: scale(.94); }
.s3:is([data-schritt="2"], [data-schritt="3"], [data-schritt="4"]) .s3-ganz { opacity: 0; transform: scale(1.06); }
.s3:is([data-schritt="2"], [data-schritt="3"], [data-schritt="4"]) .s3-explosion { opacity: 1; transform: scale(1); }
.s3[data-schritt="1"] .s3-ganz { animation: gluehen 3.2s ease-in-out infinite; }
@keyframes gluehen { 50% { filter: brightness(1.12) saturate(1.1); } }
/* Drehung (Schritt 3): die zerlegte Linse wiegt sich, das Licht pulsiert im Takt der Kennung */
.s3[data-schritt="3"] .s3-explosion { animation: kennung-licht 5s linear infinite; }
@keyframes kennung-licht { 0%, 4%, 14%, 100% { filter: brightness(1); } 2%, 12% { filter: brightness(1.45); } }

/* Beschriftung im Code: Punkt + Linie + Etikett, Lage in % des quadratischen Bildes */
.s3-marken { position: absolute; inset: 0; }
.marke-pkt { position: absolute; display: flex; align-items: center; gap: 0; opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.marke-pkt i { width: 9px; height: 9px; border-radius: 50%; background: var(--licht); box-shadow: 0 0 0 4px rgba(255, 215, 154, .18); flex: none; }
.marke-pkt i::after { content: ""; display: block; position: relative; left: 9px; top: 4px; width: var(--linie, 56px); height: 1px; background: rgba(255, 215, 154, .55); }
.marke-pkt span { margin-left: calc(var(--linie, 56px) + 6px); padding: 4px 8px; border-radius: 6px; background: rgba(8, 18, 38, .72); border: 1px solid var(--glas-rand); color: var(--tinte); }
.s3[data-schritt="1"] .marke-pkt[data-ab="1"],
.s3:is([data-schritt="2"], [data-schritt="3"], [data-schritt="4"]) .marke-pkt:is([data-ab="1"], [data-ab="2"]),
.s3:is([data-schritt="3"], [data-schritt="4"]) .marke-pkt[data-ab="3"] { opacity: 1; transform: none; }
.m-lampe  { left: var(--lampe-x, 50%);  top: var(--lampe-y, 47%); }
.m-mitte  { left: var(--mitte-x, 62%);  top: var(--mitte-y, 40%); }
.m-oben   { left: var(--oben-x, 62%);   top: var(--oben-y, 18%); }
.m-teller { left: var(--teller-x, 62%); top: var(--teller-y, 86%); }
.marke-pkt i { margin-left: -4.5px; margin-top: -4.5px; }

.s3-text { position: relative; max-width: 34rem; }
.s3-schritte { list-style: none; margin: 18px 0 0; padding: 0; display: grid; }
.s3-schritte li { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.s3[data-schritt="1"] li[data-nr="1"], .s3[data-schritt="2"] li[data-nr="2"], .s3[data-schritt="3"] li[data-nr="3"], .s3[data-schritt="4"] li[data-nr="4"] { opacity: 1; transform: none; pointer-events: auto; }
.s3-schritte .nr { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--licht); }
.s3-schritte h3 { margin: 10px 0 12px; font-family: "Inter Tight", sans-serif; font-weight: 400; font-size: clamp(28px, 2.6vw, 44px); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.s3-schritte li > p:not(.nr) { color: var(--leise); font-size: 16px; max-width: 40ch; margin: 0; }
.s3-punkte { display: flex; gap: 8px; margin-top: 26px; }
.s3-punkte i { width: 26px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .18); transition: background .3s; }
.s3[data-schritt="1"] .s3-punkte i:nth-child(-n+1), .s3[data-schritt="2"] .s3-punkte i:nth-child(-n+2),
.s3[data-schritt="3"] .s3-punkte i:nth-child(-n+3), .s3[data-schritt="4"] .s3-punkte i { background: var(--licht); }

/* Kennung als Zeitstreifen: zwei Blitze in 15 s (Beispiel) */
.kennung, .reichweite { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--glas); border: 1px solid var(--glas-rand); max-width: 26rem; }
.kennung-band { position: relative; height: 18px; border-radius: 4px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.kennung-band b { position: absolute; top: 0; bottom: 0; width: 3%; background: var(--licht); box-shadow: 0 0 14px var(--licht); }
.kennung-band b:nth-child(1) { left: 2%; } .kennung-band b:nth-child(2) { left: 12%; }
/* v0.10.2: Der Zeiger fährt per transform statt per left. „left“ malte die ganze Textspalte 60-mal je Sekunde neu (eigene Ebene über der 3D-Linse);
   beim Scrollen der Schritt-Fahrt zeigte Chrome dann Kacheln der Spalte leer (waagerechtes Band). transform läuft ohne Neumalen. */
.kennung-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #fff 0 2px, transparent 2px); animation: zeiger 15s linear infinite; }
@keyframes zeiger { from { transform: translateX(0); } to { transform: translateX(100%); } }
.kennung-skala { display: flex; justify-content: space-between; margin: 6px 0 0 !important; font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--leise); }
.kennung-wert { margin: 10px 0 0 !important; font-family: "Inter Tight", sans-serif; font-size: 22px; color: var(--tinte) !important; }
.kennung-wert em { font-style: normal; margin-left: 8px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; background: rgba(255, 215, 154, .14); color: var(--licht); vertical-align: 3px; }
.reichweite svg { width: 100%; height: auto; display: block; will-change: transform; }   /* v0.10.2: eigene kleine Ebene, damit der wandernde Strahl nur die Grafik neu malt, nicht die Textspalte */
.rw-see { fill: none; stroke: rgba(160, 190, 230, .6); stroke-width: 2; }
.rw-strahl { stroke: var(--licht); stroke-width: 1.5; stroke-dasharray: 4 4; animation: strahl 2.4s linear infinite; }
@keyframes strahl { to { stroke-dashoffset: -16; } }
.s3:not([data-schritt="4"]) .rw-strahl { animation-play-state: paused; }   /* v0.10.2: nur im sichtbaren Schritt 4 */
.rw-turm { fill: #e8eef3; } .rw-feuer { fill: var(--licht); filter: drop-shadow(0 0 6px var(--licht)); } .rw-schiff { fill: #c9d6e6; }

/* ---- Handy / Hochformat: Film und Flug als Ausschnitt in voller Quellhöhe, eigene Strecke (≈ doppelt, B191) ---- */
@media (orientation: portrait) {
  .leuchte { --ef-strecke: 950vh; }
  .ef-ebene img, .s1-film { object-position: 50% 50%; }
  .wort { --wort-groesse: 34vw; --wort-top: 60svh; }
  .s3 { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; align-items: start; padding: 64px 16px calc(env(safe-area-inset-bottom, 0px) + 22px); gap: 8px; }
  .s3-bild { height: auto; width: min(100%, 46svh); }
}
@media (max-width: 700px) {
  .kopf { font-size: 12px; }
  .marke { font-size: 13px; }
  .einstieg { top: 12vh; right: 16px; left: 16px; }
  .einstieg h1 { font-size: 21px; }
  .ueberschrift { left: 16px; right: 16px; max-width: none; padding: 18px 18px 20px; }
  .ueberschrift :is(h1, h2) { font-size: 26px; margin: 8px 0; }
  .u2 { bottom: calc(env(safe-area-inset-bottom, 0px) + 4vh); }
  .s3-schritte h3 { font-size: 24px; margin: 6px 0 8px; }
  .s3-schritte li > p:not(.nr) { font-size: 14.5px; }
  .kennung, .reichweite { margin-top: 10px; padding: 10px 12px; }
  .kennung-wert { font-size: 18px; }
  .s3-punkte { margin-top: 14px; }
  .marke-pkt { font-size: 9.5px; }
  .marke-pkt span { padding: 3px 6px; }
  .s3-text .kicker { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .einstieg .hinweis i, .s3 *, .kennung-band::after, .rw-strahl { animation: none !important; }
  .s3 *, .s1-film { transition: none !important; }
  .s1-film { display: none; }
}
@media (max-width: 700px) {
  .marke-pkt { --linie: 18px; }
  .marke-pkt span { white-space: normal; max-width: 8.5em; line-height: 1.25; }
}
/* Lage der Beschriftung im Bild (gemessen an linse-ganz / linse-explosion, % des Quadrats) */
.s3 { --lampe-x: 50%; --lampe-y: 46%; --mitte-x: 60%; --mitte-y: 38%; --oben-x: 65%; --oben-y: 21%; --teller-x: 63%; --teller-y: 88%; }
@media (min-width: 701px) and (orientation: landscape) {
  .marke-pkt { flex-direction: row-reverse; translate: calc(-100% + 9px) 0; }
  .marke-pkt i::after { left: auto; right: 9px; position: absolute; top: 4px; }
  .marke-pkt i { position: relative; margin-left: 0; margin-right: -4.5px; }
  .marke-pkt span { margin-left: 0; margin-right: calc(var(--linie, 56px) + 6px); }
  .s3 { --mitte-x: 38%; --mitte-y: 38%; --oben-x: 36%; --oben-y: 21%; --teller-x: 37%; --teller-y: 88%; --lampe-x: 49%; --lampe-y: 46%; }
}
@media (orientation: portrait) {
  .wort { --wort-groesse: 36vw; --wort-top: 55svh; }
  .szene1 { --ruhe-x: 50%; --ruhe-y: 63%; }
}
@media (max-width: 700px) {
  .einstieg { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 11vh); }   /* am Handy unten im Gras: der Turm oben bleibt frei */
  .einstieg h1 { font-size: 19px; }
  .einstieg .hinweis { bottom: calc(env(safe-area-inset-bottom, 0px) + 2.5vh); }
}
/* Vor dem Bauteil-Skript (erste Bilder!) nur Szene 1 zeigen: spätere Szenen versteckt, bis bauteil.js die Hüllen gebaut hat (Befund v0.3: Szene 3 blitzte bei 0,1 s) */
.leuchte:not(.ef-folge) :is(.flug, .laterne, .u2, .s3) { visibility: hidden; }
.s3-bedienung .mit-finger { display: none; }
@media (hover: none) { .s3-bedienung .mit-zeiger { display: none; } .s3-bedienung .mit-finger { display: inline; } }

/* ============================ v0.4 ============================ */

/* ---- Szene 2: Film-Steckplatz über dem Standbild. Zeigt sich erst, wenn wirklich Bilder kommen ---- */
.laterne picture, .s2-film { position: absolute; inset: 0; }


/* ---- Möwen: eigene Lagen zwischen Film und Wort; Deckkraft setzt regie.js ---- */
.moewen { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; }

/* ---- Handlung: Knöpfe auf der Laterne. Lage (--kx/--ky) und Größe (--kb/--kh) rechnet regie.js aus dem Bildausschnitt ---- */
.knopf {
  position: absolute; z-index: 56; left: var(--kx, 62%); top: var(--ky, 14%); width: var(--kb, 64px); height: var(--kh, 64px);
  margin: 0; padding: 0; translate: -50% -50%; border: 0; border-radius: 50%; background: none; color: var(--tinte);
  font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s linear .3s;
}
.knopf.an { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s ease, visibility 0s; }
.knopf i { position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid rgba(255, 236, 204, .7); box-shadow: 0 0 0 1px rgba(8, 18, 38, .25); }
.knopf i::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; border: 1.5px solid rgba(255, 226, 180, .8); animation: knopf-puls 2.6s ease-out infinite; }
@keyframes knopf-puls { 0% { transform: scale(1); opacity: .85; } 70%, 100% { transform: scale(1.55); opacity: 0; } }
.knopf span {
  position: absolute; left: calc(100% + 12px); top: 50%; translate: 0 -50%; white-space: nowrap;
  font-family: "JetBrains Mono", monospace; font-size: clamp(12px, .62vw, 16px); letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 11px; border-radius: 99px; background: rgba(8, 18, 38, .62); border: 1px solid var(--glas-rand);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .25s, color .25s, border-color .25s;
}
.knopf:is(:hover, :focus-visible) span { background: rgba(255, 215, 154, .92); color: #14203a; border-color: transparent; }
.knopf:focus-visible { outline: 2px solid var(--licht); outline-offset: 6px; }
/* Laterne: der Knopf deckt den Laternenraum; Zeiger darüber = warmer Schein */
.k-laterne { border-radius: 46% 46% 12% 12% / 30% 30% 8% 8%; }
.k-laterne i { border-color: rgba(255, 236, 204, .38); }
.k-laterne i::before { animation-duration: 3.2s; }
.k-laterne i::after {
  content: ""; position: absolute; inset: -55%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 226, 170, .85), rgba(255, 176, 84, .45) 45%, rgba(255, 150, 60, 0) 100%);
  opacity: 0; transform: scale(.82); transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.k-laterne:is(:hover, :focus-visible) i::after { opacity: 1; transform: scale(1); }
.k-laterne:is(:hover, :focus-visible) i { border-color: rgba(255, 236, 204, .9); }
.k-laterne span { left: 50%; top: calc(100% + 14px); translate: -50% 0; }

/* ---- Die Laterne öffnet sich: Lichtkreis um die Laterne (--kx/--ky wie der Knopf), Radius und Deckkraft aus dem Scrollstand ---- */
.oeffnung {
  position: absolute; inset: 0; pointer-events: none; opacity: var(--auf-a, 0); visibility: hidden;
  background: radial-gradient(circle at var(--auf-x, 62%) var(--auf-y, 36%),
    #fff3da 0, #ffd596 calc(var(--auf-r, 0px) * .34), rgba(255, 176, 84, .88) calc(var(--auf-r, 0px) * .7), rgba(255, 150, 60, 0) var(--auf-r, 0px));
}
.oeffnung.an { visibility: visible; }

/* ---- Szene 3: Text links, Linse rechts. 3D-Raum füllt die ganze Szene (Strahlen dürfen weit laufen), Rückfall = Standbilder im Raster ---- */
.s3 { touch-action: pan-y; }                 /* Finger seitlich = Linse drehen, senkrecht = Seite scrollt weiter */
.s3-text { order: 1; z-index: 2; }
.s3-bild { order: 2; }
.s3::before {                                /* Rest des Laternenlichts: aus ihm tritt die Linse hervor */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--glut, 0);
  background: radial-gradient(circle at var(--glut-x, 69%) var(--glut-y, 50%), #fff0d2 0, #ffcf8c 16%, rgba(255, 170, 80, .55) 38%, rgba(255, 150, 60, 0) 72%);
}
.s3-raum { position: absolute; inset: 0; display: none; }
.s3.s3-3d .s3-raum { display: block; }
.s3.s3-3d .s3-bild { visibility: hidden; }
.s3-linse { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.s3-marken3d { position: absolute; inset: 0; pointer-events: none; }
.marke3d { position: absolute; left: 0; top: 0; display: flex; align-items: center; opacity: 0; white-space: nowrap; will-change: transform, opacity;
  font-family: "JetBrains Mono", monospace; font-size: clamp(11px, .58vw, 15px); letter-spacing: .1em; text-transform: uppercase; color: var(--tinte); }
.marke3d i { width: 9px; height: 9px; border-radius: 50%; background: var(--licht); box-shadow: 0 0 0 4px rgba(255, 215, 154, .18); margin-left: -4.5px; flex: none; }
.marke3d b { width: 70px; height: 1px; background: rgba(255, 215, 154, .55); flex: none; }
.marke3d span { padding: 4px 8px; border-radius: 6px; background: rgba(8, 18, 38, .72); border: 1px solid var(--glas-rand); }
.marke3d.links { flex-direction: row-reverse; }
.marke3d.links i { margin-left: 0; margin-right: -4.5px; }
.s3-bedienung { display: none; margin-top: 18px !important; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--leise); }
.s3.s3-3d .s3-bedienung { display: block; }

@media (orientation: portrait) {
  .s2-film { object-position: 50% 50%; }
  .s3 { --glut-x: 50%; --glut-y: 30%; }
  .s3-text { order: 2; }
  .s3-bild { order: 1; justify-self: center; }
}
@media (max-width: 700px) {
  .knopf span { font-size: 10.5px; padding: 6px 9px; left: calc(100% + 8px); }
  .k-laterne span { left: 50%; top: calc(100% + 10px); }
  .marke3d { font-size: 9.5px; letter-spacing: .08em; }
  .marke3d span { padding: 3px 6px; }
  .s3-bedienung { margin-top: 8px !important; font-size: 9.5px; }
  .reichweite svg { height: 54px; }
  .s3-schritte { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .knopf i::before { animation: none; opacity: .5; transform: scale(1.25); }
  .knopf, .k-laterne i::after, .s2-film { transition: none !important; }
}

/* Klick-Weg „Laterne öffnen“: die Texttafel von Kapitel 2 blitzt nicht auf */
.u2 { transition: opacity .2s ease; }
.leuchte.auto-linse .u2 { opacity: 0; }
/* Handy: Rückfall-Bild bleibt in seiner Zeile (lief vorher in den Text), Einstiegstext mit Abstand zum Scroll-Hinweis */
@media (orientation: portrait) {
  .s3 { grid-template-columns: minmax(0, 1fr); }
  .s3-bild { height: min(100%, 100vw - 32px); width: auto; max-width: 100%; }
}
@media (max-width: 700px) { .einstieg { bottom: calc(env(safe-area-inset-bottom, 0px) + 14vh); } }
/* Großer Schirm (ab 1900 px): Lesetext wächst mit, sonst steht er verloren neben der großen Linse */
@media (min-width: 1900px) {
  .kicker { font-size: 14px; }
  .einstieg h1 { font-size: clamp(28px, 1.45vw, 40px); }
  .ueberschrift { max-width: min(38rem, 38vw); padding: 34px 36px 36px; }
  .ueberschrift :is(h1, h2) { font-size: clamp(46px, 2.4vw, 64px); }
  .ueberschrift .unter { font-size: 20px; }
  .s3-text { max-width: 44rem; }
  .s3-schritte .nr { font-size: 14px; }
  .s3-schritte h3 { font-size: clamp(44px, 2.3vw, 62px); margin: 14px 0 18px; }
  .s3-schritte li > p:not(.nr) { font-size: 21px; max-width: 42ch; }
  .kennung, .reichweite { max-width: 34rem; padding: 20px 22px; margin-top: 26px; }
  .kennung-wert { font-size: 28px; }
  .s3-bedienung { font-size: 13px; }
  .einstieg .hinweis { font-size: 14px; }
}

/* ============================ v0.5 ============================ */
/* Lande-Möwe: Canvas in der Dünen-Lage; Lage und Größe setzt regie.js aus dem Bildausschnitt der Düne */
.landemoewe { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; pointer-events: none; }
/* Gezeichnete Möwen sind Hintergrundleben: leicht weich und etwas durchscheinend (Deckkraft setzt regie.js) */
.moewen { filter: blur(.7px); }
/* Kapitel 2: links über dem Wasser, zwischen Lichtkegel (oben) und Brandung (unten); die Laterne rechts bleibt frei */
.u2 { top: 45vh; bottom: auto; max-width: min(27rem, 30vw); }
@media (min-width: 1900px) { .u2 { max-width: min(34rem, 28vw); } }
@media (max-width: 700px) { .u2 { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 3vh); max-width: none; } }
@media (prefers-reduced-motion: reduce) { .landemoewe { display: none; } }
/* Hochformat: andere Düne als im Clip — die Möwe steht HINTER der Dünen-Lage, so verdecken deren Halme die Füße */
@media (orientation: portrait) { .landemoewe { z-index: -1; } }

/* ============================ v0.6 ============================ */
/* Filme: zwei gestapelte Elemente je Szene (Bauteil schleifen-film), die Deckkraft setzt das Bauteil */
.szene1 video, .laterne video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: 0; }
/* Flug: Zeichenfläche in Bildgröße, der Browser skaliert (cover); Deckkraft setzt regie.js */
.flug-flaeche { object-position: 60% 50%; transition: opacity .35s linear; }
.flug-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: 0; transition: opacity .35s linear; }
.laterne { opacity: 0; transition: opacity .5s ease; }
.laterne img { opacity: 1; }
/* Lagen von Szene 1: fahren ab dem ersten Scroll-Zentimeter mit eigenem Tempo nach unten (--lage-wort/--lage-duene in px aus regie.js);
   beim Start des Flugs fahren sie ganz hinaus. translate statt transform: transform gehört dem Bauteil ebenen-fahrt */
.wort { translate: 0 var(--lage-wort, 0px); }
.duene { translate: 0 var(--lage-duene, 0px); }
.leuchte.lagen-weg .wort { translate: 0 115vh; transition: translate .95s cubic-bezier(.5, 0, .9, .5); }
.leuchte.lagen-weg .duene { translate: 0 115vh; transition: translate .8s cubic-bezier(.5, 0, .9, .5); }
.leuchte.lagen-zurueck :is(.wort, .duene) { transition: translate .8s cubic-bezier(.2, .7, .2, 1); }
.einstieg { opacity: var(--einstieg-a, 1); }
.leuchte.lagen-weg .einstieg { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
/* während des Flugs */
.k-weiter {
  position: absolute; z-index: 56; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 4.5vh); translate: -50% 0;
  font-family: "JetBrains Mono", monospace; font-size: clamp(11px, .55vw, 14px); letter-spacing: .14em; text-transform: uppercase; color: var(--tinte);
  padding: 9px 14px; border-radius: 99px; background: rgba(8, 18, 38, .5); border: 1px solid var(--glas-rand); cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s;
}
.k-weiter.an { opacity: .85; visibility: visible; transition: opacity .4s ease, visibility 0s; }
.k-weiter:is(:hover, :focus-visible) { opacity: 1; background: rgba(255, 215, 154, .92); color: #14203a; }
@media (orientation: portrait) { .flug-flaeche, .flug-film, .szene1 video, .laterne video { object-position: 50% 50%; } }
@media (prefers-reduced-motion: reduce) {
  .leuchte.lagen-weg :is(.wort, .duene), .leuchte.lagen-zurueck :is(.wort, .duene) { transition: none; }
  .szene1 video, .laterne video, .flug-film { display: none; }
}

/* ---- v0.6 · Website-Gerüst: Kapitel-Navigation, Tafeln mit Knopf, Leitlinie, Abschluss ---- */
.kapitel { display: flex; gap: clamp(6px, 1.2vw, 26px); margin: 0 auto 0 clamp(18px, 3vw, 56px); }
.kapitel a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 99px; color: var(--leise); text-decoration: none;
  font-size: clamp(13px, .62vw, 16px); letter-spacing: .02em; transition: color .2s, background .2s; }
.kapitel a i { font-style: normal; font-family: "JetBrains Mono", monospace; font-size: .78em; width: 1.7em; height: 1.7em; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--glas-rand); }
.kapitel a:is(:hover, :focus-visible) { color: var(--tinte); background: rgba(8, 18, 38, .4); }
.kapitel a[aria-current="true"] { color: var(--tinte); background: rgba(8, 18, 38, .5); }
.kapitel a[aria-current="true"] i { background: var(--licht); color: #14203a; border-color: transparent; }
.kapitel a:focus-visible { outline: 2px solid var(--licht); outline-offset: 2px; }
.kopf { gap: 12px; }

.tafel-knopf {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; border: 0; border-radius: 99px;
  font: 500 clamp(15px, .8vw, 20px)/1 Inter, system-ui, sans-serif; letter-spacing: .01em; color: #14203a; background: var(--licht);
  padding: .85em 1.35em; box-shadow: 0 6px 24px rgba(4, 12, 28, .35); transition: background .2s, transform .2s;
}
.tafel-knopf::after { content: "→"; font-size: 1.1em; line-height: 0; transition: transform .2s; }
.tafel-knopf:is(:hover, :focus-visible) { background: #ffe6bd; }
.tafel-knopf:is(:hover, :focus-visible)::after { transform: translateX(3px); }
.tafel-knopf:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }

/* Szene 1: ein sichtbarer nächster Schritt unter dem Einstiegssatz */
.e-schritt { margin-top: 18px; display: flex; align-items: center; gap: 14px; }
.e-oder, .t-zusatz { font-family: "JetBrains Mono", monospace; font-size: clamp(11px, .55vw, 14px); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
.einstieg { pointer-events: auto; }

/* Szene 2: Tafel ab der Ankunft. Feste dunkle Grundfläche: der Lichtkegel schwenkt dahinter durch (Kontrast gemessen, ERGEBNIS-v06) */
.u2 { top: 40vh; bottom: auto; max-width: min(31rem, 32vw); padding: 30px 32px 30px;
  background: rgba(7, 16, 34, .82); border: 1px solid rgba(255, 255, 255, .14);
  opacity: 0; visibility: hidden; translate: 0 14px; transition: opacity .5s ease, translate .6s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .5s; }
.u2.an { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .5s ease, translate .6s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.u2 h2 { font-size: clamp(34px, 3vw, 72px); margin: 12px 0 14px; }
.u2 .unter { font-size: clamp(16px, .95vw, 22px); line-height: 1.5; max-width: 38ch; color: rgba(238, 243, 247, .86); }
.t-schritt { margin-top: 22px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
@media (min-width: 1900px) { .u2 { max-width: min(42rem, 30vw); padding: 40px 44px 42px; } }
.leitlinie { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 49; pointer-events: none; opacity: 0; transition: opacity .5s ease .25s; overflow: visible; }
.leitlinie.an { opacity: 1; }
.leitlinie path { fill: none; stroke: rgba(255, 226, 180, .8); stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.leitlinie circle { fill: var(--licht); }

/* Der Knopf AUF der Laterne: ohne Suchen sichtbar (deutlicher Ring, zweiter Pulsring, dunkle Pille mit hellem Text außerhalb des Glases) */
.k-laterne i { border: 2px solid rgba(255, 240, 214, .9); box-shadow: 0 0 0 1px rgba(8, 18, 38, .45), inset 0 0 0 1px rgba(8, 18, 38, .3); }
.k-laterne i::before { inset: -2px; border-width: 2px; border-color: rgba(255, 232, 190, .95); animation: knopf-puls-gross 2.6s ease-out infinite; }
@keyframes knopf-puls-gross { 0% { transform: scale(1); opacity: .9; } 75%, 100% { transform: scale(1.22); opacity: 0; } }
.k-laterne span { font-size: clamp(13px, .72vw, 19px); padding: .7em 1.1em; background: rgba(7, 16, 34, .9); color: #fff; border: 1px solid rgba(255, 226, 180, .75); box-shadow: 0 6px 22px rgba(4, 12, 28, .5); }
.k-laterne span::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .7em; border-radius: 50%; background: var(--licht); box-shadow: 0 0 0 0 rgba(255, 215, 154, .7); animation: punkt-puls 1.8s ease-out infinite; vertical-align: .05em; }
@keyframes punkt-puls { 70%, 100% { box-shadow: 0 0 0 .7em rgba(255, 215, 154, 0); } }

/* Szene 3: genau ein nächster Schritt je Erklärschritt */
.s3-schritt { margin-top: 22px !important; }
.s3-weiter { font-size: clamp(14px, .72vw, 18px); background: transparent; color: var(--tinte); border: 1px solid rgba(255, 226, 180, .6); box-shadow: none; }
.s3-weiter:is(:hover, :focus-visible) { background: var(--licht); color: #14203a; }
.s3-weiter::after { content: "↓"; }
.s3-weiter:is(:hover, :focus-visible)::after { transform: translateY(2px); }

/* Abschluss */
.schluss { background: linear-gradient(#020f25, var(--nacht)); padding: clamp(72px, 12vh, 160px) clamp(20px, 4vw, 64px) clamp(56px, 9vh, 120px); }
.schluss h2 { margin: 14px 0 16px; font-family: "Inter Tight", sans-serif; font-weight: 400; font-size: clamp(32px, 3.4vw, 76px); line-height: 1.05; letter-spacing: -.02em; }
.schluss p { max-width: 60ch; color: var(--leise); font-size: clamp(16px, .95vw, 22px); line-height: 1.5; }
.schluss p + p { margin-top: 26px; }
.schluss-knopf::after { content: "↑"; }
.schluss-knopf:is(:hover, :focus-visible)::after { transform: translateY(-2px); }

@media (max-width: 700px) {
  .kopf { flex-wrap: wrap; row-gap: 8px; }
  .kapitel { order: 3; width: 100%; margin: 0; gap: 4px; }
  .kapitel a { padding: 4px 8px 4px 4px; font-size: 12px; background: rgba(8, 18, 38, .35); }
  .kapitel a:not([aria-current="true"]) span { display: none; }      /* schlanke Kapitelanzeige: nur das aktive Kapitel trägt seinen Namen */
  .kapitel a:not([aria-current="true"]) { padding: 4px; }
  .u2 { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 2.5vh); max-width: none; padding: 18px 18px 18px; }
  .u2 h2 { font-size: 30px; margin: 8px 0 8px; }
  .u2 .unter { font-size: 15px; }
  .t-schritt { margin-top: 14px; }
  .e-schritt { margin-top: 12px; }
  .tafel-knopf { font-size: 15px; }
  .s3-schritt { margin-top: 12px !important; }
  .einstieg .hinweis { display: none; }                               /* am Handy steht „oder scrollen“ schon neben dem Knopf */
  .einstieg { bottom: calc(env(safe-area-inset-bottom, 0px) + 5vh); }
  .s3-bedienung { display: none !important; }
  .k-laterne span { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .k-laterne i::before, .k-laterne span::before { animation: none; }
  .u2, .u2.an, .leitlinie { transition: none; }
}

.t-zusatz .mit-finger { display: none; }
@media (hover: none) { .t-zusatz .mit-zeiger { display: none; } .t-zusatz .mit-finger { display: inline; } }
/* Einstieg als Website-Überschrift lesbar (v0.6): größer, das Riesenwort bleibt der Blickfang */
.einstieg h1 { font-size: clamp(22px, 2vw, 30px); max-width: 20ch; }
@media (min-width: 1900px) { .einstieg h1 { font-size: clamp(40px, 2.1vw, 58px); } }
@media (max-width: 700px) { .einstieg h1 { font-size: 21px; } }

/* Tafel ohne Weichzeichner dahinter: ein Unschärfe-Filter über dem laufenden Film kostet am großen Schirm Bilder (gemessen: 16 statt 24 je Sekunde) */
.u2 { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(7, 16, 34, .88); }

/* ---- v0.6 · Das Wort: groß, hell, und beim Scrollen fliegt man hindurch ----
   Lage, Größe und Drehpunkt rechnet regie.js aus dem Bildausschnitt (wortLage): die Öffnung eines Buchstabens liegt auf dem Turm.
   Maßstab (--wort-s) und Deckkraft (--wort-a) hängen am Scrollstand bis zur Schwelle; die Ersatzwerte hier gelten ohne Skript. */
.wort {
  left: var(--wort-x, 16.5vw); right: auto; top: var(--wort-y, 16vh); padding: 0; text-align: left;
  font-size: var(--wort-g, 35vw); line-height: .9;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 42%, rgba(226, 234, 243, .95) 68%, rgba(200, 214, 229, .82) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* kein Filter am Wort: ein Schatten-Filter müsste im Durchflug bei jedem Bild in voller Größe neu gerechnet werden (gemessen: 30 statt 60 Bilder/s);
     den dunklen Grund hinter dem Wort liefert .szene1::after */
  translate: none; transform-origin: var(--wort-ox, 73%) var(--wort-oy, 66%); transform: translateX(var(--wort-tx, 0px)) scale(var(--wort-s, 1)); opacity: var(--wort-a, 1);
  will-change: transform, opacity;
  /* v0.6.1 · Randblende im Durchflug: zwei Verläufe (waagrecht, senkrecht), die regie.js je Bild setzt; gezeigt wird nur, wo beide decken */
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* v0.6.1 · Gras-Saum: zweite Kuppe hinter der Düne (und vor dem Wort), damit das ganze Wort im Gras steckt. Lage und Größe setzt regie.js (EINMESSEN → WORT.saum) */
.duene .duene-saum { position: absolute; z-index: -1; display: none; max-width: none; object-fit: fill; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%); }
.leuchte.lagen-weg .wort { translate: none; opacity: 0; transition: opacity .2s linear; }
.leuchte.lagen-zurueck .wort { transition: opacity .6s ease; }
.duene { transform-origin: 50% 100%; scale: var(--duene-s, 1); }
.leuchte.lagen-weg .duene { scale: 1.3; }
.szene1::after { background: radial-gradient(ellipse 44% 26% at var(--ruhe-x, 51%) var(--ruhe-y, 50%), rgba(4, 12, 30, .5), rgba(4, 12, 30, 0) 100%); }
.einstieg { max-width: var(--einstieg-b, 22vw); }
@media (orientation: portrait) { .szene1 { --ruhe-x: 50%; --ruhe-y: 54%; } }
@media (max-width: 700px) { .einstieg { max-width: none; } }

/* Filmkorn: gekacheltes Rauschbild in Gerätepixeln (--korn-g setzt regie.js: 256 px geteilt durch die Pixeldichte), weiches Überlagern.
   Liegt nur über Film, Flug und Szene 2 (im DOM davor: Wort, Düne, Tafeln bleiben klar) */
.korn { position: absolute; inset: 0; pointer-events: none; background: url("bilder/korn-256.png") 0 0 / var(--korn-g, 128px) var(--korn-g, 128px); mix-blend-mode: overlay; opacity: .09; }
.leuchte[data-korn="aus"] .korn { display: none; }
.flug-hinweis { position: absolute; z-index: 56; left: 50%; top: 50%; translate: -50% -50%; margin: 0; padding: 10px 16px; border-radius: 99px; background: rgba(7, 16, 34, .8); border: 1px solid var(--glas-rand);
  font-family: "JetBrains Mono", monospace; font-size: clamp(12px, .6vw, 15px); letter-spacing: .12em; text-transform: uppercase; opacity: 0; visibility: hidden; transition: opacity .3s; }
.flug-hinweis.an { opacity: 1; visibility: visible; }

/* ============================ v0.6.1 ============================ */
/* Handy, Szene 2: genau EIN Knopf im Bild. Das Schild „Laterne öffnen“ unter dem Ring entfällt hier (der Ring bleibt antippbar und trägt seinen Namen
   für Vorleseprogramme); der Knopf steht in der Tafel, die Linie führt von dort zum Ring. Die Tafel ist kompakter, damit Laterne und Galerie frei bleiben. */
@media (max-width: 700px) {
  .k-laterne span { display: none; }
  .u2 { padding: 16px 18px 16px; }
  .u2 .kicker { font-size: 11px; letter-spacing: .12em; }
  .u2 h2 { margin: 6px 0 6px; }
  .t-schritt { margin-top: 12px; gap: 8px 12px; }
}

/* ============================ v0.7 ============================ */
/* Der Turm steht frei in einer Lücke zwischen c und h. Breite der Lücke setzt regie.js (EINMESSEN → WORT.luecke) */
.wort span:nth-child(4) { margin-left: var(--wort-luecke, 0em); }
/* Das Wort im Lichtstrahl: gelbe Kopie über dem weißen Wort; sichtbar nur im Lichtkegel (Maske setzt regie.js je Filmbild) */
.wort .wort-glut { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none;
  background: linear-gradient(180deg, var(--glut-1, #fff0c4) 0%, var(--glut-2, #ffc46e) 45%, var(--glut-3, #ff9a3c) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-mask-image: none; mask-image: none; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: opacity .2s linear; }
.leuchte.lagen-weg .wort .wort-glut { opacity: 0 !important; }

/* ============================ v0.8 ============================ */
/* Das Wort ist wieder ohne Lücke gesetzt und liegt HINTER dem Turm: regie.js schneidet die Silhouette von Turm und Felsinsel als Loch in die Maske
   des Worts (EINMESSEN → TURM), dort zeigt der Film. Warmer Schein der Laterne: zweite Kopie des Worts unter der Strahl-Kopie (EINMESSEN → SCHEIN). */
.wort .wort-schein { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; will-change: opacity;
  background: linear-gradient(180deg, var(--glut-1, #ffc98c) 0%, var(--glut-2, #ff9a3c) 45%, var(--glut-3, #ff8505) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.leuchte.lagen-weg .wort .wort-schein { opacity: 0 !important; }
/* Das Wort erscheint erst mit fertiger Turm-Maske (regie.js setzt .turm-bereit, spätestens nach 1,2 s): kein Aufblitzen des Worts vor dem Turm */
.leuchte .wort { transition: opacity .35s ease; }
.leuchte:not(.turm-bereit) .wort { opacity: 0 !important; }

/* ---- v0.9 · Abschluss zu RAVARO (ABSCHLUSS-ENTWURF.md, Fassung A) ----
   Nur dieser Abschnitt trägt die RAVARO-Marke (DESIGN.md): Überschrift Space Grotesk 600 / −0,02 em, Fließtext Inter,
   Mikrolabel JetBrains Mono, genau ein oranger Knopf #FF7716 auf dunklem Grund. Der Rest der Seite bleibt Leuchtfeuer Nordsee. */
.schluss { --ravaro-orange: #FF7716; --ravaro-orange-hell: #ff8c3a; font-family: Inter, system-ui, sans-serif; }
.schluss .kicker { font-family: "JetBrains Mono", ui-monospace, monospace; color: var(--leise); }
.schluss h2 { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 600; letter-spacing: -.02em; line-height: 1.04; max-width: 18ch; text-wrap: balance; }
.schluss p { font-family: Inter, system-ui, sans-serif; }
.schluss .schluss-schritt { margin-top: 34px; }
.ravaro-knopf {
  display: inline-flex; align-items: center; gap: .6em; min-height: 48px; box-sizing: border-box;
  padding: .9em 1.5em; border-radius: .5rem; background: var(--ravaro-orange); color: #0b0b0c;
  font: 600 clamp(16px, .9vw, 20px)/1.2 Inter, system-ui, sans-serif; text-decoration: none;
  box-shadow: 0 8px 28px rgba(255, 119, 22, .22); transition: background .2s, transform .2s;
}
.ravaro-knopf::after { content: "→"; transition: transform .2s; }
.ravaro-knopf:is(:hover, :focus-visible) { background: var(--ravaro-orange-hell); }
.ravaro-knopf:is(:hover, :focus-visible)::after { transform: translateX(3px); }
.ravaro-knopf:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }
.schluss .schluss-leise { margin-top: 16px; font-size: clamp(14px, .78vw, 18px); color: var(--leise); }
.schluss .schluss-leise + .schluss-leise { margin-top: 10px; }
.schluss-leise a { color: var(--tinte); text-underline-offset: 3px; }
/* „Noch einmal von vorn“ ist jetzt ein leiser Textlink (Nebenweg), kein Knopf */
.schluss-knopf {
  appearance: none; background: none; border: 0; padding: 4px 0; min-height: 44px; cursor: pointer;
  font: inherit; color: var(--leise); text-decoration: underline; text-underline-offset: 3px;
}
.schluss-knopf::after { content: " ↑"; display: inline-block; }
.schluss-knopf:is(:hover, :focus-visible) { color: var(--tinte); }
.schluss-knopf:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }
.fuss-link { color: var(--tinte); text-underline-offset: 3px; }
@media (max-width: 700px) {
  .schluss h2 { font-size: 34px; }
  .ravaro-knopf { width: 100%; justify-content: center; }
  .stempel { font-size: 9px; padding: 3px 7px; letter-spacing: .03em; white-space: nowrap; }   /* bleibt neben der Marke in einer Zeile */
  .ravaro-knopf { text-align: center; }
}

/* ---- v0.10 · Der Schluss bekommt die Laterne ----
   Hintergrund = vorhandenes Laternen-Bild (quer / hoch, lazy). Turm rechts, Text links auf einem Verlauf im Ton der bisherigen Fläche.
   Darüber ein drehender Lichtkegel (.schluss-strahl, mix-blend-mode: screen) mit Ursprung auf der Laternenmitte; Lage, Winkel und
   Stärke setzt regie.js (SCHLUSS_STRAHL) als Variablen --x/--y/--w/--a am Abschnitt, das Aufleuchten der Überschrift als --glanz. */
.schluss { position: relative; overflow: hidden; isolation: isolate; min-height: 100svh; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; background: #020f25; }
.schluss > :not(.schluss-bild, .schluss-strahl, .schluss-glut) { position: relative; z-index: 3; }
.schluss-bild { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.schluss-bild picture { position: absolute; inset: 0; }
.schluss-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 38%; display: block; }
.schluss-bild::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #020f25 0%, rgba(2, 15, 37, 0) 16%, rgba(11, 24, 48, 0) 82%, var(--nacht) 100%),
    linear-gradient(90deg, rgba(2, 15, 37, .95) 0%, rgba(2, 15, 37, .86) 28%, rgba(2, 15, 37, .5) 44%, rgba(2, 15, 37, .12) 56%, rgba(2, 15, 37, 0) 64%); }
.schluss-strahl, .schluss-glut { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; }
.schluss-strahl { opacity: var(--a, 0);
  background: conic-gradient(from calc(var(--w, 270deg) - 14deg) at var(--x, 63%) var(--y, 36%),
    rgba(255, 133, 5, 0) 0deg, rgba(255, 133, 5, .16) 5deg, rgba(255, 154, 60, .42) 10deg, rgba(255, 201, 140, .62) 14deg,
    rgba(255, 154, 60, .42) 18deg, rgba(255, 133, 5, .16) 23deg, rgba(255, 133, 5, 0) 28deg, rgba(255, 133, 5, 0) 360deg);
  -webkit-mask-image: radial-gradient(circle at var(--x, 63%) var(--y, 36%), #000 0, rgba(0, 0, 0, .8) 22%, rgba(0, 0, 0, .3) 58%, transparent 92%);
  mask-image: radial-gradient(circle at var(--x, 63%) var(--y, 36%), #000 0, rgba(0, 0, 0, .8) 22%, rgba(0, 0, 0, .3) 58%, transparent 92%); }
.schluss-glut { opacity: calc(.35 + var(--a, 0) * .45);
  background: radial-gradient(circle at var(--x, 63%) var(--y, 36%), rgba(255, 201, 140, .5) 0, rgba(255, 154, 60, .22) clamp(30px, 4vw, 110px), rgba(255, 133, 5, 0) clamp(90px, 12vw, 320px)); }
/* Aufleuchten der Überschrift, wenn der Kegel darüber streicht (Farben wie SCHEIN auf dem Wort „Licht“) */
.schluss h2 { color: color-mix(in srgb, #ffc98c calc(var(--glanz, 0) * 72%), var(--tinte));
  text-shadow: 0 0 calc(var(--glanz, 0) * .5em) rgba(255, 154, 60, calc(var(--glanz, 0) * .6)), 0 2px 18px rgba(2, 15, 37, .5); }
/* Nebenzeilen bleiben im Kegel lesbar: dunkler Hof hinter der Schrift; der Knopf ist deckend und liegt über dem Kegel */
.schluss .kicker, .schluss p:not(.kicker) { text-shadow: 0 1px 2px rgba(2, 15, 37, .85), 0 0 14px rgba(2, 15, 37, .7); }
.schluss .ravaro-knopf { text-shadow: none; }
@media (orientation: portrait) {
  /* Hochformat: Bild unten, Laterne unter dem Text; oben ein dunkler Verlauf, auf dem der Text steht */
  .schluss { justify-content: flex-start; padding-bottom: calc(min(125vw, 70svh) - 40px); }
  .schluss-bild { top: auto; height: min(125vw, 70svh); }
  .schluss-bild img { object-position: 58% 30%; }
  .schluss-bild::after { background: linear-gradient(180deg, #020f25 0%, rgba(2, 15, 37, .82) 12%, rgba(2, 15, 37, .25) 26%, rgba(2, 15, 37, 0) 36%, rgba(11, 24, 48, 0) 86%, var(--nacht) 100%); }
}
@media (prefers-reduced-motion: reduce) { .schluss-strahl, .schluss-glut { transition: none; } }
/* v0.10.1 · Der im Bild gemalte Strahl wird abgedeckt, solange der Kegel nicht in seine Richtung zeigt (--m aus regie.js).
   Farbe (--mf): Himmel neben dem gemalten Strahl je Abstand zur Laterne (radialer Verlauf, gemessene Werte aus GEMALT.himmel);
   Form (--mk): Kegel um die gemessene Strahlrichtung mit weichen Rändern, geschnitten mit einem Kreis ab der Laternenscheibe
   (--mr0/--mr1). Liegt unter dem Lesbarkeits-Verlauf. */
.schluss-maske { position: absolute; inset: 0; opacity: var(--m, 0); background: var(--mf, none);
  -webkit-mask-image: var(--mk, none), radial-gradient(circle at var(--mx, 63%) var(--my, 35%), transparent var(--mr0, 100px), #000 var(--mr1, 180px));
  -webkit-mask-composite: source-in;
  mask-image: var(--mk, none), radial-gradient(circle at var(--mx, 63%) var(--my, 35%), transparent var(--mr0, 100px), #000 var(--mr1, 180px));
  mask-composite: intersect; }

/* v0.10.3: Zeile unter dem Knopf sagt vor dem Klick, was passiert (Außenprüfung S2-1) */
.schluss .schluss-was { margin-top: 14px; font-size: clamp(14px, .78vw, 18px); color: var(--tinte); }
.schluss .schluss-was + .schluss-leise { margin-top: 4px; }
/* v0.10.3: Handy-Start, die Kennzeile liegt auf dem hellen Wort; dunkler Schatten macht sie lesbar (S1-8) */
@media (max-width: 700px) {
  .einstieg .kicker { text-shadow: 0 1px 2px rgba(2, 15, 37, .95), 0 0 10px rgba(2, 15, 37, .85), 0 0 22px rgba(2, 15, 37, .6); }
}

/* ---- v0.11 · „Dein Wort im Licht“ (Entwurf C, entwurf-schluss/c-wort-im-licht.html) ----
   Unter der Überschrift steht ein großes Wort, das ein Eingabefeld ist (Startwort „Licht“). Der Kegel aus SCHLUSS_STRAHL zielt jetzt auf
   dieses Wort statt auf die Überschrift (--glanz an .schluss-wort); nach dem ersten eigenen Wort landet er darauf und bleibt stehen.
   Die Wortgröße setzt regie.js (--wg) passend zur Textspalte (links von der Laterne, am Handy die ganze Breite).
   Brücke und Knopf stehen zurückgenommen da, bis ein Wort gewählt ist (.gewaehlt). Nichts wird gesendet oder gespeichert. */
@property --glanz { syntax: "<number>"; inherits: true; initial-value: 0; }
/* dichter gesetzt, damit Wort, Frage, Knopf und Zeilen in einen Bildschirm passen */
.schluss { padding-top: clamp(40px, 7vh, 120px); }
@media (orientation: landscape) { .schluss { padding-bottom: clamp(36px, 6vh, 100px); } }
.schluss h2 { margin: 10px 0 4px; }
.schluss p + p { margin-top: 16px; }
.schluss .schluss-schritt { margin-top: 18px; }
/* Das große Wort: Schrift des Riesenworts (Inter Tight 400, −0,045 em), Verlauf wie .wort */
.schluss-wort { --wg: min(10.5vw, 18vh); margin: 0; line-height: 1; max-width: none !important; }
.schluss .schluss-wort, .schluss-wort * { text-shadow: none !important; }   /* der dunkle Hof der Nebenzeilen läge über dem Verlauf */
.wort-feld { position: relative; display: inline-block; min-width: .5em; font: 400 var(--wg)/.98 "Inter Tight", Inter, sans-serif; letter-spacing: -.045em; cursor: text; }
.wort-anzeige { display: inline-block; white-space: pre; filter: drop-shadow(0 0 calc(var(--glanz) * .22em) rgba(255, 154, 60, calc(var(--glanz) * .55))); }
.wort-anzeige span { display: inline-block;
  background: linear-gradient(180deg, rgba(255, 240, 196, var(--glanz)) 0%, rgba(255, 196, 110, var(--glanz)) 45%, rgba(255, 154, 60, var(--glanz)) 100%),
              linear-gradient(180deg, #ffffff 0%, #f6f9fc 42%, rgba(226, 234, 243, .95) 68%, rgba(200, 214, 229, .82) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.wort-anzeige span.faellt { animation: sw-faellt .24s cubic-bezier(.5, 0, .9, .5) forwards; }
.wort-anzeige span.steigt { animation: sw-steigt .3s cubic-bezier(.2, .7, .2, 1) backwards; }
@keyframes sw-faellt { to { transform: translateY(.45em); opacity: 0; } }
@keyframes sw-steigt { from { transform: translateY(.4em); opacity: 0; } }
.wort-anzeige.blende { animation: sw-blende .2s linear; }
@keyframes sw-blende { from { opacity: 0; } }
/* Eingabe deckungsgleich über dem Wort: Text unsichtbar, nur die Schreibmarke ist zu sehen */
.wort-eingabe { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  font: inherit; letter-spacing: inherit; color: transparent; caret-color: #ffc98c; outline: none; -webkit-appearance: none; appearance: none; }
.wort-eingabe::selection { background: rgba(255, 201, 140, .28); color: transparent; }
.wort-feld:focus-within::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.02em; height: 2px; background: rgba(255, 201, 140, .55); }
/* Schreibmarke hinter dem Wort, sobald der Schluss im Bild ist (.schluss-da): zeigt, dass man hier tippen kann. Ruhig: steht still */
.wort-marke { position: absolute; top: .16em; bottom: .1em; right: -.08em; width: max(2px, .028em); background: #ffc98c; opacity: 0; pointer-events: none; }
.schluss-da .wort-marke { opacity: 1; animation: sw-blinken 1.05s steps(1) infinite; }
.wort-feld:focus-within .wort-marke { display: none; }
@keyframes sw-blinken { 50% { opacity: 0; } }
/* Frage, Vorschläge und Hinweis erscheinen nach 2 s; der Platz ist vorher reserviert (kein Springen) */
.c-wahl { display: flex; flex-direction: column; gap: 10px; margin-top: 10px !important; max-width: 60ch; }
.c-wahl > * { margin: 0 !important; }
.c-frage-block, .c-vorschlaege, .c-hinweis { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.frage-da :is(.c-frage-block, .c-vorschlaege, .c-hinweis) { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.schluss .c-frage { color: var(--tinte); }
.c-frage .nachher { display: none; }
.eingesetzt .c-frage .vorher, .eingesetzt .c-entwurf { display: none; }
.eingesetzt .c-frage .nachher { display: inline; }
.c-frage b { color: #ffc98c; font-weight: 600; }
.c-vorschlaege { display: flex; flex-wrap: wrap; gap: 8px; }
.vorschlag { appearance: none; min-height: 44px; padding: 0 18px; border-radius: 99px; cursor: pointer;
  border: 1px solid rgba(255, 201, 140, .45); background: rgba(2, 15, 37, .55); color: var(--tinte);
  font: 400 clamp(16px, .95vw, 20px)/1 "Inter Tight", Inter, sans-serif; letter-spacing: .01em; transition: background .2s, border-color .2s; }
.vorschlag:is(:hover, :focus-visible) { background: rgba(255, 201, 140, .16); border-color: #ffc98c; }
.vorschlag:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; }
.vorschlag[aria-pressed="true"] { background: rgba(255, 201, 140, .22); border-color: #ffc98c; }
.schluss .c-hinweis { font-size: clamp(13px, .72vw, 16px); }
/* Nur die Brücke ist zurückgenommen, bis das erste Wort steht. Der Knopf bleibt immer voll orange (v0.11.1):
   ein blasser Knopf liest sich als gesperrt, nicht als „gleich dran" */
.c-bruecke { opacity: .55; transition: opacity .5s ease; }
.schluss .c-bruecke { margin-top: 18px; }
.gewaehlt .c-bruecke { opacity: 1; }
/* Hochformat breiter als 700 px (Tablet): das Bild bleibt unten, das Wort glüht per CSS auf (Klasse css-glut aus regie.js) */
@media (orientation: portrait) { .schluss-wort { --wg: 22vw; margin-top: 4px; } }
.css-glut .schluss-wort.glimmt { animation: sw-glimmen 2.2s ease-in-out both; }
.css-glut .schluss-wort.gluehend { animation: sw-gluehen .7s ease-out forwards; }
@keyframes sw-glimmen { 0% { --glanz: 0; } 45% { --glanz: 1; } 100% { --glanz: .25; } }
@keyframes sw-gluehen { 0% { --glanz: .25; } 40% { --glanz: 1; } 100% { --glanz: .85; } }
/* Handy (≤ 700 px): Laterne und Strahl stehen im ersten Bildschirm über dem Wort. Das Bild sitzt rechts oben; seine Höhe (--bild-oben)
   rechnet regie.js so, dass die Laterne knapp über dem Wort steht. Ränder links und unten laufen weich aus. Vorschläge kompakt in einer bis zwei Reihen */
@media (max-width: 700px) {
  .schluss { justify-content: flex-start; padding-top: clamp(48px, 8vh, 90px); padding-bottom: clamp(48px, 8vh, 80px); }
  .schluss-bild { top: var(--bild-oben, 0px); bottom: auto; left: auto; right: -10vw; width: 86vw; height: auto; aspect-ratio: 1080 / 1350;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%), linear-gradient(180deg, transparent 0, #000 24%, #000 58%, transparent 96%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 30%), linear-gradient(180deg, transparent 0, #000 24%, #000 58%, transparent 96%);
    mask-composite: intersect; }
  .schluss-bild img { object-position: 50% 50%; }
  .schluss-bild::after { background: linear-gradient(90deg, rgba(2, 15, 37, .7) 0%, rgba(2, 15, 37, 0) 45%); }
  .schluss-wort { --wg: 22vw; margin-top: 12px; }
  .c-vorschlaege { gap: 6px; }
  .vorschlag { min-height: 44px; padding: 0 14px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .schluss-da .wort-marke { animation: none; opacity: 1; }
  .css-glut .schluss-wort.glimmt { animation: none; --glanz: .25; }
  .css-glut .schluss-wort.gluehend { animation: none; --glanz: .55; }
  .c-frage-block, .c-vorschlaege, .c-hinweis { transition: none; }
  .c-bruecke, .schluss .schluss-schritt { opacity: 1; transition: none; }
}