:root{
  --bg:#0a090d;--bg2:#0f0d13;--surface:#16131d;--line:#2a2733;--line-soft:#201d29;
  --ink:#F1EFF6;--mute:#b3afc2;--faint:#837f93;
  --magenta:#EE5A96;--magenta-soft:#f6a8c8;--magenta-deep:#C53C7C;
  --sans:"Helvetica Neue",Helvetica,system-ui,-apple-system,Arial,sans-serif;
  --z-scene:1;--z-fx:5;--z-content:20;--z-caption:30;--z-nav:150;--z-progress:200;--z-devtools:300;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
::selection{background:rgba(238,90,150,.3);}
a{color:inherit;text-decoration:none;}
h1,h2,h3{text-wrap:balance;}
img{max-width:100%;}
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto!important;}

.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--magenta-deep),var(--magenta));z-index:var(--z-progress);}

.nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);display:flex;justify-content:space-between;align-items:center;padding:18px 34px;}
.nav .logo{display:flex;align-items:center;gap:10px;}
.nav .logo-tile{display:block;width:40px;height:40px;border-radius:14px;overflow:hidden;flex:none;
  box-shadow:0 8px 24px rgba(238,90,150,.45),inset 0 1px 0 rgba(255,255,255,.2);}
.nav .logo-tile img{width:100%;height:100%;display:block;object-fit:cover;}
.nav .wordmark{font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:.18em;color:rgba(255,255,255,.95);text-shadow:0 2px 12px rgba(0,0,0,.5);}
.nav .cta-mini{font-size:13px;letter-spacing:.04em;border:1px solid rgba(255,255,255,.45);border-radius:30px;padding:8px 18px;background:rgba(10,9,13,.25);backdrop-filter:blur(8px);transition:border-color .25s,background .25s;}
.nav .cta-mini:hover{border-color:var(--magenta);background:rgba(238,90,150,.14);}

