@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/hanken-grotesk-400.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/hanken-grotesk-500.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/hanken-grotesk-700.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/hanken-grotesk-800.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-500.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/jetbrains-mono-700.woff2) format("woff2")}
/* ==========================================================================
Der Weg zur KI-Kanzlei · Stil "Leitstand"
Tag = Creme/Warmweiß, Orange, Waldgrün. Nacht = Marine-Violett-Schwarz, Orange.
Farben nur über Tokens. Nacht-Block wird vom Build zweimal eingesetzt.
========================================================================== */
:root{
--bg:#f8f2e4;--bg2:#f0e7d2;--surface:#fffbf1;--surface2:#f3ead6;
--ink:#1d1810;--ink2:#4a4030;--mute:#6b5f4b;
--line:rgba(29,24,16,.16);--line2:rgba(29,24,16,.08);
--accent:#e8870a;--accent-text:#a84a00;--accent-ink:#1d0f00;--accent-deep:#b3620a;
--gold:#f3b13a;--green:#2f7d32;--on-green:#fff;--forest:#173d27;--on-forest:#f6efdd;--red:#c43b24;
--glass:rgba(255,251,241,.9);--glass-brd:rgba(29,24,16,.12);
--shadow:0 26px 50px -30px rgba(90,56,10,.5);
--edge:rgba(255,160,40,.95);
--bezel:#2b2417;--bezel-ring:rgba(0,0,0,.28);
--f:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--m:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--gut:clamp(16px,4vw,64px);--hdr:66px;--r:22px;--e:cubic-bezier(.22,.7,.2,1);
color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b0a15;--bg2:#12102a;--surface:#171532;--surface2:#1f1c3f;
--ink:#f4eee3;--ink2:#cdc5d8;--mute:#9d95b2;
--line:rgba(244,238,227,.2);--line2:rgba(244,238,227,.09);
--accent:#ff9a4a;--accent-text:#ffad66;--accent-ink:#1b0d00;--accent-deep:#c46a1e;
--gold:#ffc266;--green:#5fd35a;--on-green:#08210a;--forest:#0e2a24;--on-forest:#f6efdd;--red:#ff7360;
--glass:rgba(18,16,42,.86);--glass-brd:rgba(244,238,227,.14);
--shadow:0 26px 50px -30px rgba(0,0,0,.85);
--edge:rgba(255,170,70,.95);
--bezel:#07060d;--bezel-ring:rgba(244,238,227,.2);
color-scheme:dark;}}
:root[data-theme="dark"]{--bg:#0b0a15;--bg2:#12102a;--surface:#171532;--surface2:#1f1c3f;
--ink:#f4eee3;--ink2:#cdc5d8;--mute:#9d95b2;
--line:rgba(244,238,227,.2);--line2:rgba(244,238,227,.09);
--accent:#ff9a4a;--accent-text:#ffad66;--accent-ink:#1b0d00;--accent-deep:#c46a1e;
--gold:#ffc266;--green:#5fd35a;--on-green:#08210a;--forest:#0e2a24;--on-forest:#f6efdd;--red:#ff7360;
--glass:rgba(18,16,42,.86);--glass-brd:rgba(244,238,227,.14);
--shadow:0 26px 50px -30px rgba(0,0,0,.85);
--edge:rgba(255,170,70,.95);
--bezel:#07060d;--bezel-ring:rgba(244,238,227,.2);
color-scheme:dark;}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 14px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 clamp(1rem,.95rem + .2vw,1.1rem)/1.6 var(--f);-webkit-font-smoothing:antialiased;overflow-x:clip;min-width:320px}
img,svg,canvas{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--surface);color:var(--ink);padding:10px 14px;border-radius:12px;box-shadow:var(--shadow);transition:top .2s}
.skip:focus{top:calc(8px + env(safe-area-inset-top,0px))}
.wrap{width:min(1240px,100% - 2*var(--gut));margin-inline:auto}
.lab{font:700 .74rem/1.35 var(--m);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.mk{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--gold) 62%,transparent) 62% 92%,transparent 92%);padding-inline:.05em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* ---- Bühne, Teile, Tag/Nacht ----------------------------------------------------
Tag und Nacht haben eigene Bühne und eigene Fassungen der Teile (deckungsgleich). Die Nachtfassung liegt über der
Tagfassung und blendet ein. Teile ohne Nachtbild bekommen den Filter aus scene.json (--nf). Ohne Nachtbilder der Bühne
gilt der einfache dunkle Schleier (.lt-n). */
.box{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:var(--ar,1.5);background:var(--surface2);container-type:inline-size}
.stg-im{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;user-select:none}
.stg-im.n{opacity:0;transition:opacity 1.2s ease}
.fgl{pointer-events:none}
:root[data-mode="night"] .stg-im.n,:root[data-mode="night"] .pz .n{opacity:1}
@media (prefers-color-scheme:dark){:root:not([data-mode]) .stg-im.n,:root:not([data-mode]) .pz .n{opacity:1}}
/* Teile mit Nachtfassung: Tag blendet mit 1-t aus, Nacht mit t ein (gleiche Dauer, gleiche Kurve). Danach steht der Tag auf 0,
der Rand der Tagfigur scheint nicht durch. Die Bühne ist deckend und braucht das nicht. */
.pz.has-n .d{transition:opacity 1.2s ease}
:root[data-mode="night"] .pz.has-n .d{opacity:0}
@media (prefers-color-scheme:dark){:root:not([data-mode]) .pz.has-n .d{opacity:0}}
.stg-ph{display:flex;align-items:flex-start;padding:2.2% 2.4%;background:linear-gradient(180deg,#fbf4e0 0 66%,#ecdfc3 66% 100%);color:#3a2f1c}
.stg-ph b{font:700 clamp(10px,1.1vw,15px) var(--m);letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.sps{position:absolute;inset:0}
.sp{position:absolute;pointer-events:none}
.sp{transform-origin:var(--po,50% 100%)}
.spi{position:relative;display:block;width:100%;height:100%;transform-origin:var(--po,50% 100%)}
.scn.on .spi{will-change:transform,opacity}
.spk{position:relative;display:block;width:100%;height:100%;transform-origin:var(--po,50% 100%)}
.pz{position:absolute;display:block;line-height:0}
.pz.flip{transform:scaleX(-1)}
.pz img{display:block;width:100%;height:auto;max-width:none;user-select:none}
.pz .n{position:absolute;left:0;top:0;opacity:0;transition:opacity 1.2s ease}
/* Teile ohne Nachtbild: Filter aus scene.json (nightFilter), tagsüber nur der immer aktive filter */
.sp[data-f] .pz img{filter:var(--f)}
.sp[data-nf] .pz img{transition:filter 1.2s ease}
:root[data-mode="night"] .sp[data-nf] .pz img{filter:var(--nf)}
:root[data-mode="night"] .sp[data-nf][data-f] .pz img{filter:var(--f) var(--nf)}
@media (prefers-color-scheme:dark){:root:not([data-mode]) .sp[data-nf] .pz img{filter:var(--nf)}:root:not([data-mode]) .sp[data-nf][data-f] .pz img{filter:var(--f) var(--nf)}}
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;aspect-ratio:var(--ar,1);border:max(2px,.18vw) solid #1d1b19;border-radius:7px;background:hsl(var(--h,30) 70% 84%);color:#1d1b19;text-align:center;padding:2px;overflow:hidden;line-height:1.2}
.ph b{font:700 clamp(8px,.95vw,14px)/1.15 var(--m);letter-spacing:.02em;text-wrap:balance}
.ph small{font:500 clamp(7px,.7vw,11px)/1 var(--m);opacity:.65}
/* Effekt-Teile aus Code: Ring, Leuchtfleck, Uhrzeiger */
.sp.ring .spk i{display:block;width:100%;height:100%;border-radius:50%;border:max(2px,.28cqw) solid var(--c,#fff3a0);box-shadow:0 0 1.9cqw var(--c,#fff3a0),inset 0 0 1.2cqw var(--c,#fff3a0)}
.sp.glow .spk i{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,var(--c,rgba(255,226,140,.95)) 0,color-mix(in srgb,var(--c,rgba(255,226,140,.95)) 35%,transparent) 45%,transparent 70%);mix-blend-mode:screen}
.sp.hand .spk i{display:block;width:100%;height:100%;border-radius:999px;background:var(--c,#1d1b19)}
.sp.nightonly{display:none}
:root[data-mode="night"] .sp.nightonly{display:block}
@media (prefers-color-scheme:dark){:root:not([data-mode]) .sp.nightonly{display:block}}
/* Nacht-Effekte (nightFx): Funkeln, Wasserglanz, leuchtender Bildschirm */
.nxs{position:absolute;inset:0;pointer-events:none}
.nx{position:absolute;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
:root[data-mode="night"] .nx{opacity:1}
@media (prefers-color-scheme:dark){:root:not([data-mode]) .nx{opacity:1}}
.nx.stars,.nx.shim{z-index:5}
.nx.pulse{z-index:45;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(var(--c,120,220,255),.55) 0,rgba(var(--c,120,220,255),0) 68%);mix-blend-mode:screen;animation:kwp var(--pd,2.8s) ease-in-out infinite}
@keyframes kwp{0%,100%{filter:brightness(.75)}50%{filter:brightness(1.25)}}
.nx.stars i{position:absolute;width:.36cqw;height:.36cqw;min-width:3px;min-height:3px;border-radius:50%;background:#fff6c8;box-shadow:0 0 .55cqw #fff6c8;opacity:.2;animation:kwt 2.6s ease-in-out infinite backwards}
@keyframes kwt{0%,100%{opacity:.2}50%{opacity:1}}
.nx.shim i{position:absolute;height:max(2px,.14cqw);border-radius:2px;background:#ffe9a6;opacity:0;animation:kwr 3.4s ease-in-out infinite backwards}
@keyframes kwr{0%{opacity:0;transform:translateX(-.4cqw)}40%{opacity:.45}100%{opacity:0;transform:translateX(.7cqw)}}
.nx.stars i,.nx.shim i,.nx.pulse{animation-play-state:paused}
:root[data-mode="night"] .nx.stars i,:root[data-mode="night"] .nx.shim i,:root[data-mode="night"] .nx.pulse{animation-play-state:running}
@media (prefers-color-scheme:dark){:root:not([data-mode]) .nx.stars i,:root:not([data-mode]) .nx.shim i,:root:not([data-mode]) .nx.pulse{animation-play-state:running}}
/* Schleier ohne Nachtbild */
.lt{position:absolute;inset:0;z-index:100;pointer-events:none;opacity:0;background:var(--tint,transparent);transition:opacity 1.2s ease}
.lt-n{mix-blend-mode:multiply}
.lt-d{mix-blend-mode:soft-light}
:root[data-mode="night"] .lt-n{opacity:var(--o,.6)}
:root[data-mode="day"] .lt-d{opacity:var(--o,.14)}
@media (prefers-color-scheme:dark){:root:not([data-mode]) .lt-n{opacity:var(--o,.6)}}
.gls{position:absolute;inset:0;z-index:101;pointer-events:none}
.gl{position:absolute;width:calc(var(--r,10%) * 2);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,var(--c,#ffd27a) 0,color-mix(in srgb,var(--c,#ffd27a) 40%,transparent) 36%,transparent 70%);mix-blend-mode:screen;opacity:var(--od,0);transition:opacity 1.2s ease}
:root[data-mode="night"] .gl{opacity:var(--on,.9)}
@media (prefers-color-scheme:dark){:root:not([data-mode]) .gl{opacity:var(--on,.9)}}
/* Vorschaukarten und Hero-Hintergrund */
.tn{position:relative;overflow:hidden;background:var(--surface2);isolation:isolate}
.tn>img,.tn>noscript>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tn>img.n{opacity:0;transition:opacity 1.2s ease}
:root[data-mode="night"] .tn>img.n{opacity:1}
@media (prefers-color-scheme:dark){:root:not([data-mode]) .tn>img.n{opacity:1}}
.tn.tint::after{content:"";position:absolute;inset:0;pointer-events:none;background:#3b4aa6;mix-blend-mode:multiply;opacity:0;transition:opacity 1.2s ease}
:root[data-mode="night"] .tn.tint::after{opacity:.6}
@media (prefers-color-scheme:dark){:root:not([data-mode]) .tn.tint::after{opacity:.6}}
.mini{position:absolute;inset:0;display:block;background:linear-gradient(180deg,#f7efd9 0 64%,#e9dcc0 64% 100%)}
.mini i{position:absolute;display:block;border:1.5px solid #1d1b19;border-radius:3px;background:hsl(30 70% 84%)}
/* Qualitätsstufe lite (Handy, schwache CPU, zu niedrige Bildrate): keine Blend-Modi, keine Filter, weniger Schleifen */
.lite .sp .pz img{filter:none!important}
.lite .nx.pulse,.lite .sp.glow .spk i,.lite .gl,.lite .lt-n,.lite .lt-d{mix-blend-mode:normal}
.lite .nx.pulse{animation:none;opacity:.6}
.lite .nx.stars i:nth-child(n+5),.lite .nx.shim i:nth-child(n+3){display:none}
.lite .chap-in,.lite .stg,.lite .hint{-webkit-backdrop-filter:none;backdrop-filter:none}
.lite .sp.ring .spk i{box-shadow:none}
/* ---- Kopfleiste ---------------------------------------------------------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid var(--line2)}
.top-in{display:flex;align-items:center;gap:14px;height:var(--hdr);width:min(1240px,100% - 2*var(--gut));margin-inline:auto}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:-.025em;text-decoration:none;white-space:nowrap}
.brand i{width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd08a,var(--accent) 60%,var(--accent-deep));box-shadow:0 2px 0 var(--accent-deep)}
.brand span{color:var(--mute);font-weight:500}
.brandbox{display:grid;gap:3px;justify-items:start;align-content:center}
.proto{font:700 .54rem/1 var(--m);letter-spacing:.09em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line);padding:3px 7px;border-radius:999px;white-space:nowrap}
.top nav{margin-left:auto}
.top nav ul{display:flex;gap:2px}
.top nav a{display:block;white-space:nowrap;padding:8px clamp(6px,.65vw,11px);border-radius:12px;text-decoration:none;font-weight:700;font-size:.92rem;color:var(--ink2);transition:background .2s,color .2s}
.top nav a:hover{background:var(--line2);color:var(--ink)}
/* Die Zeile zur Berliner Sonne ist reiner Text ohne Bedienelement. Tag und Nacht folgen automatisch. */
.sunline{flex:none;margin:0;max-width:230px;font:500 .72rem/1.3 var(--f);color:var(--mute);text-align:right}
.sunline .sl-pre,.sunline .sl-ev{display:block}
.sunline:empty,.sunline:not(:has(.sl-ev:not(:empty))){display:none}
@media(max-width:1279px){.top nav{display:none}.top-in{gap:10px}.top .sunline{margin-left:auto}}
@media(max-width:700px){:root{--hdr:54px}.proto{display:none}.top .btn{padding-inline:1em;font-size:.88rem;min-height:42px}.top .lg{display:none}.sunline .sl-pre{display:none}.sunline{max-width:170px;font-size:.7rem}}
@media(max-width:400px){.brand span{display:none}.top-in{gap:8px}.top .btn{padding-inline:.8em;font-size:.82rem}.sunline{max-width:130px;font-size:.66rem}}
/* Auto/Tag/Nacht: nur in der Prüfleiste (Prüf-Ansicht und Prototyp), nie in der Besucheransicht */
.seg{display:inline-flex;padding:3px;gap:2px;border-radius:14px;background:#1b1a2b;box-shadow:inset 0 0 0 1.5px #5b566e}
.seg button{position:relative;min-height:28px;min-width:50px;padding:0 11px;border:0;border-radius:11px;cursor:pointer;background:transparent;color:#cfc7b6;font:700 .74rem/1 var(--m);letter-spacing:.03em;transition:background .25s,color .25s,box-shadow .25s}
.seg button::after{content:"";position:absolute;inset:-8px -1px}
.seg button:hover{background:rgba(255,255,255,.1);color:#fff}
.seg button[aria-pressed="true"]{color:#1b0d00;background:linear-gradient(180deg,#ffc27a,#ff9a4a);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),0 2px 0 #b3620a}
/* ---- Prototyp-Leiste: Werkzeug für Ahmed, nicht Teil der Seite ------------ */
.protostrip{position:relative;z-index:70;background:#0d0c14;color:#efe8d8}
.protobar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;width:min(1240px,100% - 2*var(--gut));margin-inline:auto;padding:8px 0;font:500 .74rem/1.2 var(--m)}
.pb-t{margin:0;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#ffb560;white-space:nowrap}
.pb-sim{display:flex;align-items:center;gap:12px;flex:1 1 360px;min-width:0}
.pb-l{white-space:nowrap;color:#cfc7b6}
.sim-track{position:relative;flex:1 1 180px;min-width:140px;padding-top:15px;padding-bottom:2px}
.sim-track input{width:100%;margin:0;accent-color:#ff9a4a;height:22px;background:transparent}
.sim-marks{position:absolute;left:8px;right:8px;top:0;height:15px;pointer-events:none}
.sim-marks span{position:absolute;top:0;transform:translateX(-50%);display:grid;justify-items:center;font:700 .6rem/1 var(--m);letter-spacing:.04em;color:#ffd08a;white-space:nowrap}
.sim-marks i{display:block;width:2px;height:7px;background:#ffd08a;border-radius:1px}
.sim-marks b{font-weight:700;margin-top:1px}
.sim-marks em{display:none}
.sim-marks .mk-set{color:#9fb4ff}.sim-marks .mk-set i{background:#9fb4ff}
.pb-o{min-width:5.2em;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.pb-b{border:0;border-radius:9px;padding:7px 12px;cursor:pointer;font:700 .72rem var(--m);letter-spacing:.05em;color:#1b0d00;background:linear-gradient(180deg,#ffc27a,#ff9a4a);box-shadow:0 2px 0 #b3620a}
.pb-b:active{transform:translateY(2px);box-shadow:none}
.pb-mode{display:flex;align-items:center;gap:10px}
.pb-view{display:flex;align-items:center;gap:10px;margin-left:auto}
.pb-sw{position:relative;width:46px;height:26px;border:0;border-radius:999px;cursor:pointer;background:#3a3748;box-shadow:inset 0 0 0 1.5px #5b566e;transition:background .2s}
.pb-sw i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#efe8d8;transition:transform .25s var(--e)}
.pb-sw[aria-checked="true"]{background:#ff9a4a}
.pb-sw[aria-checked="true"] i{transform:translateX(20px);background:#1b0d00}
.protoline{display:flex;align-items:center;gap:14px;padding:5px var(--gut) 6px;font:500 .64rem/1 var(--m);letter-spacing:.08em;text-transform:uppercase;color:#a79f90;background:#0d0c14}
.protoline::before,.protoline::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,#5b566e,transparent)}
.protoline span{white-space:nowrap}
:root[data-view="visitor"] .proto-only{display:none!important}
@media(max-width:700px){
.protobar{gap:6px 14px}
.pb-t{flex-basis:100%}
.pb-sim{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"l o b" "t t t";gap:4px 10px;flex:1 1 100%}
.pb-sim .pb-l{grid-area:l;white-space:normal}
.pb-sim .pb-o{grid-area:o;min-width:0}
.pb-sim .pb-b{grid-area:b}
.pb-sim .sim-track{grid-area:t;min-width:0}
.pb-mode{flex:1 1 100%;justify-content:space-between}
.pb-view{margin-left:0;flex:1 1 100%;justify-content:space-between}
.protoline span{white-space:normal;text-align:center}
}
/* ---- Knöpfe: haptisch, weich ---------------------------------------------- */
.btn{white-space:nowrap;--b:var(--accent);--bd:var(--accent-deep);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:50px;padding:.8em 1.4em;border:0;border-radius:16px;cursor:pointer;text-decoration:none;font:800 1rem/1.15 var(--f);letter-spacing:-.01em;color:var(--accent-ink);background:linear-gradient(180deg,color-mix(in srgb,var(--b) 78%,#fff) 0,var(--b) 48%,color-mix(in srgb,var(--b) 90%,#000) 100%);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6),inset 0 -2px 4px rgba(0,0,0,.14),0 4px 0 var(--bd),0 14px 20px -12px rgba(0,0,0,.5);transition:transform .14s var(--e),box-shadow .14s var(--e),filter .2s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
.btn:active{transform:translateY(3px);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 -2px 4px rgba(0,0,0,.14),0 1px 0 var(--bd),0 6px 10px -8px rgba(0,0,0,.5)}
.btn.ghost{color:var(--ink);background:linear-gradient(180deg,var(--surface),var(--surface2));box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 0 0 1.5px var(--line),0 3px 0 var(--line),0 12px 18px -14px rgba(0,0,0,.45)}
.btn.ghost:active{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4),inset 0 0 0 1.5px var(--line),0 1px 0 var(--line)}
.btn.forest{--b:var(--forest);--bd:color-mix(in srgb,var(--forest) 60%,#000);color:var(--on-forest)}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn .dur{font:700 .72rem var(--m);letter-spacing:.06em;opacity:.78;padding:.2em .5em;border-radius:8px;background:rgba(0,0,0,.12)}
.btn.lock{cursor:default;pointer-events:none;color:var(--mute);background:transparent;box-shadow:none;outline:2px dashed var(--line);outline-offset:-2px;font-weight:700;transform:none;filter:none}
.btn.lock .dur{background:transparent}
@media(max-width:560px){.res .btn,.final .btn,.btn.lock{white-space:normal;text-align:center;max-width:100%;line-height:1.25}}
.btn-sm{min-height:44px;padding:.62em 1.1em;font-size:.93rem;border-radius:14px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px 16px;align-items:center}
/* ---- Erster Bildschirm ----------------------------------------------------- */
.hero{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(26px,5.2vh,68px) clamp(30px,5vh,64px)}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-bg .hb{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.hero-bg .hb.on{opacity:1}
.hero-bg .tn{position:absolute;inset:0;aspect-ratio:auto;max-height:none;border-radius:0;transform:scale(1.04);animation:kb 22s ease-in-out infinite alternate}
.hero-bg .num,.hero-bg .mini{display:none}
@keyframes kb{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-2.2%,-1%,0)}}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0,color-mix(in srgb,var(--bg) 94%,transparent) 34%,color-mix(in srgb,var(--bg) 78%,transparent) 62%,color-mix(in srgb,var(--bg) 66%,transparent) 100%),linear-gradient(180deg,transparent 55%,var(--bg) 100%)}
.hero-copy{max-width:56rem}
.hero h1{font-size:clamp(2.15rem,2.2vw + 1.3rem + 1.2vh,4.35rem);line-height:1.02;font-weight:800;letter-spacing:-.04em;margin:14px 0 clamp(12px,2vh,22px);text-wrap:balance}
.hero .lede{font-size:clamp(1.02rem,.5vw + .9rem,1.24rem);color:var(--ink2);max-width:40em;line-height:1.55}
.hero .cta-row{margin-top:clamp(18px,3vh,30px)}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:clamp(22px,4.2vh,48px);padding-bottom:50px;counter-reset:st}
.step{--lift:calc((4 - var(--i)) * 12px);translate:0 var(--lift)}
.step-a{position:relative;display:flex;flex-direction:column;height:100%;padding:8px 8px 15px;border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);text-decoration:none;transition:border-color .3s,transform .4s var(--e),box-shadow .3s}
.step-a .thumb{position:relative;aspect-ratio:var(--ar,1.5);max-height:136px;width:100%;border-radius:15px;margin-bottom:10px}
.step-a .thumb>img,.step-a .thumb>.mini{transition:transform 1.2s var(--e)}
.step-a .num{position:absolute;left:9px;top:9px;z-index:2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 .95rem var(--f);color:var(--accent-ink);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 78%,#fff),var(--accent));box-shadow:0 2px 0 var(--accent-deep),0 6px 10px -4px rgba(0,0,0,.5)}
.step-a .k{padding:0 8px;font:700 .68rem var(--m);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.step-a .t{padding:2px 8px 0;font-weight:800;font-size:clamp(1.02rem,.4vw + .9rem,1.2rem);line-height:1.15;letter-spacing:-.02em}
.step-a .p{padding:6px 8px 0;font-size:.92rem;line-height:1.45;color:var(--ink2)}
.step-a:hover,.step.on .step-a{border-color:var(--accent);transform:translateY(-6px);box-shadow:0 30px 44px -28px rgba(0,0,0,.5),0 0 0 1px var(--accent)}
.step-a:hover .thumb>img,.step.on .thumb>img,.step-a:hover .thumb>.mini,.step.on .thumb>.mini{transform:scale(1.07)}
@media(max-width:1020px){
.steps{grid-template-columns:minmax(0,1fr);gap:10px;padding-bottom:0;margin-top:26px}
.step{translate:none}
.step-a{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-areas:"th k" "th t" "th p";gap:0 14px;align-items:start;padding:8px;height:auto}
.step-a .thumb{grid-area:th;width:112px;margin:0;aspect-ratio:var(--ar,1.5);max-height:none}
.step-a .k{grid-area:k;padding:2px 0 0}
.step-a .t{grid-area:t;padding:0}
.step-a .p{grid-area:p;padding:4px 0 0;font-size:.9rem}
.step-a:hover,.step.on .step-a{transform:none}
}
/* ---- Die Welt: Grundzustand ohne Skript = gestapelte Szenen + Textkarten --- */
.world{position:relative;background:var(--bg)}
.stick{position:relative;display:flex;flex-direction:column;gap:18px;padding:clamp(30px,5vw,60px) var(--gut)}
.cam,.cards{display:contents}
.scn{order:calc(var(--i) * 2);width:min(1100px,100%);margin-inline:auto}
.stg{order:calc(var(--i) * 2 + 1);width:min(1100px,100%);margin:0 auto clamp(18px,3vw,40px)}
.tilt{position:relative}
.box{border-radius:22px;box-shadow:var(--shadow)}
.ovl,.spr,.hss,.edge,.dim,.dust,.vig,.chap,.callout,.fcard,.live,.hint,.amb{display:none}
.stg{display:grid;gap:6px 24px;padding:clamp(16px,2.4vw,26px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.stg-n{font:800 clamp(2.4rem,5vw,4rem)/1 var(--f);letter-spacing:-.05em;color:var(--accent-text)}
.stg-k{font:700 .72rem var(--m);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.stg-name{font-size:clamp(1.5rem,1.6vw + 1rem,2.4rem);line-height:1.04;font-weight:800;letter-spacing:-.035em}
.stg-name .w{display:inline-block;white-space:nowrap}
.stg-name .c{display:inline-block}
.stg-plain{font-size:clamp(1.05rem,.5vw + .92rem,1.28rem);line-height:1.45;color:var(--ink);margin-top:6px;max-width:34em}
.stg-side{display:grid;gap:12px;align-content:start;font-size:.96rem}
.stg-side h4{font:700 .68rem var(--m);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:5px}
.stg-side ul{display:grid;gap:5px}
.stg-side li{position:relative;padding-left:16px;color:var(--ink2);line-height:1.4}
.stg-side li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.stg-side .keep{font-weight:700;color:var(--ink);line-height:1.4}
.hsl{margin-top:12px;display:grid;gap:8px;color:var(--ink2);font-size:.95rem}
.hsl strong{color:var(--ink)}
.hsl b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:800 .75rem var(--f);margin-right:4px}
html:not(.world-on) .chips{display:none}
.world-on .hsl{display:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border:0;border-radius:999px;cursor:pointer;text-align:left;font:700 .82rem/1.2 var(--f);color:var(--ink);background:linear-gradient(180deg,var(--surface),var(--surface2));box-shadow:inset 0 0 0 1.5px var(--line),0 2px 0 var(--line);transition:transform .14s var(--e),box-shadow .14s}
.chip:hover{box-shadow:inset 0 0 0 1.5px var(--accent),0 2px 0 var(--accent)}
.chip:active{transform:translateY(2px);box-shadow:inset 0 0 0 1.5px var(--accent)}
.chip[aria-expanded="true"]{box-shadow:inset 0 0 0 2px var(--accent),0 2px 0 var(--accent)}
.chip b{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:800 .8rem var(--f);color:var(--accent-ink);background:var(--accent)}
.more{margin-top:12px}
.more summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font:700 .8rem var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);padding:4px 0}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+";font-size:1.1rem;line-height:1}
.more[open] summary::after{content:"–"}
.more p{color:var(--ink2);margin-top:6px;max-width:44em;font-size:.97rem}
.more h4{font:700 .68rem var(--m);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:12px 0 5px}
.more ul{display:grid;gap:5px}
.more li{position:relative;padding-left:16px;color:var(--ink2);line-height:1.4;font-size:.95rem}
.more li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.more strong{display:block;color:var(--ink);margin-top:8px}
.stg-pts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-width:0}
.stg-pts .more{margin:0}
.stg-pts .more[open]{flex-basis:100%}
@media(min-width:861px){.stg{grid-template-columns:auto minmax(0,1.9fr) minmax(0,1fr);grid-template-areas:"n main side" "n pts pts";align-items:start}.stg-n{grid-area:n}.stg-main{grid-area:main}.stg-side{grid-area:side}.stg-pts{grid-area:pts}}
/* ---- Die Welt: angeheftet, nur wenn GSAP geladen ist (html.world-on) ------- */
.world-on .world{height:650vh}
.world-on .stick{--vh:100vh;--pad:clamp(18px,3vh,34px);--rail:56px;--bez:10px;--fr:18px;--gap:clamp(24px,3.2vw,56px);--side:max(var(--gut),calc((100vw - 1240px) / 2));
--fw:min(64vw,1060px,calc(100vw - 2 * (var(--side) + var(--bez)) - var(--gap) - 300px),calc((var(--vh) - var(--hdr) - 2 * var(--pad) - var(--rail) - 14px) * 1.5));
--blk:calc(var(--fw) / 1.5 + var(--rail) + 14px);
position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:var(--fw) minmax(0,1fr);grid-template-rows:auto auto;column-gap:var(--gap);row-gap:14px;align-content:center;
padding:calc(var(--hdr) + var(--pad)) calc(var(--side) + var(--bez)) var(--pad);overflow:hidden;isolation:isolate;background:radial-gradient(120% 100% at 70% 20%,var(--bg2),var(--bg))}
@supports (height:100svh){.world-on .stick{--vh:100svh}}
.world-on .cam{display:block;position:relative;grid-column:1;grid-row:1;width:100%;aspect-ratio:3/2;overflow:hidden;container-type:size;z-index:1;background:var(--bg2);border-radius:var(--fr);box-shadow:0 0 0 var(--bez) var(--bezel),0 0 0 calc(var(--bez) + 1px) var(--bezel-ring),0 34px 60px -26px rgba(40,24,4,.55)}
.world-on .scn{position:absolute;inset:0;order:0;width:auto;margin:0;visibility:hidden;clip-path:inset(0 0 0 100%)}
.world-on .scn[data-i="0"]{visibility:visible;clip-path:none}
.world-on .tilt{position:absolute;inset:0;will-change:transform}
.world-on .box{position:absolute;left:50%;top:calc(50% - var(--bias,0px));width:100%;aspect-ratio:var(--ar,1.5);border-radius:0;box-shadow:none;overflow:hidden;transform-origin:var(--fx,50%) var(--fy,50%);will-change:transform}
@supports (width:1cqw){.world-on .box{width:max(100cqw,calc(100cqh * var(--ar,1.5)))}}
.world-on .ovl,.world-on .hss{display:block;position:absolute;inset:0}
.world-on .ovl{width:100%;height:100%;pointer-events:none;overflow:visible;z-index:35}
.world-on .hss{pointer-events:none;z-index:200}
.world-on .dim{display:block;position:absolute;inset:0;background:#0a0814;opacity:0;pointer-events:none}
.world-on .edge{display:block;position:absolute;z-index:4;top:-6%;bottom:-6%;left:0;width:4px;margin-left:-2px;visibility:hidden;pointer-events:none;background:linear-gradient(180deg,transparent,var(--edge) 12%,var(--edge) 88%,transparent);box-shadow:0 0 22px 6px var(--edge),0 0 70px 24px color-mix(in srgb,var(--edge) 55%,transparent);mix-blend-mode:screen;will-change:transform}
.world-on .vig{display:block;position:absolute;inset:0;z-index:7;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 90% at 50% 38%,transparent 52%,rgba(8,6,16,.34) 100%),linear-gradient(180deg,rgba(8,6,16,.0) 62%,rgba(8,6,16,.28) 100%)}
:root[data-mode="day"] .world-on .vig{background:radial-gradient(120% 90% at 50% 38%,transparent 56%,rgba(60,38,10,.2) 100%),linear-gradient(180deg,rgba(60,38,10,0) 66%,rgba(60,38,10,.16) 100%)}
/* Hotspots, Pfade, Sprites */
.world-on .hss{opacity:0;visibility:hidden}
.hs{position:absolute;pointer-events:none;width:38px;height:38px;margin:0;padding:0;border:0;border-radius:50%;cursor:pointer;font:800 .95rem var(--f);color:var(--accent-ink);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 76%,#fff),var(--accent));box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 32%,transparent),0 3px 0 var(--accent-deep),0 12px 18px -8px rgba(0,0,0,.6);transform:translate(-50%,-50%)}
.hss.live .hs{pointer-events:auto}
.hs::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--accent);animation:hsp 2.6s ease-out infinite}
.hs[aria-expanded="true"]{background:var(--ink);color:var(--bg)}
@keyframes hsp{0%{transform:scale(.7);opacity:.95}100%{transform:scale(1.6);opacity:0}}
.ovl .rt{fill:none;stroke:var(--accent);stroke-linecap:round;stroke-linejoin:round;stroke-width:3.2;filter:drop-shadow(0 0 5px rgba(255,150,40,.9))}
:root[data-mode="night"] .ovl .rt{stroke:#ffb560}
.ovl .rt.soft{stroke-width:9;opacity:.2}
/* Kapitelleiste + Film-Knopf */
.world-on .dock{display:contents}
.world-on .chap{container:chap / inline-size;display:flex;position:static;grid-column:1;grid-row:2;width:100%;justify-content:stretch;align-items:center;gap:12px;pointer-events:none}
.world-on .chap-in{width:100%;justify-content:space-between}
.world-on .chap ol{flex:1 1 auto}
.world-on .chap li{flex:1 1 0}
.world-on .cb{width:100%;justify-content:center}
.chap-in{display:flex;align-items:stretch;gap:4px;padding:5px;border-radius:20px;background:var(--glass);border:1px solid var(--glass-brd);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:var(--shadow);pointer-events:auto;min-width:0}
.chap ol{display:flex;gap:2px;min-width:0}
.chap li{display:flex;min-width:0}
.cb{position:relative;display:flex;align-items:center;gap:8px;padding:9px 12px;border:0;border-radius:14px;background:transparent;cursor:pointer;font:700 .78rem/1 var(--m);letter-spacing:.04em;color:var(--ink2);white-space:nowrap;overflow:hidden;transition:background .25s,color .25s}
.cb i{font-style:normal;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--line2);font:800 .78rem var(--f);color:var(--ink)}
.cb:hover{background:var(--line2)}
.cb::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:3px;border-radius:3px;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:left}
.cb[aria-current="step"]{color:var(--accent-ink);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 78%,#fff),var(--accent));box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),0 2px 0 var(--accent-deep)}
.cb[aria-current="step"] i{background:rgba(0,0,0,.14);color:var(--accent-ink)}
.cb[aria-current="step"]::after{background:var(--accent-ink);opacity:.5}
.film{display:flex;align-items:center;gap:9px;padding:9px 14px;border:0;border-radius:14px;cursor:pointer;font:800 .86rem/1 var(--f);color:var(--ink);background:linear-gradient(180deg,var(--surface),var(--surface2));box-shadow:inset 0 0 0 1.5px var(--line),0 2px 0 var(--line);white-space:nowrap;margin-left:4px;transition:transform .14s var(--e)}
.film:active{transform:translateY(2px)}
.film svg{width:16px;height:16px;flex:none}
.film .ic-pause,.film .ic-again{display:none}
.film[data-s="playing"] .ic-play,.film[data-s="ended"] .ic-play{display:none}
.film[data-s="playing"] .ic-pause{display:block}
.film[data-s="ended"] .ic-again{display:block}
.film .dur{font:700 .7rem var(--m);color:var(--mute)}
.hint{display:none}
.world-on .hint{display:flex;position:absolute;left:50%;bottom:clamp(10px,2.4cqw,18px);translate:-50% 0;z-index:8;white-space:nowrap;align-items:center;gap:10px;pointer-events:none;font:700 .72rem var(--m);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--glass);border:1px solid var(--glass-brd);padding:9px 14px;border-radius:999px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:opacity .5s}
.hint i{width:9px;height:9px;border-right:2px solid var(--accent-text);border-bottom:2px solid var(--accent-text);transform:rotate(45deg);animation:nudge 1.6s ease-in-out infinite;margin-top:-4px}
@keyframes nudge{50%{transform:translateY(4px) rotate(45deg)}}
/* Textkarte (unteres Drittel) */
.world-on .cards{display:grid;position:static;grid-column:2;grid-row:1 / span 2;align-self:center;width:100%;min-width:0;pointer-events:none}
.world-on .stg{grid-area:1/1;order:0;display:block;margin:0;justify-self:stretch;width:100%;max-height:var(--blk);overflow:auto;scrollbar-width:thin;pointer-events:auto;padding:4px 6px 4px 0;background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;opacity:0;visibility:hidden}
.world-on .stg[data-i="0"]{opacity:1;visibility:visible}
.world-on .stg-n{display:block;font-size:clamp(3rem,3.2vw + 1vh,4.8rem);line-height:.9;margin:0 0 10px;transform-origin:left bottom}
.world-on .stg-k{margin-bottom:2px}
.world-on .stg-name{font-size:clamp(1.6rem,1.5vw + 1vh,2.5rem)}
.world-on .stg-plain{font-size:clamp(1.02rem,.3vw + .95rem,1.2rem);line-height:1.45;margin-top:8px;max-width:32em}
.world-on .stg-side{margin-top:16px}
.world-on .stg-side .keep{font-size:.95rem}
.world-on .stg-pts{margin-top:16px}
.world-on .stg .c{will-change:transform}
.world-on .stg-name .w{overflow:hidden;vertical-align:top;padding:.08em 0 .16em;margin:-.08em 0 -.16em}
/* Callout */
.callout{display:none}
.world-on .callout{display:block;position:absolute;z-index:20;width:min(340px,calc(100% - 24px));padding:16px 18px 18px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow),0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.world-on .callout[hidden]{display:none}
.callout h4{margin:0 34px 6px 0;font-size:1.06rem;line-height:1.2;letter-spacing:-.02em}
.callout p{color:var(--ink2);font-size:.96rem;line-height:1.5}
.callout button{position:absolute;right:8px;top:8px;width:34px;height:34px;border:0;border-radius:50%;background:var(--line2);color:var(--ink);cursor:pointer;font-size:1.15rem;line-height:1}
.callout button:hover{background:var(--line)}
/* Film: Titel- und Schlusskarte */
.world-on .fcard{display:grid;place-content:center;justify-items:center;text-align:center;gap:clamp(8px,2cqw,16px);position:absolute;inset:0;z-index:16;padding:clamp(14px,4cqw,44px);border-radius:inherit;overflow:auto;background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;visibility:hidden}
.fcard h3{font-size:clamp(1.5rem,2.4vw + 1rem,3rem);font-size:clamp(1.4rem,5.4cqw,3.6rem);line-height:1.02;font-weight:800;letter-spacing:-.04em;max-width:16em;text-wrap:balance}
.fcard p{font-size:clamp(.95rem,.6vw + .8rem,1.3rem);font-size:clamp(.9rem,2.3cqw,1.35rem);color:var(--ink2)}
.fcard .u{font:700 .8rem var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.fcard .cta-row{justify-content:center;flex-wrap:wrap;margin-top:8px}
.world-on .live{display:block}
/* Schmal und Handy (bis 1099 px): Rahmen oben, Leiste darunter, Text darunter (innen scrollbar) */
@media(max-width:1099px){
.world-on .stick{--bez:6px;--fr:14px;--pad:12px;--side:calc(var(--gut) - 6px);--fwS:calc((var(--vh) - var(--hdr) - 2 * var(--pad) - var(--rail) - 24px - 180px) * 1.5);
grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);row-gap:12px;align-content:start;
padding:calc(var(--hdr) + var(--pad)) var(--gut) calc(var(--pad) + env(safe-area-inset-bottom,0px))}
.world-on .cam{grid-column:1;grid-row:1;width:min(100%,var(--fwS));justify-self:center}
.world-on .chap{grid-column:1;grid-row:2;width:min(100%,var(--fwS));justify-self:center}
.world-on .cards{grid-column:1;grid-row:3;grid-template-rows:minmax(0,1fr);width:min(100%,var(--fwS));justify-self:center;align-self:stretch;min-height:0}
.world-on .stg{max-height:100%}
.world-on .stg-n{display:none}
.world-on .stg-name{font-size:1.5rem}
.world-on .stg-plain{font-size:1rem}
.stg-side{grid-template-columns:minmax(0,1fr);margin-top:12px;font-size:.92rem}
.stg-side .signs{display:none}
}
@container chap (max-width:960px){.cb span{display:none}}
@container chap (max-width:620px){.film .tx{display:none}}
@media(max-width:860px){.hs{width:30px;height:30px;font-size:.82rem}.hs::after{inset:-7px}}
/* ---- Erklärvideo statt Bühne (Build --video, PLAN-landingpage-papier.md) --------------------------------
Grundregeln ohne JavaScript hängen am Server-Markup (.world.vid): Poster, Textfassung gestapelt, Link zur Datei.
html.vid-on (gesetzt von video.js) ist nur die Verbesserung: angeheftet, Rahmen 16:9 mit Text daneben, Kapitelleiste, Bedienelemente.
Der alte Film (.world-on) wird im Video-Modus nie gesetzt. */
.wv{display:block;width:min(1100px,100%);margin:0 auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);background:#14100a;box-shadow:var(--shadow)}
.wv-ui,.wv-big,.wv-end,.wv-bar,.wv-fail{display:none}
.wv-nojs,.wv-fail{width:min(1100px,100%);margin:10px auto 0;font-size:.95rem;color:var(--ink2)}
.wv-nojs a,.wv-fail a{color:var(--accent-text);text-decoration:underline;text-underline-offset:.2em}
.world.vid[data-vs="fail"] .wv-fail{display:block}
.stg.intro{display:block}
.vid-on .world.vid{height:260vh}
.vid-on .world.vid .stick{--vh:100vh;--pad:clamp(18px,3vh,34px);--rail:56px;--bez:10px;--fr:18px;--gap:clamp(24px,3.2vw,56px);--side:max(var(--gut),calc((100vw - 1240px) / 2));--ar:1.7778;
--fw:min(64vw,1100px,calc(100vw - 2 * (var(--side) + var(--bez)) - var(--gap) - 300px),calc((var(--vh) - var(--hdr) - 2 * var(--pad) - var(--rail) - 14px) * var(--ar)));
--blk:calc(var(--fw) / var(--ar) + var(--rail) + 14px);
position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:var(--fw) minmax(0,1fr);grid-template-rows:auto auto;column-gap:var(--gap);row-gap:14px;align-content:center;
padding:calc(var(--hdr) + var(--pad)) calc(var(--side) + var(--bez)) var(--pad);overflow:hidden;isolation:isolate;background:radial-gradient(120% 100% at 70% 20%,var(--bg2),var(--bg))}
@supports (height:100svh){.vid-on .world.vid .stick{--vh:100svh}}
.vid-on .cam{display:block;position:relative;grid-column:1;grid-row:1;width:100%;aspect-ratio:16/9;overflow:hidden;container-type:size;z-index:1;background:#14100a;border-radius:var(--fr);box-shadow:0 0 0 var(--bez) var(--bezel),0 0 0 calc(var(--bez) + 1px) var(--bezel-ring),0 34px 60px -26px rgba(40,24,4,.55)}
.vid-on .wv{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;border-radius:0;box-shadow:none;aspect-ratio:auto}
.vid-on .wv-fail{display:none}
.vid-on .dock{display:contents}
.vid-on .chap{container:chap / inline-size;display:flex;position:static;grid-column:1;grid-row:2;width:100%;justify-content:stretch;align-items:center;gap:12px;pointer-events:none}
.vid-on .chap-in{width:100%;justify-content:space-between}
.vid-on .chap ol{flex:1 1 auto}
.vid-on .chap li{flex:1 1 0}
.vid-on .cb{width:100%;justify-content:center}
.cb i svg{width:11px;height:11px}
.vid-on .live{display:block}
.vid-on .cards{display:grid;position:static;grid-column:2;grid-row:1 / span 2;align-self:center;width:100%;min-width:0;pointer-events:none}
.vid-on .stg{grid-area:1/1;order:0;display:block;margin:0;justify-self:stretch;width:100%;max-height:var(--blk);overflow:auto;scrollbar-width:thin;pointer-events:auto;padding:4px 6px 4px 0;background:none;border:0;border-radius:0;box-shadow:none;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.vid-on .stg.on{opacity:1;visibility:visible;transition:opacity .35s ease}
.vid-on .stg-n{display:block;font-size:clamp(3rem,3.2vw + 1vh,4.8rem);line-height:.9;margin:0 0 10px}
.vid-on .stg-k{margin-bottom:2px}
.vid-on .stg-name{font-size:clamp(1.6rem,1.5vw + 1vh,2.5rem)}
.vid-on .stg-plain{font-size:clamp(1.02rem,.3vw + .95rem,1.2rem);line-height:1.45;margin-top:8px;max-width:32em}
.vid-on .stg-side{margin-top:16px}
.vid-on .stg-side .keep{font-size:.95rem}
.vid-on .stg-pts{margin-top:16px}
.vid-on .wv-ui{display:flex;gap:8px;position:absolute;top:10px;right:10px;z-index:6}
.vid-on .wv-ui button{display:inline-flex;align-items:center;gap:.4em;min-height:40px;border:0;border-radius:999px;padding:8px 13px;font:700 .72rem/1 var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-brd);cursor:pointer}
.vid-on .wv-ui b{font-weight:800;color:var(--accent-text)}
.vid-on .wv-ui button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.vid-on .wv-ui button[aria-pressed="true"] b{color:inherit}
@media(pointer:coarse){.vid-on .wv-ui button{min-height:44px}}
.vid-on .wv-big{position:absolute;inset:0;z-index:7;display:none;place-content:center;border:0;background:rgba(20,14,4,.38);cursor:pointer;color:var(--accent-ink)}
.vid-on .wv-big.show{display:grid}
.vid-on .wv-big span{display:grid;place-items:center;width:clamp(64px,12cqw,92px);aspect-ratio:1;border-radius:50%;background:var(--accent);box-shadow:0 14px 30px -10px rgba(0,0,0,.6)}
.vid-on .wv-big svg{width:42%;height:42%;margin-left:6%}
.vid-on .wv-bar{display:block;position:absolute;left:0;right:0;bottom:0;height:4px;z-index:5;background:rgba(255,255,255,.22)}
.vid-on .wv-bar i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0);transition:transform .25s linear}
.vid-on .wv-end{display:grid;place-content:center;justify-items:center;text-align:center;gap:clamp(8px,2cqw,16px);position:absolute;inset:0;z-index:16;padding:clamp(14px,4cqw,44px);border-radius:inherit;overflow:auto;background:color-mix(in srgb,var(--bg) 94%,transparent);opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
.vid-on .wv-end.show{opacity:1;visibility:visible;transition:opacity .4s ease}
@container chap (max-width:420px){.film .dur{display:none}.cb{padding-inline:8px}}
@media(max-width:1099px){
.vid-on .world.vid .stick{--bez:6px;--fr:14px;--pad:12px;--side:calc(var(--gut) - 6px);--fwS:calc((var(--vh) - var(--hdr) - 2 * var(--pad) - var(--rail) - 24px - 180px) * var(--ar));
grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);row-gap:12px;align-content:start;
padding:calc(var(--hdr) + var(--pad)) var(--gut) calc(var(--pad) + env(safe-area-inset-bottom,0px))}
.vid-on .cam{grid-column:1;grid-row:1;width:min(100%,var(--fwS));justify-self:center}
.vid-on .chap{grid-column:1;grid-row:2;width:min(100%,var(--fwS));justify-self:center}
.vid-on .cards{grid-column:1;grid-row:3;grid-template-rows:minmax(0,1fr);width:min(100%,var(--fwS));justify-self:center;align-self:stretch;min-height:0}
.vid-on .stg{max-height:100%}
.vid-on .stg-n{display:none}
.vid-on .stg-name{font-size:1.5rem}
.vid-on .stg-plain{font-size:1rem}
.vid-on .stg-side{margin-top:12px;font-size:.92rem}
}
/* ---- Abschnitte ------------------------------------------------------------ */
.s{padding-block:clamp(64px,9vw,120px)}
.s.alt{background:var(--bg2)}
.s.dk{background:var(--forest);color:var(--on-forest);--ink:var(--on-forest);--ink2:color-mix(in srgb,var(--on-forest) 84%,transparent);--mute:color-mix(in srgb,var(--on-forest) 66%,transparent);--line:rgba(246,239,221,.24);--line2:rgba(246,239,221,.1);--accent-text:#ffc26b;--surface:#1f4d34;--surface2:#245a3c}
.h2{font-size:clamp(1.75rem,2.5vw + 1rem,3.1rem);line-height:1.05;font-weight:800;letter-spacing:-.035em;margin-top:12px;max-width:21em;text-wrap:balance}
.sub{margin-top:18px;max-width:42em;color:var(--ink2);font-size:clamp(1.02rem,.6vw + .9rem,1.22rem);text-wrap:pretty}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.2vw,30px);box-shadow:var(--shadow);min-width:0}
.card h3{font-size:1.28rem;line-height:1.16;letter-spacing:-.025em;margin-bottom:10px}
.card p{color:var(--ink2)}
.card .no{font:800 3rem/1 var(--f);letter-spacing:-.05em;color:var(--accent-text);margin-bottom:12px}
.grid3.step-up .card:nth-child(2){translate:0 -14px}
.grid3.step-up .card:nth-child(3){translate:0 -28px}
.grid3.step-up{padding-top:28px}
@media(max-width:860px){.grid3{grid-template-columns:minmax(0,1fr)}.grid3.step-up .card{translate:none!important}.grid3.step-up{padding-top:0}}
.quote{margin-top:48px;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;max-width:880px}
.quote .qa{width:76px;height:76px;border-radius:24px;overflow:hidden;background:var(--surface2);box-shadow:0 4px 0 color-mix(in srgb,var(--forest) 60%,#000)}
.quote .qa img{width:100%;height:100%;object-fit:cover;object-position:center top}
.quote.noav{grid-template-columns:minmax(0,1fr)}
.quote blockquote{margin:0;font-size:clamp(1.15rem,1.3vw + .7rem,1.6rem);line-height:1.38;letter-spacing:-.015em;font-weight:700}
.quote cite{display:block;margin-top:10px;font:500 .8rem var(--m);color:var(--mute);font-style:normal;letter-spacing:.06em}
.closing{margin-top:34px;font-size:clamp(1.15rem,1vw + .85rem,1.45rem);font-weight:800;letter-spacing:-.02em;max-width:34em;text-wrap:balance}
.phases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.phase{padding:clamp(20px,2.2vw,30px);border-right:1px solid var(--line)}
.phase:last-child{border-right:0}
.phase .d{font:700 .74rem var(--m);letter-spacing:.1em;color:var(--accent-text);text-transform:uppercase}
.phase h3{font-size:1.3rem;margin:8px 0}
.phase p{color:var(--ink2)}
@media(max-width:860px){.phases{grid-template-columns:minmax(0,1fr)}.phase{border-right:0;border-bottom:1px solid var(--line)}.phase:last-child{border-bottom:0}}
.seats{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;margin-top:36px}
.seat{display:grid;justify-items:center;gap:8px;font:700 .72rem var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);text-align:center}
.seat.st-in{color:var(--ink)}
.seat .plate{display:grid;place-items:center;width:min(100%,136px);aspect-ratio:1.16;padding:8px;border-radius:22px;background:#fbf4e0;box-shadow:inset 0 0 0 1.5px rgba(29,24,16,.16),0 14px 22px -16px rgba(0,0,0,.55)}
.seat .plate img{width:100%;height:100%;object-fit:contain}
.seat.st-in .plate{box-shadow:inset 0 0 0 2.5px var(--gold),0 14px 22px -16px rgba(0,0,0,.55)}
.seat.st-frei .plate img{opacity:.92}
.legend{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:20px;font-size:.96rem;color:var(--ink2)}
.legend b{color:var(--ink)}
.terms{margin-top:24px;padding:18px 22px;border-radius:18px;background:var(--surface2);border:1px solid var(--line2);color:var(--ink2);max-width:780px}
@media(max-width:860px){.seats{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:480px){.seats{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px}.seat .plate{width:min(100%,112px);padding:6px}}
.quiz{margin-top:36px;background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:clamp(20px,3vw,40px);box-shadow:var(--shadow)}
.q{padding:18px 0;border:0;border-top:1px solid var(--line2);margin:0;min-width:0}
.q:first-of-type{border-top:0;padding-top:0}
.q legend{float:left;width:100%;padding:0 0 12px;font-weight:700;font-size:1.06rem;max-width:44em;line-height:1.4}
.q .opt{clear:both;display:flex;gap:10px;flex-wrap:wrap}
.q label{cursor:pointer}
.q input{position:absolute;opacity:0;pointer-events:none}
.q label span{display:inline-block;padding:.62em 1.2em;border-radius:14px;font-weight:700;font-size:.97rem;background:linear-gradient(180deg,var(--surface),var(--surface2));box-shadow:inset 0 0 0 1.5px var(--line),0 3px 0 var(--line);transition:transform .14s var(--e),box-shadow .14s}
.q label:hover span{box-shadow:inset 0 0 0 1.5px var(--accent),0 3px 0 var(--accent)}
.q input:checked+span{background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),0 3px 0 var(--accent-deep);transform:translateY(0)}
.q input:focus-visible+span{outline:3px solid var(--accent);outline-offset:3px}
.quiz .cta-row{margin-top:22px}
.res{margin-top:24px;padding:22px 24px;border-radius:20px;background:var(--surface2);border:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.res[hidden]{display:none}
.res h3{font-size:1.45rem;line-height:1.15;margin-bottom:6px;letter-spacing:-.025em}
.res p{color:var(--ink2)}
.res .cta-row{margin-top:14px}
.stairs{position:relative;width:min(260px,62vw);aspect-ratio:1014/962;border-radius:18px;background:#f7f1df;padding:10px;box-sizing:content-box;--sx:21%;--sy:6%}
.stairs-bg{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);display:block;object-fit:contain}
.stairs-man{position:absolute;width:24%;height:auto;left:var(--sx);bottom:calc(var(--sy) + 4%);transform:translateX(-50%);opacity:0;transition:left .7s var(--e),bottom .7s var(--e),opacity .4s}
.stairs:not([data-at="-1"]) .stairs-man{opacity:1}
.stairs[data-at="0"]{--sx:21%;--sy:6%}
.stairs[data-at="1"]{--sx:35%;--sy:18%}
.stairs[data-at="2"]{--sx:49%;--sy:30%}
.stairs[data-at="3"]{--sx:62%;--sy:42%}
.stairs[data-at="4"]{--sx:76%;--sy:55%}
@media(max-width:560px){.res{grid-template-columns:minmax(0,1fr)}}
.prod{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,72px);align-items:center}
.prod .pic{position:relative;display:grid;place-items:end center;aspect-ratio:1.05;border-radius:30px;overflow:hidden;background:linear-gradient(180deg,#2c6a47 0 70%,#245a3c 70% 100%);box-shadow:0 30px 60px -30px rgba(0,0,0,.7),0 0 0 1px rgba(246,239,221,.18)}
.prod .pic .pz{position:absolute;left:50%;bottom:2.5%;height:93%;aspect-ratio:var(--par,.8);translate:-50% 0;transition:transform 1.4s var(--e)}
.prod .pic:hover .pz{transform:translateY(-4px) scale(1.02)}
.prod .pic .pz img{width:100%;height:100%;object-fit:contain}
.prod .pic>.ph{position:absolute;left:27%;top:20%;width:46%}
@media(max-width:900px){.prod{grid-template-columns:minmax(0,1fr)}}
.ticks{display:grid;gap:12px;margin-top:24px}
.ticks li{display:flex;gap:12px;align-items:flex-start}
.ticks li::before{content:"";flex:none;width:24px;height:24px;margin-top:2px;border-radius:8px;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231d0f00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/17px no-repeat}
/* ---- Über uns: Personenkarten, Veröffentlichungen, Lehre ---------------------------------- */
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:clamp(14px,2vw,24px);margin-top:clamp(28px,4vw,44px)}
.people:has(.pcard:only-child){grid-template-columns:minmax(0,640px)}
.pcard{display:grid;grid-template-columns:clamp(104px,34%,188px) minmax(0,1fr);grid-template-areas:"fig head" "fig bio" "facts facts" "links links";gap:12px clamp(14px,2vw,22px);align-content:start;min-width:0;padding:clamp(16px,2vw,26px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.pfig{grid-area:fig;align-self:start;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--surface2);box-shadow:inset 0 0 0 1px var(--line2)}
.pfig img{width:100%;height:100%;object-fit:cover;object-position:center top}
.phead{grid-area:head;align-self:end;min-width:0}
.pcard h3{font-size:clamp(1.3rem,.9vw + 1rem,1.65rem);line-height:1.1;font-weight:800;letter-spacing:-.03em}
.role{margin-top:6px;font-weight:700;font-size:.95rem;line-height:1.35;color:var(--accent-text)}
.pbio{grid-area:bio;align-self:start;color:var(--ink2);font-size:1rem;line-height:1.55}
.pfacts{grid-area:facts;display:grid;gap:7px;margin-top:6px;padding-top:14px;border-top:1px solid var(--line2);color:var(--ink2);font-size:.96rem;line-height:1.45}
.pfacts li{position:relative;padding-left:17px}
.pfacts li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.plinks{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.pcard .plinks{grid-area:links;margin-top:4px}
.pchip{display:inline-flex;align-items:center;gap:.45em;min-height:38px;padding:.4em .95em;border-radius:999px;text-decoration:none;font:700 .86rem/1.2 var(--f);color:var(--ink);background:linear-gradient(180deg,var(--surface),var(--surface2));box-shadow:inset 0 0 0 1.5px var(--line),0 2px 0 var(--line);transition:transform .14s var(--e),box-shadow .14s}
.pchip.ext::after{content:"\2197";font-size:.9em;color:var(--accent-text)}
.pchip:hover{box-shadow:inset 0 0 0 1.5px var(--accent),0 2px 0 var(--accent)}
.pchip:active{transform:translateY(2px);box-shadow:inset 0 0 0 1.5px var(--accent)}
.plab{font:700 .74rem/1.35 var(--m);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.proof{margin-top:clamp(28px,4vw,44px)}
.pubs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px;margin-top:12px}
.pub{display:grid;align-content:start;gap:4px;height:100%;padding:14px 16px;border-radius:16px;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);transition:border-color .25s,transform .25s var(--e)}
.pub b{font-size:1.02rem;font-weight:800;letter-spacing:-.01em}
.pub span:not(.sr){color:var(--ink2);font-size:.92rem;line-height:1.4}
.pub:hover{border-color:var(--accent);transform:translateY(-2px)}
.teach{margin-top:clamp(20px,3vw,30px);display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
@media(max-width:860px){.people{grid-template-columns:minmax(0,1fr)}.people:has(.pcard:only-child){grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.pcard{grid-template-columns:clamp(92px,28%,120px) minmax(0,1fr);grid-template-areas:"fig head" "bio bio" "facts facts" "links links"}.pfig{border-radius:14px}.phead{align-self:center}}
.faq{margin-top:34px;display:grid;gap:12px;max-width:880px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:0 22px;transition:border-color .25s}
.faq details[open]{border-color:var(--accent)}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:800;font-size:1.06rem;display:flex;gap:16px;justify-content:space-between;align-items:center;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font:700 1.2rem var(--m);color:var(--accent-ink);background:var(--accent);transition:transform .3s var(--e)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 20px;color:var(--ink2);max-width:46em}
.final .h2{max-width:17em;font-size:clamp(2rem,3.4vw + 1rem,3.9rem)}
.ps{margin-top:28px;max-width:660px;padding:16px 20px;border-radius:16px;background:var(--surface);border:1px solid var(--line);color:var(--ink2)}
.ps b{color:var(--accent-text)}
.notes{background:var(--surface2);padding-block:56px;border-top:1px solid var(--line2)}
.notes h2{font-size:1.4rem;margin-bottom:14px;letter-spacing:-.02em}
.notes ul{display:grid;gap:8px;color:var(--ink2);max-width:62em;padding-left:1.2em;list-style:disc}
footer{padding-block:48px;border-top:1px solid var(--line2);color:var(--mute);font-size:.95rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 36px;justify-content:space-between}
footer .m{font:500 .74rem var(--m);letter-spacing:.06em}
footer a{color:inherit;text-underline-offset:3px}
footer a:hover{color:var(--ink)}
footer .legal{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:flex-start;font-weight:700}
footer .f-line{flex:1 0 100%;margin:0;padding-top:16px;border-top:1px solid var(--line2);font-size:.86rem;line-height:1.5}
/* ---- Rechtsseiten (Impressum, Datenschutz): gleicher Look, Text in lesbarer Spaltenbreite (ca. 70 Zeichen) ---- */
.top nav.back{margin-left:auto}
.top nav.back a{display:block;padding:8px 11px;border-radius:12px;text-decoration:none;font-weight:700;font-size:.92rem;color:var(--ink2);white-space:nowrap}
.top nav.back a:hover{background:var(--line2);color:var(--ink)}
.top nav.back + .sunline{margin-left:0}
@media(max-width:1279px){.top nav.back{display:block}}
.legal-page{background:var(--bg);padding-block:clamp(36px,6vw,84px) clamp(48px,8vw,110px)}
.doc-wrap{width:min(70ch,100% - 2*var(--gut));margin-inline:auto;font-size:clamp(1rem,.95rem + .15vw,1.08rem)}
.doc-head h1{font-size:clamp(2rem,2.4vw + 1rem,3.1rem);line-height:1.05;font-weight:800;letter-spacing:-.035em;margin-top:12px;text-wrap:balance}
.doc{margin-top:clamp(20px,3vw,34px);line-height:1.65;color:var(--ink2)}
.doc>*+*{margin-top:1.05em}
.doc h2{margin-top:2.1em;font-size:clamp(1.25rem,.9vw + 1rem,1.55rem);line-height:1.2;font-weight:800;letter-spacing:-.025em;color:var(--ink);scroll-margin-top:calc(var(--hdr) + 18px)}
.doc h3,.doc h4{margin-top:1.6em;font-size:1.1rem;font-weight:800;color:var(--ink)}
.doc strong{color:var(--ink)}
.doc ul,.doc ol{padding-left:1.35em}
.doc ul{list-style:disc}
.doc ol{list-style:decimal}
.doc li+li{margin-top:.4em}
.doc li::marker{color:var(--accent-text)}
.doc a{color:var(--accent-text);text-underline-offset:3px}
.doc blockquote.draft{margin:0;padding:16px 20px;border-radius:16px;border:1px solid var(--line);border-left:5px solid var(--accent);background:var(--surface2);color:var(--ink);font-weight:500}
.doc blockquote.draft p{margin:0}
.doc mark.ph{background:color-mix(in srgb,var(--gold) 55%,transparent);color:inherit;padding:.05em .25em;border-radius:5px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.doc hr{border:0;border-top:1px solid var(--line2);margin-block:2em}
.doc code{font:600 .9em var(--m)}
/* Landingpage ohne JavaScript: Texte stehen im HTML. Die Welt braucht Skript (Bilder werden nachgeladen), der Selbsttest ebenso. */
html.site:not(.js) .scn,html.site:not(.js) #quiz .cta-row{display:none}
/* ---- Reveal ---------------------------------------------------------------- */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .9s var(--e),transform .9s var(--e);transition-delay:calc(var(--d,0) * 90ms)}
.js .rv.in{opacity:1;transform:none}
.js .seat.rv{transform:translateY(14px) scale(.9)}
.js .seat.rv.in{transform:none}
/* ---- Tag/Nacht-Übergang ---------------------------------------------------- */
.mode-fx,.mode-fx *,.mode-fx *::before,.mode-fx *::after{transition:background-color 1.2s ease,color 1.2s ease,border-color 1.2s ease,fill 1.2s ease,stroke 1.2s ease,box-shadow 1.2s ease,outline-color 1.2s ease,text-decoration-color 1.2s ease!important}
/* Die Szene überblendet Tag und Nacht über Deckkraft und Filter. Diese Übergänge dürfen die Regel oben nicht überschreiben. */
.mode-fx .stg-im,.mode-fx .pz img,.mode-fx .nx,.mode-fx .lt,.mode-fx .gl,.mode-fx .tn>img,.mode-fx .tn::after{transition:opacity 1.2s ease,filter 1.2s ease!important}
.sweep{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden;visibility:hidden}
.sweep i{position:absolute;top:-12%;bottom:-12%;left:0;width:46vw;transform:translateX(-60vw) skewX(-14deg);background:linear-gradient(90deg,transparent 0,rgba(255,196,110,.0) 12%,rgba(255,190,100,.55) 48%,rgba(255,232,180,.7) 54%,rgba(255,196,110,0) 88%,transparent 100%);mix-blend-mode:screen;filter:blur(8px)}
/* ---- Weniger Bewegung -------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
.hero-bg .tn{animation:none}
.hs::after{display:none}
.js .rv{opacity:1;transform:none}
}
/* ==========================================================================
Look "Papier" (Version B): das Design der Storyboard-Seite für die ganze Landingpage.
Wird nur bei `--theme papier` an style.css gehängt. Das Zeichen html[data-look="papier"] steht für html[data-look="papier"] (Build ersetzt es),
so wirkt nichts außerhalb dieses Attributs. data-theme und data-mode gehören weiter allein dem Tag/Nacht-Mechanismus.
Regeln: Orange bleibt Dr. Mailo® vorbehalten, Bedienelemente und Akzente sind Salbei; keine Verläufe, kein backdrop-filter,
höchstens zwei Schattenebenen (Ausnahme: die Blende des Videorahmens); Überschriften in Serifenschrift.
========================================================================== */
/* ---- Tokens, Tag --------------------------------------------------------- */
html[data-look="papier"]{
--bg:#f5efe4;--bg2:#ece3d0;--surface:#fbf7ee;--surface2:#f1e9d8;
--ink:#1a1a17;--ink2:#46423a;--mute:#6f695c;
--line:rgba(26,26,23,.2);--line2:rgba(26,26,23,.1);
--accent:#4d6b4b;--accent-text:#4d6b4b;--accent-ink:#fbf7ee;--accent-deep:#3a5339;
--gold:#dfe8d9;--green:#4d6b4b;--on-green:#fbf7ee;--forest:#2a3d2c;--on-forest:#f5efe4;--red:#b3412f;
--glass:#fbf7ee;--glass-brd:rgba(26,26,23,.18);
--shadow:none;--edge:rgba(77,107,75,.9);
--bezel:#2b2417;--bezel-ring:rgba(0,0,0,.25);
--paper:#f5efe4;--tinte:#1a1a17;
--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
--r:20px;
--grain:url("data:image/svg+xml;utf8,");
color-scheme:light;
}
/* ---- Tokens, Nacht ("dunkles Papier"), mit höherer Spezifität als die Basisblöcke --------- */
@media (prefers-color-scheme:dark){html[data-look="papier"]:not([data-theme="light"]){
--bg:#14130f;--bg2:#1b1a15;--surface:#1f1e18;--surface2:#27261f;
--ink:#f1ebdc;--ink2:#cfc8b6;--mute:#a39c8a;
--line:rgba(241,235,220,.22);--line2:rgba(241,235,220,.1);
--accent:#9fc29b;--accent-text:#a9cba5;--accent-ink:#10150f;--accent-deep:#7aa476;
--gold:#2c3a2d;--green:#9fc29b;--on-green:#10150f;--forest:#0f1d12;--on-forest:#f1ebdc;--red:#ff8a73;
--glass:#1f1e18;--glass-brd:rgba(241,235,220,.2);
--shadow:none;--edge:rgba(159,194,155,.9);
--bezel:#3a362c;--bezel-ring:rgba(241,235,220,.22);
--paper:#f1ebdc;--tinte:#14130f;
--grain:url("data:image/svg+xml;utf8,");
color-scheme:dark;
}}
html[data-look="papier"][data-theme="dark"]{
--bg:#14130f;--bg2:#1b1a15;--surface:#1f1e18;--surface2:#27261f;
--ink:#f1ebdc;--ink2:#cfc8b6;--mute:#a39c8a;
--line:rgba(241,235,220,.22);--line2:rgba(241,235,220,.1);
--accent:#9fc29b;--accent-text:#a9cba5;--accent-ink:#10150f;--accent-deep:#7aa476;
--gold:#2c3a2d;--green:#9fc29b;--on-green:#10150f;--forest:#0f1d12;--on-forest:#f1ebdc;--red:#ff8a73;
--glass:#1f1e18;--glass-brd:rgba(241,235,220,.2);
--shadow:none;--edge:rgba(159,194,155,.9);
--bezel:#3a362c;--bezel-ring:rgba(241,235,220,.22);
--paper:#f1ebdc;--tinte:#14130f;
--grain:url("data:image/svg+xml;utf8,");
color-scheme:dark;
}
/* ---- Grund: Papierkörnung (statische Kachel), Serifen-Überschriften ------------------------ */
html[data-look="papier"] body{background-color:var(--bg);background-image:var(--grain)}
html[data-look="papier"] h1,html[data-look="papier"] h2,html[data-look="papier"] h3,html[data-look="papier"] h4{font-family:var(--serif);font-weight:700;letter-spacing:-.02em}
html[data-look="papier"] .stg-side h4{font-family:var(--m);font-weight:700;letter-spacing:.12em}
html[data-look="papier"] .mk{background:none;font-style:italic;color:var(--accent-text);padding-inline:0}
html[data-look="papier"] .lab,html[data-look="papier"] .stg-k,html[data-look="papier"] .step-a .k,html[data-look="papier"] .phase .d,html[data-look="papier"] .plab{color:var(--accent-text)}
html[data-look="papier"] :focus-visible{outline-color:var(--accent)}
/* ---- Kopfleiste ------------------------------------------------------------ */
html[data-look="papier"] .top{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1.5px solid var(--line)}
html[data-look="papier"] .brand{font-family:var(--serif);font-weight:700;letter-spacing:-.01em}
html[data-look="papier"] .brand i{background:var(--accent);box-shadow:none}
html[data-look="papier"] .top nav a{font-weight:600;border-radius:0;padding-block:6px}
html[data-look="papier"] .top nav a:hover{background:none;color:var(--accent-text);box-shadow:inset 0 -2px 0 var(--accent)}
html[data-look="papier"] .sunline{font-family:var(--m);font-size:.66rem;letter-spacing:.04em}
/* ---- Knöpfe: flach, Salbei ------------------------------------------------- */
html[data-look="papier"] .btn{border-radius:12px;min-height:48px;background:var(--accent);color:var(--accent-ink);box-shadow:none;font-weight:700;letter-spacing:0;transition:background .2s,transform .12s}
html[data-look="papier"] .btn:hover{filter:none;transform:none;background:var(--accent-deep)}
html[data-look="papier"] .btn:active{transform:translateY(1px);box-shadow:none}
html[data-look="papier"] .btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
html[data-look="papier"] .btn.ghost:hover{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink)}
html[data-look="papier"] .btn.ghost:active{box-shadow:inset 0 0 0 1.5px var(--ink)}
html[data-look="papier"] .btn.forest{background:var(--forest);color:var(--on-forest)}
html[data-look="papier"] .btn .dur{background:transparent;opacity:.8}
html[data-look="papier"] .btn.lock{background:transparent;color:var(--mute);box-shadow:none}
html[data-look="papier"] .btn-sm{border-radius:10px}
html[data-look="papier"] .s.dk .btn{background:var(--paper);color:var(--tinte)}
html[data-look="papier"] .s.dk .btn:hover{background:var(--surface);color:var(--ink)}
/* ---- Erster Bildschirm: Überschrift links, Standbild aus dem Video rechts, Streifen darunter ---- */
html[data-look="papier"] .hero-p{padding-block:clamp(40px,6vw,88px) clamp(36px,5vw,72px)}
html[data-look="papier"] .hero-p .hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,72px);align-items:center}
html[data-look="papier"] .hero-p .hero-copy{max-width:none}
html[data-look="papier"] .hero-p h1{font-size:clamp(2.4rem,4.4vw + .8rem,5rem);line-height:1.05;font-weight:700;letter-spacing:-.025em;margin:12px 0 clamp(14px,2vh,24px);text-wrap:balance}
html[data-look="papier"] .hero-p .lede{max-width:34em}
html[data-look="papier"] .hero-still{display:block;position:relative;rotate:-2.2deg;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#14100a;text-decoration:none;box-shadow:0 0 0 9px var(--bezel),0 30px 50px -24px rgba(40,24,4,.5);transition:rotate .35s var(--e)}
html[data-look="papier"] .hero-still:hover{rotate:-1deg}
html[data-look="papier"] .hero-still img{width:100%;height:100%;object-fit:cover}
html[data-look="papier"] .hero-still .play{position:absolute;right:14px;bottom:14px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink)}
html[data-look="papier"] .hero-still .play svg{width:46%;height:46%;margin-left:6%}
html[data-look="papier"] .hero-p .steps{margin-top:clamp(36px,5vw,64px);padding-bottom:0}
html[data-look="papier"] .step-a{background:var(--surface);border:1.5px solid var(--line);border-radius:20px;box-shadow:none;transition:border-color .25s,transform .35s var(--e)}
html[data-look="papier"] .step-a:hover,html[data-look="papier"] .step.on .step-a{border-color:var(--accent);box-shadow:none;transform:translateY(-4px)}
html[data-look="papier"] .step-a .num{background:var(--ink);color:var(--bg);box-shadow:none;font-family:var(--serif)}
html[data-look="papier"] .step-a .thumb{border-radius:12px;box-shadow:0 0 0 3px var(--bezel)}
html[data-look="papier"] .step-a .t{font-family:var(--serif);font-weight:700;letter-spacing:-.01em}
@media(max-width:900px){html[data-look="papier"] .hero-p .hero-grid{grid-template-columns:minmax(0,1fr)}html[data-look="papier"] .hero-still{rotate:0;margin-inline:10px}}
/* ---- Video im Rahmen (#weg) ------------------------------------------------ */
html[data-look="papier"].vid-on .world.vid .stick{--bez:9px;--fr:22px;background:var(--bg)}
html[data-look="papier"].vid-on .cam{border-radius:22px;background:#14100a;box-shadow:0 0 0 9px var(--bezel),0 30px 50px -24px rgba(40,24,4,.5)}
html[data-look="papier"] .chap-in{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;flex-wrap:wrap}
html[data-look="papier"].vid-on .chap ol{flex:1 1 100%}
html[data-look="papier"] .cb{border-radius:10px;font-family:var(--m)}
html[data-look="papier"] .cb:hover{background:var(--surface2)}
html[data-look="papier"] .cb i{flex:none;background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
html[data-look="papier"] .cb[aria-current="step"]{background:var(--accent);color:var(--accent-ink);box-shadow:none}
html[data-look="papier"] .cb[aria-current="step"] i{background:transparent;color:var(--accent-ink);box-shadow:inset 0 0 0 1.5px var(--accent-ink)}
html[data-look="papier"] .cb::after{background:var(--accent)}
html[data-look="papier"] .cb[aria-current="step"]::after{background:var(--accent-ink)}
html[data-look="papier"] .film{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);border-radius:10px;margin-left:0}
html[data-look="papier"] .film:hover{background:var(--surface2)}
html[data-look="papier"].vid-on .chap-in .wv-ui{position:static;display:flex;gap:6px;margin-left:auto}
html[data-look="papier"].vid-on .wv-ui button{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);border-radius:10px;min-height:40px}
html[data-look="papier"].vid-on .wv-ui button:hover{background:var(--surface2)}
html[data-look="papier"].vid-on .wv-ui button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);box-shadow:none}
html[data-look="papier"].vid-on .wv-ui b,html[data-look="papier"].vid-on .wv-ui button[aria-pressed="true"] b{color:inherit}
html[data-look="papier"].vid-on .wv-big span{background:var(--accent);color:var(--accent-ink);box-shadow:none}
html[data-look="papier"].vid-on .wv-bar i{background:var(--accent)}
html[data-look="papier"].vid-on .wv-end{background:var(--bg)}
html[data-look="papier"] .stg-n{font-family:var(--serif);color:var(--accent-text)}
html[data-look="papier"] .stg-name{font-family:var(--serif);font-weight:700;letter-spacing:-.02em}
html[data-look="papier"] .stg-side h4{color:var(--mute)}
html[data-look="papier"] .stg-side li::before,html[data-look="papier"] .pfacts li::before{background:var(--accent)}
@container chap (max-width:960px){html[data-look="papier"] .cb span{display:inline}}
@container chap (max-width:640px){html[data-look="papier"] .cb span{display:none}}
/* ---- Untertitel: eigene Zeile fest am unteren Rand (keine Browser-Untertitel, kein Layoutsprung) ---- */
html[data-look="papier"] video::-webkit-media-text-track-container{display:none}
html[data-look="papier"] video::cue{opacity:0}
html[data-look="papier"] .wv-cap{position:absolute;z-index:4;left:3%;right:3%;bottom:.5em;height:3.4em;margin:0;display:flex;flex-direction:column;justify-content:flex-end;text-align:center;pointer-events:none;opacity:0;transition:opacity .15s;font:600 clamp(.72rem,2.9cqw + .2rem,1.02rem)/1.55 var(--f);color:var(--ink)}
html[data-look="papier"] .wv-cap.on{opacity:1}
html[data-look="papier"] .wv-cap .t{background:color-mix(in srgb,var(--bg) 94%,transparent);padding:.1em .6em;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* ---- Abschnitte und Karten --------------------------------------------------- */
html[data-look="papier"] .s{border-top:1.5px dashed var(--line)}
html[data-look="papier"] .s.alt{background:transparent}
html[data-look="papier"] .h2{font-weight:700;letter-spacing:-.025em}
html[data-look="papier"] .card,html[data-look="papier"] .phases,html[data-look="papier"] .quiz,html[data-look="papier"] .res,html[data-look="papier"] .ps,html[data-look="papier"] .terms,html[data-look="papier"] .pcard,html[data-look="papier"] .pub,html[data-look="papier"] .faq details{background:var(--surface);border:1.5px solid var(--line);border-radius:20px;box-shadow:none}
html[data-look="papier"] .phases{overflow:hidden}
html[data-look="papier"] .phase{border-right:1.5px dashed var(--line)}
html[data-look="papier"] .phase:last-child{border-right:0}
html[data-look="papier"] .card .no{font-family:var(--serif);color:var(--accent-text)}
html[data-look="papier"] .quote blockquote{font-family:var(--serif);font-weight:500}
html[data-look="papier"] .quote .qa{box-shadow:none;border:1.5px solid var(--line)}
html[data-look="papier"] .closing{font-family:var(--serif);font-weight:700}
html[data-look="papier"] .seat .plate{background:var(--surface);box-shadow:none;border:1.5px solid var(--line);border-radius:18px}
html[data-look="papier"] .seat.st-in .plate{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
html[data-look="papier"] .legend b{color:var(--ink)}
html[data-look="papier"] .q label span{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line);border-radius:12px}
html[data-look="papier"] .q label:hover span{box-shadow:inset 0 0 0 1.5px var(--accent)}
html[data-look="papier"] .q input:checked+span{background:var(--accent);color:var(--accent-ink);box-shadow:none}
html[data-look="papier"] .q input:focus-visible+span{outline-color:var(--accent)}
html[data-look="papier"] .stairs{background:var(--surface);border:1.5px solid var(--line)}
html[data-look="papier"] .ticks li::before{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fbf7ee' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/17px no-repeat;border-radius:6px}
html[data-look="papier"] .pcard h3{font-family:var(--serif)}
html[data-look="papier"] .role{color:var(--accent-text)}
html[data-look="papier"] .pfig{box-shadow:none;border:1.5px solid var(--line)}
html[data-look="papier"] .pchip{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line);border-radius:10px}
html[data-look="papier"] .pchip:hover{box-shadow:inset 0 0 0 1.5px var(--accent);background:var(--surface)}
html[data-look="papier"] .pub:hover{border-color:var(--accent);transform:none}
html[data-look="papier"] .faq details[open]{border-color:var(--accent)}
html[data-look="papier"] .faq summary::after{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);border-radius:8px}
html[data-look="papier"] .faq summary{font-family:var(--serif);font-weight:700}
html[data-look="papier"] .ps b{color:var(--accent-text)}
html[data-look="papier"] footer{border-top:1.5px dashed var(--line)}
html[data-look="papier"] .notes{background:transparent}
/* ---- Dunkle Abschnitte (Dr. Mailo®) als dunkles Papier ------------------------------- */
html[data-look="papier"] .s.dk{background:var(--forest);color:var(--on-forest);--ink:var(--on-forest);--ink2:color-mix(in srgb,var(--on-forest) 86%,transparent);--mute:color-mix(in srgb,var(--on-forest) 68%,transparent);--line:rgba(245,239,228,.3);--line2:rgba(245,239,228,.12);--accent-text:#cfe0c9;--surface:#344b37;--surface2:#3b543e;border-top:0}
html[data-look="papier"] .prod .pic{background:#344b37;box-shadow:none;border:1.5px solid rgba(245,239,228,.3);border-radius:22px}
/* ---- Rechtsseiten ------------------------------------------------------------- */
html[data-look="papier"] .doc blockquote.draft{background:var(--surface);border:1.5px solid var(--line);border-left:5px solid var(--accent);box-shadow:none}
html[data-look="papier"] .doc mark.ph{background:var(--gold)}