/* =========================================================================
   Werbeseite, Redesign 2026 (Entwurf v2, Entscheide 10–14)
   Baut auf public/css/ci.css (Tokens, Schriften) auf; eigene Tokens heißen --c-*,
   damit Hell/Dunkel die CI-Tokens (--ink, --paper …) älterer Seiten nicht verändert.
   Amber nur für die Hauptaktion; dokumentierte Ausnahme: Logo-Marke (Entscheid 14).
   Bewegung nur über transform/opacity (plus Strom-Strich im SVG); prefers-reduced-motion stoppt alles.
   ========================================================================= */

/* Archivo mit Breitenachse (wdth 76–100, wght 500–800), selbst gehostet — SIL OFL 1.1,
   Quelle @fontsource-variable/archivo 5.3.0, per fontTools auf Latin + Achsenbereich reduziert. */
@font-face{font-family:'Archivo AKW';src:url('/images/site/fonts/archivo-wdth-latin.woff2') format('woff2-variations'),url('/images/site/fonts/archivo-wdth-latin.woff2') format('woff2');font-weight:500 800;font-stretch:76% 100%;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
    --f-display:'Archivo AKW','Archivo','Arial Narrow',system-ui,sans-serif;
    --f-body:'AK Sans','Segoe UI',system-ui,-apple-system,sans-serif;
    --f-mono:'AK Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    --wdth-hero:76%;      /* Hero-Titel, Seitentitel H1, Kennzahlen (Entscheid 14) */
    --wdth-sec:80%;       /* Sektionstitel H2 (Entscheid 14) */
    --ease:cubic-bezier(.2,.7,.2,1);
    --t-fast:160ms;--t-mid:240ms;--t-flow:700ms;
    --volt:#f2a516;--volt-press:#8a5708;--on-volt:#15171c;--on-volt-press:#f6f4ef;
    --glow:rgba(242,165,22,.36);
    --maxw-site:1320px;
    --gutter:clamp(16px,4vw,56px);

    /* Hell (Standard) */
    --c-bg:#f6f4ef;--c-surface:#fffefb;--c-layer:#e4dfd5;
    --c-line:#e4dfd5;--c-line2:#d6d0c4;
    --c-text:#15171c;--c-text2:#33363f;--c-muted:#6b6358;
    --c-ghost:rgba(21,23,28,.5);--c-outline:rgba(21,23,28,.42);--c-disabled:rgba(21,23,28,.3);
    --c-solid:#15171c;--c-on-solid:#f6f4ef;
    --c-card:#e4dfd5;
    --c-strip:#15171c;--c-on-strip:#f6f4ef;
    --c-track:rgba(21,23,28,.08);
    --c-input:#fffefb;
    --c-wordmark:#8a5708;
    --c-link:#15171c;
    --c-hatch:rgba(21,23,28,.07);
    --c-grid:rgba(21,23,28,.045);
    --c-shadow:0 1px 2px rgba(21,23,28,.06),0 26px 50px -32px rgba(21,23,28,.55);
    color-scheme:light;
}
@media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
        --c-bg:#15171c;--c-surface:#1c1f26;--c-layer:#3a3f4b;
        --c-line:rgba(246,244,239,.13);--c-line2:rgba(246,244,239,.24);
        --c-text:#f6f4ef;--c-text2:rgba(246,244,239,.84);--c-muted:rgba(246,244,239,.68);
        --c-ghost:rgba(246,244,239,.5);--c-outline:rgba(246,244,239,.44);--c-disabled:rgba(246,244,239,.3);
        --c-solid:#f6f4ef;--c-on-solid:#15171c;
        --c-card:rgba(246,244,239,.09);
        --c-strip:#23262f;--c-on-strip:#f6f4ef;
        --c-track:rgba(246,244,239,.1);
        --c-input:#15171c;
        --c-wordmark:#f2a516;
        --c-link:#f6f4ef;
        --c-hatch:rgba(246,244,239,.06);
        --c-grid:rgba(246,244,239,.035);
        --c-shadow:0 1px 2px rgba(0,0,0,.4),0 26px 50px -30px rgba(0,0,0,.9);
        color-scheme:dark;
    }
}
:root[data-theme="dark"]{
    --c-bg:#15171c;--c-surface:#1c1f26;--c-layer:#3a3f4b;
    --c-line:rgba(246,244,239,.13);--c-line2:rgba(246,244,239,.24);
    --c-text:#f6f4ef;--c-text2:rgba(246,244,239,.84);--c-muted:rgba(246,244,239,.68);
    --c-ghost:rgba(246,244,239,.5);--c-outline:rgba(246,244,239,.44);--c-disabled:rgba(246,244,239,.3);
    --c-solid:#f6f4ef;--c-on-solid:#15171c;
    --c-card:rgba(246,244,239,.09);
    --c-strip:#23262f;--c-on-strip:#f6f4ef;
    --c-track:rgba(246,244,239,.1);
    --c-input:#15171c;
    --c-wordmark:#f2a516;
    --c-link:#f6f4ef;
    --c-hatch:rgba(246,244,239,.06);
    --c-grid:rgba(246,244,239,.035);
    --c-shadow:0 1px 2px rgba(0,0,0,.4),0 26px 50px -30px rgba(0,0,0,.9);
    color-scheme:dark;
}

/* ---------- Basis (überschreibt die Grundwerte aus ci.css gezielt) ---------- */
html{-webkit-text-size-adjust:100%;scroll-padding-top:120px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body.site{background:var(--c-bg);color:var(--c-text);font:400 16px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh}
.site h1,.site h2,.site h3,.site h4{color:inherit}
.site p,.site ul,.site ol,.site dl,.site dd,.site figure{margin:0}
.site ul,.site ol{list-style:none;padding:0}
.site button,.site input,.site textarea,.site select{font:inherit;color:inherit}
.site svg{max-width:100%}
.site a{color:inherit}
.site ::selection{background:var(--volt);color:#15171c}
.site :focus-visible{outline:2px solid var(--c-text);outline-offset:3px}
.site code{font:500 .92em/1 var(--f-mono)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter;display:inline-block}
.i-fill{fill:currentColor;stroke:none}
.site .wrap{max-width:var(--maxw-site);margin-inline:auto;padding-inline:var(--gutter)}

.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;background:var(--c-solid);color:var(--c-on-solid);font:600 14px/1 var(--f-body);text-decoration:none;transition:top var(--t-fast) var(--ease)}
.skip:focus{top:12px}
#main:focus{outline:none}

/* ---------- Typografie ---------- */
.lbl{font:500 12px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted)}
.d-xl,.d-l,.d-m{font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;color:var(--c-text);text-wrap:balance;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;margin:0}
.d-xl{font-stretch:var(--wdth-hero);font-size:clamp(46px,9.4vw,140px);line-height:.88}
.d-l{font-stretch:var(--wdth-sec);font-size:clamp(38px,6.4vw,100px);line-height:.9}
.d-m{font-stretch:var(--wdth-hero);font-size:clamp(40px,6.6vw,96px);line-height:.9}
.h3{font-family:var(--f-display);font-weight:700;font-stretch:100%;text-transform:uppercase;font-size:clamp(17px,1.55vw,22px);line-height:1.12;letter-spacing:.012em;color:var(--c-text);-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.lead-t{max-width:min(62ch,100%);font-size:clamp(16px,1.35vw,18px);line-height:1.6;color:var(--c-muted)}
.t-link{color:var(--c-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-thickness var(--t-fast) var(--ease)}
.t-link:hover{text-decoration-thickness:2px}

/* ---------- Buttons (Radius 0, Hover nur Schatten/Farbe) ---------- */
.site .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border:1px solid transparent;border-radius:0;background:transparent;font:700 14px/1 var(--f-display);font-stretch:100%;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;color:var(--c-text);transform:none;box-shadow:none;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.site .btn:hover{transform:none}
.site .btn-volt{background:var(--volt);color:var(--on-volt);border-color:var(--volt)}
.site .btn-volt:hover{box-shadow:0 12px 30px -12px var(--glow),inset 0 -3px 0 rgba(21,23,28,.24)}
.site .btn-volt:active{background:var(--volt-press);border-color:var(--volt-press);color:var(--on-volt-press);box-shadow:none}
.site .btn-ghost,.site .btn-primary{background:transparent;border-color:var(--c-ghost);color:var(--c-text)}
.site .btn-ghost:hover,.site .btn-primary:hover{border-color:var(--c-text);background:var(--c-track);box-shadow:none}
.site .btn-s{min-height:40px;padding:0 16px;font-size:12px}
.site .btn-m{min-height:46px;padding:0 20px;font-size:13px}
.site .btn-block{display:flex;width:100%}
.site .btn .i{width:16px;height:16px}

/* ---------- Status & Badges (Form statt Farbe: voll = verfügbar, schraffiert = in Entwicklung) ---------- */
.bdg{display:inline-flex;align-items:center;gap:7px;min-height:22px;padding:2px 8px;border:1px solid var(--c-outline);border-radius:2px;font:500 10px/1.25 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--c-text);background:transparent;vertical-align:middle}
.bdg-solid{background:var(--c-solid);border-color:var(--c-solid);color:var(--c-on-solid)}
.bdg-live::before,.bdg-dev::before,.st-badge::before{content:"";width:8px;height:8px;flex:none}
.bdg-live::before{background:currentColor}
.bdg-dev::before{background:repeating-linear-gradient(135deg,currentColor 0 1.5px,transparent 1.5px 3.5px);box-shadow:inset 0 0 0 1px currentColor}
.st{display:inline-block;width:9px;height:9px;flex:none}
.st-live{background:var(--c-text)}
.st-dev{background:repeating-linear-gradient(135deg,var(--c-text) 0 1.5px,transparent 1.5px 3.5px);box-shadow:inset 0 0 0 1px var(--c-text)}
/* ältere Klassen (Funktionskatalog, Preise, /ci) im neuen Stil */
.st-badge{display:inline-flex;align-items:center;gap:7px;min-height:22px;padding:2px 8px;border:1px solid var(--c-outline);border-radius:2px;font:500 10px/1.25 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--c-text);background:transparent;vertical-align:middle}
.st-badge.b-live::before{background:currentColor}
.st-badge.b-dev::before{background:repeating-linear-gradient(135deg,currentColor 0 1.5px,transparent 1.5px 3.5px);box-shadow:inset 0 0 0 1px currentColor}
.tier-chip,.tier{font:500 10px/1.25 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
span.tier{display:inline-flex;align-items:center;min-height:22px;padding:2px 8px;border-radius:2px;border:1px dashed var(--c-outline);color:var(--c-muted)}
span.tier.tier-premium_plus{border-style:solid}
span.tier.tier-all_in{border-style:solid;background:var(--c-track);color:var(--c-text)}
.led{display:inline-block;width:9px;height:9px;flex:none;vertical-align:middle}
.led-on{background:var(--c-text)}
.led-dev{background:repeating-linear-gradient(135deg,var(--c-text) 0 1.5px,transparent 1.5px 3.5px);box-shadow:inset 0 0 0 1px var(--c-text)}

/* ---------- Statusleiste (jede öffentliche Seite) ---------- */
.statusbar{background:var(--c-strip);color:var(--c-on-strip);position:relative;z-index:61}
.statusbar .sb-in{display:flex;align-items:center;justify-content:space-between;gap:6px 24px;min-height:40px;padding-block:6px;max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}
.statusbar .sb-text{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:0;font:500 12px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c-on-strip)}
.statusbar .sb-text strong{font-weight:500}
.statusbar .sb-led{width:7px;height:7px;background:var(--volt);flex:none;display:inline-block}
.statusbar .sb-sep{opacity:.5}
.statusbar .sb-link{display:inline-flex;gap:6px;color:var(--c-on-strip);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.statusbar .sb-link:hover{text-decoration-thickness:2px}
.statusbar .sb-short{display:none}
.sb-lang{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--f-mono);letter-spacing:.12em;white-space:nowrap}
.sb-lang a{display:inline-flex;align-items:center;min-height:32px;padding:0 4px;color:var(--c-on-strip);text-decoration:none;opacity:.66}
.sb-lang a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.sb-lang a[aria-current="true"]{opacity:1;font-weight:500;text-decoration:underline;text-underline-offset:4px}