/* ============ HERO 1: Jedes Glas lernt dich kennen ============ */
.ghero{position:relative;height:380vh;}
.gstage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--bg);}
.g-bg{position:absolute;inset:0;}
.g-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.g-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .5s ease;}
.g-canvas.ready{opacity:1;}
.g-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,7,10,.35) 0%,rgba(8,7,10,.05) 35%,rgba(8,7,10,.55) 80%,rgba(8,7,10,.85) 100%);}
.g-head{position:absolute;z-index:20;top:9vh;left:0;right:0;text-align:center;padding:0 28px;will-change:opacity;}
/* Headline bleibt voll zentriert — das Phone sitzt tiefer und schmaler, damit nichts überlappt */
.g-phone{position:absolute;z-index:22;right:7%;top:58%;width:min(270px,24vw);aspect-ratio:1170/2532;
  transform:translateY(-50%) translateX(140%);opacity:0;will-change:transform,opacity;
  border-radius:min(36px,3.3vw);background:linear-gradient(135deg,#5b5b64 0%,#1a1a1f 18%,#101014 50%,#1a1a1f 82%,#4c4c55 100%);padding:3px;
  box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 .5px rgba(0,0,0,.85);}
.g-screen{position:relative;width:100%;height:100%;border-radius:min(33px,3vw);overflow:hidden;background:#0b0a0e;}
.g-screen::after{content:"";position:absolute;top:2.5%;left:50%;transform:translateX(-50%);width:28%;height:3.4%;background:#000;border-radius:20px;z-index:6;pointer-events:none;}
.g-scr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.g-scr-b{opacity:0;will-change:opacity;}
/* Statement-Chip: präsent im freien Raum links vom Phone, vertikal mittig */
.g-float{position:absolute;z-index:23;left:9vw;top:50%;transform:translateY(-50%);white-space:nowrap;
  display:flex;align-items:center;gap:14px;
  padding:18px 26px;font-size:clamp(17px,1.6vw,21px);font-weight:600;color:#fff;
  background:rgba(13,11,17,.72);backdrop-filter:blur(16px);border:1px solid rgba(238,90,150,.55);border-radius:20px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);opacity:0;will-change:transform,opacity;}
.gf-dot{width:10px;height:10px;border-radius:50%;background:var(--magenta);box-shadow:0 0 12px rgba(238,90,150,.9);flex:none;}
.g-caption{position:absolute;z-index:24;left:50%;bottom:10vh;transform:translateX(-50%);text-align:center;opacity:0;
  font-size:clamp(19px,2.6vw,26px);color:var(--ink);text-shadow:0 1px 14px rgba(0,0,0,.7);white-space:nowrap;will-change:transform,opacity;}
.g-caption b{color:var(--magenta-soft);font-weight:600;}
.g-out{position:absolute;inset:0;z-index:30;background:var(--bg);opacity:0;pointer-events:none;}
@media(max-width:900px){
  .g-phone{right:50%;width:min(220px,54vw);border-radius:min(30px,7.6vw);}
  .g-screen{border-radius:min(27px,6.9vw);}
  .g-float{left:50%;top:auto;bottom:18vh;transform:translate(-50%,0);font-size:15px;padding:12px 18px;}
}
@media(min-width:901px) and (max-height:800px){
  .g-phone{width:220px;top:60%;}
}

/* ============ HERO 2 ============ */
.hero{position:relative;height:640vh;}
.stage{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;}

.scene{position:absolute;inset:0;z-index:var(--z-scene);will-change:opacity;}
.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.scene-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease;}
.scene-video.ready{opacity:1;}
.scene .css-fallback{position:absolute;inset:0;z-index:-1;}
.scene-shop,.scene-friends,.scene-home,.scene-self{opacity:0;}
.scene-home .css-fallback{background:
    radial-gradient(50% 45% at 50% 68%, rgba(224,140,95,.28), transparent 65%),
    linear-gradient(180deg,#0c0a0e 0%,#100d10 55%,#090709 100%);}
.scene-hero .css-fallback{background:
    radial-gradient(40% 55% at 30% 42%, rgba(232,150,74,.4), transparent 60%),
    radial-gradient(28% 40% at 68% 60%, rgba(255,196,120,.35), transparent 55%),
    linear-gradient(160deg,#1a1410 0%,#0c0a0e 55%,#08070a 100%);}
.scene-hero::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(8,7,10,.25) 0%,rgba(8,7,10,.05) 35%,rgba(8,7,10,.62) 78%,rgba(8,7,10,.9) 100%);}
.scene-shop .css-fallback{background:
    radial-gradient(50% 60% at 60% 40%, rgba(216,150,80,.30), transparent 60%),
    linear-gradient(170deg,#141008 0%,#0d0a0a 60%,#09080a 100%);}
.scene-friends .css-fallback{background:
    radial-gradient(55% 42% at 50% 70%, rgba(214,120,90,.3), transparent 65%),
    linear-gradient(180deg,#0d0a10 0%,#120d10 55%,#0a0709 100%);}
.scene-self .css-fallback{background:
    radial-gradient(60% 70% at 50% 46%, rgba(238,90,150,.07), transparent 65%),
    linear-gradient(180deg,#08070b 0%,#0a090d 100%);}
.constellation{position:absolute;inset:0;opacity:.85;}
.constellation i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--magenta);box-shadow:0 0 10px rgba(238,90,150,.8);opacity:.5;}
.constellation svg{position:absolute;inset:0;width:100%;height:100%;}
.constellation line{stroke:rgba(238,90,150,.13);stroke-width:1;vector-effect:non-scaling-stroke;}

.vignette{position:absolute;inset:0;z-index:var(--z-fx);pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 48%, rgba(0,0,0,.66) 100%);}
.grain{position:absolute;inset:-50%;z-index:var(--z-fx);pointer-events:none;opacity:.05;
  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='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainmove 1.2s steps(3) infinite;}
@keyframes grainmove{0%{transform:translate(0,0)}33%{transform:translate(-4%,2%)}66%{transform:translate(3%,-3%)}100%{transform:translate(0,0)}}
.scrim{position:absolute;inset:0;z-index:6;background:#08070a;opacity:0;pointer-events:none;}
/* Laden-Szene schiebt als Wipe von unten rein — Schattenkante oben für Tiefe */
.scene-shop{box-shadow:0 -30px 60px rgba(0,0,0,.75);}

.act-caption{position:absolute;top:14%;left:50%;transform:translateX(-50%);z-index:var(--z-caption);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#fff;font-weight:500;opacity:0;white-space:nowrap;text-shadow:0 1px 14px rgba(0,0,0,.8);}
.act-caption b{color:var(--magenta-soft);font-weight:500;}

.layer{position:absolute;inset:0;z-index:var(--z-content);display:flex;align-items:flex-end;justify-content:center;text-align:center;padding:0 28px 15vh;pointer-events:none;}
.h-headline{will-change:transform,opacity;}
.h-headline .eyebrow{font-size:clamp(14px,1.5vw,19px);letter-spacing:.24em;text-transform:uppercase;color:var(--magenta);font-weight:700;margin-bottom:20px;text-shadow:0 1px 14px rgba(0,0,0,.8);}
.h-headline h1{font-family:var(--sans);font-weight:600;font-size:clamp(34px,5vw,64px);line-height:1.08;letter-spacing:-.02em;text-shadow:0 2px 30px rgba(0,0,0,.55);}
.h-headline h1 em{font-style:normal;font-weight:600;color:var(--magenta);}
.h-headline p{margin-top:20px;font-size:clamp(15px,1.8vw,19px);color:#e6e2ee;max-width:560px;margin-left:auto;margin-right:auto;text-shadow:0 1px 16px rgba(0,0,0,.75);}

/* Scroll-Einladung: von Anfang an präsent, unten überm Glas */
.scroll-hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:var(--z-caption);
  font-size:13px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.9);
  display:flex;flex-direction:column;align-items:center;gap:12px;text-shadow:0 1px 12px rgba(0,0,0,.8);}
.scroll-hint span{width:2px;height:44px;border-radius:2px;background:linear-gradient(var(--magenta),transparent);animation:hintpulse 1.8s ease-in-out infinite;}
@keyframes hintpulse{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* Moment I — Phone */
.phone{position:absolute;z-index:22;left:50%;top:50%;width:272px;height:566px;transform:translate(-50%,-50%);opacity:0;will-change:transform,opacity;
  border-radius:36px;background:linear-gradient(135deg,#5b5b64 0%,#1a1a1f 18%,#101014 50%,#1a1a1f 82%,#4c4c55 100%);
  box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 .5px rgba(0,0,0,.85);padding:3px;}
.screen{position:relative;width:100%;height:100%;border-radius:33px;overflow:hidden;background:#0b0a0e;}
.island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:78px;height:22px;background:#000;border-radius:14px;z-index:6;}
/* Scan-Seiten: wischen horizontal durch den Screen (translateX via JS) */
.scan-page{position:absolute;inset:0;transform:translateX(110%);will-change:transform;overflow:hidden;}
.page-tag{position:absolute;top:44px;left:50%;transform:translateX(-50%);z-index:8;white-space:nowrap;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85);
  background:rgba(13,11,17,.6);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);
  border-radius:20px;padding:5px 12px;}
/* Sucherbilder in FARBE (die Welt ist S/W, durch die VinoSomm-Kamera sieht man Farbe) */
.cam{position:absolute;inset:0;}
.cam1{background:url('/img/scan-target-v3.jpg') 46% 55%/cover no-repeat;}
.cam2{background:url('/img/scan-menu-v3.jpg') 50% 45%/cover no-repeat;}
.cam3{background:url('/img/scan-dish-v3.jpg') 50% 50%/cover no-repeat;}
/* EN: internationales Château-Flaschenfoto statt deutschem Weingut-Label */
html[lang="en"] .cam1{background-image:url('/img/en/scan-target-v3.jpg');}
/* Feature-Erklärungen neben dem Phone (nur Desktop) */
.feat{position:absolute;top:50%;z-index:21;opacity:0;width:min(27vw,360px);will-change:transform,opacity;}
.feat-left{right:calc(50% + 214px);text-align:right;}
.feat-right{left:calc(50% + 214px);}
.f-kicker{font-size:16px;letter-spacing:.24em;text-transform:uppercase;color:var(--magenta);font-weight:700;margin-bottom:14px;text-shadow:0 1px 12px rgba(0,0,0,.7);}
.feat h3{font-family:var(--sans);font-weight:600;font-size:clamp(24px,2.6vw,34px);line-height:1.16;letter-spacing:-.02em;text-shadow:0 2px 22px rgba(0,0,0,.65);}
.f-chip{display:block;position:relative;margin:0 0 12px;padding:14px 18px 14px 42px;
  font-size:15.5px;font-weight:500;line-height:1.4;color:rgba(255,255,255,.95);
  background:rgba(13,11,17,.72);backdrop-filter:blur(14px);border:1px solid rgba(238,90,150,.42);
  border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.4);opacity:0;will-change:transform,opacity;}
.f-chip::before{content:"";position:absolute;left:17px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:var(--magenta);box-shadow:0 0 10px rgba(238,90,150,.85);}
/* Mobile: linkes Claim-Panel entfällt (Caption oben nennt das Feature),
   die Detail-Chips wandern kompakt UNTER das Phone */
@media(max-width:1023px){
  .feat-left{display:none;}
  .feat-right{left:50%;right:auto;top:auto;bottom:2.5vh;width:min(92vw,380px);}
  .f-chip{font-size:12.5px;line-height:1.35;padding:9px 12px 9px 32px;margin:0 0 8px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.45);}
  .f-chip::before{left:13px;width:7px;height:7px;}
}

/* wanderndes Zeilen-Highlight für den Weinkarten-Scan */
.list-hl{position:absolute;left:8%;right:8%;height:34px;top:30%;z-index:5;opacity:0;border-radius:10px;
  border:2px solid var(--magenta);background:rgba(238,90,150,.12);
  box-shadow:0 0 14px rgba(238,90,150,.45);}
.cam-dim{position:absolute;inset:0;background:
  radial-gradient(90% 70% at 50% 45%, transparent 40%, rgba(5,4,8,.55) 100%),
  linear-gradient(180deg, rgba(5,4,8,.35) 0%, transparent 22%, transparent 70%, rgba(5,4,8,.5) 100%);}
/* Corner-Brackets wie in der App: rund, Magenta, mit Glow */
.reticle{position:absolute;inset:0;z-index:4;opacity:0;}
.reticle .corner{position:absolute;width:30px;height:30px;border:2.5px solid var(--magenta);
  filter:drop-shadow(0 0 6px rgba(238,90,150,.55));}
.reticle .c1{top:84px;left:30px;border-right:0;border-bottom:0;border-top-left-radius:12px;}
.reticle .c2{top:84px;right:30px;border-left:0;border-bottom:0;border-top-right-radius:12px;}
.reticle .c3{bottom:96px;left:30px;border-right:0;border-top:0;border-bottom-left-radius:12px;}
.reticle .c4{bottom:96px;right:30px;border-left:0;border-top:0;border-bottom-right-radius:12px;}
/* wandernder Scan-Glow statt dünner Linie */
.scan-glow{position:absolute;left:6%;right:6%;height:64px;top:10%;z-index:5;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(238,90,150,.28) 45%,rgba(246,168,200,.5) 50%,rgba(238,90,150,.28) 55%,transparent);
  filter:blur(2px);}
.scan-flash{position:absolute;inset:0;z-index:6;background:#fff;opacity:0;}
/* Analyse-Karte — exakt der App-Look (Scan.tsx: rounded-26, blur-2xl, Magenta-Radial) */
.analyze-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;opacity:0;
  width:76%;padding:20px 16px;text-align:center;border-radius:26px;
  background:radial-gradient(130% 150% at 0% 0%, rgba(238,89,150,.30) 0%, rgba(168,55,122,.18) 55%, rgba(13,13,20,.55) 100%);
  border:1px solid rgba(238,90,150,.45);backdrop-filter:blur(20px);box-shadow:0 18px 50px rgba(0,0,0,.45);}
.analyze-card .ac-ring{width:26px;height:26px;margin:0 auto 10px;border-radius:50%;
  border:2.5px solid rgba(246,168,200,.25);border-top-color:var(--magenta);}
.analyze-card .ac-title{font-size:13px;font-weight:700;color:#fff;}
.analyze-card .ac-sub{font-size:10.5px;color:rgba(255,255,255,.65);margin-top:3px;}
/* Ergebnis-Karte unten im Screen: Glass-Chip mit Dot-Matrix-Match */
.scan-result{position:absolute;left:10px;right:10px;bottom:12px;z-index:7;opacity:0;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-radius:18px;padding:12px 14px;
  background:rgba(13,11,17,.72);backdrop-filter:blur(16px);border:1px solid rgba(238,90,150,.4);}
.scan-result .sr-name{font-size:12px;line-height:1.3;color:#fff;}
.scan-result .sr-name b{display:block;font-weight:600;}
.scan-result .sr-name span{color:rgba(255,255,255,.6);font-size:10.5px;}
.scan-result .sr-match{text-align:center;flex:none;}
.scan-result .sr-lbl{display:block;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,168,200,.8);margin-top:3px;}

/* Moment III — Taste Graph */
.tastegraph{position:absolute;z-index:23;left:50%;top:45%;transform:translate(-50%,-50%);opacity:0;width:min(62vw,390px);height:min(62vw,390px);will-change:opacity,transform;overflow:visible;}
.tg-axis-label{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;fill:rgba(255,255,255,.85);paint-order:stroke;stroke:rgba(0,0,0,.55);stroke-width:3px;}
.tg-axis-label.hot{fill:var(--magenta-soft);}
.tg-insight{position:absolute;z-index:24;left:50%;bottom:9%;transform:translateX(-50%);text-align:center;opacity:0;width:90%;}
.tg-insight .q{font-family:var(--sans);font-weight:500;font-size:clamp(19px,2.8vw,27px);letter-spacing:-.01em;color:var(--ink);text-shadow:0 1px 14px rgba(0,0,0,.7);}
.tg-insight .s{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);margin-top:12px;}

/* Finale — CTA */
.hero-cta{position:absolute;z-index:26;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;padding:0 28px;}
.hero-cta .brand{font-family:var(--sans);font-weight:600;font-size:clamp(28px,4.4vw,52px);line-height:1.12;letter-spacing:-.02em;text-shadow:0 2px 24px rgba(0,0,0,.6);}
.hero-cta .brand em{font-style:normal;font-weight:600;color:var(--magenta-soft);}
.hero-cta .tag{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-top:18px;}
.badges{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.badge{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;padding:12px 20px;background:rgba(20,17,26,.6);backdrop-filter:blur(6px);font-size:13px;text-align:left;transition:border-color .25s,transform .25s;}
.badge.live{border-color:rgba(238,90,150,.5);}
.badge.live:hover{border-color:var(--magenta);transform:translateY(-2px);}
.badge small{display:block;font-size:10px;color:var(--faint);letter-spacing:.08em;text-transform:uppercase;}
.badge.soon{opacity:.5;}
.badge .badge-arr{margin-left:2px;color:var(--magenta);font-size:15px;transition:transform .25s;}
.badge.live:hover .badge-arr{transform:translateX(3px);}
.wl-note{margin-top:12px;font-size:12.5px;color:var(--faint);letter-spacing:.01em;}

/* ============ BELOW THE FOLD ============ */
.wrap{max-width:1120px;margin:0 auto;padding:0 30px;}

/* AI-Chat-Section „Für jede Frage" (Gewinner-Variante C) — spielt komplett von selbst */
.cq{position:relative;height:100vh;}
.cq-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--bg);}
.cq-bg{position:absolute;inset:0;}
.cq-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cq-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .5s ease;}
.cq-canvas.ready{opacity:1;}
.cq-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,7,10,.4) 0%,rgba(8,7,10,.08) 35%,rgba(8,7,10,.55) 78%,rgba(8,7,10,.85) 100%);}
.cq-head{position:absolute;z-index:20;top:9vh;left:0;right:0;text-align:center;padding:0 28px;will-change:opacity;opacity:0;}
.cq-title{font-family:var(--sans);font-weight:600;font-size:clamp(32px,4.6vw,58px);line-height:1.08;letter-spacing:-.02em;text-shadow:0 2px 30px rgba(0,0,0,.55);text-wrap:balance;}
.cq-title em{font-style:normal;font-weight:600;color:var(--magenta);}
.qa-col{position:absolute;z-index:23;left:8vw;top:52%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:11px;max-width:min(38vw,460px);}
.qa-col .cb{max-width:100%;padding:14px 20px;font-size:clamp(14px,1.4vw,17.5px);line-height:1.45;border-radius:18px;color:#fff;
  opacity:0;will-change:transform,opacity;backdrop-filter:blur(12px);box-shadow:0 14px 40px rgba(0,0,0,.45);}
.qa-col .cb.me{align-self:flex-end;font-weight:600;background:rgba(238,90,150,.26);border:1px solid rgba(238,90,150,.45);border-bottom-right-radius:6px;}
.qa-col .cb.somm{align-self:flex-start;background:radial-gradient(130% 150% at 0% 0%, rgba(238,89,150,.24) 0%, rgba(168,55,122,.15) 55%, rgba(13,13,20,.66) 100%);border:1px solid rgba(238,90,150,.4);border-bottom-left-radius:6px;}
.cq-caption{position:absolute;z-index:24;left:50%;bottom:10vh;transform:translateX(-50%);text-align:center;opacity:0;white-space:nowrap;
  font-size:clamp(19px,2.6vw,26px);color:var(--ink);text-shadow:0 1px 14px rgba(0,0,0,.7);will-change:transform,opacity;}
.cq-caption b{color:var(--magenta-soft);font-weight:600;}
@media(max-width:900px){
  /* Headline unter die fixe Nav */
  .cq-head{top:max(12vh,96px);}
  /* klare Chat-Optik: Fragen rechts, Antworten links */
  .qa-col{left:50%;transform:translate(-50%,-50%);max-width:88vw;width:88vw;}
  .qa-col .cb{max-width:74%;}
  .qa-col .cb.me{margin-left:auto;}
  .qa-col .cb.somm{margin-right:auto;}
}

/* Feature-Heros: Weinkeller + Für den ganzen Tisch */
.fhero{position:relative;min-height:100vh;display:flex;align-items:center;padding:clamp(100px,12vw,160px) 0;overflow:hidden;}
.fhero-cellar{background:
  radial-gradient(55% 60% at 78% 50%, rgba(197,60,124,.10), transparent 65%),
  linear-gradient(180deg,var(--bg) 0%,#0d0b11 50%,var(--bg) 100%);}
.fhero-group{background:
  radial-gradient(55% 60% at 22% 50%, rgba(238,90,150,.08), transparent 65%),
  linear-gradient(180deg,var(--bg) 0%,#0c0a10 55%,var(--bg) 100%);}
/* S/W-Hintergrundbild + Abdunklung, Copy/Karte liegen darüber */
.fh-bg{position:absolute;inset:0;overflow:hidden;}
.fh-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform;}
.fh-dark{position:absolute;inset:0;background:
  linear-gradient(180deg,var(--bg) 0%,rgba(10,9,13,.55) 18%,rgba(10,9,13,.45) 55%,rgba(10,9,13,.6) 82%,var(--bg) 100%);}
.fhero-cellar .fh-dark{background:
  linear-gradient(90deg,rgba(10,9,13,.82) 0%,rgba(10,9,13,.45) 55%,rgba(10,9,13,.35) 100%),
  linear-gradient(180deg,var(--bg) 0%,transparent 20%,transparent 80%,var(--bg) 100%);}
.fhero-group .fh-dark{background:
  linear-gradient(270deg,rgba(10,9,13,.82) 0%,rgba(10,9,13,.45) 55%,rgba(10,9,13,.35) 100%),
  linear-gradient(180deg,var(--bg) 0%,transparent 20%,transparent 80%,var(--bg) 100%);}
.fhero .wrap{position:relative;z-index:2;}
.fh-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:center;width:100%;}
.fh-grid.flip .fh-visual{order:-1;}
.fh-kicker{font-size:14px;letter-spacing:.28em;text-transform:uppercase;color:var(--magenta);font-weight:700;}
.fh-copy h2{font-family:var(--sans);font-weight:600;font-size:clamp(32px,4.2vw,52px);line-height:1.1;letter-spacing:-.02em;margin-top:14px;}
.fh-copy h2 em{font-style:normal;color:var(--magenta);}
.fh-copy p{font-size:17px;color:var(--mute);margin-top:18px;max-width:48ch;text-wrap:pretty;}
.fh-points{list-style:none;margin-top:26px;}
.fh-points li{position:relative;padding:10px 0 10px 30px;font-size:16px;font-weight:500;color:var(--ink);}
.fh-points li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--magenta);box-shadow:0 0 10px rgba(238,90,150,.7);}
.fh-card{border:1px solid rgba(238,90,150,.28);border-radius:26px;padding:26px;max-width:460px;margin:0 auto;width:100%;
  background:linear-gradient(170deg,rgba(22,19,29,.9),rgba(13,11,17,.92));
  box-shadow:0 30px 80px rgba(0,0,0,.5);backdrop-filter:blur(10px);}
/* Keller-Mock */
.cc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.cc-title{font-weight:600;font-size:16px;}
.cc-badge{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--magenta);
  border:1px solid rgba(238,90,150,.45);border-radius:20px;padding:4px 12px;}
