/* ============================================================
   iPM-Cloud — Startseite
   Design & Umsetzung: Costshield · 2026
   Keine externen Abhängigkeiten. Schriften lokal (SIL OFL).
   ============================================================ */

@font-face{
  font-family:'Inter var';
  src:url('assets/fonts/inter.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}
/* ---------- Tokens ---------- */
:root{
  --ink:#0B1B2E;
  --ink-2:#43566E;
  --ink-3:#8496AC;
  --brand:#1857C8;
  --brand-2:#3B82F6;
  --sky:#7CBBFE;
  --deep:#08182A;
  --deep-2:#0E2740;
  --go:#0E9F53;
  --warm:#756E6B;
  --paper:#FFFFFF;
  --p2:#F6F8FC;
  --p3:#EAF0F9;
  --t0:#FFFFFF;
  --t1:#F8FAFD;
  --t2:#EEF3FB;
  --t3:#E7EFFA;
  --t4:#F3F7FC;
  --line:rgba(11,27,46,.10);
  --line-2:rgba(11,27,46,.06);

  --sans:'Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --gut:clamp(20px,5vw,64px);
  --maxw:1240px;
  --nav-h:96px;

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.62,.05,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  font-weight:400; letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums lining-nums;
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:rgba(24,87,200,.16)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap--wide{max-width:1480px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:-60px;left:16px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;transition:top .2s}
.skip:focus{top:16px}

/* ---------- Typografie ---------- */
.eyebrow{
  font-size:.72rem;font-weight:640;letter-spacing:.17em;text-transform:uppercase;
  color:var(--brand);display:block;margin-bottom:.2em;
}

.d1{
  font-size:clamp(2.4rem,min(5.9vw,8.4vh),5.4rem); font-weight:640; line-height:1.02;
  letter-spacing:-.045em; text-wrap:balance;
}
/* Markenverlauf in der Hauptheadline.
   Padding ringsum, damit die Verlaufsfläche auch Unter- und Oberlängen abdeckt. */
.d1 .rvline > span{
  background:linear-gradient(100deg,#0B1B2E 0%,#12305F 30%,#1857C8 72%,#3B82F6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding:.22em .08em .24em 0;margin:-.22em 0 -.24em;
}
.h2{
  font-size:clamp(1.95rem,4.1vw,3.5rem); font-weight:630; line-height:1.06;
  letter-spacing:-.038em; text-wrap:balance;
}
.h3{font-size:clamp(1.2rem,1.9vw,1.55rem);font-weight:620;letter-spacing:-.024em;line-height:1.22}
.lead{
  font-size:clamp(1.06rem,1.45vw,1.3rem); line-height:1.6; color:var(--ink-2);
  font-weight:400; letter-spacing:-.014em; text-wrap:pretty;
}
.small{font-size:.94rem;color:var(--ink-2)}
.tiny{font-size:.8rem;color:var(--ink-3);letter-spacing:.005em}
.nm{white-space:nowrap}
.rt{font-size:.42em;font-weight:500;vertical-align:super;letter-spacing:0;opacity:.55;margin-left:.08em}
.hy{margin-inline:-.07em;letter-spacing:0}
.eyebrow .hy,.proof__t .hy{margin-inline:-.19em}
.d1 .hy,.h2 .hy{margin-inline:-.05em}

.section{padding-block:clamp(84px,11vh,140px);position:relative}
.section--tight{padding-block:clamp(64px,9vh,110px)}

/* Kopfblock-Rhythmus: Kicker → Headline → Lead */
.eyebrow + .h2,.eyebrow + .d1{margin-top:clamp(14px,1.6vh,22px)}
.h2 + .lead,.d1 + .lead{margin-top:clamp(18px,2.2vh,30px)}
.h2 + .small,.lead + .small{margin-top:clamp(14px,1.6vh,20px)}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--ink); --fg:#fff;
  position:relative;display:inline-flex;align-items:center;gap:.7em;
  padding:1.02em 1.6em;border-radius:5px;background:var(--bg);color:var(--fg);
  font-size:.98rem;font-weight:560;letter-spacing:-.012em;white-space:nowrap;
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out),background .3s;
  box-shadow:0 1px 2px rgba(8,24,42,.16),0 10px 26px -12px rgba(8,24,42,.5);
  will-change:transform; overflow:hidden; isolation:isolate;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(120px 80px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 70%);
  opacity:0;transition:opacity .4s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(8,24,42,.18),0 22px 44px -18px rgba(8,24,42,.6)}
.btn:hover::after{opacity:1}
.btn:active{transform:translateY(0) scale(.985)}
.btn--brand{--bg:var(--brand)}
.btn--brand:hover{--bg:#1449AA}
.btn--ghost{
  --bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.4px var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.4px rgba(11,27,46,.28);transform:translateY(-2px)}
.btn--onDark{--bg:rgba(255,255,255,.1);--fg:#fff;box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.26);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.btn--onDark:hover{--bg:rgba(255,255,255,.18)}
.btn--lg{padding:1.2em 2em;font-size:1.03rem}
.btn .ar{transition:transform .45s var(--e-out);display:inline-block}
.btn:hover .ar{transform:translateX(4px)}

.tlink{
  display:inline;width:fit-content;align-self:flex-start;font-weight:560;color:var(--brand);
  letter-spacing:-.014em;position:relative;padding-bottom:2px;
}
.tlink .ar{display:inline-block;margin-left:.5em}
.tlink::after{content:"";position:absolute;left:0;bottom:0;height:1.4px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e-out)}
.tlink:hover::after{transform:scaleX(1);transform-origin:left}
.tlink .ar{transition:transform .45s var(--e-out)}
.tlink:hover .ar{transform:translateX(4px)}

/* ---------- Reveal ---------- */
[data-rv]{
  opacity:0;transform:translate3d(0,var(--rv-y,22px),0);
  transition:opacity .95s var(--e-out),transform 1.05s var(--e-out),filter .95s var(--e-out);
  transition-delay:calc(var(--i,0) * 75ms);
  filter:blur(var(--rv-b,6px));
  will-change:transform,opacity;
}
[data-rv].is-in{opacity:1;transform:none;filter:none}
[data-rv="clip"]{opacity:1;filter:none;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--e-out)}
[data-rv="clip"].is-in{clip-path:inset(0 0 0 0)}

/* Zeilenweiser Text-Reveal (Masken) */
.rvline{display:block;overflow:hidden;padding-block:.26em;margin-block:-.26em}
.rvline > span{display:block;transform:translate3d(0,110%,0);transition:transform 1.15s var(--e-out);transition-delay:calc(var(--i,0)*95ms);will-change:transform}
.is-in .rvline > span,.rvline.is-in > span{transform:none}

/* ---------- Navbar (ipmTiger-Design, identisch auf allen Seiten) ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:200;height:var(--nav-h,96px);
  display:flex;align-items:center;
  transition:height .5s var(--e-out,cubic-bezier(.16,1,.3,1));
}
.nav__in{
  width:100%;max-width:1480px;margin-inline:auto;padding-inline:calc(clamp(20px,5vw,64px) + 6px);
  display:flex;align-items:center;gap:clamp(20px,3.4vw,52px);
  height:100%;
}
.nav__shell{
  position:absolute;inset:11px clamp(12px,3vw,30px);border-radius:14px;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 0 0 1px rgba(11,27,46,.07),0 12px 34px -16px rgba(8,24,42,.34);
  opacity:0;transform:scaleY(.9);transform-origin:top;
  transition:opacity .55s var(--e-out,cubic-bezier(.16,1,.3,1)),transform .55s var(--e-out,cubic-bezier(.16,1,.3,1)),background .5s,box-shadow .5s;
  pointer-events:none;
}
.nav.is-stuck{--nav-h:86px}
.nav.is-stuck .nav__shell{opacity:1;transform:none}
.nav.is-dark .nav__shell{background:rgba(10,26,44,.55);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 0 0 1px rgba(255,255,255,.1),0 14px 40px -18px rgba(0,0,0,.7)}

.nav__logo{display:flex;align-items:center;flex:none;position:relative;z-index:2}
.nav__logo svg{height:36px;width:auto;transition:height .5s var(--e-out,cubic-bezier(.16,1,.3,1))}
.nav.is-stuck .nav__logo svg{height:33px}
.lg-mark{--lg-mark:#756E6B;--lg-accent:#7CBBFE;--lg-word:var(--ink,#0B1B2E);transition:none}
.nav.is-dark .lg-mark{--lg-mark:#AEBED4;--lg-word:#fff}

.nav__menu{display:flex;align-items:center;gap:6px;position:relative;z-index:2;margin-inline:auto}
.nav__menu a{
  position:relative;padding:.62em .95em;border-radius:5px;font-size:.93rem;font-weight:500;
  letter-spacing:-.012em;color:#43566E;transition:color .3s;white-space:nowrap;
}
.nav__menu a:hover{color:var(--ink,#0B1B2E)}
.nav.is-dark .nav__menu a{color:rgba(255,255,255,.72)}
.nav.is-dark .nav__menu a:hover{color:#fff}
.nav__pill{
  position:absolute;top:0;left:0;height:100%;border-radius:5px;background:rgba(11,27,46,.06);
  opacity:0;transform-origin:left;pointer-events:none;
  transition:opacity .3s,transform .55s var(--e-out,cubic-bezier(.16,1,.3,1)),width .55s var(--e-out,cubic-bezier(.16,1,.3,1));
  z-index:-1;
}
.nav.is-dark .nav__pill{background:rgba(255,255,255,.13)}
.nav__actions{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);position:relative;z-index:2;flex:none}
.nav__tel{font-size:.9rem;font-weight:520;color:#43566E;display:flex;align-items:center;gap:.55em;transition:color .3s;white-space:nowrap}
.nav__tel:hover{color:var(--brand,#1857C8)}
.nav.is-dark .nav__tel{color:rgba(255,255,255,.75)}
.nav.is-dark .nav__tel:hover{color:#fff}
.nav__cta{padding:.78em 1.3em;font-size:.88rem;font-weight:520;box-shadow:none;border-radius:5px}
.nav__cta:hover{transform:translateY(-1px);box-shadow:0 8px 20px -10px rgba(24,87,200,.8)}
.nav.is-dark .nav__cta{--bg:#fff;--fg:#08182A}

.burger{display:none;width:44px;height:44px;border-radius:6px;position:relative;z-index:2;align-items:center;justify-content:center;flex:none}
.burger i{display:block;width:19px;height:1.6px;background:var(--ink,#0B1B2E);border-radius:2px;position:relative;transition:transform .45s var(--e-out,cubic-bezier(.16,1,.3,1)),opacity .3s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:19px;height:1.6px;background:inherit;border-radius:2px;transition:transform .45s var(--e-out,cubic-bezier(.16,1,.3,1))}
.burger i::before{top:-6px}.burger i::after{top:6px}
.nav.is-dark .burger i{background:#fff}
body.menu-open .burger i{background:transparent}
body.menu-open .burger i::before{transform:translateY(6px) rotate(45deg);background:var(--ink,#0B1B2E)}
body.menu-open .burger i::after{transform:translateY(-6px) rotate(-45deg);background:var(--ink,#0B1B2E)}

.mmenu{
  position:fixed;inset:0;z-index:190;background:rgba(246,248,252,.9);
  backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
  display:flex;flex-direction:column;justify-content:center;padding:110px clamp(20px,5vw,64px) 40px;
  opacity:0;visibility:hidden;transition:opacity .5s var(--e-out,cubic-bezier(.16,1,.3,1)),visibility .5s;
}
body.menu-open .mmenu{opacity:1;visibility:visible}
.mmenu a{
  font-size:clamp(1.7rem,7vw,2.6rem);font-weight:600;letter-spacing:-.035em;
  padding-block:.3em;border-bottom:1px solid rgba(11,27,46,.06);
  opacity:0;transform:translateY(20px);transition:opacity .6s var(--e-out,cubic-bezier(.16,1,.3,1)),transform .6s var(--e-out,cubic-bezier(.16,1,.3,1));
}
body.menu-open .mmenu a{opacity:1;transform:none;transition-delay:calc(var(--i)*55ms + 120ms)}
.mmenu__foot{margin-top:36px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}

@media(max-width:1080px){.nav__menu,.nav__tel{display:none}.burger{display:flex}}
@media(max-width:760px){:root{--nav-h:66px}.nav__cta{display:none}}

.foot__id svg{height:40px;width:auto;margin-bottom:20px}
.foot__id .lg-mark{--lg-mark:#93A6BE;--lg-accent:#7CBBFE;--lg-word:#fff}

/* ============================================================
   HERO — cinematic scene
   ============================================================ */
.scene{position:relative}
.stage{position:sticky;top:0;height:100svh;overflow:hidden}

/* Hero und die Frage darunter liegen auf einer gemeinsamen Fläche —
   dadurch gibt es beim Übergang keine sichtbare Kante. */
.act1{position:relative;
  background:linear-gradient(180deg,#fff 0%,var(--t1) 16%,var(--t2) 34%,var(--t2) 52%,var(--t3) 76%,var(--t2) 100%)}
.hero{--len:140vh;height:var(--len)}
.hero__stage{background:transparent;
  display:flex;align-items:flex-start;padding-top:calc(var(--nav-h) + 3.5vh);padding-bottom:4vh}
.hero__aura{
  position:absolute;inset:-18% -12% auto -12%;height:120%;pointer-events:none;
  background:
    radial-gradient(48% 42% at 22% 18%,rgba(124,187,254,.34),transparent 62%),
    radial-gradient(44% 38% at 82% 8%,rgba(24,87,200,.14),transparent 64%),
    radial-gradient(52% 40% at 60% 72%,rgba(230,238,250,.9),transparent 66%);
  filter:blur(6px);
  transform:translate3d(0,calc(var(--p,0)*-12vh),0) scale(calc(1 + var(--p,0)*.06));
  opacity:calc(1 - var(--p,0)*1.6);
  will-change:transform,opacity;
}
.hero__grid{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(11,27,46,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(11,27,46,.045) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(70% 55% at 50% 34%,#000,transparent 78%);
  mask-image:radial-gradient(70% 55% at 50% 34%,#000,transparent 78%);
  transform:translate3d(0,calc(var(--p,0)*-6vh),0);
}

.hero__copy{
  position:relative;width:100%;
  padding-inline:var(--gut);max-width:1480px;margin-inline:auto;
  display:flex;flex-direction:column;gap:clamp(12px,1.9vh,24px);align-items:flex-start;
  transform:translate3d(0,calc(var(--p,0)*-16vh),0);
  opacity:clamp(0,calc(1 - (var(--p,0) - .16)*2.6),1);
  filter:blur(calc(var(--p,0)*7px));
  will-change:transform,opacity,filter;
}
.hero h1{max-width:15ch}
.hero__copy .lead{font-size:clamp(1.02rem,min(1.45vw,2.1vh),1.3rem)}
.hero__sub{max-width:46ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero__badges{display:flex;flex-wrap:wrap;gap:10px 22px;padding-top:2px}
.hero__badges li{display:flex;align-items:center;gap:.55em;font-size:.93rem;font-weight:500;color:var(--ink-2)}

.tick{flex:none;width:19px;height:19px;border-radius:50%;background:rgba(14,159,83,.11);display:grid;place-items:center}
.tick svg{width:11px;height:11px;stroke:var(--go);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .7s var(--e-out) var(--td,0s)}
.is-in .tick svg,.tick.is-in svg{stroke-dashoffset:0}

/* Schwebende Ansichten im Hero: Büro-Übersicht + App */
.hobj{
  position:absolute;right:clamp(24px,6vw,110px);top:50%;translate:0 -52%;
  width:min(30vw,376px);
  opacity:clamp(0,calc(1 - (var(--p,0) - .10)*3.4),1);
  transform:translate3d(0,calc(var(--p,0)*-11vh),0) scale(calc(1 - var(--p,0)*.07));
  will-change:transform,opacity;pointer-events:none;
}
.hw{
  position:relative;padding:18px 18px 14px;border-radius:12px;
  background:rgba(255,255,255,.66);
  backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(11,27,46,.06),0 34px 70px -40px rgba(8,24,42,.5);
  animation:float 9s var(--e-io) infinite;
}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -9px}}
.hw__head{display:flex;align-items:center;gap:.55em;font-size:.76rem;font-weight:620;letter-spacing:.03em;color:var(--ink-2);padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.hw__head b{margin-left:auto;font-weight:620;color:var(--brand)}
.hw__live{width:7px;height:7px;border-radius:50%;background:var(--go);animation:pulse 2.6s ease-out infinite;flex:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(14,159,83,.5)}70%{box-shadow:0 0 0 9px rgba(14,159,83,0)}100%{box-shadow:0 0 0 0 rgba(14,159,83,0)}}
.hw__list{display:flex;flex-direction:column;padding-block:4px}
.hw__list li{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:.79rem;border-bottom:1px solid rgba(11,27,46,.045)}
.hw__list li:last-child{border-bottom:0}
.hw__t{font-weight:620;color:var(--ink);flex:none;font-variant-numeric:tabular-nums}
.hw__o{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.hw__s{flex:none;font-size:.66rem;font-weight:600;padding:.26em .58em;border-radius:4px;background:rgba(11,27,46,.05);color:var(--ink-3);white-space:nowrap}
.hw__s--ok{background:rgba(14,159,83,.11);color:#0B7C41}
.hw__s--go{background:rgba(24,87,200,.1);color:var(--brand)}
.hw__foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:11px;border-top:1px solid var(--line-2);font-size:.77rem;color:var(--ink-2)}
.hw__foot b{font-size:1.05rem;font-weight:640;color:var(--go)}

/* Zweite Ansicht: die App */
.happ{
  position:absolute;left:-56%;bottom:-24%;width:54%;
  border-radius:16px;overflow:hidden;background:#0E2136;color:#fff;
  box-shadow:0 0 0 5px #1B3149,0 0 0 6px rgba(255,255,255,.16),0 40px 74px -34px rgba(8,24,42,.75);
  animation:float2 11s var(--e-io) infinite;
}
@keyframes float2{0%,100%{translate:0 0}50%{translate:0 11px}}
.happ__top{display:flex;align-items:center;gap:8px;padding:9px 11px;background:#0A1A2C;
  font-size:.56rem;font-weight:700;letter-spacing:.13em;color:rgba(255,255,255,.9)}
.happ__menu{display:flex;flex-direction:column;gap:2px}
.happ__menu i{display:block;width:11px;height:1.5px;background:var(--sky);border-radius:2px}
.happ__user{margin-left:auto;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.5)}
.happ__obj{padding:8px 11px;background:#122B45;display:flex;flex-direction:column;gap:1px}
.happ__obj span{font-size:.52rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.happ__obj b{font-size:.66rem;font-weight:620;color:#fff}
.happ__rows{display:flex;flex-direction:column;gap:4px;padding:8px}
.hrow{display:flex;align-items:center;gap:7px;padding:7px 8px;border-radius:5px;background:#16406B}
.hrow--warn{background:#7A2233}
.hrow--go{background:#0C5B34}
.hrow__ic{flex:none;width:15px;height:15px;border-radius:3px;background:rgba(255,255,255,.22)}
.hrow__ic--y{background:rgba(255,214,102,.85)}
.hrow__ic--g{background:rgba(126,240,180,.85)}
.hrow__ic--q{background:rgba(124,187,254,.85)}
.hrow__tx{display:flex;flex-direction:column;min-width:0;flex:1}
.hrow__tx b{font-size:.62rem;font-weight:620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrow__tx i{font-style:normal;font-size:.5rem;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrow em{font-style:normal;font-size:.58rem;font-weight:700;background:rgba(255,255,255,.18);padding:.16em .42em;border-radius:3px;flex:none}
.hrow .mono{font-variant-numeric:tabular-nums}
.hrow__ch{color:rgba(255,255,255,.45);font-size:.8rem;flex:none}
.happ__bar{display:flex;justify-content:space-between;padding:6px 11px;background:#0A1A2C;font-size:.48rem;letter-spacing:.05em;color:rgba(255,255,255,.42)}

.hero__hint{
  position:absolute;left:var(--gut);bottom:26px;
  display:flex;align-items:center;gap:12px;
  font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3);
  opacity:clamp(0,calc(1 - var(--p,0)*7),1);
}
.hero__hint i{display:block;width:34px;height:1px;background:linear-gradient(90deg,var(--ink-3),transparent);animation:hint 2.4s var(--e-io) infinite}
@keyframes hint{0%{transform:scaleX(0);transform-origin:left}45%{transform:scaleX(1);transform-origin:left}55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}


/* ============================================================
   PAIN — Chaos ordnet sich
   ============================================================ */
.pain{--len:330vh;height:var(--len);position:relative;z-index:1;margin-top:-66vh;background:transparent}
.pain__stage{display:grid;grid-template-rows:auto 1fr;padding-top:calc(var(--nav-h) + 2vh);padding-bottom:3vh;background:transparent}
.pain__head{padding-inline:var(--gut);max-width:var(--maxw);margin-inline:auto;width:100%;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.pain__head .h2{max-width:18ch}
.pain__board{position:relative;width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--gut);
  display:flex;flex-direction:column;justify-content:center}
.pain__mesh{
  position:absolute;inset:-14% -6%;pointer-events:none;opacity:var(--order,0);
  background-image:linear-gradient(rgba(24,87,200,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(24,87,200,.09) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(66% 60% at 50% 50%,#000,transparent 76%);
  mask-image:radial-gradient(66% 60% at 50% 50%,#000,transparent 76%);
  transition:opacity .4s linear;
}
.notes{position:relative;height:min(46vh,420px);margin-top:clamp(12px,2vh,26px);flex:none;
  opacity:var(--nfade,1);transform:scale(var(--nsc,1));transform-origin:center 40%;will-change:transform,opacity}
.note{
  position:absolute;left:50%;top:50%;width:min(31%,300px);
  padding:22px 22px 20px;border-radius:12px;background:#fff;
  opacity:var(--o,0);
  box-shadow:0 1px 0 rgba(11,27,46,.05),0 18px 40px -22px rgba(8,24,42,.5);
  transform:translate3d(calc(-50% + var(--tx,0px)),calc(-50% + var(--ty,0px)),0) rotate(var(--rot,0deg)) scale(var(--sc,1));
  will-change:transform;
  border:1px solid var(--line-2);
  filter:saturate(var(--sat,.25));
}
.note__tag{font-size:.66rem;font-weight:640;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px;display:block;transition:color .5s}
.note.is-clean .note__tag{color:var(--brand)}
.note p{font-size:.95rem;line-height:1.45;color:var(--ink);letter-spacing:-.014em}
.note__ico{width:26px;height:26px;margin-bottom:12px;stroke:var(--ink-3);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s}
.note.is-clean .note__ico{stroke:var(--brand)}
.pain__resolve{
  text-align:center;margin-top:clamp(16px,2.4vh,32px);flex:none;position:relative;z-index:4;
  opacity:var(--res,0);
  transform:translate3d(0,calc((1 - var(--res,0))*16px - var(--rlift,0px)),0) scale(var(--rsc,1));
  transform-origin:center top;will-change:transform,opacity;
}
.pain__resolve p{
  font-size:clamp(1.24rem,2.5vw,1.95rem);font-weight:620;letter-spacing:-.034em;
  max-width:24ch;margin-inline:auto;line-height:1.22;
}
.pain__resolve .u{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ============================================================
   FLOW — horizontaler Kamerafahrt
   ============================================================ */
.flow{--len:420vh;height:var(--len);position:relative;z-index:1;
  background:linear-gradient(180deg,var(--t2) 0%,var(--t4) 26%,var(--t4) 74%,var(--t1) 100%)}
.flow__stage{display:flex;flex-direction:column;padding-top:calc(var(--nav-h) + 2vh)}
.flow__head{padding-inline:var(--gut);max-width:var(--maxw);margin-inline:auto;width:100%;display:flex;flex-direction:column;gap:12px}
.flow__head .h2{max-width:20ch}
.flow__head .lead{max-width:56ch}
.flow__viewport{position:relative;flex:1;overflow:hidden;display:flex;align-items:center;margin-top:clamp(20px,3.6vh,44px)}
.flow__fadeL,.flow__fadeR{position:absolute;top:0;bottom:0;width:clamp(28px,6vw,90px);pointer-events:none;z-index:3}
.flow__fadeL{left:0;background:linear-gradient(90deg,var(--t4),rgba(243,247,252,0))}
.flow__fadeR{right:0;background:linear-gradient(270deg,var(--t4),rgba(243,247,252,0))}
.flow__track{
  display:flex;align-items:stretch;gap:clamp(16px,2vw,30px);
  padding-inline:max(var(--gut),calc((100vw - var(--maxw))/2));
  transform:translate3d(calc(var(--tx,0px)),0,0);will-change:transform;
}
.zone{
  position:relative;display:flex;gap:clamp(18px,2.2vw,32px);padding:clamp(24px,2.8vh,36px) clamp(20px,2.2vw,30px);
  border-radius:26px;flex:none;
}
.zone--office{background:linear-gradient(180deg,rgba(24,87,200,.07),rgba(24,87,200,.03));box-shadow:inset 0 0 0 1px rgba(24,87,200,.1)}
.zone--field{background:linear-gradient(180deg,rgba(14,159,83,.08),rgba(14,159,83,.03));box-shadow:inset 0 0 0 1px rgba(14,159,83,.12)}
.zone__label{
  position:absolute;top:-13px;left:clamp(18px,2vw,28px);display:flex;align-items:center;gap:.6em;
  background:#fff;border-radius:5px;padding:.44em .95em;font-size:.68rem;font-weight:640;
  letter-spacing:.13em;text-transform:uppercase;box-shadow:0 0 0 1px var(--line);white-space:nowrap;
}
.zone--office .zone__label{color:var(--brand)}
.zone--field .zone__label{color:var(--go)}
.zone__label svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6}

.step{
  flex:none;width:clamp(248px,26vw,300px);display:flex;flex-direction:column;gap:16px;
  border-radius:18px;padding:clamp(24px,2.8vh,32px);position:relative;isolation:isolate;
  background:linear-gradient(168deg,#fff 12%,#FBFCFE 100%);
  box-shadow:0 0 0 1px rgba(11,27,46,.05),0 2px 4px -2px rgba(8,24,42,.1),0 24px 52px -34px rgba(8,24,42,.5);
  transform:translate3d(0,calc((1 - var(--a,0)) * 16px),0) scale(calc(.955 + var(--a,0)*.045));
  opacity:calc(.34 + var(--a,0)*.66);
  transition:opacity .35s linear,transform .35s linear,box-shadow .6s var(--e-out);
  will-change:transform,opacity;
}
.step::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 82% -10%,rgba(24,87,200,.09),transparent 58%);
  opacity:var(--a,0);transition:opacity .4s linear;
}
.zone--field .step::before{background:radial-gradient(120% 90% at 82% -10%,rgba(14,159,83,.1),transparent 58%)}
.step.is-active{box-shadow:0 0 0 1px rgba(24,87,200,.14),0 3px 6px -2px rgba(8,24,42,.12),0 42px 74px -40px rgba(8,24,42,.6)}
.step__n{
  font-size:.7rem;font-weight:700;letter-spacing:.1em;color:var(--brand);
  font-variant-numeric:tabular-nums;
}
.zone--field .step__n{color:var(--go)}
.step__ico{width:34px;height:34px;stroke:var(--ink);fill:none;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.zone--field .step__ico{stroke:var(--go)}
.zone--office .step__ico{stroke:var(--brand)}
.step h3{letter-spacing:-.026em}
.step p{font-size:.94rem;line-height:1.55;color:var(--ink-2)}
.step__top{display:flex;align-items:center;justify-content:space-between}

.shot{
  flex:none;width:clamp(190px,19vw,232px);border-radius:18px;overflow:hidden;position:relative;
  box-shadow:0 0 0 1px rgba(11,27,46,.06),0 24px 52px -32px rgba(8,24,42,.6);
  transform:translate3d(0,calc((1 - var(--a,0)) * 16px),0) scale(calc(.955 + var(--a,0)*.045));
  opacity:calc(.34 + var(--a,0)*.66);
  transition:opacity .35s linear,transform .35s linear;
}
.shot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.shot figcaption{
  position:absolute;inset:auto 0 0 0;padding:16px 16px 14px;color:#fff;
  display:flex;flex-direction:column;gap:2px;font-size:.82rem;line-height:1.35;
  background:linear-gradient(180deg,transparent,rgba(6,16,30,.86));
}
.shot figcaption b{font-size:.7rem;font-weight:660;letter-spacing:.13em;text-transform:uppercase;color:var(--sky)}

.handover{
  flex:none;width:clamp(96px,10vw,132px);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;text-align:center;
}
.handover__ring{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:var(--go);box-shadow:0 8px 22px -10px rgba(14,159,83,.9);
  transform:scale(calc(.7 + var(--a,0)*.3));opacity:calc(.35 + var(--a,0)*.65);
  transition:transform .4s var(--e-out),opacity .4s linear;
}
.handover--back .handover__ring{background:var(--brand);box-shadow:0 8px 22px -10px rgba(24,87,200,.9)}
.handover__ring svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.handover span{font-size:.73rem;font-weight:620;line-height:1.3;letter-spacing:-.008em;color:var(--go)}
.handover--back span{color:var(--brand)}
.flow__rail{position:absolute;left:0;right:0;top:50%;height:2px;pointer-events:none;z-index:-1}
.flow__foot{
  padding:clamp(14px,2.2vh,26px) var(--gut) clamp(18px,2.6vh,32px);max-width:var(--maxw);margin-inline:auto;width:100%;
  display:flex;gap:32px;flex-wrap:wrap;align-items:center;
}
.flow__dots{display:flex;gap:7px;margin-top:clamp(16px,2.2vh,26px)}
.flow__dots i{width:clamp(18px,2.4vw,34px);height:3px;border-radius:2px;background:rgba(11,27,46,.13);transition:background .45s var(--e-out),transform .45s var(--e-out)}
.flow__dots i.on{background:var(--brand)}
.flow__dots i.now{background:var(--brand);transform:scaleY(1.8)}

/* ============================================================
   ORIGIN — Herkunft
   ============================================================ */
.origin{overflow:clip;background:linear-gradient(180deg,var(--t1) 0%,#fff 40%,var(--t1) 100%)}
.origin__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(44px,6.5vw,104px);align-items:center}
.origin__copy{display:flex;flex-direction:column;gap:clamp(22px,2.8vh,32px);max-width:56ch}
.origin__copy .h2{font-size:clamp(1.8rem,3vw,2.75rem);max-width:19ch}
.bigno{display:flex;align-items:baseline;gap:.28em;line-height:.85}
.bigno b{font-size:clamp(4.6rem,11vw,9rem);font-weight:640;letter-spacing:-.05em;
  background:linear-gradient(150deg,var(--ink) 20%,var(--brand));-webkit-background-clip:text;background-clip:text;color:transparent}
.bigno span{font-size:clamp(.98rem,1.5vw,1.24rem);font-weight:560;color:var(--ink-2);letter-spacing:-.02em;line-height:1.2}
.pillars{display:flex;flex-direction:column;gap:24px;border-top:1px solid var(--line);padding-top:32px;margin-top:6px}
.pillar{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.pillar h3{font-size:1.02rem;font-weight:620;letter-spacing:-.02em;margin-bottom:3px}
.pillar p{font-size:.95rem;color:var(--ink-2);line-height:1.5}

.origin__vis{position:relative;aspect-ratio:1/1.16;overflow:visible}
.ph{position:absolute;border-radius:16px;overflow:hidden;box-shadow:0 34px 74px -44px rgba(8,24,42,.62),0 0 0 1px rgba(11,27,46,.05)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph--a{inset:0 32% 30% 0;transform:translate3d(0,calc(var(--par,0)*-22px),0)}
.ph--person{position:absolute;right:-7%;bottom:0;width:63%;height:auto;z-index:4;
  filter:drop-shadow(-18px 26px 44px rgba(8,24,42,.3));
  transform:translate3d(0,calc(var(--par,0)*16px),0);
  -webkit-mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,.55) 84%,transparent 99%);
  mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,.55) 84%,transparent 99%);}
.ph--quote{
  position:absolute;left:0;bottom:2%;width:min(60%,300px);padding:22px 24px;border-radius:14px;z-index:5;
  background:rgba(255,255,255,.76);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(11,27,46,.06),0 28px 56px -30px rgba(8,24,42,.55);
  transform:translate3d(0,calc(var(--par,0)*-12px),0);
}
.ph--quote p{font-size:clamp(1.02rem,1.35vw,1.2rem);font-weight:500;line-height:1.45;letter-spacing:-.02em}
.ph--quote cite{display:block;margin-top:14px;font-style:normal;font-size:.79rem;font-weight:560;color:var(--ink-2);letter-spacing:-.005em}

/* ============================================================
   BILDBAND
   ============================================================ */
.band{
  position:relative;overflow:hidden;isolation:isolate;color:#fff;
  padding-block:clamp(118px,18vh,220px);background:#06101E;
}
.band__img{
  position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;object-position:62% 50%;z-index:-2;
  transform:translate3d(0,calc(var(--par,0)*-4%),0) scale(1.04);will-change:transform;
}
.band::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(99deg,
      rgba(6,16,30,.95) 0%,   rgba(6,16,30,.93) 16%, rgba(6,16,30,.90) 30%,
      rgba(6,16,30,.85) 42%,  rgba(6,16,30,.76) 52%, rgba(7,18,33,.62) 62%,
      rgba(7,18,33,.46) 73%,  rgba(8,20,36,.32) 85%, rgba(8,20,36,.24) 100%),
    linear-gradient(180deg,
      rgba(6,16,30,.55) 0%,   rgba(6,16,30,.30) 10%, rgba(6,16,30,.10) 20%,
      rgba(6,16,30,0) 32%,    rgba(6,16,30,0) 64%,   rgba(6,16,30,.16) 76%,
      rgba(6,16,30,.40) 88%,  rgba(6,16,30,.62) 100%);
}
/* Feines Rauschen bricht die Farbstufen im Verlauf auf */
.band::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.4;
  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%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.band__in{max-width:var(--maxw);position:relative;z-index:2}
.band__in .h2{max-width:15ch}
.band__in .lead{max-width:44ch;color:rgba(255,255,255,.78)}
.eyebrow--light{color:var(--sky)}

/* ============================================================
   PROOF — Logos + Zahlen
   ============================================================ */
.proof{padding-block:clamp(48px,6.5vh,80px);background:linear-gradient(180deg,var(--t1),var(--t2))}
.proof__t{text-align:center;color:var(--ink-3);font-size:.78rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;margin-bottom:34px}
.marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
.marquee__row{display:flex;width:max-content;gap:clamp(44px,5.5vw,84px);align-items:center;padding-block:20px}
.marquee__row.a{animation:mq 58s linear infinite}
.marquee__row.b{animation:mq 58s linear infinite reverse}
.marquee:hover .marquee__row{animation-play-state:paused}
@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marquee img{height:46px;width:auto;opacity:.68;filter:none;transition:opacity .4s;flex:none}
.marquee img:hover{opacity:1}
.marquee span{
  flex:none;font-size:.98rem;font-weight:620;letter-spacing:-.012em;color:var(--ink-2);
  opacity:.62;transition:opacity .4s;white-space:nowrap;
}
.marquee span:hover{opacity:1;color:var(--ink)}

.stats{position:relative;overflow:hidden;background:var(--deep);color:#fff}
.stats video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;
  transform:scale(calc(1.06 + var(--par,0)*.03)) translate3d(0,calc(var(--par,0)*-3%),0)}
.stats::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(8,24,42,.86),rgba(8,24,42,.66) 45%,rgba(8,24,42,.9)),
  radial-gradient(60% 60% at 50% 50%,rgba(24,87,200,.3),transparent 70%)}
.stats__in{position:relative;z-index:2;padding-block:clamp(96px,14vh,170px)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(26px,3.2vw,54px)}
.stat > b{display:block;font-size:clamp(2.4rem,4.6vw,3.9rem);font-weight:640;letter-spacing:-.045em;line-height:1;
  background:linear-gradient(180deg,#fff,#B7D4FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat > span{display:block;margin-top:10px;font-size:.92rem;color:rgba(255,255,255,.68);line-height:1.42;max-width:24ch}
.stat{border-left:1px solid rgba(255,255,255,.16);padding-left:26px}

/* ============================================================
   FEATURES — Device-Morph
   ============================================================ */
.feat{--len:380vh;height:var(--len);position:relative;z-index:1;margin-top:0;
  background:linear-gradient(180deg,#fff 0%,var(--t1) 50%,#fff 100%)}
.feat__stage{display:grid;grid-template-columns:1fr .9fr;gap:clamp(34px,5vw,84px);align-items:center;
  max-width:var(--maxw);margin-inline:auto;padding:calc(var(--nav-h) + 2vh) var(--gut) 3vh;width:100%}
.feat__copy{display:flex;flex-direction:column;gap:clamp(20px,2.6vh,30px);min-height:0}
.feat__lists{position:relative}
.flist{transition:opacity .55s var(--e-out),transform .55s var(--e-out)}
.flist + .flist{position:absolute;inset:0}
.flist[data-off]{opacity:0;transform:translateY(14px);pointer-events:none}
.flist h3{display:flex;align-items:center;gap:.6em;margin-bottom:16px;font-size:1.06rem;font-weight:640;letter-spacing:-.022em}
.flist h3 .badge{font-size:.66rem;font-weight:660;letter-spacing:.12em;text-transform:uppercase;padding:.38em .7em;border-radius:4px}
.flist--office h3 .badge{background:rgba(24,87,200,.1);color:var(--brand)}
.flist--field h3 .badge{background:rgba(14,159,83,.1);color:var(--go)}
.flist ul{display:flex;flex-direction:column}
.flist li{display:flex;align-items:center;gap:.8em;padding:.78em 0;border-bottom:1px solid var(--line-2);font-size:1.02rem;font-weight:500;letter-spacing:-.018em}
.flist li small{margin-left:auto;font-size:.78rem;font-weight:500;color:var(--ink-3);letter-spacing:0}

.device{position:relative;justify-self:center;width:100%;max-width:620px;aspect-ratio:1/1;display:grid;place-items:center}
.device__frame{
  position:relative;overflow:hidden;will-change:width,height;
  width:var(--dw,100%);height:var(--dh,64%);border-radius:var(--dr,20px);
}
.device__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center center;transition:opacity .45s linear}
.device__frame img.a{object-position:center bottom;padding:6%}
.device__frame img.b{padding:3%}
.device__glow{display:none}
.device__foot{position:absolute;left:50%;transform:translateX(-50%);bottom:-34px;font-size:.76rem;font-weight:560;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}

/* ============================================================
   PRICE
   ============================================================ */
.price{overflow:clip;background:linear-gradient(180deg,#fff 0%,var(--t2) 45%,var(--t1) 100%)}
.price__grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(36px,5vw,76px);align-items:center}
.price__copy .h2{font-size:clamp(1.78rem,2.85vw,2.6rem);max-width:none}
.price__copy{display:flex;flex-direction:column;gap:clamp(20px,2.6vh,30px);max-width:52ch}
.price__vis{position:relative}
.chart{position:relative;width:100%;aspect-ratio:1.16/1;background:#fff;border-radius:20px;padding:clamp(24px,3vw,36px);
  box-shadow:0 0 0 1px var(--line-2),0 40px 80px -50px rgba(8,24,42,.6);
  transition:transform .6s var(--e-out),box-shadow .6s var(--e-out);will-change:transform}
.chart::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(340px 240px at var(--mx,50%) var(--my,50%),rgba(24,87,200,.09),transparent 68%);
  opacity:0;transition:opacity .5s}
.chart:hover{transform:translateY(-5px);box-shadow:0 0 0 1px rgba(24,87,200,.14),0 54px 96px -52px rgba(8,24,42,.66)}
.chart:hover::after{opacity:1}
.chart:hover .chart__crew i.on{transform:translateY(-2px) scale(1.06)}
.chart__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.chart__head h3{font-size:1rem;font-weight:620;letter-spacing:-.02em}
.chart__legend{display:flex;flex-direction:column;gap:6px;font-size:.76rem;color:var(--ink-2)}
.chart__legend i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:.5em;vertical-align:middle}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .grid line{stroke:var(--line-2);stroke-width:1}
.chart .lbl{font-size:8.6px;fill:var(--ink-3);font-weight:560;letter-spacing:.04em}
.pathA{stroke:#D8556B;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-dasharray:var(--len,400);stroke-dashoffset:calc(var(--len,400) * (1 - var(--cp,0)))}
.pathB{stroke:var(--brand);stroke-width:2.8;fill:none;stroke-linecap:round;stroke-dasharray:var(--len,400);stroke-dashoffset:calc(var(--len,400) * (1 - var(--cp,0)))}
.areaB{fill:url(#gb);opacity:calc(var(--cp,0)*.9)}
.pathB-dot{opacity:calc(var(--cp,0)*2);transition:opacity .3s ease}
.chart__crew{display:flex;flex-wrap:wrap;gap:5px;margin-top:18px;border-top:1px solid var(--line-2);padding-top:16px}
.chart__crew i{width:11px;height:11px;border-radius:2px;background:var(--brand);opacity:0;transform:scale(.4);
  transition:opacity .35s var(--e-out),transform .45s var(--e-out);transition-delay:calc(var(--d,0)*14ms)}
.chart__crew i.on{opacity:.85;transform:none}
.chart__crewlbl{font-size:.76rem;color:var(--ink-3);margin-top:10px;display:block}
.pricecard{
  margin-top:8px;padding:30px 32px;border-radius:18px;background:var(--deep);color:#fff;position:relative;overflow:hidden;
  box-shadow:0 30px 70px -40px rgba(8,24,42,.8);
  transition:transform .6s var(--e-out),box-shadow .6s var(--e-out);will-change:transform;
}
.pricecard::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(360px 260px at var(--mx,50%) var(--my,50%),rgba(124,187,254,.22),transparent 66%);
  opacity:0;transition:opacity .5s}
.pricecard:hover{transform:translateY(-5px);box-shadow:0 46px 92px -44px rgba(8,24,42,.9)}
.pricecard:hover::after{opacity:1}
.pricecard:hover b{letter-spacing:-.036em}
.pricecard b{transition:letter-spacing .6s var(--e-out)}
.pricecard::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 88% 0%,rgba(24,87,200,.5),transparent 62%)}
.pricecard > *{position:relative}
.pricecard b{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:640;letter-spacing:-.04em;display:block;line-height:1}
.pricecard b small{font-size:.42em;font-weight:520;letter-spacing:-.01em;color:rgba(255,255,255,.6);margin-left:.35em}
.pricecard ul{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px}
.pricecard li{display:flex;align-items:center;gap:.5em;font-size:.88rem;color:rgba(255,255,255,.8)}
.pricecard .tick{background:rgba(124,187,254,.16)}
.pricecard .tick svg{stroke:var(--sky)}

/* ============================================================
   VOICES
   ============================================================ */
.voices{background:linear-gradient(180deg,var(--t1),#fff 40%,var(--t1))}
.voices__head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:clamp(38px,5vh,62px)}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.vcard{
  display:flex;flex-direction:column;gap:20px;padding:clamp(26px,2.8vw,38px);border-radius:16px;
  background:var(--p2);box-shadow:inset 0 0 0 1px var(--line-2);
  transition:transform .6s var(--e-out),box-shadow .6s var(--e-out),background .6s;
}
.vcard:hover{transform:translateY(-4px);background:#fff;box-shadow:inset 0 0 0 1px var(--line-2),0 30px 60px -38px rgba(8,24,42,.5)}
.vcard blockquote{font-size:clamp(1.06rem,1.5vw,1.28rem);font-weight:500;line-height:1.44;letter-spacing:-.022em;color:var(--ink)}
.vcard blockquote::before{content:"„"}
.vcard blockquote::after{content:"“"}
.vcard figcaption{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:6px;border-top:1px solid var(--line);}
.vcard figcaption b{font-size:.92rem;font-weight:600}
.vcard figcaption span{font-size:.84rem;color:var(--ink-3)}
.vcard--wide{grid-column:span 2}

/* ============================================================
   FAQ
   ============================================================ */
.faq{background:linear-gradient(180deg,var(--t1),var(--t2) 50%,var(--t2))}
.faq__grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(34px,5vw,84px);align-items:start}
.faq__aside{position:sticky;top:calc(var(--nav-h) + 30px);display:flex;flex-direction:column;gap:18px}
.faq__aside .h2{font-size:clamp(1.8rem,2.9vw,2.6rem)}
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{width:100%;display:flex;align-items:flex-start;gap:20px;padding:clamp(20px,2.4vh,28px) 0;text-align:left}
.acc__btn h3{flex:1;font-size:clamp(1.02rem,1.5vw,1.2rem);font-weight:580;letter-spacing:-.024em;line-height:1.35;transition:color .3s}
.acc__btn:hover h3{color:var(--brand)}
.acc__ico{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;margin-top:1px;
  background:rgba(11,27,46,.05);transition:background .35s var(--e-out),transform .5s var(--e-out)}
.acc__ico::before,.acc__ico::after{content:"";position:absolute;width:11px;height:1.6px;background:var(--ink);border-radius:2px;transition:transform .45s var(--e-out),background .3s}
.acc__ico{position:relative}
.acc__ico::after{transform:rotate(90deg)}
.acc__item.open .acc__ico{background:var(--brand)}
.acc__item.open .acc__ico::before,.acc__item.open .acc__ico::after{background:#fff}
.acc__item.open .acc__ico::after{transform:rotate(0)}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--e-out)}
.acc__item.open .acc__panel{grid-template-rows:1fr}
.acc__panel > div{overflow:hidden}
.acc__panel p{padding:0 46px clamp(22px,2.6vh,30px) 0;color:var(--ink-2);font-size:1rem;line-height:1.6;max-width:64ch}
.acc__panel p + p{padding-top:0;margin-top:-8px}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--t2),var(--t3) 55%,var(--p3))}
.final__aura{position:absolute;inset:-20% -10% auto -10%;height:130%;pointer-events:none;
  background:radial-gradient(46% 48% at 26% 30%,rgba(124,187,254,.42),transparent 64%),
             radial-gradient(42% 44% at 78% 62%,rgba(24,87,200,.16),transparent 66%);
  transform:translate3d(0,calc(var(--par,0)*24px),0)}
.final__card{
  position:relative;text-align:center;max-width:900px;margin-inline:auto;
  padding:clamp(40px,6vw,72px) clamp(26px,5vw,64px);border-radius:20px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 0 0 1px rgba(11,27,46,.06),0 50px 100px -60px rgba(8,24,42,.6);
  display:flex;flex-direction:column;align-items:center;gap:22px;
}
.final__card .h2{max-width:20ch}
.final__card .lead{max-width:52ch}
.final__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:2px}
.final__meta li{display:flex;align-items:center;gap:.5em;font-size:.92rem;font-weight:500;color:var(--ink-2)}
.final__alt{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;font-size:.92rem;color:var(--ink-2);margin-top:6px}
.final__alt a{font-weight:560;color:var(--ink);border-bottom:1px solid var(--line);transition:border-color .3s}
.final__alt a:hover{border-color:var(--brand);color:var(--brand)}

/* Terminbuchung */
.final__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(36px,5vw,84px);align-items:center}
.final__copy{display:flex;flex-direction:column;gap:clamp(18px,2.4vh,28px)}
.final__copy .h2{max-width:18ch}
.final__meta{display:flex;flex-direction:column;gap:12px;margin-top:2px}
.final__meta li{display:flex;align-items:center;gap:.6em;font-size:.97rem;font-weight:500;color:var(--ink-2)}
.final__alt{font-size:.94rem;color:var(--ink-2)}
.final__alt a{font-weight:560;color:var(--ink);border-bottom:1px solid var(--line);transition:border-color .3s,color .3s}
.final__alt a:hover{border-color:var(--brand);color:var(--brand)}

.booker{
  position:relative;padding:clamp(26px,3vw,38px);border-radius:18px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(11,27,46,.06),0 44px 90px -54px rgba(8,24,42,.6);
  display:flex;flex-direction:column;gap:20px;
}
.booker__head{display:flex;align-items:center;gap:14px}
.booker__ico{
  flex:none;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
  background:rgba(24,87,200,.09);color:var(--brand);
}
.booker__ico svg{width:22px;height:22px}
.booker__txt b{display:block;font-size:1.02rem;font-weight:620;letter-spacing:-.022em}
.booker__txt span{display:block;font-size:.88rem;color:var(--ink-3);margin-top:3px;line-height:1.4}
.booker__btn{width:100%;justify-content:center}
.booker__slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.booker__slots li{
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:.7em .4em;border-radius:6px;
  background:rgba(11,27,46,.04);font-size:.86rem;font-weight:560;color:var(--ink-2);
  transition:background .35s,color .35s;
}
.booker__slots li b{font-size:.66rem;font-weight:660;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.booker:hover .booker__slots li{background:rgba(24,87,200,.07);color:var(--brand)}
.booker__slots .more{justify-content:center;font-size:.8rem;color:var(--ink-3);background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.booker__note{font-size:.78rem;line-height:1.5;color:var(--ink-3)}

/* Overlay */
.modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:clamp(12px,3vw,40px)}
.modal[hidden]{display:none}
.modal__bd{position:absolute;inset:0;background:rgba(6,16,30,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity .45s var(--e-out)}
.modal__box{
  position:relative;width:min(920px,100%);max-height:min(860px,92vh);display:flex;flex-direction:column;
  background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 60px 120px -50px rgba(6,16,30,.7);
  opacity:0;transform:translateY(18px) scale(.985);transition:opacity .5s var(--e-out),transform .55s var(--e-out);
}
.modal.is-open .modal__bd{opacity:1}
.modal.is-open .modal__box{opacity:1;transform:none}
.modal__top{display:flex;align-items:flex-start;gap:20px;padding:22px clamp(20px,3vw,30px);border-bottom:1px solid var(--line-2)}
.modal__top b{display:block;font-size:1.05rem;font-weight:620;letter-spacing:-.024em}
.modal__top span{display:block;font-size:.88rem;color:var(--ink-3);margin-top:3px}
.modal__x{margin-left:auto;flex:none;width:38px;height:38px;border-radius:6px;display:grid;place-items:center;
  color:var(--ink-2);background:rgba(11,27,46,.05);transition:background .3s,color .3s}
.modal__x svg{width:17px;height:17px}
.modal__x:hover{background:rgba(11,27,46,.1);color:var(--ink)}
.modal__body{flex:1;min-height:520px;position:relative;background:#fff}
.modal__body iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.modal__body .ldg{position:absolute;inset:0;display:grid;place-items:center;font-size:.9rem;color:var(--ink-3)}
.modal__note{padding:12px clamp(20px,3vw,30px) 16px;font-size:.76rem;color:var(--ink-3);border-top:1px solid var(--line-2)}
html.modal-open,body.modal-open{overflow:hidden;overscroll-behavior:none;touch-action:none}
.modal__box{overscroll-behavior:contain}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--deep);color:rgba(255,255,255,.58);padding-block:clamp(64px,9vh,104px) 30px}
.foot a{transition:color .3s}
.foot a:hover{color:#fff}

.foot__top{
  display:flex;justify-content:space-between;align-items:flex-start;gap:clamp(28px,5vw,72px);
  padding-bottom:clamp(38px,5vh,58px);border-bottom:1px solid rgba(255,255,255,.11);
}
.foot__id{max-width:44ch}
.foot__id p{font-size:.94rem;line-height:1.6;color:rgba(255,255,255,.56)}
.foot__cta{
  flex:none;display:inline-flex;align-items:center;gap:.8em;padding:1em 1.5em;border-radius:5px;
  font-size:.95rem;font-weight:560;color:#fff;letter-spacing:-.012em;
  box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.22);
  transition:background .35s,box-shadow .35s,transform .5s var(--e-out);
}
.foot__cta i{font-style:normal;transition:transform .45s var(--e-out)}
.foot__cta:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.4);transform:translateY(-2px)}
.foot__cta:hover i{transform:translateX(4px)}

.foot__grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(20px,3vw,40px);
  padding-block:clamp(38px,5vh,56px);
}
@media(max-width:980px){.foot__grid{grid-template-columns:1fr 1fr 1fr}}
.foot__col h4{
  color:rgba(255,255,255,.4);font-size:.7rem;font-weight:620;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:18px;
}
.foot__col li{margin-bottom:11px;font-size:.92rem;line-height:1.45;color:rgba(255,255,255,.58)}
.foot__col li:last-child{margin-bottom:0}
.foot__col a{font-size:.92rem}

.foot__bar{
  padding-top:26px;border-top:1px solid rgba(255,255,255,.11);
  display:flex;justify-content:space-between;align-items:center;gap:18px 32px;flex-wrap:wrap;
  font-size:.82rem;color:rgba(255,255,255,.42);
}
.foot__legal{display:flex;gap:26px}
.foot__legal a,.foot__cr,.foot__made{font-size:.82rem;letter-spacing:-.004em}
.foot__made{color:rgba(255,255,255,.3)}
.foot__made a{color:rgba(255,255,255,.52);letter-spacing:.05em;font-weight:560}
.foot__made a:hover{color:var(--sky)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1180px){
  .hero__stage{flex-direction:column}
  .hobj{position:static;translate:none;width:100%;transform:none;opacity:1;
    margin-top:clamp(26px,4vh,44px);display:flex;justify-content:center}
  .hw{display:none}
  .happ{position:static;width:min(268px,72%);animation:none}
}
@media (max-width:1080px){
  .nav__menu,.nav__tel{display:none}
  .final__grid{grid-template-columns:1fr;gap:38px}
  .burger{display:flex}
  .origin__grid,.price__grid,.faq__grid{grid-template-columns:1fr;gap:44px}
  .faq__aside{position:static}
  .feat__stage{grid-template-columns:1fr}
  .stats__grid{grid-template-columns:repeat(2,1fr);gap:32px}
  .vgrid{grid-template-columns:1fr 1fr}
  .vcard--wide{grid-column:span 2}
}
@media (max-width:760px){
  body{font-size:16px}
  :root{--nav-h:66px}
  .nav__cta{display:none}
  .hero{--len:190vh}
  .hero__copy{gap:16px}
  .vgrid{grid-template-columns:1fr}
  .vcard--wide{grid-column:span 1}
  .foot__grid{grid-template-columns:1fr 1fr;gap:30px 24px}
  .foot__top{flex-direction:column;align-items:stretch}
  .foot__cta{justify-content:center}
  .foot__bar{flex-direction:column;align-items:flex-start;gap:12px}
  .stat{border-left:0;border-top:1px solid rgba(255,255,255,.14);padding-left:0;padding-top:16px}
  .acc__panel p{padding-right:0}
  .device__foot{bottom:-28px}
}

/* Mobile-Fallback: keine gepinnten Szenen */
@media (max-width:860px){
  .hero,.pain,.flow,.feat{height:auto !important;margin-top:0 !important}
  .hero .stage,.pain .stage,.flow .stage,.feat .stage{position:static;height:auto;overflow:visible;padding-block:clamp(70px,10vh,110px)}
  .hero__stage{padding-top:calc(var(--nav-h) + 4vh) !important;padding-bottom:9vh !important}
  .notes{height:auto;display:grid;grid-template-columns:1fr;gap:14px;margin-top:26px}
  .note{position:static;width:auto;transform:none !important;filter:none;
    box-shadow:0 0 0 1px var(--line-2)}
  .note__tag{color:var(--brand)}
  .note__ico{stroke:var(--brand)}
  .pain__resolve{position:static;opacity:1 !important;transform:none !important;margin-top:34px}
  .pain__stage{padding-top:0}
  .flow__viewport{overflow:visible}
  .flow__track{flex-direction:column;transform:none !important;padding-inline:var(--gut);gap:20px}
  .zone{flex-direction:column;width:100%}
  .step{width:100%;opacity:1 !important;transform:none !important}
  .handover{width:100%;flex-direction:row;justify-content:flex-start;gap:14px;text-align:left}
  .handover__ring{transform:none !important;opacity:1 !important}
  .flow__dots{display:none}
  .shot{width:100%;aspect-ratio:4/3;position:relative}
  .flow__stage{padding-top:0}
  .feat__stage{padding-top:0}
  .flist + .flist{position:static;margin-top:40px}
  .flist[data-off]{opacity:1;transform:none;pointer-events:auto}
  .device{max-width:420px;margin-top:36px;aspect-ratio:auto}
  .device__frame{width:100% !important;height:auto !important;aspect-ratio:16/10;border-radius:14px !important}
  .device__frame img.b{display:none}
  .modal__body{min-height:60vh}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  [data-rv]{opacity:1 !important;transform:none !important;filter:none !important}
  .rvline > span{transform:none !important}
  .hero__film video{transform:none !important}
  .hw,.happ{animation:none !important}
  .hero__copy{opacity:1 !important;filter:none !important;transform:none !important}
  .hero__filmcopy{opacity:1 !important;transform:none !important}
  .hero__hint{display:none}
  .marquee__row{animation:none !important}

  /* keine gepinnten Szenen — alles linear lesbar */
  .pain,.flow,.feat{height:auto !important;margin-top:0 !important}
  .pain .stage,.flow .stage,.feat .stage{position:static;height:auto;overflow:visible;padding-block:clamp(70px,10vh,110px)}
  .notes{height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
  .note{position:static;width:auto;transform:none !important;filter:none;opacity:1 !important;box-shadow:0 0 0 1px var(--line-2)}
  .note__tag{color:var(--brand)}.note__ico{stroke:var(--brand)}
  .pain__resolve{position:static;opacity:1 !important;transform:none !important;margin-top:34px}
  .pain__stage,.flow__stage,.feat__stage{padding-top:0}
  .flow__viewport{overflow:visible}
  .flow__track{flex-wrap:wrap;transform:none !important;gap:20px;padding-inline:var(--gut)}
  .step{opacity:1 !important;transform:none !important}
  .handover__ring{transform:none !important;opacity:1 !important}
  .flow__dots{display:none}
  .shot{width:100%;aspect-ratio:4/3;position:relative}
  .flist + .flist{position:static;margin-top:40px}
  .flist[data-off]{opacity:1;transform:none;pointer-events:auto}
  .device{max-width:460px;aspect-ratio:auto}
  .device__frame{width:100% !important;height:auto !important;aspect-ratio:16/9;border-radius:16px !important}
  .device__frame img.b{display:none}
  .modal__body{min-height:60vh}
}