/* ---------- Kopfzeile + Menüleiste (Entscheid 10/14) ---------- */
.s-head{position:sticky;top:0;z-index:60;background:var(--c-bg);border-bottom:1px solid var(--c-line)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.s-head{background:color-mix(in srgb,var(--c-bg) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}}
.s-head-in{display:flex;align-items:center;gap:20px;min-height:72px;max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}
/* RD-0-09: Logo der Marke aus <x-marke.zeichen/> + <x-marke.wortmarke/> (Inline-SVG in currentColor, Auge Amber). Abstand Zeichen–Wortmarke
   nach Markenleitfaden 0,26 × Modul (sichtbar ≈ 8,8 px bei 34 px Zeichen; 2,3 px Innenrand der Zeichen-Box). Wortmarke: Höhe 1em = font-size,
   Versalien auf der Zeichenmitte (top:.088em gleicht die Unterlänge im SVG-Kasten aus). */
.s-logo{display:inline-flex;align-items:center;gap:6.5px;flex:none;text-decoration:none;color:var(--c-text)}
.s-logo .mark,.logo-mark{width:34px;height:34px;flex:none;display:block}
.s-word{font:800 19px/1 var(--f-display);font-stretch:100%;letter-spacing:-.01em;white-space:nowrap;color:var(--c-text)}
.s-word .marke-wort{display:block;position:relative;top:.088em}
.s-word b{color:var(--c-wordmark);font-weight:800}
.s-menubar{display:flex;align-items:center;gap:24px;margin-left:14px}
.s-menubar a{position:relative;display:inline-flex;align-items:center;min-height:44px;font:600 12.5px/1 var(--f-display);font-stretch:100%;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--c-muted);white-space:nowrap;transition:color var(--t-fast) var(--ease)}
.s-menubar a::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:2px;background:var(--c-text);transform:scaleX(0);transform-origin:left center;transition:transform var(--t-fast) var(--ease)}
.s-menubar a:hover,.s-menubar a[aria-current]{color:var(--c-text)}
.s-menubar a:hover::after,.s-menubar a[aria-current]::after{transform:scaleX(1)}
.s-head-r{display:flex;align-items:center;gap:12px;margin-left:auto}
.s-icobtn{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;background:transparent;border:1px solid var(--c-ghost);border-radius:0;color:var(--c-text);cursor:pointer;transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.s-icobtn:hover{border-color:var(--c-text);background:var(--c-track)}
.s-icobtn .i{width:18px;height:18px}
.js-theme .i-sun{display:none}
.js-theme[data-state="dark"] .i-sun{display:block}
.js-theme[data-state="dark"] .i-moon{display:none}
.no-js .js-theme{display:none}
.s-login{display:inline-flex;align-items:center;min-height:40px;padding:0 4px;font:600 12.5px/1 var(--f-display);font-stretch:100%;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--c-text);white-space:nowrap}
.s-login:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.s-menubtn{display:none;align-items:center;gap:10px;min-height:44px;padding:0 2px;background:transparent;border:0;color:var(--c-text);font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.s-menubtn .i{width:24px;height:24px}

/* ---------- Menü-Overlay (Handy) ---------- */
.s-ovl{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;background:var(--c-bg);color:var(--c-text);overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),visibility 0s linear var(--t-mid)}
.s-ovl.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.s-ovl .wrap{width:100%}
.s-ovl-top{display:flex;align-items:center;justify-content:space-between;min-height:64px;border-bottom:1px solid var(--c-line)}
.s-ovl-nav{display:grid;padding-block:6px 18px}
.s-ovl-nav a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:13px 0 11px;border-bottom:1px solid var(--c-line);text-decoration:none;color:var(--c-text)}
.s-ovl-nav .t{font-family:var(--f-display);font-weight:800;font-stretch:var(--wdth-hero);text-transform:uppercase;font-size:clamp(38px,11vw,64px);line-height:.9;letter-spacing:-.005em}
.s-ovl-nav .p{font:500 11px/1 var(--f-mono);letter-spacing:.06em;color:var(--c-muted)}
.s-ovl.is-open .s-ovl-nav a{animation:ovl-in .44s var(--ease) both}
.s-ovl.is-open .s-ovl-nav a:nth-child(2){animation-delay:40ms}
.s-ovl.is-open .s-ovl-nav a:nth-child(3){animation-delay:80ms}
.s-ovl.is-open .s-ovl-nav a:nth-child(4){animation-delay:120ms}
.s-ovl.is-open .s-ovl-nav a:nth-child(5){animation-delay:160ms}
@keyframes ovl-in{from{transform:translateY(14px);opacity:.001}to{transform:none;opacity:1}}
.s-ovl-sub{display:flex;flex-wrap:wrap;gap:6px 22px;padding-block:4px 18px}
.s-ovl-sub a{display:inline-flex;align-items:center;min-height:44px;font:600 13px/1 var(--f-display);font-stretch:100%;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--c-text)}
.s-ovl-set{display:grid;gap:10px;padding-block:14px;border-top:1px solid var(--c-line)}
.s-ovl-set>div{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.s-ovl-foot{display:grid;gap:12px;margin-top:auto;padding-block:16px 24px;border-top:1px solid var(--c-line)}
.s-ovl-foot .lbl{text-align:center}
html.is-menu-open{overflow:hidden}

/* Segment-Umschalter (Sprache, Darstellung) */
.seg{display:inline-flex;border:1px solid var(--c-outline)}
.seg a,.seg button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;min-width:44px;padding:0 12px;border:0;border-right:1px solid var(--c-outline);background:transparent;color:var(--c-muted);font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.seg>:last-child{border-right:0}
.seg [aria-pressed="true"],.seg [aria-current="true"]{background:var(--c-solid);color:var(--c-on-solid)}
.seg a:hover,.seg button:hover{color:var(--c-text)}
.seg [aria-pressed="true"]:hover,.seg [aria-current="true"]:hover{color:var(--c-on-solid)}
.no-js .js-only{display:none!important}

/* ---------- Fußzeile ---------- */
.s-foot{padding-block:clamp(48px,6vw,80px) 28px;background:var(--c-surface);border-top:1px solid var(--c-line);color:var(--c-text)}
.s-foot-grid{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));gap:32px}
.s-foot-brand{display:grid;gap:16px;align-content:start;justify-items:start}
.s-foot-brand p{max-width:40ch;font-size:14.5px;color:var(--c-muted)}
.s-foot-col{display:grid;gap:10px;align-content:start}
.s-foot-col h2{font:500 12px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted);margin:0 0 4px}
.s-foot-col a{display:inline-flex;align-items:center;min-height:28px;font-size:14.5px;color:var(--c-text2);text-decoration:none}
.s-foot-col a:hover{color:var(--c-text);text-decoration:underline;text-underline-offset:4px}
.s-foot-set{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-top:36px;padding-top:20px;border-top:1px solid var(--c-line)}
.s-foot-set>div{display:flex;align-items:center;gap:12px}
.s-foot-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:20px;padding-top:20px;border-top:1px solid var(--c-line)}
.s-foot-bar .lbl{font-size:11px}

