/* Grundlage (vorher als fremdes Dokumentgerüst eingebettet): Ränder null, Bilder nie breiter als ihr Behälter */
body{margin:0;padding:0}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: Kinetische Kinoästhetik. Schwarzer Raum, Glut-Orange als einziger Akzent. WebGL-Trichter mit Bloom, Farbsaum und Filmkorn als Hintergrund, der beim Scrollen durchflogen wird. GSAP steuert Texte, Karten, Cursor und Laufbänder. Bewusst nur dunkel. */
:root{
  color-scheme:dark;
  --ct-pad:clamp(64px,10vw,140px); --ct-mk:clamp(64px,7vw,92px);   /* Kontakt: Innenabstand und Zeichen; die Linie aus „Über mich“ rechnet damit */
  --bg:#060912; --fg:#EAF0F9; --dim:#8A98B2; --line:rgba(205,222,255,.14); --panel:rgba(6,9,18,.62);
  --ember:#9CC4FF; --ember2:#D4E5FF; --gold:#F2B35E; --gold2:#FFD9A0; --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --hh:54px;
}
*{box-sizing:border-box}
html{scroll-padding-top:var(--hh);overflow-x:clip;background:var(--bg)}
body{background:var(--bg);color:var(--fg);font-family:var(--display);font-size:1.05rem;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:'kern','liga'}
a{color:inherit}
p{margin:0;max-width:58ch}
h1,h2,h3{margin:0;font-family:var(--display);text-wrap:balance}
h2{font-family:var(--serif);font-size:clamp(2.6rem,6.8vw,5.6rem);line-height:.92;font-weight:400;text-transform:none;letter-spacing:-.022em}
h2 em{font-style:italic;color:var(--ember2);letter-spacing:-.012em;text-shadow:0 0 38px rgba(156,196,255,.28)}
h3{font-size:1.3rem;line-height:1.1;font-weight:700;font-variation-settings:"wdth" 104;letter-spacing:-.005em}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;text-transform:lowercase;font-weight:500}
.dim{color:var(--dim)}
.em{color:var(--ember)}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.rgb{--rgb:0;text-shadow:calc(var(--rgb)*-1px) 0 rgba(255,40,80,.8),calc(var(--rgb)*1px) 0 rgba(40,220,255,.65),0 0 44px rgba(156,196,255,.14)}

/* feste Ebenen */
#xc{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;display:block}
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.grain{position:fixed;inset:-50%;width:200%;height:200%;z-index:40;pointer-events:none;opacity:.06;animation:grain 1.1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.vig{position:fixed;inset:0;z-index:39;pointer-events:none;background:radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.78) 100%)}
.scan{position:fixed;inset:0;z-index:39;pointer-events:none;opacity:.22;background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.35) 3px)}
.hud{position:fixed;inset:0;z-index:38;pointer-events:none}
.hud i{position:absolute;width:18px;height:18px;border:0 solid var(--dim);opacity:.8}
.hud i:nth-child(1){left:14px;top:calc(var(--hh) + 10px);border-left-width:1.5px;border-top-width:1.5px}
.hud i:nth-child(2){right:14px;top:calc(var(--hh) + 10px);border-right-width:1.5px;border-top-width:1.5px}
.hud i:nth-child(3){left:14px;bottom:14px;border-left-width:1.5px;border-bottom-width:1.5px}
.hud i:nth-child(4){right:14px;bottom:14px;border-right-width:1.5px;border-bottom-width:1.5px}
.hud .read{position:absolute;left:44px;bottom:16px;color:var(--dim)}
.hud .read b{color:var(--ember);font-weight:500}
.prog{position:fixed;left:0;right:0;top:0;height:2px;z-index:60;pointer-events:none}
.prog i{display:block;height:100%;background:var(--gold);box-shadow:0 0 12px var(--gold);transform:scaleX(0);transform-origin:0 50%}
@media(max-width:620px){.hud .read{left:38px}}

/* Cursor */
#cur,#ring{position:fixed;left:0;top:0;z-index:100;pointer-events:none;display:none}
.has-cur #cur,.has-cur #ring{display:block}
#cur{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--gold);border-radius:50%;box-shadow:0 0 12px var(--gold)}
#ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(244,241,236,.55);border-radius:50%;transition:width .25s,height .25s,margin .25s,border-color .25s,background .25s}
#ring.big{width:78px;height:78px;margin:-39px 0 0 -39px;border-color:var(--ember);background:rgba(156,196,255,.08)}
.has-cur,.has-cur a,.has-cur .btn{cursor:none}

/* Kopf */
header.top{position:fixed;left:0;right:0;top:0;z-index:45;padding-top:env(safe-area-inset-top,0px);background:linear-gradient(var(--bg),rgba(5,7,11,0))}
header.top .wrap{height:var(--hh);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{text-decoration:none;font-weight:900;font-variation-settings:"wdth" 120;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;text-transform:uppercase}
header.top nav{display:flex;gap:clamp(12px,2.4vw,28px)}
header.top nav a{text-decoration:none;color:var(--dim)}
header.top nav a:hover{color:var(--fg)}
@media(max-width:620px){header.top nav a:nth-child(n+2):nth-child(-n+3){display:none}}

main{position:relative;z-index:2}

/* Hero: Ereignishorizont, Sprung, Idee */
.hero{height:290vh;position:relative}
.hero-in{position:sticky;top:0;height:100dvh;overflow:hidden}
#kick{position:absolute;left:0;right:0;top:calc(var(--hh) + 5vh);text-align:center;display:block}
#h1{position:absolute;left:0;right:0;top:calc(var(--hh) + 12vh);margin:0;display:flex;justify-content:center;flex-wrap:nowrap;white-space:nowrap;font-size:clamp(1.7rem,8.4vw,8rem);line-height:1;font-weight:300;font-variation-settings:"wdth" 125;text-transform:uppercase;letter-spacing:.14em;padding-left:.14em;will-change:transform,opacity}
.mask{display:inline-block;overflow:hidden;padding:.1em .02em .14em;margin:-.1em -.02em -.14em}
.ch{display:inline-block;will-change:transform;color:color-mix(in srgb,var(--ember) calc(var(--k,0)*100%),var(--fg))}
.dive{position:absolute;left:50%;bottom:clamp(28px,8vh,72px);transform:translateX(-50%);display:grid;justify-items:center;gap:12px;text-decoration:none;font-family:var(--mono);font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg);padding:10px 18px}
@keyframes introIn{from{opacity:0}}
#kick,.dive{animation:introIn .9s .9s backwards}
.dive span{white-space:nowrap}
.dive i{display:block;width:1px;height:46px;background:linear-gradient(var(--ember),transparent);animation:dv 1.8s ease-in-out infinite}
@keyframes dv{0%{transform:scaleY(.2);transform-origin:0 0;opacity:.2}50%{transform:scaleY(1);transform-origin:0 0;opacity:1}100%{transform:scaleY(1);transform-origin:0 100%;opacity:0}}
.flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(255,244,226,.95),rgba(242,179,94,.55) 38%,rgba(5,7,11,0) 72%)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border:1.5px solid var(--fg);text-decoration:none;font-family:var(--mono);font-size:.82rem;letter-spacing:.04em;text-transform:lowercase;transition:box-shadow .25s,background .25s,color .25s;will-change:transform}
.btn.primary{background:var(--ember);border-color:var(--ember);color:#050a14;font-weight:500}
.btn.primary:hover{box-shadow:0 0 34px rgba(156,196,255,.6)}
@media(max-width:620px){#h1{letter-spacing:.08em;padding-left:.08em;font-size:clamp(1.5rem,9vw,3rem)}}

/* Bühnen */
.scene{position:relative;height:calc(var(--n) * 90vh + 100vh)}
.stage{position:sticky;top:var(--hh);height:calc(100dvh - var(--hh));display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,56px);align-items:center;padding-block:28px}
.txt{position:relative;background:var(--panel);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);padding:clamp(18px,2.6vw,30px);display:grid;min-width:0}
.txt::before,.txt::after{content:"";position:absolute;width:16px;height:16px;border:0 solid var(--ember)}
.txt::before{left:-1px;top:-1px;border-left-width:2px;border-top-width:2px}
.txt::after{right:-1px;bottom:-1px;border-right-width:2px;border-bottom-width:2px}
.step{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s;pointer-events:none;align-self:start}
.step.on{opacity:1;transform:none;pointer-events:auto}
.step .mono{color:var(--ember)}
.step h3{font-size:clamp(1.6rem,3.2vw,2.5rem);font-weight:880;font-variation-settings:"wdth" 118;text-transform:uppercase;margin:10px 0 12px;line-height:.98;letter-spacing:-.02em}
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.si{display:inline-block;will-change:transform}
.step p{color:var(--dim)}
.rail{display:flex;gap:6px;margin-top:20px;grid-area:2/1}
.rail i{height:3px;flex:1;background:var(--line);transition:background .3s,box-shadow .3s}
.rail i.on{background:var(--ember);box-shadow:0 0 10px var(--ember)}
.vp{position:relative;height:min(76dvh,680px);min-width:0;pointer-events:none}
.vp-tag{position:absolute;right:0;top:0;z-index:3;color:var(--dim)}
.vp-tag b{color:var(--ember);font-weight:500}
@media(max-width:820px){
  .stage{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:start;gap:12px;padding-block:14px}
  .vp{order:-1;height:40dvh;min-height:230px}
  .step h3{font-size:1.45rem;margin:6px 0 8px}
  .txt{padding:14px 16px}
}

/* Anker im Diagramm */
#anch{position:fixed;inset:0;z-index:5;pointer-events:none;display:none}
.al{position:absolute;left:0;top:0;font-family:var(--display);font-weight:860;font-size:40px;line-height:1;font-variation-settings:"wdth" 112;letter-spacing:-.02em;color:var(--fg);white-space:pre;transform-origin:0 0;will-change:transform;text-shadow:0 0 26px rgba(156,196,255,.55)}
.at{position:absolute;left:0;top:0;font-family:var(--mono);font-size:12px;color:var(--dim);white-space:nowrap;transform-origin:0 0}
.ac{position:absolute;left:0;top:0;width:76px;height:50px;transform-origin:0 0}
.acin{position:relative;width:76px;height:50px;filter:drop-shadow(0 0 10px rgba(242,179,94,.45))}
.acin span{position:absolute;left:4px;top:54px;font-family:var(--mono);font-size:10px;color:var(--ember)}