.cc-rack{display:grid;grid-template-columns:repeat(8,1fr);gap:9px;
  transform:perspective(800px) rotateX(10deg);transform-origin:50% 100%;will-change:transform;}
.cc-rack i{aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.03);}
.cc-rack i.full{background:radial-gradient(circle at 35% 35%, #3a2030, #1b0f17 72%);
  border-color:rgba(238,90,150,.3);box-shadow:inset 0 0 0 3px rgba(13,11,17,.85),inset 0 0 0 4px rgba(238,90,150,.22);}
.cc-rack i.hot{border-color:var(--magenta);box-shadow:0 0 12px rgba(238,90,150,.5),inset 0 0 0 3px rgba(13,11,17,.85),inset 0 0 0 4px rgba(238,90,150,.5);}
.cc-stats{display:flex;gap:12px;margin-top:22px;}
.cc-stat{flex:1;text-align:center;border:1px solid var(--line);border-radius:16px;padding:14px 8px 12px;background:rgba(13,11,17,.5);}
.cc-stat span{display:flex;justify-content:center;}
.cc-stat label{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:8px;}
/* Gruppen-Mock */
.gc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.gc-avatars{display:flex;}
.av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;color:#fff;background:linear-gradient(160deg,#2b2536,#191521);
  border:2px solid #0d0b11;margin-left:-8px;}
.av:first-child{margin-left:0;background:linear-gradient(160deg,var(--magenta-deep),#7e2b52);}
.av-add{background:rgba(238,90,150,.1);border:2px dashed rgba(238,90,150,.5);color:var(--magenta);font-weight:400;}
.gc-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}
#groupradar{width:min(100%,320px);margin:0 auto;display:block;overflow:visible;}
#groupCard .tg-axis-label{font-size:11px;}
.gc-legend{display:flex;justify-content:center;gap:22px;margin:4px 0 16px;}
.lg{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);position:relative;padding-left:20px;}
.lg::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:14px;height:0;
  border-top:3px solid var(--magenta);border-radius:2px;}