/* ---------- Unterseiten-Kopf (auch für Test-/Mailstrecken-/404-Seiten) ---------- */
.phead{position:relative;padding-block:clamp(40px,6vw,96px) clamp(28px,4vw,56px);border-bottom:1px solid var(--c-line);background-color:var(--c-bg);background-image:linear-gradient(var(--c-grid) 1px,transparent 1px),linear-gradient(90deg,var(--c-grid) 1px,transparent 1px);background-size:32px 32px}
.phead .wrap{display:grid;gap:18px;justify-items:start}
.phead h1{font-family:var(--f-display);font-weight:800;font-stretch:var(--wdth-hero);text-transform:uppercase;font-size:clamp(40px,6.6vw,96px);line-height:.9;letter-spacing:-.005em;max-width:20ch;text-wrap:balance;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;color:var(--c-text);margin:0}
.phead .lead{max-width:64ch;font-size:clamp(16px,1.35vw,18px);line-height:1.6;color:var(--c-muted);margin:0}
.kicker{display:inline-flex;align-items:center;gap:10px;margin:0;font:500 12px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted)}
.kicker .kn{display:inline-grid;place-items:center;min-width:28px;height:22px;padding:0 6px;background:var(--c-solid);color:var(--c-on-solid);font:500 11px/1 var(--f-mono);letter-spacing:.06em}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 10px;list-style:none;margin:0;padding:0;font:500 11px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.crumbs li+li::before{content:"/";margin-right:10px;opacity:.6}
.crumbs a{color:var(--c-text);text-decoration:underline;text-underline-offset:3px}
.phead .ctas,.ctas{display:flex;flex-wrap:wrap;gap:12px}
.phead-meta{display:flex;flex-wrap:wrap;gap:8px}

/* Rechtstexte (Markup gehört dem Rechtstext-Paket, Stil hier: Hell/Dunkel-fähig) */
.site .legal{padding-inline:16px}
.site .legal h1,.site .legal h2,.site .legal h3{color:var(--c-text)}
.site .legal h1{font-family:var(--f-display);font-stretch:var(--wdth-hero);text-transform:uppercase;font-weight:800;line-height:.95}
.site .legal h2{border-top-color:var(--c-line)}
.site .legal p,.site .legal ul,.site .legal li,.site .legal td,.site .legal th{color:var(--c-text2)}
.site .legal .lead,.site .legal .muted{color:var(--c-muted)}
.site .legal .card{background:var(--c-surface);border-color:var(--c-line);border-radius:0}
/* Q6 (UI-Audit): Ausfüll-Linien (________) im Muster-Widerrufsformular dürfen umbrechen — ragten am Handy aus der Karte */
.site .legal .card p{overflow-wrap:anywhere}
.site .legal a{color:var(--c-link)}
.site .legal .eyebrow{color:var(--c-muted)}
.site .legal .eyebrow::before{background:var(--c-text)}

/* ---------- Einblenden beim Scrollen (nur mit JS, nie ohne) ---------- */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.js .rv.in{opacity:1;transform:none}
.rise{animation:rise .7s var(--ease) both}
.rise.d1{animation-delay:.04s}.rise.d2{animation-delay:.12s}.rise.d3{animation-delay:.2s}.rise.d4{animation-delay:.28s}.rise.d5{animation-delay:.36s}.rise.d6{animation-delay:.44s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- Layout-Umschaltung (Entscheid 14: Wortmarke ab ca. 1180 px, Menü-Knopf unter 900 px) ---------- */
@media (min-width:900px) and (max-width:1179.98px){
    .s-head .s-word{display:none}
    .s-head-in{gap:14px}
    .s-menubar{gap:18px;margin-left:4px}
}
@media (max-width:899.98px){
    .s-menubar,.s-login,.s-cta-top,.s-head-r .js-theme,.statusbar .sb-lang{display:none}
    .s-menubtn{display:inline-flex}
    .s-head-in{min-height:62px}
    .s-word{font-size:17px}
    .statusbar .sb-in{justify-content:center}
    .statusbar .sb-text{justify-content:center;font-size:11px;letter-spacing:.1em}
    .statusbar .sb-long{display:none}
    .statusbar .sb-short{display:inline}
    .s-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .s-foot-brand{grid-column:1/-1}
}
@media (max-width:360px){.s-head .s-word{display:none}}

/* ---------- Bewegung reduzieren: alles steht ---------- */
@media (prefers-reduced-motion:reduce){
    .site *,.site *::before,.site *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important}
    .js .rv{opacity:1;transform:none}
}

/* =========================================================================
   Startseite — Abschnitte
   ========================================================================= */

/* ---------- Hero ---------- */
.s-hero{position:relative;overflow:hidden;padding-block:clamp(48px,7.5vw,120px) clamp(40px,5vw,72px)}
.s-hero-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--c-grid) 1px,transparent 1px),linear-gradient(90deg,var(--c-grid) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(120% 95% at 72% 0,#000 28%,transparent 76%);mask-image:radial-gradient(120% 95% at 72% 0,#000 28%,transparent 76%)}
.s-hero-in{position:relative;display:grid;gap:clamp(20px,2.4vw,36px)}
.s-h1{max-width:18ch}
.s-h1-sub{display:block;margin-top:clamp(12px,1.4vw,20px);font-size:clamp(16px,1.6vw,22px);font-weight:700;font-stretch:100%;line-height:1.2;letter-spacing:.04em;color:var(--c-muted)}
.s-hero-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(24px,5vw,80px);align-items:start}
.s-hero-side{display:grid;gap:20px;align-content:start}
.s-replaces{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:14px;color:var(--c-muted)}
.s-replaces s{text-decoration-thickness:1.5px;color:var(--c-text2)}
.s-busbar{position:relative;height:2px;margin-top:clamp(28px,4vw,56px);background:var(--c-line2);overflow:hidden}
.s-busbar::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:repeating-linear-gradient(90deg,var(--c-text) 0 8px,transparent 8px 25%);opacity:.55}
.s-busbar-pulse{position:absolute;top:0;left:0;width:16%;height:100%;background:linear-gradient(90deg,transparent,var(--c-text),transparent);transform:translateX(-110%);animation:busbar 4.2s var(--ease) infinite}
@keyframes busbar{0%{transform:translateX(-110%)}70%,100%{transform:translateX(640%)}}
.s-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(16px,2.4vw,32px);margin:0}
.s-metrics>div{display:grid;gap:12px;align-content:start;padding-top:22px}
.s-metrics dd{margin:0}
.s-metric-n{font-family:var(--f-display);font-weight:800;font-stretch:var(--wdth-hero);font-size:clamp(40px,6.2vw,88px);line-height:.9;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--c-text)}

/* ---------- Sektionen ---------- */
.s-sec{padding-block:clamp(64px,8.5vw,128px);border-top:1px solid var(--c-line)}
.s-sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:18px clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(32px,4.6vw,64px)}
.s-sec-head>.lbl{grid-column:1/-1}
.s-note{margin-top:18px;font-size:13.5px;color:var(--c-muted);max-width:80ch}
.ki-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

/* ---------- Schaltplan: Ablauf ---------- */
.plan{position:relative;border:1px solid var(--c-line2);background-color:var(--c-surface);background-image:linear-gradient(var(--c-hatch) 1px,transparent 1px),linear-gradient(90deg,var(--c-hatch) 1px,transparent 1px);background-size:24px 24px}
.plan-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;padding:12px clamp(14px,2vw,24px);border-bottom:1px solid var(--c-line);background:var(--c-surface)}
.plan-toggle{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--c-ghost);border-radius:0;background:var(--c-surface);color:var(--c-text);font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.plan-toggle:hover{border-color:var(--c-text)}
.plan-toggle .i{width:14px;height:14px}
.plan-toggle .i-play{display:none}
.plan-toggle[aria-pressed="false"] .i-play{display:inline-block}
.plan-toggle[aria-pressed="false"] .i-pause{display:none}
.plan-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:clamp(26px,3.2vw,44px) clamp(14px,2vw,24px) 10px}
.plan-step{position:relative}
.plan-node{position:relative;z-index:2;display:grid;justify-items:start;align-content:start;gap:10px;width:100%;padding:0 16px 8px 0;background:transparent;border:0;color:inherit;text-align:left;cursor:pointer}
.plan-no{font:500 11px/1 var(--f-mono);letter-spacing:.14em;color:var(--c-muted)}
.plan-term{position:relative;width:16px;height:16px;border:2px solid var(--c-text);background:var(--c-surface);transition:background-color var(--t-fast) var(--ease)}
.plan-step.is-on .plan-term,.plan-step.is-active .plan-term,.plan.is-complete .plan-term{background:var(--c-text)}
.plan-step.is-active .plan-term::after{content:"";position:absolute;inset:-8px;border:1.5px solid var(--c-text);animation:plan-ring 1.6s var(--ease) infinite}
@keyframes plan-ring{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.45);opacity:0}}
.plan-t{margin-top:6px}
.plan-step.is-active .plan-t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.plan-d{font-size:14px;line-height:1.5;color:var(--c-muted)}
.plan-where{font:500 10.5px/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c-text)}
.plan-step:not(:last-child)::after{content:"";position:absolute;z-index:1;left:8px;top:28px;width:100%;height:2px;background:var(--c-line2)}
.plan-wire{position:absolute;z-index:1;left:8px;top:28px;width:100%;height:2px;background:var(--c-text);transform:scaleX(0);transform-origin:left center;transition:transform var(--t-flow) linear}
.plan-step.is-on .plan-wire,.plan.is-complete .plan-wire{transform:scaleX(1)}
.plan.is-resetting .plan-wire,.plan.is-resetting .plan-term{transition:none}
.plan-readout{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 24px;align-items:start;margin:4px clamp(14px,2vw,24px) 0;padding:18px 0 20px;border-top:1px solid var(--c-line)}
.plan-ro-main{display:grid;gap:8px}
.plan-ro-t{font-size:16px;line-height:1.6;max-width:72ch}
.plan-readout .bdg{white-space:normal;padding-block:4px;line-height:1.3}
.plan-block{display:grid;grid-template-columns:repeat(4,auto);justify-content:end;border-top:1px solid var(--c-line2);background:var(--c-surface)}
.plan-block div{padding:8px 14px;border-left:1px solid var(--c-line2);font:500 10px/1.35 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted)}
.plan-block b{display:block;color:var(--c-text);font-weight:500}

