/* Firnkern Website 8.0 · 28.10.2026 · Archivo (SIL OFL 1.1), selbst gehostet */
@font-face{font-family:"Archivo";src:url("archivo-latin-wdth.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{
  --ink:#0F2F3A; --ink2:#173E4B; --firn:#F3F8F9; --paper:#FFFFFF;
  --ice1:#E4F1F5; --ice2:#C6E2EB; --ice3:#97CADB; --ice4:#6FB3CA;
  --petrol:#1B6782; --petrol-h:#14526A; --signal:#E8842A; --signal-t:#A3500D;
  --slate:#4A5B63; --line:#D3E2E8; --ok:#2E7D5B;
  --wrap:1180px; --r-s:6px; --r-m:14px;
  --fs-0:clamp(.84rem,.82rem + .1vw,.9rem); --fs-1:clamp(1rem,.97rem + .15vw,1.08rem);
  --fs-2:clamp(1.2rem,1.1rem + .4vw,1.4rem); --fs-3:clamp(1.6rem,1.3rem + 1.2vw,2.3rem);
  --fs-4:clamp(2.4rem,1.6rem + 3.6vw,5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--firn);color:var(--ink);font:400 var(--fs-1)/1.62 "Archivo",system-ui,sans-serif;font-stretch:100%}
img,video,svg{display:block;max-width:100%;height:auto}
a{color:var(--petrol);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--petrol-h)}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-stretch:112%;font-weight:800;line-height:1.04;letter-spacing:-.018em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:var(--fs-4)} h2{font-size:var(--fs-3)} h3{font-size:var(--fs-2);line-height:1.15;letter-spacing:-.01em}
p{margin:0 0 1em;max-width:66ch;text-wrap:pretty}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.skip{position:absolute;left:-999px;top:8px;background:var(--paper);padding:10px 14px;z-index:99}
.skip:focus{left:8px}
.lead{font-size:var(--fs-2);line-height:1.45;color:var(--slate);max-width:44ch}
.klein{font-size:var(--fs-0);color:var(--slate)}
section{padding:clamp(64px,9vw,128px) 0}
.ruhig{background:var(--paper);border-block:1px solid var(--line)}
.dunkel{background:var(--ink);color:#E9F3F6}
.dunkel a{color:var(--ice3)} .dunkel .klein,.dunkel .lead{color:#A9C3CC}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;background:rgba(243,248,249,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.kopf.lauf{border-color:var(--line)}
.kopf .wrap{display:flex;align-items:center;gap:24px;height:68px}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-stretch:112%;font-size:1.2rem;letter-spacing:-.01em}
.marke svg{width:24px;height:auto}
.nav{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-size:.95rem}
.nav a:hover{color:var(--petrol)}
.sprache{display:flex;gap:2px;font-size:.88rem}
.sprache a,.sprache span{padding:4px 6px;border-radius:4px;text-decoration:none;color:var(--slate)}
.sprache [aria-current]{color:var(--ink);font-weight:700}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink);color:#fff;font:600 .98rem/1 "Archivo",sans-serif;text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.knopf:hover{background:var(--ink2);color:#fff}
.knopf.leer{background:transparent;color:var(--ink)}
.knopf.leer:hover{background:var(--ink);color:#fff}
.dunkel .knopf{background:#fff;color:var(--ink);border-color:#fff}
.dunkel .knopf.leer{background:transparent;color:#fff}
.dunkel .knopf.leer:hover{background:#fff;color:var(--ink)}
.kopf .knopf{min-height:40px;padding:0 16px;font-size:.92rem}
.menue{display:none;margin-left:auto;background:none;border:1.5px solid var(--ink);border-radius:999px;min-height:44px;padding:0 16px;font:600 .92rem "Archivo",sans-serif;color:var(--ink)}
@media (max-width:900px){
  .nav{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--firn);border-bottom:1px solid var(--line);padding:8px clamp(16px,4vw,40px) 20px}
  .nav.offen{display:flex}
  .nav a{padding:12px 0;font-size:1.05rem;width:100%}
  .nav .knopf{margin-top:8px;width:auto}
  .menue{display:inline-flex;align-items:center}
}

/* Held mit Eiskern */
.held{padding:clamp(40px,7vw,96px) 0 clamp(48px,7vw,96px)}
.held .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,5vw,72px);align-items:center}
.held h1{margin-bottom:.35em}
.held .claim{font-weight:700;font-stretch:108%;font-size:var(--fs-2);margin-bottom:.6em;color:var(--ink)}
.held .knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 14px}
.kern{position:relative;justify-self:center;width:min(100%,380px)}
.kern svg{width:100%;overflow:visible}
.kern .schicht{transform-box:fill-box;transform-origin:50% 0;animation:setzen .9s cubic-bezier(.2,.7,.2,1) both}
.kern .marke-t{font:500 13px "Archivo",sans-serif;fill:#5B7079}
.kern .marke-t.wichtig{font-weight:800;fill:var(--signal-t)}
@keyframes setzen{from{opacity:0;transform:translateY(-26px) scaleY(.6)}to{opacity:1;transform:none}}
@media (max-width:820px){
  .held .wrap{grid-template-columns:1fr}
  .kern{width:100%;max-width:520px;justify-self:start}
}

/* Film */
.film{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:end}
.film video{width:100%;border-radius:var(--r-m);background:#081a20;aspect-ratio:16/9}
.film .neben h2{color:#fff}
.film-liste{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:8px}
.film-liste button{all:unset;cursor:pointer;display:flex;justify-content:space-between;gap:12px;width:100%;padding:12px 14px;border-radius:var(--r-s);border:1px solid #2C5160;color:#DCEBF0;box-sizing:border-box}
.film-liste button:hover{border-color:var(--ice3)}
.film-liste button[aria-pressed=true]{background:#fff;color:var(--ink);border-color:#fff}
.film-liste button:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.film-liste .dauer{font-variant-numeric:tabular-nums;opacity:.75}
@media (max-width:820px){.film{grid-template-columns:1fr}}

/* Stille Einzelrollen */
.rollen{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0;padding:0;list-style:none}
.rollen li{padding:10px 16px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-weight:600}
.rollen li.weg{background:var(--signal);border-color:var(--signal);color:#fff}
.zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,72px);align-items:start}
@media (max-width:820px){.zwei{grid-template-columns:1fr}}

/* Ablauf in vier Schritten */
.schritte{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(24px,4vw,56px);margin-top:40px;align-items:start}
.schritt-liste{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:s}
.schritt-liste button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:40px 1fr;gap:4px 12px;width:100%;padding:16px;border-radius:var(--r-m);border:1px solid transparent}
.schritt-liste button:hover{background:var(--ice1)}
.schritt-liste button[aria-selected=true]{background:var(--paper);border-color:var(--line);box-shadow:0 1px 0 var(--line)}
.schritt-liste button:focus-visible{outline:3px solid var(--signal)}
.schritt-liste .nr{grid-row:span 2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ice2);font-weight:800;color:var(--ink)}
.schritt-liste button[aria-selected=true] .nr{background:var(--ink);color:#fff}
.schritt-liste b{font-stretch:110%;font-size:1.1rem}
.schritt-liste span.t{color:var(--slate);font-size:.95rem}
.bildschirm{position:relative;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line);background:var(--paper);box-shadow:0 30px 60px -40px rgba(15,47,58,.45)}
.bildschirm img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:left top}
.bildschirm figcaption{padding:10px 14px;font-size:var(--fs-0);color:var(--slate);border-top:1px solid var(--line)}
@media (max-width:900px){.schritte{grid-template-columns:1fr}}

/* Unterschied */
.drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:36px}
.drei h3{font-size:1.25rem}
.drei p{color:var(--slate)}
@media (max-width:820px){.drei{grid-template-columns:1fr}}

