/* =========================================================================
   Über uns, Teil 1 – Album (Präfix rd-), danach Teil 2 – Erzählung (ra-)
   Nur das Album (Präfix rd-). Die Erzählung kommt aus Entwurf A (page.css von A wird
   zusätzlich eingebunden, sie lädt NACH dieser Datei – Überschreibungen deshalb mit .rd).
   Optik von Einband/Vorsatz/Seite übernommen aus Entwurf B (_design/zeitstrahl-album-v1),
   Prägung bewusst matt (kein Folienglanz).
   Fassungen:
     – ohne Klasse  : kein JS / prefers-reduced-motion → Einband als ruhiges Titelbild über dem Prolog
     – html.rd-on   : Album liegt als Ebene über dem gepinnten Prolog; page.js setzt
                      --k (Maßstab), --tilt, --open, --landed, --nacht und die Kamera.
   ========================================================================= */

.rd {
  --k: .55;
  --tilt: 0; --open: 0; --landed: 0; --nacht: 0;
  --gold-d: color-mix(in srgb, var(--c-gold), var(--c-footer) 42%);
  --gold-l: color-mix(in srgb, var(--c-gold), var(--c-text) 58%);
  --paper: color-mix(in srgb, var(--c-bg), var(--c-footer) 22%);
  --cream: color-mix(in srgb, var(--c-text), var(--c-gold) 16%);
  --leather: #41140f;
  --leather: color-mix(in srgb, color-mix(in srgb, var(--c-flag-red) 24%, var(--c-footer)), var(--c-gold) 10%);
  --matt: color-mix(in srgb, var(--c-gold) 78%, var(--leather));
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  /* Leder-Narbung: dunkle Alpha-Textur (wirkt wie multiply), ohne background-blend-mode – den zeichnet iOS-Safari weiß.
     Im Template per style durch das fertige Bild textur/leder.webp ersetzt; dies ist nur der Rückfall. */
  --grain-leather: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='l'><feTurbulence type='turbulence' baseFrequency='.55' numOctaves='2' seed='7'/><feDiffuseLighting lighting-color='white' surfaceScale='1.4'><feDistantLight azimuth='225' elevation='48'/></feDiffuseLighting><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -1 0 0 0 1'/></filter><rect width='100%' height='100%' filter='url(%23l)'/></svg>");
  --marble: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='620' height='816'><filter id='m' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.003 .009' numOctaves='5' seed='11' result='t'/><feDisplacementMap in='t' in2='t' scale='190' result='d'/><feColorMatrix in='d' type='luminanceToAlpha' result='a'/><feComponentTransfer in='a'><feFuncA type='table' tableValues='0 0 0 .95 0 0 0 0 .6 0 0 0 0 .9 0 0 0 .5 0 0'/></feComponentTransfer><feComposite in='SourceGraphic' operator='in'/></filter><rect width='100%' height='100%' fill='%23c8b273' filter='url(%23m)'/></svg>");
  --marble-2: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='620' height='816'><filter id='m' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.004 .012' numOctaves='4' seed='29' result='t'/><feDisplacementMap in='t' in2='t' scale='150' result='d'/><feColorMatrix in='d' type='luminanceToAlpha' result='a'/><feComponentTransfer in='a'><feFuncA type='table' tableValues='0 0 .5 0 0 0 .35 0 0 0 0 .45 0 0'/></feComponentTransfer><feComposite in='SourceGraphic' operator='in'/></filter><rect width='100%' height='100%' fill='%23f4ecd8' filter='url(%23m)'/></svg>");
}
.rd-page .site-footer { margin-top: 0; }

/* =========================================================================
   Gemeinsame Optik (beide Fassungen)
   ========================================================================= */
.rd-pg { position: relative; width: 620px; height: 816px; transform: scale(var(--k)); transform-origin: 0 0; overflow: hidden; }

/* Einband */
.rd-pg--cover {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 70px 60px;
  background-color: var(--leather);
  background-image:
    radial-gradient(ellipse 90% 70% at 38% 30%, color-mix(in srgb, var(--c-gold) 9%, transparent), transparent 65%),
    radial-gradient(ellipse 140% 110% at 50% 50%, transparent 50%, rgba(0, 0, 0, .62)),
    var(--grain-leather);
  background-size: 100% 100%, 100% 100%, 300px 300px;
  border-radius: 3px 10px 10px 3px;
  box-shadow: inset 10px 0 18px -8px rgba(0, 0, 0, .7), inset -2px 0 0 color-mix(in srgb, var(--c-gold), transparent 82%);
}
.rd-cover__rahmen { position: absolute; inset: 30px; border: 1.5px solid color-mix(in srgb, var(--matt), transparent 45%); pointer-events: none; }
.rd-cover__rahmen::after { content: ""; position: absolute; inset: 7px; border: 1px solid color-mix(in srgb, var(--matt), transparent 68%); }
.rd-orn { position: absolute; width: 58px; height: 58px; fill: none; stroke: var(--matt); stroke-width: 1.4; stroke-linecap: round; opacity: .62; }
.rd-orn--tl { top: 40px; left: 40px; }
.rd-orn--tr { top: 40px; right: 40px; transform: scaleX(-1); }
.rd-orn--bl { bottom: 40px; left: 40px; transform: scaleY(-1); }
.rd-orn--br { bottom: 40px; right: 40px; transform: scale(-1, -1); }
/* Prägung: matt, leicht vertieft (dunkle Oberkante, heller Lichtrand unten) */
.rd-cover__oben, .rd-cover__unten, .rd-cover__titel { color: var(--matt); text-shadow: 0 -1px 0 rgba(0, 0, 0, .6), 0 1px 0 color-mix(in srgb, var(--gold-l), transparent 86%); }
.rd-cover__oben, .rd-cover__unten { margin: 0; font-family: var(--f-text); font-size: 13px; letter-spacing: .46em; text-transform: uppercase; padding-left: .46em; }
.rd-cover__logo {
  display: block; width: 300px; max-width: 74%; aspect-ratio: 396.58 / 167.25; margin: 38px auto 30px;
  background: var(--matt);
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .55)) drop-shadow(0 1px 0 color-mix(in srgb, var(--gold-l), transparent 88%));
}
.rd-cover__titel { margin: 0; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 54px; line-height: 1.05; }
.rd-cover__linie { display: block; width: 64px; height: 1px; margin: 28px auto 26px; background: var(--matt); opacity: .7; }
.rd-glanz { position: absolute; inset: 0; pointer-events: none; display: none; }

/* Vorsatz (marmoriert) */
.rd-pg--vorsatz {
  display: grid; place-items: center;
  background-color: color-mix(in srgb, color-mix(in srgb, var(--c-flag-red) 26%, var(--c-footer)), var(--c-gold) 8%);
  background-image: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 50%, rgba(0, 0, 0, .55)), var(--marble-2), var(--marble);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  border-radius: 10px 3px 3px 10px;
}
.rd-exlibris {
  position: relative; display: grid; gap: 10px; justify-items: center; text-align: center;
  width: 300px; padding: 34px 26px 30px; background: var(--cream); color: var(--c-bg);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .2), 0 22px 40px -12px rgba(0, 0, 0, .8);
  outline: 1px solid color-mix(in srgb, var(--c-gold), transparent 30%); outline-offset: -10px;
  transform: rotate(-1deg);
}
.rd-exlibris__klein { font-family: var(--f-text); font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--gold-d); padding-left: .4em; }
.rd-exlibris__name { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 34px; line-height: 1.1; }
.rd-exlibris__orte { font-family: var(--f-display); font-style: italic; font-size: 17px; color: color-mix(in srgb, var(--c-bg), transparent 35%); }
.rd-exlibris::before { content: ""; width: 44px; height: 1px; background: var(--c-gold); order: 1; }

/* Erste Seite: Frontispiz */
.rd-pg--tafel {
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .34)),
    linear-gradient(color-mix(in srgb, var(--c-footer), transparent 60%), color-mix(in srgb, var(--c-footer), transparent 60%));
  background-size: 100% 100%, 100% 100%;
  border-radius: 0 4px 4px 0;
}
.rd-pg--tafel::before { /* Falz */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 70px; pointer-events: none;
  background: linear-gradient(270deg, transparent, rgba(0, 0, 0, .18) 70%, rgba(0, 0, 0, .5));
}
.rd-tafel__ort, .rd-tafel__name { position: absolute; left: 0; right: 0; margin: 0; text-align: center; }
.rd-tafel__ort { top: 222px; font-size: 11px; letter-spacing: .42em; text-transform: uppercase; padding-left: .42em; color: color-mix(in srgb, var(--c-gold), transparent 25%); }
.rd-tafel__name { top: 244px; font-family: var(--f-display); font-style: italic; font-size: 46px; line-height: 1.1; color: var(--c-text); }
.rd-tafel__linie { position: absolute; left: 50%; top: 322px; width: 50px; height: 1px; margin-left: -25px; background: var(--c-gold); opacity: .8; }
.rd-tafel__rahmen { position: absolute; left: 160px; top: 370px; width: 300px; height: 197px; border: 1px solid color-mix(in srgb, var(--c-gold), transparent 70%); }
.rd-ecke { position: absolute; width: 26px; height: 26px; background: linear-gradient(135deg, color-mix(in srgb, var(--c-gold), var(--c-footer) 20%) 50%, transparent 50%); filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .6)); }
.rd-ecke--tl { left: -7px; top: -7px; }
.rd-ecke--tr { right: -7px; top: -7px; transform: scaleX(-1); }
.rd-ecke--bl { left: -7px; bottom: -7px; transform: scaleY(-1); }
.rd-ecke--br { right: -7px; bottom: -7px; transform: scale(-1, -1); }
.rd-folio { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; font-family: var(--f-display); font-style: italic; font-size: 15px; color: color-mix(in srgb, var(--c-gold), transparent 45%); }
.rd-folio::before, .rd-folio::after { content: "—"; margin: 0 .6em; opacity: .5; }
.rd-nacht { position: absolute; inset: 0; background: var(--c-bg); opacity: var(--nacht); pointer-events: none; }
.rd-tafel__bild { position: absolute; left: calc(var(--dx) * 1px); top: calc(var(--dy) * 1px); width: calc(var(--dw) * 1px); }
.rd-tafel__bild .ra-picerno__svg { display: block; width: 100%; height: auto; }