/* ---------- Invertiertes Band ---------- */
.inv{--c-text:var(--c-on-solid);--c-text2:color-mix(in srgb,var(--c-on-solid) 86%,transparent);--c-muted:color-mix(in srgb,var(--c-on-solid) 70%,transparent);--c-ghost:color-mix(in srgb,var(--c-on-solid) 50%,transparent);--c-outline:color-mix(in srgb,var(--c-on-solid) 44%,transparent);--c-line:color-mix(in srgb,var(--c-on-solid) 16%,transparent);--c-line2:color-mix(in srgb,var(--c-on-solid) 24%,transparent);--c-track:color-mix(in srgb,var(--c-on-solid) 10%,transparent);--c-surface:color-mix(in srgb,var(--c-on-solid) 6%,var(--c-solid));--c-input:color-mix(in srgb,var(--c-on-solid) 5%,var(--c-solid));--c-link:var(--c-on-solid);--c-wordmark:var(--volt);background:var(--c-solid);color:var(--c-on-solid)}
.s-band{padding-block:clamp(56px,7vw,112px)}
.s-band-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(24px,5vw,72px);align-items:end}
.s-band p{font-size:clamp(16px,1.35vw,18px);line-height:1.6;color:var(--c-muted);max-width:56ch}
.s-band-facts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 28px;padding-top:22px;border-top:1px solid var(--c-line)}
.s-band-facts .lbl{color:var(--c-text)}
.s-band-facts li{display:inline-flex;align-items:center;gap:10px}
.s-band-facts li::before{content:"";width:7px;height:7px;background:currentColor}

/* ---------- Sicherungskasten ---------- */
.fb{border:1px solid var(--c-line2);background:var(--c-surface)}
.fb-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;padding:14px clamp(14px,2vw,24px);border-bottom:1px solid var(--c-line)}
.fb-title{display:flex;align-items:center;gap:12px}
.fb-screw{position:relative;width:12px;height:12px;border:1px solid var(--c-outline);border-radius:50%;flex:none}
.fb-screw::after{content:"";position:absolute;left:2px;right:2px;top:5px;height:1px;background:var(--c-outline);transform:rotate(-35deg)}
.fb-pkg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--c-outline)}
.fb-pkg button{min-height:44px;padding:0 14px;border:0;border-right:1px solid var(--c-outline);border-radius:0;background:transparent;color:var(--c-muted);font:700 12px/1 var(--f-display);font-stretch:100%;letter-spacing:.07em;text-transform:uppercase;cursor:pointer}
.fb-pkg button:last-child{border-right:0}
.fb-pkg button:hover{color:var(--c-text)}
.fb-pkg button[aria-pressed="true"]{background:var(--c-solid);color:var(--c-on-solid)}
.fb-rail{padding:18px clamp(14px,2vw,24px) 22px}
.fb-rail+.fb-rail{border-top:1px dashed var(--c-line2)}
.fb-rail-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin-bottom:16px}
.fb-rail-h h3.lbl{color:var(--c-text);margin:0;font-weight:500}
.fb-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));row-gap:22px}
.mcb{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding-inline:6px;text-align:center;min-width:0}
.mcb::before{content:"";position:absolute;z-index:0;left:0;right:0;top:31px;height:24px;background:repeating-linear-gradient(90deg,var(--c-line2) 0 6px,transparent 6px 12px);border-block:1px solid var(--c-line2)}
.mcb-body{position:relative;z-index:1;display:grid;justify-items:center;gap:6px;width:56px;padding:8px 0 10px;background:var(--c-bg);border:1px solid var(--c-outline);border-radius:0;color:var(--c-text);cursor:pointer;transition:opacity var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.mcb-body:hover{border-color:var(--c-text)}
.mcb-body[aria-disabled="true"]{cursor:default}
.mcb-id{font:500 10px/1 var(--f-mono);letter-spacing:.1em}
.mcb-slot{position:relative;width:18px;height:38px;background:var(--c-track);box-shadow:inset 0 0 0 1px var(--c-line2)}
.mcb-handle{position:absolute;left:0;top:0;width:18px;height:19px;background:var(--c-text);transition:transform var(--t-fast) var(--ease)}
.mcb-win{width:18px;height:13px;border:1px solid var(--c-outline);font:500 9px/11px var(--f-mono);text-align:center}
.mcb[data-state="dev"] .mcb-handle{background:repeating-linear-gradient(135deg,var(--c-text) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1.5px var(--c-text)}
.mcb[data-state="off"] .mcb-handle{transform:translateY(19px)}
.mcb[data-state="off"] .mcb-body{opacity:.55}
.mcb[data-state="addon"] .mcb-body{outline:1.5px dashed var(--c-text);outline-offset:3px}
.mcb-name{font:500 13px/1.25 var(--f-body);-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;max-width:100%}
.mcb[data-state="off"] .mcb-name{color:var(--c-muted)}
.mcb-st{font:500 10px/1 var(--f-mono);letter-spacing:.16em;color:var(--c-muted)}
.mcb[data-state="on"] .mcb-st,.mcb[data-state="addon"] .mcb-st{color:var(--c-text)}
.mcb-tier{font:500 9.5px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)}
.mcb[data-p="premium"] .mcb-tier{display:none}
.fb-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;align-items:center;padding:16px clamp(14px,2vw,24px) 18px;border-top:1px solid var(--c-line)}
.fb-detail{display:grid;gap:4px;min-height:48px}
.fb-detail span:last-child{font-size:15px}
.fb-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.fb-sum{grid-column:1/-1;font-size:15px;padding-top:12px;border-top:1px dashed var(--c-line2)}
.fb-sum strong{font-weight:600}
.fb-legend{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:14px;font-size:13px;color:var(--c-muted)}
.fb-legend li{display:inline-flex;align-items:center;gap:8px}
.lg-h{display:inline-block;width:10px;height:10px;background:var(--c-text)}
.lg-h--dev{background:repeating-linear-gradient(135deg,var(--c-text) 0 1.5px,transparent 1.5px 3.5px);box-shadow:inset 0 0 0 1px var(--c-text)}
.lg-h--off{background:transparent;box-shadow:inset 0 0 0 1px var(--c-outline)}
.js .fb.is-live .mcb .mcb-handle{will-change:transform}

/* ---------- Einblick: Bildstellen ---------- */
.shots{display:grid;gap:clamp(24px,3vw,40px)}
.shots-row{display:flex;gap:16px;align-items:flex-start}
.shot{flex:var(--ar) 1 0;min-width:0;display:grid;gap:12px;margin:0}
.ph-box,.shot-frame{position:relative;width:100%;max-width:100%;aspect-ratio:var(--ar)}
.ph-box{display:grid;place-items:center;background:repeating-linear-gradient(135deg,var(--c-hatch) 0 1px,transparent 1px 11px) var(--c-surface);border:1px dashed var(--c-outline)}
.ph-box::before,.ph-box::after{content:"";position:absolute;width:18px;height:18px;border:0 solid var(--c-text)}
.ph-box::before{left:-1px;top:-1px;border-left-width:2px;border-top-width:2px}
.ph-box::after{right:-1px;bottom:-1px;border-right-width:2px;border-bottom-width:2px}
.ph-in{display:grid;gap:10px;justify-items:center;text-align:center;padding:16px;max-width:36ch}
.ph-in .i{width:26px;height:26px;color:var(--c-muted)}
.ph-m{font:500 11px/1.55 var(--f-mono);letter-spacing:.04em;color:var(--c-muted)}
.shot-frame{overflow:hidden;border:1px solid var(--c-line2);background:var(--c-surface);box-shadow:var(--c-shadow)}
.shot-img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.shot-frame.has-both .shot-img--dark{display:none}
:root[data-theme="dark"] .shot-frame.has-both .shot-img--light{display:none}
:root[data-theme="dark"] .shot-frame.has-both .shot-img--dark{display:block}
@media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .shot-frame.has-both .shot-img--light{display:none}
    :root:not([data-theme="light"]) .shot-frame.has-both .shot-img--dark{display:block}
}
.shot figcaption{display:grid;gap:6px;justify-items:start;font-size:14px;line-height:1.5;color:var(--c-muted)}
.shot figcaption b{color:var(--c-text);font-weight:600}