/* Einsätze */
.einsatz{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:36px 0 0;border-top:2px solid var(--ink)}
.einsatz div{padding:18px 18px 18px 0}
.einsatz div+div{padding-left:18px;border-left:1px solid var(--line)}
.einsatz b{display:block;font-stretch:110%;font-size:1.12rem;margin-bottom:4px}
.einsatz span{color:var(--slate);font-size:.95rem}
@media (max-width:820px){.einsatz{grid-template-columns:1fr 1fr}.einsatz div:nth-child(3){border-left:0;padding-left:0}}
@media (max-width:480px){.einsatz{grid-template-columns:1fr}.einsatz div+div{border-left:0;padding-left:0;border-top:1px solid var(--line)}}
.handy-reihe{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.55fr);gap:24px;align-items:end;margin-top:40px}
.handy{border-radius:28px;border:8px solid var(--ink);overflow:hidden;background:var(--ink);max-width:280px}
@media (max-width:700px){.handy-reihe{grid-template-columns:1fr}.handy{max-width:240px}}

/* Daten */
.liste-daten{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0}
.liste-daten li{display:grid;grid-template-columns:minmax(140px,.4fr) 1fr;gap:20px;padding:18px 0;border-top:1px solid var(--line)}
.liste-daten b{font-stretch:108%}
@media (max-width:600px){.liste-daten li{grid-template-columns:1fr;gap:4px}}

