/* ==========================================================================
   MK DIENSTLEISTUNG — Design System
   01 Tokens · 02 Base · 03 Atmosphäre · 04 Preloader · 05 Navigation
   06 Buttons/Links · 07–19 Sektionen · 20 Responsive · 21 Reduced Motion
   ========================================================================== */

/* ---------- 01 TOKENS ---------- */
:root{
  /* Marke: Navy + Gold aus dem Logo, in ein warmes Schwarz/Papier-System übersetzt */
  --ink:        #0A0B0D;
  --ink-2:      #101216;
  --ink-3:      #171A20;
  --ink-4:      #1F232B;
  --navy:       #0D1725;

  --paper:      #F6F3ED;
  --paper-2:    #EDE8DE;
  --paper-3:    #E4DED2;

  --acc:        #C7974C;
  --acc-hi:     #DBAE63;
  --acc-deep:   #9E7430;
  --acc-soft:   rgba(199,151,76,.14);

  --ok:         #6FA96B;
  --warn:       #C97A45;

  /* Theme-Variablen — werden pro Sektion überschrieben */
  --bg:         var(--ink);
  --fg:         #F3F0E9;
  --fg-mid:     rgba(243,240,233,.66);
  --fg-low:     rgba(243,240,233,.42);
  --hair:       rgba(243,240,233,.11);
  --hair-soft:  rgba(243,240,233,.065);
  --surface:    rgba(243,240,233,.035);
  --surface-2:  rgba(243,240,233,.06);

  /* Typografie */
  --f-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono:    "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Raster */
  --shell:     1400px;
  --pad:       clamp(20px, 5vw, 76px);
  --sec-y:     clamp(88px, 11vw, 168px);

  /* Motion */
  --e-out:     cubic-bezier(.16,.84,.32,1);
  --e-io:      cubic-bezier(.62,.02,.2,1);
}

.section--dark{
  --bg:var(--ink); --fg:#F3F0E9;
  --fg-mid:rgba(243,240,233,.66); --fg-low:rgba(243,240,233,.40);
  --hair:rgba(243,240,233,.11); --hair-soft:rgba(243,240,233,.06);
  --surface:rgba(243,240,233,.035); --surface-2:rgba(243,240,233,.065);
  background:var(--bg); color:var(--fg);
}
.section--light{
  --bg:var(--paper); --fg:#13151A;
  --fg-mid:rgba(19,21,26,.68); --fg-low:rgba(19,21,26,.44);
  --hair:rgba(19,21,26,.13); --hair-soft:rgba(19,21,26,.07);
  --surface:rgba(19,21,26,.028); --surface-2:rgba(19,21,26,.055);
  background:var(--bg); color:var(--fg);
}

/* ---------- 02 BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
/* Horizontales Scrollen wird an der Wurzel unterbunden. `clip` ist hier
   richtig und nicht `hidden`: es erzeugt keinen Scroll-Container, position:sticky
   funktioniert weiter — und anders als `overflow-x:hidden` allein auf dem Body
   greift es auch auf iOS Safari zuverlässig. */
html{overflow-x:hidden; overscroll-behavior-x:none}
@supports (overflow:clip){ html,body{overflow-x:clip} }

body{
  margin:0; background:var(--ink); color:#F3F0E9;
  font-family:var(--f-body); font-size:17px; line-height:1.62;
  font-weight:400; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  max-width:100%;
}
body.is-locked{overflow:hidden}
img,svg,iframe,video{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input{font:inherit; color:inherit}
ul,ol{margin:0; padding:0; list-style:none}
p{margin:0}
h1,h2,h3,h4{margin:0; font-weight:400}
.sprite{position:absolute; width:0; height:0; overflow:hidden}

::selection{background:rgba(199,151,76,.28); color:inherit}
::-moz-selection{background:rgba(199,151,76,.28)}

.shell{max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:2}
section{position:relative}
main > section{padding-block:var(--sec-y)}

/* Zeilen-Container für [data-split] und Hero */
.line{display:block; overflow:hidden; padding-bottom:.05em}
.line__i{display:block}
html.no-gsap .hero__title .line__i{transition:transform 1s var(--e-out) .15s}

.display{font-family:var(--f-display); font-weight:400; letter-spacing:-.028em; line-height:1.02;
  font-variation-settings:"opsz" 96;}
.h1{font-size:clamp(2.6rem, 6.4vw, 5.6rem)}
.h2{font-size:clamp(2rem, 4.3vw, 3.6rem); line-height:1.06}
.mono{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; font-weight:500}
.acc{color:var(--acc)}
em{font-style:normal}
.acc-underline{position:relative; color:inherit}
.acc-underline::after{content:""; position:absolute; left:0; right:0; bottom:.06em; height:.085em; background:var(--acc); opacity:.85;
  transform:scaleX(var(--sx,0)); transform-origin:left; transition:transform .9s var(--e-out) .35s}
.acc-underline.is-inview{--sx:1}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip-link{position:fixed; top:-100px; left:16px; z-index:12000; background:var(--acc); color:#0A0B0D;
  padding:12px 18px; border-radius:2px; font-size:14px; transition:top .2s}
.skip-link:focus{top:16px}
:focus-visible{outline:2px solid var(--acc); outline-offset:3px; border-radius:2px}

.ic{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}

.micro-label{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--fg-low); display:flex; align-items:center; gap:11px; font-weight:500}
.micro-label__num{color:var(--acc); position:relative; padding-right:11px}
.micro-label__num::after{content:""; position:absolute; right:0; top:50%; width:5px; height:1px; background:var(--hair)}
.micro-label__sep{opacity:.4}

.pulse-dot{width:6px; height:6px; border-radius:50%; background:var(--acc); position:relative; flex:none; display:inline-block}
.pulse-dot::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid currentColor; color:var(--acc);
  opacity:0; animation:pulse 2.4s var(--e-out) infinite}
.pulse-dot--green{background:var(--ok)} .pulse-dot--green::after{color:var(--ok)}
.pulse-dot--amber{background:var(--warn); } .pulse-dot--amber::after{color:var(--warn)}
@keyframes pulse{0%{transform:scale(.5); opacity:.9} 70%{transform:scale(1.9); opacity:0} 100%{opacity:0}}

.cdot{display:inline-block; width:3px; height:3px; border-radius:50%; background:var(--acc);
  margin:0 .68em; vertical-align:.28em; opacity:.55}

.lede{font-size:clamp(1.02rem, 1.3vw, 1.16rem); color:var(--fg-mid); line-height:1.62; max-width:46ch}

/* Sektionsköpfe */
.sec-head{margin-bottom:clamp(48px, 6vw, 88px)}
.sec-head .micro-label{margin-bottom:26px}
.sec-head__row{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,5vw,80px); align-items:end}
.sec-head__sub{color:var(--fg-mid); font-size:1.02rem; max-width:42ch; padding-bottom:.5em}
.sec-head--center{text-align:center; display:flex; flex-direction:column; align-items:center}
.sec-head--center .micro-label{justify-content:center}
.sec-head__sub--center{text-align:center; margin-top:22px; max-width:52ch}

/* Weiche Sektionsübergänge */
.edge-fade{position:absolute; left:0; right:0; pointer-events:none; z-index:1}
.edge-fade--bottom{bottom:0; height:180px;
  background:linear-gradient(180deg, transparent 0%, rgba(246,243,237,.035) 60%, rgba(246,243,237,.085) 100%)}
/* Weiche Naht zwischen hellen und dunklen Sektionen */
.seam{position:absolute; left:0; right:0; bottom:0; z-index:1; pointer-events:none;
  height:clamp(120px, 15vw, 260px)}
.seam--light{background:linear-gradient(180deg,
  rgba(246,243,237,0) 0%, rgba(246,243,237,.02) 24%, rgba(246,243,237,.07) 42%,
  rgba(246,243,237,.18) 57%, rgba(246,243,237,.40) 71%, rgba(246,243,237,.70) 84%,
  rgba(246,243,237,.92) 94%, var(--paper) 100%)}
.seam--dark{background:linear-gradient(180deg,
  rgba(10,11,13,0) 0%, rgba(10,11,13,.02) 24%, rgba(10,11,13,.07) 42%,
  rgba(10,11,13,.18) 57%, rgba(10,11,13,.40) 71%, rgba(10,11,13,.70) 84%,
  rgba(10,11,13,.92) 94%, var(--ink) 100%)}

/* ---------- 03 ATMOSPHÄRE ---------- */
.grain{position:fixed; inset:-120px; z-index:9000; pointer-events:none; opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite}
@keyframes grainShift{
  0%,100%{transform:translate(0,0)} 16%{transform:translate(-3%,2%)} 33%{transform:translate(2%,-3%)}
  50%{transform:translate(-2%,-2%)} 66%{transform:translate(3%,1%)} 83%{transform:translate(1%,3%)}}

.cursor{position:fixed; top:0; left:0; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  border:1px solid rgba(243,240,233,.42); z-index:9500; pointer-events:none; opacity:0;
  transition:opacity .3s, width .32s var(--e-out), height .32s var(--e-out), margin .32s var(--e-out),
             background-color .32s, border-color .32s; will-change:transform}
.cursor__dot{position:absolute; inset:0; margin:auto; width:3px; height:3px; border-radius:50%; background:var(--acc);
  transition:opacity .3s}
.cursor.is-on{opacity:1}
.cursor.is-active{width:66px; height:66px; margin:-33px 0 0 -33px; background:rgba(199,151,76,.16); border-color:rgba(199,151,76,.6)}
.cursor.is-active .cursor__dot{opacity:0}
@media (hover:none),(max-width:1200px){.cursor{display:none}}

