/* ============ Animationen & Effekte ============ */

/* Film grain */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.06;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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

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

/* Logo dot pulse */

/* ---------- Intro (first visit per session) ---------- */
.intro{position:fixed;inset:0;z-index:200;background:var(--bg);display:none;place-items:center}
html.js.intro .intro{display:grid;animation:introOut .7s cubic-bezier(.77,0,.18,1) 1.15s forwards}
.intro-logo{font-weight:700;font-size:clamp(44px,9vw,110px);letter-spacing:-.04em;display:flex;overflow:hidden;line-height:1.15;padding:0 .05em}
.intro-logo span{display:inline-block;transform:translateY(110%);animation:letterUp .6s cubic-bezier(.2,.9,.2,1) forwards}
.intro-logo i{font-style:normal;color:var(--violet-2);display:inline-block;transform:scale(0);animation:dotPop .5s cubic-bezier(.3,1.8,.4,1) .72s forwards}
.intro-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--violet);transform-origin:0 50%;transform:scaleX(0);animation:bar 1.1s cubic-bezier(.6,0,.2,1) forwards}
@keyframes letterUp{to{transform:none}}
@keyframes dotPop{to{transform:scale(1)}}
@keyframes bar{to{transform:scaleX(1)}}
@keyframes introOut{to{transform:translateY(-100%);visibility:hidden}}