/* =========================================================================
   1 · Ruhige Fassung: Einband als Titelbild über dem Prolog
   ========================================================================= */
html:not(.rd-on) .rd-album { order: -1; position: relative; display: flex; justify-content: center; margin: 0 auto 40px; }
html:not(.rd-on) .rd-licht, html:not(.rd-on) .rd-korn, html:not(.rd-on) .rd-hinweis, html:not(.rd-on) .rd-seite,
html:not(.rd-on) .rd-decke, html:not(.rd-on) .rd-schnitt, html:not(.rd-on) .rd-band, html:not(.rd-on) .rd-boden,
html:not(.rd-on) .rd-falz, html:not(.rd-on) .rd-deckel__innen { display: none; }
html:not(.rd-on) .rd-deckel__vorn { width: calc(620px * var(--k)); height: calc(816px * var(--k)); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .9); border-radius: 3px 10px 10px 3px; }
@media (max-width: 899px) { .rd { --k: .5; } }

/* =========================================================================
   2 · Kinofassung (html.rd-on)
   ========================================================================= */
html.rd-on .ra-prolog--album { height: calc(330vh + var(--rd-vorlauf, 4.6) * 100vh); }
/* Titel des Prologs erst nach der Landung */
html.rd-on .ra-prolog--album .ra-prolog__stage:not(.is-gelandet) :is(.ra-w > span, .ra-prolog__kicker, .ra-prolog__text) { animation: none; }
html.rd-on .ra-prolog--album .ra-prolog__kopf { z-index: 7; }

html.rd-on .rd-album {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, color-mix(in srgb, var(--c-gold) 12%, transparent), transparent 70%),
    var(--c-bg);
  opacity: var(--rd-o, 1);
}
html.rd-on .rd-album.is-weg { visibility: hidden; }
html.rd-on .rd-licht {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 46% 40% at 50% 50%, color-mix(in srgb, var(--c-gold) 10%, transparent), transparent 75%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 50%, rgba(0, 0, 0, .35));
  opacity: calc(1 - var(--nacht));
}
html.rd-on .rd-korn {
  position: absolute; inset: -60px; pointer-events: none; z-index: 3; opacity: .06; mix-blend-mode: overlay;
  background-image: var(--noise); background-size: 220px 220px;
  animation: rd-korn 1.2s steps(6) infinite;
}
@keyframes rd-korn {
  0% { transform: translate(0, 0); } 20% { transform: translate(-30px, 18px); } 40% { transform: translate(22px, -26px); }
  60% { transform: translate(-14px, -8px); } 80% { transform: translate(26px, 30px); } 100% { transform: translate(0, 0); }
}
html.rd-on .rd-kamera { position: absolute; inset: 0; transform-origin: 0 0; }
html.rd-on .rd-szene {
  --bw: 1240;
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--bw) * 1px * var(--k)); height: calc(816px * var(--k));
  margin: calc(-408px * var(--k)) 0 0 calc(var(--bw) * -.5px * var(--k));
  perspective: calc(2600px * var(--k) + 600px); perspective-origin: 50% 30%;
  animation: rd-ankunft 1.6s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes rd-ankunft { from { opacity: 0; transform: translateY(60px) scale(.96); } to { opacity: 1; transform: none; } }
html.rd-on .rd-buch {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform:
    translateX(calc((1 - var(--open)) * -25%))
    translateY(calc(var(--tilt) * 3%)) rotateX(calc(var(--tilt) * 24deg)) rotateZ(calc(var(--tilt) * -5deg)) scale(calc(1 - var(--tilt) * .2));
}
html.rd-on .rd-seite, html.rd-on .rd-deckel { position: absolute; top: 0; left: 50%; width: calc(620px * var(--k)); height: calc(816px * var(--k)); }
html.rd-on .rd-seite { z-index: 1; }
html.rd-on .rd-deckel { z-index: 3; transform-origin: 0 50%; transform-style: preserve-3d; transform: translateZ(2px) rotateY(calc(var(--open) * -180deg)); }
html.rd-on .rd-deckel__vorn, html.rd-on .rd-deckel__innen { position: absolute; inset: 0; }
html.rd-on .rd-deckel__innen { transform: rotateY(180deg); }
/* Vorder-/Innenseite bei halb geöffnetem Deckel hart umschalten – statt backface-visibility, das iOS-Safari
   in dieser Verschachtelung falsch zeichnet (Innenseite gespiegelt bzw. weiß über dem Einband). */
html.rd-on .rd-deckel__vorn { opacity: clamp(0, (.5 - var(--open)) * 1000, 1); }
html.rd-on .rd-deckel__innen { opacity: clamp(0, (var(--open) - .5) * 1000, 1); }
/* Schatten auf der Innenseite, solange der Deckel steht */
html.rd-on .rd-deckel__vorn::after, html.rd-on .rd-deckel__innen::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
html.rd-on .rd-deckel__innen::after { background: linear-gradient(270deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1) 60%, transparent); opacity: calc((1 - var(--open)) * 2); }
html.rd-on .rd-deckel__vorn::after { background: linear-gradient(90deg, rgba(0, 0, 0, .6), transparent 70%); opacity: calc(var(--open) * 1.6); }
html.rd-on .rd-falz { position: absolute; top: 0; bottom: 0; left: 50%; width: calc(60px * var(--k)); z-index: 2; pointer-events: none; transform: translateZ(.5px);
  background: linear-gradient(90deg, rgba(0, 0, 0, .55), transparent); opacity: calc(var(--open) * (1 - var(--landed)) * 1.4); }

/* Buchdecke hinter den Seiten, Goldschnitt, Bodenschatten, Lesebändchen */
html.rd-on .rd-decke {
  position: absolute; inset: calc(-14px * var(--k)) calc(-16px * var(--k)) calc(-16px * var(--k)); z-index: 0; border-radius: 8px;
  background: var(--leather); background-image: var(--grain-leather); background-size: 300px;
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .95), 0 18px 30px -10px rgba(0, 0, 0, .7);
  clip-path: inset(0 0 0 calc((1 - var(--landed)) * 50%) round 8px);
}
html.rd-on .rd-schnitt { position: absolute; top: calc(3px * var(--k)); bottom: calc(-7px * var(--k)); right: calc(-7px * var(--k)); width: 50%; z-index: 0; border-radius: 0 6px 6px 0;
  background: repeating-linear-gradient(0deg, var(--gold-d) 0 1px, var(--c-gold) 1px 2px, var(--gold-l) 2px 3px); }
html.rd-on .rd-boden {
  position: absolute; left: 6%; right: 6%; bottom: -5%; height: 16%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .9), transparent); filter: blur(18px);
  transform: translateX(calc((1 - var(--open)) * 25%)) scaleX(calc(.55 + var(--open) * .45));
}
html.rd-on .rd-band {
  position: absolute; top: calc(-10px * var(--k)); left: calc(50% - 7px * var(--k)); width: calc(14px * var(--k)); height: calc(100% + 64px * var(--k)); z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, var(--c-flag-green) 0 33.3%, var(--c-text) 33.3% 66.6%, var(--c-flag-red) 66.6%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 10px), 0 100%);
  filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, .5)) brightness(.86);
  opacity: calc(var(--landed) * .95); transform: translateZ(2px);
}
/* Lichtreflex auf dem Leder: wandert, während sich das Album aufrichtet */
html.rd-on .rd-glanz {
  display: block; inset: -20% -60%;
  background: linear-gradient(105deg, transparent 42%, color-mix(in srgb, var(--gold-l), transparent 86%) 49%, color-mix(in srgb, var(--c-text), transparent 92%) 50%, transparent 57%);
  transform: translateX(calc((.55 - var(--tilt) * 1.1) * 100%));
}