.lg.them::before{border-top:2px dashed rgba(255,255,255,.75);}
.gc-result{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-radius:18px;padding:14px 16px;background:rgba(238,90,150,.07);border:1px solid rgba(238,90,150,.4);}
.gc-result .sr-name{font-size:13.5px;line-height:1.35;color:#fff;}
.gc-result .sr-name b{display:block;font-weight:600;}
.gc-result .sr-name span{color:rgba(255,255,255,.6);font-size:11.5px;}
.gc-result .sr-match{text-align:center;flex:none;}
.gc-result .sr-lbl{display:block;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,168,200,.8);margin-top:3px;}
@media(max-width:860px){
  .fhero{min-height:auto;padding:clamp(80px,12vw,120px) 0;}
  .fh-grid{grid-template-columns:1fr;gap:36px;}
  .fh-grid.flip .fh-visual{order:0;}
  /* Mobile: oben bleibt das Portrait-Bild (Emma + Freundin) frei sichtbar,
     Copy + Karte rücken darunter über den dunklen Verlauf */
  .fhero-group{min-height:100vh;padding-top:50vh;padding-bottom:70px;}
  /* Bild nur als oberes Fenster — so bleibt die volle Breite (beide Gesichter) sichtbar */
  .fhero-group .fh-bg{bottom:auto;height:64vh;}
  .fhero-group .fh-bg img{object-position:50% 30%;}
  .fhero-group .fh-dark{background:linear-gradient(180deg,rgba(10,9,13,.15) 0%,rgba(10,9,13,.2) 34%,rgba(10,9,13,.92) 56%,var(--bg) 64%,var(--bg) 100%);}
}
.sits{padding:110px 0 30px;}
.sits-intro{max-width:720px;margin:0 auto 20px;text-align:center;}
.sits-intro h2{font-family:var(--sans);font-weight:600;font-size:clamp(28px,3.8vw,44px);line-height:1.12;letter-spacing:-.02em;}
.sits-intro h2 em{font-style:normal;color:var(--magenta-soft);}
.sits-intro p{font-size:18px;color:var(--mute);margin-top:16px;text-wrap:pretty;}

