:root{
  /* Hauptfarben */
  --navy:#081F44; --rot:#E31A3E; --weiss:#FDFDFD; --schwarz:#0F1117;
  /* Weitere Farben */
  --rot-d:#B0122F; --rosa:#F7CED3; --blau:#2A4AD7; --blau-d:#15266C;
  --grau:#818181; --grau-h:#9AA6B5; --hellblau:#E0EEFE;
  /* Ableitungen */
  --navy2:#132C52; --tief:#061733;
  --verlauf-w:linear-gradient(125deg,#E31A3E 0%,#C41534 55%,#B0122F 100%);
  --verlauf:linear-gradient(125deg,#E31A3E 0%,#C41534 45%,#2A4AD7 100%);
  --text:#26364D; --linie:#DDE5EF; --flaeche:#F4F7FC;
  --e:cubic-bezier(.16,1.3,1);
  --r-s:14px; --r-m:20px; --r-l:28px;
  --sch:0 2px 8px rgba(8,31,68,.04),0 12px 32px rgba(8,31,68,.08);
  --sch-h:0 4px 12px rgba(8,31,68,.07),0 22px 50px rgba(8,31,68,.14);
  --pad:clamp(20px,5vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{padding-top:var(--kopfh,110px);font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;background:#fff;color:var(--text);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1220px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
:focus-visible{outline:2px solid var(--rot);outline-offset:3px;border-radius:6px}
img{max-width:100%;display:block}
h1,h2,h3{letter-spacing:-.03em;line-height:1.09;font-weight:600}
h1{font-size:clamp(2.15rem,4.4vw,3.75rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.8rem)}
h3{font-size:clamp(1.08rem,1.6vw,1.32rem);line-height:1.28}
.tt{background:var(--verlauf-w);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(1rem,1.32vw,1.14rem);font-weight:300;line-height:1.68;color:var(--grau)}
.klein{font-size:.85rem;font-weight:300;color:var(--grau);line-height:1.6}
.mitte{text-align:center}
.mitte .lead{margin-left:auto;margin-right:auto}
.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 17px 7px 8px;border-radius:100px;
  background:var(--rosa);color:var(--rot);font-size:.82rem;font-weight:500;border:1px solid rgba(168,30,51,.15)}
.pill i{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:var(--verlauf-w);color:#fff;
  font-size:.6rem;font-style:normal;font-weight:700}
.kicker{display:inline-block;padding:6px 16px;border-radius:100px;background:var(--hellblau);color:var(--blau-d);
  font-size:.78rem;font-weight:500;margin-bottom:18px}
.dunkel .kicker{background:rgba(255,255,255,.11);color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;padding:15px 28px;border-radius:100px;
  text-decoration:none;font-size:.95rem;font-weight:500;font-family:inherit;border:1.5px solid transparent;cursor:pointer;
  transition:transform.2s var(--e),box-shadow.2s var(--e),border-color.2s,color.2s,filter.2s}
.btn-rot{background:#E31A3E;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 2px 5px rgba(8,31,68,.22), 0 10px 24px rgba(227,26,62,.34)}
.btn-rot:hover{background:#C41534;transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 4px 9px rgba(8,31,68,.24), 0 16px 34px rgba(227,26,62,.42)}
.btn-rot:active{transform:translateY(0);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.22), 0 4px 12px rgba(227,26,62,.28)}
.btn-linie{border-color:var(--linie);color:var(--navy);background:#fff}
.btn-linie:hover{border-color:var(--navy);transform:translateY(-2px)}
.btn-geist{border-color:rgba(255,255,255,.22);color:#fff}
.btn-geist:hover{border-color:rgba(255,255,255,.6);transform:translateY(-2px)}
.btn-k{padding:11px 20px;font-size:.88rem}
.sterne{display:inline-flex;align-items:center;gap:10px}
.sterne svg{color:var(--rot)}
.sterne span{font-size:.86rem;color:var(--grau);font-weight:300}
.sterne b{color:var(--navy);font-weight:600}
/* Nav */
.kopf-fix{position:fixed;top:0;left:0;right:0;z-index:90}
.balken{background:var(--navy);color:rgba(255,255,255,.82);padding:9px 20px;font-size:.83rem;font-weight:300;
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,.08)}
.balken .kennz{display:inline-flex;align-items:center;gap:7px;background:var(--rot);color:#fff;
  border-radius:100px;padding:3px 11px;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.balken .kennz em{width:6px;height:6px;border-radius:50%;background:#fff;font-style:normal;
  animation:blinken 2.2s ease-in-out infinite}
@keyframes blinken{0%,100%{opacity:1}50%{opacity:.35}}
@media(max-width:560px){.balken{font-size:.76rem;gap:8px}.balken .kennz{font-size:.62rem}}
.balken a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.6)}
.balken a:hover{border-bottom-color:#fff}
nav{position:relative;z-index:70;background:rgba(8,31,68,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.10);display:flex;align-items:center;justify-content:space-between;padding:11px var(--pad)}
.marke{flex:0 0 auto}
.marke img{height:44px;width:auto}
.nav-l{display:flex;gap:2px;align-items:center}
.nav-l a{color:rgba(255,255,255,.76);text-decoration:none;font-size:.9rem;padding:9px 12px;border-radius:10px;transition:.2s;white-space:nowrap}
.nav-l a:hover{color:#fff;background:rgba(255,255,255,.09)}
.nav-r{display:flex;gap:10px;align-items:center;flex:0 0 auto}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;color:#fff}
.burger span{display:block;width:20px;height:1.6px;background:currentColor;margin:5px 0;border-radius:2px}
@media(max-width:1120px){
.nav-l{display:none}.burger{display:block}
.nav-l.offen{display:flex;flex-direction:column;align-items:stretch;position:absolute;top:100%;left:0;right:0;
    background:rgba(8,31,68,.98);backdrop-filter:blur(14px);padding:12px var(--pad) 22px;
    border-bottom:1px solid rgba(255,255,255,.12)}
.nav-l.offen a{font-size:1.02rem;padding:12px 0;color:rgba(255,255,255,.85)}
.nav-r .btn-linie{display:none}
}
@media(max-width:460px){nav{padding:10px 16px}.marke img{height:34px}.nav-r .btn-rot{padding:10px 14px;font-size:.8rem}}
section{padding:clamp(62px,7.6vw,108px) 0}
.flaeche{background:var(--flaeche)}
.dunkel{background:var(--navy);color:#fff}
.dunkel .lead .dunkel .klein{color:rgba(255,255,255,.66)}
.kopf{max-width:730px;margin-bottom:clamp(34px,4.6vw,56px)}
.kopf.mitte{margin-left:auto;margin-right:auto}
.kopf .lead{margin-top:15px}
.rein{opacity:0;transform:translateY(22px);transition:opacity.7s var(--e),transform.7s var(--e)}
.rein.da{opacity:1;transform:none}
/* ---------- HERO ---------- */
.hero{background:
  radial-gradient(880px 440px at 86% -8%,rgba(227,26,62,.10),transparent 62%),
  radial-gradient(760px 420px at 6% 2%,rgba(42,74,215,.10),transparent 60%),
  linear-gradient(180deg,#fff,var(--flaeche));padding:clamp(44px,5.6vw,74px) 0 0;overflow:hidden}
.hero h1{margin:20px auto 0;max-width:20ch}
.hero .lead{max-width:56ch;margin:18px auto 0}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.hero-bew{margin-top:20px;display:flex;justify-content:center}
.trustzeile{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 26px;margin-top:26px}
.trustzeile div{display:flex;align-items:center;gap:7px;font-size:.85rem;color:var(--navy)}
.trustzeile svg{color:var(--blau);flex:0 0 auto}
.dunkel .trustzeile div{color:#fff}
/* Produktrahmen mit echtem Screenshot */
.rahmen{position:relative;margin:clamp(36px,4.6vw,56px) auto -78px;max-width:1080px}
.rahmen-in{border-radius:var(--r-l);background:#fff;border:1px solid var(--linie);overflow:hidden;
  box-shadow:0 34px 84px rgba(8,31,68,.17)}
.rahmen-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid var(--linie)}
.rahmen-bar i{width:10px;height:10px;border-radius:50%;background:#E1E9F2;display:block}
.rahmen-bar .url{margin-left:12px;flex:1;max-width:330px;background:var(--flaeche);border-radius:8px;padding:5px 12px;
  font-size:.72rem;color:var(--grau-h);font-weight:300}
.rahmen img{width:100%;display:block}
.glimmer{position:absolute;inset:-2px;border-radius:calc(var(--r-l) + 2px);padding:2px;pointer-events:none;
  background:var(--verlauf);opacity:.34;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:drehen 9s linear infinite}
@keyframes drehen{to{filter:hue-rotate(12deg)}}
.marker{position:absolute;background:#fff;border-radius:100px;padding:8px 15px;font-size:.79rem;font-weight:600;
  color:var(--navy);box-shadow:0 8px 22px rgba(8,31,68,.16);display:flex;align-items:center;gap:8px;
  opacity:0;transform:translateY(8px) scale(.94);transition:all.6s var(--e)}
.marker.da{opacity:1;transform:none}
.marker em{font-style:normal;width:8px;height:8px;border-radius:50%;background:var(--verlauf-w);flex:0 0 auto}
.marker.m1{left:1%;top:12%}
.marker.m2{right:-1%;top:30%}
.marker.m3{left:4%;bottom:26%}
.marker.m4{right:6%;bottom:12%}
.marker.m5{left:-2%;top:44%}
@media(max-width:820px){.marker{display:none}}
/* Logowand */
.logowand{background:#fff;padding:clamp(104px,11vw,132px) 0 clamp(48px,5.4vw,68px)}
.logowand.vertrauen{padding:clamp(56px,7vw,86px) 0 clamp(14px,2vw,24px)}
.lw-kopf{display:flex;align-items:baseline;justify-content:center;gap:12px;flex-wrap:wrap}
.lw-kopf b{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:700;letter-spacing:-.04em;
  background:var(--verlauf-w);-webkit-background-clip:text;background-clip:text;color:transparent}
.lw-kopf span{font-size:clamp(1.02rem,1.7vw,1.28rem);font-weight:600;color:var(--navy);letter-spacing:-.02em}
.lw-zeile{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(16px,2.6vw,34px);margin-top:36px;align-items:center}
@media(max-width:900px){.lw-zeile{grid-template-columns:repeat(3,1fr);gap:26px 18px}}
@media(max-width:460px){.lw-zeile{grid-template-columns:repeat(2,1fr)}}
.lw-zeile img{max-height:42px;max-width:100%;width:auto;margin:0 auto;opacity:1;transition:.3s var(--e)}
.lw-zeile img.hoch{max-height:62px}
.lw-zeile img:hover{opacity:1;transform:translateY(-3px) scale(1.04)}
/* Statistik */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,22px)}
@media(max-width:820px){.stats{grid-template-columns:1fr}}
.stat{background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);padding:clamp(24px,2.8vw,34px);box-shadow:var(--sch);
  position:relative;overflow:hidden}
.stat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--verlauf)}
.stat .n{font-size:clamp(2.5rem,5vw,3.4rem);font-weight:700;letter-spacing:-.045em;line-height:1;
  display:flex;align-items:baseline;gap:9px;
  background:var(--verlauf-w);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .n em{font-style:normal;font-size:.4em;font-weight:600}
.stat p{margin-top:11px;font-size:.96rem;font-weight:300;color:var(--grau);line-height:1.6}
.stat p b{font-weight:600;color:var(--navy)}
/* ---------- FUNKTIONSWEISE: 3 Akte ---------- */
.akte{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:34px}
.akt-btn{display:flex;align-items:center;gap:10px;padding:11px 20px;border-radius:100px;border:1.5px solid var(--linie);
  background:#fff;font-family:inherit;font-size:.9rem;font-weight:500;color:var(--grau);cursor:pointer;transition:.3s var(--e)}
.akt-btn b{width:22px;height:22px;border-radius:50%;background:var(--linie);color:var(--grau);display:grid;place-items:center;
  font-size:.72rem;font-weight:700;transition:.3s var(--e)}
.akt-btn[aria-selected="true"]{border-color:transparent;background:var(--navy);color:#fff}
.akt-btn[aria-selected="true"] b{background:var(--verlauf-w);color:#fff}
.buehne{position:relative;background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);box-shadow:var(--sch);
  padding:clamp(26px,3.4vw,46px);overflow:hidden}
.buehne::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle,rgba(8,31,68,.05) 1px,transparent 1px) 0 0/20px 20px;opacity:.55}
.szene{position:relative;z-index:2;display:grid;grid-template-columns:1fr 150px 1fr;gap:clamp(12px,2vw,26px);
  align-items:center;min-height:330px}
@media(max-width:880px){.szene{grid-template-columns:1fr;gap:22px;min-height:0}}
.ereignis{background:#fff;border:1.5px solid var(--linie);border-radius:var(--r-m);padding:18px 20px;
  box-shadow:0 8px 24px rgba(8,31,68,.07);max-width:330px;margin-left:auto;
  opacity:0;transform:translateX(-22px);transition:all.7s var(--e)}
@media(max-width:880px){.ereignis{margin:0 auto}}
.ereignis.da{opacity:1;transform:none}
.ereignis .q{display:inline-flex;align-items:center;gap:7px;font-size:.68rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blau);background:var(--hellblau);padding:4px 10px;border-radius:100px}
.ereignis .p{display:flex;align-items:center;gap:12px;margin-top:14px}
.ereignis .av{width:40px;height:40px;border-radius:12px;background:var(--verlauf-w);color:#fff;display:grid;
  place-items:center;font-size:.86rem;font-weight:700;flex:0 0 auto}
.ereignis .nm{font-size:.98rem;font-weight:600;letter-spacing:-.02em}
.ereignis .ro{font-size:.79rem;font-weight:300;color:var(--grau)}
.ereignis .zeile{margin-top:14px;padding-top:13px;border-top:1px dashed var(--linie);font-size:.8rem;
  font-weight:300;color:var(--grau);display:flex;justify-content:space-between;gap:10px}
.ereignis .zeile b{color:var(--navy);font-weight:500}
.nabe{position:relative;display:grid;place-items:center}
.nabe .kreis{width:104px;height:104px;border-radius:50%;background:#fff;border:1px solid var(--linie);
  display:grid;place-items:center;box-shadow:0 10px 30px rgba(8,31,68,.11);position:relative;z-index:3}
.nabe .kreis img{width:52px;height:auto;transition:transform 1.1s var(--e)}
.nabe.aktiv .kreis img{transform:rotate(120deg)}
.nabe .welle{position:absolute;width:104px;height:104px;border-radius:50%;border:2.5px solid var(--rot);opacity:0}
.nabe.aktiv .welle{animation:welle 2.4s var(--e) infinite}
.nabe.aktiv .welle:nth-child(2){animation-delay:.8s}
@keyframes welle{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.1);opacity:0}}
.nabe .txt{position:absolute;bottom:-30px;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grau-h);white-space:nowrap}
.ziele{display:flex;flex-direction:column;gap:9px;max-width:330px}
@media(max-width:880px){.ziele{margin:0 auto}}
.zk{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--linie);border-radius:var(--r-s);
  padding:11px 14px;opacity:.34;transform:translateX(16px);transition:all.55s var(--e)}
.zk.da{opacity:1;transform:none}
.zk .fertig{border-color:rgba(42,74,215,.4);background:var(--hellblau)}
.zk .sy{font-size:.88rem;font-weight:600;width:104px;flex:0 0 auto;letter-spacing:-.02em}
.zk .fe{font-size:.76rem;font-weight:300;color:var(--grau);flex:1;line-height:1.3}
.zk .ok{width:20px;height:20px;border-radius:50%;background:var(--blau);position:relative;flex:0 0 auto;
  opacity:0;transform:scale(.5);transition:all.4s var(--e)}
.zk .fertig .ok{opacity:1;transform:none}
.zk .ok::after{content:'';position:absolute;left:7px;top:5px;width:4px;height:8px;border:solid #fff;
  border-width:0 1.9px 1.9px 0;transform:rotate(43deg)}
.akt-text{position:relative;z-index:2;margin-top:30px;padding-top:24px;border-top:1px solid var(--linie);
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.akt-text .nr{width:34px;height:34px;border-radius:50%;background:var(--verlauf-w);color:#fff;display:grid;
  place-items:center;font-size:.82rem;font-weight:700;flex:0 0 auto}
.akt-text h4{font-size:1.08rem;font-weight:600;letter-spacing:-.02em}
.akt-text p{margin-top:5px;font-size:.94rem;font-weight:300;color:var(--grau);line-height:1.6;max-width:62ch}
.akt-text.w h4.akt-text.w p.akt-text.w .nr{opacity:0;transform:translateY(7px)}
.akt-text h4.akt-text p.akt-text .nr{transition:opacity.35s var(--e),transform.35s var(--e)}
/* ---------- BAUKASTEN ---------- */
.bk{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(22px,3vw,44px);align-items:start}
@media(max-width:940px){.bk{grid-template-columns:1fr}}
.bk-schritt{margin-bottom:26px}
.bk-lab{display:flex;align-items:center;gap:10px;font-size:.74rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grau-h);margin-bottom:12px}
.bk-lab b{width:20px;height:20px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;
  font-size:.66rem;font-weight:700}
.wahl{display:flex;flex-wrap:wrap;gap:8px}
.wahl button{padding:11px 18px;border-radius:100px;border:1.5px solid var(--linie);background:#fff;font-family:inherit;
  font-size:.89rem;font-weight:500;color:var(--grau);cursor:pointer;transition:.22s var(--e)}
.wahl button:hover{border-color:var(--navy);color:var(--navy);transform:translateY(-1px)}
.wahl button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.wahl.bunt button[aria-pressed="true"]{background:var(--rot);border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(227,26,62,.26)}
.lauf{background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);box-shadow:var(--sch);overflow:hidden}
.lauf-kopf{display:flex;align-items:center;gap:11px;padding:14px 18px;border-bottom:1px solid var(--linie);background:#FBFCFE}
.lauf-kopf .nm{font-size:.9rem;font-weight:600;letter-spacing:-.02em}
.lauf-kopf .st{margin-left:auto;font-size:.72rem;font-weight:600;padding:4px 12px;border-radius:100px;
  background:var(--flaeche);color:var(--grau)}
.lauf-kopf .st.an{background:var(--hellblau);color:var(--blau)}
.lauf-body{padding:20px;background:radial-gradient(circle,rgba(8,31,68,.05) 1px,transparent 1px) 0 0/18px 18px}
.kn{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--linie);border-radius:var(--r-s);
  padding:13px 15px;margin-bottom:9px;opacity:.3;transform:translateY(8px);transition:all.5s var(--e);position:relative}
.kn.da{opacity:1;transform:none}
.kn.on{border-color:var(--rot);box-shadow:0 8px 22px rgba(227,26,62,.16)}
.kn.ok{border-color:rgba(42,74,215,.42)}
.kn .ix{width:26px;height:26px;border-radius:8px;background:var(--flaeche);color:var(--grau);display:grid;place-items:center;
  font-size:.7rem;font-weight:700;flex:0 0 auto;transition:.4s var(--e)}
.kn.on .ix{background:var(--verlauf-w);color:#fff}
.kn.ok .ix{background:var(--blau);color:#fff}
.kn .t{flex:1;min-width:0}
.kn .t b{display:block;font-size:.87rem;font-weight:600;letter-spacing:-.02em}
.kn .t small{display:block;font-size:.77rem;font-weight:300;color:var(--grau);margin-top:1px}
.kn .ms{font-size:.72rem;font-weight:600;color:var(--blau);opacity:0;transition:.3s}
.kn.ok .ms{opacity:1}
.lauf-fuss{padding:16px 20px;border-top:1px solid var(--linie);display:flex;justify-content:space-between;
  align-items:center;gap:14px;flex-wrap:wrap}
.lauf-fuss .erg{font-size:.88rem;font-weight:300;color:var(--grau)}
.lauf-fuss .erg b{font-weight:600;color:var(--navy)}
/* ---------- Drei Bausteine als eigene Sektionen ---------- */
.bs{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4vw,64px);align-items:center}
.bs.dreh>div:first-child{order:2}
@media(max-width:940px){.bs .bs.dreh{grid-template-columns:1fr}.bs.dreh>div:first-child{order:0}}
.bs-lab{display:inline-flex;align-items:center;gap:11px;font-size:.73rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grau);margin-bottom:16px}
.bs-lab b{width:28px;height:28px;border-radius:50%;background:var(--verlauf-w);color:#fff;display:grid;
  place-items:center;font-size:.7rem;font-weight:700;letter-spacing:0}
.bs h2{font-size:clamp(1.6rem,3vw,2.5rem);margin-bottom:14px}
.bs .lead{margin-bottom:20px}
.bs .beleg{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;background:var(--hellblau);
  border-radius:100px;padding:9px 18px;font-size:.87rem;font-weight:500;color:var(--blau-d);margin-top:4px}
.bs-visual{background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);box-shadow:var(--sch);
  padding:clamp(24px,3vw,38px);position:relative;overflow:hidden;min-height:300px;display:grid;place-items:center}
.bs-visual::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle,rgba(8,31,68,.05) 1px,transparent 1px) 0 0/20px 20px;opacity:.6}
.bs-visual>*{position:relative;z-index:2;width:100%}
/* Baustein 1: Netz */
.netz{position:relative;width:100%;aspect-ratio:1.35/1;max-width:420px;margin:0 auto}
@media(max-width:520px){.nz{font-size:.66rem;padding:5px 9px;gap:5px}.nz svg{width:12px;height:12px}
.nz>span{width:7px!important;height:7px!important}.nz-mitte{width:58px;height:58px}.nz-mitte img{width:30px}}
.netz svg{position:absolute;inset:0;width:100%;height:100%}
.netz svg line{stroke:var(--rot);stroke-width:1.3;opacity:0;transition:opacity.5s var(--e)}
.netz.an svg line{opacity:.42}
.nz{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;
  background:#fff;border:1.5px solid var(--linie);border-radius:100px;padding:7px 13px;font-size:.76rem;
  font-weight:600;color:var(--navy);white-space:nowrap;box-shadow:0 4px 12px rgba(8,31,68,.09);
  opacity:0;transition:opacity.5s var(--e),transform.6s var(--e)}