/* ---------- Zugänge ---------- */
.acc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.acc-col{display:grid;gap:16px;align-content:start;padding:0 clamp(20px,3vw,40px) clamp(20px,3vw,40px);background:var(--c-surface);border:1px solid var(--c-card)}
.acc-bar{display:flex;align-items:center;gap:12px;margin-inline:calc(-1 * clamp(20px,3vw,40px));padding:10px clamp(20px,3vw,40px);border-bottom:1px solid var(--c-line);font:500 11px/1 var(--f-mono);letter-spacing:.06em;color:var(--c-muted)}
.acc-dots{display:inline-flex;gap:5px}
.acc-dots i{width:8px;height:8px;background:var(--c-line2)}
.acc-list{display:grid}
.acc-list li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--c-line);font-size:15.5px;line-height:1.45}
.acc-list li .tier{margin-left:6px}
.acc-list .st{margin-top:6px}
.acc-sub{display:flex;align-items:center;gap:10px;margin-top:6px}

/* ---------- Schaltplan: Desktop → Browser ---------- */
.tk-board{border:1px solid var(--c-line2);background:var(--c-surface);padding:clamp(16px,2.6vw,36px)}
.tk-svg{display:block;width:100%;height:auto}
.tk-cap{font:500 11px var(--f-mono);letter-spacing:.14em;fill:var(--c-muted)}
.tk-n{font:600 14px var(--f-body);fill:var(--c-text)}
.tk-parts .tk-n{fill:var(--c-muted)}
.tk-s{font:500 10.5px var(--f-mono);letter-spacing:.06em;fill:var(--c-muted)}
.tk-big{font:800 40px var(--f-display);font-stretch:76%;fill:var(--c-text)}
.tk-parts rect{fill:var(--c-surface);stroke:var(--c-outline);stroke-width:1;stroke-dasharray:4 4}
.tk-x{fill:none;stroke:var(--c-outline);stroke-width:1.5}
.tk-old path{fill:none;stroke:var(--c-outline);stroke-width:1.25;stroke-dasharray:3 5}
.tk-new path{fill:none;stroke:var(--c-text);stroke-width:2}
.tk-flow path{fill:none;stroke:var(--c-surface);stroke-width:2.4;stroke-dasharray:3 13;animation:tk-flow 1.1s linear infinite}
@keyframes tk-flow{to{stroke-dashoffset:-32}}
.tk-node rect{fill:var(--c-bg);stroke:var(--c-text);stroke-width:2}
.tk-node .tk-led{fill:var(--c-text);stroke:none;animation:tk-blink 2.4s steps(1,end) infinite}
@keyframes tk-blink{0%,70%{opacity:1}71%,100%{opacity:.25}}
.tk-ends rect{fill:var(--c-bg);stroke:var(--c-text);stroke-width:1.25}
.tk-dot{fill:var(--c-text)}
.tk-narrow{display:none;gap:14px}
.tk-parts-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tk-parts-l li{display:grid;gap:2px;padding:10px 12px;border:1px dashed var(--c-outline);font-size:14px;color:var(--c-muted)}
.tk-parts-l s{color:var(--c-text);text-decoration-thickness:1.5px}
.tk-parts-l span{font:500 10.5px/1.4 var(--f-mono);letter-spacing:.05em}
.tk-down{justify-self:center;width:2px;height:34px;background:var(--c-text);position:relative}
.tk-down::after{content:"";position:absolute;left:-5px;bottom:-2px;width:12px;height:12px;border-right:2px solid var(--c-text);border-bottom:2px solid var(--c-text);transform:rotate(45deg)}
.tk-node-l{display:grid;gap:6px;padding:16px;border:2px solid var(--c-text);background:var(--c-bg)}
.tk-node-l .big{font-family:var(--f-display);font-weight:800;font-stretch:var(--wdth-hero);font-size:40px;line-height:.9;text-transform:uppercase}
.tk-ends-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tk-ends-l li{display:grid;gap:2px;padding:10px;border:1px solid var(--c-text);font-weight:600;font-size:14px}
.tk-ends-l span{font:500 10.5px/1.4 var(--f-mono);color:var(--c-muted);font-weight:500}
.tk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:16px}
.sheet{border:1px solid var(--c-line2);background:var(--c-surface)}
.sheet-h{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--c-line)}
.sheet-h h3{margin:0}
.sheet-ab{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;background:var(--c-solid);color:var(--c-on-solid);font:800 18px/1 var(--f-display);font-stretch:var(--wdth-hero)}
.sheet dl{display:grid;margin:0}
.sheet dl>div{display:grid;grid-template-columns:minmax(96px,.42fr) minmax(0,1fr) 12px;gap:14px;align-items:baseline;padding:11px 18px;border-bottom:1px solid var(--c-line)}
.sheet dl>div:last-child{border-bottom:0}
.sheet dt{font:500 11px/1.5 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.sheet dd{font-size:14.5px;line-height:1.45;margin:0}
.sheet .st{align-self:center}
.tk-note{display:grid;gap:14px;align-content:start;justify-items:start;padding:18px;border:1px solid var(--c-line2);background:var(--c-surface)}
.tk-note h3{margin:0}
.tk-note>ul{display:grid;gap:8px;font-size:14.5px}
.tk-note>ul li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px}
.tk-note>ul li::before{content:"";width:10px;height:2px;margin-top:10px;background:var(--c-text)}
.tk-note b{font-weight:600}
.tk-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;padding-top:14px;border-top:1px dashed var(--c-line2)}
.tk-compare ul{display:grid;gap:6px;margin-top:8px;font-size:14px;color:var(--c-text2)}
.tk-compare div:first-child li{color:var(--c-muted);text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:var(--c-outline)}

/* ---------- Sicherheit ---------- */
.sx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--c-line2);border-left:1px solid var(--c-line)}
.sx li{display:grid;gap:10px;align-content:start;padding:clamp(18px,2.4vw,30px);border-right:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.sx .i{width:24px;height:24px}
.sx h3{margin:0}
.sx p{font-size:14.5px;line-height:1.55;color:var(--c-muted)}

/* ---------- KI ---------- */
.ki{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.ki li{display:grid;gap:10px;align-content:start;padding-top:18px;border-top:2px solid var(--c-text)}
.ki h3{margin:0}
.ki p{font-size:14.5px;line-height:1.55;color:var(--c-muted)}
.ki-sw{position:relative;display:inline-block;width:34px;height:20px;border:1px solid var(--c-outline);border-radius:20px;background:var(--c-solid)}
.ki-sw::after{content:"";position:absolute;top:3px;left:17px;width:12px;height:12px;border-radius:50%;background:var(--c-on-solid)}
.ki li:first-child .ki-sw{background:transparent}
.ki li:first-child .ki-sw::after{left:3px;background:var(--c-text)}
.ki-uses{margin-top:clamp(28px,3.4vw,44px);padding-top:20px;border-top:1px solid var(--c-line)}
.ki-uses h3{margin:0 0 14px}
.ki-uses ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px 24px}
.ki-uses li{display:grid;gap:6px;justify-items:start}
.ki-use-d{font-size:14px;line-height:1.5;color:var(--c-muted)}

/* ---------- Preise ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.tier-card{display:grid;grid-template-rows:auto auto auto auto 1fr;gap:18px;padding:clamp(22px,3vw,40px);background:var(--c-surface);border:1px solid var(--c-card)}
.tier-card h3{margin:0}
.tier-name{font-size:clamp(22px,2.2vw,30px)}
.tier-price{padding-block:14px;border-block:1px solid var(--c-line)}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0}
.price .amt{font-family:var(--f-display);font-weight:800;font-stretch:var(--wdth-hero);font-size:clamp(38px,4.2vw,56px);line-height:.9;text-transform:uppercase;color:var(--c-text)}
.price .cur{font-family:var(--f-display);font-weight:800;font-stretch:var(--wdth-hero);font-size:28px;line-height:1;color:var(--c-text)}
.price-anfrage .amt{font-size:clamp(32px,3.2vw,46px)}
.price .per{flex-basis:100%;font:500 11px/1.45 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.tier-quota{font-size:14.5px;color:var(--c-text)}
.tier-d{font-size:15px;line-height:1.55;color:var(--c-muted)}
.tier-list{display:grid;margin-top:8px}
.tier-list li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--c-line);font-size:14.5px;line-height:1.4}
.tiers-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 32px;align-items:center;margin-top:24px;padding:22px clamp(18px,2.4vw,32px);border:1px solid var(--c-line2)}
.tiers-foot p{display:grid;gap:10px;font-size:15px;max-width:64ch}
.tiers-foot .lbl{display:inline-flex;align-items:center;gap:8px;color:var(--c-text)}
.always{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px}
.always li{display:inline-flex;align-items:center;gap:8px;font-size:14.5px}
.always .i{width:16px;height:16px}

/* ---------- Umstieg ---------- */
.steps6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(16px,2.4vw,32px)}
.steps6 li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;align-content:start;padding:22px 0 26px;border-top:1px solid var(--c-line2)}
.steps6 .n{grid-row:span 2;font-family:var(--f-display);font-weight:800;font-stretch:var(--wdth-hero);font-size:clamp(44px,4.6vw,64px);line-height:.82;font-variant-numeric:tabular-nums}
.steps6 h3{margin:0}
.steps6 p{font-size:14.5px;line-height:1.55;color:var(--c-muted)}
.par-box{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(24px,4vw,56px);align-items:center;margin-top:clamp(32px,4vw,56px);padding:clamp(20px,3vw,36px);border:1px solid var(--c-line2);background:var(--c-surface)}
.par-box>div:first-child{display:grid;gap:10px}
.par-box p{font-size:15px;line-height:1.6;color:var(--c-muted)}
.par{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:12px 16px;align-items:center}
.par-track{position:relative;height:30px}
.par-track::after{content:"";position:absolute;left:62%;top:-8px;bottom:-8px;width:0;border-left:1.5px dashed var(--c-text)}
.par-bar{position:absolute;top:0;bottom:0}
.par-old{left:0;width:62%;background:var(--c-layer);box-shadow:inset 0 0 0 1px var(--c-outline)}
.par-ro{left:62%;right:0;background:repeating-linear-gradient(135deg,var(--c-hatch) 0 1px,transparent 1px 7px);box-shadow:inset 0 0 0 1px var(--c-outline);display:flex;align-items:center;padding-left:10px;font:500 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted);white-space:nowrap;overflow:hidden}
.par-new{left:34%;right:0;background:var(--c-text);transform-origin:left center}
.js .par-box.rv .par-new{transform:scaleX(0);transition:transform 1.2s var(--ease) .3s}
.js .par-box.rv.in .par-new{transform:none}
.par-axis{grid-column:2;position:relative;height:40px}
.par-phase{position:absolute;left:34%;width:28%;top:0;height:10px;border:1.5px solid var(--c-text);border-top:0}
.par-phase span{position:absolute;left:0;right:0;top:16px;text-align:center;font:500 10px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.par-cut{position:absolute;left:62%;top:14px;transform:translateX(8px);font:500 10px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}

/* ---------- Roadmap ---------- */
.road{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(16px,2.4vw,32px)}
.road::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--c-line2)}
.road::after{content:"";position:absolute;left:0;top:7px;height:2px;width:calc(25% + 8px);background:var(--c-text);transform-origin:left center}
.js .road.rv::after{transform:scaleX(0);transition:transform 1s var(--ease) .2s}
.js .road.rv.in::after{transform:none}
.road li{position:relative;display:grid;gap:10px;align-content:start;padding-top:36px}
.road h3{margin:0}
.road-m{position:absolute;z-index:1;left:0;top:0;width:16px;height:16px;border:2px solid var(--c-text);background:var(--c-bg)}
.road .is-done .road-m,.road .is-now .road-m{background:var(--c-text)}
.road .is-now .road-m::after{content:"";position:absolute;inset:-8px;border:1.5px solid var(--c-text);animation:plan-ring 1.8s var(--ease) infinite}
.road .is-later .road-m{border-style:dashed}
.road-when{display:flex;align-items:center;gap:10px}
.road p:not(.road-when){font-size:14.5px;line-height:1.55;color:var(--c-muted)}

