/* =====================================================================
   V2 · MOTION-ALTERNATIVE
   Ergänzt das Design-System aus sections/00-head.html. Wird nur auf /v2 geladen.
   ===================================================================== */

html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.v2{scroll-behavior:auto}

/* ---------- Scroll-Fortschritt ---------- */
.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--accent-strong),var(--accent));pointer-events:none}

/* ---------- Hero V2 ---------- */
.hero-v2{min-height:100svh;display:flex;align-items:center;padding:110px 0 90px;background:#05070D}
.hero-v2::before,.hero-v2::after{display:none}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block;
  background:radial-gradient(60% 70% at 75% 35%,rgba(124,156,255,.28),transparent 70%),radial-gradient(50% 60% at 20% 90%,rgba(43,80,230,.22),transparent 70%),#05070D}
.hero-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-v2 .hero-text{position:relative;z-index:2}
.hero-v2 h1 .ln{display:inline-block}
.hero-v2 h1 em.hl{background:linear-gradient(100deg,#A9BEFF 0%,#7C9CFF 45%,#C9D6FF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.08em}
.split-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split-inner{display:inline-block;will-change:transform}

/* 3D-Stack */
.stack-wrap{margin:0;position:relative;z-index:1}
.stack{position:relative;perspective:1600px;perspective-origin:50% 40%}
.stack-inner{position:relative;width:100%;aspect-ratio:16/11;transform-style:preserve-3d;will-change:transform}
.ly{position:absolute;transform-style:preserve-3d;will-change:transform}
.ly .f{width:100%;height:100%;animation:float 7s ease-in-out infinite}
.ly:nth-child(2) .f{animation-delay:-1.2s}.ly:nth-child(3) .f{animation-delay:-2.4s}.ly:nth-child(4) .f{animation-delay:-3.1s}
.ly:nth-child(5) .f{animation-delay:-4.2s}.ly:nth-child(6) .f{animation-delay:-.6s}.ly:nth-child(7) .f{animation-delay:-5s}.ly:nth-child(8) .f{animation-delay:-2s}
@keyframes float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-6px,0)}}
.stack.assembled .ly .f{animation-play-state:paused}

