/* ==========================================================================
   WNA Vision 2 — Story (Sprint 0B.2 / 0B.3 / 0B.4B): ein Objekt, eine Geschichte in acht Sequenzen,
   ab 0B.4B in einer realistischen KI-/Render-Welt (template-parts/welt.php)
   Alle Zustände sind Funktionen von CSS-Variablen, die story.js je Frame aus
   dem globalen Scroll-Fortschritt schreibt (reversibel, keine Transitions).
   Flow-Variante (Mobile, Reduced Motion, kein JS): feste Endzustände über
   data-state. Nur transform / opacity / stroke-dashoffset / clip-path.
   ========================================================================== */

/* --- Registrierte Variablen für den Intro-Aufbau (CSS-Animation) --------- */
@property --o-raum { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --o-linie { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --o-bau { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --o-fenster { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --h-k { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --h-t1 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --h-t2 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --h-bar { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --h-glow { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --h-sub { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --w-real { syntax: "<number>"; inherits: true; initial-value: 1; }

/* Ursprung: Raum → Struktur (Linie zeichnet das Objekt) → Körper → Fenster */
@keyframes wna2-objekt-intro {
	0%   { --o-raum: 0; --o-linie: 0; --o-bau: 0; --o-fenster: 0; }
	22%  { --o-raum: 1; }
	70%  { --o-raum: 1; }
	18%  { --o-linie: 0; }
	66%  { --o-linie: 1; }
	40%  { --o-bau: 0; }
	72%  { --o-bau: 1; }
	62%  { --o-fenster: 0; }
	88%  { --o-fenster: 1; }
	100% { --o-raum: 0.25; --o-linie: 1; --o-bau: 1; --o-fenster: 1; }
}
/* 0B.4B: nach dem Linien-/Körperaufbau wird das Objekt real (Plate unter dem SVG) */
@keyframes wna2-welt-intro {
	0%, 62% { --w-real: 0; }
	100%    { --w-real: 1; }
}
@keyframes wna2-hero-intro {
	0%   { --h-k: 0; --h-t1: 0; --h-t2: 0; --h-bar: 0; --h-glow: 0; --h-sub: 0; }
	30%  { --h-k: 0; }
	50%  { --h-k: 1; }
	40%  { --h-t1: 0; }
	62%  { --h-t1: 1; }
	58%  { --h-t2: 0; }
	80%  { --h-t2: 1; }
	70%  { --h-bar: 0; --h-glow: 0; }
	82%  { --h-glow: 1; }
	90%  { --h-bar: 1; }
	96%  { --h-glow: 0; }
	72%  { --h-sub: 0; }
	95%  { --h-sub: 1; }
	100% { --h-k: 1; --h-t1: 1; --h-t2: 1; --h-bar: 1; --h-glow: 0; --h-sub: 1; }
}

/* --- Story-Container: Bühne vs. Flow ------------------------------------- */
.wna2-story { position: relative; background: var(--wna2-g-950); color: var(--wna2-w-50); }
.wna2-buehne { display: none; }
.wna2-flow { display: block; }

@media (min-width: 1024px) and (min-height: 720px) {
	/* 0C.1.x: Strecke 2630vh (story.js STRECKE_VH) + 100vh Bühne — kurzes Finale-Halten statt 160vh */
	.wna2-scrub .wna2-story { height: 2730vh; }
	.wna2-scrub .wna2-buehne {
		display: block; position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate;
		background: radial-gradient(120% 80% at 70% 10%, var(--wna2-g-800) 0%, var(--wna2-g-900) 45%, var(--wna2-g-950) 100%);
	}
	.wna2-scrub .wna2-flow { display: none; }
	/* Intro nur auf der Bühne mit "backwards": nach dem Aufbau übernehmen JS-Variablen. */
	.wna2-scrub .wna2-objekt--buehne { animation: wna2-objekt-intro 3.4s ease-in-out backwards; }
	.wna2-scrub .wna2-buehne__objekt { animation: wna2-welt-intro 4.6s ease-in-out backwards; }
	.wna2-scrub .wna2-hero__inner { animation: wna2-hero-intro 3.4s ease-in-out backwards; }
}

/* --- Kamera / Objekt auf der Bühne --------------------------------------- */
.wna2-buehne__objekt {
	position: absolute; left: 50%; top: 50%; width: 150vh; height: 100vh; margin: -50vh 0 0 -75vh;
	transform: translate3d(var(--cam-tx, 0px), var(--cam-ty, 0px), 0) scale(var(--cam-s, 1));
	transform-origin: 50% 50%; will-change: transform; pointer-events: none;
}
.wna2-objekt { width: 100%; height: 100%; overflow: visible; display: block; }

/* --- Das Objekt: Ebenen -------------------------------------------------- */
.wna2-o-raum { fill: none; stroke: var(--wna2-g-700); stroke-width: 1; opacity: calc(var(--o-raum, 1) * 0.55); }
.wna2-o-himmel { fill: #0a0e15; opacity: calc(var(--o-himmel, 0) * 0.75); }

.wna2-o-rasen { fill: var(--wna2-g-800); opacity: var(--o-garten, 0); }
.wna2-o-hecken rect, .wna2-o-baum { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(calc(0.4 + 0.6 * var(--o-garten, 0))); opacity: var(--o-garten, 0); }
.wna2-o-hecken rect { fill: #24312a; stroke: #3c5245; stroke-width: 1.5; }
.wna2-o-baum path { stroke: var(--wna2-g-500); stroke-width: 4; fill: none; }
.wna2-o-baum circle { fill: #22302a; stroke: #3c5245; stroke-width: 1.5; }

.wna2-o-weg { fill: var(--wna2-g-800); stroke: var(--wna2-g-600); stroke-width: 1; opacity: var(--o-bau, 1); }
.wna2-o-boden { fill: none; stroke: var(--wna2-g-500); stroke-width: 1.5; opacity: var(--o-bau, 1); }

/* Bestand (Pfad B, Ausgangslage) */
.wna2-o-bestand > rect:first-child { fill: #6b665f; opacity: calc(var(--o-bestand, 0) * 0.45); }
.wna2-o-bestand > path { fill: none; stroke: var(--wna2-g-400); stroke-width: 2; opacity: var(--o-bestand, 0); }
.wna2-o-bestand > path ~ rect { fill: var(--wna2-g-950); opacity: calc(var(--o-bestand, 0) * 0.95); }

/* Grundkörper */
.wna2-o-bau { opacity: var(--o-bau, 1); }
.wna2-o-koerper { fill: #1c1a17; stroke: var(--wna2-g-500); stroke-width: 1.5; }
.wna2-o-attika { fill: var(--wna2-g-700); stroke: var(--wna2-g-500); stroke-width: 1; }
.wna2-o-etagen { fill: none; stroke: var(--wna2-g-700); stroke-width: 1; }
.wna2-o-fenster rect { fill: var(--wna2-g-800); stroke: var(--wna2-g-600); stroke-width: 1; opacity: var(--o-fenster, 1); }
.wna2-o-treppe rect { fill: var(--wna2-g-700); stroke: var(--wna2-g-500); stroke-width: 1; opacity: var(--o-fenster, 1); }
.wna2-o-tuer { fill: var(--wna2-g-800) !important; stroke: var(--wna2-g-400) !important; }
.wna2-o-vordach { fill: none; stroke: var(--wna2-g-400); stroke-width: 3; }
.wna2-o-bau-licht { opacity: var(--o-bau, 1); }
.wna2-o-licht rect { fill: var(--wna2-o-400); opacity: calc(clamp(0, var(--o-licht, 0) * 3 - var(--i, 0), 1) * 0.6); }
.wna2-o-sweep {
	fill: var(--wna2-w-50); opacity: calc(min(1, var(--o-sweep, 0) * 6) * (1 - clamp(0, (var(--o-sweep, 0) - 0.9) * 10, 1)) * 0.35);
	transform: translateY(calc(var(--o-sweep, 0) * -300px));
}

/* Aufmaß, Gerüst, neuer Zustand, Übergabe */
.wna2-o-aufmass path { fill: none; stroke: var(--wna2-g-300); stroke-width: 1.5; stroke-dasharray: 1000; stroke-dashoffset: calc(1000 - 1000 * var(--o-aufmass, 0)); }
.wna2-o-aufmass text { fill: var(--wna2-g-300); font: 600 18px/1 var(--wna2-font); letter-spacing: 0.12em; text-transform: uppercase; opacity: var(--o-aufmass, 0); }
.wna2-o-geruest path { fill: none; stroke: var(--wna2-g-500); stroke-width: 1.5; opacity: calc(var(--o-geruest, 0) * 0.9); }
.wna2-o-neu { clip-path: inset(0 calc((1 - var(--o-neu, 0)) * 100%) 0 0); }
.wna2-o-neu > rect:first-child { fill: var(--wna2-o-500); opacity: 0.10; }
.wna2-o-dachgeschoss { fill: #1c1a17; stroke: var(--wna2-o-400); stroke-width: 1.5; }
.wna2-o-fenster-neu rect { fill: var(--wna2-w-50); opacity: 0.85; }
.wna2-o-fertig { fill: none; stroke: var(--wna2-o-400); stroke-width: 4; stroke-linejoin: round; filter: drop-shadow(0 0 8px var(--wna2-o-glow)); stroke-dasharray: 1000; stroke-dashoffset: calc(1000 - 1000 * var(--o-fertig, 0)); }

/* Grundriss / Planung */
.wna2-o-plan path { fill: none; stroke: var(--wna2-g-200); stroke-width: 2; stroke-dasharray: 1000; stroke-dashoffset: calc(1000 - 1000 * var(--o-plan, 0)); }
.wna2-o-plan text { fill: var(--wna2-g-300); font: 600 18px/1 var(--wna2-font); letter-spacing: 0.12em; text-transform: uppercase; opacity: var(--o-plan, 0); }
.wna2-o-termine rect { fill: var(--wna2-o-400); opacity: calc(var(--o-termine, 0) * 0.9); transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(var(--o-termine, 0)); }

/* Winter */
.wna2-o-schnee circle { fill: #e9edf2; opacity: calc(var(--o-schnee, 0) * 0.8); transform: translateY(calc(var(--o-schnee, 0) * 240px)); }
.wna2-o-schneedecke { fill: #c9d1da; opacity: calc(var(--o-decke, 0) * 0.42); }
.wna2-o-geraeumt { fill: #1c1a17; stroke: var(--wna2-o-400); stroke-width: 1.5; opacity: var(--o-raeum, 0); }
.wna2-o-raeumer { fill: var(--wna2-o-400); filter: drop-shadow(0 0 6px var(--wna2-o-glow)); transform: translateY(calc(var(--o-raeum, 0) * 130px)); opacity: calc(min(1, var(--o-raeum, 0) * 5) * (1 - clamp(0, (var(--o-raeum, 0) - 0.86) * 7, 1))); }
.wna2-o-streu circle { fill: var(--wna2-o-400); opacity: var(--o-streu, 0); }

/* WNA-Linie in ihren Funktionen */
.wna2-o-linie, .wna2-o-linie-eintritt, .wna2-o-linie-treppe, .wna2-o-linie-garten, .wna2-o-linie-plan, .wna2-o-linie-daten, .wna2-o-merge path,
.wna2-o-weiche__stamm, .wna2-o-weiche__a, .wna2-o-weiche__b {
	fill: none; stroke: var(--wna2-o-400); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
	filter: drop-shadow(0 0 6px var(--wna2-o-glow)); stroke-dasharray: 1000;
}
.wna2-o-linie { stroke-dashoffset: calc(1000 - 1000 * var(--o-linie, 1)); }
.wna2-o-linie-eintritt { stroke-dashoffset: calc(1000 - 1000 * var(--o-eintritt, 0)); }
.wna2-o-linie-treppe { stroke-dashoffset: calc(1000 - 1000 * var(--o-treppe, 0)); }
.wna2-o-linie-garten { stroke-dashoffset: calc(1000 - 1000 * var(--o-linie-garten, 0)); }
.wna2-o-linie-daten { stroke-dashoffset: calc(1000 - 1000 * var(--o-daten, 0)); }
.wna2-o-linie-plan { stroke-dashoffset: calc(1000 - 1000 * var(--o-plan, 0)); }
.wna2-o-merge path { stroke-dashoffset: calc(1000 - 1000 * var(--o-merge, 0)); }
.wna2-o-merge__knoten { fill: var(--wna2-o-400); filter: drop-shadow(0 0 10px var(--wna2-o-400)); opacity: clamp(0, (var(--o-merge, 0) - 0.8) * 5, 1); }
.wna2-o-weiche__stamm { stroke-dashoffset: calc(1000 - 1000 * min(1, var(--o-weiche, 0) * 2.5)); }
.wna2-o-weiche__a, .wna2-o-weiche__b { stroke-dashoffset: calc(1000 - 1000 * clamp(0, (var(--o-weiche, 0) - 0.4) / 0.6, 1)); }
.wna2-o-weiche__knoten { fill: var(--wna2-o-400); opacity: min(1, var(--o-weiche, 0) * 2.5); }
.wna2-o-weiche__ende { fill: var(--wna2-o-400); opacity: clamp(0, (var(--o-weiche, 0) - 0.85) * 7, 1); }
.wna2-o-weiche__ende--a { filter: drop-shadow(0 0 calc(var(--o-fa, 0) * 14px) var(--wna2-o-400)); transform-box: fill-box; transform-origin: center; transform: scale(calc(1 + var(--o-fa, 0) * 0.8)); }
.wna2-o-weiche__ende--b { filter: drop-shadow(0 0 calc(var(--o-fb, 0) * 14px) var(--wna2-o-400)); transform-box: fill-box; transform-origin: center; transform: scale(calc(1 + var(--o-fb, 0) * 0.8)); }
.wna2-o-weiche__label { fill: var(--wna2-g-200); font: 700 26px/1 var(--wna2-font); letter-spacing: 0.02em; opacity: clamp(0, (var(--o-weiche, 0) - 0.85) * 7, 1); }
.wna2-o-weiche__label--a { fill: color-mix(in srgb, var(--wna2-g-200), var(--wna2-o-400) calc(var(--o-fa, 0) * 100%)); }
.wna2-o-weiche__label--b { fill: color-mix(in srgb, var(--wna2-g-200), var(--wna2-o-400) calc(var(--o-fb, 0) * 100%)); }

/* Nachweise */
.wna2-o-nachweis rect { fill: var(--wna2-g-800); stroke: var(--wna2-o-400); stroke-width: 1.5; }
.wna2-o-nachweis path { fill: none; stroke: var(--wna2-g-300); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wna2-o-nachweis .wna2-o-haken { stroke: var(--wna2-o-400); stroke-width: 3; }
.wna2-o-nachweis text { fill: var(--wna2-w-50); font: 600 15px/1 var(--wna2-font); letter-spacing: 0.08em; text-transform: uppercase; }
.wna2-o-nachweis--b { opacity: var(--o-nb, 0); transform: translateY(calc((1 - var(--o-nb, 0)) * 24px)); }

/* Feste Endzustände der Flow-Instanzen */
.wna2-objekt[data-state="a"] { --o-eintritt: 1; --o-treppe: 1; --o-licht: 1; --o-innen: 1; --o-garten: 1; --o-linie-garten: 1; --o-himmel: 0.6; --o-decke: 1; --o-wfoto: 1; --o-raeum: 1; --o-streu: 1; }
.wna2-objekt[data-state="b"] { --o-plan: 1; --o-termine: 1; --o-neu: 1; --o-ffoto: 1; --o-fertig: 1; --o-nb: 1; --o-garten: 1; }
.wna2-objekt[data-state="hero"] { --o-garten: 0; }

/* --- Hero-Text auf der Bühne --------------------------------------------- */
.wna2-hero__inner {
	position: absolute; left: 0; right: 0; bottom: 11vh; z-index: 2; pointer-events: none;
	opacity: var(--t-hero, 1); transform: translate3d(0, calc((1 - var(--t-hero, 1)) * -60px), 0);
}
.wna2-hero__inner > * { max-width: 620px; }
.wna2-hero__inner.is-aktiv > * { pointer-events: auto; }
.wna2-flow .wna2-hero__inner > * { pointer-events: auto; }
.wna2-hero__kicker { color: var(--wna2-o-400); opacity: var(--h-k, 1); transform: translateY(calc((1 - var(--h-k, 1)) * 14px)); }
.wna2-hero__titel { font-size: clamp(2.6rem, 1rem + 6.8vw, 6.4rem); line-height: 0.96; letter-spacing: -0.03em; font-weight: 700; margin-top: 0.5rem; hyphens: manual; }
.wna2-hero__zeile { display: block; }
.wna2-hero__zeile--1 { opacity: var(--h-t1, 1); transform: translateY(calc((1 - var(--h-t1, 1)) * 34px)); }
.wna2-hero__zeile--akzent {
	position: relative; display: inline-block; color: var(--wna2-o-400); opacity: var(--h-t2, 1);
	transform: translateY(calc((1 - var(--h-t2, 1)) * 34px)) scale(calc(1.10 - 0.10 * var(--h-t2, 1))); transform-origin: 0 100%;
	text-shadow: 0 0 calc(var(--h-glow, 0) * 42px) rgba(255, 145, 77, calc(var(--h-glow, 0) * 0.9));
}
.wna2-hero__akzentbar { position: absolute; left: 0.04em; right: 0.15em; bottom: -0.06em; height: 0.075em; background: var(--wna2-o-400); transform: scaleX(var(--h-bar, 1)); transform-origin: 0 50%; box-shadow: 0 0 14px var(--wna2-o-glow); }
.wna2-hero__sub, .wna2-hero__wege, .wna2-hero__trust { opacity: var(--h-sub, 1); transform: translateY(calc((1 - var(--h-sub, 1)) * 18px)); }
.wna2-hero__sub { max-width: 34ch; margin-top: 1.3rem; font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3rem); line-height: 1.45; color: var(--wna2-g-200); }
.wna2-hero__wege { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; }
.wna2-hero__trust { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 1.4rem; font-size: 0.9375rem; color: var(--wna2-g-400); }
.wna2-hero__trust span + span::before { content: "·"; margin: 0 0.6em; color: var(--wna2-o-400); }
.wna2-hero__weiter {
	position: absolute; z-index: 2; left: var(--wna2-gutter); bottom: 22px; display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
	color: var(--wna2-g-400); text-decoration: none; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase;
	opacity: calc(var(--h-sub, 1) * var(--t-hero, 1));
}
.wna2-hero__weiter i { display: block; width: 48px; height: 2px; background: var(--wna2-o-400); }

/* --- Kompass ------------------------------------------------------------- */
.wna2-kompass { position: absolute; left: var(--wna2-gutter); top: calc(var(--wna2-header-h) + 4vh); z-index: 3; opacity: var(--kompass, 0); pointer-events: none; }
.wna2-kompass ol { list-style: none; display: flex; gap: 26px; }
.wna2-kompass li { text-shadow: 0 1px 14px rgba(14, 13, 12, 0.9); position: relative; padding-left: 22px; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wna2-g-500); font-weight: 600; }
.wna2-kompass li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--wna2-g-500); }
.wna2-kompass[data-aktiv="0"] li[data-k="0"], .wna2-kompass[data-aktiv="1"] li[data-k="1"], .wna2-kompass[data-aktiv="2"] li[data-k="2"], .wna2-kompass[data-aktiv="3"] li[data-k="3"] { color: var(--wna2-w-50); }
.wna2-kompass[data-aktiv="0"] li[data-k="0"]::before, .wna2-kompass[data-aktiv="1"] li[data-k="1"]::before, .wna2-kompass[data-aktiv="2"] li[data-k="2"]::before, .wna2-kompass[data-aktiv="3"] li[data-k="3"]::before { background: var(--wna2-o-400); border-color: var(--wna2-o-400); box-shadow: 0 0 10px var(--wna2-o-glow); }

/* --- Kapitelkarten ------------------------------------------------------- */
.wna2-kap { max-width: 46ch; }
.wna2-kap__titel { font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3.2rem); line-height: 1.04; letter-spacing: -0.02em; font-weight: 700; margin-top: 0.5rem; text-wrap: balance; }
.wna2-kap__text { margin-top: 0.9rem; font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem); line-height: 1.5; color: var(--wna2-g-300); max-width: 40ch; }
.wna2-kap__link { display: inline-block; margin-top: 1rem; color: var(--wna2-o-400); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--wna2-o-400); padding-bottom: 2px; }
.wna2-kap__link:hover { color: var(--wna2-w-50); }
/* 0D.1 FREEZE EXCEPTION – Responsive: größere Trefferfläche der Kapitel-Links in der Flow-Fassung (Mobile), Optik unverändert */
.wna2-flow .wna2-kap__link { position: relative; }
.wna2-flow .wna2-kap__link::after { content: ""; position: absolute; inset: -8px -6px; }

.wna2-buehne .wna2-kap {
	position: absolute; left: var(--wna2-gutter); bottom: 12vh; z-index: 2; max-width: min(46ch, 38vw);
	text-shadow: 0 2px 28px rgba(14, 13, 12, 0.9), 0 0 2px rgba(14, 13, 12, 0.6);
	opacity: var(--t, 0); transform: translate3d(0, calc((1 - var(--t, 0)) * 26px), 0); pointer-events: none;
}
.wna2-buehne .wna2-kap.is-aktiv { pointer-events: auto; }
.wna2-buehne .wna2-kap--weiche { --t: var(--t-weiche, 0); }
.wna2-buehne .wna2-kap--a1 { --t: var(--t-a1, 0); }
.wna2-buehne .wna2-kap--a2 { --t: var(--t-a2, 0); }
.wna2-buehne .wna2-kap--a3 { --t: var(--t-a3, 0); }
.wna2-buehne .wna2-kap--a4 { --t: var(--t-a4, 0); }
.wna2-buehne .wna2-kap--ueb { --t: var(--t-ueb, 0); }
.wna2-buehne .wna2-kap--b1 { --t: var(--t-b1, 0); }
.wna2-buehne .wna2-kap--b2 { --t: var(--t-b2, 0); }
.wna2-buehne .wna2-kap--b3 { --t: var(--t-b3, 0); }
.wna2-buehne .wna2-kap--b4 { --t: var(--t-b4, 0); }
.wna2-buehne .wna2-kap--merge { --t: var(--t-merge, 0); bottom: auto; top: calc(var(--wna2-header-h) + 5vh); left: 50%; max-width: min(56ch, 46vw); margin-left: calc(min(56ch, 46vw) / -2); text-align: center; }
.wna2-buehne .wna2-kap--merge .wna2-kap__text { margin-inline: auto; }
.wna2-buehne .wna2-kap--merge .wna2-kap__link + .wna2-kap__link { margin-left: 22px; }
/* Beim Blick in den Garten (Kamera unten links) steht die Karte oben rechts */
.wna2-buehne .wna2-kap--a3 { left: auto; right: var(--wna2-gutter); bottom: auto; top: calc(var(--wna2-header-h) + 8vh); text-align: right; }
.wna2-buehne .wna2-kap--a3 .wna2-kap__text { margin-left: auto; }
/* Winter: Karte oben links — unten spielt die Räumung */
.wna2-buehne .wna2-kap--a4 { bottom: auto; top: calc(var(--wna2-header-h) + 8vh); }

/* --- WNA OS auf der Bühne ------------------------------------------------ */
.wna2-os-buehne { position: absolute; z-index: 2; right: var(--wna2-gutter); top: calc(var(--wna2-header-h) + 2vh + 26px); width: min(860px, 59vw); display: grid; gap: min(18px, 1.6vh); pointer-events: none; }
.wna2-os-buehne .wna2-kap__titel { font-size: clamp(1.5rem, 0.8rem + 1.9vw, 2.5rem); }
.wna2-os-buehne .wna2-kap__text { margin-top: 0.6rem; font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem); }
.wna2-os-buehne .wna2-kap { position: static; max-width: none; }
.wna2-os-buehne .wna2-kap--os { --t: var(--t-os, 0); }
.wna2-buehne .wna2-kap--ende { --t: var(--t-ende, 0); }
.wna2-buehne .wna2-kap--ende .wna2-btn { margin-top: 0.9rem; }
.wna2-os-buehne .wna2-os { opacity: var(--t-os, 0); transform: translate3d(0, calc((1 - var(--t-os, 0)) * 24px), 0); }

.wna2-os { position: relative; padding: 18px 22px 18px 44px; border: 1px solid var(--wna2-g-700); border-radius: 6px; background: rgba(21, 20, 18, 0.85); }
.wna2-os__kopf { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wna2-g-400); font-weight: 600; }
.wna2-os__kopf span { color: var(--wna2-o-400); margin-right: 8px; }
.wna2-os__linie { position: absolute; left: 22px; top: 52px; bottom: 22px; width: 2px; background: var(--wna2-o-400); transform: scaleY(var(--os-linie, 1)); transform-origin: 50% 0; box-shadow: 0 0 8px var(--wna2-o-glow); }
.wna2-os__zeilen { list-style: none; display: grid; gap: min(8px, 0.8vh); margin-top: 8px; }
.wna2-os__zeilen li { position: relative; font-size: 0.9375rem; line-height: 1.35; font-weight: 500; color: var(--wna2-g-200); opacity: clamp(0, var(--os-zeilen, 1) * 9 - var(--i, 0), 1); transform: translateX(calc((1 - clamp(0, var(--os-zeilen, 1) * 9 - var(--i, 0), 1)) * 10px)); }
.wna2-os__zeilen li::before { content: ""; position: absolute; left: -27px; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--wna2-o-400); }

/* --- Flow-Variante (Mobile, Reduced Motion, kein JS) --------------------- */
.wna2-flow__hero { position: relative; overflow: hidden; padding: calc(var(--wna2-header-h) + 24px) 0 64px; background: radial-gradient(120% 80% at 80% 0%, var(--wna2-g-800) 0%, var(--wna2-g-900) 45%, var(--wna2-g-950) 100%); }
.wna2-flow__hero .wna2-flow__objekt { width: min(100%, 720px); margin: 0 auto 8px; }
.wna2-flow .wna2-objekt[data-state="hero"] { animation: wna2-objekt-intro 3.4s ease-in-out both; }
.wna2-flow__hero .wna2-hero__inner { position: static; opacity: 1; transform: none; animation: wna2-hero-intro 3.4s ease-in-out both; }
.wna2-flow__hero .wna2-container > * { max-width: 620px; }
.wna2-flow__kapitel { display: grid; gap: clamp(36px, 6vw, 64px); padding: clamp(40px, 7vw, 80px) 0; }
.wna2-flow__weg { border-top: 1px solid var(--wna2-g-800); }
.wna2-flow__weg .wna2-flow__objekt { width: min(100%, 760px); margin: 24px auto 0; }
.wna2-flow__os { border-top: 1px solid var(--wna2-g-800); padding: clamp(40px, 7vw, 80px) 0; }
.wna2-flow__os .wna2-os { margin: 24px 0; max-width: 560px; }
.wna2-flow__os .wna2-kap--ende .wna2-btn { margin-top: 1rem; }

/* --- Reduced Motion: keine Intro-Animation, statische Endzustände ------- */
@media (prefers-reduced-motion: reduce) {
	.wna2-objekt, .wna2-hero__inner { animation: none !important; }
	.wna2-story { height: auto !important; }
	.wna2-buehne { display: none !important; }
	.wna2-flow { display: block !important; }
}

/* ==========================================================================
   0B.4B — Realistische Welt in der Bühne
   ========================================================================== */

/* --- Registrierte Plates (Kamera-Container, unter dem SVG) --------------- */
.wna2-welt { position: absolute; inset: 0; pointer-events: none; }
.wna2-welt__plate {
	position: absolute; overflow: hidden;
	/* weiche Ränder: die Welt taucht aus der Graphit-Bühne auf, kein Bildrechteck */
	--rs: calc(17% * var(--w-rand, 1)); --rv: calc(9% * var(--w-rand, 1)); --ru: calc(5% * var(--w-rand, 1));
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 var(--rs), #000 calc(100% - var(--rs)), transparent 100%), linear-gradient(to bottom, transparent 0%, #000 var(--rv), #000 calc(100% - var(--ru)), transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent 0%, #000 var(--rs), #000 calc(100% - var(--rs)), transparent 100%), linear-gradient(to bottom, transparent 0%, #000 var(--rv), #000 calc(100% - var(--ru)), transparent 100%);
	mask-composite: intersect;
}
.wna2-welt__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }
.wna2-welt__dim { position: absolute; inset: 0; background: var(--wna2-g-950); opacity: var(--w-dim, 0); }
.wna2-welt__plate--s { opacity: calc(var(--w-real, 1) * var(--w-s, 1)); }
.wna2-welt__img--winter { opacity: var(--w-e1, 0); }
/* Räumung breitet sich vom Eingang über Zuweg und Gehweg aus (weiche Maske statt Wischkante) */
.wna2-welt__img--geraeumt {
	opacity: min(1, var(--w-e2, 0) * 40);
	-webkit-mask-image: radial-gradient(ellipse 60% 75% at 50% 86%, #000 calc(var(--w-e2, 0) * 170% - 30%), transparent calc(var(--w-e2, 0) * 170%));
	mask-image: radial-gradient(ellipse 60% 75% at 50% 86%, #000 calc(var(--w-e2, 0) * 170% - 30%), transparent calc(var(--w-e2, 0) * 170%));
}
.wna2-welt__plate--p { opacity: var(--w-f, 0); }
/* Umsetzung wächst von unten (Gerüst), Ergebnis von links — beides weich */
.wna2-welt__img--umsetzung {
	opacity: min(1, var(--w-g, 0) * 40);
	-webkit-mask-image: linear-gradient(to top, #000 calc(var(--w-g, 0) * 130% - 30%), transparent calc(var(--w-g, 0) * 130%));
	mask-image: linear-gradient(to top, #000 calc(var(--w-g, 0) * 130% - 30%), transparent calc(var(--w-g, 0) * 130%));
}
.wna2-welt__img--ergebnis {
	opacity: min(1, var(--w-h, 0) * 40);
	-webkit-mask-image: linear-gradient(to right, #000 calc(var(--w-h, 0) * 130% - 30%), transparent calc(var(--w-h, 0) * 130%));
	mask-image: linear-gradient(to right, #000 calc(var(--w-h, 0) * 130% - 30%), transparent calc(var(--w-h, 0) * 130%));
}

/* Stapelung im Kamera-Container: Welt (Plates) < SVG (Linie, Aufmaß) < Nachweise */
.wna2-objekt--buehne { position: relative; z-index: 1; }
.wna2-nachweise { z-index: 2; }

/* Das Schema-Objekt wird zur Linie, sobald die reale Welt steht */
.wna2-objekt--buehne .wna2-o-bau,
.wna2-objekt--buehne .wna2-o-weg,
.wna2-objekt--buehne .wna2-o-boden { opacity: calc(var(--o-bau, 1) * (1 - 0.94 * var(--w-real, 1))); }
.wna2-objekt--buehne .wna2-o-linie { opacity: var(--o-s-linie, 1); }
.wna2-objekt--buehne :is(.wna2-o-garten, .wna2-o-bestand, .wna2-o-bau-licht, .wna2-o-aufmass, .wna2-o-geruest, .wna2-o-neu, .wna2-o-fertig,
	.wna2-o-himmel, .wna2-o-schnee, .wna2-o-schneedecke, .wna2-o-geraeumt, .wna2-o-raeumer, .wna2-o-streu, .wna2-o-linie-treppe, .wna2-o-linie-garten) { display: none; }
.wna2-objekt--flow :is(.wna2-o-p, .wna2-o-raeumlinie) { display: none; }

/* Projektobjekt: Aufmaß über dem Bestand, Kontur des Ergebnisses */
.wna2-o-p-fenster rect {
	--k: clamp(0, var(--o-p-fenster, 0) * 22 - var(--i, 0), 1);
	fill: none; stroke: var(--wna2-w-50); stroke-width: 1.6; stroke-dasharray: 1000; stroke-dashoffset: calc(1000 - 1000 * var(--k));
	filter: drop-shadow(0 0 2px rgba(14, 13, 12, 0.85));
}
.wna2-o-p-aufmass path { fill: none; stroke: var(--wna2-w-50); stroke-width: 1.6; stroke-dasharray: 1000; stroke-dashoffset: calc(1000 - 1000 * var(--o-aufmass, 0)); filter: drop-shadow(0 0 2px rgba(14, 13, 12, 0.85)); }
.wna2-o-p-aufmass text { fill: var(--wna2-w-50); font: 600 15px/1 var(--wna2-font); letter-spacing: 0.04em; opacity: var(--o-aufmass, 0); paint-order: stroke; stroke: rgba(14, 13, 12, 0.8); stroke-width: 3px; }
.wna2-o-p-aufmass .wna2-o-p-titel { fill: var(--wna2-o-400); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; }
.wna2-o-p-kontur { fill: none; stroke: var(--wna2-o-400); stroke-width: 3.5; stroke-linejoin: round; filter: drop-shadow(0 0 8px var(--wna2-o-glow)); stroke-dasharray: 1000; stroke-dashoffset: calc(1000 - 1000 * var(--o-fertig, 0)); }
/* Winterdienst: die Linie folgt der Räumung */
.wna2-o-raeumlinie { opacity: var(--o-raeum-a, 1); }
.wna2-o-raeumlinie path { fill: none; stroke: var(--wna2-o-400); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--wna2-o-glow)); stroke-dasharray: 1000; stroke-dashoffset: calc(1000 - 1000 * var(--o-raeum, 0)); }

/* Lesbarkeit der Kapitelkarten über hellen Bildern */
.wna2-scrim {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
/* Karte oben links (Winter): eigener Verlauf von oben links */
.wna2-scrim::before {
	content: ""; position: absolute; inset: 0; opacity: var(--scrim-oben, 0);
	background: linear-gradient(158deg, rgba(14, 13, 12, 0.86) 0%, rgba(14, 13, 12, 0.42) 28%, rgba(14, 13, 12, 0) 50%);
}
.wna2-buehne .wna2-scrim { opacity: 1; }
.wna2-scrim::after {
	content: ""; position: absolute; inset: 0; opacity: var(--scrim, 0);
	background: linear-gradient(22deg, rgba(14, 13, 12, 0.84) 0%, rgba(14, 13, 12, 0.46) 30%, rgba(14, 13, 12, 0) 58%);
}

/* --- Szenen (bildschirmfüllend, Portale) --------------------------------- */
.wna2-szenen { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wna2-szene { position: absolute; inset: 0; overflow: hidden; }
.wna2-szene__kb { position: absolute; inset: 0; will-change: transform; }
.wna2-szene__kb img, .wna2-szene__linien { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; object-fit: cover; }
.wna2-szene__scrim { position: absolute; inset: 0; background: linear-gradient(24deg, rgba(14, 13, 12, 0.82) 0%, rgba(14, 13, 12, 0.36) 32%, rgba(14, 13, 12, 0) 56%); }
.wna2-szene--b .wna2-szene__scrim { opacity: var(--t-a2, 0); }
.wna2-szene--c .wna2-szene__scrim { opacity: 0.35; }
.wna2-szene--d .wna2-szene__scrim { opacity: var(--t-a3, 0); }
.wna2-szene__scrim--oben { background: linear-gradient(204deg, rgba(14, 13, 12, 0.8) 0%, rgba(14, 13, 12, 0.32) 30%, rgba(14, 13, 12, 0) 54%); }

/* 0B.5 Kamerafahrt ins Gebäude (Bildfolge auf Canvas, bildschirmfüllend) */
.wna2-licht { position: absolute; inset: 0; background: radial-gradient(60% 70% at 55% 55%, #fffdf6 0%, #f6f1e6 55%, #efe7d6 100%); opacity: var(--sz-licht, 0); pointer-events: none; }
.wna2-fahrt { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wna2-eintritt { opacity: var(--sz-e, 0); }
.wna2-umrundung { opacity: var(--sz-u, 0); }
/* Treppenhaus: beginnt deckungsgleich mit dem letzten Bild der Fahrt, fährt später auf die Hintertür zu */
.wna2-szene--b .wna2-szene__kb { transform: translate(var(--b-tx, 0px), var(--b-ty, 0px)) scale(var(--b-k, 1)); transform-origin: 0 0; }
.wna2-szene--b { opacity: var(--sz-b-an, 0); }
.wna2-szene--b .wna2-szene__taetigkeit { opacity: var(--sz-bp, 0); }
/* Hausmeister-Moment: kurzer Blick nach oben ins 2. OG */
.wna2-szene--c { opacity: var(--sz-c, 0); }
.wna2-szene--c .wna2-szene__kb { transform: translate3d(0, calc((1 - var(--sz-c, 0)) * -7%), 0) scale(1.05); }
.wna2-szene--c .wna2-szene__taetigkeit { opacity: var(--sz-cp, 0); }
/* Garten: Match-Cut an der Hintertür — die Kamera fährt im Treppenhaus in die Tür,
   draußen beginnt der Garten vergrößert an derselben Tür (deckungsgleich) und zieht auf */
.wna2-szene--d { opacity: calc(var(--sz-d-an, 0) * var(--sz-d-ein, 0) * (1 - var(--sz-d-aus, 0))); }
.wna2-szene--d .wna2-szene__kb { transform: translate(var(--d-tx, 0px), var(--d-ty, 0px)) scale(var(--d-k, 1)); transform-origin: 0 0; }
.wna2-szene--d .wna2-szene__taetigkeit { opacity: var(--sz-dp, 0); }

/* WNA-Linie innerhalb der Szenen (Plate-Koordinaten aus dem 3D-Modell) */
.wna2-sz-linie { fill: none; stroke: var(--wna2-o-400); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px var(--wna2-o-glow)); stroke-dasharray: 1000; }
.wna2-sz-linie--b { stroke-dashoffset: calc(1000 - 1000 * var(--sz-linie-b, 0)); }
.wna2-sz-linie--d { stroke-dashoffset: calc(1000 - 1000 * var(--sz-linie-d, 0)); }
.wna2-sz-punkt { fill: var(--wna2-o-400); opacity: var(--sz-chip, 0); filter: drop-shadow(0 0 8px var(--wna2-o-400)); }
.wna2-sz-ring { fill: none; stroke: var(--wna2-o-400); stroke-width: 3; opacity: calc(var(--sz-chip, 0) * (1 - var(--sz-cp, 0) * 0.6)); transform-box: fill-box; transform-origin: center; transform: scale(calc(1 + var(--sz-cp, 0) * 3)); }
.wna2-chip {
	position: absolute; right: calc(var(--wna2-gutter) + 3vw); top: 40vh; display: grid; gap: 4px; padding: 12px 18px 12px 36px;
	background: rgba(14, 13, 12, 0.8); border: 1px solid rgba(255, 163, 95, 0.55); border-radius: 6px; color: var(--wna2-w-50);
	font-size: 0.9375rem; font-weight: 600; opacity: var(--sz-chip, 0); transform: translate3d(0, calc((1 - var(--sz-chip, 0)) * 14px), 0);
}
.wna2-chip i { position: absolute; left: 15px; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--wna2-o-400); box-shadow: 0 0 10px var(--wna2-o-glow); }
.wna2-chip em { font-style: normal; font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--wna2-g-300); }

/* --- 0B.6 Merge: reale Arbeit wird zu strukturierter Information --------- */
.wna2-merge { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.wna2-merge__linien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wna2-mg-l { fill: none; stroke: var(--wna2-o-400); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1000; filter: drop-shadow(0 0 5px var(--wna2-o-glow)); }
.wna2-mg-l--za, .wna2-mg-l--zb { stroke-dashoffset: calc(1000 - 1000 * var(--mg-linien-z, 0)); opacity: calc(1 - var(--mg-aus, 0)); }
.wna2-mg-l--os { stroke-dashoffset: calc(1000 - 1000 * var(--mg-os-linie, 0)); }
.wna2-mg-knoten {
	position: absolute; left: 50%; top: 90.5%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
	background: var(--wna2-o-400); box-shadow: 0 0 18px var(--wna2-o-400); opacity: var(--mg-knoten, 0);
	transform: scale(calc(0.6 + 0.6 * var(--mg-knoten, 0)));
}
.wna2-mg-gruppe { position: absolute; top: 30%; width: 23%; }
.wna2-mg-gruppe--a {
	left: 8%; opacity: calc(min(1, var(--mg-a, 0) * 12) * (1 - var(--mg-sammeln, 0)));
	transform: translate3d(calc(var(--mg-sammeln, 0) * 30.5vw), calc(var(--mg-sammeln, 0) * 32vh), 0) scale(calc(1 - 0.8 * var(--mg-sammeln, 0)));
	transform-origin: 50% 100%;
}
.wna2-mg-gruppe--b {
	left: 69%; opacity: calc(min(1, var(--mg-b, 0) * 12) * (1 - var(--mg-sammeln, 0)));
	transform: translate3d(calc(var(--mg-sammeln, 0) * -30.5vw), calc(var(--mg-sammeln, 0) * 32vh), 0) scale(calc(1 - 0.8 * var(--mg-sammeln, 0)));
	transform-origin: 50% 100%;
}
.wna2-mg-foto { margin: 0; position: relative; }
.wna2-mg-foto img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; max-width: none; object-fit: cover; border-radius: 4px; }
.wna2-mg-foto figcaption { position: absolute; left: 10px; top: 10px; padding: 3px 8px; border-radius: 3px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wna2-g-950); background: var(--wna2-o-400); }
.wna2-mg-foto--a {
	transform: translate(var(--ma-tx, 0px), var(--ma-ty, 0px)) scale(var(--ma-s, 1)); transform-origin: 0 0;
	box-shadow: 0 0 0 calc(2px * var(--mg-a, 0)) rgba(255, 163, 95, var(--mg-a, 0)), 0 0 22px rgba(255, 145, 77, calc(0.35 * var(--mg-a, 0))), 0 2vh 5vh rgba(0, 0, 0, calc(0.45 * var(--mg-a, 0)));
	border-radius: 3px;
}
.wna2-mg-foto--b {
	transform: translate(var(--mb-tx, 0px), var(--mb-ty, 0px)) scale(var(--mb-s, 1)); transform-origin: 0 0;
	box-shadow: 0 0 0 calc(2px * var(--mg-b, 0)) rgba(255, 163, 95, var(--mg-b, 0)), 0 0 22px rgba(255, 145, 77, calc(0.35 * var(--mg-b, 0))), 0 2vh 5vh rgba(0, 0, 0, calc(0.45 * var(--mg-b, 0)));
	border-radius: 3px;
}
.wna2-mg-foto--b figcaption { opacity: var(--mg-b, 0); }
.wna2-mg-daten { position: relative; display: grid; gap: 0.9vh; margin: 2.2vh 0 0; padding-left: 22px; }
.wna2-mg-daten::before { content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 2px; background: var(--wna2-o-400); transform-origin: 50% 0; box-shadow: 0 0 8px var(--wna2-o-glow); }
.wna2-mg-gruppe--a .wna2-mg-daten::before { transform: scaleY(var(--mg-a-daten, 0)); }
.wna2-mg-gruppe--b .wna2-mg-daten::before { transform: scaleY(var(--mg-b-daten, 0)); }
.wna2-mg-daten > div { position: relative; display: block; line-height: 1.35; }
.wna2-mg-daten > div::before { content: ""; position: absolute; left: -22px; top: 0.45em; width: 10px; height: 10px; border-radius: 50%; background: var(--wna2-o-400); }
.wna2-mg-gruppe--a .wna2-mg-daten > div { --k: clamp(0, var(--mg-a-daten, 0) * 5 - var(--i, 0), 1); opacity: var(--k); transform: translate3d(calc((1 - var(--k)) * 14px), 0, 0); }
.wna2-mg-gruppe--b .wna2-mg-daten > div { --k: clamp(0, var(--mg-b-daten, 0) * 3 - var(--i, 0), 1); opacity: var(--k); transform: translate3d(calc((1 - var(--k)) * 14px), 0, 0); }
.wna2-mg-daten dt { display: inline; margin-right: 0.6em; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wna2-g-400); font-weight: 600; }
.wna2-mg-daten dd { display: inline; margin: 0; font-size: 1.0625rem; font-weight: 500; color: var(--wna2-w-50); text-shadow: 0 1px 14px rgba(14, 13, 12, 0.95); }
.wna2-mg-daten dd.wna2-mg-ok { font-weight: 600; color: #a5d8b2; }

/* --- 0B.6 Winter: Wetter kippt, Status nach der Räumung ------------------- */
.wna2-schnee { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--w-schnee, 0); pointer-events: none; }
.wna2-schnee circle { fill: #eef2f6; }
.wna2-schnee__nah { opacity: 0.75; transform: translate3d(0, calc(var(--w-schnee-y, 0) * 100%), 0); }
.wna2-schnee__fern { opacity: 0.5; transform: translate3d(0, calc(var(--w-schnee-y, 0) * 55%), 0); }
.wna2-chip--winter { top: auto; bottom: 16vh; opacity: var(--w-chip, 0); transform: translate3d(0, calc((1 - var(--w-chip, 0)) * 14px), 0); }

/* --- WNA OS: der Einsatz wird zum Datensatz ------------------------------ */
.wna2-os__zeilen li { display: grid; grid-template-columns: 9.4em minmax(0, 1fr); align-items: center; gap: 14px; font-size: 1.125rem; padding: 2px 8px; margin-left: -8px; border-radius: 4px; }
/* Einrasten: jede Zeile leuchtet beim Ankommen kurz auf und setzt sich */
.wna2-os-buehne .wna2-os__zeilen li {
	--e: clamp(0, var(--os-zeilen, 1) * 9 - var(--i, 0), 1);
	background: rgba(255, 163, 95, calc(0.9 * var(--e) * (1 - var(--e))));
	box-shadow: inset 3px 0 0 rgba(255, 163, 95, calc(3.6 * var(--e) * (1 - var(--e))));
}
.wna2-os-buehne .wna2-os { padding: 22px 26px 22px 50px; box-shadow: 0 2.4vh 6vh rgba(0, 0, 0, 0.45); }
.wna2-os-buehne .wna2-os__foto {
	width: 132px; height: 88px; transform-origin: 0 50%;
	--r: clamp(0, var(--os-zeilen, 1) * 9, 1);
	transform: scale(calc(1 + 0.55 * (1 - var(--r))));
	box-shadow: 0 0 0 2px rgba(255, 163, 95, calc(1 - var(--r) * 0.7)), 0 0 18px rgba(255, 145, 77, calc(0.6 * (1 - var(--r))));
}
.wna2-os-buehne .wna2-os__vn img { max-height: min(104px, 11vh); }
/* Finale: Schlussaussage klarer */
.wna2-buehne .wna2-kap--ende .wna2-kap__titel { font-size: clamp(2rem, 1.2rem + 2.8vw, 3.8rem); }
.wna2-os__label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wna2-g-400); font-weight: 600; }
.wna2-os__wert { font-weight: 600; color: var(--wna2-w-50); }
.wna2-os__status { justify-self: start; padding: 1px 10px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; color: #a5d8b2; background: rgba(140, 196, 154, 0.14); border: 1px solid rgba(140, 196, 154, 0.5); }
.wna2-os__foto { width: 96px; height: 64px; object-fit: cover; border-radius: 4px; }
.wna2-os__vn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wna2-os__vn figure { margin: 0; }
.wna2-os__vn img { width: 100%; height: auto; aspect-ratio: 3 / 2; max-height: min(86px, 9.5vh); object-fit: cover; border-radius: 4px; }
.wna2-os__vn figcaption { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wna2-g-400); margin-top: 3px; }
.wna2-os__chronik { display: flex; flex-wrap: wrap; gap: 5px 6px; }
.wna2-os__chronik span { padding: 1px 8px; border: 1px solid var(--wna2-g-600); border-radius: 4px; font-size: 0.75rem; color: var(--wna2-g-200); }
.wna2-os__chronik b { padding: 1px 8px; border-radius: 4px; font-size: 0.75rem; background: var(--wna2-o-400); color: var(--wna2-g-950); }