/* Hinweis */
html.rd-on .rd-hinweis {
  position: absolute; bottom: 18px; left: 0; right: 0; margin: 0; z-index: 4; display: grid; justify-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: color-mix(in srgb, var(--c-text), transparent 40%);
  opacity: var(--rd-hint, 1); animation: rd-hint-ein 1s 1.4s both;
}
@keyframes rd-hint-ein { from { opacity: 0; } }
.rd-hinweis__strich { display: block; width: 1px; height: 30px; background: linear-gradient(var(--c-gold), transparent); transform-origin: top; animation: rd-strich 2.2s ease-in-out infinite; }
@keyframes rd-strich { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
html:not(.rd-on) .rd-hinweis { display: none; }

/* Schmal (Mobil): eine Seite, der Deckel schwingt nach links aus dem Bild */
html.rd-on .rd-schmal .rd-szene { --bw: 620; }
html.rd-on .rd-schmal .rd-buch { transform: translateY(calc(var(--tilt) * -5%)) rotateX(calc(var(--tilt) * 18deg)) rotateZ(calc(var(--tilt) * -4deg)) scale(calc(1 - var(--tilt) * .12)); }
html.rd-on .rd-schmal :is(.rd-seite, .rd-deckel, .rd-falz) { left: 0; }
html.rd-on .rd-schmal .rd-band { left: calc(-7px * var(--k)); }
html.rd-on .rd-schmal .rd-decke { clip-path: none; left: calc(-6px * var(--k)); }
html.rd-on .rd-schmal .rd-schnitt { width: 100%; }
html.rd-on .rd-schmal .rd-boden { transform: none; }

/* =========================================================================
   Über uns, Teil 2 – Erzählung „La Strada – Die Reise“ (ra-)
   Präfix ra-. Nur Variablen aus tokens.css; Abstufungen per color-mix().
   Zwei Fassungen:
   1. Grundfassung (ohne JS / prefers-reduced-motion): ruhig, alles untereinander.
   2. html.ra-on (page.js): gepinnte Szenen, Route, Jahreszähler, Zeichen-Animation.
   ========================================================================= */

.ra {
  --ra-gold-10: color-mix(in srgb, var(--c-gold) 10%, transparent);
  --ra-gold-25: color-mix(in srgb, var(--c-gold) 25%, transparent);
  --ra-gold-45: color-mix(in srgb, var(--c-gold) 45%, transparent);
  --ra-gold-hell: color-mix(in srgb, var(--c-gold) 55%, var(--c-text));
  --ra-schwarz: var(--c-hero-base);
  --ra-ease: cubic-bezier(.2, .7, .1, 1);
  --ra-ease-io: cubic-bezier(.65, 0, .15, 1);
  position: relative;
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--ra-schwarz) 70%, transparent), transparent 70%),
    var(--c-bg);
}
.ra-kicker, .ra-akt__nr, .ra-vs__kicker, .ra-st__jahr {
  font-family: var(--f-text); font-size: 13px; line-height: 1.4; letter-spacing: .28em; text-transform: uppercase;
  color: var(--c-gold); margin: 0 0 14px;
}
.ra-st__jahr { letter-spacing: .2em; }
.ra-prolog__kicker { font-family: var(--f-display); font-style: italic; text-transform: none; letter-spacing: .06em; font-size: 22px; }

/* ---- Prolog --------------------------------------------------------- */
.ra-prolog__stage {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: calc(var(--header-h) + 40px) var(--gutter) 0; text-align: center;
  background: radial-gradient(90% 70% at 50% 100%, color-mix(in srgb, var(--c-gold) 7%, transparent), transparent 70%), var(--c-bg);
}
.ra-prolog__kopf { position: relative; z-index: 2; max-width: 980px; margin: 0 auto auto; }
.ra-prolog__titel {
  font-size: clamp(54px, 8.4vw, 132px); line-height: .98; letter-spacing: -.01em; margin: 0 0 26px;
  color: var(--c-text);
}
.ra-w { display: inline-block; overflow: hidden; padding: 0 .06em .14em; margin-bottom: -.14em; vertical-align: bottom; }
.ra-w > span { display: inline-block; }
.ra-prolog__titel .ra-w:nth-child(2) > span, .ra-prolog__titel .ra-w:nth-child(4) > span { color: var(--c-gold); }
.ra-prolog__text { max-width: 560px; margin: 0 auto; color: var(--c-text-dim); font-size: 17px; line-height: 1.7; }
.ra-prolog__bild { position: relative; z-index: 1; margin: 40px auto 0; width: min(1180px, 100%); }
.ra-picerno__svg { width: 100%; height: auto; overflow: visible; }
.ra-picerno__svg path { stroke: var(--c-gold); stroke-width: 1.1; }
.ra-picerno__svg path.s2 { stroke-width: 1.6; }
.ra-picerno__svg path.s3 { stroke-width: 2.5; }
.ra-prolog__hinweis, .ra-prolog__strasse, .ra-prolog__sonne { display: none; }

/* ---- HUD (nur in ra-on sichtbar) ------------------------------------ */
.ra-hud { display: none; }