.sit{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center;margin-top:clamp(70px,9vw,120px);}
.sit.flip .sit-media{order:2;}
.sit-media{position:relative;border-radius:24px;overflow:hidden;}
.sit-media img{display:block;width:100%;height:clamp(380px,52vw,560px);object-fit:cover;will-change:transform;}
.sit-media video{display:block;width:100%;height:clamp(380px,52vw,560px);object-fit:cover;}
.sit-media::after{content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;
  background:linear-gradient(200deg,transparent 55%,rgba(8,7,10,.55) 100%);}
.ui-chip{position:absolute;z-index:2;left:20px;bottom:20px;max-width:min(78%,330px);
  background:rgba(13,11,17,.78);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:16px 18px;box-shadow:0 18px 50px rgba(0,0,0,.5);}
.ui-chip .uc-top{display:flex;align-items:center;gap:12px;}
.mini-ring{position:relative;width:58px;height:58px;flex:none;}
/* nur der Ring wird gestreckt — die DotNumber im .n behält ihre Eigengröße */
.mini-ring > svg{width:100%;height:100%;}
.mini-ring .n{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.mini-ring .n svg{width:auto;height:auto;}
.ui-chip .uc-name{font-family:var(--sans);font-weight:600;font-size:16px;line-height:1.2;letter-spacing:-.01em;}
.ui-chip .uc-sub{font-size:11.5px;color:var(--mute);margin-top:2px;}
.ui-chip .uc-q{font-size:12.5px;color:var(--mute);}
.ui-chip .uc-a{margin-top:10px;padding:10px 12px;border:1px solid rgba(238,90,150,.4);border-radius:12px;background:rgba(238,90,150,.08);}
.ui-chip .uc-a b{font-family:var(--sans);font-weight:600;font-size:14px;}
.ui-chip .uc-a span{display:block;font-size:11.5px;color:var(--mute);margin-top:3px;}

.sit-copy .kicker{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--magenta);font-weight:500;}
.sit-copy h3{font-family:var(--sans);font-weight:600;font-size:clamp(24px,3vw,34px);margin-top:12px;line-height:1.16;letter-spacing:-.02em;}
.sit-copy h3 em{font-style:normal;color:var(--magenta-soft);}
.sit-copy p{font-size:16px;color:var(--mute);margin-top:16px;max-width:46ch;text-wrap:pretty;}

