/* Jade Tempel v0.5 — Seite (Vanilla, nativer Scroll) */
:root {
  --grund: #07140f;
  --tinte: #f4ead6;
  --gold: #e8b860;
  --glas: rgba(7, 20, 15, .66);
  --nebel: rgba(214, 150, 190, .45);
  --wort-farbe: #ffe6c8;
  --wort-schatten: rgba(90, 20, 10, .35);
  --start-farbe: #f6ce82;   /* v0.5: Gold der Unterzeile und Hinweise, je Licht aus seite.js */
  --ravaro-grund: #0E0F12; --ravaro-orange: #FF7716; --ravaro-orange-hell: #ff8c3a; --ravaro-text: #F8F8F8; --ravaro-grau: #BBBEC3;
  --himmel: rgb(184, 61, 50);
  --rand: clamp(16px, 4vw, 72px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--tinte); font: 400 16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; overflow-x: clip; }
img { display: block; }
a { color: inherit; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kopf */
.kopf { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; justify-content: space-between; align-items: center;
  padding: max(14px, env(safe-area-inset-top)) var(--rand) 14px; pointer-events: none;
  background: linear-gradient(rgba(7, 20, 15, .55), rgba(7, 20, 15, 0)); }
.kopf a { pointer-events: auto; text-decoration: none; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.marke { font: 600 18px/1 Cinzel, Georgia, serif; letter-spacing: .14em; }
.kopf-link { font-size: 14px; font-weight: 500; padding: 10px 16px; border: 1px solid rgba(232, 184, 96, .7); border-radius: 999px; background: rgba(7, 20, 15, .35); }
.kopf-link:hover, .kopf-link:focus-visible { background: var(--gold); color: #1a1206; text-shadow: none; }

/* Aufstieg: eine Bühne für Szene 1–3 */
.aufstieg { position: relative; height: calc(34.75 * 100vh); }   /* v0.5: Zeitachse t 0 … 27 + Halte 6,75 + eine Bühne (seite.js setzt sie genau) */
.anker { position: absolute; left: 0; width: 1px; height: 1px; }
.buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.rahmen { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: max(100vw, calc(100svh * 1672 / 941)); aspect-ratio: 1672 / 941; container-type: inline-size; }
.kamera { position: absolute; inset: 0; transform-origin: 0 0; }
.atem { position: absolute; inset: 0; animation: atmen 28s ease-in-out infinite; transform-origin: 50% 45%; }
.atem img, .kamera > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* v0.4: Filme A/B/C (Bauteil scroll-fahrt-canvas); durchsichtig, bis das erste Bild steht: darunter liegt das Poster */
.kamera > canvas.film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.vorne { position: absolute; inset: 0;
  -webkit-mask: url(../assets/start/maske-2560.webp) 0 0 / 100% 100% no-repeat;
          mask: url(../assets/start/maske-2560.webp) 0 0 / 100% 100% no-repeat; }
img[data-licht="nacht"], img[data-licht="tag"] { opacity: 0; }
img[data-licht="tag"] { opacity: 1; }
/* v0.7.3: jede Lichtfassung ist eine eigene, einmal gerasterte Grafikebene. Der Wechsel ändert nur noch die Deckkraft
   auf der Grafikkarte; vorher wurde die Bühne (auch die maskierte Lage .vorne) jeden Frame kachelweise neu gemalt (Flimmern). */
.atem img[data-licht], .spiegel img[data-licht] { will-change: opacity; }
@keyframes atmen { 0%, 100% { transform: scale(1) translate(0, 0); } 50% { transform: scale(1.022) translate(-.3%, -.35%); } }

/* Nebel: eine nahtlose Textur, eingefärbt über --nebel, zieht langsam */
.nebel { position: absolute; left: 0; width: 200%; pointer-events: none; isolation: isolate;
  -webkit-mask: url(../assets/start/nebel.webp) 0 0 / 50% 100% repeat-x;
          mask: url(../assets/start/nebel.webp) 0 0 / 50% 100% repeat-x;
  animation: ziehen 150s linear infinite; }
.nebel.fern { top: 30%; height: 30%; opacity: .75; }
.himmel-kante { display: none; }
.nebel.nah { top: 60%; height: 46%; animation-duration: 95s; }
@keyframes ziehen { to { transform: translateX(-50%); } }
/* v0.7.3: Nebelfarbe aus drei fest gefärbten Lagen, additiv gemischt (= lineare Mischung wie vorher über --nebel);
   seite.js setzt nur ihre Deckkraft, damit die breiten Nebelbänder nicht jeden Frame neu gemalt werden. */
.nebel > i { position: absolute; inset: 0; mix-blend-mode: plus-lighter; will-change: opacity; opacity: 0; }
.nebel > i[data-nebel="tag"] { background: rgba(255, 255, 255, .55); opacity: 1; }
.nebel > i[data-nebel="abend"] { background: rgba(214, 150, 190, .45); }
.nebel > i[data-nebel="nacht"] { background: rgba(130, 150, 210, .32); }

/* Riesenwort: steht still zwischen Himmel und Tempelberg */
.wort { position: absolute; left: 0; right: 0; top: var(--wort-oben, 5.2%); margin: 0; text-align: center;
  font: 700 var(--wort-groesse, 16cqw)/1 Cinzel, Georgia, serif; letter-spacing: var(--wort-abstand, .3em);
  padding-left: var(--wort-abstand, .3em); color: var(--wort-farbe);
  text-shadow: 0 0 .035em var(--wort-schatten), 0 .02em .14em var(--wort-schatten), 0 0 .5em var(--wort-schatten); user-select: none; pointer-events: none;
  display: flex; justify-content: center; gap: var(--wort-luecke, 20cqw); }
/* JA | DE: der Tempelturm steht in der Lücke, die Dachkanten schneiden nur in A und D */
.wort span { display: block; }

/* TEMPEL: zweite Zeile, vorn und lesbar; JS setzt die Hälften unter JA und DE */
.wort2 { position: absolute; left: 0; top: 0; width: 100%; height: 0; margin: 0;
  font: 600 var(--wort2-groesse, 3.3cqw)/1 Cinzel, Georgia, serif; letter-spacing: .6em; color: var(--wort-farbe);
  text-shadow: 0 1px .35em rgba(0, 0, 0, .7), 0 0 1.2em rgba(0, 0, 0, .35); pointer-events: none; user-select: none; }
.wort2 span { position: absolute; white-space: nowrap; translate: -50% 0; padding-left: .6em; isolation: isolate; }
/* weicher dunkler Schleier hinter den Buchstaben: verläuft nach außen ins Nichts, keine Kante */
.wort2 span::before { content: ""; position: absolute; inset: -1.1em -1.4em; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(7, 20, 15, calc(.62 + .2 * var(--tag-anteil, 0))), rgba(7, 20, 15, calc(.35 + .2 * var(--tag-anteil, 0))) 55%, rgba(7, 20, 15, 0)); }

/* Platzhalter-Lagen (später Filme) und die Nebel-Blende */
.lage { opacity: 0; }
.blende { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.blende > * { position: absolute; opacity: 0; }
.blende-farbe { inset: 0; background: radial-gradient(ellipse at 50% 58%, #f4eef7 0%, #ddcde8 42%, #b39bcb 100%); }
/* Kachel = halbe Elementbreite (2 Bühnenbreiten), so bleibt die Textur nahe ihrem Seitenverhältnis 4:1 und der Zug nahtlos */
.blende-nebel { top: -10%; left: 0; width: 400%; height: 120%; transform-origin: 25% 50%;
  -webkit-mask: url(../assets/start/nebel-dicht.webp) 0 0 / 50% 100% repeat-x;
          mask: url(../assets/start/nebel-dicht.webp) 0 0 / 50% 100% repeat-x;
  animation: ziehen 46s linear infinite; }
.blende-nebel.b1 { background: #f3ecf6; }
.blende-nebel.b2 { background: #c7b0dc; top: 5%; height: 100%; animation-duration: 31s; }
.spiegel { display: none; }

.verlauf { position: absolute; inset: auto 0 0 0; height: 38%; pointer-events: none;
  background: linear-gradient(rgba(7, 20, 15, 0), rgba(7, 20, 15, .78)); }

/* Start-Text */
.start-text { position: absolute; left: 0; right: 0; bottom: max(6vh, 28px); text-align: center; padding: 0 var(--rand); }
.unterzeile { margin: 0 auto 18px; max-width: 40ch; font-size: clamp(17px, 1.35vw, 24px); font-weight: 500; color: var(--start-farbe); text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 0 14px rgba(7, 20, 15, .85); }
.hinweis { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff;   /* v0.8.1: Weiß statt Gold (Ralph: „sieht man ganz schlecht“) */ text-shadow: 0 1px 3px rgba(0, 0, 0, .8), 0 0 10px rgba(7, 20, 15, .8); display: inline-flex; flex-direction: column; align-items: center; gap: 10px; }
.hinweis-linie { width: 1px; height: 34px; background: linear-gradient(#fff, transparent); animation: tropfen 2.6s ease-in-out infinite; transform-origin: top; }
@keyframes tropfen { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* Stufenzähler */
.zaehler { position: absolute; left: var(--rand); top: 50%; translate: 0 -50%; padding: 18px 22px 20px; background: var(--glas);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-left: 2px solid var(--gold); border-radius: 2px 6px 6px 2px;
  opacity: 0; transition: opacity .5s; min-width: 12.5rem; }
.zaehler.an { opacity: 1; }
.zaehler p { margin: 0; }
.zaehler-was { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.zaehler-zahl { font: 600 clamp(46px, 4.6vw, 84px)/1.05 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-top: 6px !important; }
.zaehler-von { font-size: .32em; font-weight: 500; letter-spacing: 0; margin-left: .35em; color: rgba(244, 234, 214, .75); }
.zaehler-leiste { margin-top: 12px; height: 3px; background: rgba(244, 234, 214, .18); border-radius: 2px; overflow: hidden; }
.zaehler-leiste span { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }

/* Tafeln und Karten */
.tafel, .feste { position: absolute; opacity: 0; visibility: hidden; transition: opacity .6s ease, translate .6s ease, visibility 0s .6s; }
.tafel.an, .feste.an { opacity: 1; visibility: visible; transition: opacity .6s ease, translate .6s ease, visibility 0s; }
.tafel { right: var(--rand); top: 50%; translate: 0 calc(-50% + 18px); width: min(31rem, 36vw); padding: 28px 32px 30px; background: var(--glas);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 2px solid var(--gold); border-radius: 4px; }
.tafel.an { translate: 0 -50%; }
.kopfzeile { margin: 0 0 8px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
h2 { margin: 0 0 14px; font: 600 clamp(28px, 2.5vw, 44px)/1.1 Cinzel, Georgia, serif; letter-spacing: .04em; }
.tafel p:not(.kopfzeile) { margin: 0; max-width: 60ch; }

.feste { left: var(--rand); bottom: 6vh; width: calc(100% - 2 * var(--rand) - min(31rem, 36vw) - 32px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; translate: 0 18px; }
.feste.an { translate: 0 0; }
.karte { background: var(--glas); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 4px; padding: 16px 18px 18px; border-left: 2px solid var(--gold); }
.karte-wann { margin: 0 0 4px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.karte h3 { margin: 0 0 6px; font: 600 19px/1.2 Cinzel, Georgia, serif; }
.karte p:last-child { margin: 0; font-size: 14.5px; line-height: 1.5; }


/* Szene 4: Jadehalle (3D aus ../halle3d/ im iframe, darunter ihr Renderbild). Kein Scroll-Fangen: das iframe nimmt keine Zeiger an. */
.lage-3d { position: absolute; inset: 0; opacity: 0; visibility: hidden; background: #0d0a07; }
.lage-3d img, .lage-3d iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; pointer-events: none; }
.lage-3d iframe { opacity: 0; transition: opacity .5s; }
.lage-3d.bereit iframe { opacity: 1; }
.tafel.links { left: var(--rand); right: auto; }
.tafel-link { margin-top: 16px !important; font-size: 14px; color: rgba(244, 234, 214, .78); }
.tafel-link a { color: var(--gold); font-weight: 600; padding: 10px 0; }

/* Szene 5: Von oben */
.tafel.schluss { width: min(34rem, 42vw); }   /* rechts: links steht am Ende wieder der Zähler */
.fuellen span { color: rgba(244, 234, 214, .22); transition: color .25s; }
.fuellen span.voll { color: var(--tinte); }

.fuss { padding: 40px var(--rand) max(32px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 13.5px; color: rgba(244, 234, 214, .75); border-top: 1px solid rgba(232, 184, 96, .2); }
.fuss p { margin: 0; }
.fuss a { padding: 6px 0; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Handy: eigener Bildausschnitt (Quelle x 426–1246), Bild oben, Text unten auf dem Nebel */
@media (max-width: 700px) {
  .aufstieg { height: calc(55 * 100vh); }   /* (27 + 6,75) × 1,6 + 1 */
  .buehne { background: linear-gradient(var(--himmel) 0 120px, var(--grund) 120px); }
  .rahmen { top: 60px; translate: -50% 0; width: 118vw; aspect-ratio: 820 / 941; }
  .rahmen.lage { top: 0; width: max(118vw, calc(100svh * 820 / 941)); }   /* Platzhalter füllen die ganze Höhe */
  .himmel-kante { display: block; position: absolute; left: 0; right: 0; top: -1px; height: 14%; pointer-events: none;
    background: linear-gradient(var(--himmel), rgba(0, 0, 0, 0)); }
  .vorne { -webkit-mask-image: url(../assets/start/maske-handy.webp); mask-image: url(../assets/start/maske-handy.webp); }
  .wort { --wort-oben: 1%; --wort-groesse: 14cqw; --wort-abstand: .12em; --wort-luecke: 33cqw; }
  .wort2 { --wort2-groesse: 5.2cqw; letter-spacing: .45em; }
  .blende-nebel { width: 1200%; transform-origin: 8% 50%; }   /* Hochformat: breitere Kachel gegen Streifen */
  .wort2 span { padding-left: .45em; }
  /* Unter dem Bild: gespiegelte, weiche Fortsetzung des Nebelmeers statt schwarzer Fläche */
  .spiegel { display: block; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 70%; overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
  .spiegel-innen { position: absolute; left: -10px; right: -10px; top: -6px; height: calc(100% / .7); transform: scaleY(-1); filter: blur(4px); }
  .spiegel-innen img { position: absolute; inset: 0 10px; width: calc(100% - 20px); height: 100%; object-fit: cover; }
  .nebel.fern { top: 32%; }
  .verlauf { height: 42%; background: linear-gradient(rgba(7, 20, 15, 0), rgba(7, 20, 15, .55) 45%, rgba(7, 20, 15, .82)); }
  .start-text { bottom: max(5vh, 28px); }
  .unterzeile { text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 0 14px rgba(7, 20, 15, .85); }
  .marke { font-size: 15px; }
  .kopf-link { font-size: 13px; padding: 9px 13px; }
  .zaehler { top: 72px; translate: none; left: 16px; min-width: 0; padding: 10px 14px 12px; }
  .zaehler-was { font-size: 10.5px; }
  .zaehler-zahl { font-size: 38px; }
  .tafel, .tafel.schluss, .tafel.links { left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; padding: 20px 20px 22px; translate: 0 18px; }
  .tafel.an { translate: 0 0; }
  .tafel p:not(.kopfzeile) { font-size: 15px; line-height: 1.55; }
  h2 { font-size: 26px; }
  .feste { left: 16px; right: 16px; bottom: 16px; width: auto; grid-template-columns: 1fr; gap: 10px; }
  .karte { padding: 12px 14px 14px; }
  .karte p:last-child { font-size: 14px; }
  /* v0.4 Handy-Schluss: Zähler klein in der Kopfzeile, dunkler Grund um die Draufsicht (seite.js, SCHLUSS_HANDY) */
  .zaehler.klein { top: max(14px, env(safe-area-inset-top)); left: 50%; translate: -50% 0; padding: 8px 12px 9px; border-radius: 999px; border-left: 0;
    border: 1px solid rgba(232, 184, 96, .45); }
  .zaehler.klein .zaehler-was, .zaehler.klein .zaehler-leiste { display: none; }
  .zaehler.klein .zaehler-zahl { font-size: 16px; margin-top: 0 !important; white-space: nowrap; }
  .zaehler.klein .zaehler-von { font-size: .75em; }
  .buehne.ende { background: var(--grund); }
  .verlauf { transition: opacity .5s; }
}

/* ---------- v0.5 ---------- */
/* Start: unten ein etwas tieferer dunkler Grund hinter Unterzeile und Hinweis (vor allem im Tageslicht) */
.start-text::before { content: ""; position: absolute; inset: -300px -20% -60px; z-index: -1; pointer-events: none;
  /* v0.8.2: langer senkrechter Verlauf (300 px Anlauf), seitlich weich ausgeblendet; vorher war es eine breite, flache Ellipse,
     die oben auf kurzer Strecke von hell auf dunkel sprang (Ralph: „unten ist jetzt ein Balken bei der Schrift“) */
  /* v0.8.1: feste Farbe, je Licht wechselt nur die Deckkraft (eigene Ebene, kein Neumalen, Lehre P29); tagsüber dichter, damit die
     Unterzeile auch auf hellem Nebel ≥ 4,5:1 erreicht (vorher Farbe je Frame über --tag-anteil im Verlauf) */
  background: linear-gradient(rgba(7, 20, 15, 0), rgba(7, 20, 15, .3) 25%, rgba(7, 20, 15, .66) 46%, rgba(7, 20, 15, .84) 62%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  opacity: calc(.4 + .6 * var(--tag-anteil, 0)); will-change: opacity; }
.start-text { isolation: isolate; }

/* Halte an den Plattformen: Standbild über dem Film, kleine ruhige Beschriftung */
.halt-bild:not(.an) img { opacity: 0; }
.halt-tafel { position: absolute; right: var(--rand); bottom: 9vh; width: min(23rem, 30vw); padding: 16px 20px 18px; background: var(--glas);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 2px solid var(--gold); border-radius: 4px;
  opacity: 0; visibility: hidden; translate: 0 12px; transition: opacity .5s ease, translate .5s ease, visibility 0s .5s; }
.halt-tafel.an { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .5s ease, translate .5s ease, visibility 0s; }
.halt-tafel .kopfzeile { margin-bottom: 6px; }
.halt-tafel p:not(.kopfzeile) { margin: 0; font-size: 15px; line-height: 1.5; }

/* Halle: Knöpfe „Tempel frei erkunden“, „Durch die Laterne hinaus“, „Tempel verlassen – weiter“ */
.halle-knopf { position: absolute; left: 50%; bottom: max(5vh, 28px); z-index: 6; translate: -50% 12px; display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 15px 30px; border: 1px solid #f3d08e; border-radius: 999px; background: var(--gold); color: #1a1206;
  font: 600 17px/1.2 Inter, system-ui, sans-serif; letter-spacing: .02em; cursor: pointer;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .5), 0 0 0 6px rgba(232, 184, 96, .18);
  opacity: 0; visibility: hidden; transition: opacity .4s ease, translate .4s ease, background .2s, color .2s, visibility 0s .4s; }
.halle-knopf.an { opacity: 1; visibility: visible; translate: -50% 0; transition: opacity .4s ease, translate .4s ease, background .2s, color .2s, visibility 0s; }
.halle-knopf:hover, .halle-knopf:focus-visible { background: #f3cf86; }
.halle-knopf:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }
.halle-knopf .knopf-zeichen { font-size: 18px; line-height: 1; }
.halle-knopf[aria-busy="true"] { cursor: progress; }
/* Nachtrag v0.5: „Jade Tempel besuchen“ mitten in der Türöffnung; left/top setzt seite.js aus den Bildkoordinaten */
.halle-knopf.besuchen { bottom: auto; top: 50%; translate: -50% calc(-50% + 12px); padding: 15px 26px; }
.halle-knopf.besuchen.an { translate: -50% -50%; }
/* schmale Rechner (bis 1365): Öffnung nur ~300 px breit, rechts beginnt die Terrassen-Tafel → Knopf schmaler, damit er unten bleibt */
@media (min-width: 701px) and (max-width: 1365px) { .halle-knopf.besuchen { padding: 13px 22px; min-height: 52px; font-size: 16px; } .halle-knopf.besuchen .knopf-zeichen { display: none; } }
.halle-knopf.verlassen { position: fixed; z-index: 40; bottom: max(24px, env(safe-area-inset-bottom)); }
html.frei .halle-knopf.verlassen { opacity: 1; visibility: visible; translate: -50% 0; transition: opacity .3s, visibility 0s; }
html.frei { overflow: hidden; }
html.frei .kopf, html.frei .buehne > :not(.lage-3d) { visibility: hidden !important; }
html.frei .lage-3d iframe { pointer-events: auto; }
.schleier { position: fixed; inset: 0; z-index: 39; background: #050b08; opacity: 0; pointer-events: none; }
.schleier.an { opacity: 1; }
.schleier.weg { transition: opacity .45s ease; }

/* Kippen zu RAVARO: harter Schnitt (kein Übergang auf .ravaro selbst); seit v0.8.1 steht alles sofort, keine Zeile-für-Zeile-Einblendung. RAVARO-Marke nach DESIGN.md. */
.ravaro { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 72px var(--rand) 48px; visibility: hidden;
  background-color: var(--ravaro-grund);
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    radial-gradient(70% 60% at 50% 45%, rgba(255, 119, 22, .07), transparent 70%);
  background-size: 48px 48px, 48px 48px, 100% 100%; color: var(--ravaro-text); font-family: Inter, system-ui, sans-serif; }
.ravaro.an { visibility: visible; }
body.ravaro-an .kopf { visibility: hidden; }
.ravaro-innen { width: min(62rem, 100%); }
.ravaro-label { margin: 0 0 22px; font: 400 13px/1.4 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ravaro-grau); }
.ravaro-titel { margin: 0 0 28px; font: 600 clamp(40px, 5.6vw, 104px)/1.02 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.02em; text-transform: uppercase; max-width: 16ch; text-wrap: balance; }
.ravaro-titel em { font-style: normal; color: var(--ravaro-orange); }
.ravaro-text { margin: 0 0 18px; max-width: 46ch; font-size: clamp(18px, 1.35vw, 24px); line-height: 1.55; color: var(--ravaro-grau); }
.ravaro-wende strong { color: var(--ravaro-text); font-weight: 600; }
.ravaro-schritt { margin: 34px 0 0; }
.ravaro-knopf { display: inline-flex; align-items: center; gap: .6em; min-height: 52px; padding: .95em 1.6em; border-radius: .5rem;
  background: var(--ravaro-orange); color: #0A0B0D; font: 600 clamp(16px, 1vw, 20px)/1.2 Inter, system-ui, sans-serif; text-decoration: none;
  box-shadow: 0 10px 32px rgba(255, 119, 22, .25); transition: background .2s, box-shadow .2s; }
.ravaro-knopf::after { content: "→"; transition: transform .2s; }
.ravaro-knopf:hover, .ravaro-knopf:focus-visible { background: var(--ravaro-orange-hell); }
.ravaro-knopf:hover::after, .ravaro-knopf:focus-visible::after { transform: translateX(3px); }
.ravaro-knopf:focus-visible { outline: 2px solid var(--ravaro-text); outline-offset: 3px; }
.ravaro-leise { margin: 18px 0 0; font-size: 14px; color: var(--ravaro-grau); }
.ravaro-fuss { margin-top: clamp(40px, 8vh, 96px); padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ravaro-logo { width: clamp(150px, 13vw, 240px); height: auto; }
.ravaro-version { font: 400 12px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; color: var(--ravaro-grau); }
.fuss { background: var(--ravaro-grund); }   /* unter dem RAVARO-Abschnitt ohne Farbsprung */

/* Nachtrag v0.5: am Rechner wuchtig – volle Bühne, linksbündig, Logo-Zeile randlos am unteren Rand */
@media (min-width: 701px) {
  .ravaro { place-items: center start; padding: clamp(72px, 9vh, 140px) var(--rand) clamp(120px, 15vh, 210px); }
  .ravaro-innen { width: 100%; }
  .ravaro-label { margin-bottom: clamp(22px, 3vh, 44px); font-size: clamp(13px, .9vw, 20px); }
  .ravaro-titel { margin-bottom: clamp(28px, 4.5vh, 64px); font-size: min(9.3vw, 15.5vh, 240px); line-height: .94; max-width: 7.2em; text-wrap: initial; }
  .ravaro-text { max-width: 60ch; font-size: clamp(20px, 1.5vw, 34px); line-height: 1.5; margin-bottom: .7em; }
  .ravaro-schritt { margin-top: clamp(34px, 5vh, 72px); }
  .ravaro-knopf { min-height: clamp(60px, 4.4vw, 88px); padding: .9em 1.7em; border-radius: .6rem; font-size: clamp(19px, 1.35vw, 30px); }
  .ravaro-leise { margin-top: clamp(18px, 2.4vh, 32px); font-size: clamp(14px, .95vw, 20px); }
  .ravaro-fuss { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: clamp(18px, 2.6vh, 36px) var(--rand); }
  .ravaro-logo { width: clamp(170px, 12vw, 300px); }
  .ravaro-version { font-size: clamp(12px, .8vw, 17px); }
}

@media (max-width: 700px) {
  .halt-tafel { left: 16px; right: 16px; bottom: 16px; width: auto; padding: 14px 16px 16px; }
  .halt-tafel p:not(.kopfzeile) { font-size: 14.5px; }
  #erkunden { top: calc(max(14px, env(safe-area-inset-top)) + 58px); bottom: auto; translate: -50% -8px; }
  #erkunden.an { translate: -50% 0; }
  .halle-knopf { font-size: 15px; padding: 12px 20px; min-height: 48px; white-space: nowrap; }
  .ravaro { padding: 64px 20px 32px; place-items: center start; }
  .ravaro-titel { font-size: clamp(34px, 10.5vw, 48px); }
  .ravaro-text { font-size: 17px; }
  .ravaro-knopf { width: 100%; justify-content: center; }
}

/* v0.6 Jadedrache: 3D-Fläche, seit v0.7 nur noch im RAVARO-Abschnitt über dem schwarzen Grund */
.drache-flaeche { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.drache-flaeche.vorn { z-index: 9; }
.drache-knopf { position: absolute; left: 0; top: 0; z-index: 5; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent;
  cursor: pointer; opacity: 0; visibility: hidden; -webkit-tap-highlight-color: transparent; will-change: transform; }
.drache-knopf.an { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.drache-knopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.drache-hinweis { position: absolute; left: 50%; top: calc(100% + 6px); translate: -50% 0; white-space: nowrap; padding: 6px 13px 7px; border-radius: 999px;
  background: var(--glas); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--gold); font: 600 13px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: .04em; pointer-events: none; animation: hinweis-puls 2.8s ease-in-out infinite; }
@keyframes hinweis-puls { 50% { color: #fff1cf; } }
/* Anflug: Schluss-Tafel und Zähler treten zurück, damit der Drache frei auf den Besucher zufliegt */
.buehne.anflug .tafel.schluss, .buehne.anflug .zaehler { opacity: 0 !important; transition: opacity .35s ease; }
/* RAVARO: der Drache als Link (Trefferfläche; das Bild zeichnet die 3D-Fläche darüber). Rechner rechts, Handy über der Überschrift */
.ravaro-drache { display: none; }
/* Nachtrag v0.6.1: am Rechner füllt er die rechte Hälfte (44 % der Breite, höchstens 60 % der Höhe), mittig zum Textblock
   (= Mitte zwischen oberem und unterem Innenabstand von .ravaro). Das Feld hat genau das Seitenverhältnis des Drachen in seiner Haltung
   (--drache-seiten, von drache.js gemessen): Trefferfläche = sichtbarer Drache. Der Textblock rückt dafür auf die linke Seite. */
.ravaro-drache.bereit { display: block; position: absolute; right: var(--rand); top: calc((clamp(72px, 9vh, 140px) + 100% - clamp(120px, 15vh, 210px)) / 2);
  translate: 0 -50%; width: min(44vw, calc(60vh * var(--drache-seiten, 1.7))); aspect-ratio: var(--drache-seiten, 1.7); z-index: 10;
  border-radius: 14px; cursor: pointer; }
@media (min-width: 701px) {
  .ravaro:has(.ravaro-drache.bereit) .ravaro-innen { width: calc(100% - 44vw - clamp(24px, 3vw, 64px)); }
  .ravaro:has(.ravaro-drache.bereit) .ravaro-titel { font-size: min(6.1vw, 15.5vh, 240px); }
}
.ravaro-drache:focus-visible { outline: 2px solid var(--ravaro-orange); outline-offset: 6px; }
@media (max-width: 700px) {
  .ravaro-drache.bereit { position: relative; right: auto; top: auto; translate: none; width: auto; height: clamp(104px, 17svh, 170px); aspect-ratio: auto; margin: -8px auto 10px; border-radius: 12px; }
  .drache-hinweis { font-size: 12.5px; }
}

/* v0.7 Drachenfilme in der Draufsicht (seite.js „v0.8 Gewitter“). Sie liegen in der Kamera der Draufsicht und fahren mit ihr.
   D-Bild 1 ist gegenüber dem Standbild um 0,68 % mittig vergrößert (gemessen, SIFT): darum alle Filmlagen auf 99,32 %, dann deckt
   das Endbild das Standbild pixelgleich; der Rand von 0,34 % zeigt das Standbild darunter. */
.drache-film { position: absolute; inset: 0; pointer-events: none; }
.drache-film > video, .drache-film > picture { position: absolute; inset: 0; width: 100%; height: 100%; scale: .9932; opacity: 0; visibility: hidden; }
.drache-film > video, .drache-film > picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.drache-film > .an { opacity: 1; visibility: visible; }
.drache-film > .film-e.weich { transition: opacity .35s ease; }   /* nur beim Sprung aus Gewitter/Standbild: kurze Überblendung */
.drache-film > .film-d-ende.ruhig-blende { transition: opacity .6s ease; }   /* reduzierte Bewegung: sanft auf das Drachenbild */

/* v0.8 Gewitter (3,2 s): eigene Ebenen mit FESTER Farbe, animiert wird ausschließlich die Deckkraft (Compositor, Lehre P29).
   Zeitpunkte: Dunkel 0–0,8 s auf, ab 2,3 s wieder hell · Blitz 1 bei 1,0 s (Strahl links) · Blitz 2 bei 1,5–1,6 s (Weiß 0,8, darunter
   die Überblendung Standbild → Drachenbild 1,49–1,62 s) · Blitz 3 bei 2,06 s (Strahl rechts). Höchstens drei Blitze in jeder Sekunde (WCAG 2.3.1). */
.drache-film > .gw { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.drache-film.gewitter > .gw, .drache-film.gewitter > .film-d-ende { will-change: opacity; }   /* eigene Grafikebene nur während des Gewitters */
.gw-dunkel { background: #18202f; }
.gw-blitz { background: #e9eeff; }
.gw-strahl path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.gw-strahl path { stroke: #f6f8ff; stroke-width: 4.2; }
.gw-strahl path.halo { stroke: #a9bcff; stroke-width: 20; stroke-opacity: .3; }
.drache-film.gewitter > .film-d-ende { visibility: visible; animation: gw-tausch 3.2s linear both; }
.drache-film.gewitter > .gw-dunkel { animation: gw-dunkel 3.2s linear both; }
.drache-film.gewitter > .gw-blitz { animation: gw-blitz 3.2s linear both; }
.drache-film.gewitter > .gw-a { animation: gw-a 3.2s linear both; }
.drache-film.gewitter > .gw-b { animation: gw-b 3.2s linear both; }
@keyframes gw-dunkel { 0% { opacity: 0; } 25% { opacity: .64; animation-timing-function: linear; } 72% { opacity: .64; animation-timing-function: ease-in-out; } 100% { opacity: 0; } }
@keyframes gw-blitz { 0%, 30% { opacity: 0; } 31.5% { opacity: .5; } 36% { opacity: 0; } 46% { opacity: 0; } 47.5%, 50% { opacity: .8; } 55% { opacity: 0; }
  63% { opacity: 0; } 64.5% { opacity: .42; } 69%, 100% { opacity: 0; } }
@keyframes gw-tausch { 0%, 46.5% { opacity: 0; } 50.5%, 100% { opacity: 1; } }
@media (max-width: 700px) { .gw-b { translate: -16% 0; } }   /* Handy: Strahl rechts in den Ausschnitt holen (feste Lage, nicht animiert) */
@keyframes gw-a { 0%, 30% { opacity: 0; } 31% { opacity: 1; } 34% { opacity: .55; } 36.5%, 100% { opacity: 0; } }
@keyframes gw-b { 0%, 63% { opacity: 0; } 64% { opacity: 1; } 67% { opacity: .5; } 69.5%, 100% { opacity: 0; } }
/* Trefferfläche über Kopf und Windungen im Endbild (Drache sitzt) (Lage setzt seite.js aus den Bildkoordinaten), Hinweis unter dem Bart */
.drache-knopf.film { border-radius: 42% 42% 46% 46%; will-change: auto; }
.drache-knopf.film .drache-hinweis { left: var(--hinweis-x, 50%); top: var(--hinweis-y, 86%); translate: -50% -50%; }
.drache-knopf.film:hover .drache-hinweis, .drache-knopf.film:focus-visible .drache-hinweis { color: #fff1cf; }
/* v0.7.1/v0.8 Rechner: die Schluss-Tafel tritt mit Beginn des Gewitters zurück und bleibt weg, solange der Drache sitzt (Zähler bleibt) */
@media (min-width: 701px) {
  .buehne.drache-frei .tafel.schluss { opacity: 0 !important; visibility: hidden !important; transition: opacity .6s ease, visibility 0s .6s !important; }
}

/* Reduzierte Bewegung: Standbild im Abend, kein Atmen, kein Nebelzug */
@media (prefers-reduced-motion: reduce) {
  .atem, .nebel, .hinweis-linie, .blende-nebel { animation: none !important; }
  .tafel, .feste, .zaehler, .halt-tafel, .halle-knopf, .tor-hinweis, .schleier.weg { transition: none !important; }
  .drache-hinweis { animation: none; }
  .drache-film.gewitter > * { animation: none !important; }   /* v0.8: Sicherung, seite.js startet das Gewitter hier gar nicht */
  .drache-knopf.an, .buehne.anflug .tafel.schluss, .buehne.anflug .zaehler, .buehne.drache-frei .tafel.schluss { transition: none !important; }
  img[data-licht="tag"], img[data-licht="nacht"] { opacity: 0 !important; }
}

/* ---------- v0.8.1 ---------- */
/* Tafeln beim Aufstieg präsenter: dichterer Grund, Rahmen ringsum, kräftigere Oberkante, Schatten. Die Schluss-Tafel „Der ganze Weg“ bleibt unverändert. */
.tafel:not(.schluss), .halt-tafel, .karte { background: rgba(7, 20, 15, .86); border: 1px solid rgba(232, 184, 96, .55);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55); }
.tafel:not(.schluss), .halt-tafel { border-top: 3px solid var(--gold); }
.karte { border-left: 3px solid var(--gold); }
.tafel:not(.schluss) .kopfzeile, .halt-tafel .kopfzeile, .karte-wann { color: #f3cf86; }
.halt-tafel .kopfzeile { font-size: 13px; }

/* Hinweis am Tor (seite.js TOR_HINWEIS): unten mittig, am Handy über der Tafel (bottom setzt seite.js) */
.tor-hinweis { position: absolute; left: 50%; bottom: max(7vh, 32px); z-index: 6; margin: 0; translate: -50% 10px; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 22px 10px; border-radius: 14px;
  background: rgba(7, 20, 15, .78); border: 1px solid rgba(232, 184, 96, .6); box-shadow: 0 12px 36px rgba(0, 0, 0, .45);
  color: #fff; font: 600 15px/1.3 Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; visibility: hidden; transition: opacity .4s ease, translate .4s ease, visibility 0s .4s; }
.tor-hinweis.an { opacity: 1; visibility: visible; translate: -50% 0; transition: opacity .4s ease, translate .4s ease, visibility 0s; }
.tor-pfeil { font-size: 26px; line-height: 1; color: var(--gold); }
.tor-hinweis.an .tor-pfeil { animation: pfeil 1.6s ease-in-out infinite; }
@keyframes pfeil { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (max-width: 700px) { .tor-hinweis { font-size: 13.5px; padding: 10px 18px 8px; } }
@media (prefers-reduced-motion: reduce) { .tor-hinweis.an .tor-pfeil { animation: none; } }
/* Große Schirme: Tafeln wachsen maßvoll mit, sonst gehen sie bei 2560 px unter */
@media (min-width: 1800px) {
  .tafel:not(.schluss) { width: min(36rem, 30vw); padding: 32px 36px 34px; }
  .tafel:not(.schluss) p:not(.kopfzeile) { font-size: 18px; }
  .tafel:not(.schluss) .kopfzeile, .halt-tafel .kopfzeile { font-size: 14px; }
  .halt-tafel { width: min(30rem, 26vw); padding: 20px 24px 22px; }
  .halt-tafel p:not(.kopfzeile) { font-size: 17.5px; }
}