@font-face{font-family:Manrope;src:url(/assets/Manrope-Variable.ttf) format("truetype");font-weight:200 800;font-display:swap}
@font-face{font-family:Caveat;src:url(/assets/Caveat.ttf) format("truetype");font-display:swap}
:root{--text:#F3F4F5;--muted:#A5ACB2;--ti-l:#DDE2E4;--ti-m:#B5BEC6;--ti-s:#788793;--orange:#F47C00;--note-orange:#FFA24A;
  --rot:#FF4D3D;--gruen:#5BD08A;
  --graphit:linear-gradient(118deg,#2a2f35 0%,#14181c 55%,#171b20 100%);--titan:linear-gradient(121deg,var(--ti-l),var(--ti-m) 40%,var(--ti-s) 72%,#c5cdd3);
  --schatten:inset 0 1px 0 #ffffff1f,0 2px 4px #0007,0 16px 24px -10px #0009,0 40px 68px -24px #000b}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#080807;color:var(--text);font-family:Manrope,system-ui,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
p{margin:0}

/* Lader, Korn, Tiefe – wie VAF-Marco-Seite */
.loader{position:fixed;inset:0;z-index:100;display:grid;place-content:center;justify-items:center;gap:14px;background:radial-gradient(ellipse at 50% 42%,#1b1f23 0%,#080807 70%);transition:opacity .6s ease,visibility .6s}
.loader.weg{opacity:0;visibility:hidden}
.loader-eye{width:84px;filter:drop-shadow(0 10px 30px #f47c0055);animation:blink 2.6s infinite}
@keyframes blink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}}
.loader-t{display:flex;align-items:baseline;gap:12px;font-weight:800;font-size:34px;letter-spacing:-.04em}
.loader-t .j{color:var(--gruen)}.loader-t .n{color:var(--rot)}.loader-t i{font-style:normal;color:var(--muted);font-size:24px}
.grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:korn 1.2s steps(4) infinite}
@keyframes korn{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}
.depth{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.glow{position:absolute;border-radius:50%;filter:blur(70px)}
.g1{width:90vw;height:90vw;left:-30vw;top:30vh;background:radial-gradient(circle,#dde2e41a,transparent 65%)}
.g2{width:70vw;height:70vw;right:-25vw;top:-6vh;background:radial-gradient(circle,#f47c0024,transparent 65%)}
.kugel{position:absolute;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0%,#dde2e4 9%,#9aa5ae 26%,#3b434b 52%,#101316 74%,#2a3036 100%);box-shadow:0 30px 50px -18px #000,inset -6px -10px 24px #000a}
.k1{width:96px;height:96px;right:-38px;top:38vh;opacity:.75}
.f-star{position:absolute;width:44px;right:9vw;top:7vh;opacity:.6;transform:rotate(12deg)}

.wrap{position:relative;z-index:2;width:min(560px,92vw);margin:0 auto;padding:44px 0 90px}
.kicker,.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-weight:600}
h1{font-size:clamp(46px,13vw,76px);line-height:.92;letter-spacing:-.05em;margin:0;font-weight:800;text-shadow:0 30px 60px #000}
h1 .big{background:linear-gradient(118deg,#fff 0%,var(--ti-l) 30%,var(--ti-s) 62%,#fff 90%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 7s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:0 0}50%{background-position:100% 0}}
.under{width:min(300px,64vw);margin:8px 0 14px}
.lead{font-size:19px;font-weight:700;color:#e6e9eb}
.lead .j{color:var(--gruen)}.lead .n{color:var(--rot)}
.note{font-family:Caveat,cursive;font-size:24px;line-height:1.1;color:var(--note-orange);transform:rotate(-1.5deg);transform-origin:left;margin-top:14px}

/* Wer bist du – Chrom-Chips */
.ich{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:26px 0 6px}
.ich button{font:inherit;font-weight:800;font-size:18px;color:#fff;background:var(--graphit);border:1px solid #ffffff1c;border-radius:14px;min-height:56px;cursor:pointer;box-shadow:var(--schatten)}
.ich button[aria-pressed=true]{background:var(--titan);color:#171b20;border-color:#fff6;box-shadow:var(--schatten),0 0 0 2px var(--orange),0 0 40px -10px #f47c0099}
.ich.fehlt button{animation:puls .5s 3}
@keyframes puls{50%{transform:scale(1.04);border-color:var(--orange)}}
.stand{font-size:13px;font-weight:700;color:var(--muted);min-height:20px}
.stand b{color:#fff}

/* Kunde */
.gruppe{margin-top:56px}
.gkopf{display:flex;align-items:flex-end;gap:12px;margin-bottom:16px}
.gkopf h2{margin:0;font-size:clamp(34px,9vw,48px);line-height:1;letter-spacing:-.04em;font-weight:800}
.gkopf .name{background:var(--titan);-webkit-background-clip:text;background-clip:text;color:transparent}
.gkopf .thema{display:block;font-family:Caveat,cursive;font-size:22px;color:var(--note-orange);margin-top:2px;transform:rotate(-1.5deg);letter-spacing:0;font-weight:400}
.gkopf details{margin-left:auto;font-size:13px;color:var(--muted);text-align:right}
.gkopf summary{cursor:pointer;font-weight:700;list-style:none;padding:8px 12px;border:1px solid #ffffff1c;border-radius:10px;background:#14181c}
.gkopf summary::-webkit-details-marker{display:none}
.gkopf details video{width:150px;border-radius:10px;margin-top:8px;display:block}

/* Karte */
.karte{position:relative;border-radius:22px;padding:14px;margin-bottom:26px;background:var(--graphit);border:1px solid #ffffff17;box-shadow:var(--schatten);transition:box-shadow .3s,border-color .3s}
.karte.ja{border-color:#5bd08a99;box-shadow:var(--schatten),0 0 0 1px #5bd08a55,0 0 60px -22px #5bd08a99}
.karte.nein{border-color:#ff4d3d99;box-shadow:var(--schatten),0 0 0 1px #ff4d3d55,0 0 60px -22px #ff4d3d99}
.nr{display:flex;align-items:baseline;gap:10px;margin:0 4px 10px}
.nr .v{font-family:Caveat,cursive;font-size:26px;color:var(--note-orange);transform:rotate(-2deg)}
.nr .von{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700}
video.clip{width:100%;aspect-ratio:9/16;max-height:72vh;object-fit:contain;background:#000;border-radius:14px;display:block;border:1px solid #ffffff12}
.satz{font-size:21px;font-weight:800;line-height:1.25;letter-spacing:-.01em;margin:14px 4px 14px}
.knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.knoepfe button{font:inherit;font-size:24px;font-weight:800;letter-spacing:.02em;min-height:68px;border-radius:16px;cursor:pointer;background:#ffffff08;border:2px solid;box-shadow:inset 0 1px 0 #ffffff14}
.knoepfe .j{color:var(--gruen);border-color:#5bd08acc}.knoepfe .n{color:var(--rot);border-color:#ff4d3dcc}
.karte.ja .j{background:var(--gruen);color:#08130c;border-color:var(--gruen)}
.karte.nein .n{background:var(--rot);color:#170806;border-color:var(--rot)}
.warum{display:none;margin-top:12px}
.karte.ja .warum,.karte.nein .warum{display:block}
.warum textarea{width:100%;font:inherit;font-size:17px;color:#fff;background:#0009;border:1px solid #ffffff26;border-radius:12px;padding:10px 12px;min-height:52px;resize:vertical}
.warum textarea::placeholder{color:#8f979e}
.warum .gesp{font-size:13px;color:var(--muted);font-weight:700;margin-top:4px;min-height:18px}
.andere{font-size:13px;color:var(--muted);font-weight:700;margin:10px 4px 0;min-height:18px}
.fuss{margin-top:40px;font-size:12px;color:#7d858c;text-align:center}
.fuss img{width:22px;display:inline-block;vertical-align:middle;margin-right:6px;opacity:.8}
@media (prefers-reduced-motion:reduce){.grain,.loader-eye,h1 .big{animation:none}}

/* Pitch-Auswahl: zwei Marker je Karte */
.knoepfe .f{color:var(--orange);border-color:#f47c00cc}.knoepfe .b{color:var(--gruen);border-color:#5bd08acc}
.knoepfe button{font-size:19px}
.karte.feuer .f{background:var(--orange);color:#1a0d00;border-color:var(--orange)}
.karte.brauch .b{background:var(--gruen);color:#08130c;border-color:var(--gruen)}
.karte.feuer{border-color:#f47c0099;box-shadow:var(--schatten),0 0 0 1px #f47c0055,0 0 60px -22px #f47c0099}
.karte.brauch .warum,.karte.feuer .warum{display:block}
.hinweis{font-size:13px;color:var(--muted);font-weight:700;margin:-4px 4px 12px}
.platz{border:2px dashed #ffffff2a;border-radius:18px;padding:26px 18px;text-align:center;color:var(--muted);font-weight:700}
.platz b{display:block;color:#fff;font-size:20px;margin-bottom:6px}
.fehlt textarea{width:100%;font:inherit;font-size:18px;color:#fff;background:#0009;border:1px solid #ffffff26;border-radius:14px;padding:12px 14px;min-height:130px}
.gkopf h2 .name{font-size:clamp(28px,8vw,40px)}