.nz.da{opacity:1}
.nz svg{flex:0 0 auto;width:15px;height:15px}
.nz>span{flex:0 0 auto}
.nz-mitte{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.7);width:72px;height:72px;
  border-radius:50%;background:#fff;border:1px solid var(--linie);display:grid;place-items:center;opacity:0;
  transition:.6s var(--e);box-shadow:0 12px 30px rgba(8,31,68,.16);z-index:3}
.nz-mitte.da{opacity:1;transform:translate(-50%,-50%) scale(1)}
.nz-mitte img{width:38px}
/* Baustein 2: Übersetzung */
.ueb2{display:flex;flex-direction:column;align-items:center;gap:12px;min-height:190px;justify-content:center}
.ub2{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;min-height:126px;align-content:center;max-width:300px}
.ub2 div{background:#fff;border:1.5px solid var(--linie);border-radius:var(--r-s);padding:9px 14px;
  opacity:0;transform:translateY(12px);transition:.5s var(--e);min-width:126px}
.ub2 div.da{opacity:1;transform:none}
.ub2 div.weg{opacity:0;transform:translateY(-14px) scale(.9)}
.ub2 small{display:block;font-size:.61rem;letter-spacing:.13em;text-transform:uppercase;color:var(--grau-h);
  font-weight:600;margin-bottom:3px}
.ub2 span{font-size:.83rem;font-weight:600;color:var(--navy)}
.ueb2-pfeil{color:var(--grau-h);font-size:.78rem}
.ueb2-ziel{display:inline-flex;min-height:47px;align-items:center;gap:11px;background:var(--verlauf-w);color:#fff;
  border-radius:100px;padding:12px 24px 12px 15px;font-size:.97rem;font-weight:600;letter-spacing:-.02em;
  opacity:0;transform:scale(.85);transition:.55s var(--e);box-shadow:0 12px 30px rgba(227,26,62,.3)}
.ueb2-ziel.da{opacity:1;transform:none}
.ueb2-ziel img{width:24px;filter:brightness(0) invert(1)}
/* Baustein 3: Ablauf */
.abl{display:flex;flex-direction:column;gap:0;width:100%;max-width:360px;margin:0 auto}
.abz{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--linie);border-radius:var(--r-s);
  padding:12px 15px;opacity:0;transform:translateX(-10px);transition:.5s var(--e)}
.abz.da{opacity:1;transform:none}
.abz .agent{background:var(--verlauf-w);border-color:transparent;box-shadow:0 10px 26px rgba(227,26,62,.3)}
.abz b{width:26px;height:26px;border-radius:8px;background:var(--hellblau);color:var(--blau-d);display:grid;
  place-items:center;font-size:.74rem;font-weight:700;flex:0 0 auto}
.abz .agent b{background:rgba(255,255,255,.25);color:#fff}
.abz .tx{font-size:.86rem;font-weight:600;color:var(--navy);line-height:1.3}
.abz .agent .tx{color:#fff}
.abz .tx small{display:block;font-size:.76rem;font-weight:300;color:var(--grau);margin-top:1px}
.abz .agent .tx small{color:rgba(255,255,255,.8)}
.abl-vb{width:2px;height:14px;background:var(--linie);margin:5px auto;opacity:0;transition:.4s var(--e)}
.abl-vb.da{opacity:1;background:var(--rot)}
/* ---------- Drei Mehrwerte ---------- */
.mw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
@media(max-width:900px){.mw{grid-template-columns:1fr}}
.mwk{background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);padding:clamp(26px,3vw,38px);
  box-shadow:var(--sch);position:relative;overflow:hidden;transition:transform.25s var(--e),box-shadow.25s var(--e)}
.mwk:hover{transform:translateY(-4px);box-shadow:var(--sch-h)}
.mwk::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--verlauf)}
.mwk .nr{font-size:.72rem;font-weight:700;letter-spacing:.16em;color:var(--rot);margin-bottom:14px;display:block}
.mwk h3{font-size:clamp(1.16rem,1.9vw,1.45rem);margin-bottom:10px}
.mwk p{font-size:.95rem;font-weight:300;color:var(--grau);line-height:1.65}
.mwk .beleg{margin-top:18px;padding-top:15px;border-top:1px solid var(--linie);font-size:.85rem;font-weight:300;color:var(--grau)}
.mwk .beleg b{color:var(--navy);font-weight:600}
/* ---------- Stempel ---------- */
.stempel{position:absolute;top:calc(var(--kopfh,110px) + clamp(10px,2vw,26px));
  right:clamp(16px,3.6vw,54px);z-index:6;width:clamp(152px,13.5vw,186px);aspect-ratio:1;
  border-radius:50%;display:grid;place-items:center;text-align:center;
  border:1.5px solid rgba(255,255,255,.26);background:rgba(255,255,255,.05);backdrop-filter:blur(10px);
  transform:rotate(-9deg) scale(.72);opacity:0;
  transition:opacity.8s var(--e),transform.8s var(--e);pointer-events:none}
.stempel::before{content:'';position:absolute;inset:7px;border-radius:50%;
  border:1px dashed rgba(255,255,255,.2)}
.stempel.da{opacity:1;transform:rotate(-9deg) scale(1)}
.st-innen{position:relative;z-index:2;font-size:clamp(.6rem,.74vw,.68rem);font-weight:600;line-height:1.38;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.84);padding:0 10px}
.st-innen em{display:block;font-style:normal;margin-top:8px;padding-top:7px;font-size:.86em;
  letter-spacing:.1em;color:rgba(255,255,255,.6);
  border-top:1px solid rgba(255,255,255,.2)}
.st-innen b{display:block;font-size:1.4em;letter-spacing:.16em;margin-bottom:6px;
  background:var(--verlauf-w);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:860px){.stempel{width:118px;right:14px;top:calc(var(--kopfh,110px) + 10px)}
.st-innen{font-size:.52rem;padding:0 8px}}
@media(max-width:520px){.stempel{display:none}}
/* Wechselzeile */
.kz.z3{transition:opacity.45s var(--e),transform.45s var(--e)}
.kz.z3.tausch{opacity:0;transform:translateY(-12px)}
/* ---------- Funktionsweise: Klammer über vier Sektionen ---------- */
.fw{position:relative}
.fw-rail{position:fixed;left:clamp(14px,2.2vw,34px);top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:2px;opacity:0;pointer-events:none;transition:opacity.45s var(--e)}
.fw-rail.da{opacity:1;pointer-events:auto}
.fw-rail a{display:flex;align-items:center;gap:11px;text-decoration:none;padding:7px 4px;position:relative}
.fw-rail .pkt{width:9px;height:9px;border-radius:50%;background:var(--linie);flex:0 0 auto;
  transition:.3s var(--e);box-shadow:0 0 0 0 rgba(227,26,62,.3)}
.fw-rail .tx{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grau-h);white-space:nowrap;transition:.3s var(--e);opacity:.75}
.fw-rail a.an .pkt{background:var(--verlauf-w);box-shadow:0 0 0 5px rgba(227,26,62,.14)}
.fw-rail a.an .tx{color:var(--navy);opacity:1}
.fw-rail a:hover.tx{color:var(--navy);opacity:1}
.fw-rail::before{content:'';position:absolute;left:4px;top:12px;bottom:12px;width:1px;background:var(--linie);z-index:-1}
@media(max-width:1180px){.fw-rail .tx{display:none}}
@media(max-width:760px){.fw-rail{display:none}}
/* ---------- Überblick der drei Schritte ---------- */
.ueb-drei{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:clamp(10px,1.6vw,20px);align-items:stretch}
@media(max-width:940px){.ueb-drei{grid-template-columns:1fr;gap:14px}.ueb-pf{transform:rotate(90deg);margin:0 auto}}
.uk{background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);padding:clamp(22px,2.6vw,32px);
  box-shadow:var(--sch);position:relative;overflow:hidden;transition:transform.35s var(--e),box-shadow.35s var(--e)}
.uk::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--verlauf-w);
  transform:scaleX(0);transform-origin:left;transition:transform.5s var(--e)}
.uk.an{transform:translateY(-5px);box-shadow:var(--sch-h)}
.uk.an::before{transform:scaleX(1)}
.uk .nr{display:inline-flex;align-items:center;gap:9px;font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grau-h);margin-bottom:14px;transition:color.3s}
.uk.an .nr{color:var(--rot)}
.uk .nr b{width:24px;height:24px;border-radius:50%;background:var(--flaeche);color:var(--grau);
  display:grid;place-items:center;font-size:.68rem;transition:.3s var(--e)}
.uk.an .nr b{background:var(--verlauf-w);color:#fff}
.uk h3{font-size:clamp(1.08rem,1.7vw,1.3rem);margin-bottom:8px}
.uk p{font-size:.9rem;font-weight:300;color:var(--grau);line-height:1.6}
.uk .bild{height:96px;margin:0 0 16px;border-radius:var(--r-s);background:var(--flaeche);
  display:grid;place-items:center;overflow:hidden;position:relative}
.uk .bild img{width:44px;height:auto}
.ueb-pf{display:grid;place-items:center;color:var(--grau-h)}
.ueb-fuss{margin-top:clamp(26px,3vw,38px);text-align:center;font-size:clamp(1rem,1.7vw,1.28rem);
  font-weight:600;letter-spacing:-.025em;color:var(--navy)}
.ueb-fuss b{background:var(--verlauf-w);-webkit-background-clip:text;background-clip:text;color:transparent}
/* kleine Visuals im Überblick */
.mini-netz{position:relative;width:100%;height:100%}
.mini-netz i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--linie);
  transition:background.4s var(--e)}
.uk.an .mini-netz i{background:var(--rot)}
.mini-netz img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px}
.mini-spr{display:flex;flex-direction:column;align-items:center;gap:5px}
.mini-spr span{font-size:.6rem;font-weight:600;color:var(--grau);background:#fff;border:1px solid var(--linie);
  border-radius:100px;padding:3px 9px}