/* ---- Kapitel: Grundfassung ------------------------------------------ */
.ra-akt { padding: var(--space-5) 0; }
.ra-stage { position: relative; }
.ra-akt .ra-stage { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.ra-akt__kopf { text-align: center; margin-bottom: var(--space-4); }
.ra-akt__nr { margin-bottom: 8px; }
.ra-akt__titel { font-size: var(--fs-h2); line-height: 1.15; }
.ra-stationen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.ra-st { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.ra-st:nth-child(even) .ra-st__bild { order: 2; }
.ra-st__bild { margin: 0; display: flex; justify-content: center; }
.ra-st__print { position: relative; display: block; max-width: 100%; }
.ra-st__print img { width: auto; max-width: 100%; max-height: 70vh; filter: sepia(calc(var(--era) * .45)) saturate(calc(1 - var(--era) * .3)); }
.ra-st--foto .ra-st__print { outline: 1px solid var(--c-gold); outline-offset: 10px; }
.ra-st__licht { display: none; }
.ra-st__titel { font-size: clamp(30px, 3vw, 44px); line-height: 1.12; margin: 0 0 18px; }
.ra-st__body { color: var(--c-text-dim); }
.ra-st__body a { color: var(--c-gold); text-decoration: underline; text-underline-offset: 3px; }

/* Karte (Reise / Finale) */
.ra-karte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; margin-bottom: var(--space-5); }
.ra-karte__bild, .ra-finale__karte { margin: 0; }
.ra-karte__svg { display: block; width: 100%; height: 70vh; max-height: 760px; overflow: hidden; }
.ra-karte__netz line, .ra-karte__fein line { stroke: var(--ra-gold-10); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ra-karte__fein { opacity: 0; }
.ra-karte__land text { fill: var(--ra-gold-25); font-family: var(--f-text); font-size: 17px; letter-spacing: .5em; text-transform: uppercase; }
.ra-karte__grad { fill: var(--ra-gold-45); font-family: var(--f-text); font-size: 17px; letter-spacing: .12em; }
.ra-karte__kompass circle, .ra-karte__kompass path { fill: none; stroke: var(--ra-gold-45); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ra-karte__kompass path { fill: var(--ra-gold-10); }
.ra-karte__dash { stroke-dasharray: 2 4; }
.ra-karte__kompass text, .ra-karte__massstab text { fill: var(--c-gold); font-family: var(--f-text); font-size: 17px; text-anchor: middle; letter-spacing: .14em; }
.ra-karte__massstab text { text-anchor: start; }
.ra-karte__massstab path { stroke: var(--c-gold); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.ra-karte__luftlinie { stroke: var(--ra-gold-45); stroke-width: 1; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.ra-karte__route, .ra-karte__route-schatten { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ra-karte__route { stroke: var(--c-gold); stroke-width: 2.4; }
.ra-karte__route-schatten { stroke: var(--ra-gold-25); stroke-width: 9; filter: blur(3px); }
.ra-karte__ast--berlin { stroke-width: 1.6; }
.ra-karte__pen { fill: var(--c-text); display: none; }
.ra-karte__punkt { fill: var(--c-gold); }
.ra-karte__ring { fill: none; stroke: var(--c-gold); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ra-karte__name { fill: var(--c-text); font-family: var(--f-display); font-style: italic; font-size: 34px; }
.ra-karte__sub { fill: var(--ra-gold-hell); font-family: var(--f-text); font-size: 16px; letter-spacing: .12em; }
.ra-karte__ort--berlin { display: none; }

/* Neon 1999 */
.ra-neon { position: relative; display: grid; place-items: center; min-height: 340px; margin-bottom: var(--space-4); overflow: hidden; border: 1px solid var(--ra-gold-25); }
.ra-neon__bg { position: absolute; inset: 0; }
.ra-neon__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; filter: grayscale(1) blur(1px); }
.ra-neon__schrift { position: relative; margin: 0; text-align: center; font-family: var(--f-display); font-style: italic; line-height: 1; color: var(--c-text);
  text-shadow: 0 0 6px var(--c-gold), 0 0 22px var(--c-gold), 0 0 60px var(--ra-gold-45); }
.ra-neon__z1, .ra-neon__z2 { display: block; }
.ra-neon__z1 { font-size: clamp(34px, 5vw, 72px); letter-spacing: .04em; }
.ra-neon__z2 { font-size: clamp(56px, 9vw, 140px); }
.ra-akt--neon .ra-st__bild { display: none; }
.ra-akt--neon .ra-st { grid-template-columns: minmax(0, 760px); justify-content: center; text-align: center; }

/* Versprechen */
.ra-vs { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 50px; align-items: center; margin-top: var(--space-5);
  padding: 50px; border: 1px solid var(--ra-gold-25); background: radial-gradient(80% 120% at 0% 50%, var(--ra-gold-10), transparent 70%); }
.ra-vs__siegel { position: relative; width: 220px; aspect-ratio: 1; }
.ra-vs__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ra-vs__kreis { fill: none; stroke: var(--c-gold); stroke-width: 1; stroke-linecap: round; }
.ra-vs__kreis--innen { stroke: var(--ra-gold-45); }
.ra-vs__dreh { transform-origin: 100px 100px; }
.ra-vs__dreh text { fill: var(--c-gold); font-family: var(--f-display); font-style: italic; font-size: 15px; letter-spacing: .14em; }
.ra-vs__icon { position: absolute; inset: 29%; display: grid; place-items: center; }
.ra-vs__icon img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ra-vs__titel { font-size: clamp(34px, 4vw, 58px); line-height: 1.05; margin: 0 0 18px; color: var(--c-gold); }
.ra-vs__body { color: var(--c-text); margin: 0; max-width: 560px; }

/* Finale (Grundfassung) */
.ra-finale { padding: var(--space-5) 0; }
.ra-finale__stage { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.ra-finale__titel { font-size: clamp(40px, 4.6vw, 68px); line-height: 1.05; margin: 0 0 22px; }
.ra-finale__lead { color: var(--c-text-dim); max-width: 520px; }
.ra-orte { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 4px; }
.ra-ort { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--ra-gold-25); }
.ra-ort__punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--c-gold); align-self: center; box-shadow: 0 0 0 4px var(--ra-gold-10); }
.ra-ort__titel { font-family: var(--f-display); font-style: italic; font-size: 24px; line-height: 1.2; }
.ra-ort__seit { grid-column: 3; grid-row: 1; white-space: nowrap; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-gold); }
.ra-ort__namen { grid-column: 2 / -1; font-size: 14px; line-height: 1.5; color: var(--c-text-dim); }


@media (max-width: 899px) {
  .ra-st, .ra-karte, .ra-finale__stage { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .ra-st:nth-child(even) .ra-st__bild { order: 0; }
  .ra-vs { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 34px 22px; }
  .ra-karte__svg { height: 60svh; }
}

/* =========================================================================
   ra-on – die Kinofassung
   ========================================================================= */
html.ra-on { scroll-behavior: auto; }
.ra-on .ra {
  --ra-step: 95vh;
  --ra-l: clamp(96px, 9vw, 150px);          /* linke Kante Textspalte */
  --ra-tw: min(31vw, 450px);                 /* Breite Textspalte */
  --ra-top: 13vh;                            /* Kopfzeile */
  --ra-jahr-fs: clamp(120px, 13vw, 210px);   /* Jahreszähler */
  --ra-jahr-top: calc(var(--ra-top) + 64px);
  --ra-text-top: calc(var(--ra-jahr-top) + var(--ra-jahr-fs) * .92 + 18px);
  --ra-vis-l: calc(var(--ra-l) + var(--ra-tw) + 5vw);
}

/* Bühne */
.ra-on .ra-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; max-width: none; margin: 0; padding: 0; }
.ra-on .ra-akt { padding: 0; height: calc(100vh + var(--steps, 2) * var(--ra-step)); }
.ra-on .ra-akt__kopf { position: absolute; left: var(--ra-l); top: var(--ra-top); margin: 0; text-align: left; display: flex; align-items: center; gap: 18px; z-index: 3; }
.ra-on .ra-akt__nr { margin: 0; font-family: var(--f-display); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 22px; color: var(--c-gold); }
.ra-on .ra-akt__nr .ra-akt__wort { display: none; }
.ra-on .ra-akt__nr > span { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 8px; border: 1px solid var(--ra-gold-45); border-radius: 50%; }
.ra-on .ra-akt__titel { font-size: 30px; line-height: 1.1; }
.ra-on .ra-akt__kopf { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ra-ease), transform .9s var(--ra-ease); }
.ra-on .is-im-bild .ra-akt__kopf { opacity: 1; transform: none; }

/* Stationen: alle Schritte liegen übereinander */
.ra-on .ra-stationen { display: block; }
.ra-on .ra-st { display: block; }
.ra-on .ra-st__bild, .ra-on .ra-karte__bild, .ra-on .ra-neon, .ra-on .ra-vs__siegel {
  position: absolute; top: 11vh; bottom: 9vh; left: var(--ra-vis-l); right: 5vw; margin: 0;
  display: flex; align-items: center; justify-content: center;
}
.ra-on .ra-st__text, .ra-on .ra-karte__text, .ra-on .ra-vs__text {
  position: absolute; left: var(--ra-l); top: var(--ra-text-top); width: var(--ra-tw); z-index: 3;
}

/* Foto-Abzüge mit Tiefenstaffelung */
.ra-on .ra-st__bild { z-index: 2; pointer-events: none; perspective: 1400px; }
.ra-on .ra-st__print {
  max-height: 100%; transform-origin: 50% 60%;
  opacity: 0; transform: translate3d(14%, 18%, 0) rotate(calc(var(--tilt) * 3)) scale(.9);
  transition: transform 1.25s var(--ra-ease), opacity .9s var(--ra-ease);
  will-change: transform, opacity;
  box-shadow: 0 50px 90px -30px var(--ra-schwarz);
}
.ra-on .ra-st--collage .ra-st__print { box-shadow: none; filter: drop-shadow(0 40px 50px var(--ra-schwarz)); }
.ra-on .ra-st__print img { max-height: 70vh; max-height: 70svh; width: auto; transition: filter 2.2s ease .15s; }
.ra-on .ra-st--hoch .ra-st__print img { max-height: 76vh; max-height: 76svh; }
.ra-on .ra-st[data-state="vor"] .ra-st__print img { filter: sepia(1) brightness(1.9) contrast(.4); }
.ra-on .ra-st[data-state="an"] .ra-st__print { opacity: 1; transform: translate3d(0, calc(var(--sp, 0) * -2.5%), 0) rotate(calc(var(--tilt) * .5)); }
.ra-on .ra-st[data-state="nach"] .ra-st__print {
  opacity: max(0, calc(.42 - var(--tiefe, 1) * .16));
  transform: translate3d(calc(var(--tiefe, 1) * -9%), calc(var(--tiefe, 1) * -7%), 0) scale(calc(1 - var(--tiefe, 1) * .1)) rotate(calc(var(--tilt) * -2));
}
.ra-on .is-vs .ra-st[data-state="nach"] .ra-st__print { opacity: 0; transform: translate3d(-6%, -4%, 0) scale(.84) rotate(calc(var(--tilt) * -2)); }

/* Lichtstreif beim „Entwickeln“ */
.ra-on .ra-st__licht {
  display: block; position: absolute; inset: 0; pointer-events: none; overflow: hidden; mix-blend-mode: screen;
}
.ra-on .ra-st__licht::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--c-gold) 55%, transparent) 50%, transparent);
  transform: translateX(-120%) skewX(-12deg); opacity: 0;
}
.ra-on .ra-st[data-state="an"] .ra-st__licht::before { animation: ra-licht 1.7s .35s var(--ra-ease-io) both; }
@keyframes ra-licht { 0% { transform: translateX(-120%) skewX(-12deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(320%) skewX(-12deg); opacity: 0; } }

/* Texte */
.ra-on .ra-st__text > *, .ra-on .ra-karte__text > *, .ra-on .ra-vs__text > * {
  opacity: 0; transform: translate3d(0, 34px, 0);
  transition: opacity .7s var(--ra-ease), transform .9s var(--ra-ease);
}
.ra-on [data-state="nach"] .ra-st__text > *, .ra-on [data-state="nach"] .ra-karte__text > *, .ra-on [data-state="nach"] .ra-vs__text > * { transform: translate3d(0, -26px, 0); transition-duration: .45s; }
.ra-on [data-state="an"] .ra-st__text > *, .ra-on [data-state="an"] .ra-karte__text > *, .ra-on [data-state="an"] .ra-vs__text > * { opacity: 1; transform: none; }
.ra-on [data-state="an"] :is(.ra-st__text, .ra-karte__text, .ra-vs__text) > :nth-child(2) { transition-delay: .1s; }
.ra-on [data-state="an"] :is(.ra-st__text, .ra-karte__text, .ra-vs__text) > :nth-child(3) { transition-delay: .2s; }
.ra-on [data-state="an"] :is(.ra-st__text, .ra-karte__text, .ra-vs__text) > :nth-child(4) { transition-delay: .3s; }
.ra-on .ra-st__text, .ra-on .ra-karte__text, .ra-on .ra-vs__text { pointer-events: none; }
.ra-on [data-state="an"] .ra-st__text, .ra-on [data-state="an"] .ra-vs__text { pointer-events: auto; }
.ra-on .ra-st__titel { font-size: clamp(32px, 3vw, 46px); margin-bottom: 16px; }
.ra-on .ra-st__body { font-size: 17px; line-height: 1.75; }

/* Jahreszähler (fest) */
.ra-on .ra-hud { display: block; }
.ra-on .ra-jahr {
  position: fixed; z-index: 4; left: var(--ra-l); top: var(--ra-jahr-top);
  font-family: var(--f-display); font-style: italic; font-size: var(--ra-jahr-fs); line-height: 1; letter-spacing: -.02em;
  color: var(--c-gold); white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate3d(-20px, 0, 0); transition: opacity .8s var(--ra-ease), transform .8s var(--ra-ease);
  background: none;
}
.ra-on .ra-jahr.is-an { opacity: 1; transform: none; }
.ra-on .ra-jahr.is-an.is-gedimmt { opacity: 0; transform: translate3d(0, -14px, 0); }
.ra-jahr__col { display: inline-block; height: 1em; overflow: hidden; padding: 0 .05em 0 .02em; margin-right: -.07em; vertical-align: top; }
.ra-jahr__strip { display: block; transform: translate3d(0, calc(var(--d, 0) * -10%), 0); transition: transform 1.15s var(--ra-ease-io); }
.ra-jahr__col:nth-child(2) .ra-jahr__strip { transition-delay: .05s; }
.ra-jahr__col:nth-child(3) .ra-jahr__strip { transition-delay: .1s; }
.ra-jahr__col:nth-child(4) .ra-jahr__strip { transition-delay: .15s; }
.ra-jahr__strip > span { display: block; height: 1em; line-height: 1; }
.ra-jahr.is-schnell .ra-jahr__strip { transition-duration: .35s; transition-delay: 0s; }

/* Route links (fest) */
.ra-on .ra-rail {
  position: fixed; z-index: 4; left: clamp(28px, 3.2vw, 56px); top: 14vh; bottom: 10vh; width: 60px; margin-left: -30px;
  opacity: 0; transition: opacity .8s var(--ra-ease); pointer-events: none;
}
.ra-on .ra-rail.is-an { opacity: 1; }
.ra-rail__bahn { position: absolute; left: 30px; top: 28px; bottom: 28px; width: 1px; }
.ra-rail__track { position: absolute; inset: 0; background: var(--ra-gold-25); }
.ra-rail__fill { position: absolute; inset: 0; background: linear-gradient(var(--ra-gold-45), var(--c-gold)); transform-origin: 50% 0; transform: scaleY(var(--rp, 0)); }
.ra-rail__pen {
  position: absolute; left: -5px; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--c-text);
  box-shadow: 0 0 0 4px var(--ra-gold-25), 0 0 18px 4px var(--c-gold);
  transform: translate3d(0, var(--rpx, 0), 0);
}
.ra-rail__tick { position: absolute; left: -3px; top: calc(var(--t, 0) * 100%); width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: var(--c-bg); border: 1px solid var(--ra-gold-45); transition: background .4s, border-color .4s, transform .4s var(--ra-ease); }
.ra-rail__tick.is-passiert { background: var(--c-gold); border-color: var(--c-gold); }
.ra-rail__tick.is-aktiv { transform: scale(1.6); }
.ra-rail__tick span { position: absolute; left: 16px; top: 50%; transform: translate3d(-6px, -50%, 0) scale(.62); transform-origin: 0 50%; font-size: 13px; letter-spacing: .14em; color: var(--c-gold); opacity: 0; transition: opacity .4s, transform .4s var(--ra-ease); white-space: nowrap; }
.ra-rail__tick.is-aktiv span { opacity: 1; transform: translate3d(0, -50%, 0) scale(.62); }
.ra-rail__ende { position: absolute; left: 30px; transform: translateX(-50%); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--ra-gold-hell); white-space: nowrap; }
.ra-rail__ende--start { top: 0; }
.ra-rail__ende--ziel { bottom: 0; }

