@font-face{font-family:"NK Display";src:url(fonts/display.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;size-adjust:62%}
@font-face{font-family:"NK Grotesk";src:url(fonts/grotesk.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"NK Serif";src:url(fonts/serif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"NK Serif";src:url(fonts/serif-it.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"NK Sans";src:url(fonts/sans.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"NK Sans";src:url(fonts/sans-b.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"NK Mono";src:url(fonts/mono.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --ink:#0c0b14; --ink2:#15131f; --paper:#f7f1e6; --mut:rgba(247,241,230,.66);
  --pink:#ff2e88; --blue:#3a5cff; --lime:#c8ff3a; --orange:#ff6a1a; --violet:#9b5cff; --cyan:#21e3ff; --yellow:#ffd60a; --gold:#e8b75a;
  --bg:#0c0b14; --fg:#f7f1e6; --acc:#ff2e88;
  --display:"NK Display","Arial Black",system-ui,sans-serif;
  --grot:"NK Grotesk",system-ui,sans-serif;
  --serif:"NK Serif",Georgia,serif;
  --sans:"NK Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"NK Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .8s var(--ease),color .8s var(--ease)}
body.lock{overflow:hidden}
a{color:inherit}
p,h1,h2,h3,ul,ol,dl,dd,figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--acc);color:var(--ink)}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.wrap{width:min(1320px,100% - 3rem);margin-inline:auto}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:1rem;top:-80px;z-index:9999;background:var(--lime);color:var(--ink);padding:.7rem 1rem;border-radius:999px;font-weight:700;text-decoration:none}
.skip:focus{top:1rem}

/* ---------- Loader ---------- */
#loader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;pointer-events:none}
#loader .bars{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr)}
#loader .bars i{display:block;transform-origin:top}
#loader .bars i:nth-child(1){background:var(--pink)}#loader .bars i:nth-child(2){background:var(--orange)}
#loader .bars i:nth-child(3){background:var(--yellow)}#loader .bars i:nth-child(4){background:var(--lime)}
#loader .bars i:nth-child(5){background:var(--cyan)}#loader .bars i:nth-child(6){background:var(--violet)}
#loader .count{position:relative;font-family:var(--display);font-size:clamp(6rem,24vw,21rem);line-height:1;color:var(--ink);mix-blend-mode:normal;letter-spacing:-.04em}
#loader .count small{font-family:var(--mono);font-size:1rem;letter-spacing:.1em;vertical-align:top}
html:not(.js) #loader{display:none}

/* ---------- Cursor ---------- */
.cur,.cur-dot{position:fixed;left:0;top:0;z-index:900;pointer-events:none;border-radius:50%;will-change:transform}
.cur{width:44px;height:44px;margin:-22px 0 0 -22px;background:#fff;mix-blend-mode:difference;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease)}
.cur.gross{width:110px;height:110px;margin:-55px 0 0 -55px}
.cur-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--lime)}
.cur-lab{position:fixed;left:0;top:0;z-index:901;pointer-events:none;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--lime);padding:.3rem .6rem;border-radius:999px;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .25s,transform .25s var(--ease);white-space:nowrap}
.cur-lab.an{opacity:1;transform:translate(14px,14px) scale(1)}
@media (hover:none),(pointer:coarse){.cur,.cur-dot,.cur-lab{display:none}}
@media (hover:hover) and (pointer:fine){html.js.curs body,html.js.curs a,html.js.curs button{cursor:none}}

/* ---------- Kopf ---------- */
.topbar{position:fixed;left:0;right:0;top:0;height:4px;z-index:950;background:linear-gradient(90deg,var(--pink),var(--orange),var(--yellow),var(--lime),var(--cyan),var(--blue),var(--violet));transform-origin:left;transform:scaleX(0)}
header{position:fixed;left:0;right:0;top:0;z-index:800;padding-block:1.1rem;mix-blend-mode:difference;color:#fff}
header .wrap{display:flex;align-items:center;gap:1.5rem}
.logo{font-family:var(--display);font-size:1.25rem;text-decoration:none;letter-spacing:-.03em;display:inline-flex;align-items:baseline;gap:.5rem}
.logo span{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.nav{display:flex;gap:1.4rem;margin-left:auto}
.nav a{text-decoration:none;font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;position:relative;padding-block:.4rem}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.pill{display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:.7rem 1.4rem;border-radius:999px;font-weight:700;text-decoration:none;font-size:.95rem;position:relative;isolation:isolate;overflow:hidden;will-change:transform}
.pill.lime{background:var(--lime);color:var(--ink)}
.pill.pink{background:var(--pink);color:#fff}
.pill.ghost{border:2px solid currentColor}
.pill::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);border-radius:inherit;transform:translateY(102%);transition:transform .45s var(--ease)}
.pill.lime:hover{color:var(--lime)}.pill.pink:hover{color:var(--pink)}
.pill:hover::before{transform:none}
.pill.ghost::before{background:currentColor}
.pill.ghost:hover{color:var(--ink)}
.pill.ghost:hover span{color:var(--ink)}
header .pill{min-height:42px;padding:.5rem 1.1rem;font-size:.85rem;background:#fff;color:#000}
header .pill::before{background:#000}
header .pill:hover{color:#fff}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding-block:7rem 3.5rem}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .fallback{position:absolute;inset:0;background:
  radial-gradient(40% 50% at 20% 30%,var(--pink),transparent 70%),
  radial-gradient(45% 55% at 80% 20%,var(--blue),transparent 70%),
  radial-gradient(50% 50% at 60% 80%,var(--orange),transparent 70%),
  radial-gradient(40% 40% at 30% 85%,var(--lime),transparent 70%),var(--violet)}
.hero .grain{position:absolute;inset:-50%;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-2%)}60%{transform:translate(-2%,4%)}80%{transform:translate(4%,1%)}100%{transform:translate(0,0)}}
.hero .wrap{position:relative;z-index:2}
.hero .kick{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-bottom:1.6rem;color:#fff}
.hero .kick b{background:var(--ink);color:var(--lime);padding:.35rem .7rem;border-radius:999px;font-weight:400}
.hero h1{font-family:var(--display);font-weight:400;color:#fff;font-size:clamp(2.8rem,9.4vw,10rem);line-height:.9;letter-spacing:-.02em;text-transform:uppercase;text-shadow:.045em .045em 0 var(--ink)}
.hero h1 .z{display:block;white-space:nowrap}
.hero h1 .ch{display:inline-block;will-change:transform}
.hero h1 .it{text-shadow:none;margin-top:.12em;text-transform:none;font-size:.62em;line-height:1.05;padding:0 .18em;letter-spacing:-.02em;color:var(--ink);background:var(--lime);padding:0 .12em;border-radius:.12em;display:inline-block;transform:rotate(-2deg)}
.hero .unten{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-top:2.4rem;flex-wrap:wrap}
.hero .unten p{max-width:44ch;color:#fff;font-size:1.12rem;background:rgba(12,11,20,.82);padding:1rem 1.2rem;border-radius:18px;backdrop-filter:blur(6px)}
.hero .ctas{display:flex;gap:.8rem;flex-wrap:wrap}
.hero .pill.ghost{color:#fff}
.sticker{position:absolute;z-index:3;font-family:var(--grot);font-weight:700;font-size:clamp(.85rem,1.3vw,1.05rem);padding:.75rem 1.1rem;border-radius:999px;box-shadow:0 18px 40px -16px rgba(0,0,0,.55);user-select:none;touch-action:none;cursor:grab;white-space:nowrap}
.sticker:active{cursor:grabbing}
.sticker.s1{background:var(--yellow);color:var(--ink);top:18%;right:9%}
.sticker.s2{background:var(--ink);color:var(--lime);top:33%;right:24%}
.sticker.s3{background:#fff;color:var(--pink);top:12%;left:52%}
.sticker.s4{background:var(--cyan);color:var(--ink);top:44%;right:6%;border-radius:18px}
.sticker .zieh{display:block;font-family:var(--mono);font-size:.6rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.scrollcue{position:absolute;right:1.5rem;bottom:1.5rem;z-index:3;width:92px;height:92px;color:#fff}
.scrollcue svg{width:100%;height:100%;animation:spin 12s linear infinite}
.scrollcue i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:1.6rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Marquee ---------- */
.marq{background:var(--lime);color:var(--ink);overflow:hidden;padding-block:1.2rem;position:relative;z-index:2;border-block:3px solid var(--ink)}
.marq.zwei{background:var(--pink);color:#fff;transform:rotate(-2deg) scale(1.04);margin-top:-1.2rem}
.marq .spur{display:flex;width:max-content;will-change:transform}
.marq span{font-family:var(--display);font-size:clamp(2.8rem,8.5vw,7.4rem);line-height:1;letter-spacing:-.03em;text-transform:uppercase;padding-right:2.2rem;white-space:nowrap}
.marq span em{font-family:var(--serif);font-style:italic;text-transform:none;font-size:1.15em;letter-spacing:-.01em}
.marq span.out{color:transparent;-webkit-text-stroke:2px currentColor}
.marq .marq-t{display:flex;will-change:transform}

/* ---------- Kapitelkarte (Zahl fliegt durch) ---------- */
.portal{position:relative;height:100svh;overflow:hidden;display:grid;place-items:center;background:var(--ink)}
.portal .zahl{font-family:var(--display);font-size:clamp(12rem,56vw,52rem);line-height:.8;letter-spacing:-.03em;color:var(--c);will-change:transform;user-select:none}
.portal .titel{position:absolute;inset:auto 0 12vh;text-align:center;font-family:var(--grot);font-weight:700;font-size:clamp(1.4rem,3vw,2.4rem);color:#fff;letter-spacing:-.02em}
.portal .titel .mono{display:block;color:var(--c);margin-bottom:.5rem}
.portal .flood{position:absolute;inset:0;background:var(--c);clip-path:circle(0% at 50% 50%);will-change:clip-path}

/* ---------- Kapitel allgemein ---------- */
.kap{position:relative;color:var(--ink);background:var(--c);overflow:hidden}
.kap .wrap{position:relative;z-index:2}
.kap h2{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,8.6vw,8.6rem);line-height:.95;letter-spacing:-.02em;text-transform:uppercase}
.kap h2 .it{text-transform:none;font-size:1.1em}
.kap .lead{font-size:clamp(1.1rem,1.6vw,1.35rem);max-width:52ch;line-height:1.5}
.kap .tag{display:inline-flex;gap:.6rem;align-items:center;padding:.4rem .8rem;border:2px solid currentColor;border-radius:999px}
.schrittreihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:3rem}
.sk{background:var(--ink);color:var(--paper);border-radius:22px;padding:1.6rem 1.5rem 1.8rem;position:relative;overflow:hidden;min-width:0;transform-style:preserve-3d;will-change:transform}
.sk .n{font-family:var(--display);font-size:3rem;line-height:1;color:var(--c)}
.sk h3{font-family:var(--grot);font-size:1.4rem;margin:.8rem 0 .4rem;letter-spacing:-.02em}
.sk p{color:var(--mut);font-size:.98rem}
.sk::after{content:"";position:absolute;inset:0;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.sk:hover::after{opacity:1}
.spruch{font-family:var(--serif);font-style:italic;font-size:clamp(1.8rem,4.4vw,3.8rem);line-height:1.08;letter-spacing:-.015em;max-width:22ch}
.spruch::before{content:"„"}.spruch::after{content:"“"}

/* 01 Gespräch: Wort-Leuchten + Chat */
.k1{--c:var(--orange)}
.k1 .lesen{min-height:100svh;display:flex;align-items:center;padding-block:6rem}
.k1 .lesen p{font-family:var(--grot);font-weight:700;font-size:clamp(1.8rem,4.6vw,4.4rem);line-height:1.08;letter-spacing:-.03em}
.k1 .lesen .w{opacity:.16;transition:none}
.chat{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;padding-block:4rem 7rem}
.blasen{display:flex;flex-direction:column;gap:.8rem}
.blase{max-width:80%;padding:1rem 1.25rem;border-radius:22px;font-size:1.05rem;line-height:1.45;box-shadow:0 18px 40px -26px rgba(0,0,0,.6)}
.blase.wir{background:var(--ink);color:var(--paper);border-bottom-left-radius:6px}
.blase.sie{background:#fff;color:var(--ink);align-self:flex-end;border-bottom-right-radius:6px}
.blase.tipp{background:var(--ink);color:var(--paper);width:84px;display:flex;gap:6px;justify-content:center;padding:1.05rem}
.blase.tipp i{width:8px;height:8px;border-radius:50%;background:var(--paper);animation:tipp 1s infinite}
.blase.tipp i:nth-child(2){animation-delay:.15s}.blase.tipp i:nth-child(3){animation-delay:.3s}
@keyframes tipp{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-4px)}}

/* 02 Struktur: Wireframe setzt sich zusammen */
.k2{--c:var(--blue);color:#fff}
.k2 .sk{background:#fff;color:var(--ink)}.k2 .sk p{color:#555}
.bau{height:100svh;display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:center}
.bau .txt h2{color:#fff}
.bau .txt .lead{margin-top:1.4rem;color:rgba(255,255,255,.85)}
.wf{position:relative;aspect-ratio:4/3.3;background:rgba(255,255,255,.08);border:2px dashed rgba(255,255,255,.35);border-radius:22px}
.wf .bk{position:absolute;border-radius:12px;background:#fff;color:var(--ink);display:grid;place-items:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;will-change:transform;box-shadow:0 18px 40px -20px rgba(0,0,0,.5)}
.wf .bk.k{background:var(--lime)}.wf .bk.p{background:var(--pink);color:#fff}.wf .bk.y{background:var(--yellow)}.wf .bk.c{background:var(--cyan)}

/* 03 Gestaltung: Malen */
.k3{--c:var(--violet);color:#fff;min-height:100svh}
.k3 canvas#mal{position:absolute;inset:0;width:100%;height:100%;z-index:1;touch-action:pan-y}
.k3 .mitte{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:7rem;pointer-events:none}
.k3 .mitte h2{color:#fff;mix-blend-mode:difference}
.k3 .mitte .lead{margin-top:1.6rem;color:#fff;mix-blend-mode:difference}
.k3 .hinweis{margin-top:2rem;display:inline-flex;gap:.6rem;align-items:center;background:#fff;color:var(--ink);padding:.6rem 1rem;border-radius:999px;width:max-content;pointer-events:auto}
.k3 .hinweis button{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;text-decoration:underline}
.farben{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;padding-bottom:7rem;perspective:1000px;position:relative;z-index:2}
.karte3{aspect-ratio:3/4;border-radius:22px;position:relative;transform-style:preserve-3d;will-change:transform}
.karte3 .v,.karte3 .r{position:absolute;inset:0;border-radius:inherit;backface-visibility:hidden;padding:1.3rem;display:flex;flex-direction:column;justify-content:space-between}
.karte3 .v{background:var(--f);color:var(--ink)}
.karte3 .v b{font-family:var(--display);font-size:clamp(1.4rem,2.4vw,2rem);line-height:1;letter-spacing:-.03em}
.karte3 .r{background:var(--ink);color:#fff;transform:rotateY(180deg)}
.karte3 .r p{font-family:var(--serif);font-style:italic;font-size:1.35rem;line-height:1.2}

/* 04 Online: Countdown + Konfetti */
.k4{--c:var(--cyan)}
.start{height:100svh;display:grid;place-items:center;position:relative}
.start .zz{position:absolute;font-family:var(--display);font-size:clamp(14rem,60vw,54rem);line-height:.8;letter-spacing:-.03em;color:var(--ink);opacity:0;will-change:transform,opacity}
.start .live{position:absolute;text-align:center;opacity:0}
.start .live b{display:block;font-family:var(--display);font-size:clamp(5.5rem,20vw,18rem);line-height:.85;letter-spacing:-.025em;color:var(--ink)}
.browser{width:min(640px,88vw);margin:1.5rem auto 0;background:#fff;border-radius:16px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5);overflow:hidden;text-align:left}
.browser .lz{display:flex;gap:6px;padding:.75rem 1rem;background:#eceff4}
.browser .lz u{width:11px;height:11px;border-radius:50%;background:#ff5f57}.browser .lz u:nth-child(2){background:#febc2e}.browser .lz u:nth-child(3){background:#28c840}
.browser .url{margin:0 1rem 1rem;padding:.6rem 1rem;border-radius:999px;background:#f3f5f8;font-family:var(--mono);font-size:.9rem;color:var(--ink)}
.browser .url .caret{display:inline-block;width:2px;height:1em;background:var(--ink);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
#konfetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:850}

/* 05 Auftritt: Neon + Spotlight */
.k5{--c:#07060c;color:#fff}
.neon{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:7rem;position:relative}
.neon h2{color:#fff;text-shadow:0 0 10px var(--pink),0 0 46px rgba(255,46,136,.85);will-change:transform,opacity}
.neon h2 .flicker{animation:flick 4s infinite}
@keyframes flick{0%,18%,22%,25%,53%,57%,100%{opacity:1}20%,24%,55%{opacity:.25}}
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-t);position:absolute;inset:0;pointer-events:none}
.glitch::before{color:var(--cyan);transform:translate(-3px,0);mix-blend-mode:screen;animation:gl1 2.6s infinite steps(2)}
.glitch::after{color:var(--pink);transform:translate(3px,0);mix-blend-mode:screen;animation:gl2 3.1s infinite steps(2)}
@keyframes gl1{0%,92%{clip-path:inset(0 0 100% 0)}93%{clip-path:inset(20% 0 55% 0);transform:translate(-8px,2px)}96%{clip-path:inset(60% 0 10% 0);transform:translate(6px,-2px)}100%{clip-path:inset(0 0 100% 0)}}
@keyframes gl2{0%,88%{clip-path:inset(0 0 100% 0)}90%{clip-path:inset(40% 0 30% 0);transform:translate(8px,0)}94%{clip-path:inset(10% 0 75% 0);transform:translate(-6px,1px)}100%{clip-path:inset(0 0 100% 0)}}
.neon .lead{margin-top:1.6rem;color:rgba(255,255,255,.8)}
.spot{position:relative;margin-top:4rem;border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.12);min-height:340px;display:grid;place-items:center;text-align:center;padding:3rem 1.5rem;background:#0b0a12}
.spot .verdeckt{font-family:var(--display);font-size:clamp(1.8rem,5vw,4.2rem);line-height:1;letter-spacing:-.04em;text-transform:uppercase;color:#1b1926}
.spot .hell{position:absolute;inset:0;display:grid;place-items:center;padding:3rem 1.5rem;background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),rgba(255,46,136,.35),transparent 30%);-webkit-mask:radial-gradient(circle 170px at var(--sx,50%) var(--sy,50%),#000 55%,transparent 100%);mask:radial-gradient(circle 170px at var(--sx,50%) var(--sy,50%),#000 55%,transparent 100%)}
.spot .hell span{font-family:var(--display);font-size:clamp(1.8rem,5vw,4.2rem);line-height:1;letter-spacing:-.04em;text-transform:uppercase;background:linear-gradient(90deg,var(--yellow),var(--pink),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.spot .mono{position:absolute;bottom:1rem;left:0;right:0;color:rgba(255,255,255,.4)}
.k5 .sk{background:#14121e;border:1px solid rgba(255,255,255,.1)}
.k5 .sk .n{color:var(--pink)}

/* 06 Wirkung: Horizontal */
.k6{--c:var(--lime)}
.quer{height:100svh;display:flex;align-items:center;overflow:hidden}
.quer .spur{display:flex;gap:1.4rem;padding-inline:max(1.5rem,calc((100vw - 1320px)/2));will-change:transform}
.quer .intro{flex:0 0 min(560px,82vw);display:flex;flex-direction:column;justify-content:center}
.quer .intro .lead{margin-top:1.4rem}
.qk{flex:0 0 min(400px,78vw);height:min(520px,66svh);border-radius:28px;padding:1.8rem;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;will-change:transform}
.qk b{font-family:var(--display);font-size:clamp(2rem,3.4vw,3rem);line-height:.95;letter-spacing:-.04em;text-transform:uppercase}
.qk p{font-size:1.05rem;line-height:1.45}
.qk .gr{position:absolute;right:-30%;top:-20%;width:110%;aspect-ratio:1;border-radius:50%;opacity:.85;background:radial-gradient(closest-side,var(--g),transparent)!important;animation:wobble 9s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-20%,15%) scale(1.25)}}
.qk.a{background:var(--ink);color:#fff}.qk.a .gr{--g:var(--pink)}
.qk.b{background:#fff;color:var(--ink)}.qk.b .gr{--g:var(--cyan)}
.qk.c{background:var(--violet);color:#fff}.qk.c .gr{--g:var(--yellow)}
.qk.d{background:var(--orange);color:var(--ink)}.qk.d .gr{--g:var(--lime)}
.qk.e{background:var(--ink);color:var(--lime)}.qk.e .gr{--g:var(--blue)}
.qk .mono{position:relative}

/* 07 Anspruch: 3D-Ring */
.k7{--c:var(--gold)}
.ring-wrap{height:100svh;display:grid;place-items:center;perspective:1400px;position:relative}
.ring-wrap .kopfzeile{position:absolute;top:12vh;left:0;right:0;text-align:center}
.ring{position:relative;width:240px;height:320px;transform-style:preserve-3d;will-change:transform}
.ring .f{position:absolute;inset:0;border-radius:24px;display:flex;flex-direction:column;justify-content:flex-end;padding:1.3rem;backface-visibility:hidden;color:var(--ink);font-family:var(--display);font-size:1.5rem;letter-spacing:-.03em;text-transform:uppercase;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.ring .f small{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;margin-bottom:auto}
.ring-wrap .unterzeile{position:absolute;bottom:9vh;left:0;right:0;text-align:center;padding-inline:1.5rem}

/* Ergebnis: Laptop öffnet sich */
.erg{background:var(--paper);color:var(--ink);overflow:hidden;position:relative}
.erg .bühne{height:100svh;display:grid;place-items:center;perspective:1600px;position:relative}
.erg h2{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,8vw,7.8rem);line-height:.92;letter-spacing:-.02em;text-transform:uppercase;text-align:center;position:absolute;top:10vh;left:0;right:0;padding-inline:1rem}
.lap{width:min(820px,90vw);transform-style:preserve-3d;margin-top:10vh}
.deckel{aspect-ratio:16/10;background:#16151d;border-radius:18px 18px 4px 4px;padding:2.2%;transform-origin:bottom;transform:rotateX(-88deg);will-change:transform;box-shadow:0 -10px 40px -10px rgba(0,0,0,.4)}
.bild{width:100%;height:100%;border-radius:6px;overflow:hidden;background:#f6efe4;position:relative}
.basis{height:16px;background:linear-gradient(#cfd2d8,#9fa3ab);border-radius:0 0 16px 16px;width:108%;margin-left:-4%}
.mini{position:absolute;inset:0;font-family:var(--sans);color:#2a1d12}
.mini .mb{display:flex;justify-content:space-between;align-items:center;padding:3% 4%;font-size:clamp(.5rem,1.2vw,.8rem)}
.mini .mb b{font-family:var(--serif);font-size:1.4em}
.mini .mh{padding:2% 4%;display:grid;grid-template-columns:1fr 1fr;gap:4%;align-items:center}
.mini h3{font-family:var(--serif);font-weight:400;font-size:clamp(1rem,3.4vw,2.4rem);line-height:1}
.mini h3 em{color:#a8743f}
.mini .mpill{display:inline-block;margin-top:6%;background:#5b3a1e;color:#fff;font-size:clamp(.45rem,1vw,.7rem);padding:.4em 1em;border-radius:999px}
.mini .mfoto{aspect-ratio:4/3;border-radius:6px;background:linear-gradient(135deg,#c79a68,#7d5332 60%,#3d2716);position:relative;overflow:hidden}
.mini .mfoto::after{content:"";position:absolute;inset:18% 12%;background:repeating-linear-gradient(90deg,#e8c9a0 0 22%,transparent 22% 26%);opacity:.6;border-radius:4px}
.mini .mt{display:grid;grid-template-columns:repeat(4,1fr);gap:2%;padding:3% 4%}
.mini .mt i{aspect-ratio:1;border-radius:4px;background:#e2d3bf}
.badge{position:absolute;font-family:var(--grot);font-weight:700;padding:.7rem 1.1rem;border-radius:999px;box-shadow:0 18px 40px -18px rgba(0,0,0,.5);white-space:nowrap;will-change:transform}
.badge.b1{background:var(--pink);color:#fff;left:8%;top:38%}
.badge.b2{background:var(--lime);color:var(--ink);right:7%;top:30%}
.badge.b3{background:var(--blue);color:#fff;left:12%;bottom:16%}
.badge.b4{background:var(--yellow);color:var(--ink);right:10%;bottom:20%}

/* Kontakt */
.kont{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding-block:8rem 5rem}
.kont .blob{position:absolute;width:60vmax;height:60vmax;border-radius:50%;opacity:.85;will-change:transform;background:radial-gradient(closest-side,var(--b) 0%,color-mix(in srgb,var(--b) 45%,transparent) 45%,transparent 100%)!important}
.kont .blob.a{--b:var(--pink);left:-15vmax;top:-20vmax;animation:drift 16s ease-in-out infinite}
.kont .blob.b{--b:var(--blue);right:-20vmax;bottom:-25vmax;animation:drift 19s ease-in-out infinite reverse}
.kont .blob.c{--b:var(--lime);left:35%;top:40%;width:30vmax;height:30vmax;opacity:.35;animation:drift 13s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(8vmax,6vmax) scale(1.15)}66%{transform:translate(-6vmax,4vmax) scale(.9)}}
.kont .wrap{position:relative;z-index:2}
.riesig{font-family:var(--display);font-size:clamp(4rem,19vw,19rem);line-height:.9;letter-spacing:-.03em;text-transform:uppercase}
.riesig .ch{display:inline-block}
.riesig.fertig .ch{transition:transform .5s var(--ease),color .3s}
.riesig .ch:hover{transform:translateY(-.12em) rotate(-6deg);color:var(--lime)}
.kont .reihe{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;margin-top:3rem;align-items:end}
.kont .reihe p{max-width:46ch;font-size:1.15rem;color:rgba(255,255,255,.82)}
.kont .ctas{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2rem}
.kont dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.5rem;font-size:1.02rem}
.kont dt{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);padding-top:.25rem}
.kont dd a{text-decoration:none;border-bottom:2px solid var(--pink)}
footer{background:#000;color:rgba(255,255,255,.55);font-size:.85rem;padding-block:1.6rem}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* Kapitel-Navigation rechts */
.rail{position:fixed;right:18px;top:50%;z-index:700;display:flex;flex-direction:column;gap:10px;transform:translateY(-50%);mix-blend-mode:difference}
.rail a{width:12px;height:12px;border-radius:50%;border:2px solid #fff;display:block;transition:transform .3s var(--ease),background .3s}
.rail a.an{background:#fff;transform:scale(1.35)}
.rail a span{position:absolute;right:22px;transform:translateY(-25%);font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;white-space:nowrap;opacity:0;transition:opacity .2s}
.rail a:hover span{opacity:1}

/* Mobil */
@media (max-width:900px){
  .nav{display:none}
  header .pill{margin-left:auto}
  .schrittreihe,.chat,.bau,.kont .reihe{grid-template-columns:1fr}
  .bau{height:auto;min-height:100svh;padding-block:6rem;gap:2rem}
  .farben{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sticker.s2,.sticker.s4{display:none}
  .sticker.s1{top:14%;right:6%}.sticker.s3{top:24%;left:auto;right:30%}
  .rail{display:none}
  .badge{font-size:.8rem;padding:.5rem .8rem}
  .badge.b1{left:4%;top:26%}.badge.b2{right:4%;top:22%}.badge.b3{left:4%;bottom:14%}.badge.b4{right:4%;bottom:12%}
  .ring{width:180px;height:240px}
  .scrollcue{width:70px;height:70px}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{width:min(1320px,100% - 2rem)}
  .hero{padding-bottom:2.4rem}
  .hero .unten{margin-top:1.6rem}
  .hero .ctas{width:100%}.hero .ctas .pill{flex:1 1 100%;justify-content:center}
  .sticker.s3{display:none}
  .farben{grid-template-columns:1fr 1fr;gap:.7rem}
  .karte3 .r p{font-size:1.05rem}
  .blase{max-width:92%}
  .logo span{display:none}
  .hero h1{font-size:14vw}
  .scrollcue{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .k1 .lesen .w{opacity:1!important}
  .start .zz{display:none}.start .live{opacity:1!important;position:relative}
  .deckel{transform:none!important}
  .portal{height:auto;min-height:70svh}.portal .flood{display:none}
}

/* ---------- JS-Ergänzungen ---------- */
#loader{animation:lfail .01s 6s forwards}
@keyframes lfail{to{opacity:0;visibility:hidden}}
.trail{position:fixed;left:0;top:0;z-index:899;pointer-events:none;border-radius:50%;opacity:0;will-change:translate}
.cur,.cur-dot{opacity:0}
.wd{display:inline-block;white-space:nowrap}
.sticker{animation:schweb 4.5s ease-in-out infinite}
.sticker.s2{animation-delay:-1.2s}.sticker.s3{animation-delay:-2.4s}.sticker.s4{animation-delay:-3.3s}
@keyframes schweb{0%,100%{translate:0 0}50%{translate:0 -12px}}
.badge{animation:schweb 3.8s ease-in-out infinite}
.badge.b2{animation-delay:-1s}.badge.b3{animation-delay:-2s}.badge.b4{animation-delay:-2.8s}
.quer .spur{flex:0 0 auto}
.k1 .lesen .w{display:inline-block}
.k1 .lesen .w.key{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.qk b,.karte3 .v b,.start .live b{font-weight:400}
.karte3{cursor:pointer}
.karte3 .v::after{content:"\21BB";position:absolute;top:1.1rem;right:1.2rem;font-size:1.3rem;line-height:1}
.nav a.an::after{transform:scaleX(1)}
.k5{--glow:1}
.neon h2{opacity:calc(.35 + .65*var(--glow))}
html:not(.js) .start .zz{display:none}
html:not(.js) .start .live{opacity:1;position:relative}
html:not(.js) .deckel{transform:none}
html:not(.js) .spot .hell,.rm .spot .hell{-webkit-mask:none;mask:none}
main{overflow-x:clip}

/* ================= Kopf, Menü, Fuß (alle Seiten) ================= */
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.menu-knopf{display:none;align-items:center;gap:.6rem;min-height:42px;padding:.5rem 1rem;border-radius:999px;border:2px solid currentColor;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.menu-knopf i{width:18px;height:10px;position:relative;display:block}
.menu-knopf i::before,.menu-knopf i::after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .4s var(--ease)}
.menu-knopf i::before{top:0}.menu-knopf i::after{bottom:0}
.menu-knopf[aria-expanded="true"] i::before{transform:translateY(4px) rotate(45deg)}
.menu-knopf[aria-expanded="true"] i::after{transform:translateY(-4px) rotate(-45deg)}
.menue{position:fixed;inset:0;z-index:790;display:flex;flex-direction:column;justify-content:center;padding:6rem 1.5rem 2rem;color:var(--ink);overflow:auto}
.menue[hidden]{display:none}
.menue-baender{position:absolute;inset:0;display:grid;grid-template-rows:repeat(4,1fr);z-index:-1}
.menue-baender i:nth-child(1){background:var(--pink)}.menue-baender i:nth-child(2){background:var(--lime)}
.menue-baender i:nth-child(3){background:var(--yellow)}.menue-baender i:nth-child(4){background:var(--cyan)}
.menue nav{display:flex;flex-direction:column;gap:.2rem}
.menue nav a{font-family:var(--display);font-size:clamp(2.4rem,11vw,5rem);line-height:1.15;text-transform:uppercase;text-decoration:none;letter-spacing:-.02em;display:flex;align-items:baseline;gap:.8rem}
.menue nav a small{font-family:var(--mono);font-size:.8rem;letter-spacing:.1em}
.menue nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:6px}
.menue .mono{margin-top:2rem}
body.menu-offen{overflow:hidden}
@media (max-width:900px){.menu-knopf{display:inline-flex}.kopf-cta{display:none}header .menu-knopf{margin-left:auto}}
footer .wrap{align-items:center}
footer nav{display:flex;gap:1.2rem;flex-wrap:wrap}
footer nav a{color:#fff;text-decoration:none;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
footer nav a:hover{color:var(--lime)}

/* ================= Nachtflug: Video mit Gaspedal ================= */
.warp{position:relative;background:#000;color:#fff}
.warp-pin{height:100svh;position:relative;overflow:hidden;display:grid;place-items:center;--w:0}
.warp-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.02 + var(--w)*.22));will-change:transform}
.warp-pin.schnell .warp-vid{filter:saturate(calc(1.25 + var(--w)*1.6)) hue-rotate(calc(var(--w)*150deg))}
.warp-farbe{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,46,136,.55),transparent 38%,transparent 62%,rgba(33,227,255,.45)),radial-gradient(60% 55% at 50% 115%,rgba(155,92,255,.8),transparent);opacity:calc(.6 + var(--w)*.4);pointer-events:none}
.warp-strahlen{position:absolute;inset:-30%;pointer-events:none;opacity:calc(var(--w)*1.1);background:repeating-conic-gradient(from 0deg at 50% 50%,transparent 0deg 2.6deg,rgba(255,255,255,.65) 2.8deg 3deg,transparent 3.2deg 6.4deg);-webkit-mask:radial-gradient(circle at 50% 50%,transparent 14%,#000 55%);mask:radial-gradient(circle at 50% 50%,transparent 14%,#000 55%);transform:rotate(calc(var(--w)*25deg)) scale(calc(1 + var(--w)*.3));will-change:transform,opacity}
.warp-text{position:relative;z-index:2;text-align:center;padding-inline:1.5rem}
.warp h2{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,8vw,8rem);line-height:.95;letter-spacing:-.02em;text-transform:uppercase;margin-top:1.2rem;text-shadow:0 0 30px rgba(33,227,255,.6)}
.warp h2 .it{text-transform:none;color:var(--lime)}
.warp .tag{color:#fff}
.tacho{display:flex;justify-content:center;align-items:baseline;gap:.3rem;margin-top:1.2rem;font-family:var(--display);line-height:1}
.tacho b{font-weight:400;font-size:clamp(4rem,13vw,11rem);background:linear-gradient(90deg,var(--yellow),var(--pink),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;min-width:3.2ch;text-align:right;font-variant-numeric:tabular-nums}
.tacho span{font-size:clamp(2rem,5vw,4rem);color:var(--lime)}
.stufe{display:inline-block;margin-top:.6rem;background:var(--lime);color:var(--ink);padding:.4rem .9rem;border-radius:999px}
.stufe.max{background:var(--pink);color:#fff;animation:wackel .25s steps(2) infinite}
@keyframes wackel{50%{transform:rotate(-3deg) scale(1.08)}}
.warp .hint,.tunnel .hint,.lichter .hint{margin-top:1rem;color:rgba(255,255,255,.75);font-size:1rem}
.nachweis{position:absolute;left:1rem;bottom:.8rem;z-index:2;font-size:.68rem;color:rgba(255,255,255,.55);max-width:80ch}

/* ================= Galerie: 3D-Flug ================= */
.tunnel{position:relative;background:#07060c;color:#fff;overflow:hidden}
.tunnel-pin{position:relative}
.tunnel-kopf{text-align:center;padding:7rem 1.5rem 3rem}
.tunnel-kopf h2{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,9vw,9rem);line-height:.95;letter-spacing:-.02em;text-transform:uppercase;margin-top:1.2rem}
.tunnel-kopf h2 .it{text-transform:none;color:var(--yellow)}
.raum{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.2rem;width:min(1320px,100% - 3rem);margin:0 auto;padding-bottom:6rem}
.gbild{margin:0;--f:var(--pink)}
.gbild img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:14px;border:4px solid var(--f);box-shadow:0 0 50px -12px var(--f);background:#111}
.gbild figcaption{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;margin-top:.55rem;color:#fff}
.gbild figcaption small{display:block;text-transform:none;letter-spacing:0;color:rgba(255,255,255,.55);margin-top:.15rem}
.tunnel-ende,.tunnel-zahl{display:none}
/* aktiv (mit JS) */
.tunnel.an .tunnel-pin{height:100svh;overflow:hidden;perspective:900px;perspective-origin:var(--px,50%) var(--py,50%)}
.tunnel.an .tunnel-kopf{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:4;pointer-events:none;padding:0 1.5rem}
.tunnel.an .raum{position:absolute;inset:0;display:block;width:auto;padding:0;transform-style:preserve-3d;will-change:transform}
.tunnel.an .gbild{position:absolute;left:50%;top:50%;width:min(36vw,500px);visibility:hidden;will-change:transform,opacity}
.tunnel.an .tunnel-ende{display:flex;flex-direction:column;align-items:center;position:absolute;inset:0;justify-content:center;z-index:3;pointer-events:none;opacity:0;font-family:var(--display);font-size:clamp(3rem,12vw,12rem);line-height:.9;text-transform:uppercase;letter-spacing:-.02em}
.tunnel.an .tunnel-ende b{font-weight:400;background:linear-gradient(90deg,var(--pink),var(--yellow),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.tunnel.an .tunnel-ende .it{text-transform:none;font-size:.8em;color:#fff}
.tunnel.an .tunnel-zahl{display:block;position:absolute;right:1.5rem;bottom:1.2rem;z-index:5;color:rgba(255,255,255,.7)}
.tunnel-zahl b{color:var(--lime);font-weight:400;font-size:1.6rem}
@media (max-width:900px){.tunnel.an .gbild{width:62vw}}

/* ================= Lichterschau: Bilderspur ================= */
.lichter{position:relative;min-height:100svh;background:#000;color:#fff;overflow:hidden;display:grid;place-items:center;touch-action:pan-y}
.lichter-text{position:relative;z-index:50;text-align:center;pointer-events:none;mix-blend-mode:difference;padding-inline:1.5rem}
.lichter h2{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,9vw,9rem);line-height:.95;letter-spacing:-.02em;text-transform:uppercase;margin-top:1.2rem}
.lichter h2 .it{text-transform:none}
.lichter .tag{color:#fff}
.spurbild{position:absolute;left:0;top:0;width:clamp(150px,20vw,300px);aspect-ratio:3/2;object-fit:cover;border-radius:12px;pointer-events:none;opacity:0;will-change:transform,opacity;box-shadow:0 20px 60px -20px rgba(0,0,0,.8)}

/* ================= Unterseiten: gemeinsam ================= */
.seitenkopf{position:relative;min-height:88svh;display:flex;align-items:flex-end;padding-block:8rem 4rem;overflow:hidden;color:var(--ink);background:var(--c)}
.seitenkopf .wrap{position:relative;z-index:2}
.seitenkopf .tag{display:inline-flex;padding:.4rem .8rem;border:2px solid currentColor;border-radius:999px}
.riesentitel{font-family:var(--display);font-weight:400;font-size:clamp(3rem,11vw,11.5rem);line-height:.92;letter-spacing:-.02em;text-transform:uppercase;margin-top:1.6rem}
.riesentitel .it{text-transform:none;font-size:1.05em}
.seitenkopf .lead{font-size:clamp(1.15rem,1.8vw,1.5rem);max-width:46ch;margin-top:2rem;line-height:1.45}
.blobfeld{position:absolute;inset:0;pointer-events:none}
.blobfeld i{position:absolute;border-radius:50%;width:46vmax;height:46vmax;opacity:.9;background:radial-gradient(closest-side,var(--b),transparent);will-change:transform}
.blobfeld i:nth-child(1){--b:var(--yellow);right:-12vmax;top:-14vmax;animation:drift 14s ease-in-out infinite}
.blobfeld i:nth-child(2){--b:var(--cyan);right:12vw;bottom:-22vmax;animation:drift 18s ease-in-out infinite reverse}
.blobfeld i:nth-child(3){--b:#fff;left:-14vmax;top:20%;width:30vmax;height:30vmax;opacity:.5;animation:drift 12s ease-in-out infinite}
.abschnitt{padding-block:7rem;position:relative}
.abschnitt h2{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,7vw,7rem);line-height:.95;letter-spacing:-.02em;text-transform:uppercase}
.abschnitt h2 .it{text-transform:none}
.abschnitt .lead{font-size:clamp(1.1rem,1.6vw,1.35rem);max-width:52ch;margin-top:1.4rem;line-height:1.5}
.dunkel{background:var(--ink);color:var(--paper)}
.hell{background:var(--paper);color:var(--ink)}
.abschnitt .tag{display:inline-flex;padding:.4rem .8rem;border:2px solid currentColor;border-radius:999px;margin-bottom:1.4rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:1.4rem 0 0}
.chips li{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:.35rem .7rem;border-radius:999px;border:2px solid currentColor}

/* ================= Referenzen ================= */
.stapel{position:relative}
.projekt{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;background:var(--c);color:var(--ink);padding-block:6rem 3rem;transform-origin:50% 0;overflow:hidden;will-change:transform}
.projekt.dunkeltext{color:#fff}
.projekt-innen{width:min(1320px,100% - 3rem);margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:center}
.projekt h2{font-family:var(--display);font-weight:400;font-size:clamp(3rem,9vw,8.5rem);line-height:.9;letter-spacing:-.02em;text-transform:uppercase;margin:.8rem 0 1.2rem}
.projekt p{font-size:1.08rem;line-height:1.55;max-width:48ch}
.projekt p.klein{font-size:.98rem;margin-top:1rem;opacity:.85}
.projekt .nr{position:absolute;right:2vw;top:5.5rem;font-family:var(--display);font-size:clamp(5rem,16vw,16rem);line-height:.8;opacity:.18;pointer-events:none}
.p-bilder{position:relative;min-height:min(62svh,560px)}
.p-bild{position:absolute;margin:0;border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);border:5px solid var(--ink)}
.p-bild img{display:block;width:100%;height:100%;object-fit:cover}
.p-bild.gross{left:0;top:0;width:82%;aspect-ratio:16/10}
.p-bild.klein{right:0;bottom:0;width:48%;aspect-ratio:4/3;border-color:#fff}
.vn{position:relative;border-radius:20px;overflow:hidden;border:5px solid var(--ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.6);--p:50%;aspect-ratio:1898/886;background:#eee;user-select:none}
.vn img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.vn-nach{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p))}
.vn-regler{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:3}
.vn-griff{position:absolute;top:50%;left:var(--p);width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-size:1.4rem;font-weight:700;box-shadow:0 0 0 6px rgba(12,11,20,.85);z-index:2;pointer-events:none}
.vn::before{content:"";position:absolute;top:0;bottom:0;left:var(--p);width:4px;margin-left:-2px;background:var(--lime);z-index:2}
.vn-regler:focus-visible~.vn-griff{outline:3px solid #fff;outline-offset:4px}
.vn-l,.vn-r{position:absolute;bottom:.8rem;z-index:2;background:var(--ink);color:#fff;padding:.3rem .6rem;border-radius:999px}
.vn-l{left:.8rem}.vn-r{right:.8rem;background:var(--lime);color:var(--ink)}
.namen{list-style:none;padding:0;margin:3rem 0 0;border-top:2px solid currentColor}
.namen li{display:grid;grid-template-columns:4rem 1fr auto;gap:1rem;align-items:baseline;padding:1.2rem .4rem;border-bottom:2px solid currentColor;position:relative;transition:color .3s,padding .5s var(--ease)}
.namen li::before{content:"";position:absolute;inset:0;background:var(--f);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);z-index:0}
.namen li>*{position:relative;z-index:1}
.namen li:hover{color:var(--ink);padding-left:1.6rem}
.namen li:hover::before{transform:scaleY(1)}
.namen .nr{font-family:var(--mono);font-size:.8rem}
.namen b{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,5vw,4.4rem);line-height:1;text-transform:uppercase;letter-spacing:-.02em}
.namen .was{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;text-align:right}
.schwebebild{position:fixed;left:0;top:0;width:min(340px,30vw);aspect-ratio:4/3;border-radius:18px;overflow:hidden;pointer-events:none;z-index:60;opacity:0;transform:translate(-50%,-50%) scale(.6);will-change:transform,opacity;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);display:grid;place-items:center;background:var(--f,var(--pink))}
.schwebebild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.schwebebild b{font-family:var(--display);font-weight:400;font-size:4rem;color:var(--ink);position:relative}
@media (max-width:900px){
  .projekt{position:relative;min-height:0}
  .projekt-innen{grid-template-columns:1fr;gap:2rem}
  .p-bilder{min-height:0;display:grid;gap:1rem}
  .p-bild{position:relative}.p-bild.gross,.p-bild.klein{width:100%;inset:auto}
  .namen li{grid-template-columns:2.4rem 1fr}.namen .was{grid-column:2;text-align:left}
  .schwebebild{display:none}
}

/* ================= Preise ================= */
.pakete{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:3rem;perspective:1400px}
.paket{position:relative;border-radius:28px;padding:2rem 1.6rem 1.8rem;background:var(--f);color:var(--ink);display:flex;flex-direction:column;transform-style:preserve-3d;will-change:transform;box-shadow:0 40px 80px -40px rgba(0,0,0,.7);overflow:hidden}
.paket::after{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.45),transparent 50%);opacity:0;transition:opacity .3s;pointer-events:none}
.paket:hover::after{opacity:1}
.paket h3{font-family:var(--display);font-weight:400;font-size:clamp(2rem,3.2vw,3rem);line-height:1;text-transform:uppercase;letter-spacing:-.02em}
.paket .wofuer{margin-top:.8rem;font-size:1rem;line-height:1.45;min-height:4.4em}
.paket ul{list-style:none;padding:0;margin:1.4rem 0 1.6rem;display:grid;gap:.45rem}
.paket li{display:flex;gap:.6rem;font-size:.97rem;line-height:1.35}
.paket li::before{content:"✓";font-weight:700;flex:0 0 auto;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--ink);color:var(--f);display:grid;place-items:center;font-size:.75rem}
.paket .preis{margin-top:auto;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.paket .preis small{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
.paket .preis b{font-family:var(--display);font-weight:400;font-size:clamp(2.8rem,5vw,4.6rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.paket .zusatz{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;margin-top:.3rem}
.paket .pill{margin-top:1.4rem;justify-content:center;background:var(--ink);color:var(--f)}
.paket .pill::before{background:#fff}
.paket .pill:hover{color:var(--ink)}
.paket.empf{transform:translateY(-14px)}
.empf-plakette{position:absolute;right:-8px;top:-8px;width:120px;height:120px;z-index:2;animation:spin 14s linear infinite}
.empf-plakette text{font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase}
.extras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:3rem}
.extra{border-radius:22px;padding:1.5rem;background:#16141f;border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:.6rem}
.extra b{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1;color:var(--f)}
.extra h3{font-family:var(--grot);font-size:1.25rem;letter-spacing:-.02em}
.extra p{color:var(--mut);font-size:.95rem}
.hinweis-box{margin-top:2rem;font-size:.95rem;color:var(--mut);max-width:70ch}
.faktoren{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:3rem}
.faktor{aspect-ratio:3/4;border-radius:22px;background:var(--f);color:var(--ink);padding:1.4rem;display:flex;flex-direction:column;justify-content:space-between;transform-origin:50% 100%;will-change:transform}
.faktor .z{font-family:var(--display);font-size:clamp(3rem,6vw,5.5rem);line-height:.8}
.faktor h3{font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,2vw,1.9rem);text-transform:uppercase;line-height:1;letter-spacing:-.02em}
.faktor p{font-size:.95rem;line-height:1.4;margin-top:.6rem}
.stickerfeld{position:relative;min-height:440px;margin-top:2.5rem;border:3px dashed rgba(12,11,20,.3);border-radius:28px}
.stickerfeld .sticker{position:absolute;white-space:normal;max-width:300px;line-height:1.3;cursor:grab;animation:none}
.stickerfeld .sticker b{display:block;font-family:var(--display);font-weight:400;font-size:1.2rem;text-transform:uppercase;margin-bottom:.25rem}
.stickerfeld .sticker span{font-family:var(--sans);font-weight:400;font-size:.88rem;display:block}
@media (max-width:1000px){.pakete{grid-template-columns:1fr}.paket.empf{transform:none}.extras,.faktoren{grid-template-columns:1fr 1fr}.paket .wofuer{min-height:0}}
@media (max-width:560px){.extras,.faktoren{grid-template-columns:1fr}.faktor{aspect-ratio:auto;min-height:220px}.stickerfeld{min-height:0;display:grid;gap:.8rem;padding:1rem;border:0}.stickerfeld .sticker{position:relative;max-width:none;left:auto!important;top:auto!important;right:auto!important}}

/* ================= Ablauf ================= */
.termin-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:center;margin-top:3rem}
.kalender{position:relative;aspect-ratio:1;max-width:440px;border-radius:32px;background:#fff;color:var(--ink);box-shadow:0 50px 90px -40px rgba(0,0,0,.7);overflow:hidden;transform-style:preserve-3d;will-change:transform}
.kalender .kk{background:var(--pink);color:#fff;padding:1.2rem 1.4rem;font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;display:flex;justify-content:space-between}
.kalender .kd{padding:1.4rem;display:flex;flex-direction:column;gap:.6rem}
.kalender .kd b{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,4vw,3.4rem);line-height:.95;text-transform:uppercase;letter-spacing:-.02em}
.kalender .kd span{font-size:1.05rem}
.kalender .kd .pill{align-self:flex-start;margin-top:.6rem}
.kalender .ring2{position:absolute;right:-40px;bottom:-40px;width:180px;height:180px;border-radius:50%;background:conic-gradient(var(--lime),var(--cyan),var(--violet),var(--pink),var(--yellow),var(--lime));animation:spin 8s linear infinite;opacity:.9}
.agenda{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.agenda li{display:flex;gap:1rem;align-items:center;padding:1rem 1.2rem;border-radius:18px;background:rgba(255,255,255,.08);font-size:1.08rem}
.agenda .haken{flex:0 0 auto;width:34px;height:34px;border-radius:10px;border:3px solid var(--lime);display:grid;place-items:center;color:var(--ink);font-weight:700}
.agenda li.ok .haken{background:var(--lime)}
.agenda .haken::after{content:"✓";opacity:0;transform:scale(0);transition:transform .4s var(--ease),opacity .2s}
.agenda li.ok .haken::after{opacity:1;transform:none}
.fahrplan{position:relative;padding-block:4rem 8rem}
.fahrplan svg.weg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.fahrplan .weg path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.fahrplan .weg .grund{stroke:rgba(12,11,20,.15);stroke-width:14;stroke-dasharray:2 18}
.fahrplan .weg .farbe{stroke:url(#wegverlauf);stroke-width:14}
.rakete{position:absolute;left:0;top:0;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-family:var(--display);font-size:1.1rem;z-index:3;box-shadow:0 0 0 6px var(--lime),0 0 40px 10px rgba(200,255,58,.6);will-change:transform}
.stationen{position:relative;display:grid;gap:9vh;z-index:2;padding-block:4rem}
.station{width:min(460px,44%);background:#fff;color:var(--ink);border-radius:24px;padding:1.6rem 1.6rem 1.8rem;box-shadow:0 30px 60px -30px rgba(0,0,0,.5);border:4px solid var(--f);will-change:transform}
.station:nth-child(odd){justify-self:start}.station:nth-child(even){justify-self:end}
.station .n{font-family:var(--display);font-size:3rem;line-height:1;color:var(--f);-webkit-text-stroke:2px var(--ink)}
.station h3{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1;text-transform:uppercase;margin:.6rem 0 .5rem;letter-spacing:-.02em}
.station p{font-size:1rem;line-height:1.45}
.station .dauer{display:inline-block;margin-top:.8rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:var(--f);padding:.3rem .6rem;border-radius:999px}
.zielflagge{text-align:center;margin-top:2rem;position:relative;z-index:2}
.zielflagge b{display:inline-block;font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,9vw,8rem);line-height:1;text-transform:uppercase;background:var(--ink);color:var(--lime);padding:.1em .3em;border-radius:.15em;transform:rotate(-3deg)}
.wochen{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;margin-top:3rem}
.wochen .zahl{font-family:var(--display);font-size:clamp(6rem,22vw,20rem);line-height:.8;background:linear-gradient(90deg,var(--lime),var(--cyan),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.wochen p{font-family:var(--display);font-size:clamp(1.6rem,3.6vw,3rem);text-transform:uppercase;line-height:1}
.gruende{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:3rem}
.fragen{margin-top:3rem;display:grid;gap:.8rem}
.frage{border-radius:22px;background:#fff;color:var(--ink);overflow:hidden;border:3px solid var(--ink)}
.frage summary{list-style:none;cursor:pointer;padding:1.3rem 1.5rem;font-family:var(--display);font-size:clamp(1.15rem,2vw,1.6rem);text-transform:uppercase;letter-spacing:-.02em;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"+";flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--f);display:grid;place-items:center;font-family:var(--sans);font-size:1.6rem;transition:transform .4s var(--ease)}
.frage[open] summary::after{transform:rotate(135deg)}
.frage .antwort{padding:0 1.5rem 1.5rem;font-size:1.05rem;line-height:1.55;max-width:70ch}
@media (max-width:900px){
  .termin-grid,.gruende{grid-template-columns:1fr}
  .station{width:calc(100% - 3.2rem);justify-self:end!important}
  .rakete{width:52px;height:52px;margin:-26px 0 0 -26px;font-size:.8rem}
}
html:not(.js) .agenda .haken::after,.rm .agenda .haken::after{opacity:1;transform:none}
.dunkel .sk{background:#16141f;border:1px solid rgba(255,255,255,.12)}
.dunkel .sk .n{color:var(--c)}
@media (max-width:560px){.riesentitel{font-size:15vw}.seitenkopf{min-height:72svh;padding-top:7rem}}
@media (max-width:900px){.warp-pin.schnell .warp-vid{filter:none}.warp-strahlen{inset:-10%}}