/* Laufende Linien in dunklen Sektionen */
.runner{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.runner__line{position:absolute; left:-10%; width:120%; height:1px; background:var(--hair-soft); display:block}
.runner__line:nth-child(1){top:22%} .runner__line:nth-child(2){top:54%} .runner__line:nth-child(3){top:79%}
.runner__line i{position:absolute; top:-2px; width:5px; height:5px; border-radius:50%; background:var(--acc); opacity:.6}
.runner__line:nth-child(1) i{left:18%} .runner__line:nth-child(2) i{left:63%} .runner__line:nth-child(3) i{left:38%}

/* ---------- 04 PRELOADER ---------- */
.preloader{position:fixed; inset:0; z-index:11000; background:var(--ink); display:grid; place-items:center}
.preloader.is-done{pointer-events:none}
.preloader__inner{display:flex; flex-direction:column; align-items:center; gap:22px}
.preloader__mark{width:132px; height:auto; overflow:visible}
.preloader__mark path{fill:none; stroke-linecap:round; stroke-linejoin:round}
.pl-path{stroke:#F3F0E9; stroke-width:2.4}
.pl-arc{stroke:var(--acc); stroke-width:2}
.preloader__mark path{stroke-dasharray:var(--len,300); stroke-dashoffset:var(--len,300)}
.preloader__label{color:rgba(243,240,233,.42); opacity:0}
.preloader__bar{width:104px; height:1px; background:rgba(243,240,233,.14); display:block; overflow:hidden}
.preloader__bar i{display:block; height:100%; width:100%; background:var(--acc); transform:scaleX(0); transform-origin:left}
.preloader__curtain{position:absolute; inset:0; background:var(--ink); transform:translateY(0)}
.no-js .preloader{display:none}

/* ---------- 05 NAVIGATION ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:8000; transition:transform .5s var(--e-io), background-color .4s, border-color .4s;
  border-bottom:1px solid transparent; will-change:transform}
.nav.is-solid{background:rgba(10,11,13,.72); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:rgba(243,240,233,.09)}
.nav.is-hidden{transform:translateY(-102%)}
.nav__inner{max-width:var(--shell); margin-inline:auto; padding:13px var(--pad); display:flex; align-items:center; gap:clamp(18px,3vw,46px)}
.nav__brand{flex:none; display:block}
.nav__brand img{width:104px; height:auto; opacity:.96; transition:opacity .3s}
.nav__brand:hover img{opacity:1}
.nav__links{display:flex; gap:clamp(14px,1.9vw,30px); margin-left:auto; align-items:center}
.nav__links a{position:relative; font-size:13.5px; color:rgba(243,240,233,.62); transition:color .3s; padding:6px 0; letter-spacing:-.005em}
.nav__links a::before{content:""; position:absolute; left:50%; top:-5px; width:4px; height:4px; margin-left:-2px; border-radius:50%;
  background:var(--acc); opacity:0; transform:scale(.4); transition:opacity .35s, transform .35s var(--e-out)}
.nav__links a:hover{color:#F3F0E9}
.nav__links a.is-current{color:#F3F0E9}
.nav__links a.is-current::before{opacity:1; transform:scale(1)}
.nav__cta{flex:none}
.nav__progress{height:1px; background:rgba(243,240,233,.07); position:relative}
.nav__progress i{position:absolute; inset:0 auto 0 0; width:0; background:var(--acc); display:block}
.nav__burger{display:none; width:40px; height:40px; margin-left:auto; position:relative; flex:none}
.nav__burger span{position:absolute; left:9px; width:22px; height:1.5px; background:#F3F0E9; transition:transform .35s var(--e-out), opacity .25s}
.nav__burger span:nth-child(1){top:17px} .nav__burger span:nth-child(2){top:23px}
.nav__burger.is-open span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.mobile-menu{position:fixed; inset:0; z-index:7900; background:var(--ink-2); padding:104px var(--pad) 40px;
  display:flex; flex-direction:column; justify-content:center; opacity:0; transition:opacity .4s}
.mobile-menu[hidden]{display:none}
.mobile-menu.is-open{opacity:1}
.mobile-menu nav{display:flex; flex-direction:column; gap:2px}
.mobile-menu a{display:flex; align-items:baseline; gap:18px; padding:16px 0; font-family:var(--f-display); font-size:clamp(1.7rem,7vw,2.4rem);
  color:#F3F0E9; border-bottom:1px solid rgba(243,240,233,.08); letter-spacing:-.02em}
.mobile-menu a i{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.15em; color:var(--acc); font-style:normal}
.mobile-menu a.is-cta{color:var(--acc); border-bottom:0}

/* ---------- 06 BUTTONS & LINKS ---------- */
.btn{position:relative; display:inline-flex; align-items:center; gap:10px; overflow:hidden;
  padding:16px 30px; border-radius:2px; font-size:11.5px; font-family:var(--f-mono); font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; white-space:nowrap;
  transition:color .38s var(--e-io), border-color .38s, background-color .38s; will-change:transform}
.btn > span,.btn > svg{position:relative; z-index:2}
.btn .ic{width:15px; height:15px; transition:transform .4s var(--e-out)}
.btn::before{content:""; position:absolute; inset:0; background:var(--acc-hi); transform:translateY(101%); transition:transform .5s var(--e-io); z-index:1}
.btn:hover::before{transform:translateY(0)}
.btn:hover .ic{transform:translateX(5px)}
.btn--solid{background:var(--acc); color:#0A0B0D}
.btn--solid:hover{color:#0A0B0D}
.btn--outline{border:1px solid var(--hair); color:var(--fg)}
.btn--outline:hover{color:#0A0B0D; border-color:var(--acc-hi)}
.btn--onDark{border-color:rgba(243,240,233,.22)}
.btn--ghost{padding-inline:8px; color:var(--fg-mid)}
.btn--ghost::before{inset:auto 8px 12px 8px; height:1px; background:var(--acc); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--e-io)}
.btn--ghost:hover{color:var(--fg)}
.btn--ghost:hover::before{transform:scaleX(1); transform-origin:left}
.btn--sm{padding:11px 20px; font-size:10.5px}

.link-u{background-image:linear-gradient(currentColor,currentColor); background-size:0% 1px; background-repeat:no-repeat;
  background-position:right bottom; transition:background-size .45s var(--e-io), color .3s; padding-bottom:2px; color:var(--acc)}
.link-u:hover{background-size:100% 1px; background-position:left bottom}

/* ---------- 07 HERO ---------- */
.hero{min-height:100svh; display:flex; align-items:stretch; padding-block:104px 40px; overflow:hidden; isolation:isolate}
.hero__grid{position:absolute; inset:-15% -5%; z-index:0; opacity:.85;
  background-image:linear-gradient(rgba(243,240,233,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(243,240,233,.045) 1px, transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(120% 90% at 26% 34%, #000 8%, transparent 72%);
  mask-image:radial-gradient(120% 90% at 26% 34%, #000 8%, transparent 72%)}
.hero__glow{position:absolute; top:-22%; right:-14%; width:70vw; height:70vw; max-width:1000px; max-height:1000px; z-index:0;
  background:radial-gradient(circle at 50% 50%, rgba(199,151,76,.15), rgba(199,151,76,.04) 42%, transparent 68%); filter:blur(20px)}
.hero__shell{width:100%; display:flex; flex-direction:column; justify-content:center; gap:clamp(22px,2.8vw,40px)}
.hero__top{display:flex; flex-direction:column; gap:clamp(18px,2.2vw,32px); flex:none}
.hero__head{display:block}
.hero__title{font-size:clamp(2.4rem, min(6.7vw, 7.7vh), 5.7rem); letter-spacing:-.035em; line-height:1.0}
.hero__title .line{display:block; overflow:hidden; padding-bottom:.06em}
.hero__title .line__i{display:block; transform:translateY(105%)}
.is-loaded .hero__title .line__i{transform:translateY(0)}
.hero__title .line:nth-child(2){padding-left:clamp(0px,4vw,86px)}
.strike{position:relative; display:inline-block; color:var(--fg-mid)}
.strike__svg{position:absolute; left:-3%; top:44%; width:106%; height:.42em; overflow:visible}
.strike__svg path{fill:none; stroke:var(--acc); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:320; stroke-dashoffset:320; vector-effect:non-scaling-stroke}
.hero__aside{border-left:1px solid var(--hair); padding-left:clamp(20px,2.2vw,32px); min-width:0}
.hero__aside p{color:var(--fg-mid); font-size:1.02rem; line-height:1.6}
.hero__aside-sub{margin-top:16px !important; color:var(--fg-low) !important; font-size:.95rem !important}

/* Die Filmbreite ergibt sich aus der Höhe, die im Viewport übrig ist —
   die Rasterspalte bekommt exakt dieses Mass, damit keine Lücke entsteht. */
.hero__mid{--vid-w:calc(min(38svh, 440px) * 16 / 9);
  display:grid; grid-template-columns:minmax(0,var(--vid-w)) minmax(0,1fr);
  gap:clamp(26px,3.4vw,54px); align-items:center; flex:none}
.hero__video{margin:0; min-width:0}
.video-frame{position:relative; display:block; width:100%; overflow:hidden; border-radius:3px;
  border:1px solid var(--hair); background:var(--ink-2);
  aspect-ratio:16/9; box-shadow:0 40px 90px -46px rgba(0,0,0,.9)}
.video-frame__media{position:absolute; inset:0; overflow:hidden}
.vf-poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 34%;
  display:block; transform:scale(1.005); transition:transform 1.1s var(--e-out), filter .8s var(--e-out);
  filter:saturate(.94) contrast(1.02) brightness(.96)}
.video-frame:hover .vf-poster,.video-frame:focus-visible .vf-poster{transform:scale(1.035); filter:saturate(1) contrast(1.02) brightness(1)}
.vf-vignette{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,11,13,.30) 0%, transparent 22%, transparent 48%, rgba(10,11,13,.86) 100%)}
.vf-key{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 34%, transparent 44%, rgba(6,7,9,.34) 100%)}
.vf-scan{position:absolute; inset:0; opacity:.2; mix-blend-mode:overlay; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(243,240,233,.05) 0 1px, transparent 1px 4px)}
.video-frame__play{position:absolute; left:clamp(18px,3.4%,30px); bottom:clamp(16px,3%,26px);
  display:flex; align-items:center; gap:16px; pointer-events:none}
.vf-btn{position:relative; width:clamp(52px,5.2vw,66px); height:clamp(52px,5.2vw,66px); border-radius:50%; flex:none;
  display:grid; place-items:center; background:rgba(12,13,16,.58); border:1px solid rgba(243,240,233,.34);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background-color .45s, border-color .45s, transform .5s var(--e-out)}
.vf-btn .ic{width:21px; height:21px; fill:var(--acc); stroke:none; margin-left:3px; transition:fill .4s}
.video-frame:hover .vf-btn,.video-frame:focus-visible .vf-btn{background:var(--acc); border-color:var(--acc); transform:scale(1.07)}
.video-frame:hover .vf-btn .ic,.video-frame:focus-visible .vf-btn .ic{fill:#0A0B0D}
.vf-label{display:flex; flex-direction:column; gap:5px; color:#F3F0E9; letter-spacing:.16em; text-align:left;
  text-shadow:0 1px 14px rgba(0,0,0,.7)}
.vf-label i{font-style:normal; color:rgba(243,240,233,.6); letter-spacing:.14em; font-size:9.5px}
.vf-btn .ring{position:absolute; inset:-1px; border-radius:50%; border:1px solid rgba(199,151,76,.5);
  animation:ringPulse 3s var(--e-out) infinite}
.vf-btn .ring--2{animation-delay:1.5s}
@keyframes ringPulse{0%{transform:scale(1); opacity:.7} 100%{transform:scale(1.85); opacity:0}}
.video-frame__hint{position:absolute; right:clamp(14px,2.6%,20px); top:clamp(14px,2.6%,20px);
  display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:100px;
  background:rgba(10,11,13,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:rgba(243,240,233,.66); font-size:9.5px; transition:color .35s, background-color .35s}
.video-frame__hint .ic{width:11px; height:11px; opacity:.8}
.video-frame:hover .video-frame__hint{color:rgba(243,240,233,.78)}

.hero__bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px 40px; flex:none;
  border-top:1px solid var(--hair); padding-top:24px}
.hero__ctas{display:flex; align-items:center; gap:clamp(10px,1.6vw,24px); flex-wrap:wrap}
.hero__rule{width:1px; height:26px; background:var(--hair)}
.hero__claim{color:var(--fg-low)}

.scroll-hint{position:absolute; right:14px; top:52%; transform:translateY(-50%); z-index:3; display:flex; align-items:center;
  gap:12px; color:var(--fg-low); writing-mode:vertical-rl}
@media (max-width:1560px){.scroll-hint{display:none}}
.scroll-hint i{display:block; width:1px; height:56px; background:linear-gradient(180deg,var(--acc),transparent); animation:hintRun 2.4s var(--e-io) infinite}
@keyframes hintRun{0%{transform:scaleY(0); transform-origin:top} 45%{transform:scaleY(1); transform-origin:top}
  55%{transform:scaleY(1); transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom}}

/* ---------- 08 LÖSUNG ---------- */
.solution__layout{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(40px,7vw,120px)}
.solution__sticky{position:sticky; top:22vh; align-self:start}
.solution__sticky .micro-label{margin-bottom:26px}
.solution__sticky .h2{margin-bottom:28px}
.solution__progress{display:flex; align-items:center; gap:16px; margin-top:42px}
.sp-track{width:120px; height:1px; background:var(--hair); position:relative; display:block}
.sp-track i{position:absolute; inset:0 auto 0 0; width:33%; background:var(--acc); display:block; transition:width .5s var(--e-out)}
.sp-count{color:var(--fg-low)} .sp-count b{color:var(--acc); font-weight:500}

.solution__steps{display:flex; flex-direction:column; gap:clamp(56px,8vw,120px); padding-top:8vh}
.story{position:relative; padding-left:clamp(56px,7vw,96px); opacity:.32; transition:opacity .7s var(--e-out)}
.story.is-on{opacity:1}
.story__num{position:absolute; left:0; top:4px; color:var(--fg-low); transition:color .5s}
.story.is-on .story__num{color:var(--acc)}
.story__icon{width:60px; height:60px; margin-bottom:26px; color:var(--fg); position:relative}
.story__icon::before{content:""; position:absolute; inset:-16px -16px; border:1px solid var(--hair); border-radius:2px;
  transform:scale(.9); opacity:0; transition:transform .6s var(--e-out), opacity .6s}
.story.is-on .story__icon::before{transform:scale(1); opacity:1}
.story__icon .ic{stroke-width:1.2}
.story.is-on .story__icon{color:var(--acc)}
.story h3{font-family:var(--f-display); font-size:clamp(1.45rem,2.5vw,2.05rem); line-height:1.14; letter-spacing:-.025em; margin-bottom:16px;
  font-variation-settings:"opsz" 60}
.story p{color:var(--fg-mid); max-width:44ch}

/* ---------- 09 LEISTUNGEN ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(6,1fr); grid-auto-flow:dense; gap:1px; background:var(--hair-soft);
  border:1px solid var(--hair-soft)}
.svc{position:relative; grid-column:span 2; padding:clamp(24px,2.4vw,34px); background:var(--ink); overflow:hidden;
  transition:background-color .5s var(--e-io); min-height:210px; display:flex; flex-direction:column}
.svc--lg{grid-column:span 2; min-height:300px; background:var(--ink-2)}
.svc--wide{grid-column:span 4}
.svc--half{grid-column:span 3}
.svc::after{content:""; position:absolute; inset:0; border:1px solid transparent; transition:border-color .5s; pointer-events:none}
.svc:hover{background:rgba(199,151,76,.11)}
.svc:hover::after{border-color:rgba(199,151,76,.34)}
.svc__n{position:absolute; top:clamp(22px,2.2vw,30px); right:clamp(22px,2.2vw,30px); color:var(--fg-low); transition:color .4s}
.svc:hover .svc__n{color:var(--acc)}
.svc__i{width:32px; height:32px; color:var(--fg-mid); margin-bottom:auto; display:block;
  transition:transform .5s var(--e-out), color .4s}
.svc:hover .svc__i{transform:rotate(5deg) scale(1.1); color:var(--acc)}
.svc h3{font-family:var(--f-display); font-size:clamp(1.12rem,1.5vw,1.42rem); letter-spacing:-.02em; margin:36px 0 10px;
  font-variation-settings:"opsz" 40}
.svc--lg h3{font-size:clamp(1.4rem,2vw,1.85rem); margin-top:44px}
.svc p{color:var(--fg-low); font-size:.925rem; line-height:1.56; max-width:34ch; min-height:2.9em; transition:color .4s}
.svc--wide p{max-width:52ch}
.svc:hover p{color:var(--fg-mid)}

/* ---------- 10 TEAMS ---------- */
.panels{display:flex; gap:1px; background:var(--hair); border:1px solid var(--hair); min-height:520px; overflow:hidden}
.panel{flex:0 0 auto; width:20%; background:var(--paper); position:relative; display:flex; flex-direction:column;
  transition:width .8s var(--e-io), background-color .5s}
.panel.is-open{width:60%; background:var(--paper-2)}
.panel__head{display:flex; flex-direction:column; align-items:flex-start; padding:clamp(22px,2.4vw,34px); width:100%; text-align:left; position:relative}
.panel__n{color:var(--acc); margin-bottom:auto}
.panel:not(.is-open) .panel__n{margin-bottom:18px}
.panel__title{display:block; font-size:clamp(1.3rem,2.3vw,2.1rem); letter-spacing:-.028em; margin-top:22px; transition:color .4s}
.panel:not(.is-open) .panel__head{flex:1; justify-content:flex-start}
.panel:not(.is-open) .panel__title{writing-mode:vertical-rl; margin-top:26px; color:var(--fg-mid)}
.panel:not(.is-open):hover .panel__title{color:var(--fg)}
.panel__chev{position:absolute; right:clamp(20px,2.2vw,30px); bottom:clamp(22px,2.4vw,32px); width:22px; height:22px}
.panel__chev::before,.panel__chev::after{content:""; position:absolute; background:var(--acc); transition:transform .5s var(--e-out), opacity .4s}
.panel__chev::before{left:0; right:0; top:50%; height:1.5px}
.panel__chev::after{top:0; bottom:0; left:50%; width:1.5px; margin-left:-.75px}
.panel.is-open .panel__chev::after{transform:scaleY(0)}
.panel.is-open .panel__chev{opacity:.4}
.panel__body{flex:1; overflow:hidden; opacity:0; transition:opacity .5s var(--e-out)}
.panel.is-open .panel__body{opacity:1; transition-delay:.24s}
.panel__inner{padding:0 clamp(22px,2.4vw,34px) clamp(28px,3vw,42px); min-width:320px}
.panel__lede{color:var(--fg-mid); max-width:42ch; margin-bottom:28px; font-size:.98rem}
.panel__list{display:grid; gap:1px; background:var(--hair-soft); border-top:1px solid var(--hair-soft)}
.panel__list li{background:var(--paper-2); padding:14px 4px; display:flex; align-items:baseline; gap:16px; font-size:.98rem;
  transform:translateY(14px); opacity:0}
.panel.is-open .panel__list li{transform:none; opacity:1; transition:transform .6s var(--e-out), opacity .6s}
.panel.is-open .panel__list li:nth-child(1){transition-delay:.30s} .panel.is-open .panel__list li:nth-child(2){transition-delay:.36s}
.panel.is-open .panel__list li:nth-child(3){transition-delay:.42s} .panel.is-open .panel__list li:nth-child(4){transition-delay:.48s}
.panel.is-open .panel__list li:nth-child(5){transition-delay:.54s} .panel.is-open .panel__list li:nth-child(6){transition-delay:.60s}
.panel.is-open .panel__list li:nth-child(7){transition-delay:.66s}
.panel__list i{font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; color:var(--acc); font-style:normal; flex:none}

.chips-block{margin-top:clamp(48px,5vw,76px)}
.chips-block .micro-label{margin-bottom:22px}
.chips{position:relative; display:flex; gap:10px; overflow-x:auto; overscroll-behavior-x:contain;
  padding-bottom:14px; scroll-snap-type:x proximity; scrollbar-width:thin; -webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{height:2px} .chips::-webkit-scrollbar-thumb{background:var(--hair)}
.chip{flex:none; scroll-snap-align:start; display:inline-flex; align-items:center; gap:11px; padding:13px 22px;
  border:1px solid var(--hair); border-radius:100px; font-size:.9rem; white-space:nowrap;
  transition:border-color .35s, background-color .35s, transform .35s var(--e-out); cursor:default}
.chip i{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; color:var(--acc); font-style:normal}
.chip:hover{border-color:var(--acc); background:var(--acc-soft); transform:translateY(-2px)}

.teams__close{margin-top:clamp(40px,4.5vw,64px); font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--fg-mid); max-width:62ch}

/* ---------- 11 PROZESS ---------- */
.process{overflow:hidden; padding-bottom:clamp(60px,7vw,110px)}
.process__head-shell{margin-bottom:clamp(30px,3.6vw,54px)}
.process__head-shell .sec-head{margin-bottom:0}
.process__track{position:relative}
.process__pin{position:relative; z-index:2; overflow-x:hidden}
@supports (overflow:clip){ .process__pin{overflow-x:clip; overflow-clip-margin:0} }
.process__bar{height:1px; background:var(--hair); margin:0 var(--pad) 44px; position:relative}
.process__bar i{position:absolute; inset:0 auto 0 0; width:0; background:var(--acc); display:block; height:1px}
.process__bar i::after{content:""; position:absolute; right:-2px; top:-2px; width:5px; height:5px; border-radius:50%;
  background:var(--acc); box-shadow:0 0 0 4px rgba(199,151,76,.14)}
.process__rail{display:flex; gap:clamp(28px,3vw,52px); padding-inline:var(--pad); will-change:transform}
.step{flex:none; width:min(380px, 74vw); position:relative; padding-top:44px; opacity:.28; transition:opacity .55s var(--e-out)}
.step.is-active{opacity:1}
.step::before{content:""; position:absolute; left:0; right:calc(-1 * clamp(28px,3vw,52px)); top:14px; height:1px; background:var(--hair)}
.step:last-child::before{right:0}
.step__node{position:absolute; left:0; top:9px; width:11px; height:11px; border-radius:50%; border:1px solid var(--hair);
  background:var(--ink); transition:border-color .5s, background-color .5s, transform .5s var(--e-out)}
.step.is-active .step__node{border-color:var(--acc); background:var(--acc); transform:scale(1.15)}
.step__n{display:block; font-size:clamp(2.4rem,4vw,3.6rem); font-family:var(--f-mono); font-weight:400; letter-spacing:-.02em;
  color:var(--fg-low); line-height:1; margin-bottom:22px; transition:color .5s; text-transform:none}
.step.is-active .step__n{color:var(--acc)}
.step h3{font-family:var(--f-display); font-size:clamp(1.35rem,2vw,1.75rem); letter-spacing:-.024em; margin-bottom:14px;
  font-variation-settings:"opsz" 48}
.step p{color:var(--fg-mid); font-size:.96rem; line-height:1.58}

.process__meta{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.6vw,40px);
  margin-top:clamp(40px,5vw,74px); padding-top:26px; border-top:1px solid var(--hair)}
.process__meta span{display:flex; flex-direction:column; gap:9px}
.process__meta i{font-style:normal; color:var(--fg-low); letter-spacing:.13em}
.process__meta b{font-family:var(--f-body); font-size:1rem; font-weight:400; letter-spacing:-.01em;
  text-transform:none; color:var(--fg)}

/* ---------- 12 DASHBOARD ---------- */
.dash__stage{perspective:2200px; position:relative}
.dash__depth{display:grid; transform-style:preserve-3d; transition:transform .2s linear}
.dash__depth > *{grid-area:1/1}
.dash__face{backface-visibility:hidden; -webkit-backface-visibility:hidden}
.dash__face--b{transform:rotateY(180deg)}

.ui{background:var(--ink); border:1px solid rgba(243,240,233,.10); border-radius:5px; overflow:hidden; color:#F3F0E9;
  box-shadow:0 40px 90px -40px rgba(10,11,13,.55), 0 4px 14px -6px rgba(10,11,13,.3)}
.ui__chrome{display:flex; align-items:center; gap:16px; padding:13px 18px; border-bottom:1px solid rgba(243,240,233,.08);
  background:rgba(243,240,233,.028)}
.ui__dots{display:flex; gap:6px}
.ui__dots i{width:8px; height:8px; border-radius:50%; background:rgba(243,240,233,.16)}
.ui__dots i:first-child{background:rgba(199,151,76,.5)}
.ui__path{color:rgba(243,240,233,.4); text-transform:none; letter-spacing:.06em; font-size:10.5px}
.ui__live{margin-left:auto; display:flex; align-items:center; gap:8px; color:rgba(243,240,233,.55)}
.ui__body{display:grid; grid-template-columns:238px 1fr; min-height:520px}
.ui__body--person{grid-template-columns:1fr}

.ui__side{border-right:1px solid rgba(243,240,233,.08); padding:20px 0; background:rgba(243,240,233,.014)}
.ui__side-h{color:rgba(243,240,233,.36); padding:0 20px 16px}
.roster{display:flex; flex-direction:column}
.roster li{display:flex; align-items:center; gap:12px; padding:11px 20px; transition:background-color .3s}
.roster li:hover{background:rgba(243,240,233,.04)}
.roster__t{display:flex; flex-direction:column; line-height:1.25; margin-right:auto; min-width:0}
.roster__t b{font-size:13px; font-weight:500}
.roster__t i{font-style:normal; font-size:11px; color:rgba(243,240,233,.36)}
.roster__more{color:rgba(243,240,233,.3); padding:14px 20px 0; border-top:1px solid rgba(243,240,233,.06); margin-top:10px}
.av{width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(140deg, rgba(199,151,76,.26), rgba(243,240,233,.07));
  border:1px solid rgba(243,240,233,.12); font-family:var(--f-mono); font-size:9.5px; letter-spacing:.04em; color:rgba(243,240,233,.8)}
.av::after{content:attr(data-av)}
.av--xs{width:20px; height:20px; font-size:8px}
.av--lg{width:64px; height:64px; font-size:16px; letter-spacing:.06em}

.ui__main{padding:20px 22px 24px; display:flex; flex-direction:column; gap:18px; min-width:0}
.ui__bar{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.ui__bar-h{color:rgba(243,240,233,.42)} .ui__bar-h b{color:#F3F0E9; font-weight:500}
.ui__bar-r{color:rgba(243,240,233,.3); text-transform:none; letter-spacing:.06em}
.ui__bar-r b{color:var(--acc); font-weight:500}

.tick{display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:rgba(243,240,233,.08);
  border:1px solid rgba(243,240,233,.08); border-radius:3px; overflow:hidden}
.tick__c{background:var(--ink-2); padding:16px 14px; display:flex; flex-direction:column; gap:9px; min-width:0}
.tick__c--acc{background:rgba(199,151,76,.08)}
.tick__l{color:rgba(243,240,233,.36); text-transform:none; letter-spacing:.05em; font-size:10px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.tick__c--acc .tick__l{color:rgba(219,174,99,.7)}

/* Odometer */
.odo{display:inline-flex; align-items:baseline; font-family:var(--f-mono); font-size:clamp(1.2rem,1.85vw,1.7rem);
  font-weight:500; letter-spacing:-.03em; line-height:1.05; color:#F3F0E9}
.tick__c--acc .odo{color:var(--acc-hi)}
.odo__vis{display:inline-flex; align-items:baseline}
.odo__d{display:inline-block; height:1.05em; overflow:hidden; position:relative; vertical-align:baseline}
.odo__s{display:block; will-change:transform}
.odo__s span{display:block; height:1.05em; line-height:1.05}
.odo__fix{display:inline-block}

.chart{border:1px solid rgba(243,240,233,.08); border-radius:3px; padding:16px 16px 12px; background:var(--ink-2)}
.chart__h{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:12px; flex-wrap:wrap}
.chart__h .mono{color:rgba(243,240,233,.36)}
.chart__legend{display:flex; align-items:center; gap:8px; color:rgba(243,240,233,.4); text-transform:none; letter-spacing:.05em}
.lg{width:14px; height:1.5px; display:inline-block; margin-right:2px}
.lg--acc{background:var(--acc)} .lg--mut{background:rgba(243,240,233,.28); margin-left:8px}
.chart__svg{width:100%; height:170px; overflow:visible}
.chart__grid line{stroke:rgba(243,240,233,.055); stroke-width:1}
.chart__area{fill:rgba(199,151,76,.10); opacity:0}
.chart__line{fill:none; stroke:var(--acc); stroke-width:1.8; stroke-linecap:round; vector-effect:non-scaling-stroke}
.chart__line--mut{stroke:rgba(243,240,233,.26); stroke-width:1.4}
.chart__pts circle{fill:var(--ink-2); stroke:var(--acc); stroke-width:1.6; opacity:0}
.chart__x{display:flex; justify-content:space-between; color:rgba(243,240,233,.28); margin-top:8px; text-transform:none}

.feed{border-top:1px solid rgba(243,240,233,.08); padding-top:16px}
.feed__h{color:rgba(243,240,233,.32); margin-bottom:12px}
.feed__list{display:flex; flex-direction:column; gap:2px}
.feed__list li{display:flex; align-items:center; gap:12px; font-size:12.5px; color:rgba(243,240,233,.62); padding:7px 0}
.feed__list li b{color:#F3F0E9; font-weight:500}
.feed__list .t{color:var(--acc); flex:none; text-transform:none}

.person{padding:clamp(24px,3vw,42px); display:flex; flex-direction:column; gap:clamp(24px,3vw,38px); justify-content:center; height:100%}
.person__id{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.person__id h3{font-family:var(--f-display); font-size:clamp(1.5rem,2.4vw,2.1rem); letter-spacing:-.026em}
.person__id .mono{color:rgba(243,240,233,.38); margin-top:6px}
.person__badge{margin-left:auto; display:inline-flex; align-items:center; gap:9px; padding:8px 14px; border-radius:100px;
  border:1px solid rgba(111,169,107,.34); color:rgba(243,240,233,.72); text-transform:none; letter-spacing:.06em}
.kpi{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(243,240,233,.08);
  border:1px solid rgba(243,240,233,.08); border-radius:3px; overflow:hidden}
.kpi__c{background:var(--ink-2); padding:20px 20px 18px; display:flex; flex-direction:column; gap:10px; position:relative; min-height:132px}
.kpi__c--acc{background:rgba(199,151,76,.075)}
.kpi__l{color:rgba(243,240,233,.36); text-transform:none; letter-spacing:.05em}
.kpi__v{font-family:var(--f-mono); font-size:clamp(1.4rem,2.1vw,1.9rem); font-weight:500; letter-spacing:-.03em; color:#F3F0E9;
  display:flex; align-items:baseline; gap:2px}
.kpi__v .u{font-family:var(--f-body); font-size:.5em; letter-spacing:0; color:rgba(243,240,233,.45); margin:0 .34em 0 .1em}
.kpi__c--acc .kpi__v,.kpi__c--acc .odo{color:var(--acc-hi)}
.spark{display:flex; align-items:flex-end; gap:4px; height:34px; margin-top:auto}
.spark i{flex:1; height:var(--h); background:linear-gradient(180deg,var(--acc),rgba(199,151,76,.22)); border-radius:1px;
  transform:scaleY(0); transform-origin:bottom}
.is-inview .spark i{transform:scaleY(1); transition:transform .8s var(--e-out)}
.is-inview .spark i:nth-child(2){transition-delay:.05s} .is-inview .spark i:nth-child(3){transition-delay:.1s}
.is-inview .spark i:nth-child(4){transition-delay:.15s} .is-inview .spark i:nth-child(5){transition-delay:.2s}
.is-inview .spark i:nth-child(6){transition-delay:.25s} .is-inview .spark i:nth-child(7){transition-delay:.3s}
.is-inview .spark i:nth-child(8){transition-delay:.35s} .is-inview .spark i:nth-child(9){transition-delay:.4s}
.kpi__c .ring{position:absolute; right:18px; bottom:16px; width:44px; height:44px; display:grid; place-items:center}
.kpi__c .ring svg{width:44px; height:44px; transform:rotate(-90deg)}
.kpi__c .ring circle{fill:none; stroke-width:2.4}
.ring__bg{stroke:rgba(243,240,233,.10)}
.ring__fg{stroke:var(--acc); stroke-linecap:round; stroke-dasharray:113.1; stroke-dashoffset:113.1;
  transition:stroke-dashoffset 1.2s var(--e-out)}
.is-inview .ring__fg{stroke-dashoffset:calc(113.1 - 113.1 * var(--p) / 100)}
.kpi__c .ring b{position:absolute; font-family:var(--f-mono); font-size:8.5px; letter-spacing:.04em; color:rgba(243,240,233,.5); font-weight:400}
.person__foot{display:flex; gap:32px; flex-wrap:wrap; border-top:1px solid rgba(243,240,233,.08); padding-top:20px}
.person__foot .mono{color:rgba(243,240,233,.32); text-transform:none; letter-spacing:.06em}

.dash__switch{display:flex; align-items:center; gap:14px; justify-content:center; margin-top:26px; color:var(--fg-low)}
.dash__switch span{transition:color .4s}
.dash__switch span.is-on{color:var(--acc)}
.dash__switch-rail{width:54px; height:1px; background:var(--hair); position:relative}
.dash__switch-rail i{position:absolute; top:-2px; left:0; width:5px; height:5px; border-radius:50%; background:var(--acc);
  transition:transform .5s var(--e-out)}

.quote{margin:clamp(56px,7vw,104px) 0 0; position:relative; max-width:72ch; padding:0 0 0 clamp(30px,5vw,72px)}
.quote__mark{position:absolute; left:-.06em; top:-.24em; font-size:clamp(120px,16vw,220px); line-height:1; color:var(--fg); opacity:.08}
.quote p{font-family:var(--f-display); font-style:italic; font-size:clamp(1.2rem,2.1vw,1.55rem); line-height:1.46; letter-spacing:-.02em;
  font-variation-settings:"opsz" 60}

/* ---------- 13 TAGESAUFGABEN ---------- */
.tasks__layout{display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(36px,6vw,96px); align-items:start}
.tasks__intro .micro-label{margin-bottom:26px}
.tasks__intro .h2{margin-bottom:26px}
.tasks__hint{margin-top:34px; color:var(--acc); display:flex; align-items:center; gap:10px}
.tasks__hint::before{content:""; width:22px; height:1px; background:var(--acc)}

.tasklist{border:1px solid var(--hair); border-radius:3px; background:var(--paper-2); overflow:hidden}
.tasklist__head{display:flex; justify-content:space-between; align-items:center; padding:18px 22px; color:var(--fg-low)}
.tasklist__count b{color:var(--acc); font-weight:500}
.tasklist__bar{height:2px; background:var(--hair-soft); position:relative}
.tasklist__bar i{position:absolute; inset:0 auto 0 0; width:0; background:var(--acc); display:block; transition:width .55s var(--e-out)}
.task + .task{border-top:1px solid var(--hair-soft)}
.task button{display:flex; align-items:center; gap:16px; width:100%; text-align:left; padding:20px 22px;
  transition:background-color .35s, transform .45s var(--e-out)}
.task button:hover{background:rgba(19,21,26,.03)}
.task__box{width:22px; height:22px; flex:none; border:1px solid var(--hair); border-radius:2px; display:grid; place-items:center;
  transition:border-color .35s, background-color .35s}
.task__box svg{width:15px; height:15px}
.tick-path{fill:none; stroke:var(--acc); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .45s var(--e-out)}
.task button:hover .tick-path{stroke-dashoffset:0}
.task button:hover .task__box{border-color:var(--acc)}
.task__n{color:var(--fg-low); flex:none}
.task__t{display:flex; flex-direction:column; gap:3px; min-width:0; margin-right:auto}
.task__t b{font-weight:500; font-size:1rem; transition:opacity .4s}
.task__t i{font-style:normal; color:var(--fg-mid); font-size:.92rem}
.task__tag{color:var(--fg-low); flex:none; padding:5px 10px; border:1px solid var(--hair); border-radius:2px}
.task__tag--acc{color:var(--acc); border-color:rgba(199,151,76,.4)}
.task.is-done button{transform:translateX(10px)}
.task.is-done .task__box{background:var(--acc-soft); border-color:var(--acc)}
.task.is-done .tick-path{stroke-dashoffset:0}
.task.is-done .task__t b,.task.is-done .task__t i{text-decoration:line-through; opacity:.42}

.tasks__close{margin-top:clamp(48px,5.5vw,80px); font-family:var(--f-display); font-size:clamp(1.3rem,3vw,2.2rem);
  letter-spacing:-.026em; line-height:1.24; font-variation-settings:"opsz" 72}
.uw{position:relative; display:inline-block; white-space:nowrap}
.uw::after{content:""; position:absolute; left:0; right:0; bottom:-.1em; height:2px; background:var(--acc);
  transform:scaleX(0); transform-origin:left; transition:transform .7s var(--e-out)}
.tasks__close.is-inview .uw::after{transform:scaleX(1)}
.tasks__close.is-inview .uw:nth-child(2)::after{transition-delay:.16s}
.tasks__close.is-inview .uw:nth-child(3)::after{transition-delay:.32s}

/* ---------- 14 ALERTS & AI ---------- */
.alerts{overflow:hidden}
.alerts__net{position:absolute; inset:0; z-index:0; opacity:.4; pointer-events:none; display:grid; place-items:center}
.alerts__net svg{width:min(1100px,120%); height:auto; overflow:visible}
.net__edges line{stroke:rgba(243,240,233,.10); stroke-width:1}
.net__nodes circle{fill:rgba(243,240,233,.28)}
.net__nodes circle.is-acc{fill:var(--acc)}

.alerts__grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.6vw,34px)}
.alert{border:1px solid var(--hair); border-radius:3px; padding:clamp(24px,2.8vw,36px); background:rgba(16,18,22,.72);
  backdrop-filter:blur(10px); opacity:0; transform:translateX(40px)}
.is-inview .alert{opacity:1; transform:none; transition:opacity .8s var(--e-out), transform .9s var(--e-out)}
.is-inview .alert:nth-child(2){transition-delay:.18s}
.alert--warn{border-color:rgba(201,122,69,.3)}
.alert--ai{border-color:rgba(199,151,76,.26)}
.alert__h{display:flex; align-items:center; gap:12px; padding-bottom:18px; border-bottom:1px solid var(--hair); margin-bottom:22px}
.alert__h svg{width:18px; height:18px; flex:none; color:var(--acc)}
.alert--warn .alert__h svg{color:var(--warn)}
.alert__h .mono{color:var(--fg-mid)}
.alert__time{margin-left:auto; color:var(--fg-low) !important; text-transform:none; letter-spacing:.06em}
.alert__metric{font-family:var(--f-display); font-size:clamp(1.35rem,2.2vw,1.85rem); letter-spacing:-.024em; margin-bottom:18px;
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; font-variation-settings:"opsz" 48}
.delta{font-family:var(--f-mono); font-size:.62em; letter-spacing:.02em; padding:5px 10px; border-radius:2px}
.delta--down{color:var(--warn); background:rgba(201,122,69,.14)}
.alert__body{color:var(--fg-mid); font-size:.96rem}
.alert__quote{margin:14px 0 20px !important; font-family:var(--f-display); font-style:italic; font-size:clamp(1.02rem,1.6vw,1.24rem);
  color:var(--acc-hi); line-height:1.42; letter-spacing:-.015em}
.alert__quote .q{opacity:0; display:inline-block; transform:translateY(6px)}
.is-inview .alert__quote .q{opacity:1; transform:none; transition:opacity .5s .7s, transform .5s .7s var(--e-out)}
.alert__action{color:var(--fg-mid); font-size:.96rem; padding-top:18px; border-top:1px solid var(--hair-soft)}
.alert__insights{display:flex; flex-direction:column; gap:14px}
.alert__insights li{font-size:.99rem; color:var(--fg-mid); line-height:1.5; min-height:1.5em}
.alert__insights li b{color:var(--fg); font-weight:500}
.alert__insights .delta{display:inline-block; margin-right:6px}
.alert__caret{margin-top:20px !important}
.caret{display:inline-block; width:8px; height:15px; background:var(--acc); animation:blink 1.1s steps(2) infinite; vertical-align:middle}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.alerts__sub{margin-top:clamp(56px,6vw,88px); font-size:clamp(1.5rem,3vw,2.4rem); letter-spacing:-.028em}
.alerts__note{margin-top:20px !important; color:var(--fg-mid); max-width:62ch}

/* ---------- 15 MODELLE ---------- */
.models__grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.2vw,30px); align-items:start}
.model{border:1px solid var(--hair); border-radius:3px; padding:clamp(26px,2.8vw,38px); background:var(--paper-2);
  display:flex; flex-direction:column; gap:18px; position:relative; transform-style:preserve-3d;
  transition:box-shadow .5s var(--e-out), background-color .5s, border-color .5s; will-change:transform}
.model:hover{background:#FBF9F5; border-color:rgba(199,151,76,.4); box-shadow:0 34px 70px -34px rgba(19,21,26,.36)}
.model--hero{background:var(--ink); color:#F3F0E9; border-color:transparent; margin-top:-24px; padding-block:clamp(34px,3.4vw,52px)}
.model--hero:hover{background:var(--ink-2); border-color:rgba(199,151,76,.5); box-shadow:0 44px 90px -40px rgba(19,21,26,.5)}
.model__k{color:var(--acc)}
.model--hero .model__k{color:var(--acc-hi)}
.model h3{font-size:clamp(1.42rem,2.2vw,1.95rem); letter-spacing:-.028em; line-height:1.08}
.model__meta{color:var(--fg-low); text-transform:none; letter-spacing:.06em; font-size:10.5px}
.model--hero .model__meta{color:rgba(243,240,233,.42)}
.model__viz{width:56px; height:56px; color:var(--acc); margin:6px 0}
.model__viz .ic{stroke-width:1.2}
.model__desc{color:var(--fg-mid); font-size:.97rem; line-height:1.58}
.model--hero .model__desc{color:rgba(243,240,233,.68)}
.model__modes{display:flex; flex-direction:column; gap:1px; background:rgba(243,240,233,.08); border-radius:2px; overflow:hidden}
.model__modes li{background:var(--ink-2); padding:14px 16px; font-size:.92rem; color:rgba(243,240,233,.62); line-height:1.55}
.model__modes li .acc{margin-right:9px}
.model__modes b{color:#F3F0E9; font-weight:500}
.model__list{display:grid; gap:9px; text-transform:none; letter-spacing:.05em; font-size:11px; color:var(--fg-mid)}
.model__list li{display:flex; align-items:center; gap:11px}
.model__list li::before{content:""; width:4px; height:4px; border-radius:50%; background:var(--acc); flex:none}
.model__link{margin-top:auto; padding-top:8px; display:inline-flex; align-items:center; gap:9px; align-self:flex-start; font-size:.95rem}
.model__link .ic{width:15px; height:15px; transition:transform .4s var(--e-out)}
.model__link:hover .ic{transform:translateX(5px)}
.models__close{margin-top:clamp(48px,5.5vw,80px); font-size:clamp(1.3rem,2.6vw,2.05rem); letter-spacing:-.026em; line-height:1.22}

/* ---------- 16 WARUM SERBIEN ---------- */
.why__layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,96px); align-items:start}
.why__left{position:relative}
.why__canvas{position:relative; aspect-ratio:4/3; border:1px solid var(--hair); border-radius:3px; overflow:hidden;
  margin-bottom:clamp(32px,4vw,52px); background:linear-gradient(160deg,#0D0F13,#15181F)}
.why__scene{position:absolute; inset:0; opacity:0; transform:scale(1.04); transition:opacity .8s var(--e-out), transform 1.1s var(--e-out)}
.why__scene.is-on{opacity:1; transform:scale(1)}
.scene{width:100%; height:100%}
.scene .s-l{fill:none; stroke:rgba(243,240,233,.34); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round}
.scene .s-l--faint{stroke:rgba(243,240,233,.12)}
.scene .s-d circle{fill:var(--acc)}
.why__grain{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 80% at 50% 40%, transparent 30%, rgba(10,11,13,.7) 100%)}
.why__left .micro-label{margin-bottom:24px}
.why__left .h2{margin-bottom:26px}
.why__text{color:var(--fg-mid); max-width:48ch}
.why__text + .why__text{margin-top:18px !important}

.why__sources{display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin-top:26px !important;
  color:var(--fg-low); padding-top:20px; border-top:1px solid var(--hair-soft)}
.why__sources a{display:inline-flex; align-items:center; gap:7px; color:var(--fg-mid); transition:color .3s}
.why__sources a:hover{color:var(--acc)}
.ic.ext{width:11px; height:11px; flex:none; opacity:.7}
.foot__social{display:flex; gap:12px; margin-top:18px}
.foot__social a{width:38px; height:38px; border:1px solid var(--hair); border-radius:2px; display:grid; place-items:center;
  transition:border-color .35s, color .35s, transform .35s var(--e-out); color:var(--fg-mid)}
.foot__social a:hover{border-color:var(--acc); color:var(--acc); transform:translateY(-2px)}
.foot__social .ic{width:18px; height:18px}
.why__list{display:flex; flex-direction:column; border-top:1px solid var(--hair)}
.wl{display:flex; align-items:flex-start; gap:20px; padding:clamp(22px,2.4vw,30px) 0; border-bottom:1px solid var(--hair);
  position:relative; cursor:default; transition:padding-left .5s var(--e-out)}
.wl::before{content:""; position:absolute; left:-24px; top:0; bottom:0; width:1px; background:var(--acc);
  transform:scaleY(0); transform-origin:top; transition:transform .55s var(--e-out)}
.wl.is-active::before{transform:scaleY(1)}
.wl.is-active{padding-left:12px}
.wl__i{width:30px; height:30px; flex:none; color:var(--fg-low); transition:color .45s; margin-top:2px}
.wl.is-active .wl__i{color:var(--acc)}
.wl__i .ic{stroke-width:1.3}
.wl h3{font-family:var(--f-display); font-size:clamp(1.12rem,1.6vw,1.42rem); letter-spacing:-.022em; margin-bottom:8px;
  font-variation-settings:"opsz" 40}
.wl p{color:var(--fg-low); font-size:.94rem; line-height:1.55; max-width:42ch; transition:color .45s}
.wl.is-active p{color:var(--fg-mid)}
.wl__n{color:var(--fg-low); margin-left:auto; flex:none; transition:color .45s}
.wl.is-active .wl__n{color:var(--acc)}

/* ---------- 17 USPs ---------- */
.usp__stack{display:flex; flex-direction:column; gap:clamp(26px,3.4vw,48px); border-top:1px solid var(--hair); padding-top:clamp(36px,4vw,56px)}
.usp__line{font-size:clamp(1.15rem,2.35vw,1.95rem); line-height:1.28; letter-spacing:-.026em; max-width:26ch;
  font-variation-settings:"opsz" 60}
.usp__line:nth-child(even){margin-left:auto; text-align:right}
.usp__a{color:var(--fg-low); display:block}
.usp__b{color:var(--fg); display:block; margin-top:.16em; position:relative}
.usp__b::after{content:""; position:absolute; left:0; right:0; bottom:-.14em; height:1px; background:var(--acc);
  transform:scaleX(0); transform-origin:left; transition:transform .9s var(--e-out) .25s}
.usp__line:nth-child(even) .usp__b::after{transform-origin:right}
.usp__line.is-inview .usp__b::after{transform:scaleX(1)}
.usp__line.is-inview .usp__b{color:var(--fg)}

/* ---------- 17b FAQ ---------- */
.faq__list{border-top:1px solid var(--hair)}
.qa{border-bottom:1px solid var(--hair)}
.qa summary{display:flex; align-items:flex-start; gap:clamp(16px,2vw,28px); padding:clamp(22px,2.4vw,30px) 0;
  cursor:pointer; list-style:none; position:relative; transition:color .35s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--acc)}
.qa summary:focus-visible{outline:2px solid var(--acc); outline-offset:4px}
.qa__n{color:var(--acc); flex:none; padding-top:.42em}
.qa__q{font-family:var(--f-display); font-size:clamp(1.08rem,1.75vw,1.5rem); letter-spacing:-.022em; line-height:1.26;
  margin-right:auto; font-variation-settings:"opsz" 44}
.qa__ico{flex:none; width:20px; height:20px; margin-top:.34em; position:relative}
.qa__ico::before,.qa__ico::after{content:""; position:absolute; background:var(--acc); transition:transform .45s var(--e-out)}
.qa__ico::before{left:0; right:0; top:50%; height:1.5px; margin-top:-.75px}
.qa__ico::after{top:0; bottom:0; left:50%; width:1.5px; margin-left:-.75px}
.qa[open] .qa__ico::after{transform:scaleY(0)}
.qa[open] .qa__q{color:var(--acc)}
.qa__a{padding:0 0 clamp(24px,2.6vw,34px) calc(clamp(16px,2vw,28px) + 2.6em)}
.qa__a p{color:var(--fg-mid); max-width:76ch; font-size:1rem; line-height:1.66}
.qa[open] .qa__a{animation:qaIn .5s var(--e-out)}
@keyframes qaIn{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}
.faq__close{margin-top:clamp(36px,4vw,56px); color:var(--fg-mid); font-size:1.02rem}

/* ---------- 18 SKALIERUNG ---------- */
.scale__stage{position:relative; min-height:clamp(300px,42vh,460px); display:grid; place-items:center; margin-top:clamp(24px,4vw,56px)}
.scale__dots{display:grid; grid-template-columns:repeat(10,1fr); gap:clamp(12px,1.8vw,26px); width:min(680px,100%); justify-items:center}
.scale__dots i{width:clamp(8px,1.1vw,13px); height:clamp(8px,1.1vw,13px); border-radius:50%; background:var(--fg);
  opacity:0; transform:scale(0)}
.scale__dots i.is-on{opacity:1; transform:scale(1)}
.scale__dots i.is-first{background:var(--acc)}
.scale__dots i.is-ghost{background:none; border:1px solid var(--hair)}
.scale__steps{display:flex; gap:22px; justify-content:center; margin-top:clamp(30px,4vw,54px); color:var(--fg-low)}
.scale__steps span{transition:color .4s, transform .4s var(--e-out)}
.scale__steps span.is-on{color:var(--acc); transform:scale(1.35)}
.scale__close{margin-top:clamp(36px,4vw,56px); text-align:center; font-size:clamp(1.25rem,2.4vw,1.9rem); letter-spacing:-.026em}

/* ---------- 19 CTA + FOOTER ---------- */
.cta{overflow:hidden}
.cta__aura{position:absolute; left:50%; bottom:-40%; width:110vw; height:80vw; max-height:900px; transform:translateX(-50%); z-index:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(199,151,76,.14), rgba(199,151,76,.03) 42%, transparent 68%)}
.cta .micro-label{margin-bottom:28px}
.cta .h1{margin-bottom:clamp(44px,5vw,72px)}
.cta__layout{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(40px,6vw,96px); align-items:start}
.cta__form{max-width:640px}
.cta__next{border-left:1px solid var(--hair); padding-left:clamp(22px,2.6vw,40px)}
.cta__next .micro-label{margin-bottom:26px}
.nextlist{display:flex; flex-direction:column; gap:26px}
.nextlist li{display:flex; gap:18px}
.nextlist .mono{color:var(--acc); flex:none; padding-top:3px}
.nextlist b{display:block; font-weight:500; font-size:1rem; margin-bottom:6px}
.nextlist p{color:var(--fg-low); font-size:.93rem; line-height:1.55}
.cta__direct{margin-top:clamp(30px,3.4vw,44px); padding-top:26px; border-top:1px solid var(--hair);
  display:flex; flex-direction:column; align-items:flex-start; gap:9px}
.cta__direct .mono{color:var(--fg-low); margin-bottom:6px}
.cta__direct a{font-size:.96rem}
.field{position:relative; padding-bottom:16px; margin-bottom:30px}
.field label{display:block; font-size:.94rem; color:var(--fg-mid); margin-bottom:12px}
.field input{width:100%; background:none; border:0; padding:8px 0; font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--fg);
  font-family:var(--f-body)}
.field input::placeholder{color:var(--fg-low)}
.field input:focus{outline:none}
.field__line{position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--hair)}
.field__line::after{content:""; position:absolute; inset:0; background:var(--acc); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--e-io)}
.field input:focus ~ .field__line::after,.field input:not(:placeholder-shown) ~ .field__line::after{transform:scaleX(1)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(22px,3vw,44px)}
.field__opt{font-size:.78em; color:var(--fg-low); letter-spacing:.02em}
.field abbr{color:var(--acc); text-decoration:none; border:0}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.consent{display:flex; align-items:flex-start; gap:14px; cursor:pointer; margin-top:8px; max-width:62ch}
.consent input{position:absolute; opacity:0; width:0; height:0}
.consent__box{flex:none; width:22px; height:22px; margin-top:1px; border:1px solid var(--hair); border-radius:2px;
  display:grid; place-items:center; transition:border-color .35s, background-color .35s}
.consent__box svg{width:15px; height:15px}
.consent:hover .consent__box{border-color:var(--acc)}
.consent input:focus-visible + .consent__box{outline:2px solid var(--acc); outline-offset:3px}
.consent input:checked + .consent__box{background:var(--acc-soft); border-color:var(--acc)}
.consent input:checked + .consent__box .tick-path{stroke-dashoffset:0}
.consent__t{font-size:.92rem; color:var(--fg-mid); line-height:1.55}
.consent__t a{color:var(--acc); text-decoration:underline; text-underline-offset:3px}
.consent.is-invalid .consent__box{border-color:var(--warn)}

.cta__status{transition:color .3s}
.cta__status.is-error{color:var(--warn) !important}
.btn.is-busy{pointer-events:none; opacity:.65}
.btn.is-busy > span::after{content:""; display:inline-block; width:9px; height:9px; margin-left:10px;
  border:1.5px solid currentColor; border-top-color:transparent; border-radius:50%; animation:spin .7s linear infinite;
  vertical-align:-1px}
@keyframes spin{to{transform:rotate(360deg)}}

.cta__actions{display:flex; flex-wrap:wrap; align-items:center; gap:clamp(12px,1.6vw,22px); margin-top:clamp(30px,3.4vw,46px)}
.cta__status{margin-top:20px !important; color:var(--acc); min-height:1.4em; text-transform:none; letter-spacing:.06em}
.cta__sub{margin-top:clamp(40px,4.5vw,64px) !important; color:var(--fg-mid); max-width:62ch; font-size:1.02rem}

.foot{padding-block:clamp(56px,6vw,88px) 34px; border-top:1px solid var(--hair)}
.foot__claim{display:flex; flex-wrap:wrap; align-items:center; gap:clamp(10px,1.6vw,20px); color:var(--fg-low);
  font-size:clamp(11px,1.3vw,14px); letter-spacing:.24em; padding-bottom:clamp(40px,4.5vw,64px)}
.fdot{width:4px; height:4px; border-radius:50%; background:var(--fg-low); transition:background-color .5s, transform .5s var(--e-out)}
.fdot.is-lit{background:var(--acc); transform:scale(1.5)}
.foot__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,60px); padding-block:clamp(36px,4vw,56px);
  border-top:1px solid var(--hair)}
.foot__brand img{width:170px; height:auto; opacity:.94}
.foot__brand p{margin-top:16px !important; color:var(--fg-low); font-size:.92rem}
.foot__nav,.foot__contact{display:flex; flex-direction:column; gap:11px; align-items:flex-start}
.foot__nav .mono,.foot__contact .mono{color:var(--fg-low); margin-bottom:6px}
.foot__nav a{color:var(--fg-mid); font-size:.94rem; transition:color .3s}
.foot__nav a:hover{color:var(--acc)}
.foot__contact a{font-size:.94rem}
.foot__addr{color:var(--fg-low); font-size:.9rem; margin-top:6px !important}
.foot__bar{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--hair); padding-top:26px}
.foot__bar .mono{color:var(--fg-low)}
.foot__legal{display:flex; gap:22px}
.foot__legal a{color:var(--fg-low); font-size:.88rem; transition:color .3s}
.foot__legal a:hover{color:var(--fg-mid)}

