/* Herkunft: dbl9-mps-site bausteine.html Z. 75-2451 @ a2a55523 (bausteine-v11) */
/* Herkunft: dbl9-mps-site login-kunde.html Z. 2452-3063 @ a2a55523 (bausteine-v11) */
/* Herkunft: dbl9-mps-site bausteine.html Z. 4711-4745 (Baustein 131) @ a2a55523 (bausteine-v11) */
/* Herkunft: dbl9-mps-site bausteine.html Z. 15197-15236 (Baustein 232) @ a2a55523 (bausteine-v11) */
/* Avale 24: umgefärbt durch tools/hole-mps.py (Tokens Blau/Weiß, Rot->Blau-Tabelle). Sonst unverändert. */
/* dbl9 · Version 9.7
CI aus dem Logo: Graphit #424242, Grau #989797, Signalrot #2563eb.
Mobile-first (Basis Smartphone, ab 640 / 980 / 1080 / 1180 px). Ein festes Erscheinungsbild.
Schriften: Plus Jakarta Sans (Headlines), DM Sans (Text und UI). */
:root{
color-scheme:light;
--bg:#f3f6fb; --surface:#fbfcfe; --soft:#e8eef8; --soft-2:#dbe5f4;
--ink:#22314f; --ink-2:#4b5873; --line:#d5dfee; --graphite:#1e3a8a; --gray:#8a9bb8;
--red:#1d4ed8; --red-soft:#e6eefc; --red-on-dark:#7aa7ff;
--night:#16306a; --night-2:#1c3a7a; --night-3:#234488; --night-fg:#eef3fb; --night-mute:#b8c6e6; --night-line:#2d4c8c;
--shadow:0 1px 2px rgba(11,31,77,.06),0 24px 48px -24px rgba(11,31,77,.3);
--f-head:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
--f-body:"DM Sans","Helvetica Neue",Arial,sans-serif;
--t-h1:clamp(42px,7vw,96px); --t-h2:clamp(32px,4.8vw,58px); --t-h3:clamp(22px,2.2vw,28px); --t-h4:19px;
--t-lead:clamp(17px,1.4vw,20px); --t-body:16px; --t-small:14.5px; --t-label:14px;
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
--r-sm:12px; --r-md:18px; --r-lg:28px; --r-pill:999px;
--gutter:24px; --maxw:1760px; --box:8px; --head:68px; --btn:52px;
--ease:cubic-bezier(.16,.84,.24,1);
}
@media (min-width:640px){:root{--gutter:max(32px,5vw);--box:max(12px,1.5vw)}}
@media (min-width:980px){:root{--gutter:clamp(48px,6.667vw,128px);--head:80px;--t-body:17px}}
/* ---------- Basis ---------- */
*{box-sizing:border-box}
*{scrollbar-width:none}
*::-webkit-scrollbar{display:none;width:0;height:0}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--bg);color:var(--ink);font:400 var(--t-body)/1.6 var(--f-body);-webkit-font-smoothing:antialiased;margin:0;overflow-x:clip}
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
/* DBL-K32: hidden gilt immer (sonst zeigen display-Regeln versteckte Elemente, z. B. das CI-Logo für das Druckblatt) */
[hidden]{display:none!important}
h1,h2,h3,h4{margin:0;font-family:var(--f-head);font-weight:600;text-wrap:balance;letter-spacing:-.03em}
p{margin:0;text-wrap:pretty}
button{font:inherit;color:inherit}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);position:relative}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.kicker{display:inline-flex;align-items:center;gap:var(--s3);font:600 15px/1.3 var(--f-body);color:var(--red)}
.kicker::before{content:"";width:24px;height:2px;border-radius:2px;background:currentColor;flex:none}
.on-dark .kicker{color:var(--red-on-dark)}
.h1{font:700 var(--t-h1)/1.02 var(--f-head);letter-spacing:-.045em}
.h2{font:600 var(--t-h2)/1.06 var(--f-head);letter-spacing:-.04em}
.h2 .mute,.h1 .mute{color:var(--graphite)}
.h2 .red,.h1 .red{color:var(--red)}
.on-dark .h2 .mute,.on-dark .h1 .mute{color:#bdbdb8}
.on-dark .h1 .red,.on-dark .h2 .red{color:var(--red-on-dark)}
.lead{font-size:var(--t-lead);line-height:1.6;color:var(--ink-2);max-width:58ch}
.on-dark{color:var(--night-fg)}
.on-dark .lead{color:var(--night-mute)}
section{padding-block:var(--s9);position:relative}
@media (min-width:980px){section{padding-block:var(--s10)}}
.sec-head{display:grid;gap:var(--s4);margin-bottom:var(--s7)}
.sec-head .lead{margin-top:var(--s2)}
@media (min-width:980px){.sec-head{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--s5) var(--s8);align-items:end;margin-bottom:var(--s8)}.sec-head .kicker{grid-column:1/-1}.sec-head .lead{margin-top:0}}
.sec-head.center{text-align:center;justify-items:center}
@media (min-width:980px){.sec-head.center{grid-template-columns:1fr}}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chip{display:inline-flex;align-items:center;gap:var(--s2);height:32px;padding:0 var(--s3);border-radius:var(--r-pill);font:600 var(--t-label)/1 var(--f-body);background:var(--soft);color:var(--ink-2);white-space:nowrap}
.chip .i{width:16px;height:16px}
.on-dark .chip{background:var(--night-3);color:var(--night-mute)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--red-on-dark);animation:pulse 2s infinite}
.feat-grid>*,.proc-grid>*,.case-grid>*,.cta-grid>*,.split>*,.quote-split>*,.trust>*,.band-grid>*,.sec-head>*,.hero-grid>*,.trans-grid>*,.cmp>*{min-width:0}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(122,167,255,.55)}70%,100%{box-shadow:0 0 0 9px rgba(122,167,255,0)}}
/* Spotlight: Licht folgt dem Mauszeiger */
.spot{position:relative;isolation:isolate}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(37,99,235,.10),transparent 60%)}
.on-dark .spot::before,.spot.dark::before,.on-dark.spot::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(122,167,255,.16),transparent 60%)}
.spot:hover::before{opacity:1}
/* Bewegte Lichtflächen in dunklen Bühnen */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:0;isolation:isolate}
:where(.band,.stage,.hero,.sub-hero,.trans,.quality,.cta,section):has(>.aurora){position:relative}
.aurora i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(80px);opacity:.28;mix-blend-mode:screen;animation:drift 26s ease-in-out infinite alternate}
.aurora i:nth-child(1){background:#2563eb;left:-20vmax;top:-30vmax}
.aurora i:nth-child(2){background:#424242;right:-25vmax;top:10%;animation-duration:32s;opacity:.3}
.aurora i:nth-child(3){background:#1e40af;left:30%;bottom:-40vmax;animation-duration:38s;opacity:.22}
@keyframes drift{to{transform:translate3d(8vmax,6vmax,0) scale(1.15)}}
.grid-bg{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%)}
.grid-bg.light{background-image:radial-gradient(rgba(28,28,28,.09) 1px,transparent 1px)}
/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);height:var(--btn);padding:0 var(--s2) 0 var(--s5);border-radius:var(--r-pill);font:600 15px/1 var(--f-body);white-space:nowrap;text-decoration:none;border:0;cursor:pointer;background:var(--ink);color:var(--on-ink);transition:background .3s var(--ease),color .3s var(--ease),transform .35s var(--ease),box-shadow .3s}
.btn .bi{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);transition:transform .45s var(--ease),background .3s}
.btn .bi .i{width:18px;height:18px}
.btn:hover{background:var(--red-fill);color:#fff;box-shadow:0 12px 30px -12px rgba(37,99,235,.6)}
.btn:hover .bi{transform:translateX(3px);background:rgba(255,255,255,.2)}
.btn.light{background:var(--night-fg);color:var(--night)}
.btn.light .bi{background:var(--night);color:var(--night-fg)}
.btn.light:hover{background:var(--red-fill);color:#fff}
.btn.light:hover .bi{background:rgba(255,255,255,.2);color:#fff}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px color-mix(in oklab,currentColor 28%,transparent);padding:0 var(--s5)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--red);background:transparent;color:inherit}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3)}
@media (max-width:639px){.btn-row{width:100%}.btn-row .btn{width:100%;justify-content:space-between}.btn-row .btn.ghost{justify-content:center}}
.arrow-link{width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--ink);text-decoration:none;transition:background .3s,color .3s,transform .45s var(--ease)}
.arrow-link:hover{background:var(--red-fill);color:#fff;transform:rotate(-45deg)}
.on-dark .arrow-link{background:var(--night-3);color:var(--night-fg)}
.on-dark .arrow-link:hover{background:var(--red-fill);color:#fff}
/* ---------- Header ---------- */
.top{position:fixed;left:0;right:0;top:0;z-index:60;padding-top:env(safe-area-inset-top,0px);transition:transform .5s var(--ease),background .4s,color .4s,box-shadow .4s;color:var(--night-fg)}
.top.hide{transform:translateY(-110%)}
.top.solid{background:color-mix(in oklab,var(--bg) 90%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.top .wrap{display:flex;align-items:center;gap:var(--s4);height:var(--head)}
.logo{display:block;flex:none;text-decoration:none;height:24px;width:63px;overflow:hidden;position:relative}
.logo img{height:24px;width:auto;max-width:none;position:absolute;left:0;top:0;transition:opacity .3s}
.logo .dark{opacity:0}
.top.solid .logo .dark{opacity:1}.top.solid .logo .light{opacity:0}
@media (min-width:640px){.logo{height:30px;width:155px}.logo img{height:30px}}
.nav{display:none}
@media (min-width:1180px){.nav{display:flex;gap:2px;margin-inline:auto}}
.nav a{text-decoration:none;font:500 15px/1 var(--f-body);padding:12px 12px;white-space:nowrap;opacity:.82;position:relative;transition:opacity .2s}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--red-on-dark);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.top.solid .nav a::after{background:var(--red)}
.nav a:hover{opacity:1}
.nav a:hover::after{transform:scaleX(1)}
.top-actions{display:flex;gap:var(--s3);align-items:center;margin-left:auto}
@media (min-width:1180px){.top-actions{margin-left:0}}
.hotline{display:inline-flex;align-items:center;gap:var(--s2);text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.hotline .hi{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--red-fill);color:#fff;flex:none}
.hotline .hi .i{width:16px;height:16px}
.hotline .ht{display:grid;line-height:1.15}
.hotline small{font:600 14px/1.2 var(--f-body);opacity:.72}
.hotline b{font:600 14px/1.2 var(--f-body);transition:color .2s}
@media (min-width:640px){.hotline b{font-size:15px}}
.hotline:hover b{color:var(--red-on-dark)}
.top.solid .hotline:hover b{color:var(--red)}
.top .btn{display:none}
@media (min-width:980px){.top .btn{display:inline-flex;background:var(--night-fg);color:var(--night)}.top .btn .bi{background:var(--night);color:var(--night-fg)}.top.solid .btn{background:var(--ink);color:var(--on-ink)}.top.solid .btn .bi{background:rgba(255,255,255,.14);color:#fff}.top .btn:hover,.top.solid .btn:hover{background:var(--red-fill);color:#fff}.top .btn:hover .bi{background:rgba(255,255,255,.2);color:#fff}}
.burger{appearance:none;border:0;background:transparent;color:inherit;width:44px;height:44px;margin-right:-10px;display:grid;place-items:center;cursor:pointer}
.burger .i{width:24px;height:24px}
@media (min-width:1180px){.burger{display:none}}
.menu{position:fixed;inset:0;z-index:70;background:var(--night);color:var(--night-fg);padding:calc(var(--head) + var(--s5)) var(--gutter) var(--s7);display:flex;flex-direction:column;gap:var(--s6);overflow-y:auto;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);visibility:hidden}
.menu.open{clip-path:inset(0);visibility:visible}
.menu-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:calc(var(--gutter) - 10px)}
.menu ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1)}
.menu ul a{display:block;text-decoration:none;font:600 clamp(30px,8vw,52px)/1.2 var(--f-head);letter-spacing:-.035em;padding-block:var(--s1);transition:color .2s,transform .4s var(--ease)}
.menu ul a:hover{color:var(--red-on-dark);transform:translateX(8px)}
.menu .contact-lines{margin-top:auto;display:grid;gap:var(--s3);color:var(--night-mute);font-size:var(--t-small)}
/* ---------- Hero ---------- */
.hero{background:var(--night);padding-block:calc(var(--head) + var(--s7)) var(--s8);overflow:hidden}
@media (min-width:980px){.hero{padding-block:calc(var(--head) + var(--s8)) var(--s9);min-height:100svh;display:flex;align-items:center}}
.hero-grid{display:grid;gap:var(--s7);position:relative;z-index:1;width:100%}
@media (min-width:1080px){.hero-grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:var(--s5);align-items:center}.hero .h1{font-size:clamp(44px,4.5vw,68px)}}
.hero h1{margin-block:var(--s5)}
.hero .lead{margin-bottom:var(--s6)}
.hero-facts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s6)}
.ln{display:block;overflow:hidden;padding-bottom:.22em;margin-bottom:-.22em}
.ln>span{display:block}
html.js .ln>span{transform:translateY(108%);transition:transform 1.2s var(--ease)}
html.js .loaded .ln>span{transform:none}
html.js .ln:nth-child(2)>span{transition-delay:.09s}
html.js .ln:nth-child(3)>span{transition-delay:.18s}
html.js .fade-in{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease) .4s,transform 1s var(--ease) .4s}
html.js .loaded .fade-in{opacity:1;transform:none}
.map-stage{position:relative;perspective:1400px;aspect-ratio:1/1;width:100%;max-width:100%}
.map-tilt{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(16deg) rotateY(-8deg);transition:transform 1.2s var(--ease)}
.map-tilt canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hud{position:absolute;z-index:2;background:rgba(27,27,27,.74);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:var(--r-md);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 24px 48px -20px rgba(0,0,0,.6);color:var(--night-fg)}
.hud-live{left:0;top:4%;height:36px;border-radius:var(--r-pill);padding:0 14px;display:flex;align-items:center;gap:var(--s2);font:600 var(--t-label)/1 var(--f-body);color:var(--night-mute)}
.hud-live .dot{width:7px;height:7px;border-radius:50%;background:var(--red-on-dark);animation:pulse 2s infinite}
.hud-asset{right:0;bottom:6%;width:min(300px,78%);padding:var(--s4) var(--s5);font:400 var(--t-label)/1.85 var(--f-body);font-variant-numeric:tabular-nums}
.hud-asset .hh{display:flex;justify-content:space-between;gap:var(--s3);font-weight:600;color:var(--night-mute);margin-bottom:var(--s2)}
.hud-asset dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 var(--s4)}
.hud-asset dt{color:var(--night-mute)}
.hud-asset dd{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-asset .ok{color:var(--red-on-dark);font-weight:600}
.hud-asset .bar{height:3px;background:var(--night-line);border-radius:3px;margin-top:var(--s3);overflow:hidden}
.hud-asset .bar i{display:block;height:100%;width:0;background:var(--red-on-dark);transition:width .9s var(--ease)}
.hud-stats{left:0;bottom:6%;display:flex;padding:var(--s3) 0}
.hud-stats div{padding:0 var(--s5);display:grid;gap:2px}
.hud-stats div+div{border-left:1px solid var(--night-line)}
.hud-stats b{font:700 26px/1 var(--f-head);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hud-stats span{font:500 14px/1.2 var(--f-body);color:var(--night-mute)}
@media (max-width:639px){.hud-stats{display:none}.hud-asset{width:auto;left:0;right:0;bottom:0}.hud-live{top:0}}
.scroll-cue{display:none}
@media (min-width:980px){.scroll-cue{position:absolute;left:50%;bottom:var(--s6);transform:translateX(-50%);z-index:2;display:grid;justify-items:center;gap:var(--s2);font:500 14px/1 var(--f-body);color:var(--night-mute)}.scroll-cue i{width:1px;height:48px;background:linear-gradient(var(--red-on-dark),transparent);animation:cue 2s var(--ease) infinite;transform-origin:top}}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
/* ---------- Reveal ---------- */
html.js [data-r]{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
html.js [data-r].in{opacity:1;transform:none}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.w>span{display:inline-block}
html.js [data-split] .w>span{transform:translateY(110%);transition:transform 1s var(--ease);transition-delay:calc(var(--i) * 34ms)}
html.js [data-split].in .w>span{transform:none}
/* ---------- Stat-Karten ---------- */
.stats{display:grid;gap:var(--s3)}
@media (min-width:640px){.stats{grid-template-columns:1fr 1fr}}
@media (min-width:1180px){.stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}}
.stat{background:var(--surface);border-radius:var(--r-lg);padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:var(--s4);min-height:300px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
@media (min-width:980px){.stat{padding:var(--s6)}}
.stat .top-icon{height:64px;display:flex;align-items:flex-end}
.stat .sq{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--ink);color:var(--on-ink)}
.stat .sq.red{background:var(--red)}
.stat .sq .i{width:24px;height:24px}
.stat .num{font:700 64px/1 var(--f-head);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.stat .num small{font-size:.42em;margin-left:var(--s1);letter-spacing:-.02em}
.stat h3{font:600 var(--t-h3)/1.18 var(--f-head)}
.stat h3 span{display:block;font-weight:500;color:var(--graphite)}
.stat .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4)}
.stat .foot p{font-size:var(--t-small);color:var(--ink-2);max-width:26ch}
/* ---------- Laufband ---------- */
.marquee{overflow:hidden;padding-block:var(--s7);border-block:1px solid var(--line)}
.track{display:flex;width:max-content;will-change:transform}
.track span{font:700 clamp(40px,6vw,88px)/1 var(--f-head);letter-spacing:-.045em;white-space:nowrap;padding-right:.5em;display:flex;align-items:center;gap:.5em}
.track span::after{content:"";width:.22em;height:.22em;border-radius:50%;background:var(--red);display:block}
.track span:nth-child(even){color:var(--bg);text-shadow:1.30px 0.00px 0 var(--graphite),1.20px 0.50px 0 var(--graphite),0.92px 0.92px 0 var(--graphite),0.50px 1.20px 0 var(--graphite),0.00px 1.30px 0 var(--graphite),-0.50px 1.20px 0 var(--graphite),-0.92px 0.92px 0 var(--graphite),-1.20px 0.50px 0 var(--graphite),-1.30px 0.00px 0 var(--graphite),-1.20px -0.50px 0 var(--graphite),-0.92px -0.92px 0 var(--graphite),-0.50px -1.20px 0 var(--graphite),-0.00px -1.30px 0 var(--graphite),0.50px -1.20px 0 var(--graphite),0.92px -0.92px 0 var(--graphite),1.20px -0.50px 0 var(--graphite)}
/* ---------- Split ---------- */
.split{display:grid;border-radius:var(--r-lg);overflow:hidden;background:var(--night-2);position:relative}
@media (min-width:980px){.split{grid-template-columns:1fr 1fr;min-height:620px}}
.split-body{padding:var(--s7) var(--s5);display:flex;flex-direction:column;gap:var(--s5);position:relative;z-index:1}
@media (min-width:980px){.split-body{padding:var(--s8) var(--s7)}}
.split-body .kicker{padding-bottom:var(--s5);border-bottom:1px solid var(--night-line)}
.split-body h2{font:600 clamp(28px,3.2vw,42px)/1.14 var(--f-head);letter-spacing:-.035em}
.split-body p{color:var(--night-mute)}
.split-body p strong{color:var(--night-fg);font-weight:600}
.split-body .btn-row{margin-top:auto;padding-top:var(--s3)}
.media{position:relative;overflow:hidden;min-height:380px;background:var(--night-3)}
.media img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;will-change:transform}
.media .media-cap{position:absolute;left:var(--s4);bottom:var(--s4);z-index:1;background:rgba(18,18,18,.72);color:var(--night-fg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:var(--r-pill);height:36px;display:flex;align-items:center;padding:0 14px;font:500 var(--t-label)/1 var(--f-body)}
/* ---------- Zielgruppen ---------- */
.aud{display:grid;gap:var(--s3)}
@media (min-width:640px){.aud{grid-template-columns:1fr 1fr}}
@media (min-width:1180px){.aud{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}}
.acard{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:460px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;text-decoration:none;background:var(--night-3);isolation:isolate}
.acard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.4s var(--ease)}
.acard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,18,18,.05) 25%,rgba(18,18,18,.9) 100%)}
.acard:hover img{transform:scale(1.07)}
.acard .body{padding:var(--s5);display:grid;gap:var(--s3)}
@media (min-width:980px){.acard .body{padding:var(--s6)}}
.acard .k{font:600 var(--t-label)/1 var(--f-body);color:#bcd2ff}
.acard h3{font:600 var(--t-h3)/1.15 var(--f-head)}
.acard p{font-size:var(--t-small);color:#e4e4e0;display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease),opacity .5s;opacity:0}
.acard p>span{overflow:hidden}
.acard:hover p,.acard:focus-visible p{grid-template-rows:1fr;opacity:1}
@media (hover:none){.acard p{grid-template-rows:1fr;opacity:1}}
.acard .go{position:absolute;top:var(--s5);right:var(--s5);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(18,18,18,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .3s,transform .45s var(--ease)}
.acard:hover .go{background:var(--red);transform:rotate(-45deg)}
/* ---------- Prozess ---------- */
.proc-grid{display:grid;gap:var(--s7);width:100%}
@media (min-width:981px){
.proc{height:340vh;padding:0}
.proc-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-block:var(--head) var(--s5)}
.proc-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:var(--s8);align-items:center}
.proc .h2,.hz .h2,.case .h2{font-size:clamp(32px,3.6vw,52px)}
}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s6)}
.mode{appearance:none;border:0;background:var(--surface);color:var(--ink);border-radius:var(--r-md);height:var(--btn);padding:0 var(--s4);font:600 15px/1 var(--f-body);display:flex;align-items:center;justify-content:space-between;gap:var(--s2);cursor:pointer;white-space:nowrap;transition:background .35s var(--ease),color .35s var(--ease)}
.mode small{font:600 var(--t-label)/1 var(--f-body);color:var(--ink-2);transition:color .35s}
.mode:hover{background:var(--soft-2)}
.mode[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.mode[aria-pressed="true"] small{color:var(--on-ink);opacity:.72}
.rail{position:relative;display:grid}
.rail::before,.rail .fill{content:"";position:absolute;left:27px;top:40px;width:2px;border-radius:2px}
.rail::before{bottom:40px;background:var(--line)}
.rail .fill{background:linear-gradient(var(--ink),var(--red));height:0;will-change:height}
.pstep{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s5);padding-block:var(--s3);align-items:start;transition:opacity .6s var(--ease)}
.pstep .dot{width:56px;height:56px;border-radius:50%;background:var(--surface);display:grid;place-items:center;color:var(--ink-2);position:relative;z-index:1;transition:background .6s var(--ease),color .6s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease)}
.pstep .dot .i{width:22px;height:22px}
.pstep .txt{padding-top:var(--s2)}
.pstep h3,.pstep h4{font:600 var(--t-h4)/1.25 var(--f-head);letter-spacing:-.02em}
.pstep p{font-size:var(--t-small);color:var(--ink-2);margin-top:var(--s1);opacity:.55;transition:opacity .6s var(--ease)}
.pstep.lit .dot{background:var(--ink);color:var(--on-ink)}
.pstep.cur .dot{background:var(--red-fill);color:#fff;transform:scale(1.06);box-shadow:0 0 0 8px var(--red-soft)}
.pstep.cur p{opacity:1}
.pstep.off{opacity:.3}
.note{margin-top:var(--s5);padding:var(--s5);border-radius:var(--r-md);background:var(--surface);font-size:var(--t-small);color:var(--ink-2)}
.note strong{color:var(--ink);font-weight:600;display:block;margin-bottom:var(--s1)}
/* ---------- Staging ---------- */
.stage{background:var(--night);border-radius:var(--r-lg);margin-inline:var(--box);overflow:hidden}
@media (min-width:980px){.stage{}}
.fillquote{font:600 clamp(24px,2.8vw,40px)/1.22 var(--f-head);letter-spacing:-.03em;max-width:30ch}
.fillquote .fw{color:#454543;transition:color .35s}
.fillquote .fw.on{color:var(--night-fg)}
.fillquote .fw.on.r{color:var(--red-on-dark)}
.feat-grid{display:grid;gap:var(--s7);margin-top:var(--s8)}
@media (min-width:980px){.feat-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s8);align-items:center}}
.flist{display:grid;gap:var(--s2)}
.fitem{appearance:none;text-align:left;background:transparent;border:0;border-left:2px solid var(--night-line);padding:var(--s3) 0 var(--s3) var(--s5);cursor:pointer;color:var(--night-fg);transition:border-color .4s}
.fitem strong{display:block;font:600 clamp(20px,2vw,24px)/1.25 var(--f-head);letter-spacing:-.025em;opacity:.5;transition:opacity .4s}
.fitem>span{display:grid;grid-template-rows:0fr;font-size:var(--t-small);color:var(--night-mute);opacity:0;transition:grid-template-rows .5s var(--ease),opacity .4s,margin .4s}
.fitem>span>span{overflow:hidden}
.fitem:hover strong{opacity:.8}
.fitem[aria-selected="true"]{border-left-color:var(--red-on-dark)}
.fitem[aria-selected="true"] strong{opacity:1}
.fitem[aria-selected="true"]>span{grid-template-rows:1fr;opacity:1;margin-top:var(--s2)}
.device{background:#0b0b0b;border-radius:var(--r-lg);padding:var(--s3);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 40px 80px -40px rgba(0,0,0,.8)}
.screen{background:var(--surface);color:var(--ink);border-radius:calc(var(--r-lg) - 10px);overflow:hidden}
.screen-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);height:48px;padding:0 var(--s4);border-bottom:1px solid var(--line);font:500 var(--t-label)/1.2 var(--f-body);color:var(--ink-2)}
.screen-bar b{color:var(--ink);font-weight:600}
.dots3{display:flex;gap:6px}.dots3 i{width:9px;height:9px;border-radius:50%;background:var(--soft-2)}
.tbl-wrap{overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
@media (min-width:1180px){.tbl-wrap{-webkit-mask-image:none;mask-image:none}}
.tbl{width:100%;min-width:600px;border-collapse:collapse;font:400 var(--t-label)/1.4 var(--f-body);font-variant-numeric:tabular-nums}
.tbl th{text-align:left;font-weight:600;color:var(--ink-2);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);white-space:nowrap;transition:background .5s var(--ease)}
.tbl tr:last-child td{border-bottom:0}
.tbl .hl{background:var(--red-soft)}
.st{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);background:var(--soft);font:600 14px/1 var(--f-body)}
.st i{width:6px;height:6px;border-radius:50%;background:var(--gray)}
.st.go i{background:var(--red)}
.screen-foot{height:40px;display:flex;align-items:center;padding:0 var(--s4);font:400 14px/1 var(--f-body);color:var(--ink-2);border-top:1px solid var(--line)}
.bento{display:grid;gap:var(--s3);margin-top:var(--s8)}
@media (min-width:980px){.bento{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}}
.bcard{border-radius:var(--r-lg);padding:var(--s6) var(--s5);background:var(--night-2);display:flex;flex-direction:column;gap:var(--s4);min-height:380px;position:relative;overflow:hidden}
@media (min-width:980px){.bcard{padding:var(--s6)}}
.bcard h3{font:600 var(--t-h3)/1.15 var(--f-head)}
.bcard p{color:var(--night-mute);font-size:var(--t-small)}
.brows{margin-top:auto;display:grid}
.brow{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:72px;border-top:1px solid var(--night-line)}
.brow small{display:block;font:600 var(--t-label)/1 var(--f-body);color:var(--night-mute);margin-bottom:var(--s2)}
.brow strong{font:600 17px/1.25 var(--f-head)}
.bnums{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.bnums>div+div{border-left:1px solid var(--night-line);padding-left:var(--s5)}
.bnums b{display:block;font:700 clamp(56px,5vw,72px)/1 var(--f-head);letter-spacing:-.05em}
.bnums span{display:block;margin-top:var(--s2);font-size:var(--t-small);color:var(--night-mute)}
.bcard.red{background:linear-gradient(150deg,#2563eb 0%,#1d4ed8 65%,#172554 100%)}
.bcard.red p{color:rgba(255,255,255,.88)}
.bcard.red::after{content:"";position:absolute;right:-90px;bottom:-90px;width:280px;height:280px;border-radius:50%;border:1px solid rgba(255,255,255,.2);box-shadow:0 0 0 44px rgba(255,255,255,.04),0 0 0 88px rgba(255,255,255,.02);animation:ring 8s ease-in-out infinite alternate}
@keyframes ring{to{transform:scale(1.12)}}
.bicons{margin-top:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);position:relative;z-index:1}
.bicons div{display:grid;gap:var(--s3);font:600 var(--t-small)/1.3 var(--f-body)}
.bicons i{width:56px;height:56px;border-radius:16px;background:rgba(18,18,18,.42);display:grid;place-items:center}
.bicons .i{width:24px;height:24px}
/* ---------- Logistik ---------- */
.hz-sticky{overflow:hidden}
@media (min-width:981px){
.hz{height:320vh;padding:0}
.hz-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding-block:calc(var(--head) + var(--s3)) var(--s5)}
.hz .sec-head{margin-bottom:var(--s6)}
}
.hz-track{display:flex;gap:var(--s3);padding-inline:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;will-change:transform}
.hz-track>*{scroll-snap-align:start}
.hz-track .end{flex:none;width:calc(var(--gutter) - var(--s3))}
@media (min-width:981px){.hz-track{overflow:visible;gap:var(--s4)}}
.vcard{flex:none;width:min(340px,82vw);background:var(--surface);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;height:400px}
.vcard .vmedia{position:relative;height:170px;flex:none;overflow:hidden;background:var(--soft)}
.vcard .vmedia img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.vcard:hover .vmedia img{transform:scale(1.06)}
.vcard .vicon{height:170px;flex:none;display:grid;place-items:center;background:var(--soft);color:var(--graphite)}
.vcard .vicon .i{width:72px;height:72px;stroke-width:1.2}
.vcard .vbody{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.vcard .k{font:600 var(--t-label)/1 var(--f-body);color:var(--red)}
.vcard h3{font:600 var(--t-h3)/1.15 var(--f-head)}
.vcard p{color:var(--ink-2);font-size:var(--t-small)}
.vcard .scale{margin-top:auto;display:flex;align-items:center;gap:var(--s3);font:600 14px/1 var(--f-body);color:var(--ink-2)}
.vcard .bar{flex:1;height:4px;border-radius:4px;background:var(--soft-2);overflow:hidden}
.vcard .bar i{display:block;height:100%;background:var(--red);border-radius:4px;width:0;transition:width 1.4s var(--ease)}
.vcard.in .bar i,html:not(.js) .vcard .bar i{width:var(--w)}
.vcard.plan{background:var(--night);color:var(--night-fg);padding:var(--s5);gap:var(--s3)}
.vcard.plan .k{color:var(--red-on-dark)}
.vcard.plan ol{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:var(--s2);counter-reset:c}
.vcard.plan li{display:flex;align-items:center;gap:var(--s3);height:36px;font:500 var(--t-small)/1 var(--f-body);color:var(--night-mute);counter-increment:c}
.vcard.plan li::before{content:counter(c);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--night-3);color:var(--night-fg);font:600 14px/1 var(--f-body);flex:none}
.vcard.plan li:last-child{color:var(--night-fg)}
.vcard.plan li:last-child::before{background:var(--red)}
/* ---------- Vergleich ---------- */
.cmp-tabs{display:flex;gap:var(--s2);overflow-x:auto;margin-bottom:var(--s5)}
.cmp-tabs button{flex:none;appearance:none;border:0;cursor:pointer;height:44px;padding:0 var(--s5);border-radius:var(--r-pill);background:var(--surface);font:600 15px/1 var(--f-body);color:var(--ink-2);white-space:nowrap;transition:background .3s,color .3s}
.cmp-tabs button:hover{color:var(--ink)}
.cmp-tabs button[aria-selected="true"]{background:var(--ink);color:var(--on-ink)}
.cmp{display:grid;gap:var(--s3)}
@media (min-width:980px){.cmp{grid-template-columns:1fr 1fr;gap:var(--s4)}}
.cmp-card{border-radius:var(--r-lg);padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:var(--s5);min-height:460px;background:var(--surface);overflow:hidden}
@media (min-width:980px){.cmp-card{padding:var(--s7)}}
.cmp-card.dbl{background:var(--night);color:var(--night-fg)}
.cmp-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);min-height:32px}
.cmp-head h3{font:600 var(--t-h3)/1.15 var(--f-head)}
.flow{height:120px}
.flow svg{width:100%;height:100%;overflow:visible}
.flow .node{fill:var(--bg);stroke:var(--line);stroke-width:1.5}
.cmp-card.dbl .flow .node{fill:var(--night-3);stroke:var(--night-line)}
.flow text{font:600 14px var(--f-body);fill:var(--ink-2)}
.cmp-card.dbl .flow text{fill:var(--night-mute)}
.flow .seg{stroke:var(--gray);stroke-width:2;stroke-dasharray:4 6;fill:none}
.flow .brk{stroke:var(--red);stroke-width:2.5;stroke-linecap:round;fill:none}
.flow .line{stroke:var(--red-on-dark);stroke-width:3;fill:none;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 2.2s var(--ease)}
.in .flow .line{stroke-dashoffset:0}
.flow .pulse{fill:#ffffff}
.cmp-metric{display:flex;align-items:center;gap:var(--s4)}
.cmp-metric b{font:700 64px/1 var(--f-head);letter-spacing:-.05em;font-variant-numeric:tabular-nums;min-width:1.6ch}
.cmp-metric span{font:500 var(--t-small)/1.35 var(--f-body);color:var(--ink-2)}
.cmp-card.dbl .cmp-metric b{color:var(--red-on-dark)}
.cmp-card.dbl .cmp-metric span{color:var(--night-mute)}
.cmp-text{margin-top:auto;padding-top:var(--s5);border-top:1px solid var(--line);display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--t-lead);line-height:1.45;min-height:110px;transition:opacity .25s}
.cmp-card.dbl .cmp-text{border-top-color:var(--night-line)}
.cmp-text .i{width:22px;height:22px;margin-top:3px}
.cmp-card:not(.dbl) .cmp-text{color:var(--ink-2)}
.cmp-card:not(.dbl) .cmp-text .i{color:var(--gray)}
.cmp-card.dbl .cmp-text .i{color:var(--red-on-dark)}
.fineprint{margin-top:var(--s4);font-size:14px;color:var(--ink-2)}
/* ---------- Fallbeispiel ---------- */
.case-grid{display:grid;gap:var(--s7);width:100%}
@media (min-width:981px){
.case{height:460vh;padding:0}
.case-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-block:calc(var(--head) + var(--s3)) var(--s5)}
.case-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s8);align-items:center}
}
.stepper{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--s1);margin-top:var(--s6)}
.stepper button{appearance:none;border:0;background:transparent;cursor:pointer;padding:0;display:grid;gap:var(--s2);text-align:left;color:var(--ink-2);font:600 var(--t-label)/1 var(--f-body);font-variant-numeric:tabular-nums}
.stepper button::before{content:"";height:4px;border-radius:4px;background:var(--soft-2);transition:background .5s var(--ease)}
.stepper button.done::before{background:var(--ink)}
.stepper button[aria-pressed="true"]::before{background:var(--red)}
.stepper button[aria-pressed="true"]{color:var(--ink)}
.phase-text{margin-top:var(--s5);min-height:170px;display:grid}
.phase-text>div{grid-area:1/1;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.phase-text .out{opacity:0;transform:translateY(-8px)}
.phase-text h3{font:600 var(--t-h3)/1.15 var(--f-head);margin:var(--s3) 0 var(--s2)}
.phase-text p{color:var(--ink-2);max-width:46ch}
.board{background:var(--surface);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow)}
@media (min-width:980px){.board{padding:var(--s6)}}
.board-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);height:32px;margin-bottom:var(--s5);font:600 var(--t-label)/1 var(--f-body);color:var(--ink-2);font-variant-numeric:tabular-nums}
.grids{display:grid;gap:var(--s6)}
@media (min-width:520px){.grids{grid-template-columns:1fr 1fr;gap:var(--s5)}}
.grid-lab{font:600 var(--t-label)/1 var(--f-body);color:var(--ink-2);margin-bottom:var(--s3);display:flex;justify-content:space-between}
.dots{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}
.dots i{aspect-ratio:1;border-radius:50%;background:var(--soft-2);display:block;transition:background .6s var(--ease),box-shadow .6s,transform .6s var(--ease);transition-delay:calc(var(--k,0) * 5ms)}
.dots i.s-store{background:var(--gray)}
.dots i.s-prep{background:var(--ink)}
.dots i.s-pack{background:transparent;box-shadow:inset 0 0 0 2px var(--ink)}
.dots i.s-done{background:var(--red);transform:scale(1.06)}
.legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin-top:var(--s5);min-height:44px;font:500 var(--t-label)/1.2 var(--f-body);color:var(--ink-2)}
.legend span{display:flex;align-items:center;gap:7px}
.legend i{width:11px;height:11px;border-radius:50%;display:block;background:var(--soft-2)}
.legend i.s-store{background:var(--gray)}.legend i.s-prep{background:var(--ink)}.legend i.s-done{background:var(--red)}.legend i.s-pack{background:transparent;box-shadow:inset 0 0 0 2px var(--ink)}
.legend b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.caption{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line);font-size:var(--t-small);color:var(--ink-2);min-height:58px}
.scrollhint{display:none}
@media (min-width:981px){.scrollhint{margin-top:var(--s5);font:500 var(--t-label)/1 var(--f-body);color:var(--ink-2);display:flex;align-items:center;gap:var(--s3)}}
.scrollhint i{width:18px;height:28px;border:1.5px solid var(--gray);border-radius:10px;position:relative}
.scrollhint i::after{content:"";position:absolute;left:50%;top:5px;width:3px;height:6px;border-radius:2px;background:var(--red);transform:translateX(-50%);animation:wheel 1.6s infinite}
@keyframes wheel{to{transform:translate(-50%,8px);opacity:0}}
/* ---------- Transparenz ---------- */
.trans{background:var(--night);border-radius:var(--r-lg);margin-inline:var(--box);overflow:hidden}
@media (min-width:980px){.trans{}}
.trans-grid{display:grid;gap:var(--s7);position:relative;z-index:1}
@media (min-width:1080px){.trans-grid{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:var(--s8);align-items:center}}
.chart-wrap{position:relative}
@media (min-width:640px){.chart-wrap{padding-right:var(--s6);padding-bottom:var(--s8)}}
.chart{position:relative;background:var(--night-2);border-radius:var(--r-lg);padding:var(--s5) var(--s5) var(--s4)}
.chart-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
.chart-head b{font:600 var(--t-h4)/1.2 var(--f-head)}
.chart-legend{display:flex;flex-wrap:wrap;gap:var(--s4);font:500 var(--t-label)/1 var(--f-body);color:var(--night-mute)}
.chart-legend span{display:flex;align-items:center;gap:var(--s2)}
.chart-legend i{width:14px;height:3px;border-radius:3px;background:var(--red-on-dark)}
.chart-legend i.g{background:#cfcfcb}
.chart svg{width:100%;height:auto;display:block;overflow:visible;touch-action:pan-y}
.chart .gl{stroke:var(--night-line);stroke-width:1}
.chart .ax{font:500 14px var(--f-body);fill:var(--night-mute)}
.chart .l1{fill:none;stroke:var(--red-on-dark);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .l2{fill:none;stroke:#cfcfcb;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 2.4s var(--ease)}
.chart.in .draw,.trans-pair.in .draw{stroke-dashoffset:0}
.chart .area{fill:url(#areaGrad);opacity:0;transition:opacity 1.6s var(--ease) .8s}
.chart.in .area,.trans-pair.in .area{opacity:1}
.chart .cursor{stroke:var(--night-mute);stroke-width:1;stroke-dasharray:3 4;opacity:0;transition:opacity .2s}
.chart .knob{fill:var(--night);stroke:var(--red-on-dark);stroke-width:2.5;opacity:0;transition:opacity .2s}
.chart.hover .cursor,.chart.hover .knob{opacity:1}
.tip{position:absolute;pointer-events:none;background:var(--night-fg);color:var(--night);border-radius:12px;padding:8px 12px;font:600 var(--t-label)/1.35 var(--f-body);white-space:nowrap;transform:translate(-50%,calc(-100% - 14px));opacity:0;transition:opacity .2s;font-variant-numeric:tabular-nums;z-index:2}
.tip small{display:block;font-weight:500;color:var(--ink-2)}
.chart.hover .tip{opacity:1}
.doc{position:relative;margin-top:var(--s3);width:100%;background:var(--surface);color:var(--ink);border-radius:var(--r-md);box-shadow:0 30px 60px -24px rgba(0,0,0,.7);padding:var(--s5);z-index:3;transition:opacity .4s var(--ease),transform .4s var(--ease)}
@media (min-width:640px){.doc{position:absolute;right:0;bottom:0;margin:0;width:330px}}
.doc.swap{opacity:0;transform:translateY(10px)}
.doc-h{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.doc-h b{font:600 var(--t-h4)/1.2 var(--f-head)}
.doc ul{list-style:none;margin:0;padding:0;display:grid}
.doc li{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);height:44px;border-top:1px solid var(--line);font-size:var(--t-small);font-variant-numeric:tabular-nums}
.doc li span:last-child{color:var(--red);font-weight:600;white-space:nowrap}
.doc .doc-f{margin-top:var(--s3);display:flex;justify-content:space-between;align-items:center;font:600 var(--t-label)/1 var(--f-body);color:var(--ink-2)}
/* ---------- Tabs, Pakete ---------- */
.seg-tabs{display:inline-flex;gap:var(--s1);padding:var(--s1);border-radius:var(--r-pill);background:var(--soft-2);max-width:100%;overflow-x:auto}
.seg-tabs button{flex:none;white-space:nowrap;appearance:none;border:0;background:transparent;cursor:pointer;height:44px;padding:0 var(--s4);border-radius:var(--r-pill);font:600 15px/1 var(--f-body);color:var(--ink-2);transition:background .3s,color .3s}
@media (min-width:640px){.seg-tabs button{padding:0 var(--s5)}}
.seg-tabs button:hover{color:var(--ink)}
.seg-tabs button[aria-selected="true"]{background:var(--ink);color:var(--on-ink)}
.pk-tabs{display:flex;justify-content:center;margin-bottom:var(--s7)}
.packs{display:grid;gap:var(--s3)}
@media (min-width:980px){.packs{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}}
.pack{background:var(--surface);border-radius:var(--r-lg);padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:var(--s4);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.pack:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
@media (min-width:980px){.pack{padding:var(--s6)}}
.pack .top-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);height:32px}
.pack h3{font:600 var(--t-h3)/1.15 var(--f-head)}
.pack .sub{font-size:var(--t-small);color:var(--ink-2);min-height:3.2em;transition:opacity .25s}
.pack .price{font:700 clamp(28px,2.6vw,34px)/1.05 var(--f-head);letter-spacing:-.04em}
.pack .for{font:600 15px/1.45 var(--f-body);min-height:2.9em}
.pack ul{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:var(--s3)}
.pack li{display:flex;gap:var(--s3);font-size:15px;line-height:1.4}
.pack li .i{width:18px;height:18px;margin-top:1px;color:var(--red)}
.pack li.no{color:var(--ink-2)}
.pack li.no .i{color:var(--gray)}
.pack .ctl{margin-top:auto;padding-top:var(--s5);border-top:1px solid var(--line)}
.pack .ctl .btn{width:100%;justify-content:space-between}
.pack.hl{background:var(--night);color:var(--night-fg)}
.pack.hl .sub,.pack.hl li.no{color:var(--night-mute)}
.pack.hl li .i{color:var(--red-on-dark)}
.pack.hl .ctl{border-top-color:var(--night-line)}
.pack.hl .chip{background:var(--red-fill);color:#fff}
/* ---------- Pilot ---------- */
.stack{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.stack li{background:var(--surface);border-radius:var(--r-lg);padding:var(--s5);display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3) var(--s5);align-items:center}
.stack li .n{font:700 56px/.85 var(--f-head);letter-spacing:-.06em;color:var(--red);grid-row:span 2;font-variant-numeric:tabular-nums}
.stack li h3{font:600 var(--t-h3)/1.15 var(--f-head)}
.stack li p{color:var(--ink-2);font-size:15px}
.stack li:last-child{background:var(--night);color:var(--night-fg)}
.stack li:last-child p{color:var(--night-mute)}
.stack li:last-child .n{color:var(--red-on-dark)}
@media (min-width:760px){
.stack{gap:var(--s4);padding-bottom:var(--s8)}
.stack li{position:sticky;top:calc(var(--head) + var(--s5) + var(--n) * 18px);grid-template-columns:120px minmax(0,1fr) minmax(0,1fr);gap:var(--s7);padding:var(--s7);min-height:240px;box-shadow:0 -14px 34px -20px rgba(20,20,20,.22)}
.stack li .n{font-size:clamp(72px,8vw,112px);grid-row:auto}
}
/* ---------- Stimmen ---------- */
.quote-split{display:grid;border-radius:var(--r-lg);overflow:hidden;background:var(--night-2)}
@media (min-width:980px){.quote-split{grid-template-columns:1fr 1fr;min-height:580px}}
.qbody{padding:var(--s7) var(--s5);display:flex;flex-direction:column;gap:var(--s5)}
@media (min-width:980px){.qbody{padding:var(--s8) var(--s7)}}
.qbody>.kicker{padding-bottom:var(--s5);border-bottom:1px solid var(--night-line)}
.qslides{display:grid}
.qslide{grid-area:1/1;opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease);visibility:hidden;margin:0}
.qslide.on{opacity:1;transform:none;visibility:visible}
.qslide blockquote{margin:0;font:600 clamp(24px,2.6vw,34px)/1.25 var(--f-head);letter-spacing:-.025em}
.person{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s6)}
.person .av{width:56px;height:56px;border-radius:50%;background:var(--night-3);display:grid;place-items:center;color:var(--night-mute)}
.person strong{display:block;font-weight:600}
.person em{font-style:normal;color:var(--night-mute);font-size:var(--t-small)}
.qnav{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding-top:var(--s5)}
.arrows{display:flex;gap:var(--s1);padding:var(--s1);border-radius:var(--r-pill);background:var(--night-3)}
.arrows button{appearance:none;border:0;background:transparent;color:var(--night-fg);width:44px;height:44px;border-radius:50%;cursor:pointer;display:grid;place-items:center;transition:background .3s,color .3s}
.arrows button:hover{background:var(--red-fill);color:#fff}
.qcount{display:flex;align-items:center;gap:var(--s3);font:600 15px/1 var(--f-body);font-variant-numeric:tabular-nums}
.qcount i{width:56px;height:2px;background:var(--night-line);position:relative;overflow:hidden;border-radius:2px}
.qcount i b{position:absolute;left:0;top:0;bottom:0;background:var(--red-on-dark);transition:width .6s var(--ease)}
.qnote{font-size:14px;color:var(--night-mute)}
/* ---------- Hersteller ---------- */
.partners{background:var(--surface);border-radius:var(--r-lg);padding:var(--s7) var(--s5)}
@media (min-width:980px){.partners{padding:var(--s7)}}
.partners-head{display:grid;gap:var(--s5);padding-bottom:var(--s6);border-bottom:1px solid var(--line)}
@media (min-width:980px){.partners-head{grid-template-columns:1fr auto;align-items:end}}
.logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1180px){.logos{grid-template-columns:repeat(6,minmax(0,1fr))}}
.logo-cell{height:120px;display:grid;place-items:center;padding:var(--s5);border-radius:var(--r-md);transition:background .3s}
.logo-cell img{max-height:32px;max-width:118px;width:auto;height:auto;object-fit:contain;filter:grayscale(1) brightness(.35);opacity:.75;transition:filter .45s,opacity .45s,transform .45s var(--ease)}
.logo-cell.sq img{max-height:54px}
.logo-cell:hover{background:var(--bg)}
.logo-cell:hover img{filter:none;opacity:1;transform:scale(1.05)}
.partners-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s4);padding-top:var(--s5);border-top:1px solid var(--line);font:500 var(--t-small)/1.4 var(--f-body);color:var(--ink-2)}
/* ---------- Sicherheit ---------- */
.trust{display:grid;gap:var(--s3)}
@media (min-width:980px){.trust{grid-template-columns:1fr 1fr;gap:var(--s4)}}
.iso{display:grid;gap:var(--s3)}
@media (min-width:520px){.iso{grid-template-columns:1fr 1fr}}
.iso>div{background:var(--surface);border-radius:var(--r-md);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.iso small{font:600 var(--t-label)/1.2 var(--f-body);color:var(--red)}
.iso strong{font:700 26px/1.1 var(--f-head);letter-spacing:-.03em}
.iso p{font-size:var(--t-small);color:var(--ink-2);line-height:1.45}
.assure{display:grid;gap:var(--s3)}
.assure>div{border-radius:var(--r-md);padding:var(--s5);display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--s4);background:var(--surface);align-items:start}
.assure .ico{width:48px;height:48px;border-radius:14px;background:var(--red-soft);color:var(--red);display:grid;place-items:center}
.assure h3,.assure h4{font:600 var(--t-h4)/1.3 var(--f-head);margin-bottom:var(--s1)}
.assure p{font-size:var(--t-small);color:var(--ink-2)}
/* ---------- Insights ---------- */
.ins-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s4);padding-bottom:var(--s5);border-bottom:1px solid var(--line);margin-bottom:var(--s6)}
.ins{display:grid;gap:var(--s3)}
@media (min-width:760px){.ins{grid-template-columns:1fr 1fr;gap:var(--s4)}}
@media (min-width:1180px){.ins{grid-template-columns:1.1fr 1fr 1fr}.ins .feature{grid-row:span 2}}
.post{background:var(--surface);border-radius:var(--r-lg);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4);min-height:280px;text-decoration:none;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
@media (min-width:980px){.post{padding:var(--s6)}}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.post .by{display:flex;align-items:center;gap:var(--s3);font-size:var(--t-small);color:var(--ink-2)}
.post .by i{width:44px;height:44px;border-radius:50%;background:var(--ink);display:grid;place-items:center;color:var(--on-ink)}
.post .by i .i{width:18px;height:18px}
.post .by b{display:block;color:var(--ink);font-weight:600}
.post .meta{margin-top:auto;font:600 var(--t-label)/1 var(--f-body);color:var(--red)}
.post h3{font:600 clamp(20px,1.9vw,24px)/1.25 var(--f-head);letter-spacing:-.02em;transition:color .3s}
.post:hover h3{color:var(--red)}
.post .tags{display:flex;flex-wrap:wrap;gap:var(--s2)}
.post.feature{padding:0;overflow:hidden;position:relative;min-height:460px;color:#fff;isolation:isolate}
.post.feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.4s var(--ease)}
.post.feature:hover img{transform:scale(1.06)}
.post.feature::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(18,18,18,.92),rgba(18,18,18,0) 65%)}
.post.feature .txt{margin-top:auto;padding:var(--s6) var(--s5);display:grid;gap:var(--s3)}
.post.feature .meta{color:#bcd2ff;margin:0}
.post.feature:hover h3{color:#fff}
.post.feature h3{font-size:clamp(24px,2.4vw,32px)}
/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa button{appearance:none;border:0;background:transparent;width:100%;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s5);padding-block:var(--s5);color:var(--ink);font:600 clamp(20px,2.6vw,34px)/1.2 var(--f-head);letter-spacing:-.03em;transition:color .3s}
.qa button:hover{color:var(--red)}
.qa button .pm{flex:none;width:48px;height:48px;border-radius:50%;background:var(--surface);color:var(--ink);display:grid;place-items:center;transition:background .3s,color .3s}
.qa button .pm .i{transition:transform .4s var(--ease)}
.qa button[aria-expanded="true"] .pm{background:var(--red-fill);color:#fff}
.qa button[aria-expanded="true"] .pm .i{transform:rotate(45deg)}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.qa .ans>div{overflow:hidden}
.qa .ans p{padding-bottom:var(--s6);color:var(--ink-2);max-width:68ch;font-size:var(--t-lead)}
.qa button[aria-expanded="true"]+.ans{grid-template-rows:1fr}
/* ---------- Band ---------- */
.band{position:relative;isolation:isolate;background:var(--night);border-radius:var(--r-lg);margin-inline:var(--box);padding-block:var(--s8);overflow:hidden}
@media (min-width:980px){.band{padding-block:var(--s9)}}
.band-grid{display:grid;gap:var(--s3);position:relative;z-index:1}
@media (min-width:1080px){.band-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}}
.bandcard{background:var(--night-2);border-radius:var(--r-lg);padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:var(--s4);min-height:420px}
@media (min-width:980px){.bandcard{padding:var(--s6)}
/* DBL-K46: Karten nur so hoch wie der Inhalt, gestapelt ohne Leerraum; nebeneinander gleich hoch über das Raster */
.bandcard{min-height:0}@media (min-width:980px){.bandcard{min-height:320px}}}
.bandcard h3{font:600 clamp(26px,2.4vw,32px)/1.15 var(--f-head);letter-spacing:-.035em}
.bandcard p{color:var(--night-mute);font-size:var(--t-small)}
.bandcard .act{margin-top:auto}
.bandcard.red{background:linear-gradient(150deg,#2563eb 0%,#1d4ed8 70%,#172554 100%)}
.bandcard.red .kicker{color:#fff}
.bandcard .num{font:700 clamp(28px,2.6vw,36px)/1.1 var(--f-head);letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-decoration:none;color:#fff}
.inline-field{display:flex;align-items:center;gap:var(--s2);background:var(--night-3);border-radius:var(--r-pill);height:var(--btn);padding:0 4px 0 var(--s5);box-shadow:inset 0 0 0 1px var(--night-line);transition:box-shadow .2s}
.inline-field:focus-within{box-shadow:inset 0 0 0 1.5px var(--red-on-dark)}
.inline-field input{flex:1;min-width:0;background:transparent;border:0;color:var(--night-fg);font:400 16px/1 var(--f-body);height:44px;outline:none}
.inline-field input::placeholder{color:var(--night-mute)}
.inline-field button{appearance:none;border:0;cursor:pointer;height:44px;padding:0 var(--s5);border-radius:var(--r-pill);background:var(--night-fg);color:var(--night);font:600 15px/1 var(--f-body);white-space:nowrap;transition:background .3s,color .3s}
.inline-field button:hover{background:var(--red-fill);color:#fff}
.check{display:flex;align-items:flex-start;gap:var(--s3);margin-top:var(--s4);font-size:var(--t-label);line-height:1.45;color:var(--night-mute);cursor:pointer}
.check input{appearance:none;flex:none;width:22px;height:22px;margin:0;border-radius:7px;box-shadow:inset 0 0 0 1.5px var(--night-mute);display:grid;place-items:center;cursor:pointer;transition:background .2s,box-shadow .2s}
.check input:checked{background:var(--red);box-shadow:none}
.check input:checked::after{content:"";width:10px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.msg{margin-top:var(--s3);font-size:var(--t-label);color:var(--red-on-dark);min-height:1.4em}
/* ---------- Formular ---------- */
.cta-grid{display:grid;gap:var(--s7)}
@media (min-width:1180px){.cta-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s8);align-items:start}}
.cta h2{margin-block:var(--s4) var(--s5)}
.direct{margin-top:var(--s6);display:flex;align-items:center;gap:var(--s4);text-decoration:none;padding:var(--s4) var(--s5) var(--s4) var(--s4);border-radius:var(--r-md);background:var(--surface);width:fit-content;transition:box-shadow .3s}
.direct:hover{box-shadow:var(--shadow)}
.direct .hi{width:48px;height:48px;border-radius:50%;background:var(--red-fill);color:#fff;display:grid;place-items:center}
.direct small{display:block;font:600 var(--t-label)/1.2 var(--f-body);color:var(--ink-2)}
.direct b{font:700 var(--t-h4)/1.2 var(--f-head);font-variant-numeric:tabular-nums}
.form{background:var(--surface);border-radius:var(--r-lg);padding:var(--s6) var(--s5)}
@media (min-width:980px){.form{padding:var(--s7)}}
.fgrid{display:grid;gap:var(--s6) var(--s5);align-items:start}
@media (min-width:640px){.fgrid{grid-template-columns:1fr 1fr}}
.f{display:grid;grid-template-rows:18px auto;gap:var(--s3);min-width:0}
.f.full{grid-column:1/-1}
.lab{display:block;font:600 var(--t-label)/18px var(--f-body);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.input{font:400 16px/1.4 var(--f-body);color:var(--ink);background:var(--bg);border:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:14px;height:var(--btn);padding:0 var(--s4);width:100%;min-width:0;transition:box-shadow .2s,background .2s;-webkit-appearance:none;appearance:none}
textarea.input{height:auto;min-height:120px;padding:var(--s3) var(--s4);resize:none}
.input::placeholder{color:#6d6d6a}
.input:hover{box-shadow:inset 0 0 0 1px var(--gray)}
.input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 4px var(--soft-2);background:var(--surface)}
.input.bad{box-shadow:inset 0 0 0 1.5px var(--red)}
.segc{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--s2)}
.segc label{position:relative;cursor:pointer}
.segc input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.segc span{display:flex;align-items:center;justify-content:center;gap:var(--s2);height:var(--btn);padding:0 var(--s3);border-radius:14px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font:600 15px/1 var(--f-body);color:var(--ink);white-space:nowrap;transition:background .25s,box-shadow .25s,color .25s}
.segc span .i{width:16px;height:16px;display:none}
.segc label:hover span{box-shadow:inset 0 0 0 1px var(--gray)}
.segc input:checked+span{background:var(--ink);box-shadow:none;color:#fff}
.segc input:checked+span .i{display:block}
.segc input:focus-visible+span{outline:2px solid var(--red);outline-offset:3px}
@media (max-width:420px){.segc.three{grid-template-columns:1fr}}
.sel{position:relative}
.sel-btn{appearance:none;width:100%;height:var(--btn);display:flex;align-items:center;justify-content:space-between;gap:var(--s3);text-align:left;cursor:pointer;font:400 16px/1.3 var(--f-body);color:var(--ink);background:var(--bg);border:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:14px;padding:0 var(--s2) 0 var(--s4);transition:box-shadow .2s}
.sel-btn:hover{box-shadow:inset 0 0 0 1px var(--gray)}
.sel-btn span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-btn .chev{flex:none;width:36px;height:36px;border-radius:10px;background:var(--surface);display:grid;place-items:center;transition:transform .35s var(--ease),background .2s,color .2s}
.sel-btn .chev .i{width:18px;height:18px}
.sel.open .sel-btn{box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 4px var(--soft-2)}
.sel.open .chev{transform:rotate(180deg);background:var(--ink);color:var(--on-ink)}
.sel-list{position:absolute;left:0;right:0;top:calc(100% + var(--s2));z-index:20;list-style:none;margin:0;padding:var(--s2);background:var(--surface);border-radius:var(--r-md);box-shadow:var(--shadow),0 0 0 1px var(--line);opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.sel.open .sel-list{opacity:1;transform:none;pointer-events:auto}
.sel-list li{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:56px;padding:var(--s2) var(--s4);border-radius:12px;cursor:pointer;font:500 15px/1.3 var(--f-body);transition:background .2s}
.sel-list li small{display:block;font-weight:400;font-size:var(--t-label);color:var(--ink-2);margin-top:2px}
.sel-list li .i{width:18px;height:18px;color:var(--red);opacity:0}
.sel-list li:hover,.sel-list li.act{background:var(--bg)}
.sel-list li[aria-selected="true"] .i{opacity:1}
.form-foot{margin-top:var(--s6);padding-top:var(--s6);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--s4);align-items:stretch}
@media (min-width:640px){.form-foot{flex-direction:row;align-items:center;justify-content:space-between}}
.form-foot .hint{font-size:var(--t-label);color:var(--ink-2);max-width:42ch}
.err{color:var(--red);font-size:var(--t-small);min-height:1.4em;margin-top:var(--s4)}
/* ---------- Bestätigungs-Dialog ---------- */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:var(--gutter);visibility:hidden;pointer-events:none}
.modal.open{visibility:visible;pointer-events:auto}
.modal-bg{position:absolute;inset:0;background:rgba(12,12,12,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .45s var(--ease)}
.modal.open .modal-bg{opacity:1}
.modal-card{position:relative;width:min(560px,100%);max-height:calc(100svh - 2 * var(--gutter));overflow:auto;background:var(--surface);border-radius:var(--r-lg);padding:var(--s7) var(--s5) var(--s6);box-shadow:0 40px 80px -30px rgba(0,0,0,.6);transform:translateY(24px) scale(.97);opacity:0;transition:transform .6s var(--ease),opacity .45s var(--ease);outline:none}
@media (min-width:640px){.modal-card{padding:var(--s7)}}
.modal.open .modal-card{transform:none;opacity:1}
.modal-card::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--red),#1e40af)}
.mclose{position:absolute;top:var(--s4);right:var(--s4);width:44px;height:44px;border-radius:50%;border:0;background:var(--soft);cursor:pointer;display:grid;place-items:center;transition:background .3s,color .3s}
.mclose:hover{background:var(--ink);color:var(--on-ink)}
.mcheck{width:84px;height:84px;margin-bottom:var(--s5)}
.mcheck circle{fill:none;stroke:var(--red);stroke-width:3;stroke-dasharray:252;stroke-dashoffset:252}
.mcheck path{fill:none;stroke:var(--red);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60}
.modal.open .mcheck circle{transition:stroke-dashoffset .9s var(--ease) .25s;stroke-dashoffset:0}
.modal.open .mcheck path{transition:stroke-dashoffset .5s var(--ease) .95s;stroke-dashoffset:0}
.modal :is(h2,.mh){font:600 clamp(26px,3vw,34px)/1.15 var(--f-head);letter-spacing:-.035em;margin-bottom:var(--s3)}
.modal .mlead{color:var(--ink-2);margin-bottom:var(--s5)}
.msteps{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;gap:var(--s3)}
.msteps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--s3);align-items:start;font-size:var(--t-small);color:var(--ink-2)}
.msteps li b{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--ink);font:600 14px/1 var(--f-body)}
.msteps li:first-child b{background:var(--red-fill);color:#fff}
.msteps strong{display:block;font-weight:600;color:var(--ink)}
.msum{background:var(--bg);border-radius:var(--r-md);padding:var(--s4);margin:0 0 var(--s5);display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s1) var(--s4);font-size:var(--t-label)}
.msum dt{color:var(--ink-2)}
.msum dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.mdraft{margin-top:var(--s4);font-size:14px;color:var(--ink-2)}
/* ---------- Footer ---------- */
footer{padding-block:var(--s9) var(--s6)}
@media (max-width:979px){footer{padding-bottom:calc(var(--s6) + 84px)}}
.bigclaim{font:700 clamp(40px,8vw,124px)/1 var(--f-head);letter-spacing:-.055em;margin-bottom:var(--s8)}
.bigclaim .red{color:var(--red)}
.foot{display:grid;gap:var(--s6);padding-top:var(--s7);border-top:1px solid var(--line)}
@media (min-width:640px){.foot{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.foot{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}}
.foot-logo{width:220px;height:auto}
.foot address{font-style:normal;margin-top:var(--s5);display:grid;gap:var(--s3);font-size:var(--t-small);color:var(--ink-2)}
.foot address a{color:var(--ink);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:var(--s2);transition:color .2s}
.foot address a .i{width:18px;height:18px;color:var(--red)}
.foot address a:hover{color:var(--red)}
.foot :is(h5,.fh){margin:0 0 var(--s4);font:600 var(--t-label)/1 var(--f-body);color:var(--ink-2)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);font-size:15px}
.foot ul a{text-decoration:none;transition:color .2s}
.foot ul a:hover{color:var(--red)}
.ai-note{margin-top:var(--s8);display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4) var(--s5);border-radius:var(--r-md);background:var(--surface);font-size:var(--t-label);color:var(--ink-2)}
.ai-note .i{width:18px;height:18px;color:var(--red);margin-top:1px}
.foot-bottom{margin-top:var(--s5);display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;font-size:var(--t-label);color:var(--ink-2)}
/* Mobile: Hotline-Leiste unten */
.mcall{position:fixed;left:var(--s3);right:var(--s3);bottom:calc(var(--s3) + env(safe-area-inset-bottom,0px));z-index:55;display:flex;gap:var(--s2);transform:translateY(140%);transition:transform .6s var(--ease)}
.mcall.show{transform:none}
.mcall a{flex:1;height:var(--btn);border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;gap:var(--s2);text-decoration:none;font:600 15px/1 var(--f-body);box-shadow:0 14px 30px -12px rgba(0,0,0,.45)}
.mcall a:first-child{background:var(--red-fill);color:#fff}
.mcall a:last-child{background:var(--ink);color:var(--on-ink)}
@media (min-width:980px){.mcall{display:none}}
/* ===== Version 5: Hero vollflächig ===== */
.hero{isolation:isolate}
.hero-map{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;transition:transform 1.4s var(--ease)}
.hero .grid-bg{display:none}
.hero-grid{pointer-events:none}
.hero-grid a,.hero-grid button,.hero-grid .hud{pointer-events:auto}
.map-stage{aspect-ratio:auto;min-height:420px;perspective:none}
@media (min-width:1080px){.map-stage{min-height:560px}}
.hud-card{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.hud-card.swap{opacity:0;transform:translateY(10px)}
.hud-asset .type{display:inline-flex;align-items:center;gap:6px;color:var(--night-fg)}
.hud-asset .type i{width:6px;height:6px;border-radius:50%;background:var(--red-on-dark)}
/* ===== Band: alle CTAs auf einer Linie ===== */
.bandcard .act{margin-top:auto;min-height:var(--btn);display:flex;align-items:flex-end}
.bandform{display:flex;flex-direction:column;gap:var(--s4);flex:1}
.bandform .check{margin-top:0}
.bandform .msg{margin:0;min-height:0}
.bandform .act{width:100%;margin-top:auto}
.bandform .msg:empty{display:none}
.bandform .inline-field{width:100%}
.bandcard .num{display:block}
/* ===== Transparenz symmetrisch ===== */
.trans .wrap{position:relative;z-index:1}
.doc-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);margin-bottom:var(--s4)}
@media (min-width:980px){.doc-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}}
.dtab{appearance:none;border:0;cursor:pointer;text-align:left;background:var(--night-2);color:var(--night-fg);border-radius:var(--r-md);padding:var(--s4) var(--s5);display:grid;gap:var(--s1);min-height:96px;box-shadow:inset 0 2px 0 var(--night-line);transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.dtab strong{font:600 var(--t-h4)/1.25 var(--f-head);letter-spacing:-.02em}
@media (max-width:979px){.dtab{padding:var(--s4)}.dtab strong{font-size:17px}}
.dtab span{font-size:var(--t-label);color:var(--night-mute);line-height:1.4}
.dtab:hover{background:var(--night-3)}
.dtab[aria-selected="true"]{background:var(--night-3);box-shadow:inset 0 3px 0 var(--red-on-dark)}
.trans-pair{display:grid;gap:var(--s3)}
@media (min-width:980px){.trans-pair{grid-template-columns:1fr 1fr;gap:var(--s4);align-items:stretch}}
.trans-pair .chart{display:flex;flex-direction:column;justify-content:space-between}
.trans-pair .doc{position:relative;inset:auto;width:auto;margin:0;padding:var(--s6) var(--s5);display:flex;flex-direction:column}
@media (min-width:980px){.trans-pair .doc{padding:var(--s6)}}
.trans-pair .doc ul{margin-top:var(--s2)}
.trans-pair .doc .doc-f{margin-top:auto;padding-top:var(--s4)}
/* ===== Fallbeispiel: ein Textblock, weiche Überblendung ===== */
.phase-text{display:block;transition:opacity .22s var(--ease),transform .22s var(--ease)}
.phase-text.swap{opacity:0;transform:translateY(-6px)}
/* ===== Leistungsmerkmale (Icon-Reihe) ===== */
.featrow{display:grid;gap:0;margin-top:var(--s8);border-top:1px solid var(--night-line)}
@media (min-width:640px){.featrow{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.featrow{grid-template-columns:repeat(4,minmax(0,1fr))}}
.feat{padding:var(--s6) var(--s5) var(--s5) 0;display:grid;gap:var(--s3);align-content:start;border-bottom:1px solid var(--night-line)}
@media (min-width:1080px){.feat{border-bottom:0;padding:var(--s6) var(--s5)}.feat+.feat{border-left:1px solid var(--night-line)}.feat:first-child{padding-left:0}}
.feat .fi{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--night-line);color:var(--night-fg);transition:background .35s,color .35s,box-shadow .35s}
.feat:hover .fi{background:var(--red-fill);color:#fff;box-shadow:none}
.feat .fi .i{width:24px;height:24px}
.feat h3,.feat h4{font:600 var(--t-h4)/1.25 var(--f-head)}
.feat p{font-size:var(--t-small);color:var(--night-mute)}
/* ===== Was Sie bekommen (Bildkarten mit Liste) ===== */
.gets{display:grid;gap:var(--s3)}
@media (min-width:980px){.gets{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}}
.get{background:var(--surface);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.get:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.get .gimg{height:240px;overflow:hidden;position:relative}
.get .gimg img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.get:hover .gimg img{transform:scale(1.06)}
.get .gimg .gnum{position:absolute;left:var(--s5);top:var(--s5);width:44px;height:44px;border-radius:50%;background:rgba(18,18,18,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;font:700 15px/1 var(--f-head)}
.get .gbody{padding:var(--s6) var(--s5);display:grid;gap:var(--s3);flex:1;align-content:start}
@media (min-width:980px){.get .gbody{padding:var(--s6)}}
.get h3{font:600 var(--t-h3)/1.15 var(--f-head);padding-bottom:var(--s4);border-bottom:1px solid var(--line)}
.get p{color:var(--ink-2);font-size:var(--t-small)}
.get h3,.get h4{font:600 var(--t-h4)/1.25 var(--f-head);margin-top:var(--s2)}
.get ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.get li{display:flex;gap:var(--s3);font-size:15px}
.get li .i{width:18px;height:18px;color:var(--red);margin-top:2px}
/* ===== Gleichbleibende Qualität + Bildband ===== */
.quality{background:var(--night);border-radius:var(--r-lg);margin-inline:var(--box);overflow:hidden;padding-bottom:0}
:is(.stage,.trans,.quality)+:is(.stage,.trans,.quality){margin-top:var(--s3)}
@media (min-width:980px){:is(.stage,.trans,.quality)+:is(.stage,.trans,.quality){margin-top:var(--s4)}}
@media (min-width:980px){.quality{}}
.qfeats{display:grid;gap:var(--s5);max-width:980px;margin:0 auto var(--s8)}
@media (min-width:760px){.qfeats{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}}
.qfeat{display:flex;align-items:center;gap:var(--s4);padding-inline:var(--s5)}
@media (min-width:760px){.qfeat+.qfeat{border-left:1px solid var(--night-line)}}
.qfeat i{width:64px;height:64px;flex:none;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--night-line);transition:background .35s,box-shadow .35s}
.qfeat:hover i{background:var(--red);box-shadow:none}
.qfeat i .i{width:26px;height:26px}
.qfeat b{font:600 var(--t-h4)/1.3 var(--f-head)}
.strip{overflow:hidden;padding-bottom:var(--s7);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.strip-track{display:flex;gap:var(--s4);width:max-content;animation:strip 60s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
.strip figure{margin:0;flex:none;width:clamp(240px,30vw,420px);height:clamp(180px,22vw,300px);border-radius:var(--r-md);overflow:hidden;position:relative}
.strip figure:nth-child(3n+2){width:clamp(160px,16vw,220px)}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .6s}
.strip figure:hover img{transform:scale(1.06)}
.strip figcaption{position:absolute;left:var(--s3);bottom:var(--s3);background:rgba(18,18,18,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;border-radius:var(--r-pill);height:32px;display:flex;align-items:center;padding:0 12px;font:600 14px/1 var(--f-body)}
@keyframes strip{to{transform:translateX(-50%)}}
/* ===== Einsatzszenarien (Karussell) ===== */
.scen{position:relative}
.scen-view{overflow:hidden}
.scen-track{display:flex;gap:var(--s4);transition:transform .9s var(--ease)}
.scard{flex:none;width:100%;position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:440px;color:#fff;display:flex;align-items:flex-end;isolation:isolate;text-decoration:none}
@media (min-width:980px){.scard{width:calc(64% - var(--s2))}.scard.small{width:calc(36% - var(--s2))}}
.scard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:grayscale(1);transition:filter .8s var(--ease),transform 1.4s var(--ease)}
.scard:hover img{filter:none;transform:scale(1.04)}
.scard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(18,18,18,.88),rgba(18,18,18,0) 70%)}
.scard .sb{padding:var(--s6) var(--s5);display:grid;gap:var(--s2);max-width:62ch}
@media (min-width:980px){.scard .sb{padding:var(--s6)}}
.scard h3{font:600 var(--t-h3)/1.15 var(--f-head)}
.scard .tags{font:500 var(--t-small)/1.3 var(--f-body);color:#d9d9d5}
.scard p{color:#e4e4e0;font-size:var(--t-small)}
.scard .more{display:inline-flex;align-items:center;gap:var(--s3);font:600 15px/1 var(--f-body);margin-top:var(--s2)}
.scard .more::after{content:"";width:40px;height:2px;background:currentColor;transition:width .5s var(--ease)}
.scard:hover .more::after{width:72px}
.scard .note{position:absolute;top:var(--s5);left:var(--s5)}
.scen-nav{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s5)}
.scen-nav button{appearance:none;border:0;cursor:pointer;width:48px;height:48px;border-radius:50%;background:transparent;font:600 16px/1 var(--f-body);color:var(--ink);display:grid;place-items:center;transition:background .3s,color .3s}
.scen-nav button[aria-current="true"]{background:var(--ink);color:var(--on-ink)}
.scen-nav button:hover{background:var(--soft-2)}
.scen-nav button[aria-current="true"]:hover{background:var(--red-fill);color:#fff}
/* ===== Bento: Verlässlichkeit ===== */
.rel{display:grid;gap:var(--s3)}
@media (min-width:980px){.rel{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}}
.rcard{background:var(--night);color:var(--night-fg);border-radius:var(--r-lg);padding:var(--s6) var(--s5);min-height:400px;display:flex;flex-direction:column;gap:var(--s4);position:relative;overflow:hidden}
@media (min-width:980px){.rcard{padding:var(--s6)}}
.rcard h3{font:600 clamp(26px,2.4vw,34px)/1.12 var(--f-head);letter-spacing:-.035em}
.rcard>p{color:var(--night-mute);font-size:var(--t-small)}
.rcard .rtop{display:flex;justify-content:space-between;gap:var(--s4);align-items:flex-start}
.rcard .rbadge{width:64px;height:64px;flex:none;border-radius:18px;background:var(--red-fill);display:grid;place-items:center;color:#fff}
.rcard .rbadge .i{width:28px;height:28px}
.rrows{margin-top:auto;display:grid}
.rrows a{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);min-height:76px;border-top:1px solid var(--night-line);text-decoration:none}
.rrows small{display:block;font:500 var(--t-label)/1 var(--f-body);color:var(--night-mute);margin-bottom:var(--s2)}
.rrows strong{font:600 17px/1.2 var(--f-head)}
.rrows .arrow-link{width:44px;height:44px}
.rnums{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.rnums>div+div{border-left:1px solid var(--night-line);padding-left:var(--s5)}
.rnums .chip{margin-bottom:var(--s3);background:rgba(255,255,255,.08);color:var(--night-fg)}
.rnums b{display:block;font:700 clamp(52px,5vw,68px)/1 var(--f-head);letter-spacing:-.05em}
.rnums b small{font-size:.4em}
.rnums>div>span:not(.chip){display:block;margin-top:var(--s2);font-size:var(--t-small);color:var(--night-mute)}
.rcard.red{background:linear-gradient(150deg,#2563eb 0%,#1d4ed8 60%,#172554 100%)}
.rcard.red>p{color:rgba(255,255,255,.88)}
.rcard.red::after{content:"";position:absolute;right:-60px;bottom:-60px;width:240px;height:240px;border-radius:50%;border:1px solid rgba(255,255,255,.18);box-shadow:0 0 0 40px rgba(255,255,255,.04);animation:ring 8s ease-in-out infinite alternate}
.ricons{margin-top:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);position:relative;z-index:1}
.ricons div{display:grid;gap:var(--s3);font:600 var(--t-small)/1.3 var(--f-body)}
.ricons i{width:64px;height:64px;border-radius:18px;background:rgba(18,18,18,.45);display:grid;place-items:center;transition:transform .45s var(--ease)}
.ricons div:hover i{transform:translateY(-4px)}
.ricons .i{width:26px;height:26px}
/* ===== Zusammenarbeit (horizontale Szene) ===== */
.zw .sec-head{margin-bottom:var(--s6)}
@media (min-width:981px){.zw{height:360vh;padding:0}.zw .hz-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding-block:calc(var(--head) + var(--s3)) var(--s5)}}
.zline{height:2px;background:var(--line);margin:0 var(--gutter) var(--s5);position:relative;border-radius:2px;overflow:hidden}
.zline i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--ink),var(--red))}
.zcard{flex:none;width:min(400px,84vw);background:var(--surface);border-radius:var(--r-lg);padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:var(--s4);min-height:460px;transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
@media (min-width:980px){.zcard{padding:var(--s6)}}
.zcard:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.zcard .zh{display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}
.zcard .zn{font:700 48px/1 var(--f-head);letter-spacing:-.05em;color:var(--red);font-variant-numeric:tabular-nums}
.zcard h3{font:600 var(--t-h3)/1.15 var(--f-head)}
.zcard dl{margin:0;display:grid;gap:var(--s3)}
.zcard dl div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.zcard dt{font:600 var(--t-label)/1.5 var(--f-body);color:var(--ink-2)}
.zcard dd{margin:0;font-size:15px;line-height:1.45}
.zcard dl div:last-child dd{font-weight:600}
.hz-track .zcard.end{width:min(400px,84vw)}
.zcard.end{background:var(--night);color:var(--night-fg)}
.zcard.end p{color:var(--night-mute)}
.zcard.end .btn-row{margin-top:auto}
/* ===== Ratgeber-Karten ===== */
.guides-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s4);padding-bottom:var(--s5);border-bottom:1px solid var(--line);margin-bottom:var(--s6)}
.guides{display:grid;gap:var(--s3)}
@media (min-width:640px){.guides{grid-template-columns:1fr 1fr}}
@media (min-width:1180px){.guides{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}}
.guide{background:var(--surface);border-radius:var(--r-lg);padding:var(--s6) var(--s5);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3) var(--s4);min-height:200px;text-decoration:none;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.guide:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.guide small{font:500 var(--t-label)/1.2 var(--f-body);color:var(--ink-2);grid-column:1}
.guide h3{font:600 clamp(21px,2vw,26px)/1.2 var(--f-head);grid-column:1}
.guide .arrow-link{grid-column:2;grid-row:1 / span 2;width:48px;height:48px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
.guide:hover .arrow-link{background:var(--red-fill);color:#fff;box-shadow:none;transform:rotate(-45deg)}
.guide p{grid-column:1 / -1;align-self:end;font-size:var(--t-small);color:var(--ink-2)}
/* ===== White Label + Vorher/Nachher ===== */
.duo{display:grid;gap:var(--s3)}
@media (min-width:980px){.duo{grid-template-columns:1fr 1fr;gap:var(--s4)}}
.dcard{background:var(--night);color:var(--night-fg);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.dcard .dh{padding:var(--s6) var(--s5) var(--s5)}
@media (min-width:980px){.dcard .dh{padding:var(--s7) var(--s7) var(--s6)}}
.dcard h3{font:600 clamp(28px,3vw,40px)/1.1 var(--f-head);letter-spacing:-.035em;margin-bottom:var(--s3)}
.dcard .dh p{color:var(--night-mute);max-width:46ch}
.dstage{margin-top:auto;position:relative;min-height:400px;border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;margin-inline:var(--s4)}
@media (min-width:980px){.dstage{margin-inline:var(--s7)}}
.wl{background:linear-gradient(150deg,#2563eb,#5e0505);padding:var(--s5)}
.wl-switch{display:inline-flex;gap:var(--s1);padding:var(--s1);background:rgba(18,18,18,.4);border-radius:var(--r-pill);margin-bottom:var(--s5)}
.wl-switch button{appearance:none;border:0;cursor:pointer;height:40px;padding:0 var(--s4);border-radius:var(--r-pill);background:transparent;color:#fff;font:600 var(--t-label)/1 var(--f-body);transition:background .3s,color .3s}
.wl-switch button[aria-pressed="true"]{background:#fff;color:var(--night)}
.wl-doc{background:#fff;color:var(--ink);border-radius:var(--r-md);padding:var(--s5);box-shadow:0 30px 60px -24px rgba(0,0,0,.6);transition:transform .5s var(--ease)}
.wl-doc:hover{transform:translateY(-4px) rotate(-.4deg)}
.wl-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding-bottom:var(--s4);border-bottom:3px solid var(--wl,#1c1c1c);margin-bottom:var(--s4);transition:border-color .5s}
.wl-brand{display:flex;align-items:center;gap:var(--s3);font:700 18px/1 var(--f-head);letter-spacing:-.02em}
.wl-brand i{width:30px;height:30px;border-radius:9px;background:var(--wl,#1c1c1c);transition:background .5s}
.wl-doc dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2) var(--s4);font-size:var(--t-small)}
.wl-doc dt{color:var(--ink-2)}
.wl-doc dd{margin:0;font-weight:600}
.wl-foot{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.ba{position:relative;user-select:none;cursor:ew-resize;touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;transform:translateX(-1px)}
.ba .handle i{position:absolute;top:50%;left:50%;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--night);display:grid;place-items:center;transform:translate(-50%,-50%);box-shadow:0 10px 30px -8px rgba(0,0,0,.6)}
.ba .lbl{position:absolute;top:var(--s4);height:32px;display:flex;align-items:center;padding:0 12px;border-radius:var(--r-pill);background:rgba(18,18,18,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font:600 14px/1 var(--f-body)}
.ba .lbl.l{left:var(--s4)}.ba .lbl.r{right:var(--s4)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
/* ===== Zusagen ===== */
.prom-head{display:grid;gap:var(--s5);align-items:center;margin-bottom:var(--s7)}
@media (min-width:980px){.prom-head{grid-template-columns:auto minmax(0,1fr);gap:var(--s7)}.prom-head .big{padding-right:var(--s7);border-right:1px solid var(--night-line)}}
.prom-head .big{font:700 clamp(64px,7vw,104px)/1 var(--f-head);letter-spacing:-.05em;color:var(--red-on-dark)}
.prom-head .big small{display:block;font:600 15px/1.3 var(--f-body);letter-spacing:0;color:var(--night-mute);margin-top:var(--s2)}
.proms{columns:1;column-gap:var(--s4)}
@media (min-width:760px){.proms{columns:2}}
@media (min-width:1180px){.proms{columns:3}}
.prom{break-inside:avoid;margin-bottom:var(--s4);background:var(--night-2);border-radius:var(--r-lg);padding:var(--s6) var(--s5);display:grid;gap:var(--s4);transition:transform .5s var(--ease),background .4s}
@media (min-width:980px){.prom{padding:var(--s6)}}
.prom:hover{transform:translateY(-4px);background:var(--night-3)}
.prom .chip{justify-self:start;background:#d9d9d5;color:var(--night)}
.prom blockquote{margin:0;font:500 clamp(19px,1.7vw,23px)/1.45 var(--f-body);color:var(--night-fg)}
.prom .sig{display:flex;align-items:center;gap:var(--s3);font-size:var(--t-small);color:var(--night-mute)}
.prom .sig i{width:48px;height:48px;border-radius:50%;background:var(--red-fill);color:#fff;display:grid;place-items:center}
.prom .sig b{display:block;color:var(--night-fg);font-weight:600}
/* ===== Wer wir sind / nicht sind ===== */
.who{display:grid;gap:var(--s3)}
@media (min-width:980px){.who{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}}
.wcard{border-radius:var(--r-lg);padding:var(--s6) var(--s5);min-height:420px;display:flex;flex-direction:column;gap:var(--s4);background:var(--night);color:var(--night-fg);position:relative;overflow:hidden}
@media (min-width:980px){.wcard{padding:var(--s6)}}
.wcard h3{font:600 clamp(26px,2.4vw,34px)/1.12 var(--f-head);letter-spacing:-.035em}
.wcard p{color:var(--night-mute)}
.wcard ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.wcard li{display:flex;gap:var(--s3);font-size:15px;line-height:1.45}
.wcard li .i{width:18px;height:18px;margin-top:2px;color:var(--red-on-dark)}
.wcard.not li .i{color:var(--night-mute)}
.wcard .act{margin-top:auto}
.wcard.red{background:linear-gradient(150deg,#2563eb,#1d4ed8 60%,#172554)}
.wcard.red p{color:rgba(255,255,255,.88)}
.wcard.red::before{content:"";position:absolute;left:-80px;bottom:-120px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%);animation:drift 16s ease-in-out infinite alternate}
.wcard.red>*{position:relative;z-index:1}
/* v9.2 sanfter Modus bei „Bewegung reduzieren“: Einblenden statt Fliegen, keine treibenden Hintergründe */
html.rm-soft [data-r],html.rm-soft .fade-in{transform:none!important}
html.rm-soft .aurora i{animation:none!important}
/* v5.3 Vergleich: Szenen je Risiko */
.cmp-card{position:relative;isolation:isolate}
.cmp-card>*:not(.wm){position:relative;z-index:1}
.cmp-card .wm{position:absolute;right:-28px;bottom:-36px;width:240px;height:240px;z-index:0;pointer-events:none;color:var(--ink);opacity:.045}
.cmp-card.dbl .wm{color:var(--red-on-dark);opacity:.09}
.cmp-card .wm .i{position:absolute;inset:0;width:100%;height:100%;stroke-width:1;opacity:0;transform:scale(.86) rotate(-8deg);transition:opacity .6s var(--ease),transform .9s var(--ease)}
.cmp-card .wm .i.on{opacity:1;transform:none}
.flow{position:relative}
.flow .sc{position:absolute;inset:0;opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.flow .sc.on{opacity:1;transform:none}
.flow .axis{stroke:var(--line);stroke-width:2;fill:none}
.cmp-card.dbl .flow .axis{stroke:var(--night-line)}
.flow .tk path{stroke:var(--line);stroke-width:2}
.cmp-card.dbl .flow .tk path{stroke:var(--night-line)}
.flow .slot{stroke-width:1.5}
.flow .slot.ghost{fill:none;stroke:var(--gray);stroke-dasharray:4 4}
.flow .slot.late{fill:var(--soft-2);stroke:var(--gray)}
.flow .slot.hit{fill:var(--red);stroke:none;transform-box:fill-box;transform-origin:left;transform:scaleX(0);transition:transform .9s var(--ease) .2s}
.flow .sc.on .slot.hit{transform:none}
.flow text.r{fill:var(--red)}
.flow text.w{fill:#fff}
.flow .dev{fill:var(--soft-2);stroke:var(--gray);stroke-width:1.5}
.cmp-card.dbl .flow .dev{fill:var(--night-3);stroke:var(--night-line)}
.cmp-card.dbl .flow .dev.on{fill:var(--red);stroke:none}
.flow .node.sm{stroke-width:1.5}
.flow .ok{fill:var(--red)}
.flow .okm{stroke:#fff;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.flow .scan rect{fill:var(--night-3);stroke:var(--red-on-dark);stroke-width:1.5}
.flow .scan path{stroke:var(--night-fg);stroke-width:2.5}
.flow .scan{animation:scanb 1.6s ease-in-out infinite}
@keyframes scanb{50%{opacity:.55}}
.flow .badge{stroke-width:1.5}
.flow .badge.b1{fill:var(--soft-2);stroke:none}
.flow .badge.b2{fill:none;stroke:var(--gray);stroke-dasharray:5 5}
.flow .badge.b3{fill:var(--bg);stroke:var(--ink-2)}
.flow .badge.g{fill:var(--red);stroke:none}
.flow .sc .badge.g:nth-of-type(2){animation-delay:.1s}
.flow .drift{stroke:var(--red);stroke-dasharray:4 5;animation:dash 1.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-18}}
.flow .loop{transform-box:fill-box;transform-origin:center;animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.flow .sc .line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease) .15s}
.in .flow .sc.on .line,.flow .sc.on .line{stroke-dashoffset:0}
.cmp-metric b,.cmp-metric span,.cmp-head .chip{transition:opacity .25s var(--ease),transform .35s var(--ease)}
.cmp.swap .cmp-metric b,.cmp.swap .cmp-metric span,.cmp.swap .cmp-head .chip{opacity:0;transform:translateY(8px)}
.cmp-card.dbl{transition:box-shadow .6s var(--ease)}
.cmp.flash .cmp-card.dbl{box-shadow:0 0 0 2px var(--red),0 30px 60px -30px rgba(37,99,235,.6)}
.cmp-tabs button{position:relative;overflow:hidden}
@media (max-width:640px){.flow text{font-size:16px}}
.cmp-tabs button .pg{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--red);border-radius:3px}
.cmp-tabs.auto button[aria-selected="true"] .pg{animation:pg 6s linear forwards}
@keyframes pg{to{width:100%}}
@media (prefers-reduced-motion: reduce){.flow .drift,.flow .loop,.flow .scan{animation:none}.flow .sc,.flow .sc .line,.cmp-card .wm .i{transition:none}}
/* v5.4 */
.band-head{position:relative;z-index:1;display:grid;justify-items:center;text-align:center;gap:var(--s4);margin-bottom:var(--s7)}
.iso{gap:var(--s3)}
.iso>div{position:relative;isolation:isolate;overflow:hidden;min-height:240px;padding:var(--s6) var(--s5);border-radius:var(--r-lg);gap:var(--s2);box-shadow:inset 0 0 0 1px var(--line);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.iso>div::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--red),rgba(37,99,235,0));transform:scaleX(.35);transform-origin:left;transition:transform .8s var(--ease)}
.iso>div:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
.iso>div:hover::before{transform:none}
.iso>div.dk{background:var(--night);color:var(--night-fg);box-shadow:none}
.iso>div.dk::after{content:"";position:absolute;right:-30%;top:-40%;width:90%;height:120%;background:radial-gradient(closest-side,rgba(37,99,235,.35),transparent);z-index:-1;transition:transform 1.2s var(--ease)}
.iso>div.dk:hover::after{transform:translate(-12%,10%)}
.iso>div.dk small{color:var(--red-on-dark)}
.iso>div.dk p{color:var(--night-mute)}
.iso .num{position:absolute;right:-6px;bottom:-26px;z-index:-1;font:800 clamp(96px,9vw,132px)/1 var(--f-head);letter-spacing:-.06em;color:var(--surface);text-shadow:1.20px 0.00px 0 rgba(37,99,235,.22),1.11px 0.46px 0 rgba(37,99,235,.22),0.85px 0.85px 0 rgba(37,99,235,.22),0.46px 1.11px 0 rgba(37,99,235,.22),0.00px 1.20px 0 rgba(37,99,235,.22),-0.46px 1.11px 0 rgba(37,99,235,.22),-0.85px 0.85px 0 rgba(37,99,235,.22),-1.11px 0.46px 0 rgba(37,99,235,.22),-1.20px 0.00px 0 rgba(37,99,235,.22),-1.11px -0.46px 0 rgba(37,99,235,.22),-0.85px -0.85px 0 rgba(37,99,235,.22),-0.46px -1.11px 0 rgba(37,99,235,.22),-0.00px -1.20px 0 rgba(37,99,235,.22),0.46px -1.11px 0 rgba(37,99,235,.22),0.85px -0.85px 0 rgba(37,99,235,.22),1.11px -0.46px 0 rgba(37,99,235,.22);transition:transform 1s var(--ease)}
.iso>div.dk .num{color:var(--night);text-shadow:1.20px 0.00px 0 rgba(255,255,255,.14),1.11px 0.46px 0 rgba(255,255,255,.14),0.85px 0.85px 0 rgba(255,255,255,.14),0.46px 1.11px 0 rgba(255,255,255,.14),0.00px 1.20px 0 rgba(255,255,255,.14),-0.46px 1.11px 0 rgba(255,255,255,.14),-0.85px 0.85px 0 rgba(255,255,255,.14),-1.11px 0.46px 0 rgba(255,255,255,.14),-1.20px 0.00px 0 rgba(255,255,255,.14),-1.11px -0.46px 0 rgba(255,255,255,.14),-0.85px -0.85px 0 rgba(255,255,255,.14),-0.46px -1.11px 0 rgba(255,255,255,.14),-0.00px -1.20px 0 rgba(255,255,255,.14),0.46px -1.11px 0 rgba(255,255,255,.14),0.85px -0.85px 0 rgba(255,255,255,.14),1.11px -0.46px 0 rgba(255,255,255,.14)}
.iso>div:hover .num{transform:translateX(-14px)}
.iso .seal{position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin-bottom:var(--s3);background:linear-gradient(140deg,#d8140f,#1e40af);color:#fff;box-shadow:0 14px 28px -12px rgba(37,99,235,.7)}
.iso .seal .i{width:24px;height:24px}
.iso .seal::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px dashed rgba(37,99,235,.45);animation:spin 16s linear infinite}
.iso>div.dk .seal::after{border-color:rgba(255,255,255,.25)}
.iso strong{font-size:clamp(26px,2.4vw,32px)}
.wl-brand{gap:var(--s3)}
.wl-mark{position:relative;width:40px;height:40px;flex:none}
.wl-mark svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(.55) rotate(-25deg);transition:opacity .4s var(--ease),transform .7s var(--ease);filter:drop-shadow(0 8px 12px rgba(0,0,0,.22))}
.wl-mark svg.on{opacity:1;transform:none}
.wl-switch button{display:inline-flex;align-items:center;gap:var(--s2)}
.wl-switch .d{width:14px;height:14px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.wl-doc.pop{animation:wlpop .6s var(--ease)}
@keyframes wlpop{40%{transform:translateY(-6px) scale(1.01)}}
.flow .node.redo{fill:var(--red-soft);stroke:var(--red);stroke-width:1.5}
.flow .redo-i path{fill:none;stroke:var(--red);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.flow .ring{fill:none;stroke:var(--red);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ringp 2.4s ease-out infinite}
@keyframes ringp{from{transform:scale(1);opacity:.55}to{transform:scale(1.8);opacity:0}}
.claim .wrap{display:grid;justify-items:center;text-align:center;gap:var(--s6)}
.claim-text{max-width:1040px;font:600 clamp(28px,3.6vw,52px)/1.2 var(--f-head);letter-spacing:-.035em}
.claim-text .cw{color:color-mix(in oklab,var(--ink) var(--o,0%),var(--cw-off));transition:color .35s linear}
.claim-text .cw.on{color:var(--ink)}
@supports not (color:color-mix(in oklab,red 50%,blue)){.claim-text .cw{color:var(--cw-off)}.claim-text .cw.on{color:var(--ink)}}
.claim-facts{display:grid;gap:var(--s4);width:100%;max-width:1040px;margin-top:var(--s4)}
@media (min-width:760px){.claim-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}.claim-facts>div+div{border-left:1px solid var(--line)}}
.claim-facts>div{display:grid;gap:var(--s2);justify-items:center;padding:var(--s3) var(--s5)}
.claim-facts b{font:700 clamp(40px,4vw,56px)/1 var(--f-head);letter-spacing:-.05em;color:var(--red)}
.claim-facts span{font-size:var(--t-small);color:var(--ink-2);max-width:22ch}
@media (prefers-reduced-motion: reduce){.flow .ring,.iso .seal::after{animation:none}.claim-text .cw{color:var(--ink)}}
/* v5.5 Ohio-Bento, Verlauf, Hover-Farbe */
.rcard{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.rcard .rbadge{width:72px;height:72px;border-radius:22px;background:#f4f4f2;box-shadow:0 18px 30px -16px rgba(0,0,0,.7);transition:transform .6s var(--ease)}
.rcard .rbadge i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,#2563eb,#9b0f3f);box-shadow:inset 0 -3px 6px rgba(0,0,0,.25),0 0 0 4px rgba(37,99,235,.12)}
.rcard .rbadge i .i{width:22px;height:22px}
.rcard:hover .rbadge{transform:rotate(-8deg) scale(1.05)}
.rrows a{min-height:88px}
.rrows strong{font:500 18px/1.25 var(--f-body);color:var(--night-fg)}
.rarrow{width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);color:var(--night-fg);transition:background .35s,border-color .35s,color .35s,transform .45s var(--ease)}
.rarrow .i{width:20px;height:20px}
.rrows a:hover .rarrow{background:var(--red-fill);border-color:var(--red);color:#fff;transform:rotate(45deg)}
.rstats{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;align-items:end}
.rstats>div{display:grid;gap:var(--s3);align-content:end}
.rstats>div+div{border-left:1px solid var(--night-line);padding-left:var(--s5);margin-left:var(--s5)}
.rstats .grade{justify-self:start;display:inline-flex;align-items:center;gap:var(--s2);height:32px;padding:0 12px 0 4px;border-radius:var(--r-pill);background:#e4e4e0;color:var(--night);font:600 14px/1 var(--f-body)}
.rstats .grade i{width:24px;height:24px;border-radius:50%;background:var(--night);color:#fff;display:grid;place-items:center}
.rstats .grade .i{width:14px;height:14px}
.rstats b{display:block;font:700 clamp(56px,5.4vw,76px)/.95 var(--f-head);letter-spacing:-.05em;color:#fff}
.rstats b small{font-size:.38em;vertical-align:top;margin-left:2px;position:relative;top:.25em}
.rstats .lb{font:500 16px/1.3 var(--f-body);color:var(--night-fg)}
.rbar{display:block;height:8px;border-radius:8px;background:rgba(255,255,255,.1);overflow:hidden;margin-bottom:var(--s3)}
.rbar i{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,#2563eb,#2563eb 60%,#d6407a);transition:width 1.8s var(--ease) .3s}
.rcard.in .rbar i{width:100%}
.grad{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:radial-gradient(120% 90% at 0% 0%,#2563eb 0%,rgba(227,38,42,0) 55%),radial-gradient(90% 90% at 100% 100%,#6d0b45 0%,rgba(109,11,69,0) 60%),linear-gradient(150deg,#2563eb 0%,#a10f3c 55%,#0c4a6e 100%)}
.grad::before{content:"";position:absolute;width:190px;height:190px;left:-40px;bottom:-70px;border-radius:50%;border:34px solid rgba(255,70,90,.55);box-shadow:inset 0 10px 24px rgba(255,255,255,.25),0 20px 40px rgba(60,0,30,.45);filter:blur(1.5px);z-index:-1;animation:gfloat 9s ease-in-out infinite alternate}
.grad::after{content:"";position:absolute;width:150px;height:150px;right:-30px;top:-20px;background:linear-gradient(140deg,rgba(255,90,110,.75),rgba(150,10,60,.2));clip-path:polygon(50% 4%,96% 86%,4% 86%);filter:blur(2px);z-index:-1;transform:rotate(18deg);animation:gfloat2 11s ease-in-out infinite alternate}
@keyframes gfloat{to{transform:translate(18px,-14px) rotate(12deg)}}
@keyframes gfloat2{to{transform:translate(-16px,18px) rotate(-6deg)}}
.rcard.red::after{content:none}
.grad>*{position:relative;z-index:1}
.grad .gx{position:absolute;right:-10px;bottom:-40px;z-index:0;font:800 clamp(200px,20vw,280px)/1 var(--f-head);letter-spacing:-.07em;color:rgba(255,255,255,.07)}
.grad>p,.bandcard.grad p{color:rgba(255,255,255,.88)}
.rtiles{margin-top:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.rtiles div{display:grid;gap:var(--s1);justify-items:start}
.rtiles i{width:60px;height:60px;border-radius:18px;background:rgba(18,18,18,.82);display:grid;place-items:center;color:#fff;margin-bottom:var(--s3);box-shadow:0 14px 24px -14px rgba(0,0,0,.7);transition:transform .5s var(--ease),background .4s}
.rtiles div:hover i{transform:translateY(-4px);background:#121212}
.rtiles i .i{width:24px;height:24px}
.rtiles b{font:700 28px/1 var(--f-head);letter-spacing:-.03em}
.rtiles span{font:500 15px/1.3 var(--f-body);color:rgba(255,255,255,.9)}
@media (hover:hover){
.vcard .vmedia img,.get .gimg img,.strip img,.panel2 .pimg img,.aud-img img{filter:grayscale(1);transition:filter .8s var(--ease),transform 1.2s var(--ease)}
.vcard:hover .vmedia img,.get:hover .gimg img,.strip figure:hover img,.panel2:hover .pimg img,.aud-img:hover img{filter:none}
}
@media (prefers-reduced-motion: reduce){.grad::before,.grad::after{animation:none}}
/* ===== v6: Farbsysteme ===== */
:root{--on-ink:#fff;--red-fill:#2563eb;--cw-off:#cfcfca}
html[data-theme="dark"]{color-scheme:dark;--bg:#0d0d0d;--surface:#171717;--soft:#1f1f1f;--soft-2:#2a2a2a;--ink:#f2f2f0;--ink-2:#a9a9a5;--line:#2b2b2b;--graphite:#b4b4b0;--gray:#8a8a87;--red:#7aa7ff;--red-soft:#2b1414;--night:#161616;--night-2:#1f1f1f;--night-3:#2a2a2a;--night-line:#343434;--on-ink:#121212;--cw-off:#3a3a38;--shadow:0 1px 2px rgba(0,0,0,.5),0 24px 48px -24px rgba(0,0,0,.9)}
html[data-theme="dark"] :is(.stage,.trans,.quality,.band,.cmp-card.dbl,.rcard.dark){box-shadow:inset 0 0 0 1px var(--night-line)}
html[data-theme="dark"] .logo-cell img{filter:grayscale(1) brightness(0) invert(1);opacity:.62}
html[data-theme="dark"] .logo-cell:hover img{filter:none;opacity:1}
html[data-theme="dark"] .top.solid .logo .dark{opacity:0}
html[data-theme="dark"] .top.solid .logo .light{opacity:1}
html[data-theme="dark"] .btn:not(.light):not(:hover) .bi{background:rgba(0,0,0,.1)}
html[data-theme="dark"] .wl-doc,html[data-theme="dark"] .doc{--ink:#1c1c1c;--ink-2:#585856;--line:#dcdcd8;--soft:#ecece9;--soft-2:#e3e3df;--surface:#fff;--bg:#f4f4f2;--red:#2563eb}
html[data-theme="colorful"]{--bg:#eef5fb;--soft:#e1edf8;--soft-2:#d5e5f4;--line:#d3e2f1;--graphite:#1e3a8a;--red-soft:#e3eefc;--night:#082f49;--night-2:#0c2a5a;--night-3:#123570;--night-fg:#f0f9ff;--night-mute:#bfe3f5;--night-line:#1d4380}
html[data-theme="colorful"] :is(.hero,.sub-hero,.stage,.trans,.quality,.band,.menu,.mega,.cmp-card.dbl,.rcard.dark){background:radial-gradient(120% 80% at 0% 0%,rgba(37,99,235,.42),rgba(37,99,235,0) 60%),radial-gradient(90% 80% at 100% 100%,rgba(150,18,92,.5),rgba(150,18,92,0) 60%),linear-gradient(150deg,#0b3654,#062a40 60%,#04192a)}
html[data-theme="colorful"] .kicker::before{background:linear-gradient(90deg,#2563eb,#0e7490)}
html[data-theme="colorful"] .btn:not(.light):hover{background:linear-gradient(120deg,#2563eb,#a10f5c)}
html[data-theme="colorful"] .h2 .mute{background:linear-gradient(90deg,#2563eb,#1e3a8a);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="colorful"] .on-dark .h2 .mute{background:none;color:#f0c9d4}
html.theming,html.theming *{transition:background-color .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease),fill .6s var(--ease)!important}
.foot-logo.fl-w{display:none}
html[data-theme="dark"] .foot-logo.fl-d{display:none}
html[data-theme="dark"] .foot-logo.fl-w{display:block}
/* ===== v6: Navigation ===== */
.nav{align-items:center}
.nav .nav-t{appearance:none;border:0;background:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;gap:6px;text-decoration:none;font:500 15px/1 var(--f-body);padding:12px 12px;opacity:.86;position:relative;white-space:nowrap;transition:opacity .2s}
.nav .nav-t .i{width:15px;height:15px;transition:transform .45s var(--ease)}
.nav .nav-t::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--red-on-dark);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.top.solid:not(.mega-on) .nav .nav-t::after{background:var(--red)}
.nav .nav-t:hover,.nav .nav-t[aria-expanded="true"]{opacity:1}
.nav .nav-t:hover::after,.nav .nav-t[aria-expanded="true"]::after{transform:scaleX(1)}
.nav .nav-t[aria-expanded="true"] .i{transform:rotate(180deg)}
.top.mega-on,.top.mega-on.solid{background:var(--night);color:var(--night-fg);box-shadow:0 1px 0 var(--night-line);backdrop-filter:none;-webkit-backdrop-filter:none}
.top.mega-on .logo .light{opacity:1}.top.mega-on .logo .dark{opacity:0}
.top.mega-on .btn{background:var(--night-fg);color:var(--night)}
.top.mega-on .btn .bi{background:var(--night);color:var(--night-fg)}
.mega{position:fixed;left:0;right:0;top:0;z-index:58;background:var(--night);color:var(--night-fg);padding:calc(env(safe-area-inset-top,0px) + var(--head) + var(--s6)) 0 var(--s5);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .65s var(--ease),visibility 0s linear .65s;max-height:100vh;overflow-y:auto}
.mega.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .65s var(--ease),visibility 0s}
.mega-dim{position:fixed;inset:0;z-index:57;background:rgba(10,10,10,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.mega-dim.on{opacity:1;pointer-events:auto}
.mega-pane{display:none}
.mega-pane.on{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.05fr);gap:var(--s6);align-items:start}
.mega .mi{opacity:0;transform:translateY(14px)}
.mega.open .mega-pane.on .mi{animation:miIn .6s var(--ease) both;animation-delay:calc(var(--k,0) * 45ms + 80ms)}
@keyframes miIn{to{opacity:1;transform:none}}
.mp-intro{display:grid;gap:var(--s4);align-content:start;padding-right:var(--s5);border-right:1px solid var(--night-line)}
.mp-h{font:600 clamp(26px,2.3vw,34px)/1.12 var(--f-head);letter-spacing:-.035em}
.mp-d{color:var(--night-mute);font-size:var(--t-small);max-width:34ch}
.mp-intro .btn{justify-self:start;margin-top:var(--s2)}
.mp-ct{display:block;font:600 var(--t-label)/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--night-mute);margin-bottom:var(--s3)}
.mp-col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mp-link{display:grid;grid-template-columns:44px minmax(0,1fr) 20px;gap:var(--s3);align-items:center;padding:10px;margin-inline:-10px;border-radius:var(--r-md);text-decoration:none;transition:background .3s}
.mp-ico{width:44px;height:44px;border-radius:14px;background:var(--night-2);display:grid;place-items:center;color:var(--night-fg);transition:background .35s,color .35s}
.mp-tx b{display:block;font:600 15.5px/1.25 var(--f-body)}
.mp-tx small{display:block;font-size:14px;line-height:1.35;color:var(--night-mute);margin-top:2px}
.mp-go{color:var(--red-on-dark);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .4s var(--ease)}
.mp-link:hover,.mp-link:focus-visible{background:var(--night-2)}
.mp-link:hover .mp-ico{background:var(--red-fill);color:#fff}
.mp-link:hover .mp-go{opacity:1;transform:none}
.mp-teaser{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;max-height:360px;width:100%;text-decoration:none;color:#fff;isolation:isolate}
.mp-teaser img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:grayscale(1);transform:scale(1.04);transition:filter .8s var(--ease),transform 1.4s var(--ease)}
.mp-teaser::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.78))}
.mp-teaser:hover img{filter:none;transform:none}
.mp-tt{position:absolute;left:var(--s5);right:var(--s8);bottom:var(--s5);display:grid;gap:4px}
.mp-tt b{font:600 20px/1.2 var(--f-head);letter-spacing:-.02em}
.mp-tt small{font-size:14px;color:rgba(255,255,255,.85)}
.mp-ta{position:absolute;right:var(--s4);bottom:var(--s4);width:44px;height:44px;border-radius:50%;background:#fff;color:var(--night);display:grid;place-items:center;transition:transform .45s var(--ease),background .3s,color .3s}
.mp-teaser:hover .mp-ta{transform:rotate(45deg);background:var(--red-fill);color:#fff}
.mega-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--night-line);font-size:var(--t-label);color:var(--night-mute)}
@media (max-width:1179px){.mega,.mega-dim{display:none}}
/* ===== v6: Dropdowns ===== */
.dd{position:relative;display:none}
@media (min-width:1180px){.dd{display:block}}
.dd-btn{appearance:none;border:0;cursor:pointer;height:40px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border-radius:var(--r-pill);background:color-mix(in oklab,currentColor 9%,transparent);color:inherit;font:600 14px/1 var(--f-body);transition:background .3s}
.dd-btn:hover,.dd.open .dd-btn{background:color-mix(in oklab,currentColor 16%,transparent)}
.dd-btn>.i{width:14px;height:14px;transition:transform .4s var(--ease)}
.dd.open .dd-btn>.i{transform:rotate(180deg)}
.flag{width:20px;height:14px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.th-ico{display:grid;width:18px;height:18px}
.th-ico .i{grid-area:1/1;width:18px;height:18px;opacity:0;transform:rotate(-60deg) scale(.6);transition:opacity .4s,transform .5s var(--ease)}
html:not([data-theme]) .th-ico .i:nth-child(1),html[data-theme="light"] .th-ico .i:nth-child(1),html[data-theme="dark"] .th-ico .i:nth-child(2),html[data-theme="colorful"] .th-ico .i:nth-child(3){opacity:1;transform:none}
.dd-list{position:absolute;right:0;top:calc(100% + 10px);min-width:240px;list-style:none;margin:0;padding:6px;border-radius:var(--r-md);background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line),0 30px 60px -20px rgba(0,0,0,.35);opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .25s var(--ease),transform .35s var(--ease);z-index:5}
.dd.open .dd-list{opacity:1;transform:none;pointer-events:auto}
.dd-list li{display:flex;align-items:center;gap:var(--s3);min-height:46px;padding:6px 10px;border-radius:12px;cursor:pointer;font:500 14.5px/1.2 var(--f-body);outline:none;transition:background .2s}
.dd-list li:hover,.dd-list li:focus{background:var(--soft)}
.dd-list li>.i{margin-left:auto;width:16px;height:16px;color:var(--red);opacity:0}
.dd-list li[aria-selected="true"]{font-weight:600}
.dd-list li[aria-selected="true"]>.i{opacity:1}
.dd-list li[aria-disabled="true"]{cursor:default;color:var(--ink-2)}
.dd-list li[aria-disabled="true"]:hover{background:transparent}
.dd-list li em{margin-left:auto;font:600 14px/1 var(--f-body);font-style:normal;padding:5px 8px;border-radius:var(--r-pill);background:var(--soft);color:var(--ink-2)}
.dd-list li small{display:block;font-size:14px;color:var(--ink-2);font-weight:400;margin-top:2px}
.sw{width:30px;height:30px;border-radius:9px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.sw-light{background:linear-gradient(135deg,#f4f4f2 50%,#2563eb 50%)}
.sw-dark{background:linear-gradient(135deg,#121212 50%,#7aa7ff 50%)}
.sw-colorful{background:linear-gradient(135deg,#2563eb,#a10f5c 55%,#0b3654)}
/* ===== v6: Auswahl in Menü und Footer ===== */
.prefs{display:grid;gap:var(--s4)}
.pref{display:grid;gap:var(--s2)}
.pl{display:inline-flex;align-items:center;gap:var(--s2);font:600 var(--t-label)/1 var(--f-body);color:var(--ink-2)}
.pl .i{width:15px;height:15px}
.prefs.on-dark .pl{color:var(--night-mute)}
.pchips{display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:420px){.pc{padding:0 10px;gap:6px}}
@media (max-width:639px){.pchips.pc-lang{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}.pchips.pc-theme{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.pchips .pc{justify-content:center;padding:0 6px}}
.pc{appearance:none;border:0;cursor:pointer;height:40px;display:inline-flex;align-items:center;gap:var(--s2);padding:0 14px;border-radius:var(--r-pill);background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);font:600 14px/1 var(--f-body);transition:background .3s,color .3s,box-shadow .3s}
.pc .i{width:16px;height:16px}
.pc:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.pc[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);box-shadow:none}
.pc[aria-disabled="true"]{opacity:.45;cursor:default}
.pc[aria-disabled="true"]:hover{box-shadow:inset 0 0 0 1px var(--line)}
.prefs.on-dark .pc{background:var(--night-2);color:var(--night-fg);box-shadow:inset 0 0 0 1px var(--night-line)}
.prefs.on-dark .pc[aria-pressed="true"]{background:var(--night-fg);color:var(--night)}
.prefs.on-dark .pc[aria-disabled="true"]:hover{box-shadow:inset 0 0 0 1px var(--night-line)}
.foot-prefs{margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--line)}
@media (min-width:760px){.foot-prefs .prefs{grid-template-columns:auto auto;justify-content:space-between}}
.m-acc{list-style:none;margin:0;padding:0;display:grid}
.m-acc>li{border-bottom:1px solid var(--night-line)}
.menu .m-acc .m-g{appearance:none;border:0;background:none;cursor:pointer;color:inherit;width:100%;display:flex;justify-content:space-between;align-items:center;text-decoration:none;font:600 clamp(26px,7vw,40px)/1.2 var(--f-head);letter-spacing:-.035em;padding:var(--s3) 0;text-align:left}
.m-acc .pm{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--night-2);transition:transform .45s var(--ease),background .3s}
.m-acc .m-g[aria-expanded="true"] .pm{transform:rotate(45deg);background:var(--red-fill)}
.m-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.m-g[aria-expanded="true"]+.m-sub{grid-template-rows:1fr}
.m-sub>div{overflow:hidden;display:grid;gap:2px}
.menu .m-sub a{display:block;text-decoration:none;color:var(--night-mute);font:500 17px/1.3 var(--f-body);padding:8px 0}
.menu .m-sub a:last-child{margin-bottom:var(--s4)}
.menu .m-sub a:hover{color:var(--red-on-dark);transform:translateX(6px)}
.toast{position:fixed;left:50%;bottom:calc(var(--s7) + env(safe-area-inset-bottom,0px));z-index:120;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--night);color:var(--night-fg);padding:14px 20px;border-radius:var(--r-pill);font:600 14px/1.2 var(--f-body);box-shadow:0 20px 40px -16px rgba(0,0,0,.5);transition:opacity .3s,transform .45s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (min-width:1180px) and (max-width:1365px){.nav .nav-t{padding-inline:9px;font-size:14.5px}.nav .nav-t::after{left:9px;right:9px}.hotline .ht small{display:none}}
@media (prefers-reduced-motion: reduce){.mega,.mega .mi{transition:none;animation:none!important;opacity:1;transform:none}}
/* v6.1 */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.acard{background:none;overflow:visible;perspective:1600px;display:block;min-height:460px;cursor:pointer;outline:none}
.acard::after{content:none}
.acard .inner{position:relative;min-height:460px;height:100%;transform-style:preserve-3d;transition:transform 1s var(--ease)}
@media (hover:hover) and (pointer:fine){.acard:hover .inner{transform:rotateY(180deg)}}
.acard.flipped .inner{transform:rotateY(180deg)}
.acard:focus-visible .inner{box-shadow:0 0 0 3px var(--red);border-radius:var(--r-lg)}
.acard .face{position:absolute;inset:0;border-radius:var(--r-lg);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;isolation:isolate}
.acard .front{display:flex;flex-direction:column;justify-content:flex-end;background:var(--night-3);color:#fff}
.acard .front::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,18,18,.05) 25%,rgba(18,18,18,.9) 100%)}
.acard .front img{filter:none}
.acard .hint{font:600 14px/1 var(--f-body);color:rgba(255,255,255,.75);display:inline-flex;align-items:center;gap:8px}
.acard .hint::before{content:"";width:22px;height:2px;background:var(--red-on-dark)}
.acard .go{transform:none}
.acard:hover .go{transform:rotate(180deg)}
.acard .back{transform:rotateY(180deg);background:radial-gradient(120% 70% at 100% 0%,rgba(37,99,235,.38),rgba(37,99,235,0) 60%),var(--night);color:var(--night-fg);padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:var(--s4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.acard .back .bt{display:block;opacity:1;font-size:var(--t-small);color:var(--night-mute);line-height:1.5}
.acard .bnum{display:flex;align-items:baseline;gap:var(--s3);padding-block:var(--s3);border-block:1px solid var(--night-line)}
.acard .bnum b{font:700 52px/1 var(--f-head);letter-spacing:-.05em;color:#fff}
.acard .bnum span{font:500 14px/1.3 var(--f-body);color:var(--night-mute);max-width:16ch}
.acard .back ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.acard .back li{display:flex;align-items:center;gap:var(--s3);font:500 14.5px/1.3 var(--f-body)}
.acard .back li i{width:36px;height:36px;flex:none;border-radius:11px;background:var(--night-2);display:grid;place-items:center;color:var(--red-on-dark)}
.acard .back li .i{width:17px;height:17px}
.acard .bgo{margin-top:auto;display:flex;justify-content:space-between;align-items:center;text-decoration:none;font:600 15px/1 var(--f-body);padding-top:var(--s3);border-top:1px solid var(--night-line)}
.acard .bgo:hover .rarrow{background:var(--red-fill);border-color:var(--red-fill);color:#fff;transform:rotate(45deg)}
.flow .idc rect{fill:#fff;stroke:none}
.flow .idc path{stroke:#121212;stroke-width:1}
.flow .idc text{fill:#3a3a3a;font-weight:600}
.flow .sc.on .idc{animation:idc .7s var(--ease) both;animation-delay:calc(var(--n) * 110ms + 120ms)}
@keyframes idc{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wl-switch button{height:44px;padding:0 var(--s4);min-width:96px;justify-content:center}
.wl-switch button img{height:16px;width:auto;max-width:84px;filter:brightness(0) invert(1);opacity:.8;transition:filter .35s,opacity .35s}
.wl-switch button:hover img{opacity:1}
.wl-switch button[aria-pressed="true"] img{filter:none;opacity:1}
.wl-brand img{height:26px;width:auto;max-width:150px;transition:opacity .25s}
.proms{columns:auto;display:grid;gap:var(--s4)}
@media (min-width:760px){.proms{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){.proms{grid-template-columns:repeat(3,minmax(0,1fr))}}
.prom{margin:0;align-content:start;grid-template-rows:auto 1fr auto}
.prom.pcta{grid-template-rows:auto 1fr auto}
.prom.pcta blockquote{font-weight:600}
.prom.pcta .btn{justify-self:start}
.prom.pcta .chip{background:rgba(255,255,255,.92)}
.tst{overflow:hidden}
.tst-head{display:grid;gap:var(--s5);align-items:end;margin-bottom:var(--s7)}
@media (min-width:980px){.tst-head{grid-template-columns:minmax(0,1fr) auto}}
.tst-score{display:grid;gap:4px;justify-items:start;padding:var(--s4) var(--s5);border-radius:var(--r-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.tst-score b{font:600 16px/1.2 var(--f-head)}
.tst-score small{font-size:14px;color:var(--ink-2);max-width:30ch}
.stars{display:inline-flex;gap:2px;color:var(--gray)}
.stars .i{width:16px;height:16px;fill:currentColor;stroke-width:1.2;opacity:.45}
.tst-track{display:flex;gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--s2) max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)));scroll-padding-inline:max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)));cursor:grab}
.tst-track.drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.tcard{flex:none;width:min(420px,84vw);scroll-snap-align:start;margin:0;background:var(--surface);border-radius:var(--r-lg);padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:var(--s4);box-shadow:inset 0 0 0 1px var(--line);transition:transform .5s var(--ease),box-shadow .5s var(--ease);position:relative;overflow:hidden}
.tcard:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
.tcard::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--red-fill),rgba(37,99,235,0));transform:scaleX(.3);transform-origin:left;transition:transform .8s var(--ease)}
.tcard:hover::before{transform:none}
.ttop{display:flex;justify-content:space-between;align-items:center}
.muster{font:600 14px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:var(--r-pill);background:var(--soft);color:var(--ink-2)}
.tq .i{width:34px;height:34px;color:var(--red);stroke-width:1.4}
.tcard blockquote{margin:0;font:500 clamp(18px,1.5vw,21px)/1.45 var(--f-body);color:var(--ink-2);flex:1}
.tcard figcaption{display:flex;align-items:center;gap:var(--s3);padding-top:var(--s4);border-top:1px solid var(--line)}
.tcard .av{width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 15px/1 var(--f-head);color:#fff;background:linear-gradient(140deg,#2563eb,#1e40af);box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--line)}
.tcard figcaption strong{display:block;font:600 15px/1.2 var(--f-body)}
.tcard figcaption em{display:block;font-style:normal;font-size:14px;color:var(--ink-2)}
.tcard .tt{margin-left:auto;font:600 14px/1 var(--f-body);padding:7px 10px;border-radius:var(--r-pill);background:var(--red-soft);color:var(--red)}
.tst-nav{display:flex;align-items:center;gap:var(--s5);margin-top:var(--s6)}
.tst-nav .arrows{display:flex;gap:var(--s2)}
.tst-nav .arrows button{appearance:none;border:0;cursor:pointer;width:52px;height:52px;border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;transition:background .3s,color .3s}
.tst-nav .arrows button:hover{background:var(--ink);color:var(--on-ink)}
.tbar{flex:1;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.tbar i{display:block;height:100%;width:20%;background:var(--red-fill);border-radius:3px;transition:width .3s}
.acard,.acard .inner{min-height:500px}
.acard .back{gap:var(--s3);padding:var(--s5)}
.acard .bnum b{font-size:44px}
@media (prefers-reduced-motion: reduce){.acard .inner{transition:none}}
/* v6.2 */
.top.hide{transform:none}
.hl{background-image:linear-gradient(var(--hlc),var(--hlc));background-repeat:no-repeat;background-position:0 92%;background-size:0% .14em;transition:background-size 1.2s var(--ease) .55s;-webkit-box-decoration-break:clone;box-decoration-break:clone;--hlc:rgba(37,99,235,.55)}
.in .hl,.hl.in{background-size:100% .14em}
.on-dark .hl{--hlc:rgba(122,167,255,.7)}
.mute .hl{--hlc:rgba(37,99,235,.4)}
.typer{color:var(--red-on-dark)}
.caret{display:inline-block;width:.07em;height:.9em;margin-left:.06em;vertical-align:-.08em;background:var(--red-on-dark);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.rings{display:grid;gap:var(--s5);max-width:1180px;margin:0 auto var(--s8)}
@media (min-width:980px){.rings{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}}
.ring{display:flex;align-items:center;gap:var(--s5);padding:var(--s4) var(--s5);border-radius:var(--r-lg);transition:background .4s}
.ring:hover{background:rgba(255,255,255,.04)}
.rg{position:relative;width:112px;height:112px;flex:none;display:grid;place-items:center}
.rg>svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.rg .rt{fill:none;stroke:rgba(255,255,255,.1);stroke-width:7}
.rg .rv{fill:none;stroke-width:7;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.8s var(--ease) .2s}
.ring.in .rv{stroke-dashoffset:0}
.rg i{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:var(--night-fg);transition:transform .6s var(--ease)}
.ring:hover .rg i{transform:scale(1.12)}
.rg i .i{width:28px;height:28px}
.rx b{display:block;font:700 clamp(34px,3vw,44px)/1 var(--f-head);letter-spacing:-.04em;color:#fff}
.rx>span{display:block;margin-top:var(--s2);font:500 15px/1.35 var(--f-body);color:var(--night-mute);max-width:22ch}
@media (min-width:980px){
.gets{display:flex;gap:var(--s4);height:620px}
.get{flex:1 1 0;min-width:0;position:relative;transition:flex .9s var(--ease),box-shadow .6s var(--ease);cursor:pointer}
.get.on{flex:2.3 1 0;cursor:default}
.get:hover{transform:none}
.get .gimg{order:2;height:280px;margin-top:auto}
.get .gbody{min-width:440px;padding:var(--s6)}
.get .gbody>*:not(h3){opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
.get.on .gbody>*{opacity:1;transform:none;transition:opacity .5s var(--ease) .35s,transform .6s var(--ease) .35s}
.get:not(.on){box-shadow:inset 18px 0 30px -24px rgba(0,0,0,.35)}
.get.on .gimg img{filter:none}
.get .gbody h3{white-space:nowrap}
}
.tst{background:var(--night);border-radius:var(--r-lg);margin-inline:var(--box);padding-block:var(--s8)}
@media (min-width:980px){.tst{padding-block:var(--s9)}}
.tst-head{grid-template-columns:auto;align-items:center}
@media (min-width:980px){.tst-head{grid-template-columns:auto minmax(0,1fr);gap:var(--s7)}.tst-head .tst-score{padding:0}}
.tst .tst-score{background:none;box-shadow:none;padding:0;justify-items:end;text-align:right}
@media (max-width:979px){.tst .tst-score{justify-items:start;text-align:left}}
.tst .tst-score b{font:700 clamp(56px,6vw,88px)/1 var(--f-head);letter-spacing:-.05em;color:var(--night-fg)}
.tst .tst-score small{color:var(--night-mute)}
.tst .stars{color:var(--red-on-dark)}
.tst .tcard{background:var(--night-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.tst .tcard blockquote{color:var(--night-fg)}
.tst .tcard figcaption{border-top-color:var(--night-line)}
.tst .tcard figcaption em{color:var(--night-mute)}
.tst .tcard .av{box-shadow:0 0 0 3px var(--night-2),0 0 0 4px var(--night-line)}
.tst .muster{background:rgba(255,255,255,.08);color:var(--night-mute)}
.tst .tcard .tt{position:absolute;top:var(--s5);left:var(--s5);background:#e4e4e0;color:var(--night)}
.tst .ttop{justify-content:flex-end}
.tst .ttop .stars{display:none}
.tst .tq{margin-top:var(--s5)}
.tst .tst-nav .arrows button{background:var(--night-2);color:var(--night-fg);box-shadow:inset 0 0 0 1px var(--night-line)}
.tst .tst-nav .arrows button:hover{background:var(--night-fg);color:var(--night)}
.tst .tbar{background:var(--night-line)}
html[data-theme="colorful"] .tst{background:radial-gradient(120% 80% at 0% 0%,rgba(37,99,235,.42),rgba(37,99,235,0) 60%),radial-gradient(90% 80% at 100% 100%,rgba(150,18,92,.5),rgba(150,18,92,0) 60%),linear-gradient(150deg,#0b3654,#062a40 60%,#04192a)}
.lbar{display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s3);align-items:center;font:600 14px/1 var(--f-body);color:var(--ink-2)}
.lbar b{font:700 15px/1 var(--f-head);color:var(--ink)}
.lbar i{grid-column:1/-1;height:8px;border-radius:8px;background:var(--soft-2);overflow:hidden}
.lbar em{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,#2563eb,#2563eb 55%,#0e7490);transition:width 1.6s var(--ease) .3s}
.in .lbar em{width:var(--w)}
@media (prefers-reduced-motion: reduce){.caret{animation:none}.hl{transition:none}}
/* v6.3 Seitenabstand */
:is(.stage,.trans,.quality,.band,.tst) .wrap{max-width:calc(var(--maxw) - 2 * var(--box));padding-inline:calc(var(--gutter) - var(--box))}
.tst-track{padding-inline:max(16px,calc((100vw - var(--maxw)) / 2 + var(--gutter) - var(--box)));scroll-padding-inline:max(16px,calc((100vw - var(--maxw)) / 2 + var(--gutter) - var(--box)))}
.tst .tsq .i{width:44px;height:44px;color:var(--red-on-dark);stroke-width:1.4}
.tst .tst-score small{max-width:24ch}
.mega{height:100vh;height:100dvh;display:flex;flex-direction:column}
.mega>.wrap{flex:1;display:flex;flex-direction:column;width:100%}
.mega-foot{margin-top:auto}
.mega-pane.on{padding-top:var(--s4)}
@media (max-width:1179px){.mega,.mega-dim{display:none}}
/* v6.6 */
.top.scrolled:not(.solid):not(.mega-on){background:rgba(16,16,16,.72);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 1px 0 rgba(255,255,255,.06)}
html[data-theme="colorful"] .top.scrolled:not(.solid):not(.mega-on){background:rgba(43,10,27,.78)}
.dd-lang .dd-list{display:grid;grid-template-columns:1fr 1fr;min-width:420px;gap:2px}
.dd-theme .dd-list{min-width:280px}
.sw{width:52px;height:38px;border-radius:10px;position:relative;overflow:hidden;flex:none;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:box-shadow .3s}
.sw i{position:absolute;left:0;right:0;top:0;height:9px}
.sw b{position:absolute;left:8px;height:3px;border-radius:2px}
.sw b:nth-of-type(1){top:16px;width:28px}
.sw b:nth-of-type(2){top:23px;width:18px}
.sw em{position:absolute;right:7px;bottom:7px;width:12px;height:7px;border-radius:4px}
.sw-light{background:#f4f4f2}.sw-light i{background:#fff;box-shadow:0 1px 0 #e3e3df}.sw-light b:nth-of-type(1){background:#1c1c1c}.sw-light b:nth-of-type(2){background:#c4c4c0}.sw-light em{background:#2563eb}
.sw-dark{background:#121212}.sw-dark i{background:#222}.sw-dark b:nth-of-type(1){background:#f2f2f0}.sw-dark b:nth-of-type(2){background:#4a4a48}.sw-dark em{background:#7aa7ff}
.sw-colorful{background:linear-gradient(150deg,#d4161a,#8f1047 55%,#082f49)}.sw-colorful i{background:rgba(255,255,255,.14)}.sw-colorful b:nth-of-type(1){background:#fff}.sw-colorful b:nth-of-type(2){background:rgba(255,255,255,.45)}.sw-colorful em{background:#fff}
.dd-list li[aria-selected="true"] .sw{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--red)}
.dd-list li:hover .sw{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--line)}
.dd-list li[aria-selected="true"]:hover .sw{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--red)}
.mega-band{margin-top:auto;padding-top:var(--s6);border-top:1px solid var(--night-line);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--s7);align-items:center}
.mb-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.mb-stats>div{padding-right:var(--s4)}
.mb-stats>div+div{border-left:1px solid var(--night-line);padding-left:var(--s5)}
.mb-stats b{display:block;font:700 clamp(36px,3vw,52px)/1 var(--f-head);letter-spacing:-.05em;color:#fff}
.mb-stats span{display:block;margin-top:var(--s2);font:500 14px/1.35 var(--f-body);color:var(--night-mute)}
.mb-eu{display:grid;gap:var(--s4)}
.mb-eh{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4)}
.mb-eh .mp-ct{margin:0;white-space:nowrap}
.mb-eh p{white-space:nowrap}
.mb-eh p{font-size:14px;color:var(--night-mute);text-align:right}
.mb-flags{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s2)}
.mbf{position:relative;display:grid;justify-items:center;gap:6px;padding:10px 0;border-radius:12px;background:var(--night-2);transition:background .3s,transform .45s var(--ease)}
.mbf .flag{width:30px;height:20px;border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.mbf small{font:600 14px/1 var(--f-body);color:var(--night-mute);opacity:0;transform:translateY(-2px);transition:opacity .3s,transform .3s;white-space:nowrap;position:absolute;bottom:-18px}
.mbf:hover{background:var(--night-3);transform:translateY(-3px)}
.mbf:hover small{opacity:1;transform:none}
.mega .mbf{opacity:0;transform:translateY(10px)}
.mega.open .mbf{animation:miIn .5s var(--ease) both;animation-delay:calc(var(--f) * 40ms + 500ms)}
.mega.open .mega-band .mi{animation:miIn .6s var(--ease) both;animation-delay:calc(var(--k,0) * 45ms + 80ms)}
.mega-foot{margin-top:var(--s5)}
@media (max-width:1179px){.mega,.mega-dim{display:none}}
@media (prefers-reduced-motion: reduce){.mega .mbf{animation:none!important;opacity:1;transform:none}}
/* v6.7 */
.aurora i:nth-child(2){display:none}
.aurora i:nth-child(1){opacity:.24}
.split{background:radial-gradient(90% 80% at 0% 0%,rgba(37,99,235,.34),rgba(37,99,235,0) 62%),radial-gradient(60% 60% at 100% 100%,rgba(37,99,235,.12),rgba(37,99,235,0) 70%),#151515}
.split .aurora{display:none}
.tst+section{padding-top:var(--s9)!important}
.tst{margin-top:0}
.wl{background:radial-gradient(90% 70% at 0% 0%,rgba(37,99,235,.3),rgba(37,99,235,0) 60%),var(--night-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.wl-switch{background:rgba(255,255,255,.06)}
.wl-switch button[aria-pressed="true"]{background:#f3f3f1}
.wl-doc{background:#f7f7f5;box-shadow:0 24px 48px -28px rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,0,0,.04)}
.wl-top{border-bottom-width:2px;border-bottom-color:color-mix(in oklab,var(--wl,#1c1c1c) 70%,transparent)}
.wl-brand img{height:22px}
.wl-doc .chip{background:#e9e9e6;color:#3a3a3a}
.wl-doc dd{font-weight:500}
/* v6.8 Phasen-Showcase */
.phx{display:grid;gap:var(--s5)}
@media (min-width:980px){.phx{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s7);align-items:stretch}}
.phx-list{display:grid;gap:var(--s3);align-content:start;order:2}
@media (min-width:980px){.phx-list{order:0}}
.phx-item{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2) var(--s4);padding:var(--s5);border-radius:var(--r-lg);background:transparent;cursor:pointer;outline:none;overflow:hidden;transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.phx-item:hover{background:color-mix(in oklab,var(--surface) 60%,transparent)}
.phx-item.on{background:var(--surface);box-shadow:var(--shadow)}
.phx-item:focus-visible{box-shadow:0 0 0 2px var(--red)}
.phx-item .pn{font:700 15px/1 var(--f-head);color:var(--ink-2);padding-top:6px;transition:color .4s}
.phx-item.on .pn{color:var(--red)}
.phx-item .pt b{display:block;font:600 clamp(24px,2.2vw,32px)/1.15 var(--f-head);letter-spacing:-.03em;color:var(--ink-2);transition:color .4s}
.phx-item.on .pt b{color:var(--ink)}
.phx-item .pt small{display:block;margin-top:var(--s2);font-size:var(--t-small);color:var(--ink-2)}
.phx-item .pd{grid-column:2;display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.phx-item.on .pd{grid-template-rows:1fr}
.phx-item .pd>div{overflow:hidden}
.phx-item .pdh{display:block;margin-top:var(--s4);font:600 var(--t-label)/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.phx-item ul{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s2)}
.phx-item li{display:flex;gap:var(--s3);font-size:15px}
.phx-item li .i{width:18px;height:18px;color:var(--red);margin-top:2px}
.phx-item .pbar{position:absolute;left:var(--s5);right:var(--s5);bottom:0;height:3px;border-radius:3px;background:var(--soft-2);opacity:0;transition:opacity .3s}
.phx.auto .phx-item.on .pbar{opacity:1}
.phx-item .pbar em{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--red-fill),#2563eb)}
.phx.auto.vis .phx-item.on .pbar em{animation:pbar 6.5s linear forwards}
@keyframes pbar{to{width:100%}}
.phx-stage{position:relative;border-radius:var(--r-lg);overflow:hidden;height:clamp(300px,78vw,460px);min-width:0;width:100%;background:var(--night-3);isolation:isolate}
@media (min-width:980px){.phx-stage{height:auto;min-height:560px}}
.phx-img{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.06);transition:opacity .9s var(--ease),transform 1.6s var(--ease)}
.phx-img.on{opacity:1;transform:none}
.phx-img img{width:100%;height:100%;object-fit:cover}
.phx-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55))}
.phx-cap{position:absolute;left:var(--s5);bottom:var(--s5);z-index:1;display:grid;gap:6px;padding:var(--s4) var(--s5);border-radius:var(--r-md);background:rgba(18,18,18,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;max-width:calc(100% - 2 * var(--s5));transform:translateY(12px);opacity:0;transition:opacity .6s var(--ease) .3s,transform .7s var(--ease) .3s}
.phx-img.on .phx-cap{opacity:1;transform:none}
.phx-cap span{font:600 14px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:#bcd2ff}
.phx-cap b{font:600 clamp(17px,1.5vw,21px)/1.25 var(--f-head)}
.phx-badge{position:absolute;top:var(--s5);right:var(--s5);z-index:1;display:inline-flex;align-items:center;gap:var(--s2);height:36px;padding:0 14px;border-radius:var(--r-pill);background:rgba(255,255,255,.92);color:var(--night);font:600 14px/1 var(--f-body)}
.phx-badge .i{width:16px;height:16px;color:var(--red-fill)}
/* v6.8 Hersteller offen */
.brands{overflow:hidden}
.brands-head{display:grid;gap:var(--s5);align-items:end;margin-bottom:var(--s7)}
@media (min-width:980px){.brands-head{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s8)}}
.brand-rows{display:grid;gap:var(--s3)}
.lrow{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.btrack{display:flex;width:max-content;animation:bmove 46s linear infinite}
.lrow.rev .btrack{animation-direction:reverse;animation-duration:52s}
.lrow:hover .btrack{animation-play-state:paused}
@keyframes bmove{to{transform:translateX(-50%)}}
.btrack .logo-cell{flex:none;width:clamp(150px,14vw,220px);height:88px;margin-right:var(--s4);border-radius:var(--r-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .4s,transform .5s var(--ease)}
.btrack .logo-cell:hover{box-shadow:inset 0 0 0 1px var(--line),var(--shadow);transform:translateY(-3px)}
.dev{display:flex;flex-direction:column;align-items:center;gap:var(--s5);margin-top:var(--s7)}
.dev-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);width:100%;max-width:880px}
@media (min-width:760px){.dev-chips{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dev-chips .dchip{justify-content:center;white-space:nowrap}
@media (max-width:759px){.dev-chips .dchip{white-space:normal;height:auto;min-height:48px;line-height:1.25;text-align:center;padding:8px 12px;font-size:14px}}
.dchip{display:inline-flex;align-items:center;gap:var(--s2);height:40px;padding:0 16px;border-radius:var(--r-pill);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font:600 14px/1 var(--f-body);color:var(--ink);transition:background .3s,color .3s}
.dchip .i{width:15px;height:15px;color:var(--red)}
.dchip:hover{background:var(--ink);color:var(--on-ink)}
.bridge{display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;gap:var(--s4);margin-top:var(--s9)}
@media (min-width:980px){.bridge{grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s6);text-align:left}.bridge p{grid-column:2}.bridge .bl:last-child{grid-column:3}}
.bridge .bl{display:none;height:1px;background:linear-gradient(90deg,transparent,var(--line));width:100%;transform:scaleX(0);transform-origin:right;transition:transform 1.4s var(--ease) .3s}
.bridge .bl:last-child{background:linear-gradient(90deg,var(--line),transparent);transform-origin:left}
@media (min-width:980px){.bridge .bl{display:block}.bridge .bridge-go{grid-column:2;justify-self:center}}
.bridge.in .bl{transform:none}
.bridge p{font:600 clamp(26px,3vw,40px)/1.15 var(--f-head);letter-spacing:-.035em;text-align:center}
.bridge p span{color:var(--red)}
.bridge-go{display:inline-flex;align-items:center;gap:var(--s3);text-decoration:none;font:600 15px/1 var(--f-body);color:var(--ink-2);transition:color .3s}
.bridge-go .bi{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line);transform:rotate(90deg);transition:background .3s,color .3s}
.bridge-go:hover{color:var(--ink)}
.bridge-go:hover .bi{background:var(--red-fill);color:#fff;box-shadow:none}
.brands-fine{margin-top:var(--s6);font-size:var(--t-label);color:var(--ink-2);text-align:center}
/* v6.8 Anfrage-Panel */
.pilot-card{background:var(--surface);border-radius:var(--r-lg);padding:var(--s6) var(--s5);display:grid;gap:var(--s5);align-content:start}
@media (min-width:980px){.pilot-card{padding:var(--s7)}}
.pilot-card ol{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);counter-reset:pc}
.pilot-card li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px var(--s4);counter-increment:pc}
.pilot-card li::before{content:"0" counter(pc);grid-row:span 2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--red-soft);color:var(--red);font:700 14px/1 var(--f-head)}
.pilot-card li b{font:600 var(--t-h4)/1.25 var(--f-head)}
.pilot-card li span{font-size:var(--t-small);color:var(--ink-2)}
.pilot-card .btn{justify-self:start}
.drawer{position:fixed;inset:0;z-index:110;visibility:hidden;pointer-events:none}
.drawer.open{visibility:visible;pointer-events:auto}
.dr-dim{position:absolute;inset:0;background:rgba(10,10,10,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .5s var(--ease)}
.drawer.open .dr-dim{opacity:1}
.dr-panel{position:absolute;top:0;right:0;bottom:0;width:min(620px,100vw);background:var(--bg);color:var(--ink);display:flex;flex-direction:column;box-shadow:-30px 0 80px -30px rgba(0,0,0,.5);transform:translateX(102%);transition:transform .7s var(--ease);border-radius:var(--r-lg) 0 0 var(--r-lg)}
@media (max-width:639px){.dr-panel{border-radius:0}}
.drawer.open .dr-panel{transform:none}
.dr-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);padding:var(--s6) var(--s5) var(--s5);border-bottom:1px solid var(--line)}
@media (min-width:640px){.dr-head{padding:var(--s7) var(--s6) var(--s5)}}
.dr-head h2{font:600 clamp(26px,3vw,36px)/1.1 var(--f-head);letter-spacing:-.035em;margin-top:var(--s3)}
.dr-head p{margin-top:var(--s3);font-size:var(--t-small);color:var(--ink-2);max-width:42ch}
.dr-x{appearance:none;border:0;cursor:pointer;flex:none;width:48px;height:48px;border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;transition:background .3s,color .3s,transform .5s var(--ease)}
.dr-x:hover{background:var(--ink);color:var(--on-ink);transform:rotate(90deg)}
.dr-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:var(--s5)}
@media (min-width:640px){.dr-body{padding:var(--s6)}}
.dr-body .form{background:none;padding:0;border-radius:0;opacity:1;transform:none}
.dr-body .form>*{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.drawer.open .dr-body .form>*{opacity:1;transform:none;transition-delay:.25s}
.dr-foot{padding:var(--s4) var(--s5);border-top:1px solid var(--line)}
@media (min-width:640px){.dr-foot{padding:var(--s4) var(--s6)}}
/* v10.6 Pilot-Anfrage: Konfigurator zuerst, dann vier Kontaktwege, Formular auf Wunsch */
.pd-feat{position:relative;overflow:hidden;display:grid;gap:var(--s3);justify-items:start;padding:clamp(24px,3vw,32px);border-radius:var(--r-lg);background:radial-gradient(90% 90% at 100% 0%,rgba(37,99,235,.45),rgba(37,99,235,0) 60%),var(--night);color:var(--night-fg);box-shadow:0 40px 80px -40px rgba(8,20,40,.6)}
.pd-feat h3{font:600 clamp(24px,2.6vw,30px)/1.1 var(--f-head);letter-spacing:-.03em;margin:0}
.pd-feat p{margin:0;color:var(--night-mute);max-width:36ch}
.pd-feat h3,.pd-feat .pd-tag{margin-right:96px}
.pd-ic{position:absolute;right:18px;top:18px;width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));pointer-events:none}
.pd-tag{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:99px;background:rgba(255,255,255,.1);font:700 14px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:#7dd3fc}
.pd-tag .i{width:14px;height:14px}
.pd-btns{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin-top:var(--s2)}
.pd-alt{display:inline-flex;align-items:center;gap:6px;color:var(--night-fg);font:600 15px/1 var(--f-body);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:3px;transition:border-color .2s}
.pd-alt:hover{border-color:currentColor}.pd-alt .i{width:16px;height:16px}
.pd-or{display:flex;align-items:center;gap:var(--s3);margin:var(--s6) 0 var(--s4);font:700 14px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.pd-or::after{content:"";flex:1;height:1px;background:var(--line)}
.pd-acts{display:grid;gap:var(--s3)}
@media (min-width:560px){.pd-acts{grid-template-columns:1fr 1fr}}
.pd-act{appearance:none;border:0;cursor:pointer;text-align:left;font:inherit;color:var(--ink);text-decoration:none;position:relative;display:grid;align-content:start;gap:var(--s3);min-height:150px;padding:var(--s4) var(--s4) var(--s5);border-radius:var(--r-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .25s,transform .35s var(--ease),background .25s}
.pd-act:hover{box-shadow:inset 0 0 0 1.5px var(--ink),0 20px 40px -28px rgba(8,20,40,.45);transform:translateY(-2px)}
.pd-act.on{box-shadow:inset 0 0 0 1.5px var(--red)}
.pd-i{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--soft);color:var(--red);transition:background .25s,color .25s}
.pd-i .i{width:22px;height:22px}
.pd-act:hover .pd-i,.pd-act.on .pd-i{background:var(--red);color:#fff}
.pd-t b{display:block;font:600 16px/1.2 var(--f-head)}
.pd-t small{display:block;margin-top:4px;color:var(--ink-2);font-size:14px;line-height:1.35}
.pd-ar{position:absolute;top:var(--s4);right:var(--s4)}
.pd-ar .i{width:18px;height:18px;color:var(--ink-2);transition:transform .25s,color .25s}
.pd-act:hover .pd-ar .i{transform:translateX(3px);color:var(--red)}
.pd-act.on .pd-ar .i{transform:rotate(90deg)}
.pd-form{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line)}
.pd-form[hidden]{display:none}
html.dr-on{overflow:hidden}
@media (prefers-reduced-motion: reduce){.btrack{animation:none}.dr-panel,.phx-img{transition:none}}
/* v6.9 Zusagen: Vollbild mit gestapelten Karten */
.zs{background:radial-gradient(70% 50% at 50% 0%,rgba(37,99,235,.22),rgba(37,99,235,0) 70%),var(--night);color:var(--night-fg);padding-block:var(--s9) var(--s10)}
html[data-theme="colorful"] .zs{background:radial-gradient(120% 80% at 0% 0%,rgba(37,99,235,.42),rgba(37,99,235,0) 60%),radial-gradient(90% 80% at 100% 100%,rgba(150,18,92,.5),rgba(150,18,92,0) 60%),linear-gradient(150deg,#0b3654,#062a40 60%,#04192a)}
.zs-head{display:grid;justify-items:center;text-align:center;gap:var(--s4);margin-bottom:var(--s8)}
.zs-head .lead{color:var(--night-mute)}
.zs-stack{display:grid;gap:var(--s5);max-width:1180px}
.zs-card{position:sticky;top:calc(var(--head) + var(--s5) + var(--i) * 16px);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4) var(--s6);align-items:center;min-height:240px;padding:var(--s6) var(--s5);border-radius:var(--r-lg);background:var(--night-2);box-shadow:0 -1px 0 rgba(255,255,255,.06) inset,0 -24px 50px -30px rgba(0,0,0,.9);transform-origin:center top}
@media (min-width:980px){.zs-card{grid-template-columns:150px minmax(0,1fr) auto;padding:var(--s7);top:calc(var(--head) + var(--s7) + var(--i) * 18px)}}
.zs-card:nth-child(even):not(.zs-cta){background:#1c1c1c}
.zs-card .zn{font:700 clamp(48px,6vw,96px)/1 var(--f-head);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:0;background:linear-gradient(180deg,#7aa7ff,#0e7490);-webkit-background-clip:text;background-clip:text;align-self:start}
.zs-card .zn .i{width:56px;height:56px;color:#fff;stroke-width:1.4}
.zs-card .zq{display:grid;gap:var(--s4);justify-items:start}
.zs-card .chip{background:#e4e4e0;color:var(--night)}
.zs-card blockquote{margin:0;font:500 clamp(20px,2vw,28px)/1.4 var(--f-body);color:var(--night-fg);max-width:46ch}
.zsig{grid-column:1/-1;display:flex;align-items:center;gap:var(--s3);font-size:var(--t-small);color:var(--night-mute)}
@media (min-width:980px){.zsig{grid-column:auto;flex-direction:column;align-items:flex-end;text-align:right}}
.zsig i{width:52px;height:52px;border-radius:50%;background:var(--red-fill);color:#fff;display:grid;place-items:center;flex:none}
.zsig b{display:block;color:var(--night-fg);font-weight:600}
.zs-card.zs-cta{background:radial-gradient(120% 90% at 0% 0%,#2563eb 0%,rgba(227,38,42,0) 55%),radial-gradient(90% 90% at 100% 100%,#6d0b45 0%,rgba(109,11,69,0) 60%),linear-gradient(150deg,#2563eb 0%,#a10f3c 55%,#0c4a6e 100%)}
.zs-cta .zn{background:none;display:grid;place-items:center;width:clamp(64px,7vw,96px);height:clamp(64px,7vw,96px);border-radius:50%;background-color:rgba(255,255,255,.14)}
.zs-cta .chip{background:rgba(255,255,255,.92)}
.zs-cta blockquote{font-weight:600}
.zs-cta .btn{grid-column:1/-1;justify-self:start}
@media (min-width:980px){.zs-cta .btn{grid-column:auto;justify-self:end}}
@media (prefers-reduced-motion: reduce){.zs-card{position:relative;top:auto}}
/* v7.0 Ablauf-Karten in Farbe */
.zw .zcard{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(120% 70% at 100% 0%,rgba(37,99,235,var(--za,.06)),rgba(37,99,235,0) 62%),var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.zw .zcard::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--red-fill),#0e7490);transform:scaleX(var(--zb,.25));transform-origin:left;transition:transform .8s var(--ease)}
.zw .zcard:hover::before{transform:none}
.zw .zcard::after{content:"";position:absolute;right:-20px;bottom:-20px;width:220px;height:220px;z-index:-1;background:radial-gradient(circle,rgba(37,99,235,.22) 1.3px,transparent 1.8px) 0 0/16px 16px;-webkit-mask-image:radial-gradient(circle at 100% 100%,#000,transparent 70%);mask-image:radial-gradient(circle at 100% 100%,#000,transparent 70%)}
.zw .zcard:nth-child(1){--za:.05;--zb:.14}.zw .zcard:nth-child(2){--za:.08;--zb:.28}.zw .zcard:nth-child(3){--za:.11;--zb:.42}.zw .zcard:nth-child(4){--za:.14;--zb:.57}.zw .zcard:nth-child(6){--za:.18;--zb:.85}.zw .zcard:nth-child(7){--za:.22;--zb:1}
.zw .zcard .zn{background:linear-gradient(180deg,#2563eb,#9b0f3f);-webkit-background-clip:text;background-clip:text;color:transparent}
.zw .zcard:nth-child(5){background:radial-gradient(120% 80% at 100% 0%,rgba(229,51,42,.45),rgba(229,51,42,0) 60%),linear-gradient(160deg,#2a0b16,#141414 70%);color:var(--night-fg);box-shadow:0 30px 60px -30px rgba(122,6,6,.7)}
.zw .zcard:nth-child(5) .zn{background-image:linear-gradient(180deg,#ff8a7e,#7aa7ff)}
.zw .zcard:nth-child(5) dt,.zw .zcard:nth-child(5) .chip{color:var(--night-mute)}
.zw .zcard:nth-child(5) .chip{background:rgba(255,255,255,.08)}
.zw .zcard:nth-child(5) dl div{border-top-color:var(--night-line)}
.zw .zcard:nth-child(5)::after{background:radial-gradient(circle,rgba(255,255,255,.14) 1.3px,transparent 1.8px) 0 0/16px 16px}
.zw .zcard:nth-child(5)::before{transform:none}
.zw .zcard.end::after,.zw .zcard.end::before{content:none}
.tcard .av .i{width:22px;height:22px;color:#fff}
/* v7.0 Panel: gleiche Geschwindigkeit rein und raus */
.drawer{transition:visibility 0s linear .8s}
.drawer.open{transition:visibility 0s}
.dr-panel{transition:transform .8s cubic-bezier(.76,0,.24,1)}
.dr-dim{transition:opacity .8s cubic-bezier(.76,0,.24,1)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
/* ===== v7.3 ===== */
/* Header deckend: nichts scheint mehr durch */
.top.solid{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
/* Richtungen beim Einblenden */
html.js [data-r="l"]{transform:translate3d(-80px,0,0)}
html.js [data-r="rt"]{transform:translate3d(80px,0,0)}
html.js [data-r="l"].in,html.js [data-r="rt"].in{transform:none}
/* Bildband läuft nach rechts */
.strip-track{animation-direction:reverse}
/* Logistik fährt von links ein */
@media (min-width:981px){#logistik .hz-track{flex-direction:row-reverse;width:max-content}}
/* White-Label-Beleg: gedämpftes Papier statt Reinweiß */
.wl-doc{background:linear-gradient(170deg,#d9d8d4,#cbcac6);--ink:#1c1c1c;--ink-2:#4b4b49;--line:rgba(0,0,0,.14);box-shadow:0 24px 48px -28px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.35)}
.wl-doc .chip{background:rgba(0,0,0,.08);color:#2e2e2e}
.wl-switch button[aria-pressed="true"]{background:#d6d5d1}
html[data-theme="dark"] .wl-doc{--ink:#1c1c1c;--ink-2:#4b4b49;--line:rgba(0,0,0,.14)}
/* Zusammenarbeit: Bühne, Karten steigen von unten nach oben */
.zw{position:relative}
.zw-grid{display:grid;gap:var(--s6)}
.zw-meter,.zw-segs{display:none}
.zw-stage{display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none}
.zw-stage::-webkit-scrollbar{display:none}
.zw-stage>.zcard{scroll-snap-align:start}
@media (min-width:981px){
.zw{height:520vh;padding:0}
.zw-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-block:calc(var(--head) + var(--s4)) var(--s5)}
.zw-sticky>.wrap{width:100%}
.zw-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(48px,6vw,120px);align-items:center}
.zw .sec-head{margin-bottom:var(--s6)}
.zw-meter{display:flex;align-items:flex-end;gap:var(--s5)}
.zw-big{display:block;height:1em;overflow:hidden;font:700 clamp(120px,13vw,220px)/1 var(--f-head);letter-spacing:-.07em;padding-right:.04em}
.zw-roll{display:flex;flex-direction:column;transition:transform .9s cubic-bezier(.76,0,.24,1)}
.zw-roll b{display:flex;align-items:center;height:1em;background:linear-gradient(180deg,#2563eb,#8f0d3a);-webkit-background-clip:text;background-clip:text;color:transparent}
.zw-roll b .i{width:.62em;height:.62em;color:var(--red);stroke-width:2.2}
.zw-meta{display:grid;gap:var(--s2);padding-bottom:.9em}
.zw-of{font:600 var(--t-label)/1 var(--f-body);color:var(--ink-2)}
.zw-meta b{font:600 clamp(20px,1.6vw,26px)/1.15 var(--f-head);letter-spacing:-.02em;max-width:14ch}
.zw-segs{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:var(--s5)}
.zw-segs i{height:4px;border-radius:4px;background:var(--line);position:relative;overflow:hidden}
.zw-segs i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--red-fill),#0e7490);transform:scaleX(var(--f,0));transform-origin:left}
.zw-stage{display:block;position:relative;overflow:visible;margin:0;padding:0;height:min(560px,calc(100vh - var(--head) - 120px));perspective:1600px}
.zw-stage>.zcard{position:absolute;inset:0;width:auto;min-height:0;transform-origin:50% 0;will-change:transform,opacity;transition:box-shadow .5s var(--ease)}
.zw-stage>.zcard:hover{transform:none}
.zw .zcard{padding:clamp(32px,3.4vw,56px);gap:var(--s5);box-shadow:inset 0 0 0 1px var(--line),0 40px 80px -40px rgba(20,20,20,.35)}
.zw .zcard .zn{font-size:clamp(56px,5vw,80px)}
.zw .zcard h3{font-size:clamp(28px,2.4vw,40px);letter-spacing:-.03em}
.zw .zcard dl{gap:var(--s4)}
.zw .zcard dl div{grid-template-columns:120px minmax(0,1fr);padding-top:var(--s4)}
.zw .zcard dd{font-size:clamp(16px,1.2vw,19px)}
.zw .zcard::after{width:340px;height:340px}
.zw .zcard.end{justify-content:center}
.zw .zcard.end h3{font-size:clamp(34px,3vw,52px)}
}
@media (prefers-reduced-motion:reduce){.zw-roll{transition:none}}
@media (min-width:981px){
.zw .sec-head{display:block;margin-bottom:var(--s5)}
.zw .sec-head .h2{font-size:clamp(36px,3.3vw,58px);margin-top:var(--s4)}
.zw .sec-head .lead{margin-top:var(--s4);max-width:44ch}
.zw-stage .zcard .zh{justify-content:flex-end}
.zw-stage .zcard .zh .zn{display:none}
}
/* v7.4 Footer-Claim: zwei Zeilen, Sätze bleiben ganz */
.bigclaim .bc1,.bigclaim .red{display:block}
.bigclaim.fit .bc1{white-space:nowrap}
/* Modus-Buttons: in längeren Sprachen nie breiter als der Bildschirm */
.modes{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:520px){.modes{grid-template-columns:minmax(0,1fr)}}
/* v7.7 Menü: Sprache und Farbsystem als Dropdown */
.m-prefs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3)}
.m-pref{display:grid;gap:var(--s2);min-width:0}
.m-pref .pl{display:flex;align-items:center;gap:6px;font:600 var(--t-label)/1 var(--f-body);color:var(--night-mute)}
.m-pref .pl .i{width:15px;height:15px}
.menu .dd{display:block;position:relative}
.menu .dd-btn{width:100%;height:48px;justify-content:space-between;padding:0 14px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-line);color:var(--night-fg);font-size:14px}
.menu .dd-btn>span:not(.th-ico){margin-right:auto}
.menu .dd-list{top:auto;bottom:calc(100% + 8px);right:auto;left:0;min-width:0;width:calc(200% + var(--s3));max-height:min(60vh,460px);overflow-y:auto;scrollbar-width:none}
.menu .dd-theme .dd-list{left:auto;right:0}
.menu .dd-lang .dd-list{grid-template-columns:1fr 1fr;min-width:0}
.menu .dd-list::-webkit-scrollbar{display:none}
/* v7.7 Nichts darf die Seite seitlich verbreitern (Einflug-Animationen) */
html{overflow-x:clip}
@media (max-width:980px){html.js [data-r="l"]{transform:translate3d(-32px,0,0)}html.js [data-r="rt"]{transform:translate3d(32px,0,0)}}
/* v7.7 Scroll-Szenen auch mobil */
#logistik .hz-track{flex-direction:row-reverse;width:max-content;overflow:visible;scroll-snap-type:none}
@media (max-width:980px){
#logistik.hz{height:300vh;padding:0}
#logistik .hz-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:calc(var(--head) + var(--s3)) calc(var(--s4) + 76px)}
#logistik .sec-head{margin-bottom:var(--s4)}
#logistik .sec-head .lead{display:none}
#logistik .h2{font-size:clamp(26px,7.4vw,34px)}
#logistik .vcard{height:min(400px,56svh)}
.zw{height:520vh;padding:0}
.zw-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;padding-block:calc(var(--head) + var(--s3)) calc(var(--s4) + 76px)}
.zw-sticky>.wrap{flex:1;display:flex;min-height:0;width:100%}
.zw-grid{display:flex;flex-direction:column;gap:var(--s3);flex:1;min-height:0;width:100%}
.zw .sec-head{margin:0}
.zw .sec-head .lead{display:none}
.zw .sec-head .h2{font-size:clamp(26px,7.4vw,34px);margin-top:var(--s2)}
.zw-meter{display:flex;align-items:flex-end;gap:var(--s3)}
.zw-big{display:block;height:1em;overflow:hidden;font:700 60px/1 var(--f-head);letter-spacing:-.07em}
.zw-roll{display:flex;flex-direction:column;transition:transform .8s cubic-bezier(.76,0,.24,1)}
.zw-roll b{display:flex;align-items:center;height:1em;background:linear-gradient(180deg,#2563eb,#8f0d3a);-webkit-background-clip:text;background-clip:text;color:transparent}
.zw-roll b .i{width:.6em;height:.6em;color:var(--red)}
.zw-meta{display:grid;gap:4px;padding-bottom:.5em}
.zw-of{font:600 14px/1 var(--f-body);color:var(--ink-2)}
.zw-meta b{font:600 18px/1.15 var(--f-head)}
.zw-segs{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.zw-segs i{height:3px;border-radius:3px;background:var(--line);position:relative;overflow:hidden}
.zw-segs i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--red-fill),#0e7490);transform:scaleX(var(--f,0));transform-origin:left}
.zw-stage{display:block;position:relative;flex:1;min-height:0;overflow:visible;margin:var(--s2) 0 0;padding:0;perspective:1200px}
.zw-stage>.zcard{position:absolute;inset:0;width:auto;min-height:0;transform-origin:50% 0;will-change:transform,opacity;padding:var(--s5);gap:var(--s3)}
.zw-stage .zcard .zh .zn{display:none}
.zw-stage .zcard .zh{justify-content:flex-end}
.zw-stage .zcard dl div{grid-template-columns:72px minmax(0,1fr);padding-top:var(--s2)}
.zw-stage .zcard dd{font-size:14px}
}
/* v7.8 Mobil: alle Buttons gleich breit (volle Breite) und gleich hoch */
.modal-card .btn{height:var(--btn)}
@media (max-width:639px){
.btn{width:100%;justify-content:space-between;justify-self:stretch!important;align-self:stretch!important;grid-column:1/-1}
.btn.ghost,.btn:not(:has(.bi)){justify-content:center}
.menu .btn{align-self:stretch!important}
}
.btn{flex-shrink:0}
/* v8.1 Farbig: dunkle Glaskarten und Verlaufskarten Rot, Magenta, Lila */
html[data-theme="colorful"] .stat .sq{background:linear-gradient(140deg,#2563eb,#0891b2 55%,#4f46e5);color:#fff}
html[data-theme="colorful"] .stat:first-child .sq{background:rgba(255,255,255,.2);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
html[data-theme="colorful"]{--vio:#4f46e5;--mag:#0891b2}
html[data-theme="colorful"] :is(.stat,.guide,.pack:not(.hl),.vcard,.zw .zcard,.need>div,.docc,.panel2,.fq,.vs,.cmp-card:not(.dbl),.scard){--surface:#111a2e;--ink:#f0f9ff;--ink-2:#bfdcec;--on-ink:#111a2e;--graphite:#7dd3fc;--line:rgba(255,255,255,.1);--soft:#2b1a23;--soft-2:#34202b;--bg:#140d12;
background:radial-gradient(120% 90% at 100% 0%,rgba(194,24,91,.24),rgba(194,24,91,0) 55%),radial-gradient(90% 70% at 0% 100%,rgba(123,44,191,.16),rgba(123,44,191,0) 60%),#111a2e;color:var(--ink);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 30px 60px -34px rgba(43,10,27,.7)}
html[data-theme="colorful"] :is(.stat,.guide,.pack:not(.hl),.vcard,.zw .zcard,.need>div,.docc,.panel2,.fq,.vs,.cmp-card:not(.dbl),.scard):hover{box-shadow:inset 0 0 0 1px rgba(255,106,160,.35),0 34px 70px -30px rgba(194,24,91,.55)}
html[data-theme="colorful"] :is(.pack.hl,.stat:first-child,.guide:first-child,.zw .zcard:nth-child(odd):not(.end),.need>div:nth-child(5),.docc:nth-child(3)){--ink:#fff;--ink-2:rgba(255,255,255,.86);--graphite:rgba(255,255,255,.8);--on-ink:#0c4a6e;--line:rgba(255,255,255,.24);--soft:rgba(255,255,255,.16);--soft-2:rgba(255,255,255,.22);--red:#fff;
background:radial-gradient(55% 45% at 88% 10%,rgba(255,150,205,.55),rgba(255,150,205,0) 70%),radial-gradient(70% 60% at 0% 100%,rgba(110,40,200,.8),rgba(110,40,200,0) 65%),linear-gradient(140deg,#2563eb 0%,#0891b2 48%,#4f46e5 100%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 40px 80px -30px rgba(160,20,120,.65)}
html[data-theme="colorful"] :is(.stat:first-child,.guide:first-child,.zw .zcard:nth-child(odd):not(.end),.need>div:nth-child(5),.docc:nth-child(3)) .chip{background:rgba(255,255,255,.18);color:#fff}
html[data-theme="colorful"] :is(.stat:first-child,.guide:first-child,.zw .zcard:nth-child(odd):not(.end),.need>div:nth-child(5),.docc:nth-child(3))::before{background:linear-gradient(90deg,#fff,rgba(255,255,255,.3))!important}
html[data-theme="colorful"] .zw .zcard .zn,html[data-theme="colorful"] .zw-roll b,html[data-theme="colorful"] .gr-big{background-image:linear-gradient(180deg,#7aa7ff 0%,#0891b2 55%,#4f46e5 100%)}
html[data-theme="colorful"] .zw-segs i::after{background:linear-gradient(90deg,#2563eb,#0891b2,#4f46e5)}
html[data-theme="colorful"] .zw .zcard::before{background:linear-gradient(90deg,#2563eb,#0891b2,#4f46e5)}
html[data-theme="colorful"] .zw .zcard::after{background:radial-gradient(circle,rgba(255,150,205,.22) 1.3px,transparent 1.8px) 0 0/16px 16px}
html[data-theme="colorful"] .zw .zcard.end{background:linear-gradient(160deg,#082f49,#140d12);color:var(--night-fg)}
html[data-theme="colorful"] .zw-of{color:#9b3a6a}
html[data-theme="colorful"] .gr:hover::before{background:radial-gradient(120% 90% at 100% 0%,rgba(194,24,91,.45),rgba(123,44,191,.25) 50%,rgba(0,0,0,0) 75%);opacity:1}
html[data-theme="colorful"] .gr:hover .gr-n{color:transparent;-webkit-text-stroke-color:transparent;background:linear-gradient(180deg,#7aa7ff,#0891b2,#4f46e5);-webkit-background-clip:text;background-clip:text}
/* v8.3 Footer-Claim mit Hintergrund (A Signal-Netz, B Outline-Echo, C Aurora-Glas) */
.cb{position:relative;isolation:isolate}
.cb>.cb-fx{position:absolute;z-index:-1;left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1);top:calc(var(--s8) * -1);bottom:calc(var(--s4) * -1);pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
/* A: Signal-Netz */
.cb-net .cb-fx::before,.cb-net .cb-fx::after{content:"";position:absolute;inset:0}
.cb-net .cb-fx::before{background:radial-gradient(circle,color-mix(in oklab,var(--ink) 20%,transparent) .9px,transparent 1.3px) 0 0/22px 22px;-webkit-mask-image:radial-gradient(75% 95% at 72% 50%,#000 15%,transparent 78%);mask-image:radial-gradient(75% 95% at 72% 50%,#000 15%,transparent 78%)}
.cb-net .cb-fx::after{background:radial-gradient(circle,var(--red) 1.1px,transparent 1.6px) 0 0/22px 22px;-webkit-mask-image:radial-gradient(240px circle at var(--mx,78%) var(--my,55%),#000,transparent 72%);mask-image:radial-gradient(240px circle at var(--mx,78%) var(--my,55%),#000,transparent 72%);opacity:.7}
.cb-net svg{position:absolute;inset:0;width:100%;height:100%}
.cb-net .r{fill:none;stroke:var(--red);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.3;stroke-dasharray:1;stroke-dashoffset:1}
.cb-net.in .r{animation:cbDraw 2.6s var(--ease) forwards;animation-delay:calc(var(--k) * .16s)}
@keyframes cbDraw{to{stroke-dashoffset:0}}
.cb-net .p{fill:var(--red);opacity:0;transition:opacity 1s 1.4s}
.cb-net.in .p{opacity:.85}
.cb-net .hub{fill:var(--red)}
.cb-net .ring{fill:none;stroke:var(--red);stroke-width:1;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:cbRing 3.2s ease-out infinite}
@keyframes cbRing{from{transform:scale(.6);opacity:.8}to{transform:scale(4.5);opacity:0}}
/* B: Outline-Echo */
.cb-echo .cb-fx{display:grid;align-content:center;gap:var(--s2)}
.cb-echo .row{display:flex;width:max-content;white-space:nowrap;font:700 clamp(110px,15vw,240px)/.92 var(--f-head);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px color-mix(in oklab,var(--ink) 13%,transparent);animation:cbEcho 70s linear infinite}
.cb-echo .row:nth-child(2){animation-direction:reverse;-webkit-text-stroke-color:color-mix(in oklab,var(--red) 22%,transparent)}
@keyframes cbEcho{to{transform:translateX(-50%)}}
/* C: Aurora-Glas */
.cb-aurora .cb-fx::before{content:"";position:absolute;inset:0;background-image:linear-gradient(color-mix(in oklab,var(--ink) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklab,var(--ink) 7%,transparent) 1px,transparent 1px);background-size:80px 80px;-webkit-mask-image:radial-gradient(80% 90% at 50% 50%,#000,transparent 80%);mask-image:radial-gradient(80% 90% at 50% 50%,#000,transparent 80%)}
.cb-aurora .cb-fx::after{content:"";position:absolute;inset:0;opacity:.09;mix-blend-mode:multiply;background:url("data:image/svg+xml;utf8,")}
.cb-aurora .b{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:cbDrift 20s ease-in-out infinite alternate}
.cb-aurora .b1{width:46vw;height:46vw;left:-8%;top:-30%;background:rgba(37,99,235,.32)}
.cb-aurora .b2{width:38vw;height:38vw;right:-6%;top:10%;background:rgba(143,29,63,.3);animation-duration:26s}
.cb-aurora .b3{width:30vw;height:30vw;left:38%;bottom:-40%;background:rgba(122,167,255,.28);animation-duration:17s}
@keyframes cbDrift{to{transform:translate3d(6vw,4vh,0) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.cb-net .r{stroke-dashoffset:0;animation:none}.cb-net .p,.cb-net .ring{display:none}.cb-echo .row,.cb-aurora .b{animation:none}}
/* v8.4 Kontakt-Fenster */
.callx{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:var(--s4);visibility:hidden;transition:visibility 0s linear .6s}
.callx.open{visibility:visible;transition:visibility 0s}
html.cx-on{overflow:hidden}
.cx-dim{position:absolute;inset:0;background:rgba(10,8,9,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .5s var(--ease)}
.callx.open .cx-dim{opacity:1}
.cx-card{position:relative;width:min(880px,100%);max-height:calc(100dvh - 32px);overflow:auto;scrollbar-width:none;display:grid;border-radius:28px;color:#f0f9ff;outline:none;
background:radial-gradient(70% 60% at 0% 0%,rgba(37,99,235,.55),rgba(37,99,235,0) 60%),radial-gradient(60% 70% at 100% 100%,rgba(143,29,63,.6),rgba(143,29,63,0) 60%),#0b1220;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 60px 120px -40px rgba(0,0,0,.8);opacity:0;transform:translate3d(0,24px,0) scale(.97);transition:opacity .5s var(--ease),transform .6s cubic-bezier(.22,1,.36,1)}
.cx-card::-webkit-scrollbar{display:none}
.callx.open .cx-card{opacity:1;transform:none}
@media (min-width:760px){.cx-card{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
.cx-close{position:absolute;top:16px;right:16px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:rgba(255,255,255,.08);color:#fff;transition:background .3s,transform .4s var(--ease)}
.cx-close:hover{background:rgba(255,255,255,.16);transform:rotate(90deg)}
.cx-close .i{width:18px;height:18px}
.cx-main{padding:clamp(28px,4vw,48px);display:grid;gap:var(--s4);align-content:start}
.cx-live{display:inline-flex;align-items:center;gap:var(--s2);justify-self:start;height:32px;padding:0 14px 0 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);font:600 14px/1 var(--f-body);color:#bfe3f5}
.cx-live i{width:8px;height:8px;border-radius:50%;background:var(--red-on-dark);box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:cxLive 2s ease-out infinite}
@keyframes cxLive{to{box-shadow:0 0 0 10px rgba(61,220,132,0)}}
.cx-main :is(h2,.mh){font:600 clamp(28px,3vw,40px)/1.05 var(--f-head);letter-spacing:-.035em}
.cx-num{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.cx-digits{font:700 clamp(30px,4.2vw,52px)/1 var(--f-head);letter-spacing:-.04em;font-variant-numeric:tabular-nums;background:linear-gradient(90deg,#fff,#bcd2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.cx-copy{appearance:none;border:0;cursor:pointer;height:40px;padding:0 14px 0 12px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:var(--s2);background:rgba(255,255,255,.1);color:#fff;font:600 14px/1 var(--f-body);transition:background .3s}
.cx-copy:hover{background:rgba(255,255,255,.18)}
.cx-copy.ok{background:#2563eb}
.cx-copy .i{width:16px;height:16px}
.cx-sub{color:#bfdcec;font-size:var(--t-small);max-width:44ch}
.cx-acts{display:grid;gap:var(--s2);margin-top:var(--s2)}
.cx-act{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:var(--s3);min-height:64px;padding:8px 18px 8px 8px;border-radius:18px;text-decoration:none;color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background .35s,transform .45s var(--ease),box-shadow .35s}
.cx-act::after{content:"";width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);opacity:.6;transition:transform .4s var(--ease),opacity .3s}
.cx-act:hover{transform:translateX(4px);background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.cx-act:hover::after{transform:translateX(3px) rotate(45deg);opacity:1}
.cx-act i{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.1)}
.cx-act .i{width:22px;height:22px}
.cx-act b{display:block;font:600 16px/1.2 var(--f-head)}
.cx-act small{display:block;margin-top:2px;font-size:14px;color:#bfdcec}
.cx-act.call{background:linear-gradient(120deg,#2563eb,#1e3a8a);box-shadow:0 20px 40px -20px rgba(37,99,235,.8)}
.cx-act.call i{background:rgba(255,255,255,.18)}
.cx-act.call small{color:rgba(255,255,255,.8)}
.cx-act.wa i,.cx-act.vo i{color:var(--red-on-dark)}
.cx-note{font-size:14px;color:#b9a0ab}
.cx-qr{display:none}
@media (min-width:760px){.cx-qr{display:grid;gap:var(--s4);align-content:center;justify-items:center;padding:clamp(28px,4vw,48px);background:rgba(255,255,255,.04);border-left:1px solid rgba(255,255,255,.07)}}
.cx-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-pill);background:rgba(255,255,255,.07)}
.cx-tabs button{appearance:none;border:0;cursor:pointer;height:36px;padding:0 14px;border-radius:var(--r-pill);background:transparent;color:#bfe3f5;font:600 14px/1 var(--f-body);transition:background .3s,color .3s}
.cx-tabs button[aria-pressed="true"]{background:#f0f9ff;color:#0b1220}
.cx-code{position:relative;width:200px;height:200px;padding:14px;border-radius:22px;background:#f0f9ff;color:#0b1220;overflow:hidden}
.cx-q{position:absolute;inset:14px;opacity:0;transform:scale(.92);transition:opacity .4s,transform .5s var(--ease)}
.cx-q.on{opacity:1;transform:none}
.cx-q .qr{width:100%;height:100%;display:block}
.cx-scan{position:absolute;left:10px;right:10px;height:2px;top:12px;background:linear-gradient(90deg,transparent,#2563eb,transparent);box-shadow:0 0 12px #2563eb;animation:cxScan 2.6s ease-in-out infinite alternate}
@keyframes cxScan{to{top:calc(100% - 14px)}}
.cx-qr p{font:600 14px/1 var(--f-body);color:#bfdcec}
@media (max-width:759px){.callx{place-items:end center;padding:0}.cx-card{border-radius:28px 28px 0 0;transform:translate3d(0,100%,0)}.callx.open .cx-card{transform:none}}
@media (prefers-reduced-motion:reduce){.cx-scan,.cx-live i{animation:none}}
/* v8.5 Claim-Hintergründe D/E/F */
/* E: Partikel-Welle */
.cb-wave>.cb-fx{top:calc(var(--s7) * -1);bottom:calc(var(--s9) * -1.6);-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.cb-wave canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* D: Abfahrtstafel */
.cb-flap .cb-fx{display:grid;align-content:center;gap:10px;padding-inline:var(--gutter);-webkit-mask-image:radial-gradient(90% 100% at 60% 50%,#000 40%,transparent 85%);mask-image:radial-gradient(90% 100% at 60% 50%,#000 40%,transparent 85%)}
.flap-row{display:flex;gap:4px;justify-content:center}
.flap{position:relative;width:clamp(22px,2.6vw,40px);height:clamp(32px,3.8vw,58px);border-radius:6px;background:color-mix(in oklab,var(--ink) 6%,transparent);display:grid;place-items:center;font:700 clamp(15px,1.9vw,30px)/1 var(--f-head);color:color-mix(in oklab,var(--ink) 26%,transparent);perspective:300px;overflow:hidden}
.flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:color-mix(in oklab,var(--bg) 80%,transparent)}
.flap.r{color:color-mix(in oklab,var(--red) 70%,transparent);background:color-mix(in oklab,var(--red) 9%,transparent)}
.flap.go{animation:flapGo .32s cubic-bezier(.5,0,.5,1)}
@keyframes flapGo{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg)}100%{transform:rotateX(0)}}
/* F: Spotlight */
.cb-spot .bigclaim{color:transparent;-webkit-text-stroke:1.2px color-mix(in oklab,var(--ink) 38%,transparent)}
.cb-spot .bigclaim .red{color:transparent;-webkit-text-stroke-color:color-mix(in oklab,var(--red) 60%,transparent)}
.cb-spot .spot-fill{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%),#000 35%,transparent 72%);mask-image:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%),#000 35%,transparent 72%)}
.cb-spot .spot-fill .bigclaim{color:var(--ink);-webkit-text-stroke:0;text-shadow:0 0 40px color-mix(in oklab,var(--red) 30%,transparent)}
.cb-spot .spot-fill .bigclaim .red{color:var(--red);-webkit-text-stroke:0}
.cb-spot .cb-fx::before{content:"";position:absolute;inset:0;background-image:linear-gradient(color-mix(in oklab,var(--ink) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklab,var(--ink) 8%,transparent) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(320px circle at var(--gx,50%) var(--gy,50%),#000,transparent 75%);mask-image:radial-gradient(320px circle at var(--gx,50%) var(--gy,50%),#000,transparent 75%)}
/* v8.6 Spotlight: saubere Kontur per Filter, g nicht mehr abgeschnitten, Punkt-Lupe */
.cb-spot>.bigclaim{color:var(--ink);-webkit-text-stroke:0;filter:url(#dbl9-outline);opacity:.5}
.cb-spot>.bigclaim .red{color:var(--red);-webkit-text-stroke:0}
.cb-spot .spot-fill{top:-48px;bottom:-80px;left:-24px;right:-24px;padding:48px 24px 80px}
.cb-spot .cb-fx::before{background-image:radial-gradient(circle,color-mix(in oklab,var(--red) 55%,transparent) 1.2px,transparent 1.7px);background-size:14px 14px}
.cb-spot.cb-flap .flap{background:color-mix(in oklab,var(--ink) 3.5%,transparent);color:color-mix(in oklab,var(--ink) 11%,transparent)}
.cb-spot.cb-flap .flap.r{background:color-mix(in oklab,var(--red) 5%,transparent);color:color-mix(in oklab,var(--red) 30%,transparent)}
.cb-spot.cb-flap>.bigclaim{opacity:.75}
.zw-roll b{padding-right:.08em}
/* Abfahrtstafel als Modul */
.fboard{position:relative;overflow:hidden;background:radial-gradient(90% 70% at 100% 0%,rgba(37,99,235,.28),rgba(37,99,235,0) 60%),var(--night)}
.fb{margin-top:var(--s6);padding:clamp(16px,2.4vw,32px);border-radius:var(--r-lg);background:#0d0b0c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 30px 60px -30px rgba(0,0,0,.8),0 40px 80px -40px rgba(0,0,0,.8);--fw:clamp(14px,2.6vw,44px)}
.fb-head{display:flex;gap:calc(var(--fw) * .55);padding:0 0 12px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08);font:600 14px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:#a6a6a2}
.fb-head span{width:calc(var(--c) * (var(--fw) + 4px) - 4px)}
.fb-rows{display:grid;gap:8px}
.fb-row{display:flex;gap:calc(var(--fw) * .55)}
.fb-grp{display:flex;gap:4px}
.fb .flap{width:var(--fw);height:calc(var(--fw) * 1.42);border-radius:6px;background:linear-gradient(180deg,#232022 0 49.5%,#1b191a 50.5% 100%);color:#f4f1ee;font:700 calc(var(--fw) * .66)/1 var(--f-head);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 2px 0 rgba(0,0,0,.6)}
.fb .flap::after{background:rgba(0,0,0,.65)}
.fb .flap.r{color:#7aa7ff;background:linear-gradient(180deg,#2a1214 0 49.5%,#221012 50.5% 100%)}
.fb .flap.g{color:#a6a6a2}
.fb-legend{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s4);font-size:var(--t-small);color:var(--night-mute)}
.fb-legend b{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:8px;border-radius:6px;background:#1b191a;color:#f4f1ee;font-size:14px}
.fb-legend b.r{color:#7aa7ff}.fb-legend b.g{color:#a6a6a2}
@media (max-width:759px){.fb{--fw:clamp(12px,4.2vw,20px)}.fb .fb-asset,.fb .fb-grp.asset{display:none}}
/* v8.6 Sprachnachricht im Kontakt-Fenster */
.cx-rec{display:none;gap:var(--s4)}
.cx-card.rec .cx-rec{display:grid}
.cx-card.rec .cx-acts,.cx-card.rec .cx-sub,.cx-card.rec .cx-note{display:none}
.cx-back{appearance:none;border:0;cursor:pointer;justify-self:start;height:36px;padding:0 14px 0 10px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);color:#fff;font:600 14px/1 var(--f-body)}
.cx-back .i{width:16px;height:16px}
.rec-stage{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s4);padding:14px;border-radius:20px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.rec-btn{appearance:none;border:0;cursor:pointer;position:relative;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,#2563eb,#1e3a8a);color:#fff;box-shadow:0 14px 30px -12px rgba(37,99,235,.9)}
.rec-btn .i{width:26px;height:26px}
.rec-btn::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(122,167,255,.6);opacity:0}
.rec-btn[aria-pressed="true"]::before{animation:recPulse 1.4s ease-out infinite}
@keyframes recPulse{from{transform:scale(.9);opacity:1}to{transform:scale(1.35);opacity:0}}
.rec-wave{width:100%;height:48px;display:block}
.rec-time{font:600 15px/1 var(--f-head);font-variant-numeric:tabular-nums;color:#bfe3f5;min-width:44px;text-align:right}
.rec-hint{font-size:14px;color:#bfdcec}
.rec-tools{display:none;gap:var(--s2)}
.cx-rec.has .rec-tools{display:flex}
.rec-tools button{appearance:none;border:0;cursor:pointer;height:40px;padding:0 14px 0 12px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);color:#fff;font:600 14px/1 var(--f-body)}
.rec-tools .i{width:16px;height:16px}
.rec-form{display:grid;gap:var(--s3)}
.rec-form .row2{display:grid;gap:var(--s3)}
@media (min-width:560px){.rec-form .row2{grid-template-columns:1fr 1fr}}
.rec-form input[type=text],.rec-form input[type=tel]{width:100%;height:48px;padding:0 16px;border:0;border-radius:14px;background:rgba(255,255,255,.08);color:#fff;font:500 15px/1 var(--f-body);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);outline:none}
.rec-form input::placeholder{color:#b9a0ab}
.rec-form input:focus{box-shadow:inset 0 0 0 1.5px #7aa7ff}
.cx-ok{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;cursor:pointer;font-size:14px;line-height:1.45;color:#bfdcec}
.cx-ok input{position:absolute;opacity:0;pointer-events:none}
.cx-ok .box{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:transparent;transition:background .25s,color .25s}
.cx-ok .box .i{width:15px;height:15px;stroke-width:3}
.cx-ok input:checked+.box{background:#2563eb;color:#fff;box-shadow:none}
.cx-ok input:focus-visible+.box{outline:2px solid #7aa7ff;outline-offset:2px}
.cx-ok a{color:#fff}
.rec-msg{min-height:1.2em;font-size:14px;color:#ff9a90}
.rec-done{display:none;gap:var(--s3);padding:var(--s5);border-radius:20px;background:rgba(61,220,132,.1);box-shadow:inset 0 0 0 1px rgba(61,220,132,.3)}
.cx-rec.sent .rec-done{display:grid}.cx-rec.sent .rec-form,.cx-rec.sent .rec-stage,.cx-rec.sent .rec-tools,.cx-rec.sent .rec-hint{display:none}
.rec-done b{font:600 18px/1.2 var(--f-head)}
.rec-done span{font-size:14px;color:#bfdcec}
/* v8.7 Mega-Menü: Kachel-Band der Bereiche */
.mb-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.mb-tile{position:relative;isolation:isolate;overflow:hidden;min-height:150px;border-radius:var(--r-md);display:flex;align-items:flex-end;padding:var(--s4);text-decoration:none;color:#fff;background:#0b1220}
.mb-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:grayscale(.5) brightness(.7);transition:transform 1.2s var(--ease),filter .6s var(--ease)}
.mb-tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,8,9,.1),rgba(10,8,9,.85))}
.mb-tile:hover img{transform:scale(1.07);filter:grayscale(0) brightness(.8)}
.mbt-n{position:absolute;top:14px;left:16px;font:700 14px/1 var(--f-head);letter-spacing:.12em;color:#bcd2ff}
.mbt-tx b{display:block;font:600 18px/1.15 var(--f-head)}
.mbt-tx small{display:block;margin-top:3px;font-size:14px;color:rgba(255,255,255,.78)}
.mbt-go{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);transition:transform .45s var(--ease),background .3s}
.mb-tile:hover .mbt-go{background:var(--red-fill);transform:rotate(-45deg)}
.mbt-go .i{width:16px;height:16px}
.mega-band{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)!important;align-items:end}
@media (max-width:1365px){.mb-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.mb-tile{min-height:110px}}
/* v8.8 Mega-Band: Querformat-Kacheln, offener Bereich ausgeblendet, Länder im Fuß */
.mega-band.v2{display:block!important;padding-top:var(--s5)}
.mega-band.v2 .mb-lbl{display:block;margin:0 0 var(--s3)}
.mega-band.v2 .mb-tiles{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none;gap:var(--s3)}
.mega-band.v2 .mb-tile{min-height:0;height:112px;padding:0;display:grid;grid-template-columns:132px minmax(0,1fr) auto;align-items:center;gap:var(--s4);padding-right:var(--s4);background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-line);transition:background .35s,box-shadow .35s,transform .45s var(--ease)}
.mega-band.v2 .mb-tile::before{display:none}
.mega-band.v2 .mb-tile:hover{background:var(--night-3);transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.mbt-im{position:relative;height:100%;overflow:hidden}
.mega-band.v2 .mb-tile img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.85)}
.mega-band.v2 .mb-tile[data-a="ueberuns"] img{object-position:50% 12%}
/* DBL-K38: Nummern per CSS-Zähler, ausgeblendete Kacheln zählen nicht mit (keine Lücken wie 01, 03, 04) */
.mega-band.v2 .mb-tiles{counter-reset:mbt}.mega-band.v2 .mb-tile{counter-increment:mbt}.mega-band.v2 .mbt-n::before{content:counter(mbt,decimal-leading-zero)}
.mega-band.v2 .mb-tile:hover img{transform:scale(1.08);filter:none}
.mega-band.v2 .mbt-n{position:static;display:block;margin-bottom:6px}
.mega-band.v2 .mbt-tx b{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mega-band.v2 .mbt-tx small{font-size:14px;color:var(--night-mute)}
.mega-band.v2 .mbt-go{position:static;width:38px;height:38px;background:rgba(255,255,255,.08)}
.mega:has(.mega-pane.on[data-pane="leistungen"]) .mb-tile[data-a="leistungen"],
.mega:has(.mega-pane.on[data-pane="ueberuns"]) .mb-tile[data-a="ueberuns"],
.mega:has(.mega-pane.on[data-pane="karriere"]) .mb-tile[data-a="karriere"]{display:none}
.mega:has(.mega-pane.on[data-pane="zusammenarbeit"]) .mb-tile[data-a="leistungen"]{display:none}
.mp-teaser img[src*="aida"]{object-position:50% 15%}
.mb-eu2{display:flex;align-items:center;gap:var(--s4);font-size:var(--t-label);color:var(--night-mute)}
.mb-eu2 .mb-flags{display:flex;gap:6px}
.mb-eu2 .mbf{padding:6px 7px;border-radius:9px}
.mb-eu2 .mbf .flag{width:22px;height:15px;border-radius:3px}
.mb-eu2 .mbf small{bottom:-16px}
@media (max-width:1365px){.mega-band.v2 .mb-tile{grid-template-columns:96px minmax(0,1fr) auto;height:96px}.mb-eu2>span{display:none}}
html{scroll-padding-top:calc(var(--head) + 24px)}
/* v9.0 Sprachnachricht: Freigabe, Premium-Mikrofon, Aufnahmeliste */
.cx-live i{background:#7aa7ff;animation:cxLiveR 2s ease-out infinite}
@keyframes cxLiveR{0%{box-shadow:0 0 0 0 rgba(255,90,79,.65)}70%{box-shadow:0 0 0 9px rgba(255,90,79,0)}100%{box-shadow:0 0 0 0 rgba(255,90,79,0)}}
.rec-done{background:rgba(122,167,255,.1)!important;box-shadow:inset 0 0 0 1px rgba(122,167,255,.3)!important}
.rec-done .i{color:#93b4ff}
.rec-perm{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4) var(--s4);align-items:center;padding:var(--s5);border-radius:22px;background:radial-gradient(120% 120% at 0% 0%,rgba(37,99,235,.35),rgba(37,99,235,0) 60%),rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.rec-perm .btn{grid-column:1/-1;justify-self:start}
.rp-ico{position:relative;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#3b82f6,#9b1236);box-shadow:0 16px 34px -14px rgba(37,99,235,.95),inset 0 1px 0 rgba(255,255,255,.35)}
.rp-ico::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px solid rgba(122,167,255,.45);animation:recPulse 2.2s ease-out infinite}
.rp-ico .mic{width:30px;height:30px}
.rp-tx b{display:block;font:600 19px/1.2 var(--f-head);color:#fff}
.rp-tx p{margin-top:6px;font-size:14px;line-height:1.5;color:#bfdcec}
.rec-deck{display:none;gap:var(--s3)}
.cx-rec.ok .rec-perm{display:none}.cx-rec.ok .rec-deck{display:grid}
.rec-form{display:none!important}.cx-rec.has .rec-form{display:grid!important}
.cx-rec.sent .rec-deck,.cx-rec.sent .rec-form{display:none!important}
.rec-btn{width:68px;height:68px;padding:0;background:linear-gradient(145deg,#3b82f6 0%,#2563eb 45%,#1e3a8a 100%)!important;box-shadow:0 16px 34px -14px rgba(37,99,235,.95),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -6px 14px rgba(0,0,0,.18)!important;transition:transform .35s var(--ease)}
.rec-btn:hover{transform:scale(1.05)}.rec-btn:active{transform:scale(.96)}
.rb-mic,.rb-stop{grid-area:1/1;display:grid;place-items:center;transition:opacity .25s,transform .35s var(--ease)}
.rb-mic .mic{width:30px;height:30px;display:block}
.rb-stop{width:22px;height:22px;border-radius:6px;background:#fff;opacity:0;transform:scale(.4)}
.rec-btn[aria-pressed="true"] .rb-mic{opacity:0;transform:scale(.5)}
.rec-btn[aria-pressed="true"] .rb-stop{opacity:1;transform:none}
.cx-rec.live .rec-time{color:#93b4ff}
.rec-takes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tk{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s3);padding:8px 8px 8px 8px;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);animation:tkIn .45s var(--ease) both}
@keyframes tkIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tk-play,.tk-del{appearance:none;border:0;cursor:pointer;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;transition:background .25s,transform .25s}
.tk-play{background:rgba(255,255,255,.14)}.tk-play:hover{background:var(--red-fill)}
.tk-play .i{grid-area:1/1;width:17px;height:17px;transition:opacity .2s}
.tk-play .i:last-child{opacity:0}.tk.on .tk-play{background:var(--red-fill)}.tk.on .tk-play .i:first-child{opacity:0}.tk.on .tk-play .i:last-child{opacity:1}
.tk-del{background:transparent;color:#bfdcec}.tk-del:hover{background:rgba(255,255,255,.1);color:#fff}
.tk-del .i{width:17px;height:17px}
.tk-main{display:grid;gap:7px;min-width:0}
.tk-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.tk-top b{font:600 14px/1.2 var(--f-head);color:#fff}
.tk-top small{font:600 14px/1 var(--f-head);font-variant-numeric:tabular-nums;color:#bfdcec}
.tk-bar{height:4px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.tk-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#7aa7ff,#fff);transition:width .25s linear}
/* v9.0 einheitlicher Abschnitts-Rhythmus */
@media (min-width:980px){section{padding-block:clamp(88px,7.5vw,120px)}}
.stage+.stage,.stage+.band-sec{margin-top:var(--s3)}
.stage+.band-sec{padding-top:0!important}
/* v9.0 offene Varianten: nie zwei Kachel-Module hintereinander */
.rel-sec .rcard{background:none!important;box-shadow:none!important;border-radius:0!important;padding:var(--s2) var(--s6)!important;border-left:1px solid var(--night-line)}
.rel-sec .rcard:first-child{border-left:0;padding-left:0!important}
@media (max-width:979px){.rel-sec .rcard{border-left:0;border-top:1px solid var(--night-line);padding:var(--s5) 0!important}.rel-sec .rcard:first-child{border-top:0}}
.v9-open .guides{gap:0!important}
.v9-open .guides .guide{background:none!important;box-shadow:none!important;border-radius:0!important;border-top:2px solid var(--ink);padding:var(--s5) var(--s5) var(--s3) 0!important;min-height:0!important;transition:border-color .35s}
.v9-open .guides .guide:hover{border-top-color:var(--red)}
.v9-open .guides .guide:first-child{border-top-color:var(--red)}
.v9-open .who .wcard.open{background:none!important;box-shadow:none!important;border-radius:0!important;border-left:1px solid var(--line);color:var(--ink)!important}
.v9-open .who .wcard.open :is(h3,p,span,b){color:var(--ink)!important}
.v9-open .who .wcard.open li{color:var(--ink-2)!important}
.v9-open .who .wcard.open .kicker{color:var(--red)!important}
.v9-open .who .wcard.open .i{color:var(--red)}
@media (max-width:979px){.v9-open .who .wcard.open{border-left:0;border-top:1px solid var(--line);padding-inline:0!important}}
.v9-open .ins .post:not(.feature){background:none!important;box-shadow:none!important;border-radius:0!important;border-bottom:1px solid var(--line);padding:var(--s4) 0!important;min-height:0!important}
.v9-open .ins .post:not(.feature):hover{transform:none!important}
.v9-open .ins .post:not(.feature):hover h3{color:var(--red)}
.v9-open .need{gap:0 var(--s6)!important}
.v9-open .need>div{background:none!important;box-shadow:none!important;border-radius:0!important;border-top:1px solid var(--line);padding:var(--s5) 0!important;min-height:0!important;color:var(--ink)!important}
.v9-open .roles{gap:0!important}
.v9-open .roles .role{background:none!important;box-shadow:none!important;border-radius:0!important;border-left:1px solid var(--night-line);padding:var(--s2) var(--s5)!important}
.v9-open .roles .role:first-child{border-left:0;padding-left:0!important}
@media (max-width:979px){.v9-open .roles .role{border-left:0;border-top:1px solid var(--night-line);padding:var(--s4) 0!important}}
.v9-open .docs{gap:0!important}
.v9-open .docs .docc{background:none!important;box-shadow:none!important;border-radius:0!important;border-top:2px solid var(--ink);padding:var(--s5) var(--s4) 0 0!important;min-height:0!important;color:var(--ink)!important}
.v9-open .docs .docc:first-child{border-top-color:var(--red)}
/* DBL-K43: offene Variante ohne Eselsohr und ohne Sonderfarbe der dritten Karte (Theme Farbig) */
.v9-open .docs .docc::after,.v9-open .docs .docc::before{display:none!important}
html[data-theme="colorful"] .v9-open .docs .docc .i{color:var(--red)!important}html[data-theme="colorful"] .v9-open .docs .docc:not(:first-child){border-top-color:var(--ink)!important}
html[data-theme="colorful"] .v9-open :is(.guide:first-child,.need>div:nth-child(5),.docc:nth-child(3)){--ink:#082f49!important;--ink-2:#3f5f73!important;--red:#2563eb!important;--on-ink:#111a2e!important}
html[data-theme="colorful"] .v9-open :is(.need>div,.docc,.guide){--surface:transparent;background:none!important;box-shadow:none!important;color:var(--ink)!important}
/* v9.0 Navigation: Name führt zur Bereichsseite, Pfeil öffnet das Menü */
.nav-i{display:inline-flex;align-items:center;position:relative}
.nav .nav-i .nav-t{padding-right:4px}
.nav .nav-i .nav-t::after{right:4px}
.nav-c{appearance:none;border:0;background:none;color:inherit;cursor:pointer;width:26px;height:34px;margin-right:6px;border-radius:8px;display:grid;place-items:center;opacity:.7;transition:opacity .2s,background .2s}
.nav-c:hover,.nav-c[aria-expanded="true"]{opacity:1}
.nav-c:focus-visible{outline:2px solid var(--red-on-dark);outline-offset:1px}
.nav-c .i{width:15px;height:15px;transition:transform .45s var(--ease)}
.nav-c[aria-expanded="true"] .i{transform:rotate(180deg)}
.m-ov{display:flex!important;align-items:center;gap:var(--s3);margin-bottom:6px;padding:12px 14px!important;border-radius:14px;background:rgba(255,255,255,.07)}
.m-ov b{font:600 15px/1.2 var(--f-head)}.m-ov span{font-size:14px;opacity:.7}.m-ov .i{margin-left:auto;width:16px;height:16px;color:var(--red-on-dark)}
/* Mega-Fuß: Kennzahlen + Länder */
.mega-foot.v2{display:flex;justify-content:space-between;align-items:center;gap:var(--s6);flex-wrap:wrap}
.mb-stats2{display:flex;gap:var(--s6)}
.mb-stats2>div{display:grid;gap:4px;padding-left:var(--s4);border-left:1px solid var(--night-line)}
.mb-stats2>div:first-child{padding-left:0;border-left:0}
.mb-stats2 b{font:700 28px/1 var(--f-head);letter-spacing:-.04em;color:#fff}
.mb-stats2 span{font:500 14px/1.25 var(--f-body);color:var(--night-mute);max-width:12ch}
@media (max-height:820px){.mb-stats2{display:none}}
@media (max-width:1679px){.mb-eu2>span{display:none}}
@media (max-width:1365px){.mb-stats2 span{max-width:none}}
/* Login-Auswahl */
.dd-login .dd-btn{gap:7px}
.dd-login .dd-btn>.i:first-child{width:19px;height:19px}
.lg-l{font:600 14px/1 var(--f-body)}
@media (max-width:1499px){.lg-l{display:none}}
.lg-list{min-width:310px;padding:8px!important}
.lg-o{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:10px;border-radius:14px;text-decoration:none;color:inherit;transition:background .25s}
.lg-o:hover{background:var(--soft)}
.lg-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center}
.lg-ico .i{width:20px;height:20px}
.lg-o.kunde .lg-ico{background:linear-gradient(145deg,#fff,#f3e3e3);color:var(--red);box-shadow:inset 0 0 0 1px var(--line)}
.lg-o.partner .lg-ico{background:linear-gradient(145deg,#2a2628,#0f1726);color:#7aa7ff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.lg-o b{display:block;font:600 15px/1.2 var(--f-head)}
.lg-o small{display:block;margin-top:2px;font-size:14px;color:var(--ink-2)}
.m-login{display:grid;gap:8px}
.m-login .lg-o{background:rgba(255,255,255,.06)}
.m-login .lg-o small{color:var(--night-mute)}
@media (max-width:1179px){.top-actions .dd-login{display:none}}
/* Terminbuchung */
.cx-act.cal{display:none}
.cal-on .cx-act.cal{display:flex}
html:not(.cal-on) [data-cal-only]{display:none!important}
.calx{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:var(--s4);visibility:hidden;pointer-events:none}
.calx.open{visibility:visible;pointer-events:auto}
.cal-dim{position:absolute;inset:0;background:rgba(10,8,9,.72);backdrop-filter:blur(10px);opacity:0;transition:opacity .4s}
.calx.open .cal-dim{opacity:1}
.cal-card{position:relative;width:min(1080px,100%);height:min(780px,calc(100dvh - 32px));display:grid;grid-template-rows:auto minmax(0,1fr);border-radius:28px;overflow:hidden;background:radial-gradient(70% 60% at 0% 0%,rgba(37,99,235,.35),rgba(37,99,235,0) 60%),#0f1726;color:#fff;box-shadow:0 60px 120px -40px rgba(0,0,0,.8);transform:translateY(24px) scale(.98);opacity:0;transition:transform .55s var(--ease),opacity .4s}
.calx.open .cal-card{transform:none;opacity:1}
.cal-head{position:relative;padding:var(--s6) var(--s6) var(--s4)}
.cal-head :is(h2,.mh){font:600 clamp(26px,2.6vw,38px)/1.1 var(--f-head);letter-spacing:-.03em;margin-top:var(--s2)}
.cal-head p{margin-top:var(--s2);color:#bfdcec;font-size:15px}
.cal-head .cx-close{position:absolute;top:var(--s5);right:var(--s5)}
.cal-frame{position:relative;margin:0 var(--s4) var(--s4);border-radius:20px;overflow:hidden;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.cal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .4s}
.cal-frame.ready iframe{opacity:1}
.cal-load{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:#7aa7ff;animation:calSpin 1s linear infinite}
.cal-frame.ready .cal-load{display:none}
@keyframes calSpin{to{transform:rotate(360deg)}}
/* v9.3 Abfahrtstafel füllt die Breite: Flap-Größe aus der Containerbreite, Rest als Spaltenabstand */
@media (min-width:980px){
.fb:not([data-w]){container-type:inline-size}
.fb:not([data-w])>.fb-head,.fb:not([data-w])>.fb-rows{--fw:min(50px,calc((100cqw - 84px) / 26.65))}
.fb:not([data-w]) .fb-head,.fb:not([data-w]) .fb-row{justify-content:space-between}
}
/* v9.4 einheitliche Breite: alle farbigen Flächen (außer Hero) als Box mit gleichem Rand */
main .fboard,main .zs{margin-inline:var(--box);border-radius:var(--r-lg);overflow:clip}
main .fboard+section,main .zs+section{margin-top:0}
.stage+.fboard,.fboard+.stage,.stage+.zs,.zs+.stage,.zs+.fboard,.fboard+.zs{margin-top:var(--s3)}
/* v9.5 Termin buchen + Mega-Buttons + Footer-Spalte */
.act{display:flex;flex-wrap:wrap;gap:var(--s2)}
.btn.ghost-l{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.btn.ghost-l .bi{background:rgba(255,255,255,.14);color:#fff}
.mp-btns{display:flex;flex-wrap:wrap;gap:var(--s2)}
.mega .btn.mp-cal{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.mega .btn.mp-cal .bi{background:rgba(255,255,255,.14);color:#fff}
.pc-btns{display:flex;flex-wrap:wrap;gap:var(--s2)}
@media (min-width:980px){.foot{grid-template-columns:1.4fr repeat(4,minmax(0,1fr))!important}}
.mega:has(.mega-pane.on[data-pane="htl"]) .mb-tile[data-a="htl"]{display:none}
/* v9.5 Header mit fünf Hauptpunkten: Zwischenbreiten */
@media (min-width:1180px) and (max-width:1849px){.top .hotline .ht{display:none}.top .hotline{padding:0}}
@media (min-width:1180px) and (max-width:1599px){.top-actions{margin-left:auto}.nav{display:none!important}.top .burger{display:grid!important}.top-actions>.dd{display:none!important}.top .hotline .ht{display:flex}}
/* v9.6 Vertrauen offen: Deko der Gradient-Karte aus, Kennzahlen wie in der Nachbarspalte */
.rel-sec .grad{background:none!important;overflow:visible}
.rel-sec .grad::before,.rel-sec .grad::after,.rel-sec .grad .gx{display:none!important}
.rel-sec .rtiles{gap:0;align-items:end}
.rel-sec .rtiles>div{gap:var(--s2);align-content:end;padding-right:var(--s4)}
.rel-sec .rtiles>div+div{border-left:1px solid var(--night-line);padding-left:var(--s4)}
.rel-sec .rtiles i{width:40px;height:40px;border-radius:12px;margin-bottom:var(--s2);background:rgba(255,255,255,.06);box-shadow:none;color:var(--red-on-dark)}
.rel-sec .rtiles i .i{width:19px;height:19px}
.rel-sec .rtiles b{font:700 clamp(44px,4vw,64px)/.95 var(--f-head);letter-spacing:-.05em;color:#fff}
.rel-sec .rtiles>div>span{font:500 14px/1.3 var(--f-body);color:var(--night-mute)}
.rel-sec .rtiles b span{font:inherit;color:inherit;letter-spacing:inherit}
/* v9.6 Mega-Menü kompakter: Band und Kennzahlen direkt unter den Spalten */
.mega-band.v2{margin-top:var(--s6)!important}
.mega-foot.v2{margin-top:var(--s5)!important}
/* v9.6 Tafeln mit eigenen Spalten füllen ebenfalls die Breite */
.fb[data-w]:not(.fb-refs){container-type:inline-size}
.fb[data-w]:not(.fb-refs)>.fb-head,.fb[data-w]:not(.fb-refs)>.fb-rows{--fw:min(var(--fwmax,46px),calc((100cqw - (var(--n,25) - var(--g,4)) * 4px) / (var(--n,25) + (var(--g,4) - 1) * .55)))}
.fb[data-w]:not(.fb-refs) .fb-head,.fb[data-w]:not(.fb-refs) .fb-row{justify-content:space-between}
/* v9.7 Tafel-Kopf: letzte Spalte endet bündig, Text darf nach links überstehen */
.fb-head span{white-space:nowrap}
.fb-head span:last-child{display:flex;justify-content:flex-end}
/* v9.7 konstanter Abstand nach farbigen Boxen und zwischen hellen Abschnitten */
:root{--secpad:var(--s9)}
@media (min-width:980px){:root{--secpad:clamp(88px,7.5vw,120px)}}
main>.stage+section:not(.stage):not(.band-sec):not(.fboard):not(.zs),main>.fboard+section,main>.zs+section:not(.stage),main>section.on-dark:not(.hero):not(.sub-hero)+section:not(.stage):not(.band-sec){padding-top:var(--secpad)!important}
#anspruch,#hersteller,#zielgruppen-htl{padding-top:0!important}
/* v9.8 Box-Regel: farbige Module sind auf jedem Bildschirm genau so breit wie das Inhaltsraster plus fester Innenrand.
Inhalt in und außerhalb von Boxen liegt auf denselben Kanten. Gilt für alle Seiten. */
@media (min-width:980px){:root{--box:max(12px,1.5vw,calc((100vw - var(--maxw)) / 2 + var(--gutter) - 88px))}}
:is(.stage,.trans,.quality,.band,.tst,.fboard,.zs,.lg-partner,.m32-box,.m31-box) .wrap{max-width:none;margin-inline:0;padding-inline:calc(max(var(--gutter),(100vw - var(--maxw)) / 2 + var(--gutter)) - var(--box))}
/* v9.8 Seitenende-Regel: Ganz unten gescrollt füllt der Footer den sichtbaren Bereich unter dem Header.
So ist nie ein angeschnittener Rand des letzten Moduls zu sehen. */
/* Avale 24: v9.8-Seitenende-Regel (footer min-height 100svh) gestrichen, Operator #72768 */
footer>.wrap{width:100%}
/* v9.9 Abstandsregel nachgeschärft: Standardabstand auch nach dem Zusammenarbeit-Teaser; Box an Box immer 16px */
main>#zusammenarbeit+section{padding-top:var(--secpad)!important}
main>section.stage+section.band-sec{margin-top:0!important;padding-top:var(--s4)!important}
/* v9.9 Regelwerk aus dem Audit */
/* Kontrast: bedeutungstragende Icons nie in Hellgrau, Fokusring auf dunklem Grund heller */
.pack li.no .i{color:var(--ink-2)}
.on-dark :focus-visible,.stage :focus-visible,.band :focus-visible{outline-color:var(--red-on-dark)}
/* Box an Box: immer 16px, egal welche Box */
main>:is(section.stage,section.trans,section.quality,section.fboard,section.zs,section.tst)+:is(section.stage,section.trans,section.quality,section.fboard,section.zs,section.tst){margin-top:var(--s4)!important}
/* Wrap-Regel auf alle Bild-Boxen der Bausteine */
:is(.m22-box,.m24-box,.m26-box,.m27-box,.m33-box) .wrap{max-width:none;margin-inline:0;padding-inline:calc(max(var(--gutter),(100vw - var(--maxw)) / 2 + var(--gutter)) - var(--box))}
/* Touch-Ziele mindestens 44px auf Touch-Geräten */
@media (pointer:coarse),(max-width:759px){
footer .foot a{display:inline-flex;align-items:center;min-height:44px}
.crumbs a{display:inline-flex;align-items:center;min-height:44px}
:is(.gr-chip,.pc,.pk-tabs button,.jf button,.pl-wsel button){min-height:44px}
.top .logo{min-height:44px;display:inline-flex;align-items:center}
.lg-link,.lg-card a:not(.btn){display:inline-flex;align-items:center;min-height:44px}
}
/* Animations-Sicherung: falls ein Skript ausfällt, wird Inhalt nach 3,5 s sichtbar */
html.r-safe [data-r],html.r-safe .fade-in,html.r-safe [data-split]{opacity:1!important;transform:none!important}
/* Einzelwort-Regel: Überschriften und Leads ausbalanciert */
:is(h1,h2,h3,.h1,.h2,.lead){text-wrap:balance}
p{text-wrap:pretty}
/* v9.9 Offene Variante der Fahrzeugkarten: folgt direkt auf die Leistungskacheln */
#logistik.v9-open .vcard{background:none;border-radius:0;overflow:visible}
#logistik.v9-open .vcard .vmedia,#logistik.v9-open .vcard .vicon{border-radius:var(--r-lg)}
#logistik.v9-open .vcard .vbody{padding:var(--s4) 0 0;border-top:0}
/* v9.9 SEO: Keyword „MPS-Deployment“ als erste Zeile der H1, optisch als Kicker */
.h1 .h1-kw{display:flex;width:max-content;margin-bottom:var(--s5);letter-spacing:normal}
.foot-geo{margin-top:var(--s4);max-width:46ch;font-size:14px;line-height:1.55;color:var(--ink-2)}
/* v10.0 Offene Varianten: Kontrast in allen Themes (hell, dunkel, farbig) erzwingen */
html #logistik.v9-open .vcard,html #weiter.v9-open .tl3 .card{background:none!important;box-shadow:none!important;border:0!important}
html #logistik.v9-open .vcard h3,html #weiter.v9-open .tl3 .card h3{color:var(--ink)!important;opacity:1!important}
html #logistik.v9-open .vcard p,html #logistik.v9-open .vcard .scale,html #weiter.v9-open .tl3 .card p{color:var(--ink-2)!important;opacity:1!important}
html #logistik.v9-open .vcard .k,html #weiter.v9-open .tl3 .card .st{color:var(--red)!important}
html #logistik.v9-open .vcard .bar{background:var(--line)!important}
html #logistik.v9-open .vcard.spot::after,html #logistik.v9-open .vcard::before{display:none!important}
/* Farbig-Theme setzt --ink in Karten lokal auf hell: offene Varianten daher mit den Seitentönen */
html:not([data-theme=dark]) #logistik.v9-open .vcard,html:not([data-theme=dark]) #weiter.v9-open .tl3 .card{--ink:#1c1c1c;--ink-2:#585856;--line:rgba(28,28,28,.12)}
html[data-theme=dark] #logistik.v9-open .vcard,html[data-theme=dark] #weiter.v9-open .tl3 .card{--ink:#f2f2f0;--ink-2:#a9a9a5;--line:rgba(255,255,255,.14)}
/* v10.0 Kontrast-Regel: In offenen Modulen (.v9-open ohne Box) gelten die Seitentöne, auch wenn ein Theme Karten lokal umfärbt */
html:not([data-theme=dark]) main>section.v9-open:not(.on-dark):not(.stage) *{--ink:#1c1c1c;--ink-2:#585856}
html[data-theme=dark] main>section.v9-open:not(.on-dark):not(.stage) *{--ink:#f2f2f0;--ink-2:#a9a9a5}
html main>section.v9-open:not(.on-dark):not(.stage) :is(h3,h4){color:var(--ink)}
html main>section.v9-open:not(.on-dark):not(.stage) :is(p,li){color:var(--ink-2)}
.vr-jump a{color:var(--ink)}
/* v10.0 Raster-Regel für Boxen (ersetzt v9.8): Ab Tablet schließt jede farbige Box exakt an der Inhaltskante ab,
dieselbe Kante wie Logo und CTA im Header. Innen gilt ein fester Innenabstand. Mobil bleibt die Box fast randlos. */
@media (min-width:760px){
:root{--box:max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)));--boxpad:clamp(32px,4.2vw,72px)}
:is(.stage,.trans,.quality,.band,.tst,.fboard,.zs,.lg-partner,.m32-box,.m31-box,.m22-box,.m24-box,.m26-box,.m27-box,.m33-box) .wrap{max-width:none;margin-inline:0;padding-inline:var(--boxpad)}
.tst-track{padding-inline:var(--boxpad)!important;scroll-padding-inline:var(--boxpad)!important}
}
/* v10.0 Header rechts exakt auf der Inhaltskante */
.top .burger{margin-right:0!important}
.top-actions>:last-child{margin-right:0!important}
@media (min-width:1850px){.top>.wrap{gap:12px}.top-actions{gap:10px}}
/* v10.1 Sprachwahl: Haken direkt hinter der gewählten Sprache, gewählte Zeile hinterlegt.
Vorher stand der Haken am rechten Zellrand vor der nächsten Flagge und wirkte wie deren Markierung. */
.dd-lang .dd-list li>.i{margin-left:0}
.dd-lang .dd-list li[aria-selected="true"]{background:var(--soft);box-shadow:none}
.dd-lang .dd-list li[aria-selected="true"] b,.dd-lang .dd-list li[aria-selected="true"]>span{font-weight:700}
.dd-lang .dd-list{column-gap:var(--s3)}
/* v10.3 Kontaktfenster: kein „Zurück“ in der Aufnahme (Schließen reicht), QR-Hinweis am Desktop */
.cx-back{display:none!important}
.cx-qr.pulse .cx-code{animation:qrpulse 1.2s var(--ease) 2}
@keyframes qrpulse{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}50%{box-shadow:0 0 0 8px rgba(255,90,90,.35)}}
/* v10.3 CI-Dropdown: ruhiger Pfeil ohne Kästchen, gleiche Optik für alle Auswahlfelder */
.sel-btn .chev{width:28px;height:28px;border-radius:50%;background:transparent!important;color:var(--ink-2)}
.sel.open .chev{background:transparent!important;color:var(--red)}
.sel-btn{box-shadow:inset 0 0 0 1px var(--line)}
.ci-sel .sel-btn{background:var(--surface);padding:0 var(--s3) 0 var(--s4);border-radius:14px;min-height:52px}
.ci-sel.empty .sel-btn>span:first-child{color:var(--ink-2)}
.ci-sel.bad .sel-btn{box-shadow:inset 0 0 0 2px var(--red)}
.ci-sel .sel-list{max-height:min(360px,60vh);overflow:auto;scrollbar-width:none}
.ci-sel .sel-list::-webkit-scrollbar{display:none}
select.ci-native{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.on-dark .ci-sel .sel-btn,.lg-partner .ci-sel .sel-btn{background:rgba(255,255,255,.04);color:var(--night-fg);box-shadow:inset 0 0 0 1px var(--night-line)}
.on-dark .ci-sel .sel-list,.lg-partner .ci-sel .sel-list{background:#1c181a;color:#fff;box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
.on-dark .ci-sel .sel-list li:hover,.on-dark .ci-sel .sel-list li.act,.lg-partner .ci-sel .sel-list li:hover,.lg-partner .ci-sel .sel-list li.act{background:rgba(255,255,255,.06)}
/* v10.3 Theme „Farbig“ mit eigener Identität (vorher kaum von „Hell“ zu unterscheiden):
Rosé-Lila-Grund, getönte Flächen, Pflaume als Textfarbe, Aktionen im Verlauf Rot → Magenta → Lila. Kontraste ≥ 4,5:1 für Text. */
html[data-theme="colorful"]{--bg:#ecf8fd;--surface:#fafdff;--soft:#dcecf8;--soft-2:#cfe3f5;--line:#c9def2;--ink:#082f49;--ink-2:#3f5f73;--red-soft:#dfeefc;--on-ink:#fff}
html[data-theme="colorful"] body{background:radial-gradient(70% 55% at 100% 0%,rgba(194,24,91,.18),rgba(194,24,91,0) 70%),radial-gradient(60% 55% at 0% 45%,rgba(123,44,191,.12),rgba(123,44,191,0) 70%),radial-gradient(60% 50% at 100% 100%,rgba(37,99,235,.10),rgba(37,99,235,0) 70%),#ecf8fd;background-attachment:fixed}
html[data-theme="colorful"] .btn:not(.light):not(.ghost),html[data-theme="colorful"] .lg-tabs i,html[data-theme="colorful"] .pick [aria-pressed="true"],html[data-theme="colorful"] .seg input:checked+span{background:linear-gradient(120deg,#2563eb,#0891b2 60%,#4f46e5)!important;color:#fff!important}
html[data-theme="colorful"] .btn:not(.light):not(.ghost) .bi{background:rgba(255,255,255,.18);color:#fff}
html[data-theme="colorful"] .top.solid:not(.scrolled){background:rgba(251,236,241,.84)!important;backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
html[data-theme="colorful"] .lg-kunde{background:transparent}
html[data-theme="colorful"] :is(.lg-card,.vr-form-box,.pl-doc,.pl-sbox,.lp-card,.vr-cm,.m36-ph){box-shadow:0 40px 90px -50px rgba(123,20,80,.45),inset 0 0 0 1px var(--line)}
html[data-theme="colorful"] :is(input:not([type=checkbox]):not([type=radio]),textarea,.sel-btn){background:#fff6f9!important}
html[data-theme="colorful"] .kicker{color:#0e7490}
html[data-theme="colorful"] :is(.on-dark,.stage,.band,.trans,.quality,.tst,.zs,.fboard,.kf-card,.lg-partner) .kicker{color:#7dd3fc}
/* DBL-F3, QA-Auftrag 25.10.: Kicker auf roten Bandkarten bleibt im Theme Farbig weiß (vorher #7dd3fc auf Rotverlauf, 3,4:1) */
html[data-theme="colorful"] .bandcard.red .kicker{color:#fff}
/* DBL-K53: Hover-Farbe nur für reine Textlinks; Karten, Kacheln und Kästen behalten ihre Farben */
html[data-theme="colorful"] a:not(.btn):not(.go):not(:has(*)):hover{color:#0e7490}
/* DBL-K53: Text auf Bildkarten und farbigen Kästen bleibt hell, in Ruhe und beim Zeigen, in allen Themes */
.post.feature :is(h3,p,b,span:not(.chip)),.post.feature:hover :is(h3,p,b){color:#fff!important}
.post.feature .meta{color:#bcd2ff!important}
:is(.m29-post.img,.m30-post.on,.m30-post.ph:hover) :is(h3,p,b){color:#fff!important}
:is(.m29-post.img,.m30-post.on,.m30-post.ph:hover) small{color:rgba(255,255,255,.78)!important}
.kf-hotcard,.kf-hotcard:hover,.kf-hotcard b,.kf-hotcard .ic{color:#fff!important}.kf-hotcard small{color:rgba(255,255,255,.85)!important}
html[data-theme="colorful"] main>section.v9-open:not(.on-dark):not(.stage) *{--ink:#082f49;--ink-2:#3f5f73}
html[data-theme="colorful"] #logistik.v9-open .vcard,html[data-theme="colorful"] #weiter.v9-open .tl3 .card{--ink:#082f49;--ink-2:#3f5f73}
/* Baustein 53: Bereichsband „Alle Bereiche“ (sechs Kacheln, Bild als Grund, Text darüber; DBL-K48) */
.mega-band.v2.six .mb-tile{position:relative;height:132px;display:block;padding:0;background:#0b1220;overflow:hidden}
.mega-band.v2.six .mbt-im{position:absolute;inset:0;display:block;width:100%;height:100%}
.mega-band.v2.six .mbt-im::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,9,.2) 0%,rgba(10,8,9,.6) 45%,rgba(10,8,9,.94) 100%)}
.mega-band.v2.six .mbt-tx{position:absolute;left:14px;right:12px;bottom:12px;z-index:1;min-width:0}
.mega-band.v2.six .mbt-n{margin:0 0 4px}
.mega-band.v2.six .mbt-tx b{font-size:15px;line-height:1.2;white-space:normal;overflow:visible;text-overflow:clip;text-wrap:balance;hyphens:auto;-webkit-hyphens:auto}
.mega-band.v2.six .mbt-tx small{font-size:14px;line-height:1.3;color:rgba(255,255,255,.74);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mega-band.v2.six .mbt-go{position:absolute;top:10px;right:10px;z-index:1;width:32px;height:32px}
@media (max-width:1365px){.mega-band.v2.six .mb-tile{height:100px}.mega-band.v2.six .mbt-tx small{display:none}.mega-band.v2.six .mbt-tx b{font-size:14px}}
/* Unterseite Zusammenarbeit */
.sub-hero{background:var(--night);padding-block:calc(var(--head) + var(--s8)) var(--s9);overflow:hidden}
.sub-hero .wrap{position:relative;z-index:1}
.sub-hero h1{margin-block:var(--s5)}
.sub-hero .lead{margin-bottom:var(--s6)}
.crumbs{display:flex;gap:var(--s2);align-items:center;font:500 var(--t-label)/1 var(--f-body);color:var(--night-mute);margin-bottom:var(--s5)}
.crumbs a{text-decoration:none;color:var(--night-fg)}
.crumbs a:hover{color:var(--red-on-dark)}
.tl{display:grid;gap:var(--s7)}
@media (min-width:1080px){.tl{grid-template-columns:300px minmax(0,1fr);gap:var(--s8);align-items:start}}
.tl-nav{display:none}
@media (min-width:1080px){.tl-nav{display:grid;gap:var(--s1);position:sticky;top:calc(var(--head) + var(--s5))}}
.tl-nav a{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--s3);align-items:center;min-height:52px;padding:var(--s2) var(--s3);border-radius:var(--r-md);text-decoration:none;color:var(--ink-2);font:600 15px/1.25 var(--f-body);transition:background .3s,color .3s}
.tl-nav a b{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface);font:600 14px/1 var(--f-body);transition:background .3s,color .3s}
.tl-nav a:hover{background:var(--surface);color:var(--ink)}
.tl-nav a.on{color:var(--ink);background:var(--surface)}
.tl-nav a.on b{background:var(--red-fill);color:#fff}
.tl-nav .bar{height:4px;border-radius:4px;background:var(--soft-2);margin-top:var(--s4);overflow:hidden}
.tl-nav .bar i{display:block;height:100%;width:0;background:var(--red);transition:width .3s linear}
.steps{display:grid;gap:var(--s4)}
.step{background:var(--surface);border-radius:var(--r-lg);padding:var(--s6) var(--s5);display:grid;gap:var(--s5);scroll-margin-top:calc(var(--head) + var(--s5));transition:box-shadow .5s var(--ease)}
@media (min-width:980px){.step{padding:var(--s7)}}
.step:hover{box-shadow:var(--shadow)}
.step-h{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s4)}
@media (min-width:980px){.step-h{gap:var(--s5)}}
.step-h .n{font:700 clamp(44px,5vw,64px)/1 var(--f-head);letter-spacing:-.05em;color:var(--red);font-variant-numeric:tabular-nums}
.step h2{font:600 clamp(26px,2.8vw,36px)/1.12 var(--f-head);letter-spacing:-.035em}
.step .intro{color:var(--ink-2);max-width:62ch}
.cols3{display:grid;gap:var(--s3)}
@media (min-width:760px){.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.col{background:var(--bg);border-radius:var(--r-md);padding:var(--s5);display:grid;gap:var(--s3);align-content:start}
.col h3{display:flex;align-items:center;gap:var(--s2);font:600 var(--t-h4)/1.2 var(--f-head)}
.col h3 .i{color:var(--red)}
.col.res{background:var(--night);color:var(--night-fg)}
.col.res h3 .i{color:var(--red-on-dark)}
.col ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.col li{display:flex;gap:var(--s2);font-size:15px;line-height:1.45}
.col li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);margin-top:9px;flex:none}
.col.res li::before{background:var(--red-on-dark)}
.need{display:grid;gap:var(--s3)}
@media (min-width:640px){.need{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.need{grid-template-columns:repeat(3,minmax(0,1fr))}}
.need div{background:var(--surface);border-radius:var(--r-md);padding:var(--s5);display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--s4);align-items:start;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.need div:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.need .ico{width:48px;height:48px;border-radius:14px;background:var(--red-soft);color:var(--red);display:grid;place-items:center}
.need h3{font:600 var(--t-h4)/1.25 var(--f-head);margin-bottom:var(--s1)}
.need p{font-size:var(--t-small);color:var(--ink-2)}
.roles{display:grid;gap:var(--s3)}
@media (min-width:980px){.roles{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}}
.role{background:var(--night-2);border-radius:var(--r-lg);padding:var(--s6) var(--s5);display:grid;gap:var(--s3);align-content:start;min-height:260px}
.role i{width:56px;height:56px;border-radius:16px;background:var(--night-3);display:grid;place-items:center;color:var(--red-on-dark);transition:background .35s,color .35s}
.role:hover i{background:var(--red-fill);color:#fff}
.role i .i{width:24px;height:24px}
.role h3{font:600 var(--t-h4)/1.25 var(--f-head)}
.role p{font-size:var(--t-small);color:var(--night-mute)}
.split2{display:grid;gap:var(--s3)}
@media (min-width:980px){.split2{grid-template-columns:1fr 1fr;gap:var(--s4)}}
.panel2{border-radius:var(--r-lg);overflow:hidden;background:var(--surface);display:flex;flex-direction:column}
.panel2 .pimg{height:280px;overflow:hidden}
.panel2 .pimg img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.panel2:hover .pimg img{transform:scale(1.05)}
.panel2 .pb{padding:var(--s6) var(--s5);display:grid;gap:var(--s4)}
@media (min-width:980px){.panel2 .pb{padding:var(--s6)}}
.panel2 h2{font:600 clamp(26px,2.6vw,34px)/1.12 var(--f-head);letter-spacing:-.035em}
.panel2 p{color:var(--ink-2)}
.panel2 ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.panel2 li{display:flex;gap:var(--s3);font-size:15px}
.panel2 li .i{width:18px;height:18px;color:var(--red);margin-top:2px}
.docs{display:grid;gap:var(--s3)}
@media (min-width:760px){.docs{grid-template-columns:repeat(5,minmax(0,1fr))}}
.docc{background:var(--surface);border-radius:var(--r-md);padding:var(--s5);display:grid;gap:var(--s3);align-content:start;min-height:220px;position:relative;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.docc:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:var(--shadow)}
.docc::after{content:"";position:absolute;right:0;top:0;width:36px;height:36px;background:linear-gradient(225deg,var(--bg) 50%,var(--soft-2) 50%)}
.docc .i{width:28px;height:28px;color:var(--red)}
.docc h3{font:600 var(--t-h4)/1.25 var(--f-head)}
.docc p{font-size:var(--t-small);color:var(--ink-2)}
.m28-grid{display:grid;gap:var(--s3)}
.m28-grid>*{min-width:0}
.m28-red{border-radius:var(--r-lg);padding:var(--s6) var(--s5);background:radial-gradient(90% 60% at 100% 0%,rgba(255,255,255,.16),transparent 60%),var(--red-fill);color:#fff;display:flex;flex-direction:column}
.m28-red .kicker{color:#fff}
.m28-red h2{margin:var(--s4) 0 var(--s4);font:600 clamp(30px,3.2vw,52px)/1.04 var(--f-head);letter-spacing:-.045em;hyphens:manual}
.m28-red h2 span{display:block;color:rgba(255,255,255,.6)}
.m28-red>p{margin:0;color:rgba(255,255,255,.85);line-height:1.6;max-width:40ch}
.m28-bar{margin-top:var(--s7)}
.m28-bar div{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);font:600 var(--t-small)/1 var(--f-body)}
.m28-bar div b{height:28px;padding:0 10px;display:inline-flex;align-items:center;border-radius:var(--r-pill);background:#fff;color:var(--red-fill);font:700 14px/1 var(--f-body);position:relative}
.m28-bar div b::after{content:"";position:absolute;right:14px;bottom:-5px;width:10px;height:10px;background:#fff;transform:rotate(45deg);border-radius:2px;z-index:-1}
.m28-bar s{display:block;margin-top:var(--s3);height:8px;border-radius:8px;background:rgba(255,255,255,.22);overflow:hidden;text-decoration:none}
.m28-bar s i{display:block;height:100%;width:0;border-radius:8px;background:#fff;transition:width 1.8s var(--ease) .3s}
.m28-bar.in s i{width:100%}
html:not(.js) .m28-bar s i{width:100%}
.m28-stat{margin-top:auto;padding-top:var(--s7);display:flex;align-items:flex-end;gap:var(--s4)}
.m28-stat b{font:600 clamp(88px,10vw,140px)/.78 var(--f-head);letter-spacing:-.06em}
.m28-stat span{font:500 var(--t-small)/1.35 var(--f-body);color:rgba(255,255,255,.85);max-width:14ch;padding-bottom:6px}
.m28-cards{display:grid;gap:var(--s3)}
.m28-card{min-width:0;border-radius:var(--r-lg);padding:var(--s6) var(--s5);background:var(--surface);box-shadow:var(--shadow);transition:transform .6s var(--ease),box-shadow .6s}
.m28-card:hover{transform:translateY(-6px);box-shadow:0 1px 2px rgba(0,0,0,.05),0 36px 60px -30px rgba(37,99,235,.35)}
.m28-ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--red-soft);color:var(--red);margin-bottom:var(--s6);transition:background .4s,color .4s}
.m28-card:hover .m28-ico{background:var(--red-fill);color:#fff}
.m28-ico .i{width:24px;height:24px}
.m28-card h3{margin:0;font:600 var(--t-h4)/1.2 var(--f-head);letter-spacing:-.02em}
.m28-card p{margin:var(--s2) 0 0;font-size:var(--t-small);line-height:1.55;color:var(--ink-2)}
@media (min-width:760px){.m28-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.m28-red{padding:var(--s7) var(--s6)}}
@media (min-width:980px){.m28-grid{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}
@media (min-width:1280px){.m28-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion: reduce){.m23-sig,.m24-card,.m25-card,.m25-phone,.m26-card,.m28-card,.m29-post,.m33-sl,.m33-sl .m32-in>*{transition-duration:.25s!important}.m28-bar s i{transition-duration:.4s}}
/* ===== Bereichs-Seiten (Über uns, Karriere, Start) ===== */
.sub-hero .h1 .hl{white-space:nowrap}
.hero2{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7);align-items:center}
.hero2>*{min-width:0}
@media (min-width:1080px){.hero2{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}}
.hero2 .h1{font-size:clamp(34px,9.6vw,96px)}
@media (min-width:1080px){.hero2 .h1{font-size:clamp(46px,5.4vw,96px)}}
.ticks{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:var(--s3)}
.ticks li{display:flex;gap:var(--s3);align-items:flex-start;color:var(--night-fg);font-size:var(--t-body)}
.ticks li i{width:28px;height:28px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--red-fill);color:#fff}
.ticks li .i{width:16px;height:16px;stroke-width:2.6}
.seals{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.seals span{display:inline-flex;align-items:center;gap:var(--s2);height:40px;padding:0 14px 0 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font:600 14px/1 var(--f-body);color:var(--night-fg)}
.seals .i{width:18px;height:18px;color:var(--red-on-dark)}
.seals+.btn-row{margin-top:var(--s7)!important}
/* Porträt */
.portrait{position:relative;justify-self:center;width:min(420px,100%);border-radius:var(--r-lg);overflow:hidden;background:#e8e5e2;box-shadow:0 50px 100px -40px rgba(0,0,0,.8)}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;display:block}
.portrait figcaption{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:14px 16px;border-radius:18px;background:rgba(20,16,18,.62);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#fff}
.portrait b{display:block;font:600 18px/1.2 var(--f-head)}
.portrait small{display:block;font-size:14px;color:#bfe3f5;margin-top:2px}
.portrait a{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;background:#fff;color:#0b1220}
.portrait a .i{width:18px;height:18px}
/* Kennzahlen-Leiste */
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;border-radius:var(--r-lg);overflow:hidden;background:var(--line);box-shadow:inset 0 0 0 1px var(--line)}
@media (min-width:860px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kpis div{background:var(--surface);padding:var(--s6) var(--s5);display:grid;gap:var(--s2)}
.kpis b{font:700 clamp(40px,4.4vw,68px)/1 var(--f-head);letter-spacing:-.05em;background:linear-gradient(180deg,var(--ink),color-mix(in oklab,var(--ink) 55%,var(--red)));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.kpis span{font-size:var(--t-small);color:var(--ink-2)}
/* Zeitstrahl */
.tline{position:relative;display:grid;gap:var(--s4);padding-left:56px}
.tline::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:2px;background:var(--line);border-radius:2px}
.tline .tl-fill{position:absolute;left:19px;top:8px;width:2px;height:var(--tp,0%);background:linear-gradient(180deg,var(--red-fill),#1e3a8a);border-radius:2px}
.tl-it{position:relative;background:var(--surface);border-radius:var(--r-md);padding:var(--s5);display:grid;gap:var(--s2);box-shadow:inset 0 0 0 1px var(--line);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tl-it:hover{transform:translateX(6px);box-shadow:var(--shadow)}
.tl-it::before{content:"";position:absolute;left:-44px;top:26px;width:14px;height:14px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 3px var(--red-fill)}
.tl-it.now::before{background:var(--red-fill);box-shadow:0 0 0 6px color-mix(in oklab,var(--red) 18%,transparent)}
.tl-y{font:700 clamp(28px,2.6vw,40px)/1 var(--f-head);letter-spacing:-.04em;color:var(--red)}
.tl-it h3{font:600 var(--t-h4)/1.25 var(--f-head)}
.tl-it p{color:var(--ink-2);font-size:var(--t-small);max-width:70ch}
@media (min-width:980px){.tl-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s8);align-items:start}.tl-wrap .sec-head{position:sticky;top:calc(var(--head) + var(--s6));display:block}.tl-wrap .sec-head .lead{margin-top:var(--s4)}}
/* Vision & Mission */
.vm{display:grid;gap:var(--s3)}
@media (min-width:860px){.vm{grid-template-columns:1fr 1fr}}
.vm article{border-radius:var(--r-lg);padding:clamp(28px,4vw,56px);display:grid;gap:var(--s4);align-content:start;min-height:280px}
.vm article:first-child{background:radial-gradient(70% 70% at 100% 0%,rgba(37,99,235,.45),rgba(37,99,235,0) 60%),var(--night);color:var(--night-fg)}
.vm article:last-child{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.vm q{quotes:none;font:600 clamp(24px,2.4vw,36px)/1.2 var(--f-head);letter-spacing:-.03em}
.vm p{color:inherit;opacity:.78}
/* Werte */
.vals{display:grid;gap:var(--s3)}
@media (min-width:640px){.vals{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.vals{grid-template-columns:repeat(5,minmax(0,1fr))}}
.val{position:relative;overflow:hidden;background:var(--surface);border-radius:var(--r-lg);padding:var(--s6) var(--s5);display:grid;gap:var(--s3);align-content:start;min-height:280px;box-shadow:inset 0 0 0 1px var(--line);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.val:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.val .vn{font:700 15px/1 var(--f-head);color:var(--red);letter-spacing:.06em}
.val .vi{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--red-soft);color:var(--red)}
.val .vi .i{width:24px;height:24px}
.val h3{font:600 var(--t-h4)/1.2 var(--f-head)}
.val p{font-size:var(--t-small);color:var(--ink-2)}
.val::after{content:"9";position:absolute;right:-6px;bottom:-34px;font:700 160px/1 var(--f-head);color:color-mix(in oklab,var(--red) 7%,transparent);pointer-events:none;transition:transform .7s var(--ease)}
.val:hover::after{transform:translateY(-10px) rotate(-6deg)}
/* Kodex */
.codex{display:grid;gap:var(--s3)}
@media (min-width:860px){.codex{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cx-i{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);padding:var(--s5);border-radius:var(--r-md);background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-line)}
.cx-i i{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--night-3);color:var(--red-on-dark)}
.cx-i .i{width:22px;height:22px}
.cx-i h3{font:600 var(--t-h4)/1.25 var(--f-head);color:var(--night-fg);margin-bottom:var(--s1)}
.cx-i p{font-size:var(--t-small);color:var(--night-mute)}
/* Zertifikate */
.certs{display:grid;gap:var(--s3)}
@media (min-width:640px){.certs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.certs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cert{position:relative;border-radius:var(--r-lg);padding:var(--s6) var(--s5);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:var(--s3);align-content:start;min-height:230px;overflow:hidden}
.cert .seal{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(from 210deg,var(--red-fill),#1e3a8a,var(--red-fill));color:#fff;box-shadow:0 14px 30px -14px rgba(37,99,235,.8)}
.cert .seal .i{width:28px;height:28px}
.cert b{font:700 clamp(22px,1.8vw,28px)/1.1 var(--f-head);letter-spacing:-.02em}
.cert p{font-size:var(--t-small);color:var(--ink-2)}
.fine{margin-top:var(--s4);font-size:14px;color:var(--ink-2)}
/* Verantwortung entlang des Lebenszyklus */
.cycle{display:grid;gap:var(--s3);counter-reset:cyc}
@media (min-width:860px){.cycle{grid-template-columns:repeat(5,minmax(0,1fr))}}
.cyc{position:relative;padding:var(--s5);border-radius:var(--r-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:var(--s2);align-content:start}
.cyc::before{counter-increment:cyc;content:"0" counter(cyc);font:700 14px/1 var(--f-head);color:var(--red);letter-spacing:.06em}
.cyc h3{font:600 17px/1.25 var(--f-head)}
.cyc p{font-size:var(--t-small);color:var(--ink-2)}
@media (min-width:860px){.cyc:not(:last-child)::after{content:"";position:absolute;right:-12px;top:50%;width:12px;height:2px;background:var(--red)}}
/* Bibliothek */
.lib{display:grid;border-radius:var(--r-lg);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);background:var(--surface)}
.lib-r{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:var(--s4);align-items:center;padding:var(--s4) var(--s5);border-top:1px solid var(--line);transition:background .3s}
.lib-r:first-child{border-top:0}
.lib-r:hover{background:var(--soft)}
.lib-r i{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--soft);color:var(--red)}
.lib-r .i{width:22px;height:22px}
.lib-r b{display:block;font:600 16px/1.3 var(--f-head)}
.lib-r small{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
.lib-r .chip{background:var(--soft-2)}
@media (max-width:639px){.lib-r{grid-template-columns:40px minmax(0,1fr)}.lib-r .chip{grid-column:2;justify-self:start}}
/* Referenzen */
.refs{display:grid;gap:var(--s3)}
@media (min-width:760px){.refs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){.refs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ref{display:grid;gap:var(--s3);align-content:start;padding:var(--s6) var(--s5);border-radius:var(--r-lg);background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-line);min-height:220px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.ref:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(122,167,255,.35),0 30px 60px -30px rgba(37,99,235,.6)}
.ref .yr{justify-self:start;height:30px;padding:0 12px;display:inline-flex;align-items:center;border-radius:var(--r-pill);background:rgba(255,255,255,.08);font:600 14px/1 var(--f-body);color:#bcd2ff;font-variant-numeric:tabular-nums}
.ref h3{font:600 clamp(19px,1.5vw,22px)/1.2 var(--f-head);color:var(--night-fg)}
.ref p{font-size:var(--t-small);color:var(--night-mute)}
/* Karriere */
.why{display:grid;gap:var(--s3)}
@media (min-width:760px){.why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){.why{grid-template-columns:repeat(4,minmax(0,1fr))}}
.wy{position:relative;padding:var(--s6) var(--s5);border-radius:var(--r-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:var(--s3);align-content:start;min-height:260px;overflow:hidden}
.wy .wn{font:700 clamp(44px,4vw,64px)/1 var(--f-head);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.2px color-mix(in oklab,var(--red) 55%,transparent);padding-right:.06em}
.wy:hover .wn{color:var(--red);-webkit-text-stroke-color:transparent}
.wy h3{font:600 var(--t-h4)/1.25 var(--f-head)}
.wy p{font-size:var(--t-small);color:var(--ink-2)}
.jobs-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s4);margin-bottom:var(--s5)}
.jf{display:flex;flex-wrap:wrap;gap:6px}
.jf button{appearance:none;border:0;cursor:pointer;height:40px;padding:0 16px;border-radius:var(--r-pill);background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);font:600 14px/1 var(--f-body);transition:background .3s,color .3s}
.jf button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);box-shadow:none}
.jcount{font:600 var(--t-label)/1 var(--f-body);color:var(--ink-2)}
.jlist{display:grid;gap:var(--s3)}
.job{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);align-items:center;padding:var(--s5) var(--s5) var(--s5) var(--s6);border-radius:var(--r-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;color:var(--ink);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.job:hover{transform:translateX(6px);box-shadow:var(--shadow)}
.job.hide{display:none}
.job h3{font:600 clamp(19px,1.6vw,24px)/1.2 var(--f-head);letter-spacing:-.02em}
.job .jc{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s3)}
.job .jc span{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--r-pill);background:var(--soft);font:600 14px/1 var(--f-body);color:var(--ink-2)}
.job .jc .i{width:14px;height:14px}
.job .go{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--on-ink);transition:background .3s,transform .45s var(--ease)}
.job:hover .go{background:var(--red-fill);color:#fff;transform:rotate(-45deg)}
.job .go .i{width:20px;height:20px}
.job.init{background:radial-gradient(80% 120% at 100% 0%,rgba(37,99,235,.45),rgba(37,99,235,0) 60%),var(--night);color:var(--night-fg);box-shadow:none}
.job.init .jc span{background:rgba(255,255,255,.1);color:var(--night-mute)}
.job.init .go{background:#fff;color:#0b1220}
#stellen .job.init{color:var(--ink)!important}
#stellen .job.init :is(h3,b,strong){color:var(--ink)!important}
#stellen .job.init :is(p,small,.jc span){color:var(--ink-2)!important}
#stellen .job.init .jc span{background:var(--soft)}
#stellen .job.init .go{background:var(--ink);color:var(--bg)}
.steps4{display:grid;gap:var(--s3);counter-reset:st}
@media (min-width:860px){.steps4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.s4{padding:var(--s5);border-radius:var(--r-md);background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-line);display:grid;gap:var(--s2);align-content:start}
.s4::before{counter-increment:st;content:counter(st);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--red-fill);color:#fff;font:700 16px/1 var(--f-head);margin-bottom:var(--s2)}
.s4 h3{font:600 17px/1.25 var(--f-head);color:var(--night-fg)}
.s4 p{font-size:var(--t-small);color:var(--night-mute)}
/* Bewerbungsformular */
.apply{display:grid;gap:var(--s5);padding:clamp(24px,4vw,56px);border-radius:var(--r-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
@media (min-width:1080px){.apply{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s8)}}
.apply h2{font:600 clamp(28px,2.8vw,42px)/1.1 var(--f-head);letter-spacing:-.035em}
.apply .side p{color:var(--ink-2);margin-top:var(--s4)}
.af{display:grid;gap:var(--s3)}
.af .r2{display:grid;gap:var(--s3)}
@media (min-width:640px){.af .r2{grid-template-columns:1fr 1fr}}
.af label.f{display:grid;gap:6px;font:600 var(--t-label)/1.2 var(--f-body);color:var(--ink-2)}
.af input[type=text],.af input[type=email],.af input[type=tel],.af textarea{width:100%;border:0;border-radius:14px;background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);font:500 15px/1.4 var(--f-body);padding:13px 16px;outline:none;transition:box-shadow .25s}
.af textarea{min-height:120px;resize:vertical}
.af input:focus,.af textarea:focus{box-shadow:inset 0 0 0 1.5px var(--red)}
.af .bad{box-shadow:inset 0 0 0 1.5px var(--red)!important}
.pick{display:flex;flex-wrap:wrap;gap:6px}
.pick button{appearance:none;border:0;cursor:pointer;min-height:40px;padding:8px 14px;border-radius:var(--r-pill);background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);font:600 14px/1.2 var(--f-body);text-align:left}
.pick button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);box-shadow:none}
.drop{position:relative;display:grid;place-items:center;gap:6px;min-height:120px;padding:var(--s5);border-radius:16px;border:1.5px dashed color-mix(in oklab,var(--ink) 25%,transparent);background:var(--bg);text-align:center;cursor:pointer;transition:border-color .25s,background .25s}
.drop:hover,.drop.over{border-color:var(--red);background:var(--red-soft)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop .i{width:26px;height:26px;color:var(--red)}
.drop b{font:600 15px/1.3 var(--f-head)}
.drop small{font-size:14px;color:var(--ink-2)}
.drop.has{border-style:solid;border-color:var(--red)}
.ok2{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;cursor:pointer;font-size:14px;line-height:1.45;color:var(--ink-2)}
.ok2 input{position:absolute;opacity:0;pointer-events:none}
.ok2 .box{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--bg);box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--ink) 30%,transparent);color:transparent;transition:background .25s,color .25s}
.ok2 .box .i{width:15px;height:15px;stroke-width:3}
.ok2 input:checked+.box{background:var(--red-fill);color:#fff;box-shadow:none}
.ok2 input:focus-visible+.box{outline:2px solid var(--red);outline-offset:2px}
.amsg{min-height:1.2em;font-size:14px;color:var(--red)}
.adone{display:none;padding:var(--s6);border-radius:var(--r-md);background:var(--red-soft);gap:var(--s2)}
.apply.sent .adone{display:grid}.apply.sent .af{display:none}
.adone b{font:600 22px/1.2 var(--f-head)}
/* Stellenanzeige */
.facts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.facts span{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font:600 14px/1 var(--f-body);color:var(--night-fg)}
.facts .i{width:17px;height:17px;color:var(--red-on-dark)}
.jd{display:grid;gap:var(--s5)}
@media (min-width:1080px){.jd{grid-template-columns:minmax(0,1fr) 360px;gap:var(--s7);align-items:start}}
.jd-main{display:grid;gap:var(--s4)}
.jd-sec{background:var(--surface);border-radius:var(--r-lg);padding:clamp(24px,3vw,44px);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:var(--s4)}
.jd-sec h2{font:600 clamp(24px,2.2vw,32px)/1.15 var(--f-head);letter-spacing:-.03em;display:flex;align-items:center;gap:var(--s3)}
.jd-sec h2 i{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--red-soft);color:var(--red);flex:none}
.jd-sec h2 .i{width:20px;height:20px}
.jd-sec p{color:var(--ink-2)}
.jd-sec ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.jd-sec li{display:flex;gap:var(--s3);font-size:16px;line-height:1.5}
.jd-sec li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);margin-top:9px;flex:none}
.jd-sec li.kann::before{background:transparent;box-shadow:inset 0 0 0 2px var(--red)}
.jd-sec .lg{display:flex;gap:var(--s5);flex-wrap:wrap;font-size:14px;color:var(--ink-2)}
.jd-sec .lg span{display:inline-flex;align-items:center;gap:8px}
.jd-sec .lg i{width:8px;height:8px;border-radius:50%;background:var(--red)}
.jd-sec .lg i.o{background:transparent;box-shadow:inset 0 0 0 2px var(--red)}
.jd-side{display:grid;gap:var(--s3)}
@media (min-width:1080px){.jd-side{position:sticky;top:calc(var(--head) + var(--s5))}}
.jd-card{border-radius:var(--r-lg);padding:var(--s6) var(--s5);display:grid;gap:var(--s4);background:radial-gradient(90% 80% at 100% 0%,rgba(37,99,235,.45),rgba(37,99,235,0) 60%),var(--night);color:var(--night-fg)}
.jd-card h3{font:600 22px/1.2 var(--f-head)}
.jd-card dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2) var(--s4);font-size:var(--t-small)}
.jd-card dt{color:var(--night-mute)}
.jd-card dd{margin:0;font-weight:600}
.jd-card .btn{justify-self:stretch;justify-content:space-between}
.offer{display:grid;gap:var(--s3)}
@media (min-width:640px){.offer{grid-template-columns:repeat(2,minmax(0,1fr))}}
.offer div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--s3);align-items:start;padding:var(--s4);border-radius:var(--r-md);background:var(--bg)}
.offer i{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--surface);color:var(--red);box-shadow:inset 0 0 0 1px var(--line)}
.offer .i{width:20px;height:20px}
.offer b{display:block;font:600 15.5px/1.3 var(--f-head)}
.offer small{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
/* Start: Bereiche */
.areas{display:grid;gap:var(--s3)}
@media (min-width:760px){.areas{grid-template-columns:repeat(2,minmax(0,1fr))}}
.area{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(340px,40vw,520px);border-radius:var(--r-lg);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(24px,3vw,44px);color:#fff;text-decoration:none;background:#0b1220}
.area img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.4s var(--ease),filter .8s var(--ease);filter:grayscale(.4) brightness(.8)}
.area::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,8,9,0) 30%,rgba(10,8,9,.88) 100%)}
.area:hover img{transform:scale(1.06);filter:grayscale(0) brightness(.9)}
.area .an{position:absolute;top:clamp(20px,2.4vw,32px);left:clamp(24px,3vw,44px);font:700 14px/1 var(--f-head);letter-spacing:.12em;color:#bcd2ff}
.area .ak{display:inline-flex;align-self:flex-start;height:32px;padding:0 12px;align-items:center;border-radius:var(--r-pill);background:rgba(255,255,255,.14);backdrop-filter:blur(8px);font:600 14px/1 var(--f-body);margin-bottom:var(--s4)}
.area h3{font:600 clamp(30px,3.4vw,52px)/1.02 var(--f-head);letter-spacing:-.04em}
.area p{max-width:44ch;margin-top:var(--s3);color:rgba(255,255,255,.82)}
.area .ago{position:absolute;right:clamp(20px,2.4vw,32px);top:clamp(20px,2.4vw,32px);width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#0b1220;transition:transform .5s var(--ease),background .3s,color .3s}
.area:hover .ago{transform:rotate(-45deg);background:var(--red-fill);color:#fff}
.area .ago .i{width:22px;height:22px}
.isnot{display:grid;gap:var(--s3)}
@media (min-width:860px){.isnot{grid-template-columns:1fr 1fr}}
.isnot article{border-radius:var(--r-lg);padding:clamp(24px,3vw,44px);display:grid;gap:var(--s4);align-content:start}
.isnot article:first-child{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.isnot article:last-child{background:radial-gradient(80% 80% at 100% 0%,rgba(37,99,235,.45),rgba(37,99,235,0) 60%),var(--night);color:var(--night-fg)}
.isnot h3{font:600 clamp(22px,2vw,28px)/1.15 var(--f-head)}
.isnot ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.isnot li{display:flex;gap:var(--s3);align-items:flex-start;font-size:16px;line-height:1.45}
.isnot li i{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center}
.isnot li .i{width:15px;height:15px;stroke-width:2.6}
.isnot article:first-child li i{background:var(--soft);color:var(--ink-2)}
.isnot article:last-child li i{background:var(--red-fill);color:#fff}
.flow5{display:grid;gap:var(--s3)}
@media (min-width:980px){.flow5{grid-template-columns:repeat(5,minmax(0,1fr))}}
.f5{position:relative;padding:var(--s5);border-radius:var(--r-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:var(--s2);align-content:start;min-height:190px}
.f5 .fn{font:700 40px/1 var(--f-head);letter-spacing:-.05em;color:var(--red)}
.f5 h3{font:600 17px/1.25 var(--f-head)}
.f5 p{font-size:var(--t-small);color:var(--ink-2)}
@media (min-width:980px){.f5:not(:last-child)::after{content:"";position:absolute;right:-12px;top:44px;width:12px;height:2px;background:var(--red)}}
.fq2{display:grid;gap:var(--s3);max-width:980px}
.fq2 details{background:var(--surface);border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line)}
.fq2 summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:var(--s5);font:600 clamp(17px,1.4vw,20px)/1.3 var(--f-head)}
.fq2 summary::-webkit-details-marker{display:none}
.fq2 summary i{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--soft);transition:transform .45s var(--ease),background .3s,color .3s}
.fq2 details[open] summary i{transform:rotate(45deg);background:var(--red-fill);color:#fff}
.fq2 p{padding:0 var(--s5) var(--s5);color:var(--ink-2);max-width:70ch}
/* Farbig-Modus für Bereichsseiten */
html[data-theme="colorful"] :is(.val,.cert,.vm article:last-child,.wy){--surface:#111a2e;--ink:#f0f9ff;--ink-2:#bfdcec;--on-ink:#111a2e;--line:rgba(255,255,255,.1);--soft:#2b1a23;--soft-2:#34202b;
background:radial-gradient(120% 90% at 100% 0%,rgba(194,24,91,.24),rgba(194,24,91,0) 55%),radial-gradient(90% 70% at 0% 100%,rgba(123,44,191,.16),rgba(123,44,191,0) 60%),#111a2e;color:var(--ink);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 30px 60px -34px rgba(43,10,27,.7)}
html[data-theme="colorful"] :is(.val,.cert,.wy):hover{box-shadow:inset 0 0 0 1px rgba(255,106,160,.35),0 34px 70px -30px rgba(194,24,91,.55)}
html[data-theme="colorful"] :is(.vals>.val:nth-child(2),.certs>.cert:first-child,.why>.wy:first-child){--ink:#fff;--ink-2:rgba(255,255,255,.86);--on-ink:#0c4a6e;--line:rgba(255,255,255,.24);--soft:rgba(255,255,255,.16);--red:#fff;--red-soft:rgba(255,255,255,.18);
background:radial-gradient(55% 45% at 88% 10%,rgba(255,150,205,.55),rgba(255,150,205,0) 70%),radial-gradient(70% 60% at 0% 100%,rgba(110,40,200,.8),rgba(110,40,200,0) 65%),linear-gradient(140deg,#2563eb 0%,#0891b2 48%,#4f46e5 100%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 40px 80px -30px rgba(160,20,120,.65)}
html[data-theme="colorful"] .val .vn{color:#7dd3fc}
html[data-theme="colorful"] .val:nth-child(2) .vn{color:#fff}
/* v9.0 Kodex als Regel-Zeilen */
#kodex .codex{display:block!important;margin-top:var(--s6);border-top:1px solid var(--night-line)}
#kodex .cx-i{grid-template-columns:auto minmax(0,1fr)!important;align-items:start;padding:var(--s5) 0!important;border-radius:0!important;background:none!important;box-shadow:none!important;border-bottom:1px solid var(--night-line);transition:padding .45s var(--ease)}
#kodex .cx-i:hover{padding-left:var(--s3)!important}
#kodex .cx-i i{width:52px!important;height:52px!important;border-radius:50%!important;background:rgba(255,255,255,.05)!important;box-shadow:inset 0 0 0 1px var(--night-line)}
#kodex .cx-i h3{display:flex;align-items:baseline;gap:var(--s3);font-size:clamp(19px,1.6vw,24px)!important}
#kodex .cx-i h3 em{font:700 14px/1 var(--f-head);font-style:normal;letter-spacing:.08em;color:var(--red-on-dark)}
@media (min-width:980px){#kodex .cx-i>span{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s6);align-items:baseline}.cx-i p{font-size:var(--t-body)!important}}
/* v9.0 Verantwortung als Zeitleiste statt Kacheln */
#verantwortung .cycle{position:relative;gap:0!important;margin-top:var(--s5)}
#verantwortung .cyc{background:none!important;box-shadow:none!important;border-radius:0!important;padding:0 0 var(--s5) 52px!important}
#verantwortung .cyc::before{position:absolute;left:0;top:-4px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--red);z-index:1}
#verantwortung .cyc::after{content:"";position:absolute;left:17px;top:32px;bottom:0;width:2px;background:linear-gradient(var(--red),color-mix(in oklab,var(--red) 15%,transparent))}
#verantwortung .cyc:last-child::after{display:none}
@media (min-width:980px){#verantwortung .cycle{grid-template-columns:repeat(5,minmax(0,1fr))!important}
.cyc{padding:56px var(--s5) 0 0!important}.cyc::before{top:0}
.cyc::after{left:40px;right:4px;top:17px;bottom:auto;width:auto;height:2px;background:linear-gradient(90deg,var(--red),color-mix(in oklab,var(--red) 15%,transparent))}}
/* v9.0 Referenzen als Abfahrtstafel */
.fb-refs{--fw:clamp(12px,1.45vw,24px)}
.fb-refs .fb-head .fb-hc{flex:1;padding-left:var(--s4)}
.fb-refs .fb-row{align-items:center}
.fb-refs .fb-c{flex:1;min-width:0;padding-left:var(--s4);font-size:var(--t-small);line-height:1.45;color:var(--night-mute)}
.fb-caps{display:none}
@media (max-width:979px){.fb-refs{--fw:clamp(10px,3.4vw,16px)}.fb-refs .fb-head .fb-hc{display:none}.fb-refs .fb-row{flex-wrap:wrap;row-gap:6px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.06)}.fb-refs .fb-c{flex-basis:100%;padding-left:0}}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* v9.0 offene Varianten Bereichsseiten */
.v9-open .flow5{gap:0!important;counter-reset:none}
.v9-open .f5{background:none!important;box-shadow:none!important;border-radius:0!important;border-top:2px solid var(--line);padding:var(--s5) var(--s4) 0 0!important;min-height:0!important}
.v9-open .f5:first-child{border-top-color:var(--red)}
#stellen .jlist{gap:0!important}
#stellen .job{background:none!important;box-shadow:none!important;border-radius:0!important;border-top:1px solid var(--line);padding:var(--s5) 0!important}
#stellen .job:last-of-type{border-bottom:1px solid var(--line)}
#stellen .job:hover{transform:none;padding-left:var(--s3)!important;transition:padding .45s var(--ease)}
#stellen .job:hover h3{color:var(--red)}
html[data-theme="colorful"] #stellen .job{--surface:transparent;background:none!important;color:var(--ink)}
#geschichte .tl-it{background:none!important;box-shadow:none!important;border-radius:0;padding:0 0 var(--s5);border-bottom:1px solid var(--line)}
#geschichte .tl-it:last-child{border-bottom:0}
#geschichte .tl-it:hover{transform:translateX(6px)}
#geschichte .tl-it::before{top:12px}
@media (min-width:980px){#geschichte .tl-it{grid-template-columns:160px minmax(0,1fr);column-gap:var(--s6)}#geschichte .tl-y{grid-row:span 2}}
/* v9.6 Bewerbung: Premium-Modul */
.apply{padding:0!important;gap:0!important;overflow:hidden;border-radius:32px!important;box-shadow:0 50px 100px -60px rgba(8,20,40,.45),inset 0 0 0 1px var(--line)!important}
.apply .side{position:relative;padding:clamp(28px,4vw,56px);background:radial-gradient(90% 70% at 0% 0%,rgba(37,99,235,.45),rgba(37,99,235,0) 60%),radial-gradient(70% 60% at 100% 100%,rgba(143,29,63,.4),rgba(143,29,63,0) 60%),#0f1726;color:#fff;--ink:#fff;--ink-2:#cfc3c8;--line:rgba(255,255,255,.12);--bg:rgba(255,255,255,.06);--soft:rgba(255,255,255,.1);--on-ink:#0f1726}
.apply .side .kicker{color:#7aa7ff}.apply .side p{color:#cfc3c8!important}
.apply .side::after{content:"9";position:absolute;right:-10px;bottom:-60px;font:800 260px/1 var(--f-head);color:rgba(255,255,255,.04);pointer-events:none}
.apply .ast{position:relative}
.apply .ast li.on{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.apply .ast li.on .asn{background:#fff;color:#0f1726}
.apply .af{padding:clamp(24px,4vw,56px)}
.apply .adone{padding:clamp(24px,4vw,56px)}
.pk-tabs{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start}
.pk-tabs button{appearance:none;border:0;cursor:pointer;height:36px;padding:0 14px;border-radius:999px;background:var(--bg);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);font:600 14px/1 var(--f-body);transition:background .25s,color .25s}
.pk-tabs button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);box-shadow:none}
.pick2{display:grid!important;gap:8px;grid-template-columns:minmax(0,1fr)}
.pick2{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))!important}
.pick2 .pk{appearance:none;border:0;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;min-height:64px;padding:10px 14px 10px 10px;border-radius:16px;background:var(--bg)!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--line)!important;text-align:left;transition:box-shadow .25s,background .25s,transform .35s var(--ease)}
.pick2 .pk:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--red) 45%,transparent)!important}
.pick2 .pk i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--soft);color:var(--red)}
.pick2 .pk i .i{width:19px;height:19px}
.pick2 .pk b{display:block;font:600 14.5px/1.25 var(--f-head)}
.pick2 .pk small{display:block;margin-top:2px;font:500 14px/1.3 var(--f-body);color:var(--ink-2)}
.pick2 .pk em{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line);color:transparent;transition:all .25s}
.pick2 .pk em .i{width:13px;height:13px}
.pick2 .pk[aria-pressed="true"]{background:color-mix(in oklab,var(--red) 8%,var(--surface))!important;box-shadow:inset 0 0 0 1.5px var(--red)!important}
.pick2 .pk[aria-pressed="true"] em{background:var(--red-fill);box-shadow:none;color:#fff}
.pick2 .pk[aria-pressed="true"] i{background:var(--red-fill);color:#fff}
.pick2 .pk.hide{display:none}
.pick2 .pk-ini{grid-column:1/-1}
.pick2 .pk>span{min-width:0}
.pick2 .pk b{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;text-wrap:balance}
.aph .pk-tabs{margin:0}
/* v9.7 Kunden-Login harmonisch: beide Spalten gleich gewichtet, vertikal mittig */
@media (min-width:1080px){
.lg-kunde .lg-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center!important;gap:clamp(40px,5vw,96px)}
.lg-kunde .lgk{position:relative;top:auto;max-width:620px;justify-self:center;width:100%}
}
.lg .lg-card{max-width:600px;width:100%;justify-self:center}
.lg-h{font-size:clamp(36px,3.6vw,60px)!important}
.lgk,.lgk-stage{min-height:500px!important}
.lgk-main{inset:44px 36px 56px 0!important;padding:var(--s4)!important}
.lgk-ring{width:132px!important;height:132px!important}.lgk-ring b{font-size:32px!important}
.lgk-r{padding:8px 12px!important;font-size:14px}
.lgk-doc{right:-6px!important;top:0!important;width:200px!important}
.lgk-chip{width:min(260px,64%)!important;padding:var(--s3) var(--s4)!important}.lgk-chip b{font-size:17px!important}
.lg-demo{bottom:4px!important}
.apply-sec{padding-block:var(--secpad,var(--s9))!important}
/* v10.3 Login-Vorschau: ruhig und symmetrisch. Keine Neigung, keine wechselnden Status,
Vorschau exakt so hoch wie die Karte, alle Elemente innerhalb der Spalte. */
@media (min-width:1080px){
.lg-kunde .lg-grid{align-items:stretch!important}
.lg-kunde .lgk{min-height:0!important;height:auto;perspective:none;align-self:stretch}
.lg-kunde .lgk-stage{transform:none!important;min-height:0!important;height:100%}
.lg-kunde .lgk-main{inset:56px 0 56px 0!important}
.lg-kunde .lgk-doc{right:0!important;top:0!important;transform:none!important}
.lg-kunde .lgk-chip{right:0!important;bottom:0!important;transform:none!important}
.lg-kunde .lg-demo{bottom:0!important;left:0}
}
.lgk-list .lgk-r:nth-child(n+5){display:none}
.lgk-r.go i{animation:none}
/* v9.7b Login: Inhalt exakt mittig im sichtbaren Bereich unter dem Header, kompaktere Karte */
@media (min-width:1080px){
main>section.lg{min-height:100svh;align-content:center;padding-block:calc(var(--head) + 16px) 16px!important}
.lg .lg-card{max-width:540px;padding:clamp(28px,2.6vw,44px)!important}
.lg-h{font-size:clamp(34px,3vw,50px)!important}
.lg-kunde .lgk,.lg-kunde .lgk-stage{min-height:460px!important}
}
/* v8.9 Bewerbung in drei Schritten */
.af fieldset{border:0;margin:0;padding:0;min-width:0}
.aph{display:none;gap:var(--s4)}
.aph.on{display:grid;animation:aphIn .5s var(--ease) both}
@keyframes aphIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.aph-h{font:600 clamp(20px,1.7vw,26px)/1.2 var(--f-head);letter-spacing:-.025em;color:var(--ink)}
.aph-note{font-size:var(--t-small);color:var(--ink-2)}
.aph-nav{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:flex-end;margin-top:var(--s2)}
.aph-nav .btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.aph-nav .btn.ghost .bi{background:var(--soft);color:var(--ink)}
.aph-nav .bi.bl{order:-1;margin:0 10px 0 -14px}
.ast-bar{height:4px;border-radius:4px;background:var(--soft);overflow:hidden;margin-bottom:var(--s2)}
.ast-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--red-fill),#0891b2);transition:width .6s var(--ease)}
.ast{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:var(--s2)}
.ast li{display:flex;align-items:center;gap:var(--s3);padding:10px 14px 10px 10px;border-radius:16px;color:var(--ink-2);transition:background .35s,color .35s}
.ast li.on{background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.ast li.done{cursor:pointer;color:var(--ink)}
.asn{position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--soft);font:700 14px/1 var(--f-head);transition:background .35s,color .35s}
.asn .i{position:absolute;width:16px;height:16px;opacity:0;transform:scale(.4);transition:opacity .3s,transform .35s var(--ease)}
.ast li.on .asn{background:var(--ink);color:var(--on-ink)}
.ast li.done .asn{background:var(--red-fill);color:#fff}
.ast li.done .asn b{opacity:0}.ast li.done .asn .i{opacity:1;transform:none}
.ast-t{display:grid;font:600 15px/1.2 var(--f-head)}
.ast-t small{font:600 14px/1.3 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:979px){.ast{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--s4)}.ast li{flex-direction:column;align-items:flex-start;gap:6px;padding:10px}.ast-t small{display:none}}
/* Login-Seiten */
.lg{position:relative;overflow:clip;display:grid;align-items:start;padding-block:clamp(32px,5vw,80px)!important}
.lg-grid{align-items:start!important}
@media (min-width:1080px){.lg .lgk,.lg .lgp{position:sticky;top:calc(var(--head) + 40px)}}
.lg-grid{display:grid;gap:clamp(32px,5vw,80px);align-items:center}
@media (min-width:1080px){.lg-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.lg-grid.rev{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}.lg-grid.rev>.lg-card{order:2}}
.lg-card{position:relative;z-index:2;display:grid;gap:var(--s4);padding:clamp(28px,4vw,52px);border-radius:32px}
.lg-h{font:600 clamp(40px,4.6vw,72px)/1 var(--f-head);letter-spacing:-.045em}
.lg-lead{font-size:var(--t-lead,19px);line-height:1.5;color:var(--ink-2);max-width:44ch}
.lg-form{display:grid;gap:var(--s3);margin-top:var(--s2)}
.lg-form label.f{display:grid;gap:7px;font:600 var(--t-label)/1.2 var(--f-body);color:var(--ink-2)}
.lg-form input[type=email],.lg-form input[type=text],.lg-form input[type=password]{width:100%;height:54px;border:0;border-radius:16px;padding:0 18px;font:500 16px/1 var(--f-body);color:var(--ink);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);outline:none;transition:box-shadow .25s}
.lg-form input:focus{box-shadow:inset 0 0 0 1.5px var(--red)}
.lg-form .bad{box-shadow:inset 0 0 0 1.5px var(--red)!important}
.pw{position:relative;display:block}
.pw input{padding-right:54px!important}
.pw-t{position:absolute;right:8px;top:50%;transform:translateY(-50%);appearance:none;border:0;background:none;cursor:pointer;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--ink-2)}
.pw-t:hover{background:var(--soft)}
.pw-t .i{grid-area:1/1;width:18px;height:18px;transition:opacity .2s}
.pw-t .i:last-child{opacity:0}.pw-t.on .i:first-child{opacity:0}.pw-t.on .i:last-child{opacity:1}
.lg-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;font-size:14px}
.lg-row a{color:var(--ink);text-underline-offset:3px}
.lg-go{width:100%;justify-content:space-between}
.lg-note{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2)}
.lg-note .i{width:15px;height:15px;color:var(--red);flex:none}
.lg-switch{font-size:14px;color:var(--ink-2)}.lg-switch a{color:var(--ink);font-weight:600;text-underline-offset:3px}
/* Kunde: hell, warm, Live-Projektansicht */
.lg-kunde{background:radial-gradient(60% 70% at 100% 10%,color-mix(in oklab,var(--red) 14%,transparent),transparent 65%),radial-gradient(50% 50% at 0% 35%,color-mix(in oklab,var(--red) 7%,transparent),transparent 70%),var(--bg)}
.lg-kunde .lg-card{background:var(--surface);box-shadow:0 50px 100px -50px rgba(60,10,20,.35),inset 0 0 0 1px var(--line)}
.lgk{position:relative;min-height:600px;perspective:1400px}
.lgk-stage{position:relative;height:100%;min-height:600px;transform-style:preserve-3d;transform:rotateY(var(--ry,-8deg)) rotateX(var(--rx,4deg));transition:transform .6s var(--ease)}
.lgk-panel{position:absolute;border-radius:24px;background:var(--surface);box-shadow:0 40px 80px -40px rgba(60,10,20,.45),inset 0 0 0 1px var(--line);padding:var(--s5)}
.lgk-main{inset:40px 50px 40px 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s5);align-content:start}
.lgk-ring{position:relative;width:170px;height:170px}
.lgk-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.lgk-ring circle{fill:none;stroke-width:10;stroke-linecap:round}
.lgk-ring .bg{stroke:var(--soft)}.lgk-ring .fg{stroke:url(#lgkG);stroke-dasharray:314;stroke-dashoffset:314;transition:stroke-dashoffset 2.2s var(--ease)}
.lgk-ring b{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font:700 40px/1 var(--f-head);letter-spacing:-.04em}
.lgk-ring b small{display:block;margin:6px auto 0;max-width:62%;font:600 14px/1.2 var(--f-body);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.lgk-h{font:600 18px/1.2 var(--f-head)}.lgk-sub{font-size:14px;color:var(--ink-2);margin-top:4px}
.lgk-list{grid-column:1/-1;display:grid;gap:8px}
.lgk-r{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:9px 14px;border-radius:14px;background:var(--bg);font-size:14px}
.lgk-r i{width:10px;height:10px;border-radius:50%;background:var(--ink-2)}
.lgk-r em{font-style:normal;font:600 14px/1 var(--f-body);padding:6px 10px;border-radius:999px;background:var(--soft);color:var(--ink-2);transition:background .4s,color .4s}
.lgk-r.done i{background:var(--red-fill)}.lgk-r.done em{background:var(--red-fill);color:#fff}
.lgk-r.go i{background:var(--red);animation:lgPulse 1.6s ease-out infinite}.lgk-r.go em{background:var(--red-soft);color:var(--red)}
@keyframes lgPulse{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--red) 50%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
.lgk-chip{right:0;bottom:0;width:min(300px,70%);transform:translateZ(60px);display:grid;gap:6px;padding:var(--s4) var(--s5);background:linear-gradient(140deg,#2563eb,#1e3a8a);color:#fff;box-shadow:0 30px 60px -24px rgba(37,99,235,.7)}
.lgk-chip small{font:600 14px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.lgk-chip b{font:600 19px/1.2 var(--f-head)}
.lgk-doc{right:-10px;top:0;width:210px;transform:translateZ(90px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:14px 16px}
.lgk-doc .i{width:22px;height:22px;color:var(--red)}.lgk-doc b{display:block;font:600 14px/1.2 var(--f-head)}.lgk-doc small{font-size:14px;color:var(--ink-2)}
.lg-demo{position:absolute;left:0;bottom:16px;font:600 14px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:1079px){.lgk{min-height:440px}.lgk-stage{transform:none;min-height:440px}.lgk-main{inset:0 0 70px 0}.lgk-ring{width:120px;height:120px}.lgk-ring b{font-size:30px}.lgk-doc{display:none}}
/* Partner: dunkel, technisch, Abfahrtstafel */
.lg-partner{margin-inline:var(--box);border-radius:0 0 var(--r-lg) var(--r-lg);margin-bottom:var(--s6);background:#0c0a0b;color:#fff;--ink:#fff;--ink-2:#b9adb2;--line:rgba(255,255,255,.1);--bg:rgba(255,255,255,.04);--soft:rgba(255,255,255,.08);--surface:#0f1726}
.lg-partner::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(80% 70% at 30% 40%,#000,transparent)}
.lg-partner::after{content:"";position:absolute;left:0;right:0;height:140px;top:-140px;background:linear-gradient(180deg,transparent,rgba(37,99,235,.18),transparent);animation:lgScan 7s linear infinite}
@keyframes lgScan{to{transform:translateY(calc(100dvh + 280px))}}
.lg-partner .lg-card{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 60px 120px -50px rgba(0,0,0,.9)}
.lg-partner .lg-card::before{content:"";position:absolute;left:32px;right:32px;top:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#ff3b30,transparent)}
.lg-partner .kicker{color:#7aa7ff}
.lg-partner .lg-h .red{color:#7aa7ff}
.lg-partner .lg-form input{background:rgba(0,0,0,.35)}
.lg-partner .btn.lg-go{background:linear-gradient(140deg,#2563eb,#1e3a8a);color:#fff}
.lgp{position:relative;z-index:1;display:grid;gap:var(--s5)}
.lgp .fb{margin-top:0}
.fb-title{--fwmax:64px}
.fb-title .fb-head{display:none}
.fb-title .fb-rows{gap:10px}
.fb-lg{--fwmax:30px}
.lgp{min-width:0}.lgp .fb{max-width:100%;overflow:hidden}
/* DBL-K15: Partner-Vorschau so hoch wie das Formular, Tafel oben, Leiste bündig mit der Formular-Unterkante */
@media (min-width:1080px){.lg-partner .lg-grid{align-items:stretch!important}.lg-partner .lgp{position:relative!important;top:auto!important;display:flex;flex-direction:column;gap:var(--s4)}
.lg-partner .lgp .fb-lg{flex:1;display:flex;flex-direction:column}.lg-partner .lgp .fb-lg .fb-rows{flex:1;display:flex;flex-direction:column;justify-content:space-evenly}}
.lgp-meta{display:flex;flex-wrap:wrap;gap:var(--s5);font-size:14px;color:#b9adb2}
.lgp-meta span{display:inline-flex;align-items:center;gap:8px}.lgp-meta .i{width:16px;height:16px;color:#7aa7ff}
@media (max-width:1079px){.lgp .fb{padding:12px}.fb-lg .fb-head{font-size:14px}}
/* DBL-K15b: Partner-Login passt in die Fensterhöhe – Luft unter dem Header und unten, bei niedrigen Fenstern kompaktere Karte */
@media (min-width:1080px){main>section.lg.lg-partner{padding-block:calc(var(--head) + clamp(24px,4.5vh,56px)) clamp(24px,4.5vh,56px)!important}}
@media (min-width:1080px) and (max-height:980px){.lg-partner .lg-card{padding:clamp(24px,3.4vh,40px) clamp(28px,2.6vw,44px)!important;gap:clamp(10px,1.5vh,16px)}
.lg-partner .lg-h{font-size:clamp(30px,5vh,50px)!important}.lg-partner .lg-lead{font-size:clamp(15px,2vh,18px)!important}
.lg-partner .lg-form{gap:clamp(10px,1.4vh,16px)!important}.lg-partner .lgp{gap:clamp(10px,1.5vh,16px)!important}
.lg-partner .fb-title{padding-block:clamp(10px,1.6vh,18px)!important}.lg-partner .lgp-meta{gap:var(--s4);font-size:14px}}
@media (min-width:1080px) and (max-height:800px){.lg-partner .lg-switch{display:none!important}.lg-partner .lg-form input{height:48px!important}.lg-partner .lg-auth{font-size:14px}}
@media (prefers-reduced-motion:reduce){.lg-partner::after{animation:none}}
.lg-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:999px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.lg-tabs button{position:relative;z-index:1;appearance:none;border:0;background:none;cursor:pointer;height:44px;border-radius:999px;font:600 14.5px/1 var(--f-body);color:var(--ink-2);transition:color .3s}
.lg-tabs button[aria-selected="true"]{color:var(--on-ink)}
.lg-tabs i{position:absolute;left:0;top:5px;height:44px;border-radius:999px;background:var(--ink);transition:transform .45s var(--ease),width .45s var(--ease)}
.lg-partner .lg-tabs i{background:linear-gradient(140deg,#2563eb,#1e3a8a)}.lg-partner .lg-tabs button[aria-selected="true"]{color:#fff}
.lg-pane{display:none!important}.lg-pane.on{display:grid!important;animation:aphIn .45s var(--ease) both}
@keyframes aphIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.lg-form .r2{display:grid;gap:var(--s3)}@media (min-width:560px){.lg-form .r2{grid-template-columns:1fr 1fr}}
.lg-form input[type=tel]{width:100%;height:54px;border:0;border-radius:16px;padding:0 18px;font:500 16px/1 var(--f-body);color:var(--ink);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);outline:none}
.lg-form.busy .lg-go{opacity:.7;pointer-events:none}
.lg-auth{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--ink-2)}.lg-auth .i{width:16px;height:16px;flex:none;margin-top:1px;color:var(--red)}
.lg-partner .lg-auth .i{color:#7aa7ff}
.lg-link{appearance:none;border:0;background:none;padding:0;cursor:pointer;font:600 14px/1.4 var(--f-body);color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.lq-intro{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.lq-role .pick button{background:var(--bg)}
.lq-done{gap:var(--s3);padding:var(--s5);border-radius:20px;background:color-mix(in oklab,var(--red) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--red) 25%,transparent)}
.lq-done .i{width:30px;height:30px;color:var(--red)}.lq-done b{font:600 20px/1.2 var(--f-head)}.lq-done span{font-size:14.5px;color:var(--ink-2)}.lq-done .lg-link{justify-self:start}
.lg-other{font-size:14px;color:var(--ink-2)}.lg-other a{color:var(--ink);font-weight:600;text-underline-offset:3px}
/* ===== Baustein 131: Sprache und Farbsystem als Dropdown ===== */
.m131 .m131-leiste{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s4);padding:var(--s5) 0;border-top:1px solid var(--line)}
.m131 .m131-feld{display:flex;align-items:center;gap:var(--s3)}
.m131 .m131-l{display:inline-flex;align-items:center;gap:8px;font:500 14.5px/1 var(--f-body);color:var(--ink-2)}
.m131 .m131-l .i{width:18px;height:18px}
.m131 .m131-dd{position:relative}
.m131 .m131-btn{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 16px 0 18px;border-radius:999px;background:var(--surface,#fff);box-shadow:inset 0 0 0 1px var(--line);font:600 15px/1 var(--f-body);color:var(--ink);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.m131 .m131-btn:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.m131 .m131-btn:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.m131 .m131-btn>.i{width:16px;height:16px;transition:transform .4s var(--ease)}
.m131 .m131-dd.m131-offen .m131-btn>.i{transform:rotate(180deg)}
.m131 .flag{width:22px;height:15px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.m131 .m131-liste{list-style:none;margin:0;padding:6px;position:absolute;z-index:20;left:0;min-width:230px;max-height:min(420px,70vh);overflow:auto;border-radius:20px;background:var(--surface,#fff);box-shadow:0 30px 60px -20px rgba(0,0,0,.35),inset 0 0 0 1px var(--line);opacity:0;visibility:hidden;transform:translateY(8px) scale(.98);transform-origin:bottom left;transition:opacity .3s var(--ease),transform .35s var(--ease),visibility 0s .35s}
.m131 .m131-dd[data-auf="oben"] .m131-liste{bottom:calc(100% + 8px)}
.m131 .m131-dd[data-auf="unten"] .m131-liste{top:calc(100% + 8px);transform-origin:top left;transform:translateY(-8px) scale(.98)}
.m131 .m131-dd.m131-offen .m131-liste{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .35s var(--ease)}
.m131 .m131-liste button{appearance:none;border:0;background:none;cursor:pointer;width:100%;display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 12px;border-radius:14px;text-align:left;color:var(--ink);font:500 14.5px/1.2 var(--f-body);transition:background .25s var(--ease)}
.m131 .m131-liste button:hover,.m131 .m131-liste button:focus-visible{background:var(--soft);outline:none}
.m131 .m131-liste button>span:not(.m131-sw){flex:1;display:grid;gap:2px}
.m131 .m131-liste b{font-weight:600}
.m131 .m131-liste small{font-size:14px;color:var(--ink-2)}
.m131 .m131-liste .i{width:16px;height:16px;color:var(--red);opacity:0;transform:scale(.5);transition:opacity .3s var(--ease),transform .35s var(--ease)}
.m131 .m131-liste [aria-pressed="true"] .i{opacity:1;transform:none}
.m131 .m131-liste [aria-pressed="true"]{background:var(--soft)}
.m131 .m131-sw{position:relative;flex:none;width:30px;height:22px;border-radius:7px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);background:#fff}
.m131 .m131-sw i{position:absolute;inset:0 0 auto;height:6px;background:#f2f2f0}
.m131 .m131-sw b{position:absolute;left:5px;height:3px;border-radius:2px;background:#1c1c1c}
.m131 .m131-sw b:nth-of-type(1){top:10px;width:16px}.m131 .m131-sw b:nth-of-type(2){top:15px;width:10px;background:#2563eb}
.m131 .m131-sw-dark{background:#121212}.m131 .m131-sw-dark i{background:#252525}.m131 .m131-sw-dark b:nth-of-type(1){background:#fff}
.m131 .m131-sw-colorful{background:#e6eefc}.m131 .m131-sw-colorful i{background:#0891b2}
html[data-theme="dark"] .m131 .m131-sw-aktiv{background:#121212}html[data-theme="dark"] .m131 .m131-sw-aktiv i{background:#252525}html[data-theme="dark"] .m131 .m131-sw-aktiv b:nth-of-type(1){background:#fff}
html[data-theme="colorful"] .m131 .m131-sw-aktiv{background:#e6eefc}html[data-theme="colorful"] .m131 .m131-sw-aktiv i{background:#0891b2}
@media (max-width:559px){.m131 .m131-feld{width:100%;justify-content:space-between}}
.m131 .m131-feld:last-child .m131-liste{left:auto;right:0;transform-origin:bottom right}
@media (max-width:559px){.m131 .m131-liste{left:0;right:auto}}
.m232 .m232-kopf{max-width:760px;margin-bottom:var(--s6)}
.m232 .m232-dz{margin:0 0 var(--s2);font:600 14px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.m232 h2{margin:0 0 var(--s3);font:600 clamp(30px,3.4vw,52px)/1.04 var(--f-head);letter-spacing:-.045em;color:var(--ink)}
.m232 .m232-lead{margin:0;max-width:66ch;color:var(--ink-2);font-size:var(--t-lead);line-height:1.6}
.m232 button:focus-visible,.m232 a:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.m232 .m232-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s4)}
.m232 .m232-tabs button{appearance:none;border:0;cursor:pointer;height:44px;padding:0 16px;border-radius:999px;background:var(--soft);color:var(--ink);font:600 14px/1 var(--f-body)}
.m232 .m232-tabs button[aria-pressed="true"]{background:var(--ink);color:var(--bg,#fff)}
.m232 .m232-v[hidden]{display:none}
.m232 .m232-v{animation:m232ein .45s var(--ease)}
@keyframes m232ein{from{opacity:0;transform:translateY(8px)}}
.m232 .m232-box{padding:clamp(20px,3.4vw,40px);border-radius:var(--r-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.m232 .m232-bsp{display:inline-flex;align-items:center;align-self:flex-start;height:24px;padding:0 10px;border-radius:999px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);font:600 14px/1 var(--f-body);color:var(--ink-2)}
.m232 .m232-btn{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;height:52px;padding:0 22px;border-radius:999px;background:var(--ink);color:var(--bg,#fff);font:600 15px/1 var(--f-body);text-decoration:none;border:0;cursor:pointer}
.m232 .m232-btn svg{width:16px;height:16px}
.m232 .m232-hin{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.m232 .m232-f{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--ink-2)}
.m232 .sel:not(.open) .sel-list{display:none}
@media (prefers-reduced-motion:reduce){.m232 .m232-v{animation:none}}
.m232 .m232-opt{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.m232 .m232-o{display:flex;flex-direction:column;gap:14px;min-width:0;padding:22px;border-radius:var(--r-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.m232 .m232-ok{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.m232 .m232-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:var(--soft);color:var(--red)}
.m232 .m232-ic svg{width:22px;height:22px}
.m232 .m232-ot{margin:0;flex:1;font:600 20px/1.2 var(--f-head);letter-spacing:-.02em;color:var(--ink)}
.m232 .m232-dl{margin:0;display:grid}
.m232 .m232-dl div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.m232 .m232-dl dt{color:var(--ink-2)}.m232 .m232-dl dd{margin:0;font-weight:600;text-align:right;color:var(--ink)}
.m232 .m232-pz{margin:auto 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)}.m232 .m232-pz b{color:var(--ink)}
.m232 .m232-rg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--s3);align-items:stretch}
.m232 .m232-fragen{display:grid;gap:var(--s3);align-content:start}
.m232 .m232-erg{display:flex;flex-direction:column;gap:14px}
.m232 .m232-ek{margin:0;font:700 14px/1.3 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.m232 .m232-el{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.m232 .m232-el li{display:flex;gap:12px;align-items:flex-start}
.m232 .m232-el li[hidden]{display:none}
.m232 .m232-el span:last-child{display:grid;gap:3px}.m232 .m232-el b{font:600 18px/1.25 var(--f-head);color:var(--ink)}.m232 .m232-el small{font-size:14px;line-height:1.5;color:var(--ink-2)}
@media (max-width:1023px){.m232 .m232-opt{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.m232 .m232-rg{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.m232 .m232-opt{grid-template-columns:minmax(0,1fr)}}
/* ===== Avale 24: Anpassungen aus tools/hole-mps.py (sicht-gate RW-040) =====
0. Token --red #1d4ed8 statt #2563eb (Kontrast auf --red-soft über 4,5:1).
1. Kopfzeile oben mit der Fläche des Kopfbereichs (--night) statt durchsichtig: sieht gleich aus, macht den
Kontrast der weißen Navigation messbar und hält ihn auch über hellen Flächen.
2. Knopf-Zeilenhöhe so, dass Beschriftung und Pfeilkreis als EINE Zeile zählen (Knopfhöhe bleibt fest). */
.top:not(.solid){background:var(--night)}
.btn{line-height:1.6}
/* 3. Gewählter Login-Reiter trägt die Fläche selbst (gleiche Farbe wie der gleitende Balken), damit der Kontrast
messbar ist; Farbig: Vollton statt Verlauf. */
.lg-tabs button[aria-selected="true"]{background:var(--ink)}
html[data-theme="colorful"] .lg-tabs button[aria-selected="true"]{background:#1d4ed8;color:#fff}
/* 4. Reduzierte Bewegung gilt auch für die Login-Vorschau (ui-regeln „bewegung“). */
@media (prefers-reduced-motion:reduce){.lgk *,.lgk *::before,.lgk *::after{animation:none!important;transition:none!important}}
/* 5. Kopf (Operator pm-34032 #72776): ab 1024 px volle waagrechte Navigation, Sprache und Anmelden im Kopf, kein
Menüknopf; darunter Menüknopf mit Menü. MPS v11 zeigt den Menüknopf immer (mps-nav.css), das wird hier
zurückgenommen. */
@media (min-width:1024px){.top .nav{display:flex!important;gap:var(--s1);margin-inline:auto}.top .burger{display:none!important}
.top-actions>.dd-lang,.top-actions>.dd-login,.top-actions .dd-login{display:block!important}
.top .lg-l{display:inline!important}}
@media (max-width:1023px){.top .nav{display:none!important}}
/* 6. Abstände nur aus der MPS-Skala (--s1 bis --s9): Symbol zu Beschriftung, Kartenpolster, Formularfelder. */
.dd-btn{gap:var(--s2)}
.m-pref .pl{gap:var(--s2)}
.lg-form{gap:var(--s4)}
.lg-form label.f{gap:var(--s2)}
.m232 .m232-o{padding:var(--s5);gap:var(--s4)}
.m232 .m232-ok{gap:var(--s3)}
.m232 .m232-dl div{padding:var(--s3) 0;gap:var(--s4)}
.m131 .m131-btn{gap:var(--s3)}
.m131 .m131-liste button{gap:var(--s3)}
/* 7. Statuszeilen der Kundenbereich-Vorschau ohne Punkt: je Zeile genau ein Symbol, im Status-Chip vor dem Text. */
.lgk-r{grid-template-columns:minmax(0,1fr) auto}
.lgk-r em{display:inline-flex;align-items:center;gap:var(--s2)}
.lgk-r em .i{width:14px;height:14px;flex:none}
/* 8. Farbsystem und Sprache im Fuß als je EIN Knopf (Baustein 131): Desktop klappt nach oben auf, unter 560 px
kommt die Liste als Blatt von unten über die ganze Breite. */
footer .m131{margin-top:var(--s5)}
/* 11. Messbare Flächen statt Verlauf hinter Text (sicht-gate „nicht messbar“): Hinweis „Beispielansicht“ auf eigener
Fläche; Seitenpanel des Rechners ruhig in --night. */
.lg-demo{background:var(--bg);padding:var(--s1) var(--s2);border-radius:var(--r-sm)}
/* Kachel-Überschrift als h2, wo kein Abschnittstitel davor steht (Gliederung h1 -> h2), Aussehen wie .stat h3. */
.stat h2{font:600 var(--t-h3)/1.18 var(--f-head)}.stat h2 span{display:block;font-weight:500;color:var(--graphite)}
/* 9. Geschlossene Klappliste ist auch für die Tastatur weg (sicht-gate „versteckt“): sichtbar erst beim Öffnen. */
.dd:not(.open) .dd-list{visibility:hidden;transition:opacity .25s var(--ease),transform .35s var(--ease),visibility 0s .35s}
.dd.open .dd-list{visibility:visible;transition-delay:0s}
.m232 .m232-dl dt{flex:none;white-space:nowrap}.m232 .m232-o>.m232-btn{margin-top:auto}
/* 10. Vergleichskarten auf EINEM Raster: jede Merkmalszeile liegt über alle Karten einer Reihe auf derselben Höhe
(CSS-Unterraster, 12 Zeilen je Karte: Kopf, Rolle, 9 Merkmale, Knopf). */
.m232 .m232-o{display:grid;grid-template-rows:subgrid;grid-row:span 12;row-gap:0}
.m232 .m232-o>.m232-ok{margin-bottom:var(--s3)}.m232 .m232-o>.m232-bsp{justify-self:start;margin-bottom:var(--s4)}
.m232 .m232-o>.m232-dl{display:grid;grid-template-rows:subgrid;grid-row:span 9}
.m232 .m232-o>.m232-btn{justify-self:start;align-self:end;margin-top:var(--s5)}
.m232 .m232-dl div{min-width:0}.m232 .m232-dl dd{min-width:0}
.m232 .m232-dl div{flex-direction:column;gap:var(--s1)}.m232 .m232-dl dd{text-align:left}
@media (max-width:899px){.m232 .m232-opt{grid-template-columns:minmax(0,1fr)}}
.m232 :is(.m232-ot,dd){text-wrap:pretty}.stat .foot p,.sub-hero .lead{text-wrap:pretty}
@media (max-width:559px){.m131 .m131-liste{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;z-index:130;min-width:0;max-height:70vh;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:var(--s3) var(--s3) calc(var(--s5) + env(safe-area-inset-bottom,0px));transform:translateY(24px)}
.m131 .m131-dd.m131-offen .m131-liste{transform:none}}