/* Prolog */
.ra-on .ra-prolog { height: 330vh; }
.ra-on .ra-prolog__stage { min-height: 0; height: 100vh; height: 100svh; justify-content: flex-end; padding-top: 0; }
.ra-on .ra-prolog__kopf { position: absolute; left: 50%; top: max(calc(var(--header-h) + 3vh), 17vh); width: min(1000px, calc(100% - 2 * var(--gutter))); margin: 0; transform: translate3d(-50%, var(--ky, 0px), 0); opacity: var(--ko, 1); }
.ra-on .ra-prolog__bild { position: absolute; left: 50%; bottom: -1vh; margin: 0; width: min(1280px, 112vh, 100%); transform: translate3d(-50%, var(--by, 0px), 0) scale(var(--bs, 1)); transform-origin: 50% 100%; opacity: var(--bo, 1); }
.ra-on .ra-picerno__svg path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.ra-on .ra-prolog__kicker { opacity: 0; animation: ra-ein 1.2s .2s var(--ra-ease) both; }
.ra-on .ra-w > span { transform: translate3d(0, 110%, 0) rotate(4deg); animation: ra-wort 1.3s var(--ra-ease) both; animation-delay: calc(.35s + var(--w) * .12s); }
.ra-on .ra-prolog__text { opacity: 0; animation: ra-ein 1.4s 1.1s var(--ra-ease) both; }
@keyframes ra-wort { to { transform: none; } }
@keyframes ra-ein { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
.ra-on .ra-prolog__sonne {
  display: block; position: absolute; left: 50%; bottom: 8vh; width: 90vh; height: 90vh; margin-left: -45vh; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-gold) 22%, transparent), color-mix(in srgb, var(--c-gold) 6%, transparent) 55%, transparent);
  opacity: var(--so, .25); transform: translate3d(0, var(--sy, 30%), 0) scale(var(--ss, .8));
}
.ra-on .ra-prolog__hinweis {
  display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; z-index: 3; margin: 26px 0 0;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--ra-gold-hell); white-space: nowrap;
  opacity: var(--ho, 1); transition: opacity .4s; animation: ra-ein 1s 2.2s both;
  text-shadow: 0 0 12px var(--ra-schwarz), 0 0 4px var(--ra-schwarz);
}
.ra-prolog__strich { width: 1px; height: 46px; background: linear-gradient(var(--c-gold), transparent); transform-origin: 50% 0; animation: ra-strich 2.2s var(--ra-ease-io) infinite; }
@keyframes ra-strich { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: 50% 0; } 51% { transform-origin: 50% 100%; } 100% { transform: scaleY(0); transform-origin: 50% 100%; } }

/* Karte: Reise */
.ra-on .ra-karte { display: block; margin: 0; }
.ra-on .ra-karte__bild { z-index: 1; transition: opacity 1s var(--ra-ease), transform 1.4s var(--ra-ease); }
.ra-on .ra-karte__svg { height: 100%; max-height: none; overflow: visible; }
.ra-on .ra-karte[data-state="vor"] .ra-karte__bild { opacity: 0; transform: scale(1.08); }
.ra-on .ra-karte[data-state="nach"] .ra-karte__bild { opacity: .16; transform: scale(.94); }
.ra-on .ra-karte__route { stroke-dasharray: var(--len, 3000); stroke-dashoffset: var(--len, 3000); }
.ra-on .ra-karte__route-schatten { opacity: var(--q, 0); }
.ra-on .ra-karte__pen { display: block; filter: drop-shadow(0 0 6px var(--c-gold)); }
.ra-on .ra-karte__ring { transform-box: fill-box; transform-origin: center; animation: ra-puls 2.4s ease-out infinite; }
@keyframes ra-puls { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.ra-on .ra-karte__ort--ziel { opacity: var(--zo, 0); transition: opacity .6s; }
.ra-on .ra-karte__luftlinie { opacity: calc(var(--q, 0) * .9); }

/* Neon */
.ra-on .ra-neon { min-height: 0; margin: 0; border: 0; overflow: visible; z-index: 2; flex-direction: column; }
.ra-on .ra-neon__bg { inset: 4% 0; overflow: hidden; border: 1px solid var(--ra-gold-25); opacity: 0; transform: scale(1.06); transition: opacity 2s ease, transform 3s var(--ra-ease); }
.ra-on .ra-neon__bg img { opacity: .3; }
.ra-on .ra-neon:not([data-state="vor"]) .ra-neon__bg { opacity: 1; transform: none; }
.ra-on .ra-neon__schrift span span { color: transparent; -webkit-text-stroke: 1px var(--ra-gold-25); text-shadow: none; transition: color .2s, text-shadow .2s; }
.ra-on .ra-neon__schrift { text-shadow: none; }
.ra-on .ra-neon:not([data-state="vor"]) .ra-neon__schrift span span { animation: ra-neon 1.6s steps(1, end) both; animation-delay: calc(.4s + var(--n) * .09s); }
@keyframes ra-neon {
  0%   { color: transparent; text-shadow: none; }
  12%  { color: var(--c-text); text-shadow: 0 0 6px var(--c-gold), 0 0 24px var(--c-gold); }
  18%  { color: transparent; text-shadow: none; }
  30%  { color: var(--c-text); text-shadow: 0 0 6px var(--c-gold), 0 0 24px var(--c-gold); }
  36%  { color: color-mix(in srgb, var(--c-text) 40%, transparent); text-shadow: none; }
  50%, 100% { color: var(--ra-gold-hell); -webkit-text-stroke: 0 transparent; text-shadow: 0 0 4px var(--c-gold), 0 0 18px var(--c-gold), 0 0 52px var(--ra-gold-45), 0 0 110px var(--ra-gold-25); }
}
.ra-on .ra-akt--neon .ra-st { display: block; text-align: left; }

/* Versprechen: Siegel + Satz */
.ra-on .ra-vs { display: block; margin: 0; padding: 0; border: 0; background: none; }
.ra-on .ra-vs__siegel { width: auto; aspect-ratio: auto; z-index: 2; }
.ra-on .ra-vs__siegel::before {
  content: ""; position: absolute; width: min(70vh, 40vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-gold) 16%, transparent), transparent);
  opacity: 0; transform: scale(.6); transition: opacity 1.4s ease, transform 1.8s var(--ra-ease);
}
.ra-on .ra-vs__ring, .ra-on .ra-vs__icon { position: absolute; width: min(48vh, 30vw); height: auto; aspect-ratio: 1; inset: auto; }
.ra-on .ra-vs__icon { width: min(19vh, 12vw); }
.ra-on .ra-vs__kreis { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ra-ease-io) .1s; }
.ra-on .ra-vs__kreis--innen { transition-delay: .4s; }
.ra-on .ra-vs__dreh { opacity: 0; transition: opacity 1.2s .6s; animation: ra-dreh 40s linear infinite; animation-play-state: paused; }
@keyframes ra-dreh { to { transform: rotate(360deg); } }
.ra-on .ra-vs__ring { transform: scale(1.25) rotate(-30deg); opacity: 0; transition: transform 1.3s var(--ra-ease), opacity .6s; }
.ra-on .ra-vs__icon { opacity: 0; transform: scale(.7); transition: opacity 1s .5s, transform 1.4s .5s var(--ra-ease); }
.ra-on .ra-vs[data-state="an"] .ra-vs__siegel::before { opacity: 1; transform: none; }
.ra-on .ra-vs[data-state="an"] .ra-vs__ring { transform: none; opacity: 1; }
.ra-on .ra-vs[data-state="an"] .ra-vs__kreis { stroke-dashoffset: 0; }
.ra-on .ra-vs[data-state="an"] .ra-vs__dreh { opacity: 1; animation-play-state: running; }
.ra-on .ra-vs[data-state="an"] .ra-vs__icon { opacity: 1; transform: none; }
.ra-on .ra-vs__text { top: calc(var(--ra-top) + 90px); }
.ra-on .ra-vs__titel { font-size: clamp(44px, 4.4vw, 74px); line-height: 1.02; margin-bottom: 26px; }
.ra-on .ra-vs__body { font-size: 18px; line-height: 1.75; color: var(--c-text-dim); }
.ra-on .ra-vs__kicker::after { content: ""; display: block; width: var(--rule-w); height: 1px; background: var(--c-gold); margin-top: 18px; }