/* ---------- 19b UNTERSEITEN (Recht, 404) ---------- */
body.page{background:var(--paper)}
/* Unterseiten nutzen denselben Header wie die Startseite. Er liegt fest über
   dem Inhalt, deshalb hier der Abstand — und er muss auf hellem Grund immer
   deckend sein, sonst verschwindet das helle Logo. */
.page .nav{background:rgba(10,11,13,.94); backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3); border-bottom-color:rgba(243,240,233,.09)}
.page .nav.is-hidden{transform:none}

.legal{position:relative; padding-block:clamp(136px,13vw,176px) clamp(96px,11vw,168px)}
.crumbs{display:flex; align-items:center; gap:10px; color:var(--fg-low); margin-bottom:clamp(30px,4vw,52px)}
.crumbs a{color:var(--fg-mid); transition:color .3s}
.crumbs a:hover{color:var(--acc)}
.crumbs span[aria-hidden]{opacity:.4}
.legal__head{max-width:36ch; margin-bottom:clamp(40px,5vw,72px)}
.legal__head .micro-label{margin-bottom:22px}
.legal__head h1{font-size:clamp(2.1rem,4.6vw,3.7rem); line-height:1.04; letter-spacing:-.03em}
.legal__body{max-width:78ch}
.legal__body .legal__lead{font-size:clamp(1.06rem,1.5vw,1.22rem); color:var(--fg); line-height:1.62; margin-bottom:0}
.legal__body .legal__meta{color:var(--fg-low); margin-top:16px; margin-bottom:0}
.legal__body h2{font-family:var(--f-display); font-size:clamp(1.25rem,2vw,1.65rem); letter-spacing:-.024em;
  line-height:1.2; margin:clamp(38px,4.4vw,60px) 0 16px; font-variation-settings:"opsz" 48;
  padding-top:clamp(22px,2.6vw,32px); border-top:1px solid var(--hair)}