.mini-spr b{font-size:.63rem;font-weight:700;color:#fff;background:var(--verlauf-w);border-radius:100px;padding:4px 11px}
.mini-ab{display:flex;flex-direction:column;gap:4px;width:76%}
.mini-ab i{height:11px;border-radius:4px;background:var(--linie);transition:background.4s var(--e)}
.uk.an .mini-ab i:last-child{background:var(--verlauf-w)}
/* ---------- Beruhigung: nichts muss verändert werden ---------- */
.nix{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(22px,3vw,32px)}
.nix span{display:inline-flex;align-items:center;gap:10px;padding:11px 20px 11px 13px;border-radius:100px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  font-size:.9rem;font-weight:600;color:#fff;letter-spacing:-.01em}
.nix i{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.14);flex:0 0 auto;
  display:grid;place-items:center;font-style:normal;font-size:.66rem;font-weight:700;color:rgba(255,255,255,.85)}
@media(max-width:640px){.nix span{font-size:.82rem;padding:9px 15px 9px 10px}}
.nix-satz{margin-top:clamp(16px,2.2vw,22px);text-align:center;font-size:clamp(.92rem,1.3vw,1.06rem);
  font-weight:300;color:rgba(255,255,255,.66);max-width:60ch;margin-left:auto;margin-right:auto;line-height:1.6}
.nix-satz b{color:#fff;font-weight:600}
.uk .wer{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 11px;border-radius:100px;margin-bottom:12px}
.uk .wer.wir{background:var(--hellblau);color:var(--blau-d)}
.uk .wer.sie{background:rgba(227,26,62,.10);color:var(--rot)}
.uk .nr{margin-bottom:8px}
/* ---------- Endloser Zufluss ---------- */
.zufluss{position:relative;width:100%;aspect-ratio:1.3/1;max-width:430px;margin:0 auto;overflow:hidden}
.zf-mitte{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:82px;height:82px;
  border-radius:50%;background:#fff;border:1px solid var(--linie);display:grid;place-items:center;z-index:4;
  box-shadow:0 12px 30px rgba(8,31,68,.14)}
.zf-mitte img{width:44px}
.zf-puls{position:absolute;left:50%;top:50%;width:82px;height:82px;border-radius:50%;
  transform:translate(-50%,-50%);border:2px solid var(--rot);opacity:0;z-index:3;
  animation:zfpuls 3s var(--e) infinite}
.zf-puls:nth-of-type(2){animation-delay:1.5s}
@keyframes zfpuls{0%{transform:translate(-50%,-50%) scale(1);opacity:.42}100%{transform:translate(-50%,-50%) scale(2.6);opacity:0}}
.zc{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:6px;white-space:nowrap;
  background:#fff;border:1.5px solid var(--linie);border-radius:100px;padding:6px 12px;
  font-size:.73rem;font-weight:600;color:var(--navy);box-shadow:0 3px 10px rgba(8,31,68,.08);
  will-change:transform,opacity;z-index:2}
.zc svg.zc .dot.zc .dat{flex:0 0 auto}
.zc .dot{width:8px;height:8px;border-radius:3px;display:block}
.zc .dat{font-size:.56rem;font-weight:800;letter-spacing:.02em;color:#fff;border-radius:3px;padding:2px 4px;line-height:1}
@media(max-width:520px){.zc{font-size:.64rem;padding:5px 10px}.zf-mitte{width:64px;height:64px}.zf-mitte img{width:34px}
.zf-puls{width:64px;height:64px}}
/* ---------- Übersetzen: unterschiedliche Strukturen ---------- */
.ueb3{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;min-height:334px;justify-content:center}
.u3-quellen{position:relative;display:flex;flex-direction:column;gap:7px;width:100%;max-width:300px;
  max-height:420px;transition:max-height.55s var(--e),opacity.4s var(--e)}
.u3-quellen.zu{max-height:0;opacity:0;overflow:hidden}
.u3-k{background:#fff;border:1.5px solid var(--linie);border-radius:var(--r-s);padding:9px 12px;
  opacity:0;transform:translateY(10px);transition:.5s var(--e)}
.u3-k.da{opacity:1;transform:none}
.u3-k.weg{opacity:0;transform:translateY(-10px) scale(.94)}
.u3-k small{display:block;font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--grau-h);
  font-weight:700;margin-bottom:5px}
.u3-z{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:2px 0}
.u3-z em{font-style:normal;font-size:.68rem;font-weight:600;color:var(--grau);letter-spacing:-.01em}
.u3-z b{font-size:.74rem;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.u3-k.pass{border-color:rgba(227,26,62,.45);box-shadow:0 6px 18px rgba(227,26,62,.12)}
.u3-k.pass .u3-z em .u3-k.pass .u3-z b{color:var(--rot)}
.u3-frage{position:absolute;right:-8px;top:50%;transform:translate(50%,-50%) rotate(-4deg);
  background:var(--rot);color:#fff;font-size:.68rem;font-weight:700;padding:6px 12px;border-radius:100px;
  white-space:nowrap;opacity:0;transition:.5s var(--e);box-shadow:0 6px 16px rgba(227,26,62,.32)}
.u3-frage.da{opacity:1}
@media(max-width:1180px){.u3-frage{right:auto;left:50%;top:-10px;transform:translate(-50%,-100%) rotate(-3deg)}}
.u3-pfeil{display:flex;align-items:center;gap:9px;opacity:0;transform:translateY(-6px);transition:.5s var(--e)}
.u3-pfeil.da{opacity:1;transform:none}
.u3-marke{width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--linie);
  display:grid;place-items:center;box-shadow:0 5px 14px rgba(8,31,68,.12)}
.u3-marke img{width:20px}
.u3-lab{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grau-h)}
.u3-ziel{width:100%;max-width:300px;background:var(--navy);border-radius:var(--r-s);padding:11px 13px;
  opacity:0;transform:scale(.92);transition:.55s var(--e);box-shadow:0 14px 32px rgba(8,31,68,.28)}
.u3-ziel.da{opacity:1;transform:none}
.u3-ziel small{display:block;font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.55);font-weight:700;margin-bottom:6px}
.u3-ziel .u3-z em{color:rgba(255,255,255,.6)}
.u3-ziel .u3-z b{color:#fff}
/* ---------- Baustein 03: Baukasten ---------- */
.bau{width:100%;display:flex;flex-direction:column;gap:12px}
.bau-palette{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding-bottom:11px;
  border-bottom:1px dashed var(--linie)}
.bp{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:600;color:var(--grau);
  background:var(--flaeche);border:1px solid var(--linie);border-radius:100px;padding:5px 11px;
  transition:.3s var(--e)}
.bp i{width:8px;height:8px;border-radius:3px;background:var(--grau-h);flex:0 0 auto;transition:.3s var(--e)}
.bp.an{background:#fff;border-color:var(--rot);color:var(--rot);transform:translateY(-2px);
  box-shadow:0 5px 14px rgba(227,26,62,.18)}
.bp.an i{background:var(--rot)}
.bau-flow{display:flex;flex-direction:column;gap:0;min-height:250px}
.bz{display:flex;align-items:center;gap:11px;background:#fff;border:1.5px solid var(--linie);
  border-radius:var(--r-s);padding:9px 12px;opacity:0;transform:translateY(9px) scale(.97);
  transition:.45s var(--e)}
.bz.da{opacity:1;transform:none}
.bz.neu{border-color:var(--rot);box-shadow:0 8px 20px rgba(227,26,62,.16)}
.bz b{width:24px;height:24px;border-radius:7px;flex:0 0 auto;display:grid;place-items:center;
  font-size:.66rem;font-weight:800;color:#fff}
.bz .tx{min-width:0}
.bz .tx strong{display:block;font-size:.79rem;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.bz .tx small{display:block;font-size:.7rem;font-weight:300;color:var(--grau);margin-top:1px;line-height:1.3}
.bvb{width:2px;height:12px;background:var(--linie);margin:4px 0 4px 23px;opacity:0;transition:.35s var(--e)}
.bvb.da{opacity:1;background:var(--rot)}
.bau-fertig{text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blau-d);background:var(--hellblau);border-radius:100px;padding:8px 14px;
  opacity:0;transform:translateY(6px);transition:.5s var(--e)}
.bau-fertig.da{opacity:1;transform:none}
@media(max-width:520px){.bp{font-size:.62rem;padding:4px 9px}.bz .tx strong{font-size:.74rem}}
.mw{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.mwk .beleg-k{margin-top:18px;padding-top:15px;border-top:1px solid var(--linie);
  font-size:.85rem;font-weight:300;color:var(--grau);line-height:1.55}
.mwk .beleg-k b{color:var(--navy);font-weight:600}
.mw-fuss{margin-top:clamp(28px,3.4vw,42px);text-align:center;font-size:clamp(1rem,1.7vw,1.3rem);
  font-weight:600;letter-spacing:-.025em;color:var(--navy)}
.mw-fuss b{background:var(--verlauf-w);-webkit-background-clip:text;background-clip:text;color:transparent}
.bk-hinweis{font-style:normal;font-size:.68rem;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--grau-h);margin-left:2px}
.wahl.bunt{max-height:none}
.wahl.bunt button{font-size:.85rem;padding:9px 15px}
/* ---------- Ergebnis: Stundenverschiebung ---------- */
.ebar{width:100%;display:flex;flex-direction:column;gap:11px}
.eb-zeile{display:flex;flex-direction:column;gap:5px}
.eb-lab{font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grau-h)}
.eb-track{display:flex;height:48px;border-radius:var(--r-s);overflow:hidden;border:1px solid var(--linie)}
.eb-v .eb-s{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.79rem;font-weight:500;
  white-space:nowrap;overflow:hidden;transition:width 1.2s var(--e)}
.eb-v{background:var(--flaeche);color:var(--grau)}
.eb-s{background:var(--rot);color:#fff}
.eb-v b .eb-s b{font-weight:800;font-size:.92rem}
.eb-delta{margin-top:8px;display:flex;align-items:center;gap:14px;background:var(--hellblau);
  border-radius:var(--r-m);padding:15px 18px}
.eb-zahl{font-size:clamp(2.1rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.05em;color:var(--rot);line-height:1;
  flex:0 0 auto}
.eb-text{font-size:.88rem;font-weight:300;color:var(--blau-d);line-height:1.5}
.eb-text b{font-weight:700;color:var(--navy)}
.mwk{display:flex;flex-direction:column}
.mwk p{margin-bottom:20px}
.kz-box{margin-top:auto;padding:15px 17px;min-height:78px;border-radius:var(--r-s);background:var(--flaeche);
  display:flex;align-items:center;gap:14px}
.kz-w{font-size:clamp(1.5rem,2.4vw,1.85rem);font-weight:800;letter-spacing:-.045em;color:var(--rot);
  line-height:1;flex:0 0 auto;white-space:nowrap}
.kz-t{font-size:.8rem;font-weight:400;color:var(--grau);line-height:1.4}
.schuss-legende{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);
  max-width:1080px;margin:clamp(96px,10vw,128px) auto 0;text-align:left}
@media(max-width:860px){.schuss-legende{grid-template-columns:1fr;margin-top:clamp(70px,12vw,100px)}}
.schuss-legende div{padding-left:15px;border-left:3px solid var(--rot)}
.schuss-legende b{display:block;font-size:.95rem;font-weight:700;color:var(--navy);letter-spacing:-.02em;margin-bottom:5px}
.schuss-legende span{display:block;font-size:.87rem;font-weight:300;color:var(--grau);line-height:1.55}
/* ---------- Lesefortschritt ---------- */
.fortleiste{position:fixed;top:var(--kopfh,110px);left:0;right:0;height:3px;z-index:89;pointer-events:none}
.fortleiste i{display:block;height:100%;width:0;background:var(--verlauf-w);
  box-shadow:0 0 12px rgba(227,26,62,.5);transition:width.1s linear}
/* ---------- Wir ersetzen nichts ---------- */
.ersetz{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.ersetz::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 380px at 50% 0%,rgba(227,26,62,.18),transparent 68%)}
.ersetz .wrap{position:relative;z-index:2}
.ersetz h2{color:#fff}
.ggn{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,2.4vw,32px);align-items:stretch;margin-top:clamp(34px,4vw,54px)}
@media(max-width:900px){.ggn{grid-template-columns:1fr}}
.gk{border-radius:var(--r-l);padding:clamp(24px,2.8vw,34px);border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.045)}
.gk.gut{background:#fff;color:var(--navy);border-color:#fff;box-shadow:0 22px 54px rgba(0,0,0,.3)}
.gk-logo{height:30px;width:auto;margin-bottom:16px;display:block}
.gk-fazit{margin-top:20px;padding-top:17px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.88rem;font-weight:300;line-height:1.6;color:rgba(255,255,255,.62)}
.gk-fazit.hell{border-top-color:var(--linie);color:var(--grau)}
.gk .tag{display:inline-block;padding:5px 14px;border-radius:100px;font-size:.71rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.gk.schlecht .tag{background:rgba(255,255,255,.12);color:rgba(255,255,255,.7)}
.gk.gut .tag{background:var(--verlauf-w);color:#fff}
.gk h3{font-size:clamp(1.14rem,1.9vw,1.42rem);margin-bottom:16px}
.gk.schlecht h3{color:#fff}
.gl{list-style:none;display:flex;flex-direction:column;gap:12px}
.gl li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;font-weight:300;line-height:1.5;
  position:relative;transition:opacity.5s var(--e)}
.gk.schlecht .gl li{color:rgba(255,255,255,.75)}
.gk.gut .gl li{color:var(--text)}
.gl li i{width:21px;height:21px;border-radius:50%;flex:0 0 auto;margin-top:1px;display:grid;place-items:center;
  font-style:normal;font-size:.7rem;font-weight:700;transition:.4s var(--e)}
.gk.schlecht .gl li i{background:rgba(255,255,255,.14);color:rgba(255,255,255,.65)}
.gk.gut .gl li i{background:var(--verlauf-w);color:#fff}
.gl li span{position:relative;display:inline-block;font-weight:600;font-size:.99rem;letter-spacing:-.02em}
.gl li small{display:block;font-size:.85rem;font-weight:300;margin-top:2px;line-height:1.45}
.gk.schlecht .gl li small{color:rgba(255,255,255,.5)}
.gk.gut .gl li small{color:var(--grau)}
.gk.schlecht .gl li span{color:#fff}
.gk.schlecht .gl li span{background-image:linear-gradient(#E8556A,#E8556A);background-repeat:no-repeat;
  background-size:0% 2px;background-position:0 56%;transition:background-size.6s var(--e)}
.gk.schlecht.an .gl li span{background-size:100% 2px}
.gk.schlecht.an .gl li{opacity:.72}
.gk.schlecht .gl li:nth-child(2) span::after{transition-delay:.14s}
.gk.schlecht .gl li:nth-child(3) span::after{transition-delay:.28s}
.gk.schlecht .gl li:nth-child(4) span::after{transition-delay:.42s}
.gk.schlecht .gl li:nth-child(5) span::after{transition-delay:.56s}
.gk.gut .gl li{opacity:0;transform:translateX(-10px);transition:opacity.5s var(--e),transform.5s var(--e)}
.gk.gut.an .gl li{opacity:1;transform:none}
.gk.gut .gl li:nth-child(2){transition-delay:.12s}
.gk.gut .gl li:nth-child(3){transition-delay:.24s}
.gk.gut .gl li:nth-child(4){transition-delay:.36s}
.gk.gut .gl li:nth-child(5){transition-delay:.48s}
.ggn-mitte{display:grid;place-items:center}
.ggn-mitte span{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;font-size:.78rem;font-weight:700;
  letter-spacing:.06em;color:rgba(255,255,255,.7)}
@media(max-width:900px){.ggn-mitte{padding:6px 0}}
.ersetz-satz{margin-top:clamp(30px,3.6vw,46px);text-align:center;font-size:clamp(1.1rem,2.1vw,1.6rem);
  font-weight:600;letter-spacing:-.03em;color:#fff}
.ersetz-satz b{background:var(--verlauf-w);-webkit-background-clip:text;background-clip:text;color:transparent}
/* ---------- HR wird strategisch ---------- */
.strat-bar{margin-top:clamp(26px,3vw,38px);border-radius:var(--r-m);overflow:hidden;border:1px solid var(--linie);
  background:#fff;box-shadow:var(--sch)}
.sb-zeile{display:flex;align-items:center;height:66px;position:relative}
.sb-zeile+.sb-zeile{border-top:1px solid var(--linie)}
.sb-lab{position:absolute;left:16px;top:8px;font-size:.66rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grau-h);z-index:3}
.sb-a.sb-b{height:100%;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:600;
  transition:width 1.1s var(--e);white-space:nowrap;overflow:hidden}
.sb-a{background:var(--flaeche);color:var(--grau)}
.sb-b{background:var(--verlauf-w);color:#fff}
.strat-note{margin-top:14px;font-size:.85rem;font-weight:300;color:var(--grau)}
/* ---------- Einsatzfelder (Bento) ---------- */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,20px);margin-bottom:clamp(28px,3.4vw,44px)}
@media(max-width:980px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.bento{grid-template-columns:minmax(0,1fr)}}
.bf{background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);padding:clamp(20px,2.4vw,28px);
  transition:transform.25s var(--e),box-shadow.25s var(--e),border-color.25s;position:relative;overflow:hidden}
.bf::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--verlauf-w);
  transform:scaleX(0);transform-origin:left;transition:transform.35s var(--e)}
.bf:hover{transform:translateY(-4px);box-shadow:var(--sch-h)}
.bf:hover::before{transform:scaleX(1)}
.bf .ic{width:38px;height:38px;border-radius:11px;background:var(--hellblau);display:grid;place-items:center;
  font-size:1.05rem;margin-bottom:14px}
.bf b{display:block;font-size:1rem;font-weight:600;letter-spacing:-.02em;margin-bottom:7px}
.bf p{font-size:.87rem;font-weight:300;color:var(--grau);line-height:1.55}
.bento-hinweis{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:clamp(24px,3vw,36px);
  font-size:.9rem;font-weight:300;color:var(--grau);text-align:center;flex-wrap:wrap}
.bento-hinweis b{font-weight:600;color:var(--navy)}
/* ---------- Perspektiven ---------- */
const PERSP=[
{rolle:'HR-Alltag',
 h:'Sie hören auf, Daten von A nach B zu tragen.',
 s:'Sie haben BWL studiert, um mit Menschen zu arbeiten, nicht, um dieselbe Person elfmal einzutippen. Genau das nimmt Ihnen der Autopilot ab.',
 l:[['1×','Einmal eintragen, statt elfmal','Sie erfassen den Vorgang dort, wo Sie ohnehin arbeiten. Alles Weitere passiert ohne Sie.'],
    ['?','Nichts mehr im Kopf behalten','Der Ablauf erinnert sich an die Bescheinigung, die Frist und den Zugang, den sonst niemand auf dem Schirm hat.'],
    ['✓','Keine peinlichen Rückfragen','Kein Anruf mehr, weil in einem System etwas fehlt oder eine Adresse veraltet ist.'],
    ['IT','Sie brauchen niemanden','Sie klicken sich den Ablauf selbst zusammen. Kein Ticket, kein Warten, keine Fachbegriffe.']],
 gr:'19 Stunden', un:'gehen pro Woche je 100 Mitarbeitende in reine Verwaltung. Der Autopilot holt den größten Teil davon zurück.',
 fuss:'Quelle: branchenübliche Erhebungen zum HR-Verwaltungsaufwand im Mittelstand',
 zitat:'„Schnittstellen, die vorher <b>von Hand gepflegt</b> wurden, laufen jetzt allein. Ich muss nichts mehr nachhalten."',
 av:'BK', nm:'Benedikt Köhler', ro:'Experte HR-IT-Systeme, GEMA'}
,
{rolle:'HR-Verantwortung',
 h:'Sie wachsen, ohne HR-Stellen nachzuziehen.',
 s:'Der Aufwand in der Personalverwaltung wächst sonst linear mit der Mitarbeitendenzahl. Genau diese Linie brechen Sie, mit einer Zahl, die im Budgetgespräch trägt.',
 l:[['€','Kosten, die messbar verschwinden','Rund 85.000 € pro Jahr bei 500 Mitarbeitenden, die heute in vermeidbare manuelle Tätigkeiten fließen.'],
    ['⚠','Risiko, das Sie belegen können','Austritte laufen fristgerecht, Zugänge schließen punktgenau. Jeder Schritt ist protokolliert, auditfest.'],
    ['↗','Wachstum ohne Headcount','30 % mehr Mitarbeitende bedeuten nicht 30 % mehr Verwaltung. Der Ablauf skaliert, Ihr Team nicht.'],
    ['◆','Zahlen, auf die Sie sich verlassen','Ein Datenstand in allen Systemen. Jede Kennzahl, die Sie der Geschäftsführung berichten, stimmt.'],
    ['⚙','Keine Abhängigkeit von einer Person','Keine Eigenentwicklung, die mit dem einen Entwickler steht und fällt. Ändert ein Hersteller etwas, ziehen wir nach.']],
 gr:'im ersten Jahr', un:'trägt sich der Business Case in aller Regel. Ohne Systemwechsel, ohne Projektbudget, ohne IT-Ressource.',
 fuss:'Rechnen Sie mit Ihren Zahlen nach, der Rechner steht weiter unten',
 zitat:'„Über <b>250 Stunden im Monat</b> sparen wir seit der Automatisierung. Die Daten stimmen in allen Systemen, das war vorher nie so."',
 av:'BB', nm:'HR-Leitung', ro:'Betty Barclay Group, 1.200 Mitarbeitende'}
];
(function(){
  const b0=document.getElementById('pb0'),b1=document.getElementById('pb1'),
        R=document.querySelector('[data-prolle]'),H=document.querySelector('[data-ph]'),S=document.querySelector('[data-ps]'),
        L=document.querySelector('[data-pliste]'),G=document.querySelector('[data-pgr]'),U=document.querySelector('[data-pun]'),
        F=document.querySelector('[data-pfuss]'),Z=document.querySelector('[data-pzitat]'),AV=document.querySelector('[data-pav]'),
        NM=document.querySelector('[data-pnm]'),RO=document.querySelector('[data-pro]');
  function zeigen(i){
    const p=PERSP[i];
    b0.setAttribute('aria-selected',i===0);b1.setAttribute('aria-selected',i===1);
    R.textContent=p .rolle;H.textContent=p.h;S.textContent=p .s;
    L.innerHTML=p.l.map(x=>`<li><i>${x[0]}</i><div><b>${x[1]}</b><small>${x[2]}</small></div></li>`).join('');
    G.textContent=p .gr;U.textContent=p.un;F.textContent=p .fuss;
    Z.innerHTML=p.zitat;AV.textContent=p .av;NM.textContent=p .nm;RO.textContent=p .ro;
    AV.style.background = i===0 ? 'var(--navy)' : 'var(--rot)';
  }
  b0.onclick=()=>zeigen(0);b1.onclick=()=>zeigen(1);zeigen(0);
}
)();

/* ---------- Module ---------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px;justify-content:center}
.tabs button{padding:11px 20px;border-radius:100px;border:1.5px solid var(--linie);background:#fff;font-family:inherit;
  font-size:.89rem;font-weight:500;color:var(--grau);cursor:pointer;transition:.22s var(--e)}
.tabs button:hover{border-color:var(--navy);color:var(--navy)}
.tabs button[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.tafel{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(24px,3.4vw,50px);align-items:center;background:#fff;
  border:1px solid var(--linie);border-radius:var(--r-l);padding:clamp(24px,3.2vw,42px);box-shadow:var(--sch)}
@media(max-width:900px){.tafel{grid-template-columns:1fr}}
.tafel h3{font-size:clamp(1.25rem,2.1vw,1.7rem);margin-bottom:12px}
.liste{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:10px}
.liste li{display:flex;gap:10px;font-size:.93rem;font-weight:300;color:var(--text)}
.liste i{width:18px;height:18px;border-radius:50%;background:var(--blau);flex:0 0 auto;position:relative;margin-top:2px}
.liste i::after{content:'';position:absolute;left:6px;top:4px;width:4px;height:7px;border:solid #fff;
  border-width:0 1.7px 1.7px 0;transform:rotate(43deg)}
.schuss{border-radius:var(--r-m);overflow:hidden;border:1px solid var(--linie);box-shadow:0 16px 40px rgba(8,31,68,.11)}
.schuss img{width:100%}
.wolke{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.wolke span{background:var(--flaeche);border:1px solid var(--linie);border-radius:100px;padding:7px 14px;
  font-size:.8rem;color:var(--text)}
/* ---------- Player ---------- */
.player{background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);box-shadow:var(--sch);overflow:hidden}
.p-reiter{display:flex;gap:4px;padding:13px;border-bottom:1px solid var(--linie);overflow-x:auto;scrollbar-width:none}
.p-reiter::-webkit-scrollbar{display:none}
.p-reiter button{padding:10px 18px;border-radius:100px;border:0;background:transparent;font-family:inherit;
  font-size:.87rem;font-weight:500;color:var(--grau);cursor:pointer;white-space:nowrap;transition:.22s var(--e)}
.p-reiter button:hover{background:var(--flaeche);color:var(--navy)}
.p-reiter button[aria-selected="true"]{background:var(--rot);color:#fff;box-shadow:0 4px 12px rgba(227,26,62,.28)}
.p-body{padding:clamp(20px,2.8vw,34px)}
.p-kopf{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start;margin-bottom:22px}
.steuer{display:flex;gap:8px}
.steuer button{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--linie);background:#fff;cursor:pointer;
  display:grid;place-items:center;color:var(--navy);transition:.2s var(--e)}
.steuer button:hover{border-color:var(--rot);color:var(--rot)}
.canvas{position:relative;background:radial-gradient(circle,rgba(8,31,68,.06) 1px,transparent 1px) 0 0/18px 18px,#FBFCFE;
  border:1px solid var(--linie);border-radius:var(--r-m);padding:24px 16px;overflow-x:auto;scrollbar-width:none}
.canvas::-webkit-scrollbar{display:none}
.flow{display:flex;align-items:center;min-width:640px}
.node{flex:1 1 0;background:#fff;border:1.5px solid var(--linie);border-radius:var(--r-s);padding:11px 12px;
  box-shadow:0 2px 6px rgba(8,31,68,.05);position:relative;transition:.45s var(--e)}
.node.on{border-color:var(--rot);box-shadow:0 8px 22px rgba(227,26,62,.2);transform:translateY(-3px)}
.node.fertig{border-color:rgba(42,74,215,.42)}
.node .lbl{font-size:.59rem;letter-spacing:.11em;text-transform:uppercase;color:var(--grau-h);font-weight:600}
.node .nm{font-size:.83rem;font-weight:600;margin-top:4px;letter-spacing:-.02em}
.node .sub{font-size:.71rem;font-weight:300;color:var(--grau);margin-top:2px;line-height:1.35}
.node .ic{position:absolute;top:-10px;right:10px;width:21px;height:21px;border-radius:7px;background:var(--navy);
  display:grid;place-items:center;font-size:.58rem;color:#fff;font-weight:700;transition:.4s}
.node.on .ic{background:var(--verlauf-w)}
.node.fertig .ic{background:var(--blau)}
.verb{flex:0 0 42px;height:2px;background:var(--linie);position:relative}
.verb i{position:absolute;inset:0;width:0;background:var(--verlauf-w);transition:width.5s var(--e)}
.verb.on i{width:100%}
.verb .pk{position:absolute;left:0;top:50%;width:7px;height:7px;border-radius:50%;background:var(--rot);
  margin-top:-3.5px;opacity:0;box-shadow:0 0 0 4px rgba(227,26,62,.18)}
.verb.on .pk{animation:flug 1.05s var(--e) forwards}
@keyframes flug{0%{opacity:0;transform:translateX(0)}14%{opacity:1}86%{opacity:1}100%{opacity:0;transform:translateX(42px)}}
.p-schritt{display:grid;grid-template-columns:44px 1fr;gap:15px;margin-top:22px;min-height:80px}
.p-n{width:36px;height:36px;border-radius:50%;background:var(--rot);color:#fff;display:grid;place-items:center;
  font-size:.84rem;font-weight:700}
.p-t{font-size:clamp(1rem,1.55vw,1.18rem);font-weight:600;letter-spacing:-.02em;line-height:1.32}
.p-u{margin-top:6px;font-size:.91rem;font-weight:300;color:var(--grau);line-height:1.6;max-width:58ch}
.p-schritt.w .p-n.p-schritt.w .p-t.p-schritt.w .p-u{opacity:0;transform:translateY(7px)}
.p-n.p-t.p-u{transition:opacity.32s var(--e),transform.32s var(--e)}
.p-erg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px;padding-top:22px;border-top:1px solid var(--linie)}
@media(max-width:680px){.p-erg{grid-template-columns:1fr}}
.p-erg div{background:var(--flaeche);border-radius:var(--r-s);padding:15px 17px}
.p-erg b{display:block;font-size:1.28rem;font-weight:600;letter-spacing:-.03em;color:var(--navy)}
.p-erg small{display:block;margin-top:2px;font-size:.78rem;font-weight:300;color:var(--grau)}
/* ---------- KI ---------- */
.ki-schalter{display:inline-flex;padding:5px;border-radius:100px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.17);margin-bottom:32px}
.ki-schalter button{padding:11px 26px;border-radius:100px;border:0;background:transparent;font-family:inherit;
  font-size:.91rem;font-weight:500;color:rgba(255,255,255,.62);cursor:pointer;transition:.28s var(--e)}
.ki-schalter button[aria-selected="true"]{background:#fff;color:var(--navy)}
.ki-schalter button.g[aria-selected="true"]{background:var(--rot);color:#fff}
.ki-raster{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,3.4vw,52px);align-items:center}
@media(max-width:940px){.ki-raster{grid-template-columns:1fr}}
.ki-liste{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:12px}
.ki-liste li{display:flex;gap:12px;font-size:.95rem;font-weight:300;line-height:1.55;color:rgba(255,255,255,.84)}
.ki-liste i{width:20px;height:20px;border-radius:50%;background:var(--verlauf-w);flex:0 0 auto;margin-top:2px;position:relative}
.ki-liste i::after{content:'';position:absolute;left:7px;top:5px;width:4px;height:8px;border:solid #fff;
  border-width:0 1.8px 1.8px 0;transform:rotate(43deg)}
.ki-hinweis{margin-top:24px;padding:15px 19px;border-radius:var(--r-s);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);font-size:.86rem;font-weight:300;line-height:1.6;color:rgba(255,255,255,.74)}
.ki-hinweis b{color:#fff;font-weight:600}
.agent{background:#fff;border-radius:var(--r-l);border:1px solid var(--linie);box-shadow:0 26px 62px rgba(8,23,50,.36);
  overflow:hidden;color:var(--text)}
.ag-kopf{display:flex;align-items:center;gap:11px;padding:14px 19px;border-bottom:1px solid var(--linie);background:#FBFCFE}
.ag-kopf .av{width:29px;height:29px;border-radius:9px;background:var(--verlauf);display:grid;place-items:center;
  color:#fff;font-size:.76rem;font-weight:700;flex:0 0 auto}
.ag-kopf .nm{font-size:.89rem;font-weight:600}
.ag-kopf .st{margin-left:auto;font-size:.71rem;font-weight:600;color:var(--blau);background:var(--hellblau);
  padding:4px 11px;border-radius:100px}
.ag-body{padding:19px}
.ag-frage{font-size:.67rem;letter-spacing:.13em;text-transform:uppercase;color:var(--grau-h);font-weight:600;margin-bottom:9px}
.ag-eingabe{border:1.5px solid var(--linie);border-radius:var(--r-s);padding:14px 16px;font-size:.93rem;line-height:1.5;
  min-height:74px;background:#FBFCFE}
.ag-eingabe .cur{display:inline-block;width:2px;height:1em;background:var(--rot);vertical-align:-2px;margin-left:2px;
  animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.ag-pfeil{text-align:center;color:var(--grau-h);font-size:.77rem;margin:13px 0 11px}
.ag-s{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border-radius:var(--r-s);border:1px solid var(--linie);
  background:#fff;margin-bottom:9px;opacity:0;transform:translateY(8px);transition:.45s var(--e)}
.ag-s.on{opacity:1;transform:none;border-color:rgba(227,26,62,.3)}
.ag-s b{width:20px;height:20px;border-radius:50%;background:var(--verlauf-w);flex:0 0 auto;margin-top:1px;position:relative}
.ag-s b::after{content:'';position:absolute;left:7px;top:5px;width:4px;height:8px;border:solid #fff;
  border-width:0 1.8px 1.8px 0;transform:rotate(43deg)}
.ag-s .tx{font-size:.86rem;font-weight:500;line-height:1.4}
.ag-s .tx small{display:block;font-size:.77rem;font-weight:300;color:var(--grau);margin-top:2px}
/* ---------- Systeme ---------- */
.psys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(13px,1.7vw,18px);margin-bottom:40px;width:100%}
@media(max-width:860px){.psys{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.psys{grid-template-columns:minmax(0,1fr)}}
.psys a{background:#fff;border:1px solid var(--linie);border-radius:var(--r-m);padding:22px 20px;text-decoration:none;
  color:inherit;transition:.25s var(--e);position:relative;overflow:hidden}
.psys a::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--verlauf);opacity:0;transition:.25s}
.psys a:hover{transform:translateY(-4px);box-shadow:var(--sch-h)}
.psys a:hover::before{opacity:1}
.psys .wm{font-size:1.08rem;font-weight:700;letter-spacing:-.03em;color:var(--navy)}
.psys .ka{display:inline-block;margin-top:6px;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--rot);background:var(--rosa);border-radius:100px;padding:3px 10px}
.psys p{margin-top:11px;font-size:.84rem;font-weight:300;color:var(--grau);line-height:1.55}
.suche{max-width:520px;width:100%}
.suche input{width:100%;padding:16px 22px;border-radius:100px;border:1.5px solid var(--linie);font-family:inherit;
  font-size:.97rem;font-weight:300;color:var(--navy);background:#fff}
.suche input:focus{outline:0;border-color:var(--rot);box-shadow:0 0 0 4px rgba(227,26,62,.11)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;min-width:0}
.chip{padding:9px 16px;border-radius:100px;border:1px solid var(--linie);background:#fff;font-size:.86rem;
  color:var(--text);text-decoration:none;max-width:100%;transition:.2s var(--e)}
.chip:hover{border-color:var(--rot);color:var(--rot);transform:translateY(-1px)}
.chip.weg{display:none}
/* ---------- Karten ---------- */
.karten{display:grid;gap:clamp(15px,1.9vw,20px)}
.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:940px){.k3 .k4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.k3 .k4{grid-template-columns:minmax(0,1fr)}}
.karte{background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);padding:clamp(22px,2.6vw,30px);transition:.25s var(--e)}
.karte:hover{transform:translateY(-4px);box-shadow:var(--sch-h)}
.karte .ico{width:44px;height:44px;border-radius:13px;background:var(--hellblau);display:grid;place-items:center;
  font-size:1.16rem;margin-bottom:16px}
.karte h3{margin-bottom:8px}
.karte p{font-size:.91rem;font-weight:300;color:var(--grau);line-height:1.62}
.karte a{display:inline-block;margin-top:13px;color:var(--rot);font-size:.87rem;font-weight:600;text-decoration:none}
.karte a:hover{text-decoration:underline}
.stimme{background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);padding:clamp(22px,2.6vw,30px);
  display:flex;flex-direction:column;gap:16px}
.stimme p{font-size:.96rem;font-weight:300;line-height:1.68;color:var(--text);flex:1}
.stimme p b{font-weight:600}
.person{display:flex;align-items:center;gap:12px}
.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:.83rem;font-weight:700;
  color:#fff;flex:0 0 auto;letter-spacing:-.02em}
.person .nm{font-size:.88rem;font-weight:600;line-height:1.25}
.person .ro{font-size:.78rem;font-weight:300;color:var(--grau)}
.fall{background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);overflow:hidden;transition:.25s var(--e);
  text-decoration:none;display:block;color:inherit}
.fall:hover{transform:translateY(-4px);box-shadow:var(--sch-h)}
.fall .bild{height:120px;display:grid;place-items:center;background:linear-gradient(135deg,var(--navy),var(--blau-d));
  color:#fff;font-weight:700;font-size:1.14rem;letter-spacing:-.02em}
.fall .txt{padding:22px}
.fall .meta{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px}
.fall .meta span{font-size:.71rem;font-weight:500;background:var(--flaeche);border-radius:100px;padding:4px 11px;color:var(--grau)}
.fall h3{font-size:1.02rem;margin-bottom:7px}
.fall p{font-size:.87rem;font-weight:300;color:var(--grau);line-height:1.6}
/* ---------- ROI ---------- */
.roi-box{background:linear-gradient(135deg,var(--navy),var(--blau-d));border-radius:var(--r-l);
  padding:clamp(28px,3.8vw,54px);color:#fff;display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,3vw,46px);
  align-items:center;box-shadow:0 24px 58px rgba(8,31,68,.24);position:relative;overflow:hidden}
.roi-box::after{content:'';position:absolute;right:-140px;top:-140px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(227,26,62,.28),transparent 68%)}
.roi-box>*{position:relative;z-index:2}
@media(max-width:860px){.roi-box{grid-template-columns:1fr}}
.roi-box h2{color:#fff}
.roi-box .lead{color:rgba(255,255,255,.72);margin-top:13px}
.rechner{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-m);padding:25px}
.rechner label{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);
  font-weight:600;margin-bottom:9px}