/* helle Abschnitte */
.light{--bg:#E4EAF3;--fg:#0D1424;--dim:#4F6080;--line:rgba(13,20,36,.16);--ember:#2B5FBF;--ember2:#1E4694;background:var(--bg);color:var(--fg)}

/* Kapitelleiste */
.acts{position:fixed;right:clamp(10px,1.8vw,22px);top:50%;transform:translateY(-50%);z-index:44;display:grid;gap:14px;pointer-events:none;opacity:0;transition:opacity .5s}
.acts.on{opacity:1}
.acts li{list-style:none;display:flex;align-items:center;justify-content:flex-end;gap:10px;color:var(--dim);font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:lowercase}
.acts li b{font-weight:500;opacity:0;transform:translateX(6px);transition:opacity .4s,transform .4s}
.acts li i{display:block;width:7px;height:7px;border:1px solid var(--dim);border-radius:50%;transition:background .3s,box-shadow .3s,border-color .3s}
.acts li.on{color:var(--fg)}
.acts li.on b{opacity:1;transform:none}
.acts li.on i{background:var(--ember);border-color:var(--ember);box-shadow:0 0 12px var(--ember)}
.acts{margin:0;padding:0}

/* Film-Szenen */
.v-stage{position:sticky;top:0;height:100dvh;display:grid;align-items:end;padding:0 clamp(16px,4vw,40px) clamp(26px,8vh,76px);pointer-events:none}
.v-stage::before{content:"";position:absolute;inset:auto 0 0 0;height:62%;background:linear-gradient(rgba(5,7,11,0),rgba(5,7,11,.78));pointer-events:none}
.vcap{position:relative;display:grid;max-width:min(680px,100%);width:100%;margin-inline:auto 0;margin-left:max(0px,calc((100vw - 1240px)/2))}
.vcap .vs{grid-area:1/1;opacity:0;transform:translateY(18px);transition:opacity .55s,transform .55s;align-self:end}
.vcap .vs.on{opacity:1;transform:none}
.vs .mono{color:var(--ember)}
.vs h2{margin:10px 0 14px;font-size:clamp(2.4rem,6vw,4.8rem);text-shadow:0 2px 30px rgba(5,7,11,.6)}
.vs p{color:#CDD2DB;max-width:48ch}
.vs .note{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:.92rem;color:var(--fg)}
.v-rail{position:absolute;left:clamp(16px,4vw,40px);right:clamp(16px,4vw,40px);bottom:clamp(12px,3vh,28px);display:flex;gap:6px}
.v-rail i{height:2px;flex:1;background:var(--line);overflow:hidden;position:relative}
.v-rail i b{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:0 50%}

/* ab hier deckend */
.solid{position:relative;z-index:3;background:var(--bg);border-top:1px solid var(--line)}
section.blk{padding-block:clamp(56px,9vw,120px);border-bottom:1px solid var(--line)}
.head{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,52px)}
.head .mono{color:var(--ember)}
.head p{color:var(--dim)}
.tag{align-self:flex-start;color:var(--ember)}
.tag::before{content:"["}.tag::after{content:"]"}
.steps{display:grid;border-top:1px solid var(--line)}
.steps div{display:grid;grid-template-columns:5.4rem 1fr;gap:14px;padding:20px 0;border-bottom:1px solid var(--line)}
.steps b{font-family:var(--mono);font-weight:500;font-size:.78rem;color:var(--ember)}
.steps strong{display:block;font-size:1.15rem;font-weight:780;font-variation-settings:"wdth" 108;margin-bottom:2px}
.steps span{color:var(--dim)}
.contact .wrap{padding-block:var(--ct-pad);display:grid;gap:26px}
.contact h2{font-size:clamp(3.2rem,11vw,10rem);line-height:.88;font-weight:400}
.contact h2 span{font-style:italic;color:var(--ember);text-shadow:0 0 50px rgba(156,196,255,.5)}
.contact p{color:var(--dim)}
footer{border-top:1px solid var(--line);padding-block:26px 60px;color:var(--dim);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}

.no-gl #gl{display:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .grain,.term .caret{animation:none}
  .step,.rail i{transition:none}
}
/* ---------- v22 · Mosaik: ein Inhalt, jedes Format ----------
   Der Rahmen ist die Linie (warm, handelt), die Welt bleibt kühl.
   Text wird nie skaliert, sondern pro Fläche neu gesetzt: jede Zeile füllt die Breite über die Breitenachse von Archivo. */