.legal__body h2:first-of-type{margin-top:clamp(30px,3.4vw,44px)}
.legal__body p{color:var(--fg-mid); line-height:1.68; margin-bottom:14px}
.legal__body p b{color:var(--fg); font-weight:500}
.legal__body ul,.legal__body ol{margin:6px 0 18px; padding-left:0; display:flex; flex-direction:column; gap:11px}
.legal__body ul li{color:var(--fg-mid); line-height:1.62; padding-left:26px; position:relative}
.legal__body ul li::before{content:""; position:absolute; left:6px; top:.72em; width:5px; height:5px;
  border-radius:50%; background:var(--acc)}
.legal__body ol{counter-reset:cl}
.legal__body ol li{color:var(--fg-mid); line-height:1.62; padding-left:38px; position:relative; counter-increment:cl}
.legal__body ol li::before{content:"(" counter(cl) ")"; position:absolute; left:0; top:0;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--acc); padding-top:.34em}
.legal__body li b{color:var(--fg); font-weight:500}
.legal__body a:not(.link-u){color:var(--acc)}
.legal__back{margin-top:clamp(48px,5.5vw,80px); padding-top:26px; border-top:1px solid var(--hair)}

.ph{display:inline; background:rgba(199,151,76,.20); color:var(--fg); box-shadow:0 0 0 1px rgba(199,151,76,.45);
  border-radius:2px; padding:1px 6px; font-family:var(--f-mono); font-size:.82em; letter-spacing:.01em}