.rechner input[type=range]{width:100%;accent-color:var(--rot)}
.rechner .wert{font-size:1.55rem;font-weight:600;letter-spacing:-.03em;margin-bottom:13px}
.rechner .out{margin-top:21px;padding-top:19px;border-top:1px solid rgba(255,255,255,.15)}
.rechner .gr{font-size:clamp(1.85rem,3.2vw,2.4rem);font-weight:700;letter-spacing:-.04em}
.rechner small{display:block;font-size:.81rem;font-weight:300;color:rgba(255,255,255,.62);margin-top:3px}
/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{list-style:none;cursor:pointer;padding:21px 44px 21px 0;font-size:1.01rem;font-weight:500;position:relative;
  letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:8px;top:26px;width:9px;height:9px;border-right:2px solid var(--rot);
  border-bottom:2px solid var(--rot);transform:rotate(45deg);transition:.25s var(--e)}
.faq details[open] summary::after{transform:rotate(-135deg);top:30px}
.faq p{padding:0 0 23px;font-size:.94rem;font-weight:300;color:var(--grau);line-height:1.7;max-width:68ch}
/* ---------- Schluss / Footer ---------- */
.schluss-box{background:linear-gradient(150deg,var(--navy),var(--blau-d));border-radius:var(--r-l);
  padding:clamp(36px,4.6vw,68px);text-align:center;color:#fff;position:relative;overflow:hidden}
.schluss-box::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 300px at 50% 0%,rgba(227,26,62,.26),transparent 70%)}
.schluss-box>*{position:relative;z-index:2}
.schluss-box h2{color:#fff;max-width:20ch;margin:0 auto}
.schluss-box .lead{color:rgba(255,255,255,.74);max-width:48ch;margin:16px auto 0}
footer{background:var(--tief);color:rgba(255,255,255,.55);padding:60px 0 32px;font-size:.87rem;font-weight:300}
.f-grid{display:grid;grid-template-columns:1.45fr.9fr.9fr.9fr 1.6fr;gap:26px}
.f-grid>div{min-width:0}
@media(max-width:960px){.f-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:600px){.f-grid{grid-template-columns:1fr 1fr}}
footer h6{font-size:.67rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.42);font-weight:600;margin-bottom:13px}
footer a{color:rgba(255,255,255,.6);text-decoration:none;display:block;padding:4px 0}
footer a:hover{color:#fff}
footer .flogo{height:38px;width:auto;margin-bottom:16px}
.f-kontakt{background:rgba(255,255,255,.06);border-radius:var(--r-m);padding:19px;min-width:0}
.f-kontakt .nm{color:#fff}
.f-kontakt .ro{color:rgba(255,255,255,.55)}
.awards{display:flex;flex-wrap:wrap;align-items:center;gap:13px;margin-top:15px}
.awards span{background:#fff;border-radius:12px;padding:11px 17px;display:grid;place-items:center;transition:.25s var(--e)}
.awards span:hover{transform:translateY(-2px)}
.awards img{max-height:29px;width:auto;opacity:.85}
.awards img .rund{max-height:44px}
.f-unten{margin-top:38px;padding-top:21px;border-top:1px solid rgba(255,255,255,.1);display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.81rem}
.f-unten a{display:inline}
.sticky{position:fixed;right:20px;bottom:20px;z-index:90;background:#fff;border:1px solid var(--linie);
  border-radius:var(--r-m);box-shadow:var(--sch-h);padding:15px 17px;max-width:335px;display:flex;gap:12px;align-items:center;
  opacity:0;transform:translateY(16px);pointer-events:none;transition:.5s var(--e)}
.sticky.da{opacity:1;transform:none;pointer-events:auto}
.sticky p{font-size:.84rem;font-weight:600;line-height:1.4}
.sticky small{display:block;font-size:.75rem;font-weight:300;color:var(--grau);margin-top:1px}
.sticky .zu{position:absolute;top:5px;right:8px;background:none;border:0;color:var(--grau-h);cursor:pointer;font-size:1rem;padding:4px}
@media(max-width:640px){.sticky{left:16px;right:16px;max-width:none;bottom:16px}}
/* ---------- Stempel ---------- */
.stempel{position:absolute;top:calc(var(--kopfh,110px) + clamp(10px,2vw,26px));
  right:clamp(16px,3.6vw,54px);z-index:6;width:clamp(152px,13.5vw,186px);aspect-ratio:1;
  border-radius:50%;display:grid;place-items:center;text-align:center;
  border:1.5px solid rgba(255,255,255,.26);background:rgba(255,255,255,.05);backdrop-filter:blur(10px);
  transform:rotate(-9deg) scale(.72);opacity:0;
  transition:opacity.8s var(--e),transform.8s var(--e);pointer-events:none}
.stempel::before{content:'';position:absolute;inset:7px;border-radius:50%;
  border:1px dashed rgba(255,255,255,.2)}
.stempel.da{opacity:1;transform:rotate(-9deg) scale(1)}
.st-innen{position:relative;z-index:2;font-size:clamp(.6rem,.74vw,.68rem);font-weight:600;line-height:1.38;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.84);padding:0 10px}
.st-innen em{display:block;font-style:normal;margin-top:8px;padding-top:7px;font-size:.86em;
  letter-spacing:.1em;color:rgba(255,255,255,.6);
  border-top:1px solid rgba(255,255,255,.2)}
.st-innen b{display:block;font-size:1.4em;letter-spacing:.16em;margin-bottom:6px;
  background:var(--verlauf-w);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:860px){.stempel{width:118px;right:14px;top:calc(var(--kopfh,110px) + 10px)}
.st-innen{font-size:.52rem;padding:0 8px}}
@media(max-width:520px){.stempel{display:none}}
/* Wechselzeile */
.kz.z3{transition:opacity.45s var(--e),transform.45s var(--e)}
.kz.z3.tausch{opacity:0;transform:translateY(-12px)}
/* ---------- Funktionsweise: Klammer über vier Sektionen ---------- */
.fw{position:relative}
.fw-rail{position:fixed;left:clamp(14px,2.2vw,34px);top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:2px;opacity:0;pointer-events:none;transition:opacity.45s var(--e)}
.fw-rail.da{opacity:1;pointer-events:auto}
.fw-rail a{display:flex;align-items:center;gap:11px;text-decoration:none;padding:7px 4px;position:relative}
.fw-rail .pkt{width:9px;height:9px;border-radius:50%;background:var(--linie);flex:0 0 auto;
  transition:.3s var(--e);box-shadow:0 0 0 0 rgba(227,26,62,.3)}
.fw-rail .tx{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grau-h);white-space:nowrap;transition:.3s var(--e);opacity:.75}
.fw-rail a.an .pkt{background:var(--verlauf-w);box-shadow:0 0 0 5px rgba(227,26,62,.14)}
.fw-rail a.an .tx{color:var(--navy);opacity:1}
.fw-rail a:hover.tx{color:var(--navy);opacity:1}
.fw-rail::before{content:'';position:absolute;left:4px;top:12px;bottom:12px;width:1px;background:var(--linie);z-index:-1}
@media(max-width:1180px){.fw-rail .tx{display:none}}
@media(max-width:760px){.fw-rail{display:none}}
/* ---------- Überblick der drei Schritte ---------- */
.ueb-drei{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:clamp(10px,1.6vw,20px);align-items:stretch}
@media(max-width:940px){.ueb-drei{grid-template-columns:1fr;gap:14px}.ueb-pf{transform:rotate(90deg);margin:0 auto}}
.uk{background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);padding:clamp(22px,2.6vw,32px);
  box-shadow:var(--sch);position:relative;overflow:hidden;transition:transform.35s var(--e),box-shadow.35s var(--e)}