/* ---------- Testzugang ---------- */
.trial-teaser{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(24px,5vw,72px);align-items:start}
.trial-main{display:grid;gap:22px;justify-items:start}
.trial-facts{display:grid;border-top:1px solid var(--c-line2)}
.trial-facts li{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr);gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--c-line2)}
.trial-n{font-family:var(--f-display);font-weight:800;font-stretch:var(--wdth-hero);font-size:clamp(34px,3.6vw,48px);line-height:.9;text-transform:uppercase}
.trial-facts span:last-child{font-size:15px;line-height:1.45}
.trial-teaser .trial-note{grid-column:1/-1;font-size:14px;color:var(--c-muted);margin:0}

/* ---------- FAQ ---------- */
.faq{display:grid;border-top:1px solid var(--c-line2)}
.faq details{border-bottom:1px solid var(--c-line2)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;padding:14px 0;cursor:pointer;list-style:none;font:600 clamp(16px,1.45vw,19px)/1.35 var(--f-body);color:var(--c-text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--c-text),var(--c-text)) center/14px 2px no-repeat,linear-gradient(var(--c-text),var(--c-text)) center/2px 14px no-repeat;transition:transform var(--t-fast) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.faq .faq-a{max-width:74ch;padding:0 0 22px;font-size:15.5px;line-height:1.65;color:var(--c-muted)}
.faq-more{margin-top:22px}

/* ---------- Kontakt / Abschluss ---------- */
.s-cta{padding-block:clamp(72px,10vw,150px)}
.s-contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px clamp(24px,5vw,80px);align-items:start}
.s-contact-l{display:grid;gap:clamp(18px,2.2vw,28px);justify-items:start}
.s-cta-t{font-stretch:var(--wdth-sec);font-size:clamp(46px,6.2vw,96px)}
.s-contact-l .lbl .sb-led{display:inline-block;width:7px;height:7px;background:var(--volt);margin-right:6px;vertical-align:middle}
.s-contact-r{display:grid;gap:18px}
.contact-form{display:grid;gap:16px;padding:clamp(18px,2.6vw,32px);background:var(--c-surface);border:1px solid var(--c-line2)}
.contact-form[hidden]{display:none}
.cf-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.contact-form label{display:grid;gap:8px;font:500 11px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.contact-form input,.contact-form textarea{width:100%;min-height:48px;padding:0 14px;border:1px solid var(--c-ghost);border-radius:0;background:var(--c-input);color:var(--c-text);font:400 16px/1.4 var(--f-body);letter-spacing:0;text-transform:none;min-width:0}
.contact-form textarea{min-height:140px;padding:12px 14px;resize:vertical}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--c-muted);opacity:.85}
.contact-form input:focus-visible,.contact-form textarea:focus-visible{outline:2px solid var(--c-text);outline-offset:2px;border-color:var(--c-text)}
.contact-btn{justify-self:start}
.contact-hint{font-size:13px;line-height:1.55;color:var(--c-muted)}
.contact-or{font-size:15px;color:var(--c-muted)}
.contact-or a{color:var(--c-text);text-decoration:underline;text-underline-offset:4px}