/* ---------- Page transition curtain ---------- */
.curtain{position:fixed;inset:0;z-index:150;background:linear-gradient(135deg,#4f53e6,#25267a);transform:translateY(100%);pointer-events:none;display:grid;place-items:center}
.curtain b{font-weight:700;font-size:40px;letter-spacing:-.04em;color:#fff;opacity:.9}
html.enter .curtain{transform:none}
html.enter.entered .curtain{transform:translateY(-100%);transition:transform .6s cubic-bezier(.77,0,.18,1)}
html.leaving .curtain{transform:none;transition:transform .4s cubic-bezier(.77,0,.18,1)}

/* ---------- Line-by-line heading reveal ---------- */
.js .hero h1:not(.sp){opacity:0}
.sp .ln{display:block;overflow:hidden;padding:.14em 0 .06em;margin:-.14em 0 -.06em}
.sp .li{display:block;transform:translateY(105%) rotate(2deg);transform-origin:0 100%;transition:transform 1s cubic-bezier(.2,.9,.2,1)}
.sp.in .li{transform:none}
.sp .ln:nth-child(2) .li{transition-delay:.09s}
.sp .ln:nth-child(3) .li{transition-delay:.18s}
.sp .ln:nth-child(4) .li{transition-delay:.27s}

/* Underline swipe under highlighted hero word */

/* Rotating word */
.rotate{display:inline-block;position:relative;vertical-align:bottom;overflow:hidden;padding-top:.16em;margin-top:-.16em}
.rotate .w{display:inline-block}
.rotate .w.out{animation:wOut .45s cubic-bezier(.7,0,.3,1) forwards}
.rotate .w.inn{animation:wIn .55s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes wOut{to{transform:translateY(-60%) rotateX(80deg);opacity:0;filter:blur(4px)}}
@keyframes wIn{from{transform:translateY(60%) rotateX(-80deg);opacity:0;filter:blur(4px)}to{transform:none;opacity:1;filter:none}}

/* ---------- Hero phone: tilt + floating social bubbles ---------- */
.phone-wrap{position:relative;justify-self:center;width:100%;max-width:400px;perspective:1200px}
.phone-wrap.wide{max-width:none}
.phone-wrap .phone{max-width:none;transition:transform .5s cubic-bezier(.2,.9,.2,1);transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg))}
.bubble{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:11px 16px 11px 12px;border-radius:16px;background:rgba(22,22,32,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 50px rgba(0,0,0,.45);font-size:14px;font-weight:600;white-space:nowrap;opacity:0;transform:translateY(16px) scale(.85)}
.bubble .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(91,95,240,.16);color:var(--violet-2)}
.bubble .ic svg{width:18px;height:18px}
.bubble small{display:block;font-weight:500;color:var(--muted);font-size:12px;line-height:1.2}
.bubble.show{animation:pop .7s cubic-bezier(.2,.9,.2,1) forwards,bob 7s ease-in-out .7s infinite}
.bubble.b1{left:-70px;top:14%}
.bubble.b2{right:-56px;top:44%}
.bubble.b3{left:-40px;bottom:12%}
@keyframes pop{to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.bubble.b2.show{animation-delay:0s,1.2s}
.bubble.b3.show{animation-delay:0s,2.1s}

/* ---------- Kinetic crossing bands ---------- */
.bands{position:relative;height:300px;overflow:hidden;margin:20px 0;pointer-events:none}
.band{position:absolute;left:-10%;width:120%;top:50%;padding:18px 0;white-space:nowrap;font-family:var(--display);font-size:clamp(40px,6vw,76px);text-transform:uppercase;line-height:1}
.band .bt{display:inline-block;will-change:transform}
.band.b1{background:var(--violet);color:#fff;transform:translateY(-50%) rotate(-4deg);z-index:2;box-shadow:0 20px 60px rgba(91,95,240,.35)}
.band.b2{background:var(--bg-2);border-block:1px solid var(--line);transform:translateY(-50%) rotate(3.5deg)}
.band.b2 .bt{color:transparent;-webkit-text-stroke:1.2px #cfcfe0}
.band .bt em{font-style:normal;margin:0 .35em;opacity:.8}

/* ---------- Spotlight on cards ---------- */
.svc,.card:not(.accent),.quote,.project{background-image:radial-gradient(420px circle at var(--mx,-500px) var(--my,-500px),rgba(139,141,255,.13),transparent 45%)}

/* Case tilt */
.case{transform-style:preserve-3d;will-change:transform}
.case.tilting{transition:transform .15s linear,border-color .3s}

/* Steps: line draws in */
.step{border-top:0;padding-top:28px;background:linear-gradient(var(--violet),var(--violet)) 0 0/0% 2px no-repeat,linear-gradient(var(--line),var(--line)) 0 0/100% 2px no-repeat}
.js .step.rv{transition:background-size 1.1s cubic-bezier(.7,0,.2,1) .2s,opacity .8s,transform .8s}
.step.in{background-size:100% 2px,100% 2px}
.step::before{transition:color .4s}

/* Primary button shine */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%)}
.btn-primary:hover::after{transform:translateX(120%);transition:transform .8s}
.btn.mag{transition:transform .25s cubic-bezier(.2,.9,.2,1),background .2s}

/* Custom cursor (desktop) */
.cursor{position:fixed;left:0;top:0;z-index:300;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:1.5px solid var(--violet-2);pointer-events:none;display:grid;place-items:center;transition:width .3s,height .3s,margin .3s,background .3s,border-color .3s,opacity .3s;opacity:0}
.cursor.on.play{opacity:1}
.cursor.link{width:60px;height:60px;margin:-30px 0 0 -30px;background:rgba(139,141,255,.12)}
.cursor.play{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--violet);border-color:var(--violet)}
.cursor span{font-size:13px;font-weight:700;color:#fff;opacity:0;transition:opacity .2s;letter-spacing:.04em}
.cursor.play span{opacity:1}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* Stats count-up keeps width stable */
[data-count]{font-variant-numeric:tabular-nums}


/* ---------- Leistungs-Karten mit Linien-Icons ---------- */
.svc{position:relative;overflow:hidden;isolation:isolate;transition:background .3s,transform .35s cubic-bezier(.2,.9,.2,1),box-shadow .35s}
.svc-ic{position:absolute;top:30px;right:30px;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;color:var(--violet);background:rgba(91,95,240,.09);transition:background .35s,color .35s,transform .35s cubic-bezier(.2,.9,.2,1)}
.svc-ic svg{width:28px;height:28px}
.svc-ic svg *{stroke-dasharray:1;stroke-dashoffset:0}
.svc:hover{transform:translateY(-4px);box-shadow:0 24px 50px -24px rgba(40,40,90,.28);z-index:2}
.svc:hover .svc-ic{background:var(--violet);color:#fff;transform:rotate(-6deg) scale(1.06)}
.svc:hover .svc-ic svg *{animation:icDraw .9s cubic-bezier(.6,0,.2,1) both}
.svc:hover .svc-ic svg *:nth-child(2){animation-delay:.08s}
.svc:hover .svc-ic svg *:nth-child(3){animation-delay:.16s}
.svc:hover .svc-ic svg *:nth-child(n+4){animation-delay:.24s}
@keyframes icDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* Mobile tweaks */
@media (max-width:980px){
  .phone-wrap{max-width:340px}
  .phone-wrap.wide{max-width:none}
  .bubble{font-size:12px;padding:8px 12px 8px 9px;gap:8px}
  .bubble .ic{width:28px;height:28px}
  .bubble .ic svg{width:15px;height:15px}
  .bubble.b1{left:-14px}
  .bubble.b2{right:-14px}
  .bubble.b3{display:none}
  .bands{height:220px}
}

/* Reduced motion: everything calm */
@media (prefers-reduced-motion:reduce){
  html.js.intro .intro,.curtain{display:none!important}
  .sp .li,.rotate .w{transform:none!important;animation:none!important;transition:none!important}
  .js .hero h1:not(.sp){opacity:1}
  .bubble{opacity:1;transform:none;animation:none!important}
  .cursor{display:none}
}

/* ===================================================================
   Helle Version = Standard (seit 16.10.). Alte dunkle Version zum Vergleich mit ?dunkel
   =================================================================== */
html.light{--bg:#ffffff;--bg-2:#f5f5f8;--bg-3:#ececf3;--line:#e3e3ea;--text:#101017;--muted:#5f5e6d;--violet:#4f53e6;--violet-2:#4f53e6;color-scheme:light}
html.light body::after{opacity:.025}
html.light .nav.scrolled,html.light .nav.open{background:rgba(255,255,255,.88)}
html.light .hero::before{background:radial-gradient(circle,rgba(91,95,240,.14),transparent 60%)}
html.light .track span{color:#6b6a78}
html.light .track span.big{color:var(--text)}
html.light .phone{border-color:#dcdce6;box-shadow:0 40px 100px -30px rgba(79,83,230,.35)}
html.light .collage .cp{border-color:#fff;box-shadow:0 24px 50px rgba(20,20,40,.18)}
html.light .case .media.collage{background:radial-gradient(circle at 50% 60%,rgba(91,95,240,.18),transparent 60%),#eeeef5}
html.light .case.featured{background:radial-gradient(circle at 100% 0%,rgba(91,95,240,.10),transparent 55%),var(--bg-2);border-color:var(--line)}
html.light .cases-stack .case.featured:nth-child(even){background:radial-gradient(circle at 0% 0%,rgba(91,95,240,.10),transparent 55%),var(--bg-2)}
html.light .cases-stack .case.featured{box-shadow:0 -20px 50px rgba(20,20,40,.08)}
html.light .bubble{background:rgba(255,255,255,.92);border-color:var(--line);color:var(--text);box-shadow:0 18px 40px rgba(20,20,40,.14)}
html.light .bubble .ic{background:rgba(79,83,230,.1)}
html.light .band.b2{background:var(--bg-2)}
html.light .band.b2 .bt{-webkit-text-stroke-color:#9c9bb0}
html.light .cta-box,html.light .card.accent,html.light .member.join .pic{color:#fff}
html.light .card.accent h4,html.light .card.accent .num{color:#fff}
html.light .legal p,html.light .legal li,html.light .legal dd{color:#3d3c48}
html.light .swipe-dots button{background:#d0d0dc}
html.light .btn-ghost{border-color:#d4d4de}
html.light .stats strong em{color:var(--violet)}
html.light .quote .av{color:#fff}
@media (max-width:640px){
  html.light .hero .phone-wrap::after,html.light .hero>.wrap>.phone::after{background:linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.86) 55%,#fff 100%)}
  html.light .hero .lead{color:#3d3c48}
}