.uk::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--verlauf-w);
  transform:scaleX(0);transform-origin:left;transition:transform.5s var(--e)}
.uk.an{transform:translateY(-5px);box-shadow:var(--sch-h)}
.uk.an::before{transform:scaleX(1)}
.uk .nr{display:inline-flex;align-items:center;gap:9px;font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grau-h);margin-bottom:14px;transition:color.3s}
.uk.an .nr{color:var(--rot)}
.uk .nr b{width:24px;height:24px;border-radius:50%;background:var(--flaeche);color:var(--grau);
  display:grid;place-items:center;font-size:.68rem;transition:.3s var(--e)}
.uk.an .nr b{background:var(--verlauf-w);color:#fff}
.uk h3{font-size:clamp(1.08rem,1.7vw,1.3rem);margin-bottom:8px}
.uk p{font-size:.9rem;font-weight:300;color:var(--grau);line-height:1.6}
.uk .bild{height:96px;margin:0 0 16px;border-radius:var(--r-s);background:var(--flaeche);
  display:grid;place-items:center;overflow:hidden;position:relative}
.uk .bild img{width:44px;height:auto}
.ueb-pf{display:grid;place-items:center;color:var(--grau-h)}
.ueb-fuss{margin-top:clamp(26px,3vw,38px);text-align:center;font-size:clamp(1rem,1.7vw,1.28rem);
  font-weight:600;letter-spacing:-.025em;color:var(--navy)}
.ueb-fuss b{background:var(--verlauf-w);-webkit-background-clip:text;background-clip:text;color:transparent}
/* kleine Visuals im Überblick */
.mini-netz{position:relative;width:100%;height:100%}
.mini-netz i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--linie);
  transition:background.4s var(--e)}
.uk.an .mini-netz i{background:var(--rot)}
.mini-netz img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px}
.mini-spr{display:flex;flex-direction:column;align-items:center;gap:5px}
.mini-spr span{font-size:.6rem;font-weight:600;color:var(--grau);background:#fff;border:1px solid var(--linie);
  border-radius:100px;padding:3px 9px}
.mini-spr b{font-size:.63rem;font-weight:700;color:#fff;background:var(--verlauf-w);border-radius:100px;padding:4px 11px}
.mini-ab{display:flex;flex-direction:column;gap:4px;width:76%}
.mini-ab i{height:11px;border-radius:4px;background:var(--linie);transition:background.4s var(--e)}
.uk.an .mini-ab i:last-child{background:var(--verlauf-w)}
/* ---------- Beruhigung: nichts muss verändert werden ---------- */
.nix{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(22px,3vw,32px)}
.nix span{display:inline-flex;align-items:center;gap:10px;padding:11px 20px 11px 13px;border-radius:100px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  font-size:.9rem;font-weight:600;color:#fff;letter-spacing:-.01em}
.nix i{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.14);flex:0 0 auto;
  display:grid;place-items:center;font-style:normal;font-size:.66rem;font-weight:700;color:rgba(255,255,255,.85)}
@media(max-width:640px){.nix span{font-size:.82rem;padding:9px 15px 9px 10px}}
.nix-satz{margin-top:clamp(16px,2.2vw,22px);text-align:center;font-size:clamp(.92rem,1.3vw,1.06rem);
  font-weight:300;color:rgba(255,255,255,.66);max-width:60ch;margin-left:auto;margin-right:auto;line-height:1.6}
.nix-satz b{color:#fff;font-weight:600}
.uk .wer{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 11px;border-radius:100px;margin-bottom:12px}
.uk .wer.wir{background:var(--hellblau);color:var(--blau-d)}
.uk .wer.sie{background:rgba(227,26,62,.10);color:var(--rot)}
.uk .nr{margin-bottom:8px}
/* ---------- Endloser Zufluss ---------- */
.zufluss{position:relative;width:100%;aspect-ratio:1.3/1;max-width:430px;margin:0 auto;overflow:hidden}
.zf-mitte{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:82px;height:82px;
  border-radius:50%;background:#fff;border:1px solid var(--linie);display:grid;place-items:center;z-index:4;
  box-shadow:0 12px 30px rgba(8,31,68,.14)}
.zf-mitte img{width:44px}
.zf-puls{position:absolute;left:50%;top:50%;width:82px;height:82px;border-radius:50%;
  transform:translate(-50%,-50%);border:2px solid var(--rot);opacity:0;z-index:3;
  animation:zfpuls 3s var(--e) infinite}
.zf-puls:nth-of-type(2){animation-delay:1.5s}
@keyframes zfpuls{0%{transform:translate(-50%,-50%) scale(1);opacity:.42}100%{transform:translate(-50%,-50%) scale(2.6);opacity:0}}
.zc{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:6px;white-space:nowrap;
  background:#fff;border:1.5px solid var(--linie);border-radius:100px;padding:6px 12px;
  font-size:.73rem;font-weight:600;color:var(--navy);box-shadow:0 3px 10px rgba(8,31,68,.08);
  will-change:transform,opacity;z-index:2}
.zc svg.zc .dot.zc .dat{flex:0 0 auto}
.zc .dot{width:8px;height:8px;border-radius:3px;display:block}
.zc .dat{font-size:.56rem;font-weight:800;letter-spacing:.02em;color:#fff;border-radius:3px;padding:2px 4px;line-height:1}
@media(max-width:520px){.zc{font-size:.64rem;padding:5px 10px}.zf-mitte{width:64px;height:64px}.zf-mitte img{width:34px}
.zf-puls{width:64px;height:64px}}
/* ---------- Übersetzen: unterschiedliche Strukturen ---------- */
.ueb3{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;min-height:334px;justify-content:center}
.u3-quellen{position:relative;display:flex;flex-direction:column;gap:7px;width:100%;max-width:300px;
  max-height:420px;transition:max-height.55s var(--e),opacity.4s var(--e)}
.u3-quellen.zu{max-height:0;opacity:0;overflow:hidden}
.u3-k{background:#fff;border:1.5px solid var(--linie);border-radius:var(--r-s);padding:9px 12px;
  opacity:0;transform:translateY(10px);transition:.5s var(--e)}
.u3-k.da{opacity:1;transform:none}
.u3-k.weg{opacity:0;transform:translateY(-10px) scale(.94)}
.u3-k small{display:block;font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--grau-h);
  font-weight:700;margin-bottom:5px}
.u3-z{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:2px 0}
.u3-z em{font-style:normal;font-size:.68rem;font-weight:600;color:var(--grau);letter-spacing:-.01em}
.u3-z b{font-size:.74rem;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.u3-k.pass{border-color:rgba(227,26,62,.45);box-shadow:0 6px 18px rgba(227,26,62,.12)}
.u3-k.pass .u3-z em .u3-k.pass .u3-z b{color:var(--rot)}
.u3-frage{position:absolute;right:-8px;top:50%;transform:translate(50%,-50%) rotate(-4deg);
  background:var(--rot);color:#fff;font-size:.68rem;font-weight:700;padding:6px 12px;border-radius:100px;
  white-space:nowrap;opacity:0;transition:.5s var(--e);box-shadow:0 6px 16px rgba(227,26,62,.32)}
.u3-frage.da{opacity:1}
@media(max-width:1180px){.u3-frage{right:auto;left:50%;top:-10px;transform:translate(-50%,-100%) rotate(-3deg)}}
.u3-pfeil{display:flex;align-items:center;gap:9px;opacity:0;transform:translateY(-6px);transition:.5s var(--e)}
.u3-pfeil.da{opacity:1;transform:none}
.u3-marke{width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--linie);
  display:grid;place-items:center;box-shadow:0 5px 14px rgba(8,31,68,.12)}
.u3-marke img{width:20px}
.u3-lab{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grau-h)}
.u3-ziel{width:100%;max-width:300px;background:var(--navy);border-radius:var(--r-s);padding:11px 13px;
  opacity:0;transform:scale(.92);transition:.55s var(--e);box-shadow:0 14px 32px rgba(8,31,68,.28)}
.u3-ziel.da{opacity:1;transform:none}
.u3-ziel small{display:block;font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.55);font-weight:700;margin-bottom:6px}
.u3-ziel .u3-z em{color:rgba(255,255,255,.6)}
.u3-ziel .u3-z b{color:#fff}
/* ---------- Baustein 03: Baukasten ---------- */
.bau{width:100%;display:flex;flex-direction:column;gap:12px}
.bau-palette{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding-bottom:11px;
  border-bottom:1px dashed var(--linie)}
.bp{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:600;color:var(--grau);
  background:var(--flaeche);border:1px solid var(--linie);border-radius:100px;padding:5px 11px;
  transition:.3s var(--e)}
.bp i{width:8px;height:8px;border-radius:3px;background:var(--grau-h);flex:0 0 auto;transition:.3s var(--e)}
.bp.an{background:#fff;border-color:var(--rot);color:var(--rot);transform:translateY(-2px);
  box-shadow:0 5px 14px rgba(227,26,62,.18)}
.bp.an i{background:var(--rot)}
.bau-flow{display:flex;flex-direction:column;gap:0;min-height:250px}
.bz{display:flex;align-items:center;gap:11px;background:#fff;border:1.5px solid var(--linie);
  border-radius:var(--r-s);padding:9px 12px;opacity:0;transform:translateY(9px) scale(.97);
  transition:.45s var(--e)}
.bz.da{opacity:1;transform:none}
.bz.neu{border-color:var(--rot);box-shadow:0 8px 20px rgba(227,26,62,.16)}
.bz b{width:24px;height:24px;border-radius:7px;flex:0 0 auto;display:grid;place-items:center;
  font-size:.66rem;font-weight:800;color:#fff}
.bz .tx{min-width:0}
.bz .tx strong{display:block;font-size:.79rem;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.bz .tx small{display:block;font-size:.7rem;font-weight:300;color:var(--grau);margin-top:1px;line-height:1.3}
.bvb{width:2px;height:12px;background:var(--linie);margin:4px 0 4px 23px;opacity:0;transition:.35s var(--e)}
.bvb.da{opacity:1;background:var(--rot)}
.bau-fertig{text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blau-d);background:var(--hellblau);border-radius:100px;padding:8px 14px;
  opacity:0;transform:translateY(6px);transition:.5s var(--e)}
.bau-fertig.da{opacity:1;transform:none}
@media(max-width:520px){.bp{font-size:.62rem;padding:4px 9px}.bz .tx strong{font-size:.74rem}}
.mw{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.mwk .beleg-k{margin-top:18px;padding-top:15px;border-top:1px solid var(--linie);
  font-size:.85rem;font-weight:300;color:var(--grau);line-height:1.55}
.mwk .beleg-k b{color:var(--navy);font-weight:600}
.mw-fuss{margin-top:clamp(28px,3.4vw,42px);text-align:center;font-size:clamp(1rem,1.7vw,1.3rem);
  font-weight:600;letter-spacing:-.025em;color:var(--navy)}
.mw-fuss b{background:var(--verlauf-w);-webkit-background-clip:text;background-clip:text;color:transparent}
.bk-hinweis{font-style:normal;font-size:.68rem;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--grau-h);margin-left:2px}
.wahl.bunt{max-height:none}
.wahl.bunt button{font-size:.85rem;padding:9px 15px}
/* ---------- Ergebnis: Stundenverschiebung ---------- */
.ebar{width:100%;display:flex;flex-direction:column;gap:11px}
.eb-zeile{display:flex;flex-direction:column;gap:5px}
.eb-lab{font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grau-h)}
.eb-track{display:flex;height:48px;border-radius:var(--r-s);overflow:hidden;border:1px solid var(--linie)}
.eb-v .eb-s{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.79rem;font-weight:500;
  white-space:nowrap;overflow:hidden;transition:width 1.2s var(--e)}
.eb-v{background:var(--flaeche);color:var(--grau)}
.eb-s{background:var(--rot);color:#fff}
.eb-v b .eb-s b{font-weight:800;font-size:.92rem}
.eb-delta{margin-top:8px;display:flex;align-items:center;gap:14px;background:var(--hellblau);
  border-radius:var(--r-m);padding:15px 18px}
.eb-zahl{font-size:clamp(2.1rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.05em;color:var(--rot);line-height:1;
  flex:0 0 auto}
.eb-text{font-size:.88rem;font-weight:300;color:var(--blau-d);line-height:1.5}
.eb-text b{font-weight:700;color:var(--navy)}
.mwk{display:flex;flex-direction:column}
.mwk p{margin-bottom:20px}
.kz-box{margin-top:auto;padding:15px 17px;min-height:78px;border-radius:var(--r-s);background:var(--flaeche);
  display:flex;align-items:center;gap:14px}
.kz-w{font-size:clamp(1.5rem,2.4vw,1.85rem);font-weight:800;letter-spacing:-.045em;color:var(--rot);
  line-height:1;flex:0 0 auto;white-space:nowrap}
.kz-t{font-size:.8rem;font-weight:400;color:var(--grau);line-height:1.4}
.schuss-legende{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);
  max-width:1080px;margin:clamp(96px,10vw,128px) auto 0;text-align:left}
@media(max-width:860px){.schuss-legende{grid-template-columns:1fr;margin-top:clamp(70px,12vw,100px)}}
.schuss-legende div{padding-left:15px;border-left:3px solid var(--rot)}
.schuss-legende b{display:block;font-size:.95rem;font-weight:700;color:var(--navy);letter-spacing:-.02em;margin-bottom:5px}
.schuss-legende span{display:block;font-size:.87rem;font-weight:300;color:var(--grau);line-height:1.55}
/* ---------- Lesefortschritt ---------- */
.fortleiste{position:fixed;top:var(--kopfh,110px);left:0;right:0;height:3px;z-index:89;pointer-events:none}
.fortleiste i{display:block;height:100%;width:0;background:var(--verlauf-w);
  box-shadow:0 0 12px rgba(227,26,62,.5);transition:width.1s linear}
/* ---------- Wir ersetzen nichts ---------- */
.ersetz{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.ersetz::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 380px at 50% 0%,rgba(227,26,62,.18),transparent 68%)}
.ersetz .wrap{position:relative;z-index:2}
.ersetz h2{color:#fff}
.ggn{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,2.4vw,32px);align-items:stretch;margin-top:clamp(34px,4vw,54px)}
@media(max-width:900px){.ggn{grid-template-columns:1fr}}
.gk{border-radius:var(--r-l);padding:clamp(24px,2.8vw,34px);border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.045)}
.gk.gut{background:#fff;color:var(--navy);border-color:#fff;box-shadow:0 22px 54px rgba(0,0,0,.3)}
.gk-logo{height:30px;width:auto;margin-bottom:16px;display:block}
.gk-fazit{margin-top:20px;padding-top:17px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.88rem;font-weight:300;line-height:1.6;color:rgba(255,255,255,.62)}
.gk-fazit.hell{border-top-color:var(--linie);color:var(--grau)}
.gk .tag{display:inline-block;padding:5px 14px;border-radius:100px;font-size:.71rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.gk.schlecht .tag{background:rgba(255,255,255,.12);color:rgba(255,255,255,.7)}
.gk.gut .tag{background:var(--verlauf-w);color:#fff}
.gk h3{font-size:clamp(1.14rem,1.9vw,1.42rem);margin-bottom:16px}
.gk.schlecht h3{color:#fff}
.gl{list-style:none;display:flex;flex-direction:column;gap:12px}
.gl li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;font-weight:300;line-height:1.5;
  position:relative;transition:opacity.5s var(--e)}
.gk.schlecht .gl li{color:rgba(255,255,255,.75)}
.gk.gut .gl li{color:var(--text)}
.gl li i{width:21px;height:21px;border-radius:50%;flex:0 0 auto;margin-top:1px;display:grid;place-items:center;
  font-style:normal;font-size:.7rem;font-weight:700;transition:.4s var(--e)}
.gk.schlecht .gl li i{background:rgba(255,255,255,.14);color:rgba(255,255,255,.65)}
.gk.gut .gl li i{background:var(--verlauf-w);color:#fff}
.gl li span{position:relative;display:inline-block;font-weight:600;font-size:.99rem;letter-spacing:-.02em}
.gl li small{display:block;font-size:.85rem;font-weight:300;margin-top:2px;line-height:1.45}
.gk.schlecht .gl li small{color:rgba(255,255,255,.5)}
.gk.gut .gl li small{color:var(--grau)}
.gk.schlecht .gl li span{color:#fff}
.gk.schlecht .gl li span{background-image:linear-gradient(#E8556A,#E8556A);background-repeat:no-repeat;
  background-size:0% 2px;background-position:0 56%;transition:background-size.6s var(--e)}
.gk.schlecht.an .gl li span{background-size:100% 2px}
.gk.schlecht.an .gl li{opacity:.72}
.gk.schlecht .gl li:nth-child(2) span::after{transition-delay:.14s}
.gk.schlecht .gl li:nth-child(3) span::after{transition-delay:.28s}
.gk.schlecht .gl li:nth-child(4) span::after{transition-delay:.42s}
.gk.schlecht .gl li:nth-child(5) span::after{transition-delay:.56s}
.gk.gut .gl li{opacity:0;transform:translateX(-10px);transition:opacity.5s var(--e),transform.5s var(--e)}
.gk.gut.an .gl li{opacity:1;transform:none}
.gk.gut .gl li:nth-child(2){transition-delay:.12s}
.gk.gut .gl li:nth-child(3){transition-delay:.24s}
.gk.gut .gl li:nth-child(4){transition-delay:.36s}
.gk.gut .gl li:nth-child(5){transition-delay:.48s}
.ggn-mitte{display:grid;place-items:center}
.ggn-mitte span{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;font-size:.78rem;font-weight:700;
  letter-spacing:.06em;color:rgba(255,255,255,.7)}
@media(max-width:900px){.ggn-mitte{padding:6px 0}}
.ersetz-satz{margin-top:clamp(30px,3.6vw,46px);text-align:center;font-size:clamp(1.1rem,2.1vw,1.6rem);
  font-weight:600;letter-spacing:-.03em;color:#fff}
.ersetz-satz b{background:var(--verlauf-w);-webkit-background-clip:text;background-clip:text;color:transparent}
/* ---------- HR wird strategisch ---------- */
.strat-bar{margin-top:clamp(26px,3vw,38px);border-radius:var(--r-m);overflow:hidden;border:1px solid var(--linie);
  background:#fff;box-shadow:var(--sch)}
.sb-zeile{display:flex;align-items:center;height:66px;position:relative}
.sb-zeile+.sb-zeile{border-top:1px solid var(--linie)}
.sb-lab{position:absolute;left:16px;top:8px;font-size:.66rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grau-h);z-index:3}
.sb-a.sb-b{height:100%;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:600;
  transition:width 1.1s var(--e);white-space:nowrap;overflow:hidden}
.sb-a{background:var(--flaeche);color:var(--grau)}
.sb-b{background:var(--verlauf-w);color:#fff}
.strat-note{margin-top:14px;font-size:.85rem;font-weight:300;color:var(--grau)}
/* ---------- Einsatzfelder (Bento) ---------- */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,20px);margin-bottom:clamp(28px,3.4vw,44px)}
@media(max-width:980px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.bento{grid-template-columns:minmax(0,1fr)}}
.bf{background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);padding:clamp(20px,2.4vw,28px);
  transition:transform.25s var(--e),box-shadow.25s var(--e),border-color.25s;position:relative;overflow:hidden}
.bf::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--verlauf-w);
  transform:scaleX(0);transform-origin:left;transition:transform.35s var(--e)}
.bf:hover{transform:translateY(-4px);box-shadow:var(--sch-h)}
.bf:hover::before{transform:scaleX(1)}
.bf .ic{width:38px;height:38px;border-radius:11px;background:var(--hellblau);display:grid;place-items:center;
  font-size:1.05rem;margin-bottom:14px}
.bf b{display:block;font-size:1rem;font-weight:600;letter-spacing:-.02em;margin-bottom:7px}
.bf p{font-size:.87rem;font-weight:300;color:var(--grau);line-height:1.55}
.bento-hinweis{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:clamp(24px,3vw,36px);
  font-size:.9rem;font-weight:300;color:var(--grau);text-align:center;flex-wrap:wrap}
.bento-hinweis b{font-weight:600;color:var(--navy)}
/* ---------- Perspektiven ---------- */
.persp-schalter{display:inline-flex;padding:5px;border-radius:100px;background:#fff;border:1.5px solid var(--linie);
  box-shadow:var(--sch);margin-bottom:34px}
.persp-schalter button{padding:12px 24px;border-radius:100px;border:0;background:transparent;font-family:inherit;
  font-size:.92rem;font-weight:500;color:var(--grau);cursor:pointer;transition:.28s var(--e);white-space:nowrap}
.persp-schalter button[aria-selected="true"]{background:var(--navy);color:#fff}
.persp-schalter button.r[aria-selected="true"]{background:var(--rot);color:#fff}
@media(max-width:520px){.persp-schalter{flex-direction:column;border-radius:var(--r-m);width:100%}
.persp-schalter button{border-radius:var(--r-s)}}
.persp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,30px);align-items:start}
@media(max-width:900px){.persp{grid-template-columns:1fr}}
.persp-links{background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);padding:clamp(26px,3vw,38px);
  box-shadow:var(--sch)}
.persp-links .rolle{display:inline-flex;align-items:center;gap:9px;font-size:.73rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rot);background:var(--rosa);padding:5px 13px;border-radius:100px;margin-bottom:16px}
.persp-links h3{font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.16;margin-bottom:12px}
.persp-links .satz{font-size:.98rem;font-weight:300;line-height:1.65;color:var(--grau)}
.pl{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:14px}
.pl li{display:flex;gap:13px}
.pl i{width:26px;height:26px;border-radius:9px;background:var(--hellblau);color:var(--blau-d);flex:0 0 auto;
  display:grid;place-items:center;font-style:normal;font-size:.78rem;font-weight:700}
.pl b{display:block;font-size:.96rem;font-weight:600;letter-spacing:-.02em}
.pl small{display:block;font-size:.88rem;font-weight:300;color:var(--grau);line-height:1.55;margin-top:2px}
.persp-rechts{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,30px)}
.p-zahl{background:linear-gradient(150deg,var(--navy),var(--blau-d));border-radius:var(--r-l);
  padding:clamp(26px,3vw,38px);color:#fff;position:relative;overflow:hidden}
.p-zahl::after{content:'';position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(227,26,62,.42),transparent 68%)}
.p-zahl>*{position:relative;z-index:2}
.p-zahl .gr{font-size:clamp(2.4rem,4.6vw,3.3rem);font-weight:700;letter-spacing:-.045em;line-height:1}
.p-zahl .un{margin-top:10px;font-size:.98rem;font-weight:300;color:rgba(255,255,255,.76);line-height:1.6;max-width:36ch}
.p-zahl .fuss{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);font-size:.85rem;
  font-weight:300;color:rgba(255,255,255,.62)}