.ly-frame{inset:0}
.ly-frame .f{border-radius:16px;background:#F3F1EC;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 50px 120px rgba(0,0,0,.6);overflow:hidden}
.ly-img{left:0;right:0;top:8.6%;bottom:0}
.ly-img .f{border-radius:0 0 16px 16px;overflow:hidden;position:relative;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.ly-img img{width:100%;height:100%;object-fit:cover}
.ly-img .f::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,18,38,.85),rgba(11,18,38,.45) 50%,rgba(11,18,38,0) 80%)}
.ly-nav{left:4%;right:4%;top:11%;height:8%}
.ly-nav .f{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ly-nav .lg{width:18%;height:38%;border-radius:4px;background:rgba(255,255,255,.85)}
.ly-nav .lk{display:flex;gap:8px;margin-left:auto}
.ly-nav .lk i{width:30px;height:5px;border-radius:3px;background:rgba(255,255,255,.6)}
.ly-nav .cta-mini{font-size:clamp(9px,1.2vw,11px);font-weight:800;color:var(--ink);background:#fff;border-radius:999px;padding:5px 10px}
.ly-head{left:6%;top:30%;width:54%}
.ly-head b{display:block;color:#fff;font-weight:800;font-size:clamp(15px,2.3vw,25px);line-height:1.1;letter-spacing:-.02em;text-shadow:0 2px 20px rgba(0,0,0,.3)}
.ly-head small{display:block;margin-top:10px;color:rgba(255,255,255,.82);font-size:clamp(9.5px,1.1vw,12.5px);line-height:1.45;max-width:30ch}
.ly-btn{left:6%;top:70%}
.ly-btn .f{display:inline-flex;white-space:nowrap;padding:10px 16px;border-radius:999px;background:var(--accent);color:var(--ink);font-weight:800;font-size:clamp(10px,1.3vw,13.5px);box-shadow:0 14px 34px rgba(124,156,255,.45)}
.ly-cal{right:5%;top:50%;width:33%}
.ly-cal .f{background:#fff;border-radius:14px;padding:10px 11px;box-shadow:0 24px 60px rgba(0,0,0,.35);height:auto}
.ly-cal .ch{display:flex;justify-content:space-between;font-size:clamp(9px,1.1vw,11.5px);font-weight:800;color:var(--t1);margin-bottom:7px}
.ly-cal .cs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.ly-cal .cs span{text-align:center;font-size:clamp(8.5px,1vw,11px);font-weight:700;padding:6px 0;border-radius:8px;background:#EEF0F6;color:var(--t1)}
.ly-cal .cs span.on{background:var(--navy);color:#fff}
.ly-chat{right:5%;top:20%;width:38%}
.ly-chat .f{display:flex;gap:8px;align-items:flex-start;background:rgba(255,255,255,.96);border-radius:14px 14px 14px 4px;padding:9px 11px;font-size:clamp(9px,1.1vw,11.5px);line-height:1.35;color:var(--t1);font-weight:600;box-shadow:0 24px 60px rgba(0,0,0,.35);height:auto}
.ly-chat .av{flex:none;width:22px;height:22px;border-radius:50%;background:var(--navy);color:var(--accent);font-size:9px;font-weight:800;display:grid;place-items:center}
.ly-toast{right:5%;bottom:6%}
.ly-toast .f{display:flex;gap:9px;align-items:center;background:#fff;border-radius:12px;padding:9px 12px;font-size:clamp(9px,1.1vw,11.5px);color:var(--t1);line-height:1.3;box-shadow:0 24px 60px rgba(0,0,0,.4);height:auto;white-space:nowrap}
.ly-toast b{display:block}
.ly-toast .ok{width:22px;height:22px;border-radius:50%;background:#E6F2EC;color:var(--ok);display:grid;place-items:center;font-weight:900;font-size:12px}
.stack-cap{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;font-size:13px;color:var(--on-dark-3)}
.stack-hint{display:inline-flex;align-items:center;gap:8px}
.stack-hint::before{content:"";width:16px;height:1px;background:currentColor}

.scroll-cue{position:absolute;left:50%;bottom:22px;width:26px;height:42px;margin-left:-13px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);z-index:2;display:none}
.scroll-cue span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* ---------- Laufband ---------- */
.marquee{background:#05070D;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);overflow:hidden;padding:26px 0;white-space:nowrap}
.marquee-track{display:inline-flex;align-items:center;gap:34px;will-change:transform}
.marquee span{font-size:clamp(34px,6vw,72px);font-weight:800;letter-spacing:-.035em;color:var(--on-dark);line-height:1}
.marquee span.o{color:transparent;-webkit-text-stroke:1.5px rgba(124,156,255,.7)}
.marquee i{font-style:normal;color:var(--accent);font-size:clamp(18px,2.4vw,28px)}

/* ---------- Wort-für-Wort-Färbung ---------- */
.v2 .problem-quote .w{color:#C3BFB4;transition:none}

/* ---------- Bild-Reveals & Parallax ---------- */
.v2 .problem-img img,.v2 .sb-photo img,.v2 .tp-visual img{will-change:transform}
.clip-reveal{clip-path:inset(0 0 0 0 round var(--r))}

/* ---------- Besucher-Strom ---------- */
.flow{margin-top:34px;border-radius:var(--r);background:var(--navy-ink);padding:18px 18px 14px;box-shadow:var(--shadow-lg);color:var(--on-dark-2)}
.flow-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.flow-head b{color:var(--on-dark);font-size:15px}
.flow-toggle{display:inline-flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.07)}
.flow-toggle button{border:0;background:transparent;color:var(--on-dark-2);font-size:13px;font-weight:700;padding:7px 12px;border-radius:999px;transition:background .3s,color .3s}
.flow-toggle button[aria-pressed="true"]{background:var(--on-dark);color:var(--ink)}
.flow canvas{width:100%;height:200px;display:block}
.flow-cap{font-size:12px;color:var(--on-dark-3);margin-top:6px}

/* ---------- Prozesslinie ---------- */
.proc-line{display:none}
@media(min-width:768px){
  .v2 .process-list{position:relative}
  .proc-line{display:block;position:absolute;left:44px;right:44px;top:-22px;height:2px;background:rgba(25,35,61,.12);border-radius:2px;overflow:hidden}
  .proc-line i{position:absolute;inset:0;background:linear-gradient(90deg,var(--accent-strong),var(--accent));transform-origin:0 50%;transform:scaleX(0)}
}

/* ---------- Karten: Hover-Übergang erst nach dem Einblenden ---------- */
.v2.gsap-on :is(.card,.service):not(.is-in){transition:none}

/* ---------- „10“ füllt sich ---------- */
.v2 .deal-num-wrap .deal-num{position:relative}
.deal-fill{position:absolute;inset:0;color:transparent;-webkit-text-stroke:0;background:linear-gradient(180deg,#C9D6FF,#7C9CFF 55%,#2B50E6);-webkit-background-clip:text;background-clip:text;clip-path:inset(100% 0 0 0)}

/* ---------- Buchung: Licht folgt dem Zeiger ---------- */
.v2 .booking::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(600px circle at var(--mx,50%) var(--my,30%),rgba(124,156,255,.14),transparent 60%)}

/* GSAP übernimmt die Reveals – V1-Reveal-Übergänge hier aus */
.v2.gsap-on .reveal{opacity:1;transform:none;transition:none}

@media(min-width:1020px){
  .hero-v2 .hero-grid{grid-template-columns:.95fr 1.05fr;gap:40px}
  .scroll-cue{display:block}
}
@media(max-width:1019px){
  .stack-wrap{max-width:560px;margin:56px auto 0;width:100%}
}
@media(max-width:600px){
  .hero-v2{padding:100px 0 60px;min-height:auto}
  .ly-nav .lk{display:none}
  .stack-cap .stack-hint{display:none}
}
@media(prefers-reduced-motion:reduce){
  .ly .f,.scroll-cue span{animation:none}
}