/* Finale */
.ra-on .ra-finale { padding: 0; height: 340vh; }
.ra-on .ra-finale__stage { display: block; max-width: none; }
.ra-on .ra-finale__text { position: absolute; left: var(--ra-l); top: var(--ra-top); width: var(--ra-tw); z-index: 3; }
.ra-on .ra-finale__text > :not(.ra-orte), .ra-on .ra-ort { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .8s var(--ra-ease), transform .9s var(--ra-ease); }
.ra-on .ra-finale.is-im-bild .ra-finale__text > :not(.ra-orte) { opacity: 1; transform: none; }
.ra-on .ra-finale.is-im-bild .ra-finale__text > :nth-child(2) { transition-delay: .12s; }
.ra-on .ra-finale.is-im-bild .ra-finale__text > :nth-child(3) { transition-delay: .24s; }
.ra-on .ra-ort.is-an { opacity: 1; transform: none; }
.ra-on .ra-ort.is-an .ra-ort__punkt { animation: ra-punkt 2s ease-out infinite; }
@keyframes ra-punkt { 0% { box-shadow: 0 0 0 0 var(--ra-gold-45); } 100% { box-shadow: 0 0 0 12px transparent; } }
.ra-on .ra-finale__titel { font-size: clamp(40px, 4vw, 62px); }
.ra-on .ra-finale__karte { position: absolute; top: 6vh; bottom: 6vh; left: var(--ra-vis-l); right: 3vw; }
.ra-on .ra-finale__karte .ra-karte__svg { height: 100%; max-height: none; overflow: visible; }
.ra-on .ra-karte__ort--berlin { display: inline; opacity: var(--bo, 0); }
.ra-on .ra-karte__ort--berlin .ra-karte__ring { animation-duration: 2s; }
.ra-on .ra-karte__fein { opacity: var(--fo, 0); }
.ra-on .ra-finale .ra-karte__netz { opacity: var(--no, 1); }
.ra-on .ra-finale .ra-karte__kompass, .ra-on .ra-finale .ra-karte__massstab { opacity: var(--ko2, 1); }
.ra-on .ra-finale .ra-karte__ort--ziel { opacity: var(--zo, 1); }
.ra-on .ra-finale .ra-karte__ort--start, .ra-on .ra-finale .ra-karte__luftlinie { opacity: var(--ko2, 1); }
.ra-on .ra-finale .ra-karte__ort--stralsund { opacity: var(--so2, 0); }

/* ---- ra-on · mobil / hochkant -------------------------------------- */
@media (max-width: 899px) {
  .ra-on .ra {
    --ra-step: 92vh;
    --ra-l: 40px;
    --ra-r: 18px;
    --ra-top: 16px;
    --ra-vis-top: 70px;
    --ra-vis-h: 34svh;
    --ra-jahr-fs: 66px;
    --ra-jahr-top: calc(var(--ra-vis-top) + var(--ra-vis-h) + 16px);
    --ra-text-top: calc(var(--ra-jahr-top) + 70px);
    --ra-tw: auto;
  }
  .ra-on .ra-akt__kopf { right: var(--ra-r); gap: 12px; }
  .ra-on .ra-akt__nr { font-size: 16px; }
  .ra-on .ra-akt__nr > span { min-width: 34px; height: 34px; }
  .ra-on .ra-akt__titel { font-size: 22px; }
  .ra-on .ra-st__bild, .ra-on .ra-karte__bild, .ra-on .ra-neon, .ra-on .ra-vs__siegel {
    top: var(--ra-vis-top); bottom: auto; height: var(--ra-vis-h); left: var(--ra-l); right: var(--ra-r);
  }
  .ra-on .ra-st__text, .ra-on .ra-karte__text, .ra-on .ra-vs__text { right: var(--ra-r); }
  .ra-on .ra-st__print img, .ra-on .ra-st--hoch .ra-st__print img { max-height: var(--ra-vis-h); }
  .ra-on .ra-st__titel { font-size: 27px; margin-bottom: 10px; }
  .ra-on .ra-st__body { font-size: 15px; line-height: 1.6; }
  .ra-on .ra-st__jahr { display: none; }
  .ra-on .ra-karte__text .ra-st__jahr { display: block; }
  .ra-on .ra-rail { left: 18px; top: 18px; bottom: 18px; }
  .ra-on .ra-rail__ende, .ra-on .ra-rail__tick span { display: none; }
  .ra-on .ra-rail__bahn { top: 6px; bottom: 6px; }
  .ra-on .ra-karte__bild { height: calc(var(--ra-vis-h) + 6svh); }
  .ra-on .ra-vs__siegel { height: 38svh; }
  .ra-on .ra-vs__ring { width: min(34svh, 74vw); }
  .ra-on .ra-vs__icon { width: min(13svh, 28vw); }
  .ra-on .ra-vs__siegel::before { width: min(48svh, 100vw); }
  .ra-on .ra-vs__text { top: calc(var(--ra-vis-top) + 38svh + 14px); }
  .ra-on .ra-vs__kicker::after { margin-top: 10px; }
  .ra-on .ra-vs__titel { font-size: 34px; margin-bottom: 12px; }
  .ra-on .ra-vs__body { font-size: 15px; line-height: 1.6; }
  .ra-on .ra-prolog__kopf { top: 9svh; }
  .ra-on .ra-prolog__titel { font-size: 54px; margin-bottom: 18px; }
  .ra-on .ra-prolog__text { font-size: 15px; line-height: 1.6; }
  .ra-on .ra-prolog__bild { width: 170vw; bottom: 5svh; }
  .ra-on .ra-prolog__sonne { width: 70vh; height: 70vh; margin-left: -35vh; }
  .ra-on .ra-neon__z1 { font-size: 34px; }
  .ra-on .ra-neon__z2 { font-size: 58px; }
  .ra-on .ra-finale__text { top: auto; bottom: 4svh; right: var(--ra-r); width: auto; }
  .ra-on .ra-finale__titel { font-size: 32px; margin-bottom: 10px; }
  .ra-on .ra-finale__lead { display: none; }
  .ra-on .ra-orte { margin-top: 12px; }
  .ra-on .ra-ort { padding: 7px 0; }
  .ra-on .ra-ort__titel { font-size: 19px; }
  .ra-on .ra-ort__namen { font-size: 12px; line-height: 1.4; }
  .ra-on .ra-finale__karte { top: 2svh; bottom: 52svh; left: var(--ra-l); right: var(--ra-r); }
}
@media (max-width: 899px) and (max-height: 700px) {
  .ra-on .ra { --ra-vis-h: 28svh; --ra-jahr-fs: 52px; --ra-text-top: calc(var(--ra-jahr-top) + 56px); }
  .ra-on .ra-st__body { font-size: 14px; line-height: 1.5; }
}