.self{padding:clamp(90px,12vw,150px) 30px;text-align:center;position:relative;overflow:hidden;}
.self .mini-radar{width:min(72vw,300px);margin:0 auto;}
.self .mini-radar svg{width:100%;height:auto;display:block;overflow:visible;}
.self h3{font-family:var(--sans);font-weight:600;font-size:clamp(24px,3.2vw,36px);margin-top:34px;line-height:1.16;letter-spacing:-.02em;}
.self h3 em{font-style:normal;color:var(--magenta-soft);}
.self p{font-size:16px;color:var(--mute);margin:14px auto 0;max-width:52ch;}

/* Die App in echt */
.app-proof{padding:clamp(90px,12vw,150px) 0 clamp(40px,6vw,80px);overflow:hidden;}
.ap-intro{max-width:680px;margin:0 auto;text-align:center;}
.ap-intro h2{font-family:var(--sans);font-weight:600;font-size:clamp(28px,3.8vw,44px);line-height:1.12;letter-spacing:-.02em;}
.ap-intro h2 em{font-style:normal;color:var(--magenta-soft);}
.ap-intro p{font-size:17px;color:var(--mute);margin-top:14px;}
.ap-row{display:flex;justify-content:center;align-items:flex-end;gap:clamp(18px,3.5vw,44px);margin-top:clamp(44px,6vw,72px);}
.shot-phone{margin:0;width:min(27vw,250px);flex:none;}
.shot-phone img{display:block;width:100%;height:auto;border-radius:30px;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px #050506,0 0 0 2.5px rgba(205,207,216,.42),0 0 0 3px rgba(80,80,90,.5);}
.shot-phone figcaption{text-align:center;margin-top:18px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}
.shot-phone.tilt-l{transform:rotate(-3.5deg) translateY(14px);}
.shot-phone.tilt-r{transform:rotate(3.5deg) translateY(14px);}
.shot-phone.center{width:min(30vw,278px);position:relative;z-index:2;}
@media(max-width:760px){
  .ap-row{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:0 24px 18px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
  .shot-phone,.shot-phone.center{width:64vw;scroll-snap-align:center;}
  .shot-phone.tilt-l,.shot-phone.tilt-r{transform:none;}
}

section.block{padding:clamp(84px,10vw,120px) 0;position:relative;}
h2.big{font-family:var(--sans);font-weight:600;font-size:clamp(28px,3.8vw,44px);line-height:1.12;letter-spacing:-.02em;}
h2.big em{font-style:normal;color:var(--magenta-soft);}
.pricing{max-width:560px;margin:52px auto 0;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:linear-gradient(170deg,var(--surface),var(--bg2));}
.pricing .ph{padding:34px 36px 24px;text-align:center;border-bottom:1px solid var(--line-soft);}
.pricing .trial{display:inline-block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--magenta);border:1px solid rgba(238,90,150,.4);border-radius:30px;padding:6px 16px;margin-bottom:22px;}
.pricing .amount{font-family:var(--sans);font-weight:200;font-size:58px;line-height:1;letter-spacing:-.02em;}
.pricing .amount small{font-size:18px;color:var(--mute);font-family:var(--sans);font-weight:300;}
.pricing .alt{margin-top:12px;font-size:14px;color:var(--mute);}
.pricing .pb{padding:28px 36px 36px;}
.pricing ul{list-style:none;}
.pricing li{padding:11px 0 11px 28px;position:relative;font-size:14.5px;color:var(--mute);border-top:1px solid var(--line-soft);}
.pricing li:first-child{border-top:0;}
.pricing li::before{content:"";position:absolute;left:0;top:19px;width:11px;height:1px;background:var(--magenta);}
.pricing li b{color:var(--ink);font-weight:500;}
.pricing .note{margin-top:20px;font-size:12.5px;color:var(--faint);text-align:center;line-height:1.7;}

.finalcta{text-align:center;padding:clamp(120px,16vw,190px) 30px;position:relative;overflow:hidden;}
.finalcta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.finalcta .dark{position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0%,rgba(10,9,13,.72) 22%,rgba(10,9,13,.66) 70%,var(--bg) 100%);}
.finalcta .inner{position:relative;z-index:2;}
.finalcta h2{font-family:var(--sans);font-weight:600;font-size:clamp(30px,4.6vw,54px);line-height:1.12;letter-spacing:-.02em;text-shadow:0 2px 26px rgba(0,0,0,.6);}
.finalcta h2 .n{color:var(--magenta-soft);}
.finalcta .badges{margin-top:40px;}

footer{padding:44px 30px 70px;color:var(--faint);font-size:12px;text-align:center;border-top:1px solid var(--line-soft);}
footer .foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-bottom:18px;}
footer .foot-links a{font-size:13px;color:var(--mute);transition:color .2s;}
footer .foot-links a:hover{color:var(--magenta-soft);}
footer .foot-copy{font-size:12px;color:var(--faint);}


@media(max-width:860px){
  .sit{grid-template-columns:1fr;gap:26px;}
  .sit.flip .sit-media{order:0;}
  .sit-media img{height:min(120vw,460px);}
  .phone{width:196px;height:408px;border-radius:27px;}
  .phone .screen{border-radius:24px;}
  .nav{padding:16px 20px;}
}
@media(prefers-reduced-motion:reduce){
  .grain,.scroll-hint span{animation:none;}
}

/* ===== Feature-Seiten im Homepage-Design ===== */
.fhero-scan .fh-dark{background:
  linear-gradient(90deg,rgba(10,9,13,.92) 0%,rgba(10,9,13,.55) 52%,rgba(10,9,13,.32) 100%),
  linear-gradient(180deg,var(--bg) 0%,transparent 20%,transparent 80%,var(--bg) 100%);}
.fhero .fh-copy h1{font-family:var(--sans);font-weight:600;font-size:clamp(34px,4.6vw,56px);line-height:1.08;letter-spacing:-.02em;margin-top:14px;}
.fhero .fh-copy h1 em{font-style:normal;color:var(--magenta);}
.fh-cta{margin-top:30px;}
.fq{max-width:840px;margin:34px auto 0;}
.fq-item{border-top:1px solid var(--line-soft);}
.fq-item:last-child{border-bottom:1px solid var(--line-soft);}
.fq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;font-family:var(--sans);font-weight:600;font-size:clamp(17px,1.9vw,21px);letter-spacing:-.01em;color:var(--ink);}
.fq-item summary::-webkit-details-marker{display:none;}
.fq-item summary::after{content:"+";color:var(--magenta);font-size:26px;font-weight:300;line-height:1;transition:transform .25s;flex:none;}
.fq-item[open] summary::after{transform:rotate(45deg);}
.fq-item .a{padding:0 4px 22px;font-size:16px;color:var(--mute);max-width:70ch;line-height:1.65;}
.fq-item .a a{color:var(--magenta-soft);text-decoration:underline;}