.note{border:1px solid rgba(199,151,76,.42); background:rgba(199,151,76,.09); border-radius:3px;
  padding:clamp(18px,2vw,24px); margin-bottom:clamp(30px,3.6vw,48px)}
.note p{color:var(--fg-mid); margin:0; font-size:.96rem; line-height:1.6}
.note b{color:var(--fg)}
.legal__body .callout{border-left:2px solid var(--acc); padding:16px 0 16px 22px;
  background:rgba(199,151,76,.06); margin:20px 0 24px}

/* 404 */
.nf{min-height:66vh; display:flex; align-items:center; padding-block:clamp(24px,4vw,56px)}
.nf > div{width:100%; max-width:900px}
.nf p.nf__code{font-family:var(--f-mono); font-size:clamp(4rem,13vw,9rem); line-height:1; color:var(--acc);
  letter-spacing:-.04em; margin-bottom:clamp(22px,3vw,36px); max-width:none}
.nf h1{font-size:clamp(1.9rem,4.2vw,3.2rem); line-height:1.06; letter-spacing:-.03em; margin-bottom:20px}
.nf p{color:var(--fg-mid); max-width:52ch; font-size:1.04rem; margin-bottom:clamp(30px,3.6vw,46px)}
.nf__links{display:flex; flex-wrap:wrap; gap:14px}
.nf__map{margin-top:clamp(44px,5vw,72px); padding-top:30px; border-top:1px solid var(--hair);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:22px 34px}
.nf__map a{color:var(--fg-mid); font-size:.96rem; display:flex; align-items:baseline; gap:12px; transition:color .3s}
.nf__map a:hover{color:var(--acc)}
.nf__map i{font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; color:var(--acc); font-style:normal}