.p-zitat{background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);padding:clamp(24px,2.8vw,32px)}
.p-zitat p{font-size:1.02rem;font-weight:300;line-height:1.66;color:var(--text)}
.p-zitat p b{font-weight:600}
.p-zitat .person{margin-top:16px}
/* ---------- Hero: Systeme werden zum Logo ---------- */
.hero3{position:relative;height:100svh;min-height:600px;background:#02101F;padding:0;margin-top:calc(-1 * var(--kopfh,110px))}
.hero3-sticky{position:relative;height:100%;overflow:hidden;display:block;
  background:radial-gradient(120% 92% at 50% 40%,
    rgba(42,74,215,calc(.10 +.18*var(--hell,0))) 0%,
    rgba(8,31,68,calc(.28 +.58*var(--hell,0))) 44%,
    rgba(2,16,31,1) 80%)}
.h-schein{position:absolute;left:50%;top:42%;width:min(82vw,820px);height:min(82vw,820px);
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;filter:blur(50px);
  background:radial-gradient(circle,rgba(216,64,79,calc(.04 +.28*var(--hell,0))) 0%,
    rgba(42,74,215,calc(.03 +.20*var(--hell,0))) 44%,transparent 70%)}
.raster-hg{position:absolute;inset:0;pointer-events:none;opacity:calc(.16 +.40*var(--hell,0));
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask:radial-gradient(circle at 50% 42%,#000 0%,transparent 68%);
  mask:radial-gradient(circle at 50% 42%,#000 0%,transparent 68%)}
.h-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.h-feld{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hp{position:absolute;left:0;top:0;white-space:nowrap;will-change:transform,opacity;z-index:2}
.hp .pkt{display:none}
.hp .nm{font-size:.76rem;font-weight:500;color:rgba(255,255,255,.72);letter-spacing:-.01em;
  display:flex;align-items:center;gap:6px}
.hp.marke .nm{font-weight:600;color:rgba(255,255,255,.9);font-size:.78rem}
.hp .nm b{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6;flex:0 0 auto}
@media(max-width:760px){.hp .nm{font-size:.6rem}.hp.marke .nm{font-size:.64rem}}
.h-quelle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:-10px;top:-10px}
.h-scharf{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);z-index:2;opacity:0;
  object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 0 34px rgba(255,255,255,.22)) drop-shadow(0 8px 26px rgba(0,0,0,.42))}
.h-text{position:absolute;left:0;right:0;bottom:clamp(34px,5.5vh,68px);z-index:5;
  max-width:960px;margin:0 auto;padding:0 clamp(22px,6vw,58px);text-align:center;pointer-events:none}
.h1-kicker{display:block;font-size:.73rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:clamp(8px,1.1vw,12px);opacity:0;transform:translateY(14px);
  transition:opacity.6s var(--e),transform.6s var(--e)}
.h1-kicker.da{opacity:1;transform:none}
.kz{display:block;font-weight:600;letter-spacing:-.045em;line-height:1.04;color:#fff;
  font-size:clamp(1.4rem,3.2vw,2.6rem);opacity:0;transform:translateY(22px);
  transition:opacity.6s var(--e),transform.6s var(--e)}
.kz.da{opacity:1;transform:none}
.kz.z2{color:rgba(255,255,255,.45)}
.kz.z3{background:var(--verlauf-w);-webkit-background-clip:text;background-clip:text;color:transparent}
.h-fuss{margin-top:clamp(12px,1.8vw,20px);opacity:0;transform:translateY(18px);
  transition:opacity.6s var(--e),transform.6s var(--e);pointer-events:auto}
.h-fuss.da{opacity:1;transform:none}
.h-fuss p{font-size:clamp(.84rem,1.12vw,.96rem);font-weight:300;color:rgba(255,255,255,.7);
  max-width:66ch;margin:0 auto 15px;line-height:1.56}
.h-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.h-trust{margin-top:14px;display:flex;flex-wrap:wrap;justify-content:center;gap:7px 20px;font-size:.78rem;
  font-weight:300;color:rgba(255,255,255,.5)}
.h-trust span{display:flex;align-items:center;gap:7px}
.h-trust i{width:5px;height:5px;border-radius:50%;background:var(--rot);font-style:normal}
.konv-fort{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.09);z-index:6}
.konv-fort i{display:block;height:100%;width:0;background:var(--verlauf-w)}
.hero3-hinweis{position:absolute;right:clamp(16px,3vw,32px);bottom:clamp(18px,3vw,32px);z-index:6;
  font-size:.71rem;font-weight:400;color:rgba(255,255,255,.4);letter-spacing:.16em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:8px;transition:opacity.5s}
.hero3-hinweis em{width:1px;height:24px;background:linear-gradient(rgba(255,255,255,.55),transparent);display:block;
  animation:runter 1.8s var(--e) infinite}
@keyframes runter{0%{transform:translateY(-7px);opacity:0}40%{opacity:1}100%{transform:translateY(9px);opacity:0}}
@media(max-width:700px){.hero3-hinweis{display:none}
.h-fuss p{font-size:.82rem;margin-bottom:13px}.h-trust{font-size:.69rem;gap:5px 12px}}
/* Navigation über dem dunklen Hero */
nav.ueber{background:transparent;backdrop-filter:none;border-bottom-color:transparent}
nav.ueber .nav-l a{color:rgba(255,255,255,.72)}
nav.ueber .nav-l a:hover{color:#fff;background:rgba(255,255,255,.08)}
nav .btn-linie{border-color:rgba(255,255,255,.26);color:#fff;background:transparent}
nav .btn-linie:hover{border-color:#fff;background:rgba(255,255,255,.08)}
nav.ueber .burger{color:#fff}
nav .logo-dunkel{display:none}
nav .logo-hell{display:block}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}
.rein .marker.ereignis .zk.kn .ag-s{opacity:1;transform:none}}
/* ================= V2: Mega-Menü ================= */
.mega-halter{position:static}
.mega-knopf{display:flex;align-items:center;gap:6px;background:none;border:0;font-family:inherit;
  color:rgba(255,255,255,.76);font-size:.9rem;font-weight:400;padding:9px 12px;border-radius:10px;cursor:pointer;
  transition:.2s;white-space:nowrap}
.mega-knopf:hover.mega-halter.offen .mega-knopf{color:#fff;background:rgba(255,255,255,.09)}
.mega-knopf svg{transition:transform.25s var(--e)}
.mega-halter.offen .mega-knopf svg{transform:rotate(180deg)}
.mega{position:absolute;left:0;right:0;top:100%;background:rgba(8,31,68,.985);backdrop-filter:blur(18px);
  border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 24px 60px rgba(0,0,0,.42);opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity.28s var(--e),transform.28s var(--e),visibility.28s;z-index:80}
.mega-halter.offen .mega{opacity:1;visibility:visible;transform:none}
.mega-innen{max-width:1280px;margin:0 auto;padding:clamp(24px,3vw,38px) var(--pad);
  display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:clamp(20px,3vw,44px)}
.mega-sp{min-width:0}
.mega-sp a{min-width:0;white-space:normal}
.mega-sp a b .mega-sp a small{min-width:0;overflow-wrap:anywhere}
.mega-titel{display:block;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin-bottom:14px}
.mega-sp a{display:block;padding:9px 11px;margin-left:-11px;border-radius:12px;text-decoration:none;
  transition:background.2s var(--e)}
.mega-sp a:hover{background:rgba(255,255,255,.07)}
.mega-sp a b{display:block;font-size:.92rem;font-weight:600;color:#fff;letter-spacing:-.02em}
.mega-sp a small{display:block;font-size:.8rem;font-weight:300;color:rgba(255,255,255,.55);margin-top:2px;line-height:1.4}
.mega-karte{display:block;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-m);padding:14px;text-decoration:none;transition:.25s var(--e);margin-left:0}
.mega-karte:hover{background:rgba(255,255,255,.10);transform:translateY(-3px)}
.mega-karte img{width:100%;border-radius:10px;margin-bottom:12px;max-height:132px;object-fit:cover;object-position:top}
.mega-karte b{display:block;font-size:.95rem;font-weight:600;color:#fff}
.mega-karte small{display:block;font-size:.82rem;overflow-wrap:anywhere;font-weight:300;color:rgba(255,255,255,.6);margin-top:3px;line-height:1.45}
.mega-cta{display:inline-block;margin-top:11px;font-size:.85rem;font-weight:600;color:var(--rot)}
@media(max-width:1120px){.mega-halter{display:none}}
.nur-mobil{display:none}
@media(max-width:1120px){.nur-mobil{display:block}}
/* ================= V2: Tiefe und Rhythmus ================= */
.tiefe{position:relative;overflow:hidden}
.tiefe>.wrap{position:relative;z-index:2}
.tiefe::before{content:'';position:absolute;left:50%;top:-18%;width:min(120vw,1400px);height:min(90vh,760px);
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(227,26,62,.055),transparent 70%),
             radial-gradient(closest-side,rgba(42,74,215,.05),transparent 70%);
  background-position:22% 30%, 80% 62%;background-size:62% 78%, 58% 72%;background-repeat:no-repeat;
  filter:blur(6px)}
.tiefe::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(8,31,68,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(8,31,68,.04) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask:radial-gradient(circle at 50% 40%,#000 0%,transparent 72%);
  mask:radial-gradient(circle at 50% 40%,#000 0%,transparent 72%)}
/* Dunkle Ergebnis-Sektion */
.dunkelblock{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.dunkelblock::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 420px at 22% 0%,rgba(227,26,62,.16),transparent 66%),
             radial-gradient(700px 400px at 82% 100%,rgba(42,74,215,.18),transparent 66%)}
.dunkelblock .wrap{position:relative;z-index:2}
.dunkelblock h2{color:#fff}
.dunkelblock .lead{color:rgba(255,255,255,.68)}
.dunkelblock .bs-lab{color:rgba(255,255,255,.55)}
.dunkelblock .beleg{background:rgba(255,255,255,.09);color:#fff;border:1px solid rgba(255,255,255,.16)}
.dunkelblock .bs-visual{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(14px);box-shadow:0 24px 60px rgba(0,0,0,.34)}
.dunkelblock .bs-visual::after{background:radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/20px 20px}
.dunkelblock .eb-lab{color:rgba(255,255,255,.5)}
.dunkelblock .eb-track{border-color:rgba(255,255,255,.16)}
.dunkelblock .eb-v{background:rgba(255,255,255,.09);color:rgba(255,255,255,.72)}
.dunkelblock .eb-delta{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14)}
.dunkelblock .eb-text{color:rgba(255,255,255,.7)}
.dunkelblock .eb-text b{color:#fff}
/* Glaskarten in dunklen Bereichen */
.dunkelblock .karte .dunkel .karte{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.13);
  backdrop-filter:blur(12px)}
/* Roter Faden am linken Rand */
.faden{position:fixed;left:0;top:calc(var(--kopfh,110px) + 3px);bottom:0;width:2px;z-index:55;pointer-events:none;
  background:rgba(8,31,68,.07)}
.faden i{display:block;width:100%;height:0;background:linear-gradient(180deg,var(--rot),var(--blau))}
@media(max-width:760px){.faden{display:none}}
/* Magnetische Buttons */
.btn{will-change:transform}
/* ---------- Mega-Menü V3 ---------- */
.mega-innen{grid-template-columns:1fr 1fr 1.05fr 1.05fr;gap:clamp(16px,2.2vw,34px)}
.mega[data-panel="prod"].mega-innen{grid-template-columns:1fr 1fr 1fr 1.05fr}
@media(max-width:1240px){.mega[data-panel="prod"].mega-innen{grid-template-columns:1fr 1fr}}
.mega[data-panel="res"].mega-innen{grid-template-columns:1fr 1fr 1.15fr}
@media(max-width:1180px){.mega[data-panel="res"].mega-innen{grid-template-columns:1fr 1fr}
.mega[data-panel="res"].mega-hoch{display:none}}
.mega-sp a{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:start}
.mega-sp a .msym{grid-row:1/3;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.09);
  display:grid;place-items:center;font-size:.72rem;color:rgba(255,255,255,.72);margin-top:2px;transition:.2s}
.mega-sp a:hover.msym{background:var(--rot);color:#fff}
.mega-sp a.mgross{display:block;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-s);padding:13px 15px;margin:0 0 9px}
.mega-sp a.mgross:hover{background:rgba(255,255,255,.10);transform:translateY(-2px)}
.mega-sp a.mgross em{display:block;font-style:normal;font-size:.72rem;font-weight:600;color:var(--rot);
  margin-top:2px;letter-spacing:.02em}
.mega-sp a.mgross small{margin-top:6px}
.mega-sp a.mega-karte{display:block;margin-top:0;position:relative;min-width:0}
.mk-band{display:inline-block;max-width:100%;font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--rot);border-radius:100px;padding:4px 11px;margin-bottom:11px}
/* ---------- Kontakt-Widget ---------- */
.kw{position:fixed;right:clamp(16px,2.4vw,30px);bottom:clamp(16px,2.4vw,30px);z-index:150;
  display:flex;flex-direction:column;align-items:flex-end;gap:14px;pointer-events:none}
/* Der Behälter .kw lässt Klicks durch, damit er die Seite nicht
   blockiert. Knopf und Fenster müssen deshalb ausdrücklich wieder
   klickbar sein. Der Komma-Selektor war zu einem Nachfahren-Selektor
   verkümmert, dadurch war der Knopf tot. */
.kw-knopf, .kw-panel{pointer-events:auto}
.kw-panel{visibility:hidden}
.kw:not(.auf).kw-panel{position:absolute;bottom:80px;right:0}
.kw-knopf{display:flex;align-items:center;gap:0;background:#fff;border:1px solid var(--linie);
  border-radius:100px;padding:7px;box-shadow:0 16px 40px rgba(8,31,68,.22);cursor:pointer;
  transition:transform.3s var(--e),box-shadow.3s var(--e);position:relative;font-family:inherit}
.kw-knopf:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 22px 52px rgba(8,31,68,.3)}
.kw-knopf .av{width:54px;height:54px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--rot);
  animation:kwwackel 4.5s var(--e) infinite}
.kw-knopf .av img{width:100%;height:100%;display:block;object-fit:cover}
@keyframes kwwackel{
  0%,72%,100%{transform:rotate(0) scale(1)}
  76%{transform:rotate(-7deg) scale(1.05)}
  80%{transform:rotate(6deg) scale(1.05)}
  84%{transform:rotate(-5deg) scale(1.04)}
  88%{transform:rotate(4deg) scale(1.02)}
  92%{transform:rotate(-2deg) scale(1)}
}
.kw-txt{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width.45s var(--e),padding.45s var(--e);
  padding:0;text-align:left}
.kw-knopf:hover.kw-txt .kw-knopf.zeig .kw-txt{max-width:210px;padding:0 16px 0 13px}
.kw-txt b{display:block;font-size:.92rem;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.kw-txt span{display:block;font-size:.78rem;color:var(--grau);margin-top:2px}
.kw-punkt{position:absolute;top:6px;right:6px;width:13px;height:13px;border-radius:50%;background:#22C55E;
  border:2.5px solid #fff}
.kw-punkt::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid #22C55E;
  animation:kwpuls 2.4s var(--e) infinite}
@keyframes kwpuls{0%{transform:scale(.8);opacity:.9}100%{transform:scale(2);opacity:0}}
@media(prefers-reduced-motion:reduce){.kw-knopf .av .kw-punkt::after{animation:none}}
.kw-panel{width:min(400px,calc(100vw - 32px));background:#fff;border-radius:var(--r-l);overflow:hidden;
  box-shadow:0 30px 70px rgba(8,31,68,.32);border:1px solid var(--linie);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.96);transform-origin:bottom right;
  transition:opacity.32s var(--e),transform.32s var(--e),visibility.32s}
.kw.auf .kw-panel{opacity:1;visibility:visible;transform:none}
.kw-kopf{background:var(--navy);color:#fff;padding:18px 20px;display:flex;align-items:center;gap:14px;
  position:relative;overflow:hidden}
.kw-kopf::after{content:'';position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(227,26,62,.4),transparent 68%)}
.kw-kopf>*{position:relative;z-index:2}
.kw-kopf .av2{width:46px;height:46px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--rot)}
.kw-kopf .av2 img{width:100%;height:100%;object-fit:cover;display:block}
.kw-kopf b{display:block;font-size:1rem;font-weight:700;color:#fff}
.kw-kopf span{display:block;font-size:.8rem;color:rgba(255,255,255,.66);margin-top:2px}
.kw-zu{position:absolute;right:14px;top:14px;z-index:3;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff;cursor:pointer;
  font-size:1rem;line-height:1;display:grid;place-items:center;transition:.2s}
.kw-zu:hover{background:rgba(255,255,255,.26)}
.kw-rahmen{height:min(520px,60vh);background:var(--flaeche)}
.kw-rahmen iframe{width:100%;height:100%;border:0;display:block}
.kw-fuss{padding:12px 20px;font-size:.78rem;color:var(--grau);border-top:1px solid var(--linie);
  display:flex;justify-content:space-between;align-items:center;gap:10px}
.kw-fuss a{color:var(--rot);font-weight:600;text-decoration:none}
@media(max-width:520px){.kw-rahmen{height:56vh}.kw-knopf:hover.kw-txt{max-width:0;padding:0}}
/* ---------- Exit-Intent ---------- */
.ei{position:fixed;inset:0;z-index:210;display:none;place-items:center;padding:20px;
  background:rgba(8,31,68,.68);backdrop-filter:blur(7px)}
.ei.auf{display:grid;animation:eiRein.3s var(--e)}
@keyframes eiRein{from{opacity:0}to{opacity:1}}
.ei-k{position:relative;width:100%;max-width:560px;background:#fff;border-radius:var(--r-l);overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.38);animation:eiHoch.38s var(--e)}
@keyframes eiHoch{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.ei-band{height:6px;background:linear-gradient(90deg,var(--rot) 0%,var(--rot) 40%,var(--blau) 40%,var(--blau) 72%,var(--navy) 72%)}
.ei-inn{padding:clamp(28px,3.4vw,40px);display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.4vw,26px);
  align-items:start}
@media(max-width:520px){.ei-inn{grid-template-columns:1fr;text-align:center;justify-items:center}}
.ei-av{width:78px;height:78px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--rot);
  box-shadow:0 10px 26px rgba(8,31,68,.2)}
.ei-av img{width:100%;height:100%;object-fit:cover;display:block}
.ei-kicker{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rot);background:rgba(227,26,62,.09);border-radius:100px;padding:5px 12px;margin-bottom:12px}
.ei-k h3{font-size:clamp(1.2rem,2.2vw,1.6rem);letter-spacing:-.03em;margin-bottom:10px;line-height:1.25}
.ei-k p{font-size:.94rem;font-weight:300;color:var(--grau);line-height:1.65;margin-bottom:20px}
.ei-akt{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media(max-width:520px){.ei-akt{justify-content:center}}
.ei-nein{font-size:.86rem;font-weight:500;color:var(--grau-h);background:none;border:0;cursor:pointer;
  font-family:inherit;text-decoration:underline;text-underline-offset:3px}
.ei-nein:hover{color:var(--navy)}
.ei-zu{position:absolute;right:14px;top:18px;width:32px;height:32px;border-radius:50%;border:1px solid var(--linie);
  background:#fff;cursor:pointer;color:var(--grau);font-size:1rem;line-height:1;z-index:3}
.ei-zu:hover{border-color:var(--grau-h);color:var(--navy)}
/* Werkzeug-Kacheln oben im Ressourcen-Menü */
.mega-oben{max-width:1280px;margin:0 auto;padding:0 0 22px;border-bottom:1px solid rgba(255,255,255,.12);
  margin-bottom:22px}
.mega-oben>.mega-titel{margin-bottom:14px}
.wz-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.wz-reihe{grid-template-columns:1fr}}
.wz-kachel{display:block!important;position:relative;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-m);padding:18px 20px 16px;
  text-decoration:none;transition:.22s var(--e);min-width:0;white-space:normal}
.wz-kachel:hover{background:rgba(255,255,255,.13);border-color:rgba(227,26,62,.5);transform:translateY(-3px)}
.wzk-sym{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--rot);
  color:#fff;font-size:.95rem;margin-bottom:12px}
.wz-kachel b{display:block;font-size:.98rem;font-weight:700;color:#fff;letter-spacing:-.02em;margin-bottom:5px}
.wz-kachel small{display:block;font-size:.82rem;font-weight:300;color:rgba(255,255,255,.62);line-height:1.5}
.wzk-zeit{position:absolute;top:16px;right:18px;font-size:.66rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--rot);background:rgba(227,26,62,.14);border-radius:100px;padding:4px 10px}
/* Highlight-Karten im Mega-Menü */
.hl-karte{display:block!important;position:relative;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-m);padding:20px 22px;
  text-decoration:none;transition:.24s var(--e);white-space:normal;min-width:0;overflow:hidden}