#mos{position:fixed;inset:0;z-index:1;pointer-events:none;display:none;overflow:hidden}
#mos.on{display:block}
#mosDim{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse 72% 66% at 50% 46%,rgba(6,9,18,.38),rgba(6,9,18,.9))}
#mosBot{position:absolute;left:0;right:0;bottom:0;height:58%;opacity:0;background:linear-gradient(rgba(6,9,18,0),rgba(6,9,18,.86))}
#mosF{position:absolute;inset:0}
.mf{position:absolute;left:0;top:0;transform-origin:0 0;opacity:0;--c1:#EAF0F9;--c2:#F2B35E}
.mf-g{position:absolute;inset:0;background:rgba(6,9,18,.6);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border:1.5px solid var(--gold);box-shadow:0 0 34px rgba(242,179,94,.28),inset 0 0 60px rgba(242,179,94,.06)}
.mf-t{position:absolute;inset:0;overflow:hidden}
.mf-s{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0}
.tk{position:absolute;left:0;top:0;font-family:var(--display);font-weight:820;line-height:1;white-space:pre;color:var(--c1);transform-origin:0 0;will-change:transform}
.tk.g{color:var(--c2)}
#mosC{position:absolute;inset:0;width:100%;height:100%}
.ml{position:absolute;left:0;top:0;white-space:nowrap;will-change:transform,opacity;opacity:0}
.roll{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom}
.roll>span{display:inline-block}
#mosLab{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;color:var(--gold2)}
#mosCnt{display:flex;align-items:baseline;gap:.55em;font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;color:var(--dim)}
#mosCnt .roll{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 62;font-size:3.6rem;line-height:.92;color:var(--gold);letter-spacing:0;text-shadow:0 0 24px rgba(242,179,94,.35)}
.stamp{transform-origin:50% 50%;text-align:center}
#mosOk{transform-origin:100% 50%}
.stamp b{display:block;font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 125;font-size:clamp(2rem,5.2vw,4.4rem);line-height:.9;letter-spacing:-.02em;padding:.14em .32em .08em;border:3px solid currentColor;background:rgba(6,9,18,.55)}
.stamp small{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;margin-top:.55em;text-transform:lowercase}
#mosNo{color:#FF5468}
#mosOk{color:var(--gold)}
#mosTip{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;background:var(--gold);color:#140C04;padding:4px 8px;border-radius:3px;font-weight:500;font-variant-numeric:tabular-nums}
#mosKey,#mosAlt{font-family:var(--mono);font-size:1.05rem;color:var(--fg);border:1px solid rgba(234,240,249,.55);border-bottom-width:3px;border-radius:7px;padding:5px 10px;background:rgba(6,9,18,.75)}
#mosAlt{font-size:.68rem;padding:4px 8px;letter-spacing:.06em;color:var(--dim);border-bottom-width:1px;border-radius:3px}
#mosCur svg{display:block;filter:drop-shadow(0 3px 8px rgba(0,0,0,.55))}
#mosCur span{position:absolute;left:17px;top:21px;background:var(--gold);color:#140C04;font-family:var(--mono);font-size:.68rem;font-weight:500;padding:3px 8px;border-radius:2px 9px 9px 9px;white-space:nowrap}
.mos-on #vcapM h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mos-on #sceneM .v-stage::before{display:none}
@media(max-width:820px){#mosCnt .roll{font-size:2.6rem}.stamp b{border-width:2px}.stamp small{display:none}}

/* ---------- v24 · Plan rein: das Wort wird der Plan ----------
   Die Striche von PLAN fliegen zum Grundriss; das Blatt wird gelesen (Kalibrierung, OCR, Geometrie) und legt sich auf den 3D-Boden. */
#pl{position:fixed;inset:0;z-index:1;pointer-events:none;display:none;overflow:hidden}
#pl.on{display:block}
#plDim{position:absolute;inset:0;background:#05070B;opacity:0}
#plM{position:absolute;inset:0;width:100%;height:100%}
#plS{position:absolute;left:0;top:0;transform-origin:0 0;opacity:0;will-change:transform}

/* ---------- v25 · schnelle Korrekturen ----------
   Eine Zählung: drei Leistungslinien (01 Visualisierung · 02 Messe & Content · 03 Workflows) in Leiste, Statuszeile und Leistungsteil.
   Gold handelt (Linie, Buttons), Blau informiert. Kino-Overlays nur in der Inszenierung, nicht über dem Inhalt. */
.vig,.scan,.hud,.grain{transition:opacity .6s}
.in-content .vig,.in-content .scan,.in-content .hud{opacity:0}
.in-content .grain{opacity:.025}
.btn.primary{background:var(--gold);border-color:var(--gold);color:#140C04;font-weight:500}
.btn.primary:hover{box-shadow:0 0 34px rgba(242,179,94,.55)}
.acts li a{display:flex;align-items:center;justify-content:flex-end;gap:10px;color:inherit;text-decoration:none;pointer-events:auto;padding:4px 0}
.acts li a:hover b,.acts li a:focus-visible b{opacity:1;transform:none}
.acts li a:hover i{border-color:var(--gold)}
.acts li b small{font-size:inherit;color:var(--gold);margin-right:.5em}
.hud .read b{color:var(--gold)}

/* ---------- v26 · Reel: das Portfolio in dreißig Sekunden ----------
   Gebaut mit HyperFrames aus den Kapiteln dieser Seite, Musik und Sounddesign synthetisiert.
   Auf der Seite läuft nur ein stummer Teaser (7,5 s, 0,7 MB); das Reel selbst lädt erst auf Klick, mit Ton. */
.reel{border-bottom:1px solid var(--line)}
.reel .wrap{padding-block:clamp(56px,8vw,110px);display:grid;gap:clamp(20px,3vw,34px)}
.reel-hd{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 40px}
.reel-hd > div{display:grid;gap:14px}
.reel-hd h2{max-width:11em}
.reel-hd h2 em{color:var(--gold2);text-shadow:0 0 38px rgba(242,179,94,.3)}
.reel-hd p{color:var(--dim);max-width:36ch;margin:0}
.reel-card{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:1.5px solid var(--gold);border-radius:14px;overflow:hidden;background:#000 url("../vid/reel-poster.jpg") center/cover no-repeat;color:var(--fg);font:inherit;text-align:left;cursor:pointer;transition:box-shadow .4s}
.reel-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .4s}
.reel-card::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(6,9,18,0) 42%,rgba(6,9,18,.82));pointer-events:none}
.reel-card:hover,.reel-card:focus-visible{box-shadow:0 0 70px rgba(242,179,94,.28)}
.reel-card:hover video{transform:scale(1.035);filter:brightness(.82)}
.reel-play{position:absolute;left:clamp(16px,3vw,36px);bottom:clamp(16px,3vw,32px);z-index:1;display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 118;text-transform:uppercase;font-size:clamp(1.25rem,3.4vw,2.8rem);letter-spacing:-.01em;line-height:1}
.reel-play i{width:clamp(46px,6vw,78px);aspect-ratio:1;border-radius:50%;background:var(--gold);display:grid;place-items:center;flex:none;box-shadow:0 0 40px rgba(242,179,94,.5);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.reel-play i::before{content:"";margin-left:14%;border-style:solid;border-width:.36em 0 .36em .6em;border-color:transparent transparent transparent #140C04}
.reel-card:hover .reel-play i{transform:scale(1.1)}
.reel-play small{display:block;margin-top:8px;font-family:var(--mono);font-weight:400;font-variation-settings:normal;font-size:clamp(.62rem,1vw,.76rem);letter-spacing:.1em;text-transform:lowercase;color:var(--gold2)}
.reel-tag{position:absolute;right:clamp(14px,2.4vw,28px);bottom:clamp(18px,3vw,36px);z-index:1;font-size:.68rem;letter-spacing:.1em;color:var(--fg);background:rgba(6,9,18,.62);padding:6px 11px;border-radius:999px;border:1px solid var(--line)}
.reel-ch{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.74rem;letter-spacing:.06em;color:var(--dim);margin:0;padding:0;list-style:none}
.reel-ch b{color:var(--gold);font-weight:500;margin-right:.5em}
@media(max-width:620px){.reel-tag{display:none}}
/* Spieler: ein modaler Dialog über der Seite; die Inszenierung dahinter scrollt nicht mit */
.reel-dlg{width:min(1600px,94vw,calc((94dvh - 62px)*16/9));max-width:none;max-height:none;padding:0;border:1.5px solid var(--gold);border-radius:14px;background:#000;color:var(--fg);overflow:hidden;cursor:auto;box-shadow:0 0 90px rgba(242,179,94,.22);overscroll-behavior:contain}
.reel-dlg[open]{animation:rdIn .55s cubic-bezier(.2,.7,.2,1)}
@keyframes rdIn{from{opacity:0;transform:translateY(18px) scale(.96)}}
.reel-dlg::backdrop{background:rgba(3,5,10,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.reel-dlg video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.reel-stage{position:relative}
/* v59 · unsichtbare Link-Fläche exakt über dem im Film gezeichneten Button (678/720, 563 × 71 von 1920 × 1080) */
.reel-hit{position:absolute;left:35.34%;top:66.67%;width:29.33%;height:6.57%;border-radius:6px;cursor:pointer}
.reel-hit:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.reel-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:10px 14px;background:var(--bg);font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--dim)}
.reel-foot > div{display:flex;flex-wrap:wrap;gap:8px}
.reel-foot .btn{padding:9px 14px;font-size:.72rem;cursor:pointer}
.reel-foot button.btn{background:none;color:var(--fg);font-family:var(--mono)}
.reel-foot button.btn:hover{background:var(--fg);color:var(--bg)}
.reel-pill{position:fixed;left:clamp(16px,4vw,40px);bottom:clamp(28px,8vh,72px);z-index:40;display:flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border:1px solid rgba(242,179,94,.55);border-radius:12px;background:rgba(6,9,18,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-decoration:none;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg);transition:opacity .5s,border-color .3s,box-shadow .3s}
.reel-pill .rp-v{position:relative;width:clamp(96px,9vw,156px);aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000 url("../vid/reel-poster.jpg") center/cover;flex:none}
.reel-pill .rp-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-pill .rp-t{display:flex;flex-direction:column;gap:3px;font-size:.84rem}.reel-pill small{font-size:.62rem;letter-spacing:.1em;color:var(--dim);text-transform:none}
.reel-pill i{position:absolute;left:50%;top:50%;margin:-12px 0 0 -12px;width:24px;height:24px;border-radius:50%;background:var(--gold);display:grid;place-items:center;box-shadow:0 0 18px rgba(242,179,94,.6)}
.reel-pill i::before{content:"";margin-left:2px;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #140C04}
.reel-pill:hover{border-color:var(--gold);box-shadow:0 0 30px rgba(242,179,94,.35)}
.reel-pill.gone{opacity:0;pointer-events:none}
@media(max-width:620px){.reel-pill{left:50%;bottom:calc(clamp(28px,8vh,72px) + 118px);transform:translateX(-50%)}}
.nav-reel{color:var(--gold)!important}
.has-cur .reel-card{cursor:none}

/* ---------- v27 · Zeichen: das Horizont-D ----------
   Das D ist das schwarze Loch im Profil, der goldene Rand der Horizont, innen die 3: die Welt, die man nur von drinnen sieht.
   Ersetzt das goldene Quadrat. Satz und Regeln: 3D-Welten_Logo/LIESMICH.txt */
.brand svg{width:26px;height:26px;flex:none;overflow:visible;filter:drop-shadow(0 0 7px rgba(242,179,94,.32));transition:filter .3s}
.brand:hover svg{filter:drop-shadow(0 0 12px rgba(242,179,94,.6))}
.ct-mark{display:block;width:var(--ct-mk);height:auto;overflow:visible;margin-bottom:6px}

/* ---------- v28 · Kopfzeile über hellen Teilen ----------
   Im Inhaltsteil liegt die Kopfzeile auf dunklem Glas statt auf dem Verlauf; über .light wird sie zu hellem Glas mit dunkler Schrift, das Zeichen wechselt in die Fassung „hell“.
   Beide Hintergründe liegen als Ebenen hinter dem Inhalt und blenden weich über. */
header.top{background:none}
header.top::before,header.top::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transition:opacity .35s}
header.top::after{background:linear-gradient(var(--bg),rgba(5,7,11,0))}
header.top::before{background:rgba(228,234,243,.86);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 rgba(13,20,36,.1);opacity:0}
.in-content header.top::after{background:rgba(6,9,18,.8);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 rgba(205,222,255,.08)}
.hdr-light header.top::before{opacity:1}
.hdr-light header.top::after{opacity:0}
.brand,header.top nav a{transition:color .35s}
.brand .hole,.brand .rim{transition:fill .35s}
.hdr-light .brand{color:#0D1424}
.hdr-light header.top nav a{color:#4F6080}
.hdr-light header.top nav a:hover{color:#0D1424}
.hdr-light header.top .nav-reel{color:#8F5E14!important}
.hdr-light .brand .hole{fill:#0B1020}
.hdr-light .brand .rim{fill:#C9862C}
.hdr-light .brand svg{filter:none}

/* ---------- v29 · Weltenkarte hinter dem Horizont ----------
   Nach dem Sprung durch den Horizont öffnet sich die Karte: drei Welten mit ihren Unterwelten, die goldene Linie führt durch alle.
   Inhaltsverzeichnis und Struktur in einem; jede Welt und jede Unterwelt ist ein Link. Am Ende taucht die Karte in Welt 01 ein. */
#wk{position:fixed;inset:0;z-index:3;pointer-events:none;visibility:hidden}
#wk.on{visibility:visible}
.wk-on .vig,.wk-on .scan{opacity:0}
#wkDim{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse 85% 75% at 50% 56%,rgba(6,9,18,.6),rgba(6,9,18,.9))}
#wkMap{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;will-change:transform}
#wkSvg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.wk-grid{fill:none;stroke:rgba(205,222,255,.1);stroke-width:1;stroke-dasharray:1 7}
.wk-tick{stroke:rgba(205,222,255,.22);stroke-width:1}
.wk-ln{fill:none;stroke:#F2B35E;stroke-width:2.2;stroke-linecap:round}
/* v40: Glanz als zweite, breite Linie statt CSS-Schatten — der Schatten wurde beim Zoomen jedes Bild neu gerechnet */
.wk-lnG{fill:none;stroke:rgba(242,179,94,.26);stroke-width:9;stroke-linecap:round}
.wk-orb{fill:none;stroke:rgba(205,222,255,.34);stroke-width:1;stroke-dasharray:2 5}
.wk-sp{stroke:rgba(242,179,94,.45);stroke-width:1}
#wkNav,#wkNav ul{list-style:none;margin:0;padding:0}
.wk-w{position:absolute;left:0;top:0;border-radius:50%;display:grid;place-content:center;justify-items:center;text-align:center;text-decoration:none;color:var(--fg);
  background:radial-gradient(circle at 34% 28%,#1C2746,#080C18 58%,#000 100%);
  box-shadow:0 0 0 1.5px #F2B35E,0 0 46px rgba(242,179,94,.22),inset -18px -26px 50px rgba(0,0,0,.65);
  pointer-events:auto;transition:box-shadow .35s,opacity .35s;will-change:transform,opacity}
.wk-w b{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 62;color:#F2B35E;line-height:.82;font-size:var(--nf);text-shadow:0 0 30px rgba(242,179,94,.4)}
.wk-w span{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 112;text-transform:uppercase;letter-spacing:.02em;font-size:var(--tf);line-height:1.05;margin-top:.55em;max-width:8em}
.wk-w small{font-family:var(--mono);font-size:var(--sf);letter-spacing:.05em;color:#FFD9A0;margin-top:.8em;max-width:15ch;line-height:1.4;text-transform:lowercase}
.wk-w.tiny small{display:none}
.wk-w:hover,.wk-w:focus-visible{box-shadow:0 0 0 2px #FFD9A0,0 0 80px rgba(242,179,94,.5),inset -18px -26px 50px rgba(0,0,0,.65);outline:none}
.wk-s{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;padding:5px 6px;text-decoration:none;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:#C9D3E6;white-space:nowrap;pointer-events:auto;transition:color .25s,opacity .35s;will-change:transform,opacity}
.wk-s.l{flex-direction:row-reverse}
.wk-s span{background:rgba(6,9,18,.6);padding:2px 6px;border-radius:4px}
.wk-s i{width:9px;height:9px;border-radius:50%;border:1.5px solid #F2B35E;background:#060912;flex:none;box-shadow:0 0 8px rgba(242,179,94,.55);transition:background .25s}
.wk-s:hover,.wk-s:focus-visible{color:#FFD9A0;outline:none}
.wk-s:hover i,.wk-s:focus-visible i{background:#F2B35E}
#wk[data-hot] .wk-w,#wk[data-hot] .wk-s{opacity:.32!important}
#wk[data-hot="0"] [data-g="0"],#wk[data-hot="1"] [data-g="1"],#wk[data-hot="2"] [data-g="2"]{opacity:1!important}
#wkHead{position:absolute;left:clamp(16px,4vw,56px);top:calc(var(--hh) + clamp(14px,4vh,40px));max-width:min(540px,44vw);display:grid;gap:12px;will-change:transform,opacity}
#wkHead .mono{color:#F2B35E;font-size:.74rem;letter-spacing:.16em;text-transform:lowercase}
#wkHead h2{font-size:clamp(2.1rem,4vw,3.8rem);line-height:.95}
#wkHead h2 em{color:#FFD9A0;text-shadow:0 0 38px rgba(242,179,94,.3)}
#wkHead p{font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;color:var(--dim);line-height:1.6;max-width:44ch}
#wkHint{position:absolute;left:50%;bottom:clamp(16px,3.6vh,36px);transform:translateX(-50%);font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;white-space:nowrap}
#wkHint b{color:#F2B35E;font-weight:400}
@media(max-width:700px){
  #wkHead{max-width:none;right:16px;gap:8px}
  #wkHead h2{font-size:2.05rem}
  #wkHead p{font-size:.7rem}
  .wk-s{font-size:.7rem;padding:7px 4px}
  #wkHint{font-size:.62rem}
}

/* ---------- v30 · lebende Welten ----------
   Die Kugeln zeichnet ein eigener WebGL-Kontext (Blobs wie im Reel); die Links bleiben als Fläche mit Text darüber.
   Ebenen: Abdunklung · Linien (transformiert) · Blobs (Canvas, unverzerrt) · Beschriftung und Links (transformiert). */
.wkL{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;will-change:transform}
#wkGl{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none}
#wk:not(.nogl) .wk-w{background:none;box-shadow:none}
#wk:not(.nogl) .wk-w:hover,#wk:not(.nogl) .wk-w:focus-visible{box-shadow:none}
#wk:not(.nogl) .wk-w:focus-visible{outline:2px dashed #FFD9A0;outline-offset:8px}
#wk:not(.nogl) .wk-w b,#wk:not(.nogl) .wk-w span,#wk:not(.nogl) .wk-w small{text-shadow:0 2px 16px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.9)}
#wk:not(.nogl) .wk-s i{border:0;background:none;box-shadow:none;width:var(--md,16px);height:var(--md,16px)}
#wk:not(.nogl) .wk-s:hover i,#wk:not(.nogl) .wk-s:focus-visible i{background:none}
.wk-s.b{flex-direction:column;gap:3px}

/* ---------- v35 · Begriffe im Wurmloch ----------
   Im Tunnel fliegen die Leistungsbegriffe als Lichtspuren vorbei, an der Karte kreisen sie als Ring im Hintergrund.
   Die Ebene liegt in #wk zwischen Abdunklung und Karte; sichtbar ist sie schon im Tunnel, bevor die Karte erscheint. */
#bz{position:absolute;inset:0;overflow:hidden;pointer-events:none;visibility:hidden}
#bz.on{visibility:visible}
.bz-w{position:absolute;left:0;top:0;white-space:nowrap;font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:#D4E5FF;opacity:0;will-change:transform,opacity;transition:color .4s}
.bz-w.s{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,2.5vw,2.7rem);letter-spacing:-.005em;text-transform:none;color:#EAF0F9;text-shadow:0 0 22px rgba(156,196,255,.35)}
.bz-w.h{color:#FFD9A0}
.bz-w.s.h{text-shadow:0 0 26px rgba(242,179,94,.55)}

/* ---------- v36 · Karte als Drehkreuz, Werkzeuge live, kurzer Schluss ---------- */
#wk.hub #wkDim{background:radial-gradient(ellipse 85% 75% at 50% 56%,rgba(6,9,18,.9),rgba(6,9,18,.97))}
.wk-ln0{fill:none;stroke:rgba(242,179,94,.38);stroke-width:1.2;stroke-dasharray:2 7}
.wk-w .wk-seen{display:none;font-family:var(--mono);font-style:normal;font-size:var(--sf);letter-spacing:.08em;color:#9CC4FF;margin-top:.7em;text-transform:lowercase}
.wk-w.done .wk-seen{display:block}
.wk-w.done small{display:none}
.wk-w.done b{opacity:.6}
.head h2 em{font-style:italic;color:var(--gold2);text-shadow:0 0 38px rgba(242,179,94,.3)}
.wz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.wz-card{position:relative;display:grid;gap:14px;align-content:start;padding:clamp(18px,2.4vw,28px);border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,rgba(11,17,34,.9),rgba(6,9,18,.6));text-decoration:none;color:var(--fg);transition:border-color .3s,box-shadow .3s,transform .3s}
.wz-card:hover,.wz-card:focus-visible{border-color:var(--gold);box-shadow:0 0 60px rgba(242,179,94,.16);transform:translateY(-3px);outline:none}
.wz-card h3{font-size:clamp(2.2rem,4.6vw,3.6rem);font-weight:900;font-variation-settings:"wdth" 125;text-transform:uppercase;letter-spacing:-.025em;line-height:.88}
.wz-card p{color:var(--dim)}
.wz-card ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.wz-card li{border:1px solid rgba(242,179,94,.45);color:var(--gold2);border-radius:999px;padding:5px 11px;font-size:.68rem;letter-spacing:.05em}
.wz-card .go,.wz-more .go{font-family:var(--mono);font-size:.78rem;color:var(--gold);letter-spacing:.06em}
.wz-demo{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#0a0f1d;box-shadow:inset 0 0 0 1px rgba(205,222,255,.12)}
.wz-demo::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 23px,rgba(205,222,255,.04) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,rgba(205,222,255,.04) 23px 24px);pointer-events:none}
.wz-lab{position:absolute;left:12px;bottom:10px;color:var(--dim);font-size:.68rem}
.wz-mc{display:grid;place-items:center}
.wz-fr{position:relative;container-type:size;width:var(--w,60%);height:var(--h,60%);border-radius:4px;background:linear-gradient(135deg,#1A2A4C,#0B1122 62%);box-shadow:0 0 0 1.5px var(--gold),0 0 40px rgba(242,179,94,.22);display:flex;flex-direction:column;justify-content:center;overflow:hidden;
  transition:width .8s cubic-bezier(.2,0,.35,1),height .8s cubic-bezier(.2,0,.35,1)}
.wz-fr b{font-weight:900;font-variation-settings:"wdth" 110;text-transform:uppercase;line-height:.9;font-size:15cqmin;letter-spacing:-.01em}
.wz-fr em{font-family:var(--serif);font-style:italic;color:var(--gold2);font-size:14cqmin;line-height:1}
/* Abstände in Container-Einheiten nur an den Kindern: am Rahmen selbst würden sie sich auf die Seite beziehen */
.wz-fr b,.wz-fr em{display:block;padding:0 9cqmin}
.wz-fr em{margin-top:2cqmin}
.wz-mo i{position:absolute;display:block;font-style:normal;transition:left 1.2s cubic-bezier(.2,0,.35,1),top 1.2s cubic-bezier(.2,0,.35,1),width 1.2s cubic-bezier(.2,0,.35,1),height 1.2s cubic-bezier(.2,0,.35,1),transform 1.2s cubic-bezier(.2,0,.35,1),background-color 1.2s,border-radius 1.2s cubic-bezier(.2,0,.35,1),font-size 1.2s cubic-bezier(.2,0,.35,1)}
.wz-mo .t{left:6%;top:8%;font-weight:900;font-variation-settings:"wdth" 110;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(1rem,1.7vw,1.35rem);line-height:1;white-space:nowrap;color:var(--fg)}
.wz-mo .bx{left:9%;top:36%;width:22%;height:30%;background-color:#F2B35E;border-radius:2px}
.wz-mo .ci{left:80%;top:10%;width:11%;height:19.6%;border-radius:50%;background-color:#9CC4FF}
.wz-mo .pf{left:40%;top:74%;width:20%;height:9%;background-color:#FF5468;border-radius:2px}
.wz-mo.s2 .t{left:30%;top:40%;font-size:clamp(1.7rem,3.4vw,2.8rem)}
.wz-mo.s2 .bx{left:64%;top:56%;width:26%;height:30%;background-color:#3D6FB8;transform:rotate(30deg)}
.wz-mo.s2 .ci{left:8%;top:64%}
.wz-mo.s2 .pf{left:82%;top:8%;width:11%;height:19.6%;border-radius:50%}
.wz-more{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-top:18px;padding:18px clamp(18px,2.4vw,28px);border:1px dashed var(--line);border-radius:16px;text-decoration:none;color:var(--dim);transition:border-color .3s}
.wz-more:hover,.wz-more:focus-visible{border-color:var(--gold);outline:none}
.wz-more > .mono:first-child{color:var(--ember)}
.wz-more b{color:var(--fg);font-weight:700}
.wz-more > span:nth-child(2){flex:1 1 320px}
.ct-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:start}
.contact .ct-grid .ct-lead{color:var(--fg);font-size:1.12rem;max-width:46ch}
.ct-grid p+p{margin-top:12px}
.ct-mail{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.ct-go{font-size:1rem;padding:16px 26px;text-transform:none;letter-spacing:.02em}
.ct-copy{background:none;color:var(--fg);border-color:rgba(234,240,249,.45);cursor:pointer}
.ct-copy:hover,.ct-copy:focus-visible{background:var(--fg);color:var(--bg)}
.ct-ok{color:var(--gold2)}
@media(max-width:860px){.wz,.ct-grid{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.wz-fr,.wz-mo i{transition:none}}

/* ---------- v37 · Ihr Name auf der Wand, Prompt-Automat, Atmosphäre je Welt ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wall-in{display:flex;align-items:center;gap:12px;margin-top:18px;max-width:460px;padding:12px 16px;border:1.5px solid var(--gold);border-radius:6px;background:#0A0612 radial-gradient(circle,rgba(242,179,94,.16) 1px,transparent 1.7px) 0 0/6px 6px;box-shadow:0 0 34px rgba(242,179,94,.25);pointer-events:none}
.vs.on .wall-in{pointer-events:auto}
.wall-in input,#wallChip input{all:unset;flex:1;min-width:0;font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 110;letter-spacing:.02em;text-transform:uppercase;color:#FFD9A0;text-shadow:0 0 12px rgba(242,179,94,.85);caret-color:#FFD9A0}
.wall-in input{font-size:clamp(1.3rem,2.4vw,2rem)}
/* Eingabefelder melden sonst ihre Standardbreite als Mindestbreite und schieben die Bildunterschrift über den Rand */
.wall-in input,#wallChip input{width:0;flex:1 1 auto}
.wall-in{max-width:min(460px,100%);box-sizing:border-box}
.wall-in input::placeholder,#wallChip input::placeholder{color:rgba(255,217,160,.32);text-shadow:none}
.wall-in i{font-style:normal;color:var(--gold);font-family:var(--mono);font-size:.74rem;white-space:nowrap}
#wallChip{position:fixed;left:50%;bottom:clamp(44px,7vh,64px);transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid rgba(242,179,94,.7);border-radius:999px;background:rgba(10,6,18,.86);opacity:0;pointer-events:none;transition:opacity .4s;width:min(320px,80vw)}
#wallChip .mono{color:var(--gold);font-size:.66rem;white-space:nowrap}
#wallChip input{font-size:.95rem}
#mos.on + #wallChip{opacity:1;pointer-events:auto}
.wk-on #wallChip{opacity:0!important;pointer-events:none!important}   /* v41: nicht über der Weltenkarte */

.atm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}   /* .at ist schon vergeben (Anker im Diagramm) */
.at-m{position:relative;border:1px solid var(--line);border-radius:16px;padding:clamp(14px,2vw,22px);background:linear-gradient(180deg,rgba(11,17,34,.95),rgba(6,9,18,.7));display:grid;gap:14px;--ac:#FF5468}
.at-m.g{--ac:#F2B35E}
.at-hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.at-hd b{font-weight:900;font-variation-settings:"wdth" 125;text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.02em;line-height:.9;color:var(--ac)}
.at-hd .mono{color:var(--dim)}
.at-win{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px;border-radius:10px;background:#03050A;box-shadow:inset 0 0 0 1.5px var(--ac),inset 0 10px 26px rgba(0,0,0,.85)}
.at-r{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:6px;background:#0a0f1d}
.at-s{position:absolute;left:0;right:0;top:0}
.at-s.spin{filter:blur(1.4px) brightness(1.1)}
.at-c{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden}
.at-c i{position:absolute;inset:0;background-size:cover;background-position:50% 45%}
.at-tag{position:absolute;left:6px;right:6px;bottom:6px;font-family:var(--mono);font-size:.62rem;letter-spacing:.02em;padding:4px 6px;border-radius:4px;background:rgba(6,9,18,.84);color:#FFB3BD;line-height:1.3}
.at-m.g .at-tag{color:#FFD9A0}
.at-fn{position:absolute;left:6px;top:6px;max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:.58rem;color:rgba(234,240,249,.85);background:rgba(6,9,18,.6);padding:2px 5px;border-radius:3px}
.at-ft{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.at-res{color:var(--dim)}
.at-m.win .at-res{color:#FFD9A0}.at-m.lose .at-res{color:#FFB3BD}
.at-go{display:inline-flex;align-items:center;gap:12px;padding:11px 18px 11px 14px;border:1.5px solid var(--ac);border-radius:999px;background:none;color:var(--fg);font-family:var(--mono);font-size:.82rem;letter-spacing:.04em;cursor:pointer;transition:background .25s}
.at-go:hover,.at-go:focus-visible{background:rgba(255,255,255,.07);outline:none;box-shadow:0 0 24px var(--ac)}
.at-go i{position:relative;width:14px;height:24px;transform-origin:50% 100%;transition:transform .2s cubic-bezier(.3,.7,.3,1.4)}
.at-go i::before{content:"";position:absolute;left:6px;top:8px;width:2px;height:16px;background:var(--fg)}
.at-go i::after{content:"";position:absolute;left:1px;top:0;width:12px;height:12px;border-radius:50%;background:var(--ac);box-shadow:0 0 10px var(--ac)}
.at-go.pull i{transform:scaleY(-.7)}
.at-m.win .at-win{animation:atWin 1.1s ease-out}
.at-m.lose .at-win{animation:atLose .45s}
@keyframes atWin{0%{box-shadow:inset 0 0 0 1.5px var(--ac),inset 0 10px 26px rgba(0,0,0,.85)}25%{box-shadow:inset 0 0 0 4px #FFE7B8,0 0 70px rgba(242,179,94,.7)}100%{box-shadow:inset 0 0 0 1.5px var(--ac),inset 0 10px 26px rgba(0,0,0,.85)}}
@keyframes atLose{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.at-coin{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF4D6,#F2B35E 55%,#8F5E14);pointer-events:none;z-index:2}
.at-sum{margin-top:18px;color:var(--dim);min-height:1.5em}
@media(max-width:860px){.atm{grid-template-columns:minmax(0,1fr)}}

/* Atmosphäre: Licht je Welt (Ebene über dem Bild, unter Overlays und Text), Akzentfarbe, Cursor */
#atmo{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;display:block}
html{--wc:var(--gold)}
html[data-world="1"]{--wc:#FFC46B}
html[data-world="2"]{--wc:#C9A0FF}
html[data-world="3"]{--wc:#7FD8FF}
.prog i{background:var(--wc);box-shadow:0 0 12px var(--wc);transition:background .6s,box-shadow .6s}
.hud i{transition:border-color .6s}
html[data-world] .hud i{border-color:var(--wc)}
html[data-world] .hud .read b,html[data-world] .vs .mono,html[data-world] .step .mono{color:var(--wc);transition:color .6s}
html[data-world] .v-rail i b{background:var(--wc)}
#ring::before,#ring::after{content:"";position:absolute;opacity:0;transition:opacity .3s;pointer-events:none}
html[data-world="1"] #ring{width:52px;height:52px;margin:-26px 0 0 -26px;border:1.5px solid rgba(255,206,130,.9);background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.16),rgba(255,206,130,.05) 62%)}
html[data-world="1"] #ring::after{opacity:1;left:calc(50% + 17px);top:calc(50% + 17px);width:16px;height:2.5px;border-radius:2px;background:rgba(255,206,130,.9);transform:rotate(45deg);transform-origin:0 50%}
html[data-world="1"] #cur{background:#FFC46B;box-shadow:0 0 12px #FFC46B}
html[data-world="2"] #cur{width:8px;height:8px;margin:-4px 0 0 -4px;background:#FF6FD8;box-shadow:0 0 10px 3px rgba(255,111,216,.85),0 0 34px 10px rgba(180,100,255,.45)}
html[data-world="2"] #ring{width:24px;height:24px;margin:-12px 0 0 -12px;border-color:rgba(255,140,225,.45)}
html[data-world="3"] #ring{width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:0;border:1px solid rgba(127,216,255,.9)}
html[data-world="3"] #ring::before{opacity:1;left:50%;top:-14px;bottom:-14px;width:1px;background:rgba(127,216,255,.6)}
html[data-world="3"] #ring::after{opacity:1;top:50%;left:-14px;right:-14px;height:1px;background:rgba(127,216,255,.6)}
html[data-world="3"] #cur{background:#7FD8FF;box-shadow:0 0 10px #7FD8FF}
#curXY{position:fixed;left:0;top:0;z-index:100;pointer-events:none;display:none;font:500 10px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.06em;color:#9BE2FF;white-space:nowrap}
.has-cur.cur-live[data-world="3"] #curXY{display:block}
@media(prefers-reduced-motion:reduce){.at-m.win .at-win,.at-m.lose .at-win{animation:none}}

/* ---------- v38 · Welt 01: Röntgenlinse ---------- */
#lensUi{position:fixed;left:50%;top:calc(var(--hh) + 16px);transform:translate(-50%,-8px);z-index:6;display:flex;align-items:center;gap:4px;padding:5px 6px 5px 14px;border:1px solid rgba(255,206,130,.55);border-radius:999px;background:rgba(6,9,18,.8);opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;white-space:nowrap}
#lensUi.on{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
#lensUi .mono{color:#FFC46B;font-size:.66rem;margin-right:6px}
#lensUi button{all:unset;cursor:pointer;font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;color:#C9D3E6;padding:5px 10px;border-radius:999px;transition:background .2s,color .2s}
#lensUi button:hover,#lensUi button:focus-visible{color:#fff;background:rgba(255,255,255,.1)}
#lensUi button.on{background:#FFC46B;color:#140C04}
#lensLab{position:fixed;left:0;top:0;z-index:6;pointer-events:none;font:500 10px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.06em;color:#140C04;background:#FFC46B;padding:4px 8px;border-radius:3px;white-space:nowrap;opacity:0;transition:opacity .3s}
#lensLab.on{opacity:1}
@media(max-width:620px){#lensUi .mono{display:none}#lensUi{padding:4px}#lensUi button{padding:5px 8px;font-size:.62rem}}

/* ---------- v39 · Sonnenlauf, Schneekugel-Welten ---------- */
#sunCv{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;display:none;opacity:0}
#sunCv.on{display:block}
.sun-stage{position:sticky;top:0;height:100dvh;pointer-events:none}
.sun-stage::before{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(rgba(5,7,11,0),rgba(5,7,11,.72))}
.sun-hud{position:absolute;right:clamp(16px,4vw,48px);top:calc(var(--hh) + clamp(18px,4vh,40px));display:grid;justify-items:end;gap:10px;padding:16px 18px;background:rgba(6,9,18,.55);border:1px solid rgba(255,206,130,.35);border-radius:12px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sun-clock{display:grid;justify-items:end;gap:4px}
.sun-clock b{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 80;font-size:clamp(2.6rem,5vw,4.2rem);line-height:.85;letter-spacing:-.02em;color:#FFD9A0;font-variant-numeric:tabular-nums;text-shadow:0 0 30px rgba(242,179,94,.35)}
.sun-clock .mono{color:var(--dim);font-size:.66rem}
#sunArc{width:min(240px,46vw);height:auto;overflow:visible}
#sunArc .hz{stroke:rgba(205,222,255,.35);stroke-width:1}
#sunArc .pa{fill:none;stroke:rgba(255,206,130,.55);stroke-width:1.4;stroke-dasharray:3 4}
#sunArc circle{fill:#FFD9A0;filter:drop-shadow(0 0 8px rgba(255,190,90,.9))}
#sunArc circle.dn{fill:#7FA8FF;filter:drop-shadow(0 0 8px rgba(127,168,255,.9))}
#sunArc text{fill:var(--dim);font:500 9px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em}
.sun-val{display:flex;gap:14px;color:var(--dim);font-size:.68rem}
.sun-val b{color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums}
.sun-cap{position:absolute;left:max(clamp(16px,4vw,40px),calc((100vw - 1240px)/2 + 40px));bottom:clamp(26px,8vh,76px);max-width:min(560px,calc(100% - 32px));display:grid;gap:10px}
.sun-cap .mono{color:var(--wc,var(--ember))}
.sun-cap h2{font-size:clamp(2.4rem,6vw,4.8rem);text-shadow:0 2px 30px rgba(5,7,11,.6)}
.sun-cap h2 em{color:#FFD9A0}
.sun-cap p{color:#CDD2DB;max-width:46ch}
@media(max-width:700px){.sun-hud{padding:10px 12px;gap:6px}.sun-clock b{font-size:2.3rem}}
/* Glaskugeln: der Name steht als Schild über der Kugel, damit die Miniatur frei bleibt */
#wk:not(.nogl) .wk-w.glass{place-content:end center;padding-bottom:calc(100% + 4px);gap:0}
#wk:not(.nogl) .wk-w.glass b{font-size:calc(var(--nf) * .42)}
#wk:not(.nogl) .wk-w.glass small{display:none}
#wk:not(.nogl) .wk-w.glass span{margin-top:.25em}
#wk:not(.nogl) .wk-w.glass .wk-seen{margin-top:.35em}
@media(max-width:700px){#wk:not(.nogl) .wk-w.glass b{display:none}}

/* ---------- v34 · Leistung ----------
   Gemessen in Headless-Chrome (Retina, 1440×900): Ebenen, die bei jedem Bild neu gemalt wurden,
   und ein Filmkorn aus SVG-Rauschen auf 200 % Bildfläche (≈ 83 MB Grafikspeicher bei Retina).
   Jetzt: Korn als kleine Rauschkachel, eigene Ebenen für alles, was sich pro Bild ändert. */
.grain{inset:-8%;width:116%;height:116%;background-image:url("../img/grain.png");background-size:96px 96px}
.hud .read{will-change:transform;contain:layout paint}
.rgb{will-change:transform}
.mf-g{-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
.v-rail i b{will-change:transform}
/* Glas der hellen Kopfzeile nur, wenn es sichtbar ist — sonst rechnet der Weichzeichner bei jedem Bild unsichtbar mit */
header.top::before{-webkit-backdrop-filter:none;backdrop-filter:none}
.hdr-light header.top::before{-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
#p2hPerf{position:fixed;right:10px;bottom:10px;z-index:9999;font:500 11px/1.5 "JetBrains Mono",ui-monospace,monospace;color:#EAF0F9;background:rgba(6,9,18,.86);border:1px solid rgba(242,179,94,.6);border-radius:8px;padding:8px 10px;pointer-events:none;white-space:pre}


/* v48 · Tastatur: Was unsichtbar ist, ist auch nicht fokussierbar (visibility folgt der Deckkraft, beim Ausblenden verzögert) */
#wallChip{visibility:hidden;transition:opacity .4s,visibility 0s linear .4s}
#mos.on + #wallChip{visibility:visible;transition:opacity .4s,visibility 0s}
.wk-on #wallChip{visibility:hidden!important}
#lensUi{visibility:hidden;transition:opacity .35s,transform .35s,visibility 0s linear .35s}
#lensUi.on{visibility:visible;transition:opacity .35s,transform .35s,visibility 0s}
.acts{visibility:hidden;transition:opacity .5s,visibility 0s linear .5s}
.acts.on{visibility:visible;transition:opacity .5s,visibility 0s}
.reel-pill.gone{visibility:hidden;transition:opacity .5s,border-color .3s,box-shadow .3s,visibility 0s linear .5s}
/* #wallName bleibt erreichbar (auch für Screenreader); bei Fokus scrollt name-auf-der-wand.js den Schritt in Sicht */
/* v48 · Sprungmarken: erster Tabulator-Stopp, nur bei Fokus sichtbar */
.skip a{position:fixed;left:16px;top:calc(env(safe-area-inset-top,0px) + 10px);z-index:200;transform:translateY(-200%);padding:12px 18px;border-radius:6px;background:var(--gold);color:#140C04;font-family:var(--mono);font-size:.82rem;letter-spacing:.04em;text-decoration:none;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.skip a:focus{transform:none;outline:2px solid #FFD9A0;outline-offset:3px}

/* v49 · Lesbarkeit: keine Beschriftung unter 12 px (gemessen über alle Szenen, Desktop und Handy).
   Ausgenommen: Zierelemente (schwebende Begriffe, Grundriss-Textur in 3D) und die Bemaßung der Zeichnung im Planblatt „Über mich“ (aria-hidden, Zeichnungsmaßstab).
   Mono-Etiketten auf .75rem, Laufweite so gesenkt, dass die Zeilenbreite gleich bleibt. */
.mono{font-size:.75rem;letter-spacing:.08em}
.acts li{font-size:.75rem;letter-spacing:.02em}
#mosLab,#mosCnt{font-size:.75rem;letter-spacing:.11em}
.stamp small{font-size:.75rem;letter-spacing:.1em}
#mosTip{font-size:.75rem;letter-spacing:.02em}
#mosAlt{font-size:.75rem;letter-spacing:.02em}
#mosCur span{font-size:.75rem}
.reel-play small{font-size:clamp(.75rem,1vw,.8rem)}
.reel-tag{font-size:.75rem;letter-spacing:.07em}
.reel-ch{font-size:.75rem;letter-spacing:.05em}
.reel-foot,.reel-foot .btn{font-size:.75rem}
.reel-pill{font-size:.75rem;letter-spacing:.1em}
#wkHead .mono{font-size:.75rem;letter-spacing:.15em}
#wkHead p{font-family:var(--display);font-size:1rem;letter-spacing:0;line-height:1.5}
#wkHint{font-size:.75rem;letter-spacing:.11em}
.wk-s{font-size:.75rem;letter-spacing:.07em}
.wk-w span{font-size:max(12px,var(--tf))}
.wk-w .wk-seen{font-size:max(12px,var(--sf))}
.wz-card li{font-size:.75rem;letter-spacing:.02em}
.wz-lab{font-size:.75rem}
.wall-in i{font-size:.75rem}
#wallChip .mono{font-size:.75rem;letter-spacing:.06em}
.at-tag{font-size:.75rem;letter-spacing:0;line-height:1.25}
.at-fn{font-size:.75rem;letter-spacing:-.02em}
#curXY{font-size:12px}
#lensUi .mono{font-size:.75rem;letter-spacing:.06em}
#lensUi button{font-size:.75rem;letter-spacing:.02em}
#lensLab{font-size:12px;letter-spacing:.03em}
.sun-clock .mono{font-size:.75rem;letter-spacing:.04em}
#sunArc text{font-size:12px}
.sun-val{font-size:.75rem;letter-spacing:.06em}
.vs .note{font-size:.94rem}
@media(max-width:700px){
  #wkHead p{font-size:.94rem}
  #wkHint{font-size:.75rem;letter-spacing:.03em}
  .wk-s{font-size:.75rem;letter-spacing:.03em}
  #sunArc text{font-size:16.5px}
  .wk-w span{font-variation-settings:"wdth" 100;letter-spacing:0}
}
@media(max-width:620px){#lensUi button{font-size:.75rem;padding:5px 7px}}
@media(max-width:520px){
  .at-win{gap:6px;padding:8px}
  .at-tag{letter-spacing:-.03em;left:3px;right:3px;bottom:3px;padding:3px 4px;line-height:1.2}
  .at-fn{display:none}
}

/* v49 · Feinschliff (Review Runde 3) */
/* Fortschrittsleiste der Filmkapitel über der HUD-Zeile statt durch sie hindurch */
.v-rail{bottom:46px}
.v-stage{padding-bottom:clamp(64px,8vh,76px)}
/* Vignette und Rasterlinien dunkeln die Szene ab, nicht mehr die Texte darüber */
.vig,.scan{z-index:1}
/* Kapitelpunkte rechts erst ab Tabletbreite quer, sonst liegen sie in den Textkarten */
@media(max-width:820px),(max-height:500px){.acts{display:none}}
.wk-on .acts li.on b{opacity:0;transform:translateX(6px)}
/* Dateietikett der Bühne: schmal unten links statt in der HUD-Ecke; über der Linse ausgeblendet */
@media(max-width:820px){.vp-tag{top:auto;bottom:6px;left:0;right:auto}}
html:has(#lensUi.on) .vp-tag{opacity:0;transition:opacity .3s}
/* eigener Zeiger: unsichtbar bis zur ersten Mausbewegung und außerhalb des Fensters */
#cur,#ring{opacity:0}
.cur-live #cur,.cur-live #ring{opacity:1}
#ring{transition:width .3s,height .3s,margin .3s,border-color .3s,background .3s,border-radius .3s,opacity .2s}
#cur{transition:background .3s,box-shadow .3s,opacity .2s}
/* Kartenüberschrift auf der Satzspalte der Seite */
#wkHead{left:max(clamp(16px,4vw,40px),calc((100% - 1240px)/2 + 40px))}
/* Namensfeld: sichtbarer Fokus */
.wall-in:focus-within,#wallChip:focus-within{border-color:#FFD9A0;box-shadow:0 0 0 3px rgba(255,217,160,.35),0 0 34px rgba(242,179,94,.45);outline:2px solid #FFD9A0;outline-offset:3px}
/* Anredewörter in Kleinbuchstaben-Etiketten groß */
.mono .cap{text-transform:none}
/* Überschriften ohne Restwort, Fließtext ohne Einzelwort am Ende */
#wkH em{display:block}
/* Kontaktknöpfe am Handy gleich breit untereinander; leere Rückmeldung nimmt keinen Platz */
@media(max-width:520px){.ct-mail{display:grid;justify-content:start}.ct-mail .btn{justify-content:center}}
.ct-ok:empty{position:absolute}

/* ---------- v49 · Über mich: Tageslicht als Absicht ----------
   Der einzige helle Abschnitt ist ein Planblatt: Papier mit Raster, Blattrand mit Feldeinteilung (1–8, A–D),
   links ein Detail (das Zeichen als Konstruktionszeichnung, später das Foto), rechts unten der Lebenslauf als Schriftfeld.
   Die Klasse .light bleibt am Abschnitt, damit main.js die Kopfzeile wie bisher auf helles Glas schaltet.
   Die goldene Linie landet auf dem Schaft des Zeichens im Kontakt: sie rechnet mit --ct-pad und --ct-mk, die auch .contact .wrap
   und .ct-mark verwenden (eine Quelle, :root). */
#ueber{--ink:#0D1424;--ink5:rgba(13,20,36,.5);--ink3:rgba(13,20,36,.3);--frame:rgba(13,20,36,.78);--au:#C9862C;--paper:#EEF2F7;
  --rand:clamp(6px,1vw,18px);--zone:clamp(16px,1.1vw,18px);--padb:calc(var(--rand) + var(--zone) + clamp(34px,4.4vw,72px));
  --lx:calc(var(--ct-mk) * .1275 - 1px);
  position:relative;isolation:isolate;overflow-x:clip;border-bottom:0;padding-block:var(--padb);
  background:radial-gradient(90% 70% at 88% 0%,rgba(255,236,204,.55),rgba(255,236,204,0) 70%),var(--bg);
  box-shadow:0 0 110px -10px rgba(255,232,196,.17)}
/* Blattrand: Beschnitt (dünn), Rahmen (kräftig), dazwischen die Feldeinteilung; das Raster liegt nur im Zeichenfeld */
.ab-rand{position:absolute;inset:var(--rand);z-index:-1;border:1px solid var(--ink3);pointer-events:none}
.ab-rand::after{content:"";position:absolute;inset:var(--zone);border:1.5px solid var(--frame);
  background:linear-gradient(rgba(43,95,191,.075) 1px,transparent 1px) 0 0/120px 120px,linear-gradient(90deg,rgba(43,95,191,.075) 1px,transparent 1px) 0 0/120px 120px,
    linear-gradient(rgba(43,95,191,.04) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(43,95,191,.04) 1px,transparent 1px) 0 0/24px 24px}
.ab-rand .rz{position:absolute;display:flex;counter-reset:z}
.ab-rand .rz-t,.ab-rand .rz-b{left:var(--zone);right:var(--zone);height:var(--zone)}
.ab-rand .rz-t{top:0}.ab-rand .rz-b{bottom:0}
.ab-rand .rz-l,.ab-rand .rz-r{top:var(--zone);bottom:var(--zone);width:var(--zone);flex-direction:column}
.ab-rand .rz-l{left:0}.ab-rand .rz-r{right:0}
.ab-rand i{flex:1;display:grid;place-items:center;counter-increment:z;font:500 12px/1 var(--mono);font-style:normal;color:var(--ink5)}
.ab-rand .rz-t i+i,.ab-rand .rz-b i+i{border-left:1px solid var(--ink3)}
.ab-rand .rz-l i+i,.ab-rand .rz-r i+i{border-top:1px solid var(--ink3)}
.ab-rand .rz-t i::after,.ab-rand .rz-b i::after{content:counter(z)}
.ab-rand .rz-l i::after,.ab-rand .rz-r i::after{content:counter(z,upper-alpha)}
/* Raster der Seite: Detail links über beide Zeilen, rechts Kopf und Schriftfeld */
#ueber .about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"detail head" "detail cv";column-gap:clamp(32px,5.5vw,88px);row-gap:clamp(28px,2.6vw,38px);align-items:start}
#ueber .head{grid-area:head;margin:0;gap:14px}
#ueber .head .mono{display:flex;align-items:center;gap:12px;color:var(--ember)}
#ueber .head .mono::before{content:"";width:28px;height:1.5px;background:var(--au)}
#ueber h2{color:var(--ink);font-size:clamp(2.7rem,6vw,5.1rem)}
#ueber h2 em{display:block;color:var(--ember2);text-shadow:none}
#ueber .head p{color:var(--dim);max-width:62ch}
/* Detail: Rahmen mit Eckwinkeln wie die Karten der Nacht, Zeichnung oder Foto, Beschriftung als Planbezug */
.ab-detail{grid-area:detail;position:relative;display:flex;flex-direction:column;align-self:stretch}
/* Die goldene Linie verlässt das Blatt am Detail und läuft in die Nacht bis an das Zeichen des Kontakts:
   auf dem Papier gezeichnet (::after füllt den Rest der Spalte und ragt durch den unteren Rand), im Dunkeln leuchtend (::before) */
@media(min-width:1081px){
  .ab-detail::after{content:"";flex:1 0 20px;width:2px;margin:-10px 0 calc(-1 * var(--padb)) var(--lx);background:var(--au)}
  .ab-detail::before{content:"";position:absolute;left:var(--lx);top:calc(100% + var(--padb));width:2px;height:calc(var(--ct-pad) + var(--ct-mk) * .0284);background:#F2B35E;box-shadow:0 0 10px rgba(242,179,94,.7)}
}
.ab-frame{position:relative;aspect-ratio:4/5;display:grid;place-items:center;background:var(--paper);border:1px solid var(--ink5);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 40px -26px rgba(13,20,36,.45)}
.ab-frame::before,.ab-frame::after{content:"";position:absolute;z-index:1;width:16px;height:16px;border:0 solid var(--ember);pointer-events:none}
.ab-frame::before{left:-7px;top:-7px;border-left-width:1.5px;border-top-width:1.5px}
.ab-frame::after{right:-7px;bottom:-7px;border-right-width:1.5px;border-bottom-width:1.5px}
.ab-plan{width:88%;height:auto;overflow:visible}
.ab-plan .g{fill:none;stroke:rgba(43,95,191,.12);stroke-width:.25}
.ab-plan .rb{fill:none;stroke:rgba(13,20,36,.35);stroke-width:.35;stroke-dasharray:1.6 1.2}
.ab-plan .k{fill:none;stroke:#2B5FBF;stroke-opacity:.55;stroke-width:.35;stroke-dasharray:2.4 1.4}
.ab-plan .cl{fill:none;stroke:#2B5FBF;stroke-opacity:.6;stroke-width:.3;stroke-dasharray:7 1.4 1 1.4}
.ab-plan .ol{fill:none;stroke:var(--ink);stroke-width:.5}
.ab-plan .drei{fill:var(--paper);stroke:var(--ink);stroke-width:.5}
.ab-plan .cp{fill:none;stroke:var(--ink);stroke-width:.4}
.ab-plan .dm{fill:none;stroke:#2B5FBF;stroke-width:.4}
.ab-plan .ex{fill:none;stroke:#2B5FBF;stroke-opacity:.5;stroke-width:.25}
.ab-plan .ar{fill:#2B5FBF}
.ab-plan .tx{font-family:var(--mono);font-size:4.2px;font-weight:500;fill:#2B5FBF;text-anchor:middle}
.ab-plan .tx .st{text-anchor:start}
.ab-plan .tx .lb{fill:var(--ink5);letter-spacing:.06em}
/* Foto (optional): liegt vor dem Rahmen im Quelltext, deckt dessen Fläche; Rahmenlinie und Eckwinkel bleiben darüber */
.ab-photo{position:absolute;left:0;top:0;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;background:var(--paper)}
.ab-photo ~ .ab-frame{background:none;box-shadow:0 18px 40px -26px rgba(13,20,36,.45)}
.ab-photo ~ .ab-frame .ab-plan,.ab-photo ~ .ab-cap .ab-cap-z{display:none}
.ab-photo ~ .ab-cap .ab-cap-f{display:grid}
.ab-cap{display:flex;align-items:center;gap:14px;height:58px;padding-top:12px;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:lowercase;color:var(--ink)}
.ab-cap b{flex:none;display:grid;place-items:center;width:24px;height:24px;border:1.5px solid var(--ink);border-radius:50%;font-weight:500;font-size:.75rem;line-height:1;text-transform:uppercase}
.ab-cap > span{display:grid;gap:3px;flex:1;min-width:0}
.ab-cap > .ab-cap-f{display:none}
.ab-cap > span span{padding-bottom:4px;border-bottom:1.5px solid var(--ink)}
.ab-cap small{font-size:.75rem;color:var(--dim)}
/* Lebenslauf als Schriftfeld: Felder mit kleiner Kennung oben links, kräftiger Außenrahmen */
#ueber .cv{grid-area:cv;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1.5px solid var(--frame);border-left:1.5px solid var(--frame);background:rgba(238,242,247,.82)}
#ueber .cv div{display:grid;align-content:start;gap:5px;padding:11px 16px 13px;border-right:1.5px solid var(--frame);border-bottom:1px solid var(--ink3)}
#ueber .cv div:first-child{grid-column:1/-1}
#ueber .cv div:nth-child(even){border-right:1px solid var(--ink3)}
#ueber .cv div:nth-last-child(-n+2){border-bottom:1.5px solid var(--frame)}
#ueber .cv dt{font-family:var(--mono);font-weight:500;font-size:.75rem;letter-spacing:.08em;color:var(--ember)}
#ueber .cv dd{margin:0;color:var(--ink);font-size:.98rem;line-height:1.5}
#ueber .cv dd strong{font-weight:600}
/* die Felder blenden nur ein; das Hochrutschen der Seite (GSAP y) ließe die Linien des Schriftfelds springen */
#ueber .cv > div{transform:none!important}
#ueber .nw{white-space:nowrap}
@media(max-width:1080px){
  #ueber .about{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"detail head" "cv cv"}
  /* ohne Detail unten links verlässt die Linie das Blatt am Schriftfeld */
  #ueber .cv{position:relative}
  #ueber .cv::after{content:"";position:absolute;left:calc(var(--lx) - 1.5px);top:100%;width:2px;height:var(--padb);background:var(--au)}
  #ueber .cv::before{content:"";position:absolute;left:calc(var(--lx) - 1.5px);top:calc(100% + var(--padb));width:2px;height:calc(var(--ct-pad) + var(--ct-mk) * .0284);background:#F2B35E;box-shadow:0 0 10px rgba(242,179,94,.7)}
  .ab-plan .tx{font-size:5.2px}
}
@media(max-width:900px){
  /* schmal: das Blatt ist breiter als der Bildschirm, nur Kopf- und Fußleiste der Feldeinteilung bleiben sichtbar */
  .ab-rand{left:-64px;right:-64px}
}
@media(max-width:700px){
  #ueber .about{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "detail" "cv"}
  .ab-frame,.ab-photo{aspect-ratio:1}
  .ab-plan{width:80%}
  .ab-detail{width:min(100%,420px)}
  .ab-rand .rz-t i:nth-child(n+5),.ab-rand .rz-b i:nth-child(n+5){display:none}
}
@media(max-width:520px){
  #ueber .cv{grid-template-columns:minmax(0,1fr)}
  #ueber .cv div:nth-child(n){border-right:1.5px solid var(--frame)}
  #ueber .cv div:nth-last-child(2){border-bottom:1px solid var(--ink3)}
}
/* die Linie landet nur dann exakt, wenn das Zeichen nicht mit hochrutscht */
.contact .ct-mark{transform:none!important}
/* v49 · Review: Feldzahlen bis 900 px nicht am Bildrand abschneiden; die goldene Linie setzt im Randstreifen des Blatts aus */
@media(min-width:701px) and (max-width:900px){.ab-rand{left:-40px;right:-40px}}
@media(min-width:1081px){.ab-detail::after{background:linear-gradient(to top,var(--au) var(--rand),transparent var(--rand) calc(var(--rand) + var(--zone)),var(--au) 0)}}
@media(max-width:1080px){#ueber .cv::after{background:linear-gradient(to top,var(--au) var(--rand),transparent var(--rand) calc(var(--rand) + var(--zone)),var(--au) 0)}}
/* Multicut-Demo: beim Ziehen schrumpft der Pfeil, das Namensschild bleibt lesbar */
#mosCur svg{transition:transform .15s}#mosCur.drag svg{transform:scale(.9)}
.wk-w small .cap{text-transform:none}

/* v50 · Schneller erster Eindruck (langsames Netz: Schriftzug nach gut 1 s statt nach 4 s)
   Der Schriftzug steht im HTML und fliegt per CSS ein – gleiche Bewegung wie vorher mit GSAP (expo.out, Staffel .07 s),
   aber ohne auf three.js zu warten. Unterzeile und „Tauchen Sie ein“ gleiten wie zuvor 28 px herauf. */
@keyframes chIn{from{transform:translateY(118%) rotate(9deg)}}
#h1 .ch{animation:chIn 1.25s cubic-bezier(.16,1,.3,1) backwards}
#h1 .mask:nth-child(1) .ch{animation-delay:0.15s}
#h1 .mask:nth-child(2) .ch{animation-delay:0.22s}
#h1 .mask:nth-child(3) .ch{animation-delay:0.29s}
#h1 .mask:nth-child(4) .ch{animation-delay:0.36s}
#h1 .mask:nth-child(5) .ch{animation-delay:0.43s}
#h1 .mask:nth-child(6) .ch{animation-delay:0.50s}
#h1 .mask:nth-child(7) .ch{animation-delay:0.57s}
#h1 .mask:nth-child(8) .ch{animation-delay:0.64s}
#h1 .mask:nth-child(9) .ch{animation-delay:0.71s}
@keyframes kickIn{from{opacity:.01;transform:translateY(28px)}}   /* .01 statt 0: gilt sofort als gezeichnet (LCP), sieht gleich aus */
@keyframes diveIn{from{opacity:.01;transform:translate(-50%,28px)}}
#kick{animation:kickIn .9s .9s cubic-bezier(.215,.61,.355,1) backwards}
.dive{animation:diveIn .9s 1.03s cubic-bezier(.215,.61,.355,1) backwards}
@media(prefers-reduced-motion:reduce){#h1 .ch,#kick,.dive{animation:none}}
/* bis Archivo da ist (js/schrift.js, höchstens 2,5 s) bleibt der Schriftzug verborgen und seine Animation steht */
.fw #h1 .ch{visibility:hidden;animation-play-state:paused}
/* erst laden, wenn gebraucht: Reel-Vorschaubild (reel.js setzt .ld), Filmkorn nach dem Laden (main.js setzt html.loaded) */
.reel-card{background-image:none}
.reel-card.ld{background-image:url("../vid/reel-poster.jpg")}
html:not(.loaded) .grain{background-image:none}
/* v50 · Prüfung vor dem Hochladen */
/* iOS vergrößert die Seite beim Tippen in Felder unter 16 px */
#wallChip input{font-size:max(16px,.95rem)}
/* Weltenkarte auf kurzen Handys: Einleitung und HUD-Zeile treten zurück, auf sehr kurzen auch der Hinweis */
@media(max-width:700px) and (max-height:720px){#wkHead p{display:none}.wk-on .hud .read{visibility:hidden}}
@media(max-width:700px) and (max-height:600px){#wkHint{display:none}}
/* v50 · Kernaussage im Startbild: die drei Welten unter dem Schriftzug. Breit über „Tauchen Sie ein“ (unter dem Titel läge
   der helle Ring des Schwarzen Lochs), schmal direkt unter dem Titel, wo der Hintergrund dunkel ist */
#claim{position:absolute;left:0;right:0;bottom:calc(clamp(28px,8vh,72px) + 122px);margin:0 auto;max-width:none;padding:0 16px;text-align:center;font-family:var(--mono);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:#C9D3E6;text-shadow:0 1px 14px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.6);text-wrap:balance;animation:kickIn .9s 1.1s cubic-bezier(.215,.61,.355,1) backwards}
@media(max-width:620px){#claim{bottom:auto;top:calc(var(--hh) + 12vh + clamp(1.5rem,9vw,3rem) + 22px);font-size:.75rem;letter-spacing:.08em;line-height:1.7}}
#claim i{font-style:normal;color:var(--gold);font-size:1.4em;line-height:0;vertical-align:-.08em;padding:0 .25em}
@media(max-width:620px){#claim span{display:block}#claim i{display:none}}
@media(prefers-reduced-motion:reduce){#claim{animation:none}}
/* Automat: Richtungswörter passend zur Anordnung (nebeneinander links/rechts, schmal untereinander oben/unten) */
.ou{display:none}
@media(max-width:860px){.lr{display:none}.ou{display:inline}}

/* v55 · Abbildungen in „Über mich“: Visualisierungen 2012–2015 als Bildreihe auf dem Planblatt, groß im Dialog
   Steht im Kopfbereich, damit die goldene Linie (Zeichnung bzw. Schriftfeld) auf allen Breiten unberührt bleibt. */
.ab-ref{margin:8px 0 0;display:grid;gap:10px}
.ab-ref figcaption{display:flex;align-items:center;gap:12px;color:var(--ember);font-size:.75rem}
.ab-ref figcaption::before{content:"";width:28px;height:1.5px;background:var(--au)}
.ab-ref-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ab-ref-i{display:grid;gap:6px;text-decoration:none;color:var(--ink)}
.ab-ref-i img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--paper);border:1px solid var(--ink5);box-shadow:0 14px 30px -24px rgba(13,20,36,.55);transition:transform .25s,box-shadow .25s}
.ab-ref-i span{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:lowercase;color:var(--dim)}
.ab-ref-i b{flex:none;display:grid;place-items:center;width:20px;height:20px;border:1.5px solid var(--ink);border-radius:50%;font-weight:500;font-size:.72rem;color:var(--ink)}
.ab-ref-i:hover img,.ab-ref-i:focus-visible img{transform:translateY(-2px);box-shadow:0 18px 34px -22px rgba(13,20,36,.6)}
.ab-ref-n{margin:2px 0 0;color:var(--dim);font-size:.9rem}
@media(max-width:700px){.ab-ref-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ab-dlg{padding:0;border:0;background:transparent;max-width:min(94vw,1600px);max-height:92vh;overflow:visible}
.ab-dlg::backdrop{background:rgba(6,9,18,.86);backdrop-filter:blur(4px)}
.ab-dlg img{display:block;max-width:min(94vw,1600px);max-height:calc(92vh - 46px);width:auto;height:auto;border:1px solid rgba(205,222,255,.2)}
.ab-dlg p{margin:10px 0 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:#C3CDDF}
.ab-dlg .ab-dlg-t{flex:1 1 auto}
.ab-dlg button{font:inherit;color:#F2B35E;background:none;border:1px solid rgba(242,179,94,.5);border-radius:999px;padding:4px 12px;cursor:pointer}
.ab-dlg button:focus-visible{outline:2px solid #FFD9A0;outline-offset:2px}

/* v56 · Aus der Praxis: zwei Messeprojekte, je ein großes und zwei kleine Fotos (3:2), Text daneben; abwechselnd gespiegelt */
#praxis .pr{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(24px,4vw,56px);align-items:center}
#praxis .pr-r{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
#praxis .pr + .pr{margin-top:clamp(48px,7vw,96px)}
#praxis .pr-r .pr-g{order:2}
.pr-g{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:10px}
.pr-i{display:block;min-height:0;overflow:hidden;border-radius:10px;border:1px solid var(--line);background:#0B1122}
.pr-big{grid-row:1/3}
.pr-i img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pr-i:hover img,.pr-i:focus-visible img{transform:scale(1.03)}
.pr-t{display:grid;gap:12px;align-content:center}
.pr-t .mono{color:var(--gold)}
.pr-t h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1.02;letter-spacing:-.01em}
.pr-t p{color:var(--dim);max-width:52ch}
.pr-t small{font-size:.75rem;color:var(--dim)}
@media(max-width:900px){#praxis .pr,#praxis .pr-r{grid-template-columns:minmax(0,1fr)}#praxis .pr-r .pr-g{order:0}}
.ct-li{text-decoration:none}