/* Video-Hintergrund im Feature-Hero */
.fh-bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* ===== Selbstlaufender Scanner im Phone (CSS-Loop) ===== */
.scan-phone{width:min(300px,74vw);aspect-ratio:1170/2532;margin:0 auto;position:relative;border-radius:min(40px,9.8vw);
  background:linear-gradient(135deg,#5b5b64 0%,#1a1a1f 18%,#101014 50%,#1a1a1f 82%,#4c4c55 100%);padding:3px;
  box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 .5px rgba(0,0,0,.85);}
.scan-screen{position:relative;width:100%;height:100%;border-radius:min(37px,9.1vw);overflow:hidden;background:#0b0a0e;}
.scan-screen::after{content:"";position:absolute;top:2.4%;left:50%;transform:translateX(-50%);width:27%;height:3.3%;background:#000;border-radius:20px;z-index:9;pointer-events:none;}
.scan-cam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.25) contrast(1.05);animation:scanCam 7s ease-in-out infinite;}
.scan-tag{position:absolute;top:44px;left:50%;transform:translateX(-50%);z-index:8;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.9);background:rgba(13,11,17,.5);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);padding:5px 13px;border-radius:20px;}
.scan-phone .reticle{transform-origin:center;animation:scanReticle 7s ease-in-out infinite;}
.scan-phone .reticle .c1{top:28%;left:14%;bottom:auto;right:auto;}
.scan-phone .reticle .c2{top:28%;right:14%;bottom:auto;left:auto;}
.scan-phone .reticle .c3{bottom:24%;left:14%;top:auto;right:auto;}
.scan-phone .reticle .c4{bottom:24%;right:14%;top:auto;left:auto;}
.scan-phone .scan-glow{animation:scanGlow 7s ease-in-out infinite;}
.scan-phone .analyze-card{animation:scanAnalyze 7s ease-in-out infinite;}
.scan-phone .analyze-card .ac-ring{animation:acSpin .8s linear infinite;}
.scan-phone .scan-result{animation:scanResult 7s ease-in-out infinite;}
.scan-phone .sr-big{font-size:22px;font-weight:700;line-height:1;color:var(--magenta-soft);}
@keyframes scanCam{0%,100%{transform:scale(1.06)}50%{transform:scale(1.12)}}
@keyframes scanReticle{0%,5%{opacity:0;transform:scale(1.14)}14%,56%{opacity:1;transform:scale(1)}64%,100%{opacity:0;transform:scale(1.06)}}
@keyframes scanGlow{0%,12%{opacity:0;top:12%}18%{opacity:.85}44%{opacity:.85;top:74%}50%,100%{opacity:0;top:12%}}
@keyframes scanAnalyze{0%,42%{opacity:0;transform:translate(-50%,-50%) scale(.9)}50%,56%{opacity:1;transform:translate(-50%,-50%) scale(1)}63%,100%{opacity:0;transform:translate(-50%,-50%) scale(.98)}}
@keyframes scanResult{0%,60%{opacity:0;transform:translateY(18px)}70%,94%{opacity:1;transform:translateY(0)}99%,100%{opacity:0;transform:translateY(8px)}}
@keyframes acSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .scan-cam,.scan-phone .reticle,.scan-phone .scan-glow,.scan-phone .analyze-card,.scan-phone .analyze-card .ac-ring,.scan-phone .scan-result{animation:none;}
  .scan-phone .reticle,.scan-phone .scan-result{opacity:1;}
  .scan-phone .scan-glow,.scan-phone .analyze-card{opacity:0;}
}