.hl-karte:hover{background:rgba(255,255,255,.13);border-color:rgba(227,26,62,.55);transform:translateY(-3px)}
.hl-karte::after{content:'';position:absolute;right:-70px;top:-70px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(227,26,62,.26),transparent 68%);pointer-events:none}
.hl-karte>*{position:relative;z-index:2}
.hl-band{display:flex;width:fit-content;align-items:center;gap:7px;font-size:.62rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:var(--rot);border-radius:100px;padding:4px 11px;margin-bottom:13px}
.hl-band i{width:5px;height:5px;border-radius:50%;background:#fff;font-style:normal;
  animation:hlpuls 2.2s var(--e) infinite}
@keyframes hlpuls{0%,100%{opacity:1}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.hl-band i{animation:none}}
.hl-datum{display:grid;place-items:center;width:58px;height:58px;border-radius:14px;
  background:#fff;margin-bottom:13px;line-height:1;padding:6px 0}
.hl-karte .hl-datum b{display:block;font-size:1.35rem;font-weight:800;color:var(--navy);letter-spacing:-.04em;margin:0}
.hl-karte .hl-datum span{display:block;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rot);margin-top:2px}
.hl-cover{margin:0 0 13px;border-radius:var(--r-s);overflow:hidden;max-width:96px;
  border:1px solid rgba(255,255,255,.18)}