@media (max-width:768px){
  .legal__body ol li{padding-left:32px}
  .ph{word-break:break-word}
}

/* ---------- 22 EINWILLIGUNG ---------- */
.cbox{position:fixed; left:clamp(14px,2.2vw,28px); bottom:clamp(14px,2.2vw,28px); z-index:9800;
  width:min(460px, calc(100vw - clamp(28px,4.4vw,56px)));
  padding-bottom:env(safe-area-inset-bottom, 0px)}
.cbox[hidden]{display:none}
.cbox__inner{background:rgba(16,18,22,.97); backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid rgba(243,240,233,.13); border-radius:4px; color:#F3F0E9;
  padding:clamp(22px,2.4vw,30px); box-shadow:0 40px 90px -30px rgba(0,0,0,.85), 0 2px 10px -4px rgba(0,0,0,.6);
  opacity:0; transform:translateY(18px) scale(.985); transition:opacity .55s var(--e-out), transform .6s var(--e-out)}
.cbox.is-in .cbox__inner{opacity:1; transform:none}
.cbox .micro-label{color:rgba(243,240,233,.45); margin-bottom:16px}
.cbox__title{font-size:clamp(1.16rem,1.6vw,1.4rem); letter-spacing:-.024em; line-height:1.16; margin-bottom:12px;
  font-variation-settings:"opsz" 40}