/* ---- Nachschärfung (Runde 2) ---------------------------------------- */
.ra-on .ra-st__jahr--gleich { display: none; }
.ra-on .ra-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ra-on .ra-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 90% at 60% 50%, transparent 55%, color-mix(in srgb, var(--ra-schwarz) 75%, transparent));
}
.ra-on .ra-karte__bild, .ra-on .ra-finale__karte {
  -webkit-mask-image: radial-gradient(75% 70% at 50% 50%, var(--c-bg) 55%, transparent 100%);
  mask-image: radial-gradient(75% 70% at 50% 50%, var(--c-bg) 55%, transparent 100%);
}
.ra-on .ra-karte__route, .ra-on .ra-karte__route-schatten, .ra-on .ra-karte__luftlinie { vector-effect: none; }

/* Prolog: Zeichnung wächst, während der Titel geht */
.ra-on .ra-prolog__kopf { width: min(1240px, calc(100% - 2 * var(--gutter))); top: max(calc(var(--header-h) + 2vh), 15vh); }
.ra-on .ra-prolog__titel { font-size: clamp(54px, 7.4vw, 118px); margin-bottom: 22px; }
.ra-on .ra-prolog__bild { width: min(1180px, 108vh, 100%); }

/* Neon: ganze Bühne */
.ra-on .ra-neon { left: 0; right: 0; top: 0; bottom: 0; z-index: 1; transition: opacity 1.2s var(--ra-ease); }
.ra-on .ra-neon__bg { inset: 0; border: 0; }
.ra-on .ra-neon__bg img { opacity: .28; filter: grayscale(1) contrast(1.1); }
.ra-on .ra-neon__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, transparent, var(--c-bg) 95%); }
.ra-on .ra-neon__z1 { font-size: clamp(40px, 5.4vw, 86px); }
.ra-on .ra-neon__z2 { font-size: clamp(76px, 12vw, 200px); }
.ra-on .ra-neon[data-state="nach"] { opacity: .5; }
.ra-on .ra-neon[data-state="nach"] .ra-neon__schrift { opacity: 0; transition: opacity .8s; }
.ra-on .ra-akt--neon .ra-st__bild { z-index: 2; }
.ra-on .is-neon .ra-akt__kopf { opacity: .0; }

/* Finale kompakter */
.ra-on .ra { --ra-fw: min(36vw, 540px); }
.ra-on .ra-finale__text { width: var(--ra-fw); top: calc(var(--ra-top) - 2vh); }
.ra-on .ra-finale__titel { font-size: clamp(38px, 3.6vw, 56px); margin-bottom: 16px; }
.ra-on .ra-finale__lead { font-size: 16px; line-height: 1.65; margin-bottom: 0; }
.ra-on .ra-orte { margin-top: 22px; gap: 0; }
.ra-on .ra-ort { padding: 10px 0 9px; }
.ra-on .ra-ort__titel { font-size: 22px; }
.ra-on .ra-finale__karte { left: calc(var(--ra-l) + var(--ra-fw) + 3vw); }

@media (max-width: 899px) {
  .ra-on .ra-finale__text { top: auto; bottom: 3svh; width: auto; right: var(--ra-r); }
  .ra-on .ra-finale__karte { left: var(--ra-l); }
  .ra-on .ra-finale__titel { font-size: 30px; margin-bottom: 8px; }
  .ra-on .ra-ort { padding: 6px 0; }
  .ra-on .ra-ort__titel { font-size: 19px; }
  .ra-on .ra-prolog__titel { font-size: 54px; }
  .ra-on .ra-prolog__bild { width: 170vw; }
  .ra-on .ra-prolog__kopf { top: 8svh; }
}

@media (max-width: 899px) {
  .ra-on .ra-neon { top: 0; bottom: 0; left: 0; right: 0; height: auto; }
  .ra-on .ra-neon__z2 { font-size: 64px; }
  .ra-on .ra-vs__text { text-align: left; }
}

/* =========================================================================
   Schluss: Epilog mit Unterschriften
   ========================================================================= */

/* ---- Epilog: Grundfassung ------------------------------------------- */
.ra-epilog { position: relative; padding: var(--space-5) var(--gutter) var(--space-4); overflow: hidden; }
.ra-epilog__stage { max-width: 1100px; margin: 0 auto; text-align: center; }
.ra-epilog__himmel { position: absolute; inset: 0; pointer-events: none; }
.ra-epilog__licht {
  position: absolute; left: 50%; top: 56%; width: 120vh; height: 120vh; margin: -60vh 0 0 -60vh; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-gold) 20%, transparent), color-mix(in srgb, var(--c-gold) 6%, transparent) 50%, transparent);
}
.ra-epilog__weg { display: none; }
.ra-epilog__brief { position: relative; max-width: 700px; margin: 0 auto; }
.ra-epilog__titel { font-size: clamp(40px, 4.6vw, 64px); line-height: 1.08; margin: 0 0 22px; }
.ra-epilog__text { color: var(--c-text-dim); font-size: 17px; line-height: 1.75; }
.ra-epilog__text a { color: var(--c-gold); text-decoration: underline; text-underline-offset: 3px; }
.ra-epilog__gruss { position: relative; margin-top: var(--space-4); }
.ra-epilog__gruender { margin: 0 0 6px; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--ra-gold-hell); }
.ra-unterschriften { list-style: none; margin: 0 auto; padding: 0; display: flex; justify-content: center; align-items: flex-end; gap: clamp(20px, 5vw, 90px); }
.ra-u { position: relative; display: grid; justify-items: center; gap: 14px; width: min(40vw, 500px); }
.ra-u--mario { width: min(42vw, 520px); }
.ra-u__bild { position: relative; display: block; width: 100%; }
.ra-u__bild img { display: block; width: 100%; height: auto; }
.ra-u__schein, .ra-u__feder { display: none; }
.ra-u__name { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--ra-gold-hell); padding-left: .3em; }
.ra-epilog__buttons { justify-content: center; margin-top: var(--space-4); }

@media (max-width: 899px) {
  .ra-unterschriften { flex-direction: column; align-items: center; gap: 34px; }
  .ra-u, .ra-u--mario { width: min(86vw, 420px); }
}

/* ---- Epilog: Kinofassung -------------------------------------------- */
.ra-on .ra-epilog { height: 440vh; padding: 0; overflow: visible; }
.ra-on .ra-epilog__stage { max-width: none; text-align: center; background: var(--ra-schwarz); }
.ra-on .ra-epilog__licht {
  top: 93%; width: 190vh; height: 190vh; margin: -95vh 0 0 -95vh;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-gold) 30%, transparent), color-mix(in srgb, var(--c-gold) 9%, transparent) 42%, transparent);
  opacity: var(--lt, 0); transform: scale(calc(.55 + var(--lt, 0) * .45)) translate3d(0, calc((1 - var(--lt, 0)) * 12%), 0);
}
.ra-on .ra-epilog__weg { display: block; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
.ra-epilog__weg { color: var(--c-gold); overflow: visible; }
.ra-epilog__route, .ra-epilog__route-schatten, .ra-epilog__zukunft, .ra-epilog__horizont { fill: none; stroke-linecap: round; }
.ra-epilog__route { stroke: var(--c-gold); stroke-width: 2.4; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--wg, 1)); }
.ra-epilog__route-schatten { stroke: var(--ra-gold-25); stroke-width: 10; filter: blur(4px); opacity: var(--wg, 1); }
.ra-epilog__zukunft { stroke: url(#ra-zukunft-linie); stroke-width: 2.2; stroke-dasharray: .1 11; opacity: var(--wz, 1); }
.ra-epilog__horizont { stroke: url(#ra-horizont); stroke-width: 1; opacity: calc(var(--lt, 1) * .55); }
.ra-epilog__punkt { fill: var(--c-text); opacity: var(--wz, 1); filter: drop-shadow(0 0 6px var(--c-gold)) drop-shadow(0 0 18px var(--c-gold)); }
.ra-on .ra-epilog__brief { position: absolute; left: 50%; top: max(calc(var(--header-h) * .2 + 9vh), 10vh); width: min(720px, calc(100% - 2 * var(--gutter))); transform: translateX(-50%); z-index: 3; }
.ra-on .ra-epilog__brief > * { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s var(--ra-ease), transform 1s var(--ra-ease); }
.ra-on .ra-epilog.is-brief .ra-epilog__brief > * { opacity: 1; transform: none; }
.ra-on .ra-epilog.is-brief .ra-epilog__brief > :nth-child(2) { transition-delay: .12s; }
.ra-on .ra-epilog.is-brief .ra-epilog__brief > :nth-child(3) { transition-delay: .26s; }
.ra-on .ra-epilog.is-sig .ra-epilog__text { opacity: .6; }
.ra-on .ra-epilog__titel { font-size: clamp(40px, 4.2vw, 62px); margin-bottom: 18px; }
.ra-on .ra-epilog__text { font-size: 17px; line-height: 1.7; }
.ra-on .ra-epilog__gruss { position: absolute; left: 0; right: 0; top: 41%; margin: 0; z-index: 2; }
.ra-on .ra-epilog__gruender { opacity: 0; transition: opacity 1.2s var(--ra-ease); margin-bottom: 2vh; }
.ra-on .ra-epilog.is-sig .ra-epilog__gruender { opacity: 1; }
.ra-on .ra-unterschriften { gap: 5vw; align-items: flex-end; }
.ra-on .ra-u { width: min(34vw, 66vh, 520px); --w: 0; }
.ra-on .ra-u--mario { width: min(37vw, 72vh, 560px); }
.ra-on .ra-u__bild img {
  clip-path: polygon(-30% -20%, calc(var(--w) * 120% - 4%) -20%, calc(var(--w) * 120% - 20%) 120%, -30% 120%);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--c-gold) 30%, transparent));
}
.ra-on .ra-u__schein {
  display: block; position: absolute; left: -25%; right: -25%; top: -60%; bottom: -40%; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-gold) 22%, transparent), transparent);
  opacity: calc(var(--w) * .9); transform: scale(calc(.7 + var(--w) * .3));
}
.ra-on .ra-u__feder {
  display: block; position: absolute; left: 0; top: -12%; width: 100%; height: 100%; pointer-events: none;
  transform: translate3d(calc(var(--w) * 120% - 12%), 0, 0); opacity: var(--wo, 0);
}
.ra-on .ra-u__feder::before {
  content: ""; position: absolute; left: -40px; top: 10%; width: 80px; height: 90%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-gold) 26%, transparent), transparent);
  mix-blend-mode: screen;
}
.ra-on .ra-u__name { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 1.2s var(--ra-ease), transform 1.2s var(--ra-ease); }
.ra-on .ra-u.is-fertig .ra-u__name { opacity: 1; transform: none; }
.ra-on .ra-epilog__buttons { margin-top: 5vh; opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity 1s var(--ra-ease), transform 1s var(--ra-ease); pointer-events: none; }
.ra-on .ra-epilog.is-ende .ra-epilog__buttons { opacity: 1; transform: none; pointer-events: auto; }