/* Preise */
.rechner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;margin-top:36px;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line);background:var(--paper)}
.rechner .ein{padding:clamp(20px,3vw,36px);display:grid;gap:22px;align-content:start}
.rechner .aus{padding:clamp(20px,3vw,36px);background:var(--ink);color:#fff;display:grid;align-content:space-between;gap:24px}
.feld label,.feld legend{display:block;font-weight:700;margin-bottom:8px}
.feld input[type=range]{width:100%;accent-color:var(--petrol);height:32px}
.rollen-zahl{display:flex;align-items:center;gap:10px}
.rollen-zahl input[type=number]{width:96px;min-height:44px;font:700 1.2rem "Archivo",sans-serif;padding:0 10px;border:1.5px solid var(--line);border-radius:var(--r-s);color:var(--ink)}
.wahl{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0}
.wahl label{position:relative}
.wahl input{position:absolute;opacity:0;width:1px;height:1px}
.wahl span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);cursor:pointer;font-weight:600}
.wahl input:checked+span{background:var(--ink);color:#fff;border-color:var(--ink)}
.wahl input:focus-visible+span{outline:3px solid var(--signal);outline-offset:2px}
.betrag{font-stretch:115%;font-weight:800;font-size:clamp(2.4rem,1.8rem + 2.5vw,3.8rem);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.aus .stufe{font-size:1.05rem;color:#BFD9E2}
.aus .zeile{display:flex;justify-content:space-between;gap:12px;font-size:.95rem;color:#BFD9E2;border-top:1px solid #2C5160;padding-top:10px}
.preistabelle{width:100%;border-collapse:collapse;margin-top:36px;font-variant-numeric:tabular-nums}
.preistabelle th,.preistabelle td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line)}
.preistabelle th{font-size:.9rem;color:var(--slate);font-weight:600}
.preistabelle td:nth-child(n+3),.preistabelle th:nth-child(n+3){text-align:right}
.preistabelle tr.aktiv td{background:var(--ice1);font-weight:700}
.tabelle-roll{overflow-x:auto}
.optionen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:36px}
.optionen div{border-top:2px solid var(--ink);padding-top:14px}
.optionen b{display:block;font-stretch:108%}
@media (max-width:820px){.rechner,.optionen{grid-template-columns:1fr}}

/* Ehrlich */
.ehrlich{columns:2 320px;column-gap:56px;margin-top:28px;padding:0;list-style:none}
.ehrlich li{break-inside:avoid;padding:14px 0 14px 22px;border-top:1px solid var(--line);position:relative}
.ehrlich li::before{content:"";position:absolute;left:0;top:23px;width:10px;height:10px;border-radius:2px;background:var(--signal)}

/* Buch */
.buch{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,5vw,72px);align-items:center}
.buch img{border-radius:6px;box-shadow:0 40px 60px -30px rgba(0,0,0,.6);max-width:360px;width:100%}
.buch h2{color:#fff}
.zitate{list-style:none;padding:0;margin:24px 0}
.zitate li{padding:14px 0;border-top:1px solid #2C5160;font-size:1.08rem}
@media (max-width:820px){.buch{grid-template-columns:1fr}.buch img{max-width:260px}}

/* Kontakt */
.kontakt{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px)}
.person b{font-size:1.25rem;font-stretch:110%}
.person p{margin:.2em 0}
form.anfrage{display:grid;gap:16px}
form.anfrage .reihe{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form.anfrage label{display:grid;gap:6px;font-weight:600;font-size:.95rem}
form.anfrage input,form.anfrage select,form.anfrage textarea{font:400 1rem "Archivo",sans-serif;min-height:46px;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r-s);background:var(--paper);color:var(--ink)}
form.anfrage textarea{min-height:130px;resize:vertical}
form.anfrage input:focus,form.anfrage select:focus,form.anfrage textarea:focus{border-color:var(--petrol);outline:none;box-shadow:0 0 0 3px var(--ice2)}
.versteckt{position:absolute;left:-5000px}
@media (max-width:820px){.kontakt,form.anfrage .reihe{grid-template-columns:1fr}}

/* Fuss */
.fuss{background:var(--ink);color:#A9C3CC;padding:48px 0 40px;font-size:.92rem}
.fuss .wrap{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between}
.fuss a{color:#E2EEF2}
.fuss nav{display:flex;flex-wrap:wrap;gap:8px 22px}

/* Rechtsseiten */
.recht{max-width:780px}
.recht h1{font-size:var(--fs-3)}
.recht h2{font-size:1.35rem;margin-top:1.8em}
.recht h3{font-size:1.1rem;margin-top:1.4em}
.recht table{border-collapse:collapse;width:100%;font-size:.92rem;margin:12px 0 20px}
.recht td,.recht th{border:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}
.recht mark{background:#FFE9A8;padding:0 2px}
.recht .hinweis{padding:14px 16px;border-left:4px solid var(--signal);background:var(--paper);margin:0 0 28px}
.download{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;margin-top:32px}
.download ol{padding-left:1.2em}
.download li{margin-bottom:.6em}
@media (max-width:820px){.download{grid-template-columns:1fr}}

.kern .schicht:nth-child(2){animation-delay:90ms}.kern .schicht:nth-child(3){animation-delay:180ms}.kern .schicht:nth-child(4){animation-delay:270ms}
.kern .schicht:nth-child(5){animation-delay:360ms}.kern .schicht:nth-child(6){animation-delay:450ms}.kern .schicht:nth-child(7){animation-delay:540ms}.kern .schicht:nth-child(8){animation-delay:630ms}
.hell{color:#E2EEF2!important}.h-klein{font-size:1.4rem}.h-mittel{font-size:var(--fs-3)}.abst-o{margin-top:10px}.schmal{max-width:280px}
[data-x]{margin-top:16px}[data-x0]{margin:0}.unten{text-align:left;caption-side:bottom;padding-top:10px}
figure{margin:0}
.nav .knopf{color:#fff}.nav .knopf:hover{color:#fff}
fieldset{border:0;padding:0;margin:0;min-width:0}
.aus .knopf{background:#fff;color:var(--ink);border-color:#fff}.aus .knopf:hover{background:var(--ice2);color:var(--ink)}
.aus .klein{color:#A9C3CC}
@media (max-width:820px){.kern{width:72%;max-width:300px;justify-self:center}}

/* ===== Website 8.1 · 28.10.2026 ===== */
.eyebrow{font-size:.82rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--petrol);margin:0 0 .9em}
.eyebrow.hell,.dunkel .eyebrow{color:var(--ice3)}
.dunkel h2{color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.knopf.signal{background:var(--signal);border-color:var(--signal);color:#1d0e02}
.knopf.signal:hover{background:#F09A4A;border-color:#F09A4A;color:#1d0e02}
.abst-o2{margin-top:36px}.abst-o3{margin-top:56px}
/* Held mit Produkt */
.held2{padding-top:clamp(40px,6vw,80px);overflow:hidden}
.held2 .wrap:first-child{grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr)}
.held2 h1{font-size:clamp(2.3rem,1.5rem + 3.2vw,4.4rem)}
.browser{margin:0;border-radius:14px;background:var(--paper);border:1px solid var(--line);box-shadow:0 50px 90px -50px rgba(15,47,58,.55),0 0 0 6px rgba(198,226,235,.35);overflow:hidden;transform:perspective(1800px) rotateY(-4deg);transform-origin:left center}
.browser-leiste{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#E9F2F5;border-bottom:1px solid var(--line)}
.browser-leiste i{width:9px;height:9px;border-radius:50%;background:#C3D6DD}
.browser-leiste span{margin-left:10px;font-size:.74rem;color:var(--slate)}
.browser video{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--firn)}
.browser figcaption{padding:8px 12px;font-size:.78rem;color:var(--slate);border-top:1px solid var(--line)}
.vertrauen{list-style:none;padding:0;margin:clamp(36px,5vw,64px) 0 0;display:flex;flex-wrap:wrap;gap:10px 28px;border-top:1px solid var(--line);padding-top:20px}
.vertrauen li{font-size:.92rem;color:var(--slate);display:flex;align-items:center;gap:8px}
.vertrauen li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--signal)}
@media (max-width:900px){.held2 .wrap:first-child{grid-template-columns:1fr}.browser{transform:none}}
/* Nutzen-Filme */
#nutzen .film{align-items:start}
#nutzen .film-liste{margin-top:0}
/* Bento */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;margin-top:40px}
.bento-k{background:var(--firn);border:1px solid var(--line);border-radius:18px;padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:18px;overflow:hidden}
.bento-k h3{font-size:1.3rem}
.bento-k p{color:var(--slate);margin-bottom:0}
.bento-k .eyebrow{margin-bottom:.5em}
.bento-k.gross{grid-column:span 3}
.bento-k.bild,.bento-k.handy{grid-column:span 2}
.bento-k.text{grid-column:span 2;background:var(--ink);border-color:var(--ink)}
.bento-k.text h3{color:#fff}.bento-k.text p{color:#BFD9E2}.bento-k.text .eyebrow{color:var(--signal)}
.bento-k .bildschirm{margin:auto -1px -1px;box-shadow:none}
.bento-k.gross .bildschirm{margin-right:calc(-1 * clamp(20px,2.4vw,30px) - 1px);border-radius:12px 0 0 0}
.bento-k.handy{flex-direction:row;align-items:flex-end}
.bento-k .klein-h{max-width:130px;flex:0 0 130px;border-width:6px;border-radius:20px;margin-bottom:calc(-1 * clamp(20px,2.4vw,30px) - 40px)}
@media (max-width:1000px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bento-k.gross{grid-column:span 2}.bento-k.bild,.bento-k.handy,.bento-k.text{grid-column:span 1}}
@media (max-width:640px){.bento{grid-template-columns:1fr}.bento-k.gross,.bento-k.bild,.bento-k.handy,.bento-k.text{grid-column:auto}.bento-k.handy{flex-direction:column;align-items:flex-start}}
/* Einsätze */
.faelle{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:36px}
.fall{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px}
.fall b{display:block;font-stretch:110%;font-size:1.2rem;margin-bottom:12px}
.fall .weg{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px}
.fall .weg span:not(.pfeil){padding:5px 10px;border-radius:999px;background:var(--ice1);font-weight:600;font-size:.88rem}
.fall .pfeil{color:var(--signal);font-weight:800}
.fall p:last-child{color:var(--slate);font-size:.95rem;margin:0}
@media (max-width:1000px){.faelle{grid-template-columns:1fr 1fr}}@media (max-width:560px){.faelle{grid-template-columns:1fr}}
/* Preise 8.1 */
.preise-kopf{text-align:center;display:grid;justify-items:center}
.preise-kopf .lead{max-width:56ch}
.preis-schalter{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin:28px 0 30px}
.segment{display:inline-flex;flex-wrap:wrap;padding:4px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}
.segment label{position:relative}
.segment input{position:absolute;opacity:0;width:1px;height:1px}
.segment span{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border-radius:999px;cursor:pointer;font-weight:600;font-size:.94rem}
.segment em{font-style:normal;font-size:.78rem;color:var(--ok);font-weight:700}
.segment input:checked+span{background:var(--ink);color:#fff}.segment input:checked+span em{color:#9FE0C0}
.segment input:focus-visible+span{outline:3px solid var(--signal);outline-offset:2px}
.waehrung select{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font:600 .94rem "Archivo",sans-serif;color:var(--ink)}
.plaene{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.plan{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:26px 22px;display:flex;flex-direction:column}
.plan.empfohlen{border:2px solid var(--ink);box-shadow:0 30px 60px -40px rgba(15,47,58,.6)}
.plan .band{position:absolute;top:-13px;left:22px;background:var(--signal);color:#1d0e02;font-size:.78rem;font-weight:700;padding:4px 12px;border-radius:999px}
.plan h3{font-size:1.45rem;margin-bottom:.2em}
.plan .wofuer{color:var(--slate);font-size:.94rem;min-height:2.9em;margin-bottom:.6em}
.plan .rollen-m{font-weight:700;margin-bottom:.3em}
.plan .preis{margin:0;font-variant-numeric:tabular-nums}
.plan .preis [data-p=betrag]{font-stretch:112%;font-weight:800;font-size:2rem;letter-spacing:-.02em}
.plan .einheit{color:var(--slate)}
.plan .voraus{min-height:1.4em;margin:2px 0 0}
.plan .prorolle{font-size:.9rem;color:var(--petrol);font-weight:600;margin:6px 0 18px}
.plan .knopf{width:100%}
.link-angebot{display:block;text-align:center;margin:10px 0 18px;font-size:.92rem}
.haken{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.haken li{position:relative;padding-left:26px;font-size:.93rem}
.haken li::before{content:"";position:absolute;left:2px;top:.42em;width:12px;height:7px;border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);transform:rotate(-45deg)}
.plan .haken{border-top:1px solid var(--line);padding-top:16px;margin-top:auto}
.plan-gross{margin-top:16px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:center;background:var(--ink);color:#E9F3F6;border-radius:18px;padding:26px 28px}
.plan-gross h3{color:#fff;font-size:1.45rem}.plan-gross p{color:#BFD9E2;margin-bottom:0}
.plan-gross .rechts{display:grid;gap:6px;justify-items:start}
.plan-gross .preis{font-weight:800;font-stretch:110%;font-size:1.25rem;color:#fff}
.plan-gross .knopf{margin-top:8px}
.klein-stufen{text-align:center;color:var(--slate);margin:18px auto 0;max-width:none}
.preis-zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:48px}
.inklusive,.preis-zwei .rechner{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:26px 28px}
.inklusive h3,.preis-zwei .rechner h3{font-size:1.25rem}
.preis-zwei .rechner{display:grid;gap:12px;align-content:start;margin:0;overflow:visible}
.preis-zwei .rechner label{font-weight:700}
.preis-zwei .rechner input[type=range]{flex:1;accent-color:var(--petrol);height:32px}
.preis-zwei .aus{background:var(--ink);color:#fff;border-radius:14px;padding:20px;display:grid;gap:10px}
.preis-zwei .betrag{font-size:2.4rem}
.addons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.addons div{border-top:2px solid var(--ink);padding-top:14px}
.addons b{display:block;font-stretch:108%;font-size:1.08rem}
.addon-preis{display:block;color:var(--petrol);font-weight:700;margin:2px 0 6px}
.tabelle-auf{margin-top:36px;border-top:1px solid var(--line);padding-top:14px}
.tabelle-auf summary,.faq summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.tabelle-auf .preistabelle{margin-top:10px}
.faq{margin-top:56px;max-width:820px}
.faq details{border-top:1px solid var(--line);padding:4px 0}
.faq details[open] summary{color:var(--petrol)}
.faq details p{color:var(--slate);margin:0 0 14px}
@media (max-width:1000px){.plaene{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.plaene,.preis-zwei,.addons,.plan-gross{grid-template-columns:1fr}.plan .wofuer{min-height:0}}
/* Schluss + Kontakt */
.schluss{background:linear-gradient(135deg,var(--ink) 0%,#16495A 100%);color:#fff;text-align:center}
.schluss h2{color:#fff;font-size:clamp(2rem,1.4rem + 2.6vw,3.6rem)}
.schluss .lead{color:#BFD9E2;margin:0 auto}
.schluss .knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.schluss .knopf.leer{color:#fff;border-color:#fff}.schluss .knopf.leer:hover{background:#fff;color:var(--ink)}
.mail-gross{font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);font-weight:800;font-stretch:110%;margin-top:18px}
.mail-gross a{text-decoration:none;border-bottom:2px solid var(--signal);color:var(--ink)}
/* Bento-Raster 8.1b */
.bento{grid-auto-flow:dense}
.bento-k.bild,.bento-k.handy{grid-row:span 2}
.bento-k.handy{flex-direction:column;align-items:stretch}
.bento-k .klein-h{max-width:210px;flex:none;align-self:center;border-width:7px;border-radius:26px;margin-bottom:-90px}
.bento-k.bild .bildschirm{margin-top:auto}
.bento-k.bild .bildschirm img{object-position:30% 40%}
@media (max-width:1000px){.bento-k.bild,.bento-k.handy{grid-row:auto}}
.preis-zwei .rechner{grid-template-columns:1fr;border-radius:18px}
.preis-zwei .rechner .aus{padding:20px;align-content:start}
.preis-zwei .rechner .aus .knopf{justify-self:start}
.bento-t{flex-shrink:0}
.bento-k.handy .klein-h{max-width:190px;margin-bottom:-170px;flex-shrink:1;min-height:0}

/* ===== 8.2 Held mit HTML-Szene ===== */
.held3{position:relative;padding:clamp(48px,7vw,104px) 0 clamp(56px,7vw,96px);overflow:hidden;
 background:radial-gradient(1200px 520px at 50% 108%,rgba(151,202,219,.55),transparent 70%),radial-gradient(700px 380px at 88% 8%,rgba(232,132,42,.10),transparent 70%),linear-gradient(180deg,#F3F8F9 0%,#EAF4F7 100%)}
.held3::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(15,47,58,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(15,47,58,.045) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 80%);pointer-events:none}
.held3 .wrap{position:relative}
.held3-text{text-align:center;display:grid;justify-items:center}
.held3 h1{font-size:clamp(2.6rem,1.4rem + 5.2vw,6.2rem);letter-spacing:-.035em;line-height:.95;margin-bottom:.3em}
.held3 .claim{font-weight:700;font-stretch:108%;font-size:var(--fs-2);color:var(--petrol);margin-bottom:.7em}
.held3 .lead{max-width:58ch;margin-inline:auto}
.held3 .knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:26px 0 0}
.knopf.gross{min-height:54px;padding:0 26px;font-size:1.04rem}
.knopf.signal{box-shadow:0 10px 24px -12px rgba(232,132,42,.9)}
.sz-hinweis{text-align:center;font-size:.8rem;color:var(--slate);margin:14px auto 0}
.held3 .vertrauen{justify-content:center;border-top:0;margin-top:26px;padding-top:0}
/* Szene */
.szene{position:relative;width:100%;max-width:1120px;margin:clamp(40px,6vw,72px) auto 0;aspect-ratio:1120/650}
.sz-in{position:absolute;left:0;top:0;width:1120px;height:650px;transform-origin:0 0;transform:scale(var(--s,1));font-family:"Archivo",system-ui,sans-serif;color:var(--ink)}
.sz-app{position:absolute;left:150px;top:20px;width:820px;height:560px;background:#F6FAFB;border-radius:18px;overflow:hidden;border:1px solid rgba(15,47,58,.12);box-shadow:0 60px 120px -50px rgba(15,47,58,.55),0 24px 48px -30px rgba(15,47,58,.35)}
.sz-bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#fff;border-bottom:1px solid #E1ECEF}
.sz-bar i{width:10px;height:10px;border-radius:50%;background:#D5E3E8}
.sz-bar span{margin-left:12px;font-size:12px;color:#7A8C93;background:#F1F6F8;border-radius:6px;padding:3px 60px 3px 10px}
.sz-body{display:flex;height:526px}
.sz-side{width:200px;background:linear-gradient(180deg,#123947,#0F2F3A);color:#DCEBF0;padding:18px 12px}
.sz-logo{display:flex;gap:9px;align-items:center;margin-bottom:22px;padding:0 6px}
.sz-logo svg{width:22px;filter:brightness(1.6)}
.sz-logo b{display:block;font-size:15px;color:#fff}.sz-logo small{display:block;font-size:10px;color:#9FBAC3;line-height:1.2}
.sz-side ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.sz-side li{display:flex;align-items:center;gap:10px;font-size:13.5px;padding:9px 10px;border-radius:10px}
.sz-side li i{width:14px;height:14px;border-radius:4px;border:1.6px solid #7FA3B0}
.sz-side li.an{background:#fff;color:var(--ink);font-weight:700}.sz-side li.an i{border-color:var(--ink)}
.sz-main{flex:1;padding:24px 28px}
.sz-kopf{display:flex;gap:16px;align-items:center;margin-bottom:20px}
.sz-av{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#F2A779,#E8842A);color:#fff;display:grid;place-items:center;font-weight:800;font-size:20px}
.sz-ber{font-size:11px;letter-spacing:.1em;font-weight:700;color:var(--petrol);margin:0 0 4px}
.sz-rolle{font-size:28px;font-weight:800;font-stretch:110%;letter-spacing:-.02em;margin:0;line-height:1.1}
.sz-meta{font-size:13px;color:#5B6E76;margin:4px 0 0}
.sz-weg{background:#fff;border:1px solid #DCE8EC;border-left:4px solid var(--petrol);border-radius:14px;padding:16px 18px;box-shadow:0 10px 30px -24px rgba(15,47,58,.5)}
.sz-weg ol{list-style:none;margin:8px 0 12px;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.sz-weg li{display:grid;justify-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#7A8C93;background:#F3F7F8;border:1px solid #E3ECEF;border-radius:10px;padding:10px 2px 8px;transition:background .5s,color .5s,border-color .5s}
.sz-weg .pk{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#E3ECEF;color:transparent;transition:background .5s,color .5s,transform .5s}
.sz-weg .pk svg{width:14px}
.sz-weg li.fertig{background:#EAF6EF;border-color:#CFE8DA;color:#21603F}.sz-weg li.fertig .pk{background:#2E7D5B;color:#fff}
.sz-weg li.aktiv{background:#FFF4EA;border-color:#F4C79E;color:#A3500D}.sz-weg li.aktiv .pk{background:var(--signal);animation:puls 1.2s ease-in-out infinite}
@keyframes puls{50%{transform:scale(1.15)}}
.sz-status{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;margin:0}
.sz-punkt{width:9px;height:9px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 4px rgba(232,132,42,.18)}
.szene[data-s="6"] .sz-punkt{background:#2E7D5B;box-shadow:0 0 0 4px rgba(46,125,91,.18)}
.sz-leer{margin-top:18px;display:grid;gap:10px}
.sz-leer span{height:44px;border-radius:12px;background:#fff;border:1px solid #E3ECEF}
.sz-leer span:nth-child(2){width:86%}.sz-leer span:nth-child(3){width:64%}
.sz-karte,.sz-siegel{position:absolute;background:#fff;border-radius:16px;border:1px solid rgba(15,47,58,.1);box-shadow:0 40px 80px -36px rgba(15,47,58,.55);padding:16px 18px;opacity:0;transform:translateY(18px) scale(.97);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.sz-karte.zeig,.sz-siegel.zeig{opacity:1;transform:none}
.sz-a{left:690px;top:70px;width:410px}
.sz-kh{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.1em;font-weight:800;color:var(--petrol)}.sz-kh svg{width:20px}
.sz-frage{font-size:16.5px;font-weight:800;line-height:1.3;margin:8px 0 10px}
.sz-antw{font-size:14px;line-height:1.45;color:#2B4752;background:#F3F8F9;border:1px solid #DCE8EC;border-radius:10px;padding:10px 12px;margin:0;min-height:64px}
.sz-cur{display:inline-block;width:2px;height:16px;background:var(--petrol);vertical-align:-3px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.sz-b{left:0;top:330px;width:330px}
.sz-bt{font-size:17px;font-weight:800;margin:2px 0 10px;line-height:1.25}
.sz-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}.sz-chips span{font-size:12px;font-weight:600;background:#EEF5F7;border-radius:999px;padding:4px 10px}
.sz-frei,.sz-best{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#21603F;margin:0;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.sz-frei svg,.sz-best svg{width:16px;background:#2E7D5B;color:#fff;border-radius:50%;padding:2px}
.sz-frei.zeig,.sz-best.zeig{opacity:1;transform:none}
.sz-c{left:740px;top:330px;width:350px}
.sz-pt{font-size:15px;font-weight:700;margin:2px 0 12px;line-height:1.3}
.sz-balken{height:8px;border-radius:99px;background:#E3ECEF;overflow:hidden;margin-bottom:10px}
.sz-balken span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--petrol),#2E7D5B);border-radius:99px;transition:width 2.2s cubic-bezier(.4,0,.2,1)}
.szene[data-s="4"] .sz-balken span,.szene[data-s="5"] .sz-balken span,.szene[data-s="6"] .sz-balken span{width:100%}
.sz-siegel{left:800px;top:520px;display:flex;gap:12px;align-items:center;padding:12px 18px 12px 12px;background:var(--ink);color:#fff;border-color:var(--ink)}
.sz-sk{width:38px;height:38px;border-radius:50%;background:var(--signal);display:grid;place-items:center;color:#1d0e02}.sz-sk svg{width:20px}
.sz-siegel b{display:block;font-size:15px}.sz-siegel small{display:block;font-size:12px;color:#BFD9E2}
@media (prefers-reduced-motion:reduce){.sz-karte,.sz-siegel,.sz-frei,.sz-best{transition:none}}
/* Erscheinen beim Scrollen */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
/* 8.2 Plangruppen: Kleinbetriebe + KMU, je drei Karten */
.plaene{grid-template-columns:repeat(3,minmax(0,1fr))}
.plan-gruppe{font-size:1.05rem;font-stretch:108%;color:var(--slate);margin:34px 0 16px;display:flex;align-items:center;gap:14px}
.plan-gruppe::after{content:"";flex:1;height:1px;background:var(--line)}
@media (max-width:1000px){.plaene{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.plaene{grid-template-columns:1fr}}
.held3 .wrap{display:block}
.held3 .held3-text{display:grid;grid-template-columns:1fr;justify-items:center}
.held3 .vertrauen{display:flex}
.held3 .held3-text{gap:0}.held3 .claim{margin-top:.2em}

/* ===== 8.4 Lebende Funktions-Szenen ===== */
.bento84 .bento-k{gap:20px}
.bento84 .bento-k.bild,.bento84 .bento-k.handy{grid-row:span 2}
.bento84 .bento-k.frag,.bento84 .bento-k.zwei{grid-column:span 2;background:var(--ink);border-color:var(--ink)}
.bento84 .bento-k.frag h3,.bento84 .bento-k.zwei h3{color:#fff}.bento84 .bento-k.frag p,.bento84 .bento-k.zwei p{color:#BFD9E2}
.bento84 .bento-k.frag .eyebrow,.bento84 .bento-k.zwei .eyebrow{color:var(--signal)}
.mini{position:relative;margin-top:auto;border-radius:14px;background:#fff;border:1px solid var(--line);padding:16px;font-size:14px;line-height:1.4;color:var(--ink);box-shadow:0 24px 50px -36px rgba(15,47,58,.55);overflow:hidden}
.bento-k.text .mini,.bento84 .frag .mini,.bento84 .zwei .mini{background:#163E4C;border-color:#24505F;color:#E9F3F6;box-shadow:none}
.mini [data-on]{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.mini [data-on].an{opacity:1;transform:none}
.mk-mb{font-size:11px;color:#7A8C93;margin:12px 0 0;text-align:right}.mk-mb.hell{color:#8FB2BE}
.mk-label{font-size:11px;letter-spacing:.1em;font-weight:800;color:var(--petrol);margin:0 0 6px}
.mk-cur{display:inline-block;width:2px;height:15px;background:var(--petrol);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
/* Wissensdatenbank */
.mk-kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.mk-kacheln span{background:var(--ice1);border-radius:10px;padding:8px 10px;font-size:12px;color:var(--slate)}
.mk-kacheln b{display:block;font-size:20px;color:var(--ink);font-stretch:110%}
.mk-such{display:flex;align-items:center;gap:8px;border:1.5px solid var(--petrol);border-radius:999px;padding:9px 14px;font-weight:600;min-height:42px}
.mk-such svg{width:16px;color:var(--petrol);flex:none}
.mk-antw{margin-top:12px;border-left:4px solid var(--petrol);background:#F6FAFB;border-radius:0 10px 10px 0;padding:10px 12px}
.mk-zitat{margin:0 0 8px;font-weight:600}
.mk-belege{display:flex;flex-wrap:wrap;gap:6px}.mk-belege span{font-size:12px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px 8px}
.mk-belege em{font-style:normal;font-weight:800;color:var(--petrol);margin-right:6px}
.mk-wsp{margin-top:10px;display:flex;gap:10px;align-items:center;background:#FFF4EA;border:1px solid #F4C79E;border-radius:10px;padding:8px 10px}
.mk-wsp>span{width:22px;height:22px;border-radius:50%;background:var(--signal);color:#1d0e02;display:grid;place-items:center;font-weight:800;flex:none}
.mk-wsp p{margin:0;font-size:13px;flex:1}
.mk-knopf{background:var(--ink);color:#fff;border-radius:999px;padding:6px 14px;font-size:13px}
.mk-toast{position:absolute;right:14px;top:14px;display:flex;gap:6px;align-items:center;background:#2E7D5B;color:#fff;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700}
.mk-toast svg,.mk-ok svg,.mk-richtig svg,.mk-formate em svg,.mk-auf em svg{width:14px}
/* Besser machen */
.mk-vorschlag{background:#F6FAFB;border:1px dashed var(--petrol);border-radius:10px;padding:10px 12px;margin-bottom:12px}
.mk-vorschlag p{margin:6px 0 0;font-size:13px}
.mk-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--petrol)}.mk-chip svg{width:16px}
.mk-brett{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.mk-brett li{font-size:11.5px;font-weight:700;color:#7A8C93;border-bottom:3px solid var(--line);padding:0 0 6px;text-align:center;opacity:1!important;transform:none!important}
.mk-brett li span{display:block;font-size:10px;font-weight:600}
.mk-brett li.an{color:var(--ink);border-color:var(--petrol)}
.mk-bahn{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:10px;min-height:96px}
.mk-karte{grid-row:1;background:#fff;border:1.5px solid var(--ink);border-radius:10px;padding:8px;font-size:12.5px;font-weight:600;box-shadow:0 10px 20px -14px rgba(15,47,58,.6);transition:all .5s cubic-bezier(.2,.7,.2,1);grid-column:1/span 2}
.mk-karte b{display:inline-block;font-size:10px;background:var(--ice1);border-radius:4px;padding:1px 5px;margin-right:6px}
.mk-ok{display:flex;gap:5px;align-items:center;color:#21603F;font-size:12px;margin-top:6px}
.mk-ok svg{background:#2E7D5B;color:#fff;border-radius:50%;padding:2px}
/* Lernlabor */
.mk-frage{font-weight:800;font-size:15px;margin:0 0 10px}
.mk-opts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mk-opts li{border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;font-weight:600;opacity:1!important;transform:none!important;transition:background .4s,border-color .4s}
.mk-opts li.mk-r.an{background:#EAF6EF;border-color:#2E7D5B;color:#21603F}
.mk-richtig{display:flex;gap:6px;align-items:center;color:#21603F;font-weight:700;font-size:13px;margin:10px 0 0}
.mk-richtig svg{background:#2E7D5B;color:#fff;border-radius:50%;padding:2px}
.mk-fort{margin-top:12px}.mk-fort div{height:8px;border-radius:99px;background:var(--ice1);overflow:hidden}
.mk-fort span{display:block;height:100%;width:70%;background:linear-gradient(90deg,var(--petrol),#2E7D5B)}
.mk-fort small{font-size:12px;color:var(--slate)}
/* Frag den Kern */
.mk-kh{display:flex;align-items:center;gap:8px;background:#0F2F3A;border:1px solid #2C5160;border-radius:12px;padding:10px 12px;font-weight:700;min-height:44px}
.mk-kh svg{width:20px;flex:none;filter:brightness(1.6)}.mini-frag .mk-cur{background:var(--ice3)}
.mini-frag .mk-label{color:var(--ice3);margin-top:12px}
.mk-risiko{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.mk-risiko li{display:grid;grid-template-columns:1fr 90px 26px;gap:8px;align-items:center;font-size:13px}
.mk-risiko i{display:block;height:8px;border-radius:99px;background:linear-gradient(90deg,#E8842A,#F2A779);width:var(--w)}
.mk-risiko b{text-align:right;color:#fff}
.mk-formate{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:12px 0 0}
.mk-formate span{font-size:12px;font-weight:700;background:#fff;color:var(--ink);border-radius:6px;padding:3px 8px}
.mk-formate em{font-style:normal;display:flex;gap:4px;align-items:center;font-size:12px;color:#9FE0C0;margin-left:4px}
/* Zwei Zukünfte */
.mk-chart{width:100%;height:auto;display:block}
.mk-chart path{stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 2.2s ease,opacity .3s!important;transform:none!important}
.mk-chart path.an{stroke-dashoffset:0}
.mk-leg{display:flex;flex-wrap:wrap;gap:14px;margin:8px 0 0;font-size:12.5px}
.mk-leg span{display:flex;align-items:center;gap:6px}.mk-leg span::before{content:"";width:16px;height:4px;border-radius:2px}
.mk-leg .o::before{background:#E8842A}.mk-leg .m::before{background:#97CADB}
/* Handy */
.mini-handy{background:transparent;border:0;box-shadow:none;padding:0 0 4px;display:grid;justify-items:center}
.mk-phone{width:230px;border:8px solid var(--ink);border-radius:30px;background:#F6FAFB;padding:22px 12px 16px;position:relative;box-shadow:0 30px 60px -36px rgba(15,47,58,.7)}
.mk-notch{position:absolute;top:6px;left:50%;width:60px;height:8px;margin-left:-30px;border-radius:6px;background:var(--ink)}
.mk-hallo{font-weight:800;margin:0 0 10px}
.mk-pk{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mk-pk span{border-radius:10px;padding:18px 8px 8px;color:#fff;font-weight:700;font-size:12.5px}
.mk-pk .k0{background:#123947}.mk-pk .k1{background:#1B6782}.mk-pk .k2{background:#2E7D5B}.mk-pk .k3{background:#C2591A}
.mk-auf{margin-top:10px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;font-size:12.5px;font-weight:600}
.mk-auf b svg{width:16px}.mk-auf em{font-style:normal;margin-left:auto;display:flex;gap:4px;align-items:center;color:#21603F;font-size:11.5px}
@media (max-width:1000px){.bento84 .bento-k.frag,.bento84 .bento-k.zwei{grid-column:span 1}}
@media (max-width:640px){.bento84 .bento-k.frag,.bento84 .bento-k.zwei{grid-column:auto}.mk-kacheln{grid-template-columns:repeat(2,1fr)}.mk-brett li{font-size:9.5px}.mk-karte{font-size:11px}}
@media (prefers-reduced-motion:reduce){.mini [data-on]{opacity:1;transform:none}.mk-cur{display:none}}

/* ===== 8.4 Datenweg interaktiv ===== */
.datenweg{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:24px;margin-top:36px;align-items:start}
.dw-t{font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--petrol);margin:0 0 8px}
.dw-knoepfe{display:grid;gap:8px;margin-bottom:22px}
.dw-knoepfe button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:2px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line);background:#fff}
.dw-knoepfe button small{color:var(--slate)}
.dw-knoepfe button[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--firn)}
.dw-knoepfe button:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.dw-bild{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;display:grid;gap:16px}
.dw-zone{position:relative;border:2px dashed var(--ice3);border-radius:16px;padding:30px 16px 16px;display:grid;grid-template-columns:1fr 40px 1.3fr;align-items:center;gap:8px;transition:border-color .4s,background .4s}
.datenweg[data-ort=cloud] .dw-zone{border-color:var(--petrol);background:#F3F8F9}
.dw-zone>span{position:absolute;top:8px;left:14px;font-size:.78rem;font-weight:800;color:var(--petrol);letter-spacing:.04em}
.dw-box{border-radius:12px;padding:12px;display:grid;gap:3px;background:var(--firn);border:1px solid var(--line)}
.dw-box small{color:var(--slate);font-size:.82rem}
.dw-box.srv{background:var(--ink);color:#fff;border-color:var(--ink)}.dw-box.srv small{color:#BFD9E2}.dw-box.srv svg{width:22px;filter:brightness(1.6)}
.dw-pfeil{height:3px;background:var(--petrol);position:relative}.dw-pfeil::after{content:"";position:absolute;right:-2px;top:-5px;border:6px solid transparent;border-left-color:var(--petrol)}
.dw-raus{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:8px;margin-left:55%;transition:opacity .4s}
.dw-linie{height:44px;border-left:3px dashed var(--signal);margin-left:18px}
.dw-box.ki{background:#FFF4EA;border-color:#F4C79E}
.datenweg[data-ki="1"] .dw-raus .dw-linie{border-color:var(--line)}.datenweg[data-ki="1"] .dw-box.ki{background:#EAF6EF;border-color:#CFE8DA;color:#21603F}
.dw-text{border-top:1px solid var(--line);padding-top:12px}.dw-text p:not(.dw-t){margin:0;font-weight:600}
.dw-s-cloud,.dw-z-cloud,.datenweg [data-fall],.dw-box.ki [data-k]{display:none}
.datenweg[data-ort=cloud] .dw-s-cloud,.datenweg[data-ort=cloud] .dw-z-cloud{display:block}
.datenweg[data-ort=cloud] .dw-s-netz,.datenweg[data-ort=cloud] .dw-z-netz{display:none}
.datenweg[data-ki="1"] [data-k="1"],.datenweg[data-ki="2"] [data-k="2"],.datenweg[data-ki="3"] [data-k="3"]{display:block;font-weight:700}
.datenweg[data-ort=netz][data-ki="1"] [data-fall=netz1],.datenweg[data-ort=netz][data-ki="2"] [data-fall=netz2],.datenweg[data-ort=netz][data-ki="3"] [data-fall=netz3],
.datenweg[data-ort=cloud][data-ki="1"] [data-fall=cloud1],.datenweg[data-ort=cloud][data-ki="2"] [data-fall=cloud2],.datenweg[data-ort=cloud][data-ki="3"] [data-fall=cloud3]{display:block}
.dw-immer{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dw-immer li{border-top:2px solid var(--ink);padding-top:12px;display:grid;gap:4px}.dw-immer span{color:var(--slate);font-size:.95rem}
@media (max-width:860px){.datenweg,.dw-immer{grid-template-columns:1fr}.dw-zone{grid-template-columns:1fr;}.dw-pfeil{width:3px;height:24px;justify-self:center}.dw-pfeil::after{right:-5px;top:auto;bottom:-10px;border-left-color:transparent;border-top-color:var(--petrol)}.dw-raus{margin-left:0}}

/* ===== 8.4 Vergleich ohne/mit ===== */
.vergleich{margin-top:48px;background:var(--ink);color:#E9F3F6;border-radius:20px;padding:clamp(22px,3vw,36px);display:grid;gap:18px}
.vg-kopf h3{color:#fff;font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem)}.vg-kopf p{color:#BFD9E2;margin:0;max-width:70ch}
.vg-ein{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.vg-ein label{display:grid;gap:6px;font-weight:700}.vg-ein output{color:var(--signal);font-variant-numeric:tabular-nums}
.vg-ein input{accent-color:var(--signal);width:100%;height:30px}
.vg-aus{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vg-spalte{border-radius:14px;padding:18px;display:grid;gap:4px;background:#163E4C}
.vg-spalte small{font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;color:#BFD9E2}
.vg-spalte b{font-size:clamp(1.8rem,1.4rem + 1.6vw,2.6rem);font-stretch:112%;color:#fff;font-variant-numeric:tabular-nums}
.vg-spalte span{color:#BFD9E2;font-size:.9rem}
.vg-spalte.ohne{border:2px solid var(--signal)}.vg-spalte.mit{border:2px solid #97CADB}
.vg-balken{height:12px;border-radius:99px;background:#0F2F3A;overflow:hidden;margin-top:8px}
.vg-balken i{display:block;height:100%;border-radius:99px;transition:width .5s ease}
.ohne .vg-balken i{background:var(--signal)}.mit .vg-balken i{background:#97CADB}
.vg-satz{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);font-weight:700;color:#fff;margin:0}
.vergleich .klein{color:#A9C3CC;margin:0}.vg-q{font-style:italic}
@media (max-width:700px){.vg-ein,.vg-aus{grid-template-columns:1fr}}

/* ===== 8.4 Zusätze ===== */
.klein-lead{font-size:1.05rem;max-width:60ch}
.zus-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0 10px}
.zus{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:8px}
.zus-ikon{width:52px;height:52px;border-radius:14px;background:var(--ice1);color:var(--petrol);display:grid;place-items:center}.zus-ikon svg{width:30px}
.zus h4{font-size:1.25rem;font-stretch:110%;margin:6px 0 0}
.zus-preis{font-size:1.35rem;font-weight:800;color:var(--ink);margin:0}
.zus .klein{margin:0 0 6px}
.zus-wann{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:.92rem;color:var(--slate)}
@media (max-width:900px){.zus-raster{grid-template-columns:1fr}}

/* ===== 8.4 Testseite ===== */
.ts-held{padding-bottom:clamp(40px,6vw,80px)}
.ts-grid{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,64px);align-items:center}
.ts-v{justify-content:flex-start!important;border-top:0;padding-top:0;margin-top:18px}
.ts-karte{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;display:grid;gap:10px;box-shadow:0 40px 80px -50px rgba(15,47,58,.6)}
.ts-icon{width:64px;height:64px;border-radius:18px;background:var(--ink);display:grid;place-items:center}.ts-icon svg{width:34px;filter:brightness(1.6)}
.ts-name{font-size:1.5rem;font-weight:800;font-stretch:112%;margin:4px 0 0}
.ts-dl{width:100%}
.ts-sha summary{cursor:pointer;font-weight:600;font-size:.9rem}.ts-sha code{display:block;word-break:break-all;font-size:.78rem;background:var(--firn);padding:8px;border-radius:8px;margin-top:6px}
.ts-schritte{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:x}
.ts-schritte li{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;display:grid;gap:10px;align-content:start}
.ts-nr{width:40px;height:40px;border-radius:50%;background:var(--signal);color:#1d0e02;display:grid;place-items:center;font-weight:800;font-size:1.1rem}
.ts-schritte p{margin:4px 0 0;color:var(--slate)}
.ts-zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
.ts-br{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:12px}
.ts-br li{display:grid;gap:2px;padding:14px 16px;border-radius:14px;background:var(--firn);border:1px solid var(--line)}.ts-br span{color:var(--slate)}
.ts-faq{margin-top:0}
@media (max-width:860px){.ts-grid,.ts-zwei,.ts-schritte{grid-template-columns:1fr}}
/* 8.4b Raster: Reihe 2 drei gleiche Karten, Reihe 3 Zwei Zukünfte breit */
.bento84 .bento-k.bild,.bento84 .bento-k.mobil,.bento84 .bento-k.frag{grid-row:auto;grid-column:span 2}
.bento84 .bento-k.zwei{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:28px}
.bento84 .bento-k.zwei .mini{margin-top:0}
.bento84 .bento-k.mobil .mini{margin-top:auto}
.bento84 .mini-wdb{min-height:330px}.bento84 .mini-bes{min-height:250px}
@media (max-width:1000px){.bento84 .bento-k.bild,.bento84 .bento-k.mobil,.bento84 .bento-k.frag{grid-column:span 1}.bento84 .bento-k.zwei{grid-template-columns:1fr}}
@media (max-width:640px){.bento84 .bento-k.bild,.bento84 .bento-k.mobil,.bento84 .bento-k.frag{grid-column:auto}}
.bento84 .mini-wdb{min-height:300px}
.ts-held h1{font-size:clamp(2.2rem,1.4rem + 3vw,4rem)}

/* ===== 8.5 Hintergrund-Rhythmus ===== */
:root{--eis-tief:#E2EFF3;--warm:#FBF4EC}
body{background:#F4F8F9}
.ton-weiss{background:#fff}
.ton-eis{background:linear-gradient(180deg,#EAF4F7 0%,#F4F8F9 100%)}
.ton-eis-tief{background:radial-gradient(900px 420px at 85% 0%,rgba(151,202,219,.35),transparent 70%),var(--eis-tief)}
.ton-eis-tief .bento-k:not(.frag):not(.zwei){background:#fff}
.ton-preis{background:linear-gradient(180deg,#fff 0%,#F4F8F9 40%,#EAF4F7 100%)}
.ton-warm{background:var(--warm)}
.ton-warm .ehrlich li{border-color:#EADBC8}
.ton-eis .dw-bild,.ton-eis .dw-knoepfe button{background:#fff}
/* Preis-FAQ und Tabelle mittig */
#preise .faq{margin-left:auto;margin-right:auto}
#preise .faq h3{text-align:center}
#preise .tabelle-auf{max-width:820px;margin-left:auto;margin-right:auto}
#preise .tabelle-auf+.klein{text-align:center;margin-left:auto;margin-right:auto}
/* KI-Info im Datenweg */
.dw-ki-info{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:-8px 0 10px}
.dw-ki-info [data-k]{display:none}.dw-ki-info p{margin:0 0 8px}.dw-ki-info p:last-child{margin:0}
.datenweg[data-ki="1"] .dw-ki-info [data-k="1"],.datenweg[data-ki="2"] .dw-ki-info [data-k="2"],.datenweg[data-ki="3"] .dw-ki-info [data-k="3"]{display:block}
/* Zusätze: zwei Karten + KI-Verweis */
.zus-raster.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.zus-ki{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);background:#fff;border:1px dashed var(--petrol);border-radius:16px;padding:14px 18px;margin:0 0 10px}
.zus-ki:hover{border-style:solid}.zus-ki .zus-ikon{flex:none}.zus-ki b{color:var(--petrol)}
@media (max-width:900px){.zus-raster.zwei{grid-template-columns:1fr}}
/* Vergleich mit Lohn je Rolle */
.vg-tab{background:#163E4C;border-radius:14px;padding:16px;display:grid;gap:8px}
.vg-kopfzeile,.vg-zeile{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 40px;gap:8px;align-items:center}
.vg-kopfzeile{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#BFD9E2}
.vg-tab input{min-height:42px;border-radius:8px;border:1px solid #2C5160;background:#0F2F3A;color:#fff;font:600 .98rem "Archivo",sans-serif;padding:0 10px;width:100%}
.vg-tab input:focus{outline:2px solid var(--signal);outline-offset:1px}
.vg-l{font-variant-numeric:tabular-nums;text-align:right}
.vg-x{all:unset;cursor:pointer;width:40px;height:40px;border-radius:8px;display:grid;place-items:center;color:#BFD9E2;font-size:1.3rem}.vg-x:hover{background:#0F2F3A;color:#fff}
.vg-x:focus-visible,.vg-plus:focus-visible{outline:3px solid var(--signal)}
.vg-plus{all:unset;cursor:pointer;justify-self:start;font-weight:700;color:var(--signal);padding:6px 4px}
.vg-weitere{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.5fr) minmax(0,1fr);gap:8px;align-items:end;border-top:1px solid #2C5160;padding-top:10px;font-size:.9rem;color:#BFD9E2}
.vg-weitere label{display:grid;gap:4px;font-size:.78rem;font-weight:700}
@media (max-width:700px){.vg-weitere{grid-template-columns:1fr 1fr}.vg-weitere>span{grid-column:1/-1}}

/* 8.6 (29.10.2026): Kernbotschaft E7, Hinweis am Player, Balken mit Text, Einblenden ruhiger, Buch-Hinweis */
.zusatz{font-weight:700;color:var(--signal-t,#A3500D);margin:.2rem 0 .4rem;font-size:1.05rem}
.film-hinweis{margin:.7rem 0 0;font-size:15px;line-height:1.4;color:#d5e5ea}
.sz-leer span{display:flex;align-items:center;padding:0 14px;font-size:13px;font-weight:600;color:#3B5560}
.rv{transform:translateY(10px);transition-duration:.45s}
.buch-hinweis{margin-top:.6rem;opacity:.85}

/* 9.6 Menü mit Ratgeber und Hilfe: schmalere Abstände zwischen 901 und 1240 px */
.nav a{white-space:nowrap}
@media (min-width:901px) and (max-width:1240px){.nav{gap:12px}.nav a{font-size:.86rem}.kopf .knopf{padding:0 12px}}

/* 9.9 · 04.11.2026 · Handy-Breite: EN-Reiter 2x2 unter 400 px; unter 360 px lange Titel trennen, Pilot-Tabelle scrollt */
@media (max-width:400px){.h91t-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}.h91t-tabs>*{min-width:0}}@media (max-width:359px){h1,h2{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}.held3 h1{font-size:calc((100vw - 2rem) / 9.4)}.n10p-grid>*{min-width:0}.n10p-tw{overflow-x:auto;-webkit-overflow-scrolling:touch}}