.hl-cover img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover}
.hl-karte .hl-titel{display:block;font-size:1rem;font-weight:700;color:#fff;letter-spacing:-.02em;margin-bottom:7px;line-height:1.35}
.hl-karte small{display:block;font-size:.82rem;font-weight:300;color:rgba(255,255,255,.65);line-height:1.55}
.hl-cta{display:block;margin-top:14px;font-size:.83rem;font-weight:700;color:var(--rot)}
/* Anwendungsfälle-Menü */
.mega-breit .uc-innen{grid-template-columns:1.05fr 1.05fr.95fr.95fr;gap:clamp(18px,2.2vw,34px)}
@media(max-width:1240px){.mega-breit .uc-innen{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.mega-breit .uc-innen{grid-template-columns:1fr}}
.uc-innen .mega-titel{display:flex;align-items:center;gap:9px;min-height:22px}
.uc-sym{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--rot);
  color:#fff;font-style:normal;font-size:.68rem;flex:0 0 auto}
.uc-sym.leer{background:transparent}
.uc-innen .mega-sp a{display:block;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.uc-innen .mega-sp a:last-child{border-bottom:0}
.uc-innen .mega-sp a b{display:block;font-size:.92rem;font-weight:700;color:#fff;letter-spacing:-.015em;
  margin-bottom:3px;transition:.18s}
.uc-innen .mega-sp a:hover b{color:var(--rot)}
.uc-innen .mega-sp a small{display:block;font-size:.78rem;font-weight:300;color:rgba(255,255,255,.58);
  line-height:1.5}
.uc-fuss{max-width:1280px;margin:clamp(20px,2.4vw,28px) auto 0;padding-top:clamp(18px,2.2vw,24px);
  border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:space-between;
  gap:clamp(16px,2.4vw,32px);flex-wrap:wrap}
.uc-fuss b{display:block;font-size:.95rem;font-weight:700;color:#fff;letter-spacing:-.02em;margin-bottom:5px;
  max-width:64ch}
.uc-fuss span{display:block;font-size:.84rem;font-weight:300;color:rgba(255,255,255,.6);line-height:1.55}
.uc-fuss .btn{white-space:nowrap}
/* Sprachschalter */
.sprache{position:relative}
.spr-knopf{display:flex;align-items:center;gap:7px;font-family:inherit;font-size:.83rem;font-weight:700;
  color:#fff;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:100px;
  padding:7px 12px 7px 9px;cursor:pointer;transition:.2s var(--e)}
.spr-knopf:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
.sprache.offen .spr-knopf{background:rgba(255,255,255,.18);border-color:var(--rot)}
.spr-knopf svg{transition:transform.22s var(--e);opacity:.7}
.sprache.offen .spr-knopf svg{transform:rotate(180deg)}
.spr-kurz{letter-spacing:.04em}
.flagge{display:block;width:20px;height:14px;border-radius:3px;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.12) inset;background-size:cover;background-position:center}
.fl-de{background:linear-gradient(to bottom,#000 0 33.3%,#DD0000 33.3% 66.6%,#FFCE00 66.6% 100%)}
.fl-en{background:
  linear-gradient(to bottom,transparent 42%,#fff 42% 58%,transparent 58%),
  linear-gradient(to right,transparent 42%,#fff 42% 58%,transparent 58%),
  linear-gradient(to bottom,transparent 45.5%,#C8102E 45.5% 54.5%,transparent 54.5%),
  linear-gradient(to right,transparent 45.5%,#C8102E 45.5% 54.5%,transparent 54.5%),
  #012169}
.fl-fr{background:linear-gradient(to right,#002395 0 33.3%,#fff 33.3% 66.6%,#ED2939 66.6% 100%)}
.fl-es{background:linear-gradient(to bottom,#AA151B 0 25%,#F1BF00 25% 75%,#AA151B 75% 100%)}
.spr-liste{position:absolute;top:calc(100% + 10px);right:0;min-width:196px;background:#fff;
  border:1px solid var(--linie);border-radius:var(--r-m);padding:7px;
  box-shadow:0 22px 50px rgba(8,31,68,.24);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.97);
  transform-origin:top right;transition:opacity.22s var(--e),transform.22s var(--e),visibility.22s;z-index:60}
.sprache.offen .spr-liste{opacity:1;visibility:visible;transform:none}
.spr-liste a{display:flex!important;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-s);
  text-decoration:none;transition:.16s var(--e);white-space:nowrap}
.spr-liste a:hover{background:var(--flaeche)}
.spr-liste a.aktiv{background:var(--hellblau)}
.spr-liste a b{flex:1;font-size:.88rem;font-weight:600;color:var(--navy)}
.spr-liste a em{font-style:normal;font-size:.7rem;font-weight:800;letter-spacing:.08em;color:var(--grau-h)}
.spr-liste a.aktiv em{color:var(--rot)}
@media(max-width:1120px){.sprache{order:-1}}
/* Kundenberichte-Querkarte im Menü */
.uc-extra{grid-template-columns:1fr!important;max-width:1280px;margin:clamp(16px,2vw,22px) auto 0}
.uc-quer{display:block!important;background:rgba(227,26,62,.1);border:1px solid rgba(227,26,62,.35);
  border-radius:var(--r-m);padding:18px 22px;text-decoration:none;transition:.22s var(--e);white-space:normal}
.uc-quer:hover{background:rgba(227,26,62,.18);border-color:var(--rot);transform:translateY(-2px)}
.uq-band{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--rot);border-radius:100px;padding:4px 11px;margin-bottom:10px}
.uc-quer b{display:block;font-size:1rem;font-weight:700;color:#fff;letter-spacing:-.02em;margin-bottom:5px}
.uc-quer small{display:block;font-size:.82rem;font-weight:300;color:rgba(255,255,255,.7);line-height:1.55;
  max-width:78ch}
.uq-cta{display:block;margin-top:11px;font-size:.83rem;font-weight:700;color:var(--rot)}
.st-k{display:flex;flex-direction:column;text-align:left}
.st-zahl{display:inline-grid;place-items:center;min-width:64px;height:44px;border-radius:100px;
  background:var(--verlauf-w);color:#fff;font-size:1.06rem;font-weight:800;letter-spacing:-.03em;
  padding:0 16px;margin-bottom:16px;align-self:flex-start}
.st-k p{font-size:.95rem;font-weight:300;color:var(--text);line-height:1.68;flex:1;margin-bottom:18px}
.st-wer{padding-top:14px;border-top:1px solid var(--linie)}
.st-wer b{display:block;font-size:.9rem;font-weight:700;color:var(--navy)}
.st-wer span{display:block;font-size:.82rem;color:var(--grau);margin-top:2px}
/* Sehr schmale Geräte ab 360 Pixel */
@media(max-width:400px){
.kopf-fix nav{padding-left:14px;padding-right:14px;gap:8px}
.nav-r{gap:7px;min-width:0}
.nav-r .btn-k{font-size:.78rem;padding:9px 13px;white-space:nowrap}
.spr-knopf{padding:6px 9px 6px 7px;font-size:.76rem}
.spr-knopf .spr-kurz{display:none}
.logo-link img.flogo{max-width:118px}
  h1 .p-hero h1{overflow-wrap:anywhere}
.r-titel.artikel h1{overflow-wrap:anywhere}
}
@media(max-width:360px){
.nav-r .btn-k{display:none}
}
/* Lange Wörter niemals überstehen lassen */
h1,h2,h3,h4{overflow-wrap:break-word}
.rechts-seite h1.rechts-seite h2{overflow-wrap:anywhere}
/* Kompaktes Hinweisband auf kleinen Bildschirmen */
@media(max-width:640px){
.balken{padding:7px 12px}
.bl-in{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:nowrap;
    font-size:.72rem;line-height:1.3;white-space:nowrap;overflow:hidden}
.bl-in .bl-tag{flex:0 0 auto;font-size:.58rem;padding:2px 8px}
.bl-in>a{flex:0 0 auto;white-space:nowrap}
}
@media(max-width:430px){
.bl-in{font-size:.68rem;gap:6px}
}
/* Kontakt-Element auf dem Handy nur als Kreis */
@media(max-width:640px){
.kw{right:14px;bottom:14px}
.kw-knopf{padding:5px}
.kw-knopf .av{width:48px;height:48px}
.kw-knopf .kw-txt .kw-knopf.zeig .kw-txt .kw-knopf:hover.kw-txt{max-width:0;padding:0;overflow:hidden}
.kw-punkt{width:11px;height:11px;top:4px;right:4px}
}
.nur-mobil-i{display:none}
@media(max-width:640px){.nur-desktop-i{display:none}.nur-mobil-i{display:inline}}
/* Kopfzeile auf schmalen Geräten sauber umbrechen lassen */
@media(max-width:820px){
.kopf-fix nav{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.nav-r{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0;flex:0 1 auto}
.nav-r .btn-rot{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.burger{flex:0 0 auto}
.logo-link{flex:0 1 auto;min-width:0}
.logo-link img{max-width:130px;height:auto}
}
@media(max-width:470px){
.nav-r .btn-rot{font-size:.76rem;padding:9px 12px}
.logo-link img{max-width:112px}
}
@media(max-width:390px){
.nav-r .btn-rot{display:none}
}
/* ---------- Kundenlogos ----------
   Alle Dateien liegen auf einer gleich großen Leinwand von 340x110 und
   sind darin optisch ausgeglichen. Deshalb genügt hier eine Regel für
   alle, keine Sonderhöhen je Marke mehr. */
.lw-zeile img,
.lw-bahn img{
  height:52px;
  width:auto;
  object-fit:contain;
  flex:0 0 auto;
  filter:none;
  opacity:1;
}

/* ---------- Durchlaufendes Band ---------- */
.lw-lauf{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.lw-bahn{display:flex;width:max-content;align-items:center;
  gap:clamp(20px,3vw,44px);padding:clamp(10px,1.4vw,18px) 0;
  animation:lwlauf 46s linear infinite}
.lw-lauf:hover .lw-bahn{animation-play-state:paused}
@keyframes lwlauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .lw-bahn{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
  .lw-lauf{-webkit-mask-image:none;mask-image:none}
}
.lw-bahn img{transition:transform .3s var(--e)}
.lw-bahn img:hover{transform:scale(1.06)}

.lw-zeile{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(20px,3vw,44px);padding:clamp(8px,1.4vw,16px) 0}

@media(max-width:640px){
  .lw-zeile img,.lw-bahn img{height:38px}
  .lw-bahn{gap:20px;animation-duration:34s}
  .lw-zeile{gap:20px}
}

/* ---------- Filterzeilen: eine Zeile, waagerecht scrollbar ---------- */
.filterband{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:4px 2px 10px;margin-bottom:clamp(16px,2vw,24px);
  scroll-snap-type:x proximity;justify-content:flex-start}
.filterband::-webkit-scrollbar{display:none}
.filterband > *{flex:0 0 auto;scroll-snap-align:start}
/* Auf breiten Bildschirmen mittig, ohne Umbruch */
@media(min-width:1100px){.filterband{justify-content:center;flex-wrap:nowrap} }
/* Auf schmalen Bildschirmen andeuten, dass sich die Zeile schieben lässt */
@media(max-width:1099px){
.filterband{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent)}
}
.filterband button{white-space:nowrap}

/* ================= Beweisstreifen auf den Anwendungsfällen =================
   Die zwölf Seiten waren bis auf den Text identisch: gleiche Struktur,
   eine einzige Zahl, kein Kundenbeleg. Wer über die Suche kommt, landete
   auf einer Seite ohne Argument.

   Jetzt trägt jede Seite ihre eigene Kennzahl, drei Vergleichswerte und,
   wo vorhanden, eine echte Kundenstimme. Wo die Zahl geschätzt ist, steht
   das ausdrücklich dabei. */
.uc-beweis{background:var(--flaeche);border-bottom:1px solid var(--linie);
  padding:clamp(28px,3.6vw,44px) 0}
.ucb{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(20px,3vw,40px);align-items:center}
@media(max-width:900px){.ucb{grid-template-columns:1fr;gap:22px}}

.ucb-gross b{display:block;font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;
  color:var(--rot);letter-spacing:-.05em;line-height:1}
.ucb-gross > span{display:block;font-size:clamp(.95rem,1.4vw,1.08rem);font-weight:300;
  color:var(--grau);line-height:1.5;margin-top:8px;max-width:34ch}
.ucb-gross em{display:inline-block;font-style:normal;font-size:.62rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;border-radius:100px;
  padding:4px 11px;margin-top:12px}
.ucb-beleg{color:#0F7B4F;background:rgba(15,123,79,.11)}
.ucb-schaetz{color:var(--grau);background:#fff;border:1px solid var(--linie)}

.ucb-drei{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,16px)}
@media(max-width:560px){.ucb-drei{grid-template-columns:1fr}}
.ucb-drei > div{background:#fff;border:1px solid var(--linie);border-radius:var(--r-m);
  padding:15px 17px}
.ucb-drei b{display:block;font-size:clamp(1.05rem,1.7vw,1.3rem);font-weight:800;
  color:var(--navy);letter-spacing:-.03em;line-height:1.1}
.ucb-drei span{display:block;font-size:.79rem;font-weight:300;color:var(--grau);
  line-height:1.4;margin-top:5px}

.ucb-stimme{grid-column:1 / -1;margin:0;background:#fff;border:1px solid var(--linie);
  border-left:3px solid var(--rot);border-radius:var(--r-m);
  padding:clamp(18px,2.2vw,24px)}
.ucb-stimme blockquote{margin:0 0 12px;font-size:.96rem;font-weight:300;
  color:var(--text);line-height:1.7}
.ucb-stimme figcaption b{font-size:.9rem;font-weight:700;color:var(--navy)}
.ucb-stimme figcaption span{display:block;font-size:.8rem;font-weight:300;
  color:var(--grau-h);margin-top:2px}

/* Beleg auf den Werkzeugseiten: Wer den Rechner nicht sofort benutzt,
   hatte bisher keinen Grund zu bleiben. Eine Zahl mit Namen gibt ihn. */
.wz-beleg{background:var(--flaeche);border-bottom:1px solid var(--linie);
  padding:clamp(22px,2.8vw,32px) 0}
.wzb{display:flex;align-items:center;gap:clamp(18px,2.6vw,34px);flex-wrap:wrap}
.wzb-zahl{flex:0 0 auto}
.wzb-zahl b{display:block;font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:800;
  color:var(--rot);letter-spacing:-.045em;line-height:1}
.wzb-zahl span{display:block;font-size:.82rem;font-weight:300;color:var(--grau);
  margin-top:5px;line-height:1.4;max-width:24ch}
.wzb-txt{flex:1 1 260px;margin:0;font-size:.94rem;font-weight:300;color:var(--grau);
  line-height:1.7;border-left:2px solid var(--linie);padding-left:clamp(16px,2vw,24px)}
.wzb-stimme{margin:0;flex:0 0 auto}
.wzb-stimme b{display:block;font-size:.88rem;font-weight:700;color:var(--navy)}
.wzb-stimme span{display:block;font-size:.78rem;font-weight:300;color:var(--grau-h);margin-top:2px}

/* Gliederung der Anwendungsfälle nach denselben drei Einsatzgebieten
   wie auf der Startseite. Zwölf Kacheln hintereinander sind eine Liste,
   drei Gruppen sind eine Ordnung. */
.uc-gruppe{background:var(--navy);padding:clamp(30px,4vw,48px) 0;margin-top:clamp(20px,3vw,40px)}
.ucg-lab{display:inline-block;font-size:.63rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:var(--rot);border-radius:100px;
  padding:5px 13px;margin-bottom:13px}
.uc-gruppe h2{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;color:#fff;
  letter-spacing:-.04em;line-height:1.15;margin:0 0 8px}
.uc-gruppe p{margin:0;font-size:.95rem;font-weight:300;color:rgba(255,255,255,.7);
  line-height:1.6;max-width:56ch}


/* ================= Eingabefelder in den Formularen =================
   Die Werkzeuge fragen ihre Angaben auf dunklem Grund ab. Deshalb hier
   keine weißen Kästen, sondern durchscheinende Flächen mit heller Kante:
   Sie fügen sich ein und bleiben trotzdem als Eingabe erkennbar.

   Beim Hineinklicken kommt ein roter Rahmen statt des blauen
   Systemrings, damit es zur Marke passt. */
.feld{margin-bottom:14px}
.feld label{
  display:block;
  font-size:.82rem;
  font-weight:600;
  color:rgba(255,255,255,.82);
  margin-bottom:7px;
  letter-spacing:-.01em;
}
.feld input,
.feld select,
.feld textarea{
  width:100%;
  font-family:inherit;
  font-size:.98rem;
  font-weight:400;
  color:#fff;
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.16);
  border-radius:12px;
  padding:13px 16px;
  transition:border-color .18s var(--e), background .18s var(--e),
             box-shadow .18s var(--e);
  -webkit-appearance:none;appearance:none;
}
.feld input::placeholder{color:rgba(255,255,255,.34);font-weight:300}
.feld input:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.1)}
.feld input:focus,
.feld select:focus,
.feld textarea:focus{
  outline:none;
  border-color:var(--rot);
  background:rgba(255,255,255,.12);
  box-shadow:0 0 0 3px rgba(227,26,62,.22);
}
/* Erst nach dem Tippen bemängeln, nicht schon beim Öffnen */
.feld input:not(:placeholder-shown):invalid{border-color:rgba(232,160,175,.7)}

/* Automatisches Ausfüllen färbt in Chrome sonst alles hellblau */
.feld input:-webkit-autofill,
.feld input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 40px #14294a inset;
  caret-color:#fff;
}

/* Die Einwilligung */
label.zust{
  display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;
  font-size:.83rem;font-weight:300;color:rgba(255,255,255,.66);
  line-height:1.55;cursor:pointer;margin:4px 0 16px;
}
label.zust input[type=checkbox]{
  width:20px;height:20px;margin:1px 0 0;accent-color:var(--rot);cursor:pointer;
}
label.zust a{color:#fff;text-decoration:underline;text-underline-offset:2px}

/* Dieselben Felder auf hellem Grund, etwa im Download-Fenster */
.hell-form .feld label{color:var(--navy)}
.hell-form .feld input,
.hell-form .feld select,
.hell-form .feld textarea{
  color:var(--text);background:#fff;border-color:var(--linie);
}
.hell-form .feld input::placeholder{color:var(--grau-h)}
.hell-form .feld input:hover{border-color:#C9D4E4;background:#fff}
.hell-form .feld input:focus{background:#fff;box-shadow:0 0 0 3px rgba(227,26,62,.13)}
.hell-form label.zust{color:var(--grau)}
.hell-form label.zust a{color:var(--rot)}

/* Auf schmalen Geräten mindestens 16 Pixel, sonst zoomt Safari beim Tippen */
@media(max-width:640px){
  .feld input,.feld select,.feld textarea{font-size:16px}
}

/* Der Knopf während des Sendens: sichtbar gesperrt, damit niemand
   mehrfach drückt und derselbe Lead doppelt in HubSpot landet. */
.btn.laedt,
button.laedt{
  opacity:.72;
  cursor:progress;
  pointer-events:none;
  position:relative;
}
.btn.laedt::after,
button.laedt::after{
  content:'';
  display:inline-block;
  width:13px;height:13px;
  margin-left:9px;
  vertical-align:-2px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:hra-dreht .7s linear infinite;
}
@keyframes hra-dreht{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .btn.laedt::after,button.laedt::after{animation:none;opacity:.5}
}

/* Der Kalender im Kontaktfenster wird von einem fremden Anbieter geladen
   und braucht deshalb eine Einwilligung. Solange sie fehlt, liegt dieser
   Hinweis darüber, mit einem Verweis, der in einem neuen Fenster öffnet.
   Ohne ihn wäre das Fenster einfach leer. */
.kw-rahmen{position:relative}
.kw-sperre{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;padding:26px;text-align:center;
  background:var(--flaeche);
}
.kw-sperre b{font-size:1rem;font-weight:700;color:var(--navy);letter-spacing:-.02em}
.kw-sperre span{font-size:.86rem;font-weight:300;color:var(--grau);
  line-height:1.55;max-width:34ch}
.kw-sperre .btn{margin-top:6px;font-size:.88rem;padding:11px 22px}

/* Sobald die Einwilligung da ist, entfernt das Werkzeug data-src und
   ersetzt es durch src. Dann muss der Hinweis verschwinden. */
.kw-rahmen iframe[src]:not([src=""]) ~ .kw-sperre{display:none}

/* ================= Fehlerseite =================
   Eine Sackgasse ist die schlechteste Stelle einer Website. Deshalb
   steht hier nicht nur die Meldung, sondern auch ein Suchfeld, die
   gefragtesten Seiten und die Werkzeuge. */
.vv{background:var(--navy);color:#fff;padding:clamp(70px,9vw,130px) 0 clamp(50px,7vw,90px);
  position:relative;overflow:hidden}
.vv::before{content:'';position:absolute;left:50%;top:-30%;width:800px;height:800px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(227,26,62,.20),transparent 66%)}
.vv .wrap{position:relative}

.vv-kopf{max-width:760px;margin:0 auto clamp(34px,4.4vw,52px);text-align:center}
.vv-zahl{display:block;font-size:clamp(3.4rem,9vw,6.5rem);font-weight:800;
  letter-spacing:-.06em;line-height:1;
  background:linear-gradient(135deg,var(--rot),#FF6B85);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:clamp(10px,1.6vw,18px)}
.vv-kopf h1{font-size:clamp(1.6rem,3.6vw,2.7rem);font-weight:800;color:#fff;
  letter-spacing:-.04em;line-height:1.16;margin:0 0 14px}
.vv-kopf .tt{color:var(--rot)}
.vv-kopf .lead{font-size:clamp(.98rem,1.5vw,1.1rem);font-weight:300;
  color:rgba(255,255,255,.7);line-height:1.7;margin:0 auto;max-width:56ch}

.vv-suche{display:flex;gap:10px;max-width:520px;margin:clamp(22px,2.8vw,32px) auto 0}
.vv-suche input{flex:1;font-family:inherit;font-size:1rem;color:#fff;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.18);
  border-radius:100px;padding:14px 22px;-webkit-appearance:none;appearance:none;
  transition:border-color .18s var(--e),background .18s var(--e)}
.vv-suche input::placeholder{color:rgba(255,255,255,.4);font-weight:300}
.vv-suche input:focus{outline:none;border-color:var(--rot);background:rgba(255,255,255,.12);
  box-shadow:0 0 0 3px rgba(227,26,62,.2)}
.vv-suche .btn{flex:0 0 auto}
.vv-versteckt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

.vv-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,14px);
  max-width:980px;margin:0 auto}
@media(max-width:820px){.vv-raster{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.vv-raster{grid-template-columns:1fr}}
.vv-k{position:relative;display:block;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r-m);
  padding:18px 44px 18px 20px;text-decoration:none;
  transition:background .2s var(--e),border-color .2s var(--e),transform .2s var(--e)}
.vv-k:hover{background:rgba(255,255,255,.11);border-color:var(--rot);transform:translateY(-2px)}
.vv-k b{display:block;font-size:1rem;font-weight:700;color:#fff;
  letter-spacing:-.024em;margin-bottom:4px}
.vv-k span{display:block;font-size:.84rem;font-weight:300;color:rgba(255,255,255,.62);
  line-height:1.45}
.vv-k i{position:absolute;right:18px;top:50%;transform:translateY(-50%);
  font-style:normal;font-size:1.05rem;color:var(--rot);
  transition:transform .2s var(--e)}
.vv-k:hover i{transform:translateY(-50%) translateX(4px)}

.vv-wz{max-width:980px;margin:clamp(30px,3.8vw,44px) auto 0;text-align:center}
.vv-wz-lab{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:14px}
.vv-wz-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,14px)}
@media(max-width:640px){.vv-wz-reihe{grid-template-columns:1fr}}
.vv-wz-reihe a{display:block;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);border-radius:var(--r-m);padding:18px 16px;
  text-decoration:none;transition:background .2s var(--e),border-color .2s var(--e)}
.vv-wz-reihe a:hover{background:rgba(255,255,255,.1);border-color:var(--rot)}
.vv-wz-reihe i{display:block;font-style:normal;font-size:1.4rem;line-height:1;margin-bottom:9px;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.vv-wz-reihe b{display:block;font-size:.94rem;font-weight:700;color:#fff;margin-bottom:3px}
.vv-wz-reihe span{display:block;font-size:.78rem;font-weight:300;color:rgba(255,255,255,.5)}

.vv-fuss{text-align:center;margin:clamp(30px,3.8vw,44px) 0 0;font-size:.88rem;
  font-weight:300;color:rgba(255,255,255,.5);line-height:1.6}
.vv-fuss a{color:#fff;text-decoration:underline;text-underline-offset:2px}