/* ---------- Startseite: Umbrüche ---------- */
@media (max-width:899.98px){
    .s-hero-row,.s-sec-head,.s-band-in,.trial-teaser,.par-box,.tk-grid,.s-contact{grid-template-columns:minmax(0,1fr)}
    .s-metrics{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
    .s-hero .ctas .btn{flex:1 1 auto}
    .plan-steps{grid-template-columns:minmax(0,1fr);padding-top:22px}
    .plan-node{grid-template-columns:28px minmax(0,1fr);column-gap:14px;row-gap:4px;padding:0 0 24px}
    .plan-no{grid-column:2;grid-row:1}
    .plan-term{grid-column:1;grid-row:1;justify-self:center}
    .plan-t,.plan-d,.plan-where{grid-column:2}
    .plan-t{margin-top:2px}
    .plan-step:not(:last-child)::after{left:13px;top:8px;width:2px;height:100%}
    .plan-wire{left:13px;top:8px;width:2px;height:100%;transform:scaleY(0);transform-origin:center top}
    .plan-step.is-on .plan-wire,.plan.is-complete .plan-wire{transform:scaleY(1)}
    .plan-readout{grid-template-columns:minmax(0,1fr)}
    .plan-block{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}
    .plan-block div:nth-child(odd){border-left:0}
    .fb-foot{grid-template-columns:minmax(0,1fr)}
    .acc,.tiers,.steps6,.sx{grid-template-columns:minmax(0,1fr)}
    .tk-svg{display:none}
    .tk-narrow{display:grid}
    .tiers-foot{grid-template-columns:minmax(0,1fr)}
    .road{grid-template-columns:minmax(0,1fr)}
    .road::before{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto}
    .road::after{left:7px;top:0;width:2px;height:calc(25% + 16px);transform-origin:center top}
    .js .road.rv::after{transform:scaleY(0)}
    .js .road.rv.in::after{transform:none}
    .road li{padding:0 0 28px 36px}
}
@media (min-width:640px) and (max-width:899.98px){
    .sx{grid-template-columns:repeat(2,minmax(0,1fr))}
    .steps6{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:699.98px){
    .shots-row{flex-direction:column}
    .shot{flex:none;width:100%}
    .shot--phone .ph-box,.shot--phone .shot-frame{max-width:240px}
    .shot--a4 .ph-box,.shot--a4 .shot-frame{max-width:330px}
    .tk-parts-l{grid-template-columns:minmax(0,1fr)}
    .tk-ends-l{grid-template-columns:minmax(0,1fr)}
    .tk-compare{grid-template-columns:minmax(0,1fr)}
    .par{grid-template-columns:minmax(0,1fr);gap:6px}
    .par-axis{grid-column:1}
    .cf-row{grid-template-columns:minmax(0,1fr)}
    .fb-pkg{width:100%}
    .fb-pkg button{flex:1 1 auto}
}

/* =========================================================================
   Unterseiten (Funktionen, Technik, Preise, Umstieg, 404) — bestehendes Markup im neuen Stil
   ========================================================================= */
.sec{padding-block:clamp(56px,7vw,112px);border-top:1px solid var(--c-line)}
.sec.tight{padding-block:clamp(44px,5.6vw,88px)}
.sec.first{border-top:0}
.head{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,48px);max-width:920px}
.head.center{margin-inline:auto;text-align:center;justify-items:center}
.head.near{margin-bottom:18px}
.head p{color:var(--c-muted);max-width:62ch;font-size:clamp(16px,1.3vw,17.5px)}
.sec-t{font-family:var(--f-display);font-weight:800;font-stretch:var(--wdth-sec);text-transform:uppercase;font-size:clamp(34px,5vw,76px);line-height:.92;letter-spacing:-.005em;color:var(--c-text);margin:0;text-wrap:balance;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word}
.sec-t.sm{font-size:clamp(28px,3.4vw,48px)}
.link{color:var(--c-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.link:hover{text-decoration-thickness:2px}
.faq-more{margin-top:22px}
.check-list{display:grid}
.check-list li{position:relative;display:block;padding:9px 0 9px 24px;border-bottom:1px solid var(--c-line);font-size:15px;line-height:1.5}
.check-list li::before{content:"";position:absolute;left:0;top:20px;width:10px;height:2px;background:var(--c-text)}
.trial-note,.price-note{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;font-size:14.5px;color:var(--c-text2)}
.price-note{color:var(--c-muted)}

/* Abschluss-Band der Unterseiten */
.cta-strip{display:grid;grid-template-columns:minmax(0,7fr) auto;gap:24px 48px;align-items:end;padding:clamp(28px,4.4vw,64px)}
.cta-strip-l{display:grid;gap:16px}
.cta-strip .lbl .sb-led{display:inline-block;width:7px;height:7px;background:var(--volt);margin-right:6px;vertical-align:middle}

/* ---------- Funktionskatalog ---------- */
.fn-layout{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding-block:clamp(32px,4vw,56px) clamp(24px,3vw,40px)}
.fn-side{position:sticky;top:96px;align-self:start;display:grid;gap:22px;max-height:calc(100vh - 110px);overflow:auto;padding-right:4px}
.fn-filter{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.fn-filter legend{padding:0;margin-bottom:10px;font:500 12px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted)}
.fn-filter .opts{display:flex;flex-wrap:wrap;border:1px solid var(--c-outline)}
.fn-filter input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.fn-filter label{display:inline-flex;align-items:center;gap:8px;flex:1 1 auto;justify-content:center;min-height:44px;padding:0 12px;border-right:1px solid var(--c-outline);font:500 11px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted);cursor:pointer}
.fn-filter label:last-of-type{border-right:0}
.fn-filter input:checked+label{background:var(--c-solid);color:var(--c-on-solid)}
.fn-filter input:checked+label .led-on{background:var(--c-on-solid)}
.fn-filter input:checked+label .led-dev{background:repeating-linear-gradient(135deg,var(--c-on-solid) 0 1.5px,transparent 1.5px 3.5px);box-shadow:inset 0 0 0 1px var(--c-on-solid)}
.fn-filter input:focus-visible+label{outline:2px solid var(--c-text);outline-offset:2px}
.fn-layout:has(#fnf-live:checked) .fitem[data-s="dev"],.fn-layout:has(#fnf-dev:checked) .fitem[data-s="live"]{display:none}
.fn-nav h2{margin:0 0 10px;font:500 12px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted)}
.fn-nav ol{display:grid;border-top:1px solid var(--c-line)}
.fn-nav a{display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 10px;padding:10px 0;border-bottom:1px solid var(--c-line);text-decoration:none;color:var(--c-text);font-size:14.5px;line-height:1.35}
.fn-nav a:hover span:nth-child(2){text-decoration:underline;text-underline-offset:3px}
.fn-nav .n{grid-row:span 2;font:500 11px/1.6 var(--f-mono);color:var(--c-muted)}
.fn-nav .c{font:500 10px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}
.fn-main{display:grid;gap:clamp(40px,5vw,72px);min-width:0}
.fn-area{scroll-margin-top:110px}
.fn-area-h{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;align-items:end;margin-bottom:22px;padding-bottom:18px;border-bottom:2px solid var(--c-text)}
.fn-no{grid-row:span 3;font-family:var(--f-display);font-weight:800;font-stretch:var(--wdth-hero);font-size:clamp(48px,5vw,76px);line-height:.8;align-self:start}
.fn-area-h h2{margin:0;font-family:var(--f-display);font-weight:800;font-stretch:var(--wdth-sec);text-transform:uppercase;font-size:clamp(28px,3.2vw,44px);line-height:.95;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.fn-area-h p{color:var(--c-muted);max-width:64ch}
.fn-counts{display:flex;flex-wrap:wrap;gap:8px}
.fn-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.fitem{display:grid;gap:8px;align-content:start;padding:18px;background:var(--c-surface);border:1px solid var(--c-card)}
.fitem h3{margin:0;font-family:var(--f-display);font-weight:700;font-stretch:100%;font-size:16.5px;line-height:1.2;letter-spacing:.005em;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.fitem p{font-size:14.5px;line-height:1.5;color:var(--c-muted)}
.fitem .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.fitem[data-s="dev"]{background:repeating-linear-gradient(135deg,var(--c-hatch) 0 1px,transparent 1px 12px) var(--c-surface)}
.callout{margin-top:16px;padding:16px 18px;border:1px dashed var(--c-outline);font-size:14.5px;color:var(--c-text2);max-width:80ch}

/* ---------- Technik ---------- */
.tech-hint{font:500 11px/1.6 var(--f-mono);letter-spacing:.06em;color:var(--c-muted);max-width:80ch}
.scn-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%}
.scn-pick a{display:grid;gap:10px;align-content:start;height:100%;padding:16px;background:var(--c-surface);border:1px solid var(--c-line2);text-decoration:none;color:var(--c-text);transition:border-color var(--t-fast) var(--ease)}
.scn-pick a:hover{border-color:var(--c-text)}
.scn-pick .sn{font:500 10.5px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.scn-pick strong{font-family:var(--f-display);font-weight:700;font-size:15.5px;line-height:1.25}
.units{display:flex;flex-wrap:wrap;gap:8px;min-height:18px}
.units .grp{display:inline-flex;flex-wrap:wrap;gap:3px;align-items:flex-end}
.units i{display:block;width:9px;height:9px;background:var(--c-text)}
.units i.srv{height:16px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--c-text)}
.scn{padding-block:clamp(40px,5vw,72px);border-top:1px solid var(--c-line);scroll-margin-top:100px}
.scn:first-child{border-top:0}
.scn-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px 32px;margin-bottom:22px}
.scn-h h2{margin:6px 0 0;font-family:var(--f-display);font-weight:800;font-stretch:var(--wdth-sec);text-transform:uppercase;font-size:clamp(28px,3.4vw,48px);line-height:.95}
.scn-h .who{margin-top:8px;color:var(--c-muted)}
.drops{display:grid;gap:8px;justify-items:start}
.drops-l{font:500 11px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.drops ul{display:flex;flex-wrap:wrap;gap:6px}
.drops li{padding:4px 10px;border:1px dashed var(--c-outline);font-size:13.5px;text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--c-text2)}
table.vs{width:100%;border-collapse:collapse;background:var(--c-surface);border:1px solid var(--c-line2);font-size:14.5px;line-height:1.5}
table.vs th,table.vs td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--c-line)}
table.vs thead th{font:500 11px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted);background:var(--c-bg)}
table.vs tbody th{width:20%;font-weight:600;color:var(--c-text)}
table.vs .c-old{color:var(--c-muted)}
table.vs td.c-new{color:var(--c-text)}
table.vs thead .c-new{color:var(--c-text)}
table.vs .none{font:500 11px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)}
table.vs .st-badge{margin-top:6px}
.tech-note{margin-top:22px;font-size:13.5px;line-height:1.6;color:var(--c-muted);max-width:90ch}
.sheets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sheets .sheet.wide{grid-column:1/-1}
.sheets .sheet-h{justify-content:space-between}
.sheets .sheet-h h3{font-family:var(--f-display);font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.02em}
.sheets .sid{font:500 11px/1 var(--f-mono);letter-spacing:.1em;color:var(--c-muted)}
.sheets .sheet dl>div{grid-template-columns:minmax(110px,.4fr) minmax(0,1fr)}

/* ---------- Preise (Seite) ---------- */
.tier-card{display:flex;flex-direction:column;gap:16px}
.tier-card>.tier-list,.tier-card>div{min-width:0}
.tier-card .tier-tag{font:500 11px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted)}
.tier-card h3{font-family:var(--f-display);font-weight:700;font-stretch:100%;text-transform:uppercase;font-size:clamp(22px,2.2vw,30px);line-height:1.1}
.tier-card>.price{padding-block:14px;border-block:1px solid var(--c-line)}
.tier-card .tier-quota{display:grid;gap:4px}
.tier-card .tier-quota strong{font-weight:600}
.tier-card .tier-quota span{color:var(--c-muted);font-size:14px}
.tier-card .desc{font-size:15px;line-height:1.55;color:var(--c-muted)}
.tier-card .plus{font:500 11px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.tier-card .check-list .st-badge{margin-left:6px}
.tier-card>.btn{margin-top:auto;align-self:flex-start}
.quota{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(24px,4vw,56px);align-items:start;padding:clamp(22px,3vw,40px);border:1px solid var(--c-line2);background:var(--c-surface)}
.quota.solo{grid-template-columns:minmax(0,1fr)}
.quota-rules{display:grid;gap:14px}
.quota-calc{--c-text:var(--c-on-solid);--c-muted:color-mix(in srgb,var(--c-on-solid) 70%,transparent);--c-line:color-mix(in srgb,var(--c-on-solid) 16%,transparent);background:var(--c-solid);color:var(--c-on-solid);padding:clamp(20px,2.6vw,32px);display:grid;gap:12px}
.quota-calc .qc-h{font:500 12px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted)}
.quota-calc dl{display:grid;margin:0}
.quota-calc dl>div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--c-line)}
.quota-calc dd{margin:0;font-variant-numeric:tabular-nums}
.quota-calc .qc-sum{font-weight:600;border-bottom:0}
.always{justify-content:center}
.s-landing .always{justify-content:flex-start}
.tbl-wrap{max-width:100%;overflow-x:auto;border:1px solid var(--c-line2);background:var(--c-surface)}
/* Q6 (UI-Audit): Bezugsrahmen für die absolut positionierten .sr-only-Texte in den Zellen — sonst entkamen sie dem
   Scroll-Container und machten die ganze Seite bei 320 px waagrecht scrollbar */