/* ===== Animierter Match-/Geschmacks-Screen (Step 2): Ring baut sich auf, Tab-Wechsel ===== */
.sit-media.is-phone{background:radial-gradient(72% 58% at 50% 38%, rgba(238,90,150,.13), transparent 70%),linear-gradient(180deg,#141019,#0b0910);display:flex;align-items:center;justify-content:center;padding:30px 0;height:auto;min-height:clamp(430px,52vw,560px);}
.sit-media.is-phone::after{display:none;}
.match-phone{width:min(248px,66vw);aspect-ratio:1170/2532;position:relative;border-radius:min(33px,8.7vw);
  background:linear-gradient(135deg,#5b5b64 0%,#1a1a1f 18%,#101014 50%,#1a1a1f 82%,#4c4c55 100%);padding:3px;
  box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 .5px rgba(0,0,0,.85);}
.match-screen{position:relative;width:100%;height:100%;border-radius:min(30px,8vw);overflow:hidden;background:linear-gradient(180deg,#17131d,#0c0a11);}
.match-screen::after{content:"";position:absolute;top:2.2%;left:50%;transform:translateX(-50%);width:27%;height:3%;background:#000;border-radius:20px;z-index:9;pointer-events:none;}
.mp-head{text-align:center;padding:40px 14px 2px;}
.mp-head b{display:block;font-size:13px;font-weight:600;color:#fff;letter-spacing:-.01em;}
.mp-head span{font-size:10px;color:var(--mute);}
.mp-ring{position:relative;width:146px;height:146px;margin:10px auto 0;}
.mp-ring svg{width:100%;height:100%;display:block;}
.match-phone .mrt{stroke:rgba(255,255,255,.07);}
.match-phone .mra{stroke-linecap:round;transform:rotate(-90deg);transform-origin:60px 60px;}
.match-phone{--p:0;}
.match-phone .a3{stroke:#3fd68f;stroke-dasharray:314;stroke-dashoffset:calc(314 - 270 * var(--p, 0));}
.match-phone .a2{stroke:#a06bf5;stroke-dasharray:245;stroke-dashoffset:calc(245 - 181 * var(--p, 0));}
.match-phone .a1{stroke:#f2a63c;stroke-dasharray:176;stroke-dashoffset:calc(176 - 156 * var(--p, 0));}
.mr-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.mr-center b{font-size:26px;font-weight:700;color:#fff;line-height:1;}
.mr-center span{font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:var(--magenta-soft);margin-top:3px;}
.mp-legend{display:flex;justify-content:center;gap:13px;margin-top:10px;font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);}
.mp-legend span{position:relative;padding-left:11px;}
.mp-legend span::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;}
.mp-legend .lg-s::before{background:#3fd68f;}
.mp-legend .lg-a::before{background:#a06bf5;}
.mp-legend .lg-q::before{background:#f2a63c;}
.mp-tabs{display:flex;gap:7px;justify-content:center;margin-top:14px;}
.mp-tab{font-size:10.5px;font-weight:600;padding:6px 15px;border-radius:20px;color:var(--mute);border:1px solid var(--line);transition:background .3s,border-color .3s,color .3s;}
.match-phone .tab-s{background:rgba(238,90,150,.16);border-color:var(--magenta);color:#fff;}
.match-phone.ph2 .tab-s{background:transparent;border-color:var(--line);color:var(--mute);}
.match-phone.ph2 .tab-a{background:rgba(238,90,150,.16);border-color:var(--magenta);color:#fff;}
.mp-panels{position:relative;margin:14px 22px 0;min-height:98px;}
.mp-panel{position:absolute;inset:0;opacity:0;transition:opacity .35s;}
.match-phone .panel-s{opacity:1;}
.match-phone.ph2 .panel-s{opacity:0;}
.match-phone.ph2 .panel-a{opacity:1;}
.mp-bar{display:flex;align-items:center;gap:10px;margin:11px 0;}
.mp-bar label{font-size:9.5px;color:var(--mute);width:44px;text-align:right;flex:none;}
.mp-bar i{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.09);position:relative;overflow:hidden;}
.mp-bar i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--v);border-radius:3px;background:linear-gradient(90deg,var(--magenta-deep),var(--magenta));transform:scaleX(min(1, calc(var(--p, 0) * 1.35)));transform-origin:left;}
.mp-chip{display:inline-block;font-size:10.5px;color:var(--ink);background:rgba(238,90,150,.1);border:1px solid rgba(238,90,150,.35);border-radius:14px;padding:5px 11px;margin:0 5px 7px 0;}
@media(prefers-reduced-motion:reduce){
  .match-phone{--p:1 !important;}
  .match-phone .panel-a{display:none;}.match-phone .panel-s{opacity:1 !important;}
}

/* ===== Offensive: Varianten ===== */
.stage-shot img{max-width:min(320px,72vw);}
.mini-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;max-width:1040px;margin:40px auto 0;}
.mini-steps .ms{position:relative;padding-top:8px;}
.mini-steps .ms-n{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  border:1.5px solid rgba(238,90,150,.55);color:var(--magenta);font-weight:600;font-size:19px;margin-bottom:14px;}
.mini-steps h3{font-weight:600;font-size:19px;letter-spacing:-.01em;margin-bottom:8px;}
.mini-steps p{color:var(--mute);font-size:15px;line-height:1.6;font-weight:300;}
@media(max-width:860px){.mini-steps{grid-template-columns:1fr;gap:26px;}}
.ghero-g{position:relative;height:90vh;min-height:560px;overflow:hidden;display:flex;align-items:flex-end;}
.ghero-g .gg-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ghero-g .gg-dark{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,13,.5) 0%,rgba(10,9,13,.1) 40%,rgba(10,9,13,.88) 100%);}
.ghero-g .gg-inner{position:relative;z-index:2;padding-bottom:54px;}
.ghero-g h1{font-family:var(--sans);font-weight:600;font-size:clamp(34px,4.8vw,58px);line-height:1.06;letter-spacing:-.02em;margin-top:14px;max-width:18ch;}
.ghero-g h1 em{font-style:normal;color:var(--magenta);}
.crumb-l{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:14px;}
.crumb-l a{color:var(--mute);text-decoration:none;}
.gwrap{max-width:840px;}
.answerbox{background:rgba(13,11,17,.72);border:1px solid rgba(238,90,150,.45);border-radius:22px;padding:26px 30px;margin:0 0 36px;}
.answerbox .ab-k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--magenta);margin-bottom:10px;}
.answerbox p{color:var(--ink);font-size:clamp(16px,1.8vw,18.5px);line-height:1.65;font-weight:300;}
.answerbox b{color:var(--magenta-soft);font-weight:600;}
.gprose h2{font-weight:600;font-size:clamp(23px,2.6vw,30px);letter-spacing:-.01em;margin:42px 0 14px;}
.gprose p{color:var(--mute);font-weight:300;line-height:1.75;margin-bottom:16px;font-size:16.5px;}
.gprose strong{color:var(--ink);font-weight:600;}
.gprose ul{margin:6px 0 18px;padding-left:0;list-style:none;}
.gprose li{position:relative;padding-left:26px;margin-bottom:12px;color:var(--mute);font-weight:300;line-height:1.65;}
.gprose li::before{content:"";position:absolute;left:2px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--magenta);box-shadow:0 0 8px rgba(238,90,150,.8);}
.gprose a{color:var(--magenta-soft);}
.gsplit{padding:150px 0 70px;position:relative;}
.gsplit::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 85% 20%,rgba(238,90,150,.08),transparent 60%);}
.gs-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center;position:relative;}
.gs-copy h1{font-family:var(--sans);font-weight:600;font-size:clamp(32px,4vw,50px);line-height:1.08;letter-spacing:-.02em;margin:14px 0 26px;}
.gs-copy h1 em{font-style:normal;color:var(--magenta);}
.gs-photo{margin:0;border-radius:26px;overflow:hidden;border:1px solid var(--line);box-shadow:0 40px 110px rgba(0,0,0,.55);}
.gs-photo img{width:100%;display:block;}
@media(max-width:920px){.gs-grid{grid-template-columns:1fr;gap:34px;}.gs-photo{max-width:420px;margin:0 auto;}}
.finalcta .cta-sub{color:var(--mute);margin-top:12px;font-size:16px;}
.vbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:500;display:flex;gap:10px;align-items:center;
  background:rgba(10,9,13,.92);border:1px solid rgba(238,90,150,.5);border-radius:30px;padding:9px 16px;backdrop-filter:blur(10px);
  font-family:var(--sans);font-size:13px;color:var(--mute);box-shadow:0 14px 40px rgba(0,0,0,.5);}
.vbar b{color:var(--magenta);font-weight:600;}
.vbar a{color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:20px;padding:4px 12px;transition:border-color .2s;}
.vbar a:hover{border-color:var(--magenta);}
.gshot{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin:30px 0 8px;}
.gshot img{width:min(230px,40vw);border-radius:24px;border:1px solid var(--line);box-shadow:0 26px 70px rgba(0,0,0,.55);display:block;}
.sit-media .sit-shot{width:auto;}
.sit-media .sit-shot img{width:min(290px,68vw);height:auto;object-fit:unset;}