@media (max-width: 899px) {
  .ra-on .ra-epilog__brief { top: 7svh; }
  .ra-on .ra-epilog__titel { font-size: 36px; margin-bottom: 12px; }
  .ra-on .ra-epilog__text { font-size: 15px; line-height: 1.6; }
  .ra-on .ra-epilog.is-sig .ra-epilog__brief > * { opacity: 0; transform: translate3d(0, -30px, 0); }
  .ra-on .ra-epilog.is-sig .ra-epilog__brief { pointer-events: none; }
  .ra-on .ra-epilog__gruss { top: 12svh; }
  .ra-on .ra-unterschriften { flex-direction: column; align-items: center; gap: 4.5svh; }
  .ra-on .ra-u { width: min(80vw, 46svh); }
  .ra-on .ra-u--mario { width: min(86vw, 50svh); }
  .ra-on .ra-epilog__buttons { flex-direction: column; align-items: center; gap: 12px; margin-top: 5svh; }
}

/* =========================================================================
   Feinschliff Handy-Test (24.10.2026): saubere Wechsel, keine Überlagerungen
   ========================================================================= */

/* Reise-Karte: ist ihr Schritt vorbei, verschwindet sie ganz (nichts scheint unter Text/Siegel durch) */
.ra-on .ra-karte[data-state="nach"] .ra-karte__bild { opacity: 0; transform: scale(.94); }
.ra-on .ra-karte:not([data-state="an"]) .ra-karte__bild {
  visibility: hidden;
  transition: opacity .45s var(--ra-ease), transform 1.4s var(--ra-ease), visibility 0s linear .45s;
}

/* Siegel „Unser Standard“: immer nur das aktuelle – beim Verlassen schnell aus und unsichtbar */
.ra-on .ra-vs__siegel { visibility: hidden; transition: visibility 0s linear .5s; }
.ra-on .ra-vs[data-state="an"] .ra-vs__siegel { visibility: visible; transition: none; }
.ra-on .ra-vs:not([data-state="an"]) .ra-vs__ring { transition: transform .5s var(--ra-ease), opacity .3s; }
.ra-on .ra-vs:not([data-state="an"]) .ra-vs__icon { transition: opacity .25s, transform .4s var(--ra-ease); }
.ra-on .ra-vs:not([data-state="an"]) .ra-vs__siegel::before { transition: opacity .3s, transform .4s; }
.ra-on .ra-vs:not([data-state="an"]) .ra-vs__dreh { transition: opacity .2s; }
/* während das Siegel steht: frühere Abzüge sofort weg (auch beim schnellen Scrollen) */
.ra-on .is-vs .ra-st[data-state="nach"] .ra-st__print {
  visibility: hidden;
  transition: opacity .3s var(--ra-ease), transform .5s var(--ra-ease), visibility 0s linear .3s;
}

/* Epilog: weicher Übergang aus dem Finale (kein harter Schnitt ins Schwarz) */
.ra-on .ra-epilog__stage { background: linear-gradient(var(--c-bg), var(--ra-schwarz) 32%); }

@media (max-width: 899px) {
  /* Reise-Karte: eigener, größerer Bildbereich oben; Jahreszahl und Text rücken darunter */
  .ra-on .ra { --ra-karte-plus: 14svh; }
  .ra-on .ra-karte__bild { top: calc(var(--ra-vis-top) - 10px); height: calc(var(--ra-vis-h) + var(--ra-karte-plus)); }
  .ra-on .ra-karte__text { top: calc(var(--ra-text-top) + var(--ra-karte-plus)); }
  .ra-on .ra-jahr.is-an.is-karte { transform: translate3d(0, var(--ra-karte-plus), 0); }
  .ra-on .ra-karte__grad, .ra-on .ra-karte__land text:first-child { display: none; }

  /* Finale: Titel · Karte · Standortliste untereinander, die Karte nimmt den Platz dazwischen */
  .ra-on .ra-finale__stage {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 16px var(--ra-r) max(3svh, 18px) var(--ra-l);
  }
  .ra-on .ra-finale__text { display: contents; }
  .ra-on .ra-finale__text > .ra-kicker { order: 1; margin: 0 0 6px; position: relative; z-index: 3; }
  .ra-on .ra-finale__titel { order: 2; margin: 0; position: relative; z-index: 3; }
  .ra-on .ra-finale__karte {
    order: 3; position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto;
    flex: 1 1 0; min-height: 120px; margin: 14px 0;
  }
  .ra-on .ra-finale__karte .ra-karte__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .ra-on .ra-orte { order: 4; margin: 0; position: relative; z-index: 3; }

  /* Epilog: Unterschriften + Buttons bleiben über der goldenen Straße am unteren Rand */
  .ra-on .ra-epilog__gruss { top: 9svh; }
  .ra-on .ra-epilog__gruender { margin-bottom: 1.5svh; }
  .ra-on .ra-unterschriften { gap: 3svh; }
  .ra-on .ra-u { width: min(74vw, 40svh); gap: 8px; }
  .ra-on .ra-u--mario { width: min(80vw, 44svh); }
  .ra-on .ra-epilog__buttons { margin-top: 4svh; gap: 10px; }
}
@media (max-width: 899px) and (max-height: 620px) {
  .ra-on .ra-u { width: min(70vw, 34svh); }
  .ra-on .ra-u--mario { width: min(76vw, 38svh); }
  .ra-on .ra-epilog__buttons { margin-top: 3svh; }
}

/* =========================================================================
   Nachgezeichnete Landkarte statt Gradnetz (karte_europa.svg / karte_berlin.svg,
   erzeugt von _werkzeug/karte_linien.py) · Wegweiser nach Stralsund im Berlin-Zoom
   ========================================================================= */
.ra-land g { fill: none; stroke: var(--c-gold); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.ra-land path { vector-effect: non-scaling-stroke; }
.ra-land__kueste { opacity: .42; }
.ra-land__grenze { opacity: .22; stroke-width: .8; }
.ra-land__alpen { opacity: .3; }
.ra-land__stadt { opacity: .5; }
.ra-land__fluss { opacity: .38; }
.ra-karte__fern { display: none; }
.ra-karte__fern path { fill: none; stroke: var(--c-gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ra-karte__fern text { fill: var(--ra-gold-hell); font-family: var(--f-display); font-style: italic; font-size: 17px; }
.ra-karte__quelle { margin: 8px 0 0; font-size: 10px; line-height: 1.3; letter-spacing: .04em; color: var(--c-text-dim); opacity: .6; }

/* mit JS: Linien zeichnen sich (page.js setzt stroke-dashoffset je Linienzug, Strichstärke über data-sw) */
.ra-on .ra-land path { vector-effect: none; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.ra-on .ra-finale .ra-karte__fern { display: inline; opacity: var(--fe, 0); }
.ra-on .ra-karte__quelle { position: absolute; right: 3vw; bottom: 1.4vh; margin: 0; z-index: 3; font-size: 9px; opacity: .45; }
@media (max-width: 899px) {
  .ra-on .ra-karte__quelle { right: var(--ra-r); bottom: 3px; }
}
.ra-finale__stage > .ra-karte__quelle { grid-column: -2 / -1; text-align: right; }