.tbl-wrap{position:relative}
table.cmp-tbl{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.45}
table.cmp-tbl th,table.cmp-tbl td{padding:12px 14px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--c-line)}
table.cmp-tbl thead th{font:500 11px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted);background:var(--c-bg)}
table.cmp-tbl tbody th{font-weight:500;color:var(--c-text)}
table.cmp-tbl tbody th .st-badge{margin-left:8px}
table.cmp-tbl .tick{text-align:center;width:14%}
table.cmp-tbl .y{font-weight:700}
table.cmp-tbl .n{color:var(--c-muted)}
table.cmp-tbl .tn-s{display:none}
.faq-list{display:grid;border-top:1px solid var(--c-line2);max-width:980px;margin-inline:auto}
.faq-list details{border-bottom:1px solid var(--c-line2)}
.faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:60px;padding:14px 0;cursor:pointer;list-style:none;font:600 clamp(16px,1.4vw,18.5px)/1.35 var(--f-body)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--c-text),var(--c-text)) center/14px 2px no-repeat,linear-gradient(var(--c-text),var(--c-text)) center/2px 14px no-repeat;transition:transform var(--t-fast) var(--ease)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list .faq-a{max-width:74ch;padding:0 0 20px;font-size:15.5px;line-height:1.65;color:var(--c-muted)}

/* ---------- Umstieg (Seite) ---------- */
.drop-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.drop-parts li{display:grid;gap:4px;padding:16px;border:1px dashed var(--c-outline);font-family:var(--f-display);font-weight:700;font-size:18px;text-decoration:line-through;text-decoration-thickness:2px;color:var(--c-text2)}
.drop-parts li span{font:500 10.5px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--c-muted)}
.steps-v{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(16px,2.4vw,32px)}
.step-v{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;align-content:start;padding:22px 0 26px;border-top:1px solid var(--c-line2)}
.step-v .num{font-family:var(--f-display);font-weight:800;font-stretch:var(--wdth-hero);font-size:clamp(44px,4.6vw,64px);line-height:.82;font-variant-numeric:tabular-nums}
.step-v h3{margin:0 0 8px;font-family:var(--f-display);font-weight:700;font-size:clamp(17px,1.5vw,21px);text-transform:uppercase;line-height:1.15}
.step-v p{font-size:14.5px;line-height:1.55;color:var(--c-muted)}
.band{border:1px solid var(--c-line2);background:var(--c-surface)}
.band .pad{padding:clamp(22px,3.4vw,48px)}
.band .lead{color:var(--c-muted);max-width:60ch;margin-top:12px}
.parallel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px clamp(24px,4vw,56px);align-items:center}
.parallel svg{width:100%;height:auto}
.pl-t{font:600 14px var(--f-body);fill:var(--c-text)}
.pl-ts{font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.pl-old{fill:none;stroke:var(--c-outline);stroke-width:10}
.pl-new{fill:none;stroke:var(--c-text);stroke-width:10}
.pl-box{fill:none;stroke:var(--c-text);stroke-width:1.5;stroke-dasharray:5 5}
.pl-dot{fill:var(--c-text)}
.pl-cut{fill:none;stroke:var(--c-text);stroke-width:1.5;stroke-dasharray:4 4}

/* ---------- Unterseiten: Umbrüche ---------- */
@media (max-width:1023.98px){
    .fn-layout{grid-template-columns:minmax(0,1fr)}
    .fn-side{position:static;max-height:none;overflow:visible}
    .fn-nav ol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
    .scn-pick{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899.98px){
    .cta-strip,.quota,.parallel{grid-template-columns:minmax(0,1fr)}
    .sheets,.steps-v{grid-template-columns:minmax(0,1fr)}
    .drop-parts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:699.98px){
    .fn-nav ol{grid-template-columns:minmax(0,1fr)}
    .scn-pick{grid-template-columns:minmax(0,1fr)}
    table.vs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
    table.vs,table.vs tbody,table.vs tr,table.vs th,table.vs td{display:block;width:100%}
    table.vs tr{border-bottom:1px solid var(--c-line2)}
    table.vs tbody th{width:100%;padding-bottom:4px;border-bottom:0}
    table.vs td{border-bottom:0;padding-top:4px}
    table.vs td::before{content:attr(data-label);display:block;margin-bottom:2px;font:500 10.5px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted)}
    table.cmp-tbl .tn-l{display:none}
    table.cmp-tbl .tn-s{display:inline}
    table.cmp-tbl th,table.cmp-tbl td{padding:10px 8px;font-size:13.5px}
    table.cmp-tbl tbody th .st-badge{display:flex;width:max-content;margin:6px 0 0}
    table.cmp-tbl.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
    table.cmp-tbl.stack,table.cmp-tbl.stack tbody,table.cmp-tbl.stack tr,table.cmp-tbl.stack th,table.cmp-tbl.stack td{display:block;width:100%}
    table.cmp-tbl.stack tr{border-bottom:1px solid var(--c-line2);padding:8px 0}
    table.cmp-tbl.stack th,table.cmp-tbl.stack td{border-bottom:0;padding:4px 12px}
    .drop-parts{grid-template-columns:minmax(0,1fr)}
}

/* Gesperrter Farbmodus (Seiten mit eigener Hell-Gestaltung, z. B. /ci): Umschalter ausblenden */
[data-theme-lock] .js-theme,[data-theme-lock] .theme-set{display:none!important}
/* Test-Registrierung: Karten bleiben hell (Inline-Stil auf CI-Tokens) → Schrift darin fest Graphit, auch im Dunkelmodus */
.site .trial-card{color:var(--ink)}
.site .trial-card h2,.site .trial-card h3,.site .trial-card strong{color:var(--ink)}
/* Q6 (UI-Audit): Umriss-Knöpfe auf der hellen Karte ebenfalls in Graphit — im Dunkelmodus war die Schrift sonst Bone auf Weiß (1,1:1) */
.site .trial-card .btn-ghost,.site .trial-card .btn-primary{color:var(--ink);border-color:rgba(21,23,28,.5)}
.site .trial-card .btn-ghost:hover,.site .trial-card .btn-primary:hover{border-color:var(--ink);background:rgba(21,23,28,.08)}
/* Q6: langer Knopftext in der schmalen Technik-Karte (Landing, Handy) darf umbrechen statt über den Kartenrand zu ragen */
.tk-note .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.25;padding-block:10px}
.band .sec-t{font-size:clamp(30px,3.6vw,54px)}
@media (max-width:899.98px){.s-head-r .s-cta-top{display:none}}

/* Kinder von Rastern mit justify-items:start dürfen nie breiter als ihre Spalte werden */
.s-contact-l>*,.trial-main>*,.tk-note>*,.s-foot-brand>*,.s-hero-in>*,.phead .wrap>*,.cta-strip-l>*,.plan-node>*{min-width:0}
.s-contact-l,.trial-main,.tk-note,.s-foot-brand,.s-hero-in,.phead .wrap,.cta-strip-l,.s-hero-side{grid-template-columns:minmax(0,1fr)}
.phead .lead{max-width:min(64ch,100%)}
.tk-note>ul{width:100%}

/* Q6 (UI-Audit): Beschriftungen auf schmalen Handys
   - Datenblatt: lange Begriffe („Datensicherung", „Nachvollziehbarkeit") trennen statt in die Wertspalte zu laufen
   - Parallelbetrieb-Diagramm: „Stichtag" in eigene Zeile (kollidierte mit „Parallelbetrieb"), Archiv-Hinweis darf umbrechen
   - Fußzeile: Farbmodus-Umschalter bricht unter die Beschriftung statt über den Rand zu ragen (320 px)
   - Paketliste: Status-Badge unter den Modulnamen, wenn beides nicht nebeneinander passt (320–359 px)
   - 320–359 px: Seiten-/Abschnittstitel etwas kleiner, Datenblatt-Werte trennbar */
.sheet dt{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
.s-foot-set>div{flex-wrap:wrap}
@media (max-width:699.98px){
    .par-axis{height:56px}
    .par-cut{top:34px}
    .par-ro{white-space:normal;line-height:1.15}
}
@media (max-width:359.98px){
    .tier-list li{flex-wrap:wrap;row-gap:6px}
    /* lange Einzelwörter („Betriebsgröße“) passen bei 320 px nicht in die Mindestschriftgröße */
    .phead h1{font-size:clamp(30px,11vw,40px)}
    .sec-t{font-size:clamp(26px,9.4vw,34px)}
    .sheets .sheet-h{flex-wrap:wrap}
    .sheet dd{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
}