.cbox__text{font-size:.92rem; line-height:1.6; color:rgba(243,240,233,.66)}
.cbox__text b{color:#F3F0E9; font-weight:500}

/* Kategorien: Schalter direkt auf der ersten Ebene, nicht hinter "Details"
   versteckt — die Aufsichtsbehörden verlangen Transparenz ohne Zwischenklick. */
.cbox__cats{display:flex; flex-direction:column; gap:2px; margin-top:18px}
.cat{display:flex; align-items:flex-start; gap:13px; padding:12px 0; cursor:pointer; position:relative}
.cat + .cat{border-top:1px solid rgba(243,240,233,.07)}
.cat input{position:absolute; opacity:0; width:0; height:0}
.cat__sw{flex:none; width:36px; height:20px; margin-top:1px; border-radius:100px;
  border:1px solid rgba(243,240,233,.24); background:rgba(243,240,233,.05); position:relative;
  transition:background-color .35s, border-color .35s}
.cat__sw::after{content:""; position:absolute; top:50%; left:3px; width:12px; height:12px; margin-top:-6px;
  border-radius:50%; background:rgba(243,240,233,.5); transition:transform .35s var(--e-out), background-color .35s}
.cat:hover .cat__sw{border-color:rgba(243,240,233,.42)}
.cat input:focus-visible + .cat__sw{outline:2px solid var(--acc); outline-offset:3px}
.cat input:checked + .cat__sw{background:var(--acc); border-color:var(--acc)}
.cat input:checked + .cat__sw::after{transform:translateX(16px); background:#0A0B0D}
.cat__t{min-width:0; margin-right:auto}
.cat__t b{display:block; font-size:.92rem; font-weight:500; color:#F3F0E9; margin-bottom:3px}
.cat__t p{font-size:.82rem; line-height:1.5; color:rgba(243,240,233,.5)}
.cat--fixed{cursor:default}
.cat--fixed .cat__sw{background:rgba(199,151,76,.34); border-color:rgba(199,151,76,.44); opacity:.6}
.cat--fixed .cat__sw::after{transform:translateX(16px); background:rgba(243,240,233,.7)}
.cat__state{flex:none; color:rgba(243,240,233,.35); padding-top:3px; font-size:9px}

.cbox__details{margin:16px 0 20px; border-top:1px solid rgba(243,240,233,.1);
  border-bottom:1px solid rgba(243,240,233,.1)}
.cbox__details summary{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 0; cursor:pointer; list-style:none; font-family:var(--f-mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(243,240,233,.55); transition:color .3s}
.cbox__details summary::-webkit-details-marker{display:none}
.cbox__details summary:hover{color:var(--acc)}
.cbox__details summary:focus-visible{outline:2px solid var(--acc); outline-offset:3px}
.cbox__chev{position:relative; width:14px; height:14px; flex:none}
.cbox__chev::before,.cbox__chev::after{content:""; position:absolute; background:var(--acc); transition:transform .4s var(--e-out)}
.cbox__chev::before{left:0; right:0; top:50%; height:1.5px; margin-top:-.75px}
.cbox__chev::after{top:0; bottom:0; left:50%; width:1.5px; margin-left:-.75px}
.cbox__details[open] .cbox__chev::after{transform:scaleY(0)}
.cbox__list{display:flex; flex-direction:column; gap:16px; padding-bottom:18px}
.cline__k{display:flex; align-items:baseline; gap:10px; color:#F3F0E9; margin-bottom:6px}
.cline__k i{font-style:normal; color:var(--acc); letter-spacing:.1em; font-size:9px}
.cline p{font-size:.85rem; line-height:1.55; color:rgba(243,240,233,.55)}
.cline code{font-family:var(--f-mono); font-size:.9em; color:rgba(243,240,233,.75)}

/* Alle drei Schaltflächen identisch gestaltet. Die Aufsichtsbehörden verlangen
   für Ablehnen und Zustimmen gleichwertige Gestaltung — ein hervorgehobener
   Zustimmen-Knopf gilt als unzulässiges Nudging. Der Akzent erscheint bei
   allen erst im Hover. */
.cbox__actions{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.cbox__actions .btn{justify-content:center; padding:14px 6px; font-size:9.5px; letter-spacing:.08em; width:100%;
  background:none; color:#F3F0E9; border:1px solid rgba(243,240,233,.26); text-align:center}
.cbox__actions .btn::before{background:var(--acc)}
.cbox__actions .btn:hover{color:#0A0B0D; border-color:var(--acc)}
.cbox__links{margin-top:16px !important; display:flex; align-items:center; justify-content:center;
  color:rgba(243,240,233,.4)}
.cbox__links a{transition:color .3s}
.cbox__links a:hover{color:var(--acc)}

/* Einstellungen jederzeit widerrufbar */
.foot__pref{font-size:.88rem; color:var(--fg-low); transition:color .3s; padding:0; font-family:inherit;
  letter-spacing:inherit}
.foot__pref:hover{color:var(--acc)}

/* Sperre vor dem Player, solange keine Einwilligung vorliegt */
/* Die Sperre übernimmt den Platz des Players, damit das Fenster seine Grösse
   behält — der leere Rahmen samt Ladekreis wird solange ausgeblendet. */
.lightbox__gate{display:none; place-content:center; text-align:center; gap:18px; padding:clamp(26px,4vw,52px);
  aspect-ratio:16/9; width:100%; border-radius:4px; border:1px solid rgba(243,240,233,.14); background:#0B0D11}
.lightbox__gate.is-on{display:grid}
.lightbox__gate.is-on + .lightbox__frame{display:none}
.lightbox__gate h3{font-family:var(--f-display); font-size:clamp(1.2rem,2vw,1.6rem); letter-spacing:-.024em;
  font-variation-settings:"opsz" 44}
.lightbox__gate p{color:rgba(243,240,233,.6); font-size:.95rem; line-height:1.6; max-width:52ch; margin-inline:auto}
.lightbox__gate .gate__actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:6px}
/* Auch hier keine Hervorhebung der weitergehenden Option. */
.lightbox__gate .gate__actions .btn{background:none; color:#F3F0E9; border:1px solid rgba(243,240,233,.26);
  justify-content:center; min-width:180px}
.lightbox__gate .gate__actions .btn::before{background:var(--acc)}
.lightbox__gate .gate__actions .btn:hover{color:#0A0B0D; border-color:var(--acc)}

@media (max-width:640px){
  .cbox{left:10px; right:10px; bottom:10px; width:auto}
  .cbox__actions{grid-template-columns:1fr}
  .cbox__actions .btn{font-size:10px; letter-spacing:.12em; padding:14px 12px}
  .cbox__title{font-size:1.1rem}
  .cbox__inner{max-height:86svh; overflow-y:auto}
}
@media (prefers-reduced-motion:reduce){
  .cbox__inner{opacity:1; transform:none}
}

/* ---------- LIGHTBOX ---------- */
.lightbox{position:fixed; inset:0; z-index:10000; background:rgba(6,7,9,.94); backdrop-filter:blur(12px);
  display:grid; place-items:center; padding:var(--pad); opacity:0; transition:opacity .45s}
.lightbox[hidden]{display:none}
.lightbox.is-open{opacity:1}
.lightbox__stage{width:min(1180px,100%); transform:scale(.94); opacity:0; transition:transform .6s var(--e-out), opacity .5s}
.lightbox.is-open .lightbox__stage{transform:scale(1); opacity:1}
.lightbox__frame{position:relative; aspect-ratio:16/9; width:100%; overflow:hidden; border-radius:4px;
  border:1px solid rgba(243,240,233,.14); background:#0B0D11}
.lightbox__frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
.lightbox__frame::after{content:""; position:absolute; inset:0; margin:auto; width:34px; height:34px; border-radius:50%;
  border:1.5px solid rgba(243,240,233,.22); border-top-color:var(--acc); animation:spin .8s linear infinite}
.lightbox__frame.is-ready::after{display:none}
.lightbox__legal{margin-top:18px; text-align:center; color:var(--fg-low); text-transform:none; letter-spacing:.06em;
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center}
.lightbox__legal a{color:var(--acc); display:inline-flex; align-items:center; gap:6px}
.lightbox__legal a:hover{text-decoration:underline; text-underline-offset:3px}
.lightbox__close{position:absolute; top:24px; right:24px; display:flex; align-items:center; gap:12px;
  padding:9px 16px 9px 9px; border:1px solid rgba(243,240,233,.22); border-radius:100px;
  transition:border-color .35s, background-color .35s, color .35s; color:rgba(243,240,233,.7)}
.lightbox__close:hover,.lightbox__close:focus-visible{border-color:var(--acc); background:rgba(199,151,76,.14); color:#F3F0E9}
.lightbox__x{position:relative; width:28px; height:28px; flex:none; transition:transform .35s var(--e-out)}
.lightbox__close:hover .lightbox__x{transform:rotate(90deg)}
.lightbox__x span{position:absolute; left:5px; top:13px; width:18px; height:1.5px; background:currentColor}
.lightbox__x span:first-child{transform:rotate(45deg)} .lightbox__x span:last-child{transform:rotate(-45deg)}
.lightbox__esc{letter-spacing:.16em; color:inherit}

/* ---------- 20 RESPONSIVE ---------- */
@media (max-width:1440px){
  .ui__body{min-height:480px}
}
@media (max-width:1180px){
  .hero{min-height:auto}
  .hero__mid{grid-template-columns:1fr; gap:30px}
  .hero__video{display:flex; justify-content:center}
  .hero__mid{--vid-w:calc(min(46svh, 520px) * 16 / 9)}
  .video-frame{max-width:var(--vid-w)}
  .hero__aside{border-left:0; border-top:1px solid var(--hair); padding-left:0; padding-top:24px; max-width:60ch}
  .hero__title .line:nth-child(2){padding-left:0}
  .sec-head__row{grid-template-columns:1fr; gap:22px; align-items:start}
  .sec-head__sub{padding-bottom:0}
  .svc-grid{grid-template-columns:repeat(4,1fr)}
  .svc,.svc--lg,.svc--wide,.svc--half{grid-column:span 2}
  .tick{grid-template-columns:repeat(3,1fr)}
  .models__grid{grid-template-columns:1fr; max-width:640px; margin-inline:auto}
  .model--hero{margin-top:0}
  .why__layout{grid-template-columns:1fr; gap:48px}
  .solution__layout{grid-template-columns:1fr; gap:40px}
  .solution__sticky{position:static}
  .solution__steps{padding-top:0}
  .story{opacity:1}
  .tasks__layout{grid-template-columns:1fr; gap:40px}
  .alerts__grid{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr; gap:36px}
  .cta__layout{grid-template-columns:1fr; gap:48px}
  .field-row{grid-template-columns:1fr; gap:0}
  .cta__next{border-left:0; border-top:1px solid var(--hair); padding-left:0; padding-top:32px}
  .dash__depth{transform:none !important}
  .dash__face--b{transform:none; position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .6s}
  .dash__face--b.is-shown{opacity:1; pointer-events:auto}
  .dash__stage{position:relative}
  .dash__face{backface-visibility:visible; -webkit-backface-visibility:visible}
}
@media (max-width:1024px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .nav__burger{display:block}
  .ui__body{grid-template-columns:1fr; min-height:0}
  .ui__side{border-right:0; border-bottom:1px solid rgba(243,240,233,.08)}
  .roster{flex-direction:row; overflow-x:auto; overscroll-behavior-x:contain; gap:0}
  .roster li{flex:none; flex-direction:column; align-items:flex-start; gap:8px; min-width:140px}
  .roster__more{display:none}
  .kpi{grid-template-columns:repeat(2,1fr)}
  .panels{flex-direction:column; min-height:0}
  .panel,.panel.is-open{width:100%}
  .panel__head{flex-direction:row; align-items:center; gap:16px}
  .panel:not(.is-open) .panel__head{flex:none; justify-content:flex-start}
  .panel:not(.is-open) .panel__title{writing-mode:horizontal-tb; margin-top:0}
  .panel__title{margin-top:0}
  .panel__body{max-height:0; opacity:0; transition:max-height .7s var(--e-io), opacity .4s}
  .panel.is-open .panel__body{max-height:760px; opacity:1}
  .panel__inner{min-width:0}
  .usp__line:nth-child(even){margin-left:0; text-align:left}
  .usp__line{max-width:34ch}
  .quote{padding-left:0}
  .quote__mark{position:static; display:block; font-size:88px; margin-bottom:-.42em; opacity:.12}
}
@media (max-width:768px){
  body{font-size:16px}
  main > section{padding-block:clamp(64px,13vw,96px)}
  .hero{padding-block:112px 44px; min-height:auto}
  .hero__title{font-size:clamp(2.3rem,10vw,3.2rem)}
  .hero__video{display:block}
  .hero__mid{--vid-w:100%}
  .video-frame{max-width:100%}
  .video-frame__play{gap:13px; left:14px; bottom:14px}
  .vf-label{font-size:9.5px; letter-spacing:.14em}
  .vf-label i{font-size:9px}
  .video-frame__hint{font-size:8.5px; letter-spacing:.06em; padding:5px 9px; gap:6px;
    background:rgba(10,11,13,.55)}
  .hero__bar{flex-direction:column; align-items:flex-start; gap:22px}
  .hero__ctas{width:100%; flex-direction:column; align-items:stretch}
  .hero__ctas .btn{justify-content:center}
  .hero__rule{display:none}
  .scroll-hint{display:none}
  .svc-grid{grid-template-columns:1fr}
  .svc,.svc--lg,.svc--wide,.svc--half{grid-column:span 1; min-height:0}
  .svc h3,.svc--lg h3{margin-top:28px}
  .svc__i{margin-bottom:0}
  .tick{grid-template-columns:repeat(2,1fr)}
  .kpi{grid-template-columns:1fr}
  .ui__main{padding:16px}
  .chart__svg{height:130px}
  .person__badge{margin-left:0}
  .process__rail{flex-direction:column; gap:0; padding-inline:var(--pad); transform:none !important}
  .step{width:100%; padding-top:0; padding-left:34px; padding-bottom:38px; opacity:1}
  .step::before{left:5px; right:auto; top:0; bottom:0; width:1px; height:auto}
  .step:last-child::before{bottom:auto; height:20px}
  .step__node{top:4px}
  .step__n{font-size:1.6rem; margin-bottom:10px}
  .process__bar{display:none}
  .process__meta{grid-template-columns:1fr 1fr; gap:22px; margin-top:8px}
  .qa__a{padding-left:0}
  .qa__q{font-size:1.05rem}
  .task button{flex-wrap:wrap; gap:12px; padding:16px}
  .task__tag{margin-left:auto}
  .foot__grid{grid-template-columns:1fr; gap:32px}
  .cta__actions{flex-direction:column; align-items:stretch}
  .cta__actions .btn{justify-content:center}
  .scale__dots{grid-template-columns:repeat(6,1fr)}
  .lightbox__close{top:14px; right:14px; padding:7px 13px 7px 7px; gap:9px}
  .lightbox__esc{font-size:9.5px}
}

/* ---------- 21 REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
  .grain{animation:none}
  .hero__title .line__i{transform:none !important}
  .preloader{display:none}
  .cursor{display:none}
  .story{opacity:1 !important}
  .step{opacity:1 !important}
  .alert{opacity:1 !important; transform:none !important}
  .dash__depth{transform:none !important}
  .scale__dots i{opacity:1 !important; transform:none !important}
  .qa[open] .qa__a{animation:none}
  .btn.is-busy > span::after{animation:none}
}