/* Schrift Ubuntu lokal eingebunden (Ubuntu Font Licence), keine Verbindung zu Google */
@font-face{font-family:"Ubuntu";src:url(../fonts/ubuntu-light.woff) format("woff");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Ubuntu";src:url(../fonts/ubuntu-regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Ubuntu";src:url(../fonts/ubuntu-medium.woff) format("woff");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"Ubuntu";src:url(../fonts/ubuntu-bold.woff) format("woff");font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:"Ubuntu";src:url(../fonts/ubuntu-italic.woff) format("woff");font-weight:300 900;font-style:italic;font-display:swap}
/* Layout: Bänder im Logo-Winkel. Seitengrund ↔ Negativ (das inverse Logo) ↔ Markenrot, diagonal angeschnitten wie der Λ-Schenkel. */
:root{
  --bg:#F2F2F3; --surface:#FFFFFF; --ink:#141720; --muted:#565B67; --line:#DADBE0; --slab:#1B1F2A;
  --red:#D9141C; --red-ink:#C2121A; --red-soft:#FBE3E4; --band-red:#CF1219; --on-red:#FFFFFF;
  --inv-bg:#0C0D10; --inv-surface:#17181D; --inv-ink:#F4F4F5; --inv-muted:#A5A8B0; --inv-line:#2B2D34; --inv-slab:#3A3D47; --inv-red-ink:#FF4249; --inv-red-soft:#2A1214; --inv-scheme:dark;
  --shadow:0 1px 2px rgba(20,23,32,.06),0 12px 32px -12px rgba(20,23,32,.18);
  --f-display:"Ubuntu","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-body:"Ubuntu","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --step--1:clamp(.82rem,.8rem + .1vw,.88rem);
  --step-0:clamp(1rem,.97rem + .15vw,1.0625rem);
  --step-1:clamp(1.15rem,1.08rem + .35vw,1.35rem);
  --step-2:clamp(1.35rem,1.2rem + .8vw,1.85rem);
  --step-3:clamp(1.75rem,1.4rem + 1.9vw,3rem);
  --step-4:clamp(2.35rem,1.6rem + 4.4vw,5.6rem);
  --radius:14px;
  --wrap:1200px;
  --gutter-l:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  --slant:clamp(28px,5vw,72px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0C0D10; --surface:#17181D; --ink:#F4F4F5; --muted:#A5A8B0; --line:#2B2D34; --slab:#3A3D47;
    --red:#E31B23; --red-ink:#FF4249; --red-soft:#2A1214;
    --inv-bg:#F2F2F3; --inv-surface:#FFFFFF; --inv-ink:#141720; --inv-muted:#565B67; --inv-line:#DADBE0; --inv-slab:#1B1F2A; --inv-red-ink:#C2121A; --inv-red-soft:#FBE3E4; --inv-scheme:light;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -16px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0C0D10; --surface:#17181D; --ink:#F4F4F5; --muted:#A5A8B0; --line:#2B2D34; --slab:#3A3D47;
  --red:#E31B23; --red-ink:#FF4249; --red-soft:#2A1214;
  --inv-bg:#F2F2F3; --inv-surface:#FFFFFF; --inv-ink:#141720; --inv-muted:#565B67; --inv-line:#DADBE0; --inv-slab:#1B1F2A; --inv-red-ink:#C2121A; --inv-red-soft:#FBE3E4; --inv-scheme:light;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}
:root[data-theme="light"]{color-scheme:light}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:var(--step-0);line-height:1.6;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--red);color:var(--on-red);padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.section{padding-block:clamp(72px,10vw,128px);scroll-margin-top:0;position:relative}
.eyebrow{font-family:var(--f-body);font-weight:700;font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink);display:inline-flex;align-items:center;gap:10px}
.eb-multi{flex-wrap:wrap;row-gap:4px}
.eb-multi span{white-space:nowrap}
.eb-multi span+span::before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;background:currentColor;clip-path:polygon(50% 0,100% 100%,0 100%);vertical-align:1px}
.eyebrow::before{content:"";width:22px;height:3px;background:currentColor;transform:skewX(-28deg)}
.h2{font-size:var(--step-3);font-weight:800}
.lead{font-size:var(--step-1);color:var(--muted);max-width:60ch;line-height:1.55}
.red{color:var(--red-ink)}
.muted{color:var(--muted)}
.note{font-size:var(--step--1);color:var(--muted);max-width:75ch}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,64px);max-width:820px}

/* Negativ-Band: tauscht die Tokens wie das inverse Logo */
.neg{--bg:var(--inv-bg);--surface:var(--inv-surface);--ink:var(--inv-ink);--muted:var(--inv-muted);--line:var(--inv-line);--slab:var(--inv-slab);--red-ink:var(--inv-red-ink);--red-soft:var(--inv-red-soft);color-scheme:var(--inv-scheme);background:var(--bg);color:var(--ink)}
.cut-top{clip-path:polygon(0 var(--slant),100% 0,100% 100%,0 100%);margin-top:calc(var(--slant) * -1);padding-top:calc(clamp(72px,10vw,128px) + var(--slant))}
.cut-bottom{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--slant)),0 100%);padding-bottom:calc(clamp(72px,10vw,128px) + var(--slant))}
.cut-both{clip-path:polygon(0 var(--slant),100% 0,100% calc(100% - var(--slant)),0 100%);margin-block:calc(var(--slant) * -1);padding-block:calc(clamp(72px,10vw,128px) + var(--slant));position:relative;z-index:2}

/* Buttons */
.btn{--b:var(--red);display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 24px;border-radius:999px;font-weight:700;font-size:1rem;text-decoration:none;border:2px solid var(--b);background:var(--b);color:var(--on-red);cursor:pointer;transition:transform .2s ease,background .2s ease,box-shadow .2s ease;white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px var(--red)}
.btn:hover svg{transform:translate(3px,-3px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bg);box-shadow:none}
.btn.small{min-height:42px;padding:0 18px;font-size:.95rem}
.btn.light{--b:#FFFFFF;color:#141720}
.btn.light:hover{box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}

/* Header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.hdr.scrolled{border-bottom-color:var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:20px;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--ink);flex:none}
.brand .m{width:46px;height:38px}
.brand .w{width:118px;height:22px;color:var(--ink)}
.nav{display:flex;gap:4px;margin-left:auto}
.nav>a{position:relative;text-decoration:none;font-weight:600;font-size:.95rem;padding:8px 12px;border-radius:999px;color:var(--muted);transition:color .15s,background .15s}
.nav>a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.nav>a.active{color:var(--ink)}
.nav>a.active::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;background:var(--red);transform:skewX(-28deg)}
.hdr-actions{display:flex;align-items:center;gap:8px;flex:none}
.icon-btn{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);display:inline-grid;place-items:center;cursor:pointer;color:var(--ink);transition:border-color .15s,transform .2s}
.icon-btn:hover{border-color:var(--ink)}
.icon-btn svg{width:20px;height:20px}
.theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:block}
:root[data-theme="dark"] .theme-btn .moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-btn .sun{display:block}:root:not([data-theme="light"]) .theme-btn .moon{display:none}}
.menu-btn{display:none}
.mobile-nav{display:none}
@media (max-width:1240px){
  .nav{display:none}
  .hdr-actions{margin-left:auto}
  .menu-btn{display:inline-grid}
  .hdr .cta-top{display:none}
  .mobile-nav{display:grid;gap:4px;padding:8px var(--gutter-r) 20px var(--gutter-l);border-top:1px solid var(--line);background:var(--bg)}
  .mobile-nav[hidden]{display:none}
  .mobile-nav a{text-decoration:none;font-family:var(--f-display);font-weight:700;font-size:1.25rem;padding:12px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
  .mobile-nav a::after{content:"↗";color:var(--red-ink)}
  .mobile-nav .btn{margin-top:14px}
  .mobile-nav .btn::after{content:none}
}
@media (max-width:420px){.brand .w{width:100px;height:19px}.brand .m{width:40px;height:33px}.btn{white-space:normal;text-align:center;line-height:1.25;padding:12px 20px}}

/* Hero */
.hero{padding-block:clamp(32px,5vw,64px) clamp(56px,8vw,110px);overflow:hidden;position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{font-size:var(--step-4);font-weight:800;line-height:.98;letter-spacing:-.025em;display:grid;margin-top:22px}
.hero h1 .ln{display:block;animation:rise .8s cubic-bezier(.2,.9,.25,1) both}
.hero h1 .ln:nth-child(2){animation-delay:.12s}
.hero h1 .ln:nth-child(3){animation-delay:.24s;color:var(--red-ink);position:relative;width:max-content;max-width:100%}
.hero h1 .ln:nth-child(3) svg{position:absolute;left:0;right:0;bottom:-.16em;width:100%;height:.28em;overflow:visible}
.hero h1 .ln:nth-child(3) path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s .9s cubic-bezier(.6,0,.2,1) forwards}
@keyframes rise{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
.hero .lead{margin-top:28px;color:var(--muted)}
.hero .lead strong{color:var(--ink);font-weight:700}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-meta{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px 18px;font-weight:600;font-size:.95rem}
.hero-meta span{display:inline-flex;align-items:center;gap:8px}
.hero-meta span::before{content:"";width:8px;height:8px;background:var(--red);clip-path:polygon(50% 0,100% 100%,0 100%)}

.stage{position:relative;padding-top:190px}
.stage .bigmark{position:absolute;right:-28px;top:0;width:min(100%,520px);height:auto;aspect-ratio:124/100;pointer-events:none}
.bigmark .leg{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s .15s cubic-bezier(.6,0,.2,1) forwards}
.bigmark .shoot{animation:shoot .9s .9s cubic-bezier(.2,1.4,.4,1) both}
@keyframes shoot{from{transform:translate(-14px,18px);opacity:0}to{transform:none;opacity:1}}

.flow{position:relative;z-index:2;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px;max-width:410px;width:100%}
.flow-hd{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px dashed var(--line);font-size:.86rem}
.flow-hd b{font-weight:700}
.live{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--red-ink);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.live i{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 var(--red);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--red) 60%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
.flow ol{list-style:none;margin:0;padding:10px 0 0;display:grid;gap:2px}
.flow li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 8px;border-radius:10px;transition:background .35s}
.flow .ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 7%,transparent);font-weight:800;font-size:.75rem;transition:background .35s,color .35s}
.flow .tx{min-width:0}
.flow .tx b{display:block;font-size:.92rem;line-height:1.3}
.flow .tx span{display:block;font-size:.82rem;color:var(--muted);line-height:1.35}
.flow .st{font-size:.75rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.flow li.done .ic{background:var(--ink);color:var(--bg)}
.flow li.on{background:var(--red-soft)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .flow{background:color-mix(in srgb,var(--surface) 62%,transparent);-webkit-backdrop-filter:blur(9px) saturate(1.25);backdrop-filter:blur(9px) saturate(1.25);border-color:color-mix(in srgb,var(--ink) 12%,transparent)}
  .flow li.on{background:color-mix(in srgb,var(--surface) 72%,var(--red-soft))}
  .flow .tx span{color:color-mix(in srgb,var(--muted) 80%,var(--ink))}
}
.flow li.on .ic{background:var(--red);color:var(--on-red)}
.flow li.on .st{color:var(--red-ink)}
.flow li.human .ic{clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:0;padding-top:8px}
.flow-ft{margin-top:12px;padding-top:14px;border-top:1px dashed var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.86rem}
.flow-ft .t{white-space:nowrap;font-family:var(--f-display);font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums}
.flow-ft .t s{color:var(--muted);text-decoration-thickness:2px;text-decoration-color:var(--red)}
.bar{height:4px;border-radius:4px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden;margin-top:10px}
.bar i{display:block;height:100%;width:20%;background:var(--red);transition:width .6s cubic-bezier(.6,0,.2,1)}

/* Ticker */
.ticker{background:var(--band-red);color:var(--on-red);overflow:hidden;transform:skewY(-2deg);margin-block:-8px 0;position:relative;z-index:3;border-block:0}
.ticker .row{display:flex;width:max-content;animation:marq 38s linear infinite}
.ticker .grp{display:flex;align-items:center;gap:28px;padding:18px 14px;font-family:var(--f-display);font-weight:700;font-size:clamp(1.05rem,.9rem + .9vw,1.6rem);white-space:nowrap}
.ticker s{text-decoration-thickness:.12em;text-decoration-color:rgba(255,255,255,.85);opacity:.72}
.ticker .ok{background:#FFFFFF;color:#141720;padding:4px 14px;border-radius:999px;font-size:.8em}
.ticker:hover .row{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}

/* Leistungen: Ideen. Systeme. Wirkung. */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.pillar{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:16px;overflow:hidden;transition:transform .3s cubic-bezier(.2,.9,.3,1),border-color .3s}
.pillar:hover{transform:translateY(-6px);border-color:var(--ink)}
.pillar .word{font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,1.5rem + 1.8vw,2.9rem);line-height:1;letter-spacing:-.02em}
.pillar:nth-child(3) .word{color:var(--red-ink)}
.pillar h3{font-family:var(--f-body);font-size:var(--step-1);font-weight:700;line-height:1.3}
.pillar ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;color:var(--muted)}
.pillar li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px;align-items:baseline}
.pillar li::before{content:"";width:9px;height:9px;background:var(--red);clip-path:polygon(50% 0,100% 100%,0 100%);transform:translateY(-1px)}
.pillar .more{margin-top:auto;padding-block:12px 4px;min-height:44px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.pillar .more svg{width:16px;height:16px;transition:transform .25s}
.pillar .more:hover svg{transform:translate(3px,-3px)}
.pillar .more:hover{color:var(--red-ink)}

/* Problem + Funktionsweise */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:start}
.strike{font-family:var(--f-display);font-weight:800;font-size:clamp(1.8rem,1.2rem + 2.6vw,3.4rem);line-height:1.08;display:grid;margin-top:26px}
.strike span{position:relative;width:max-content;max-width:100%}
.strike span::after{content:"";position:absolute;left:-4%;right:-4%;top:55%;height:.12em;background:var(--red);transform:skewY(-4deg) scaleX(var(--sx,0));transform-origin:left;transition:transform .5s cubic-bezier(.6,0,.2,1)}
.strike.go span::after{--sx:1}
.strike span:nth-child(2)::after{transition-delay:.12s}
.strike span:nth-child(3)::after{transition-delay:.24s}
.strike span:nth-child(4)::after{transition-delay:.36s}
.loss{display:grid;gap:16px}
.loss article{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:grid;gap:8px}
.loss h3{font-family:var(--f-body);font-weight:700;font-size:var(--step-1)}
.loss .fix{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600;display:flex;gap:14px;align-items:center}
.loss .fix svg{width:34px;height:34px;flex:none;color:var(--red)}

.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(48px,6vw,80px);counter-reset:s;position:relative}
.steps4 li{list-style:none;position:relative;padding:28px 22px 0 0;display:grid;gap:8px;align-content:start}
.steps4 li::before{counter-increment:s;content:"0" counter(s);font-family:var(--f-display);font-weight:800;font-size:.9rem;color:var(--red-ink)}
.steps4 li::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--line)}
.steps4 li:last-child::after{background:var(--red)}
.steps4 h3{font-family:var(--f-display);font-weight:700;font-size:var(--step-1);line-height:1.2}
.steps4 p{color:var(--muted);font-size:.98rem}
.steps4 .tag{justify-self:start;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;background:var(--red);color:var(--on-red);padding:3px 10px;border-radius:999px;margin-top:4px}
.steps4-wrap{padding-left:0;margin-bottom:0}

/* Einsatzfelder Tabs */
.fields{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:start}
.tablist{display:grid;gap:6px;position:sticky;top:96px}
.tab{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-radius:12px;font-weight:700;font-size:1.02rem;border:1.5px solid var(--line);background:var(--surface);transition:border-color .2s,background .2s,color .2s,transform .2s}
.tab:hover{border-color:var(--ink)}
.tab:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.tab .h{font-size:.78rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.tab[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tab[aria-selected="true"] .h{color:var(--bg);opacity:.75}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3.4vw,40px);display:grid;gap:26px;min-width:0}
.panel-hd{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:end}
.panel h3{font-size:var(--step-2);font-weight:800}
.panel .sub{color:var(--muted);margin-top:8px}
.panel-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;counter-reset:p}
.panel-steps div{border-top:3px solid var(--ink);padding-top:14px;display:grid;gap:6px;align-content:start}
.panel-steps b{font-size:1.02rem}
.panel-steps b::before{counter-increment:p;content:counter(p) " · ";color:var(--red-ink);font-family:var(--f-display);font-size:.85rem}
.panel-steps p{color:var(--muted);font-size:.95rem}
.ex{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;background:var(--red-soft);border-radius:12px;padding:16px 18px}
.ex .calc{font-family:var(--f-display);font-weight:700;font-size:var(--step-1);font-variant-numeric:tabular-nums}
.ex .calc em{font-style:normal;color:var(--red-ink)}
.ex small{color:var(--muted);font-size:.85rem;flex-basis:100%}
.panel[hidden]{display:none}

/* Zeitrechner (Negativ-Band) */
.calc-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px);align-items:start}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(20px,3vw,34px)}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chip{all:unset;box-sizing:border-box;cursor:pointer;padding:9px 15px;border-radius:999px;border:1.5px solid var(--line);font-weight:600;font-size:.92rem;transition:all .15s}
.chip:hover{border-color:var(--ink)}
.chip:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.chip[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:var(--on-red)}
.sl{display:grid;gap:8px;padding-block:14px;border-top:1px solid var(--line)}
.sl:first-of-type{border-top:0}
.sl-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sl label{font-weight:600}
.sl output{font-family:var(--f-display);font-weight:700;font-size:1.1rem;font-variant-numeric:tabular-nums;white-space:nowrap}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:40px;background:transparent;cursor:pointer;--p:50%}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--red) 0 var(--p),color-mix(in srgb,var(--ink) 16%,transparent) var(--p) 100%)}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:color-mix(in srgb,var(--ink) 16%,transparent)}
input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:var(--red)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:var(--surface);border:4px solid var(--red);box-shadow:0 2px 8px rgba(0,0,0,.25);transition:transform .15s}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--surface);border:4px solid var(--red)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.result{display:grid;gap:22px}
.big{font-family:var(--f-display);font-weight:800;font-size:clamp(3rem,2rem + 4.6vw,5.4rem);line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.18em;flex-wrap:wrap}
.big small{font-size:.32em;letter-spacing:0;color:var(--muted);font-weight:700}
.formula{font-variant-numeric:tabular-nums;font-weight:600;color:var(--muted);font-size:.95rem;border-left:3px solid var(--red);padding-left:12px}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kpi{border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;gap:2px}
.kpi b{font-family:var(--f-display);font-size:1.45rem;font-weight:700;font-variant-numeric:tabular-nums}
.kpi span{font-size:.85rem;color:var(--muted)}
.example{margin-top:clamp(36px,5vw,56px)}
.example h3{font-size:var(--step-2);font-weight:800;margin-bottom:6px}
.bars{display:grid;gap:10px;margin-top:22px}
.brow{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr) 64px;gap:14px;align-items:center;font-size:.95rem}
.brow .lab{font-weight:600}
.brow .trk{height:18px;border-radius:4px;background:color-mix(in srgb,var(--ink) 7%,transparent);overflow:hidden}
.brow .trk i{display:block;height:100%;background:var(--red);transform-origin:left;width:var(--w);border-radius:4px}
.brow .val{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.eq{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.eq .t{display:grid;line-height:1.15}
.eq .t b{font-family:var(--f-display);font-size:clamp(1.6rem,1.2rem + 1.5vw,2.4rem);font-weight:800}
.eq .t span{font-size:.82rem;color:var(--muted)}
.eq .op{font-family:var(--f-display);font-size:1.8rem;font-weight:500;color:var(--muted)}
.eq .t.res b{color:var(--red-ink)}

/* Branchen */
.ind{border-top:2px solid var(--ink)}
.ind-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,.8fr) 40px;gap:20px;align-items:center;padding:22px 4px;border-bottom:1px solid var(--line);transition:background .2s,padding .2s}
.ind-row:hover{background:var(--surface);padding-inline:16px}
.ind-row h3{font-family:var(--f-display);font-weight:700;font-size:var(--step-1);min-width:0;overflow-wrap:anywhere;hyphens:auto}
.ind-row p{color:var(--muted)}
.ind-row .pill{justify-self:start;font-weight:700;font-size:.85rem;padding:5px 12px;border-radius:999px;background:var(--red-soft);color:var(--red-ink);white-space:nowrap}
.ind-row svg{width:22px;height:22px;color:var(--red-ink);justify-self:end;transition:transform .25s}
.ind-row:hover svg{transform:translate(4px,-4px)}

/* Social */
.social-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:end;margin-bottom:clamp(36px,5vw,56px)}
.social-top h2 .red{display:block;font-size:.58em;line-height:1.2;margin-top:14px;font-weight:700}
.eight{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin-bottom:clamp(36px,5vw,56px);counter-reset:e}
.eight li{list-style:none;min-width:0;hyphens:auto;border:1.5px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:4px;background:var(--surface);font-weight:700;font-size:.95rem;line-height:1.25}
.eight li::before{counter-increment:e;content:"0" counter(e);font-family:var(--f-display);font-size:.78rem;color:var(--red-ink)}
.eight-wrap{padding-left:0;margin-top:0}
.offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.offer{position:relative;border-radius:20px;padding:clamp(24px,3.4vw,40px);display:flex;flex-direction:column;gap:22px;border:1.5px solid var(--line);background:var(--surface);overflow:hidden}
.offer.neg{border-color:var(--bg)}
.offer .kick{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.offer .name{font-family:var(--f-display);font-weight:800;font-size:var(--step-2)}
.offer .badge{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px;border:1.5px solid currentColor}
.offer .badge.r{background:var(--red);color:var(--on-red);border-color:var(--red)}
.price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price b{font-family:var(--f-display);font-weight:800;font-size:clamp(2.6rem,2rem + 2.4vw,3.8rem);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.price span{color:var(--muted);font-weight:600}
.setup{font-weight:600;color:var(--muted);margin-top:-12px}
.offer ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.offer li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px}
.offer li svg{width:20px;height:20px;color:var(--red-ink);margin-top:3px}
.offer li b{display:block}
.offer li span{color:var(--muted);font-size:.95rem}
.offer .fine{font-size:.85rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:14px}
.offer .btn{align-self:flex-start;margin-top:auto}
.tbl-wrap{overflow-x:auto;margin-top:clamp(36px,5vw,56px);border:1px solid var(--line);border-radius:16px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:.97rem}
caption{text-align:left;padding:20px 22px 6px;font-family:var(--f-display);font-weight:700;font-size:var(--step-1)}
th,td{text-align:left;padding:14px 22px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
tbody th{font-weight:700}
tbody tr:last-child>*{border-bottom:0}
td.you{color:var(--red-ink);font-weight:600}
.addons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.addon{border:1px dashed var(--line);border-radius:14px;padding:18px 20px;display:grid;gap:4px}
.addon b{font-family:var(--f-display);font-weight:700;font-size:1.05rem}
.addon span{color:var(--muted);font-size:.93rem}
.channels{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.channels span{font-size:.85rem;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--line)}
.channels span.std{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* Einführung + Betrieb */
.road{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:r;padding:0;margin:0}
.road li{list-style:none;position:relative;padding:22px 18px 20px;border-radius:14px;background:var(--surface);border:1px solid var(--line);display:grid;gap:6px;align-content:start;transition:transform .25s}
.road li:hover{transform:translateY(-4px)}
.road li::before{counter-increment:r;content:counter(r);font-family:var(--f-display);font-weight:800;font-size:2.4rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--red-ink)}
.road h3{font-family:var(--f-display);font-size:1.05rem;font-weight:700}
.road p{color:var(--muted);font-size:.93rem}
.road li:nth-child(5){background:var(--ink);color:var(--bg);border-color:var(--ink)}
.road li:nth-child(5) p{color:color-mix(in srgb,var(--bg) 72%,transparent)}
.control{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,64px);margin-top:clamp(56px,7vw,96px);align-items:start}
.control-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.control-list div{padding:20px;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;gap:6px;align-content:start}
.control-list b{font-size:1.05rem}
.control-list p{color:var(--muted);font-size:.95rem}
.criteria{display:grid;gap:10px;margin-top:24px}
.criteria div{display:flex;gap:12px;align-items:flex-start}
.criteria svg{width:22px;height:22px;flex:none;color:var(--red-ink);margin-top:2px}

/* Kontakt */
.contact{background:var(--band-red);color:var(--on-red)}
.contact .eyebrow{color:#FFFFFF}
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:start}
.contact h2{font-size:clamp(2rem,1.5rem + 2vw,3.3rem);font-weight:800;line-height:1;letter-spacing:-.02em}
.contact .lead{color:rgba(255,255,255,.88)}
.trio{display:grid;gap:6px;margin-top:28px;font-family:var(--f-display);font-weight:700;font-size:var(--step-1)}
.trio span{display:flex;align-items:flex-start;gap:12px}
.trio span::before{content:"";flex:none;margin-top:.42em;width:12px;height:12px;background:#FFFFFF;clip-path:polygon(50% 0,100% 100%,0 100%)}
.direct{margin-top:36px;display:grid;gap:10px;padding-top:24px;border-top:1px solid rgba(255,255,255,.3)}
.direct .lbl{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.mailrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.mailrow a{display:inline-block;padding-block:8px;font-weight:700;font-size:var(--step-1);text-decoration-thickness:2px;text-underline-offset:4px;user-select:all;color:#FFFFFF}
.copy{all:unset;cursor:pointer;font-size:.85rem;font-weight:700;padding:11px 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.7);color:#FFFFFF}
.copy:hover{background:#FFFFFF;color:var(--band-red)}
.copy:focus-visible{outline:3px solid #FFFFFF;outline-offset:2px}
.form{--bg:var(--surface);background:var(--surface);color:var(--ink);border-radius:22px;padding:clamp(22px,3.4vw,40px);box-shadow:0 30px 60px -30px rgba(0,0,0,.55);display:grid;gap:18px;min-width:0}
.form h3,.form .form-h{font-size:var(--step-2);font-weight:800}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fld{display:grid;gap:6px;min-width:0}
.fld label,.fld legend{font-weight:700;font-size:.92rem}
.fld .opt{font-weight:500;color:var(--muted)}
.fld input,.fld textarea{width:100%;border:1.5px solid var(--line);background:color-mix(in srgb,var(--ink) 3%,var(--surface));border-radius:12px;padding:13px 14px;font-size:1rem;transition:border-color .15s,box-shadow .15s}
.fld textarea{min-height:120px;resize:vertical}
.fld input:hover,.fld textarea:hover{border-color:color-mix(in srgb,var(--ink) 40%,var(--line))}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 18%,transparent)}
.fld.err input,.fld.err textarea{border-color:var(--red)}
.fld .msg{font-size:.85rem;color:var(--red-ink);font-weight:600;min-height:0}
.fld .msg:empty{display:none}
fieldset{border:0;padding:0;margin:0;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);font-weight:600;font-size:.92rem;transition:all .15s}
.chips input:hover+span{border-color:var(--ink)}
.chips input:focus-visible+span{outline:3px solid var(--red);outline-offset:2px}
.chips input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chips input:checked+span::before{content:"✓";font-weight:800}
.consent{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;font-size:.9rem;color:var(--muted)}
.consent input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--red)}
.linkbtn{all:unset;cursor:pointer;text-decoration:underline;text-underline-offset:3px;color:var(--ink);font-weight:600}
.linkbtn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.form .btn{justify-self:start}
.form-ok{display:grid;gap:14px;align-content:start}
.form-ok .tick{width:64px;height:64px;border-radius:50%;background:var(--red);color:var(--on-red);display:grid;place-items:center}
.form-ok .tick svg{width:30px;height:30px}
.form-ok .hint{font-size:.88rem;color:var(--muted);background:color-mix(in srgb,var(--ink) 5%,transparent);padding:12px 14px;border-radius:10px}

/* Footer */
.foot{padding-block:clamp(56px,7vw,88px) 32px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,.7fr));gap:32px}
.foot .brand .m{width:64px;height:52px}
.foot .brand .w{width:170px;height:31px}
.foot .tag{margin-top:16px;font-weight:600;font-size:1.05rem}
.foot .tag em{font-style:normal;color:var(--red-ink)}
.foot h4{font-family:var(--f-body);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.foot ul a,.foot ul .linkbtn{display:inline-block;padding-block:10px}
.foot a,.foot .linkbtn{text-decoration:none;font-weight:600;color:var(--ink)}
.foot a:hover,.foot .linkbtn:hover{color:var(--red-ink)}
.foot-bottom{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.88rem;color:var(--muted)}

/* Rechtliches-Overlay */
.ovl{position:fixed;inset:0;z-index:80;background:rgba(8,9,12,.6);display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) var(--gutter-r) max(16px,env(safe-area-inset-bottom,0px)) var(--gutter-l);animation:fade .2s ease}
.ovl[hidden]{display:none}
.ovl-box{background:var(--surface);color:var(--ink);border-radius:20px;max-width:520px;width:100%;padding:clamp(22px,4vw,36px);display:grid;gap:14px;box-shadow:var(--shadow)}
.ovl-box h2{font-size:var(--step-2);font-weight:800}
.ovl-box .btn{justify-self:start}
@keyframes fade{from{opacity:0}}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:999px;font-weight:700;font-size:.92rem;opacity:0;pointer-events:none;transition:all .25s;z-index:90}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Digital-Check ---------- */
.cl{font-weight:700;font-size:.95rem}
.cbox{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;background:var(--surface);border:2px solid var(--ink);border-radius:22px;padding:6px;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
.cbox:focus-within{border-color:var(--red);box-shadow:0 0 0 5px color-mix(in srgb,var(--red) 18%,transparent)}
.cf{display:flex;align-items:center;min-width:0;min-height:50px;border-radius:16px;background:color-mix(in srgb,var(--ink) 4%,var(--surface));padding:0 4px 0 14px}
.cf .pre{color:var(--muted);font-weight:600;font-size:.92rem;user-select:none;flex:none}
.cf input{flex:1;min-width:0;width:100%;border:0;background:transparent;font-size:1rem;font-weight:600;padding:0 8px;outline:none;color:var(--ink);min-height:48px}
.cf input::placeholder{color:var(--muted);opacity:1;font-weight:500}
.cbox .btn{min-height:50px;border-radius:16px}
.cbox .cf:first-child{grid-column:1 / -1}
.dc-start .cbox{grid-template-columns:minmax(0,1fr)}
@media (max-width:760px){.cbox{grid-template-columns:minmax(0,1fr)}}
.dc-send{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:10px 14px;border-radius:12px;font-size:.93rem;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.dc-send:empty{display:none}
.dc-send .ok{width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-weight:800;font-size:.8rem;flex:none}
.dc-send .ok.bad{background:var(--red);color:#fff}
.dc-send .spin{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--red);border-right-color:transparent;animation:spin .8s linear infinite;flex:none;margin-top:2px}
.dc-send .dot{width:10px;height:10px;border-radius:50%;background:var(--red);flex:none;margin-top:6px}
.dc-send.done{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.dc-send.err{background:var(--red-soft)}
.hero-check{margin-top:30px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;max-width:560px;min-width:0}
.hero-check label{font-weight:700;font-size:.95rem}
.urlbox{display:flex;align-items:stretch;background:var(--surface);border:2px solid var(--ink);border-radius:999px;padding:5px;gap:6px;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
.urlbox:focus-within{border-color:var(--red);box-shadow:0 0 0 5px color-mix(in srgb,var(--red) 18%,transparent)}
.urlbox .pre{display:flex;align-items:center;padding-left:16px;color:var(--muted);font-weight:600;font-size:.95rem;user-select:none}
.urlbox input{flex:1;min-width:0;width:100%;border:0;background:transparent;font-size:1.05rem;font-weight:600;padding:0 6px;outline:none;color:var(--ink)}
.urlbox input::placeholder{color:var(--muted);opacity:1;font-weight:500}
.urlbox .btn{min-height:48px;flex:none}
.hero-check .sub{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.88rem;color:var(--muted);font-weight:600;padding-left:4px}
.hero-check .sub a{color:var(--ink);text-underline-offset:3px;display:inline-block;padding-block:10px;margin-block:-10px}
.hero-check .err,.dc-err{color:var(--red-ink);font-weight:700;font-size:.9rem;min-height:0}
.hero-check .err:empty,.dc-err:empty{display:none}
@media (max-width:520px){
  .urlbox{flex-wrap:wrap;border-radius:18px;padding:8px}
  .urlbox .pre{padding-left:8px;font-size:.9rem}
  .urlbox input{flex-basis:50%;min-height:44px}
  .urlbox .btn{flex-basis:100%}
}

.dc{padding-top:clamp(56px,8vw,104px)}
.dc-head{display:grid;gap:16px;max-width:860px;margin-bottom:clamp(28px,4vw,44px)}
.dc-app{scroll-margin-top:12px;background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:clamp(20px,3.6vw,44px);position:relative;overflow:hidden;min-width:0}
.dc-view[hidden]{display:none}
.dc-start{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:start}
.dc-start h3,.dc-start-h{font-size:var(--step-2);font-weight:800;margin-bottom:16px}
.dc-how{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px;counter-reset:h}
.dc-how li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start}
.dc-how li::before{counter-increment:h;content:counter(h);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:.95rem;background:var(--ink);color:var(--bg)}
.dc-how b{display:block}
.dc-how span{color:var(--muted);font-size:.93rem}
.dc-cats{display:grid;gap:8px}
.dc-cats h4,.dc-cats-h{font-family:var(--f-body);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.dc-cat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 14px;border-radius:12px;border:1px solid var(--line);font-weight:600}
.dc-cat span{font-family:var(--f-display);font-weight:700;font-size:.85rem;color:var(--red-ink);font-variant-numeric:tabular-nums}
.dc-cat i{grid-column:1 / -1;height:4px;border-radius:4px;background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden;font-style:normal}
.dc-cat i::after{content:"";display:block;height:100%;width:var(--w);background:var(--red);border-radius:4px}
.dc-trust{margin-top:16px;font-size:.85rem;color:var(--muted)}

.dc-preview{display:flex;gap:12px;align-items:flex-start;background:var(--red-soft);border-radius:12px;padding:12px 16px;font-size:.92rem;margin-bottom:20px}
.dc-preview b{color:var(--red-ink)}

.dc-run{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,48px);align-items:start}
.dc-host{font-size:.9rem;color:var(--muted);font-weight:600;margin-bottom:6px}
.dc-host b{color:var(--ink);font-family:var(--f-display);font-size:1.15rem;display:block;overflow-wrap:anywhere}
.dc-steps{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:4px}
.dc-steps li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;padding:9px 0;border-bottom:1px dashed var(--line);color:var(--muted);transition:color .25s}
.dc-steps li:last-child{border-bottom:0}
.dc-steps .ic{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;transition:all .25s}
.dc-steps .ic svg{width:15px;height:15px;opacity:0}
.dc-steps li.run{color:var(--ink)}
.dc-steps li.run .ic{border-color:var(--red);border-right-color:transparent;animation:spin .8s linear infinite}
.dc-steps li.done{color:var(--ink)}
.dc-steps li.done .ic{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.dc-steps li.done .ic svg{opacity:1}
.dc-steps li.skipped{color:var(--ink)}
.dc-steps li.skipped .ic{border-style:dashed}
.dc-steps b{display:block;font-size:.97rem}
.dc-steps small{display:block;font-size:.84rem;color:var(--muted);min-height:1.2em}
@keyframes spin{to{transform:rotate(360deg)}}
.dc-bar{height:6px;border-radius:6px;background:color-mix(in srgb,var(--ink) 9%,transparent);overflow:hidden;margin-top:16px}
.dc-bar i{display:block;height:100%;width:4%;background:var(--red);transition:width .5s cubic-bezier(.4,0,.2,1)}

.dc-qbox{background:color-mix(in srgb,var(--ink) 4%,var(--surface));border:1px solid var(--line);border-radius:18px;padding:clamp(18px,3vw,28px);display:grid;gap:16px;min-width:0}
.dc-qtop{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dc-dots{display:flex;gap:5px}
.dc-dots i{width:18px;height:4px;border-radius:4px;background:var(--line)}
.dc-dots i.on{background:var(--red)}
.dc-dots i.done{background:var(--ink)}
.dc-qtitle{font-family:var(--f-display);font-weight:700;font-size:var(--step-1);line-height:1.25}
.dc-hint{font-size:.86rem;color:var(--red-ink);font-weight:600;display:flex;gap:8px;align-items:flex-start}
.dc-hint:empty{display:none}
.dc-opts{display:grid;gap:8px}
.dc-opt{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);font-weight:600;transition:border-color .15s,background .15s,transform .15s}
.dc-opt:hover{border-color:var(--ink)}
.dc-opt:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.dc-opt .mk{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;transition:all .15s}
.dc-opt.multi .mk{border-radius:6px}
.dc-opt[aria-pressed="true"],.dc-opt[aria-checked="true"]{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,var(--surface))}
.dc-opt[aria-pressed="true"] .mk,.dc-opt[aria-checked="true"] .mk{background:var(--red);border-color:var(--red);box-shadow:inset 0 0 0 3px var(--surface)}
.dc-opt.multi[aria-checked="true"] .mk{box-shadow:none}
.dc-opt.multi[aria-checked="true"] .mk::after{content:"✓";color:#fff;font-size:.75rem;font-weight:800}
.dc-opt .sug{margin-left:auto;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red-ink)}
.dc-qnav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.linklike{all:unset;cursor:pointer;font-weight:700;font-size:.92rem;color:var(--muted);padding:10px 4px}
.linklike:hover{color:var(--ink)}
.linklike:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
.linklike[disabled]{opacity:.35;cursor:default}
.dc-wait{display:grid;gap:12px;justify-items:start}
.dc-wait .spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--red);border-right-color:transparent;animation:spin .8s linear infinite}

.dc-err-box{display:grid;gap:14px;justify-items:start;max-width:620px}
.dc-err-box h3{font-size:var(--step-2);font-weight:800}

/* Ergebnis */
.dc-res-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,44px);align-items:center;padding-bottom:clamp(24px,3vw,32px);border-bottom:1px solid var(--line)}
.ring{width:clamp(150px,22vw,190px);aspect-ratio:1;position:relative;max-width:100%}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .trk{fill:none;stroke:color-mix(in srgb,var(--ink) 9%,transparent);stroke-width:12}
.ring .val{fill:none;stroke:var(--red);stroke-width:12;stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1)}
.ring .num{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring .num b{font-family:var(--f-display);font-weight:800;font-size:clamp(2.6rem,2rem + 2.4vw,3.6rem);line-height:1;font-variant-numeric:tabular-nums}
.ring .num span{font-size:.8rem;font-weight:700;color:var(--muted);letter-spacing:.08em}
.dc-res-top h3{font-size:var(--step-3);font-weight:800}
.dc-level{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--ink);color:var(--bg);margin-bottom:12px}
.dc-meta{color:var(--muted);margin-top:10px;font-size:.95rem;overflow-wrap:anywhere}
.dc-strong{margin-top:12px;font-weight:600}
.dc-strong b{color:var(--red-ink)}

.dc-sec-t{font-size:var(--step-2);font-weight:800;margin:clamp(28px,4vw,40px) 0 16px}
.dc-cbars{display:grid;gap:6px}
.dc-crow{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.dc-crow>button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) 56px 22px;gap:14px;align-items:center;padding:13px 16px;font-weight:700}
.dc-crow>button:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.dc-crow>button:focus-visible{outline:3px solid var(--red);outline-offset:-3px}
.dc-crow .trk{height:10px;border-radius:6px;background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden}
.dc-crow .trk i{display:block;height:100%;width:0;border-radius:6px;background:var(--red);transition:width 1s cubic-bezier(.2,.8,.2,1)}
.dc-crow .trk i.hi{background:var(--ink)}
.dc-crow .pc{text-align:right;font-family:var(--f-display);font-variant-numeric:tabular-nums}
.dc-crow .chev{width:18px;height:18px;transition:transform .2s;color:var(--muted)}
.dc-crow>button[aria-expanded="true"] .chev{transform:rotate(180deg)}
.dc-items{list-style:none;margin:0;padding:4px 16px 14px;display:grid;gap:2px;border-top:1px dashed var(--line)}
.dc-items[hidden]{display:none}
.dc-items li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;padding:8px 0;align-items:start}
.dc-items .st{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:800;margin-top:1px}
.dc-items .st.ok{background:var(--ink);color:var(--bg)}
.dc-items .st.part{background:color-mix(in srgb,var(--red) 22%,var(--surface));color:var(--red-ink)}
.dc-items .st.bad{background:var(--red);color:#fff}
.dc-items .st.na{border:1.5px dashed var(--line);color:var(--muted)}
.dc-items b{font-weight:700;font-size:.95rem}
.dc-items small{display:block;color:var(--muted);font-size:.86rem;overflow-wrap:anywhere}
.dc-items .src{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-left:6px}

.dc-pots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dc-pot{border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:12px;background:var(--surface)}
.dc-pot .tag{display:flex;justify-content:space-between;gap:10px;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dc-pot .tag b{color:var(--red-ink);font-family:var(--f-display);letter-spacing:0}
.dc-pot h4{font-size:var(--step-1);font-weight:700;line-height:1.25}
.dc-pot ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;color:var(--muted);font-size:.94rem}
.dc-pot li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px}
.dc-pot li::before{content:"";width:9px;height:9px;margin-top:.45em;background:var(--red);clip-path:polygon(50% 0,100% 100%,0 100%)}
.dc-pot .svc{margin-top:auto;padding-top:12px;border-top:1px dashed var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:700;font-size:.92rem}
.dc-pot .svc a{display:inline-flex;align-items:center;gap:6px;color:var(--red-ink);text-decoration:none;white-space:nowrap;padding-block:12px}
.dc-pot .svc a svg{width:15px;height:15px}

.dc-lead{margin-top:clamp(28px,4vw,40px);border-radius:20px;padding:clamp(20px,3.4vw,36px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,48px)}
.dc-lead h3{font-size:var(--step-2);font-weight:800}
.dc-lead p{color:var(--muted);margin-top:10px}
.dc-lead .form{box-shadow:none;border:1px solid var(--line);padding:clamp(18px,3vw,26px)}
.dc-again{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

@media (max-width:980px){
  .dc-start,.dc-run,.dc-lead{grid-template-columns:minmax(0,1fr)}
  .dc-qbox{order:-1}
  .dc-steps li{padding:6px 0}
  .dc-pots{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .dc-res-top{grid-template-columns:minmax(0,1fr);justify-items:start}
  .dc-crow>button{grid-template-columns:minmax(0,1fr) 48px 18px;gap:6px 10px}
  .dc-crow .trk{grid-column:1 / -1;grid-row:2}
}

/* Responsive */
@media (max-width:980px){
  .hero-grid,.split,.calc-grid,.contact-grid,.social-top,.control{grid-template-columns:minmax(0,1fr)}
  .stage{padding-top:min(40vw,240px);max-width:560px}
  .stage .bigmark{right:-8px;top:0;width:min(78vw,400px)}
  .pillars{grid-template-columns:minmax(0,1fr)}
  .steps4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .fields{grid-template-columns:minmax(0,1fr)}
  .tablist{position:static;grid-template-columns:repeat(3,minmax(0,1fr))}
  .offers{grid-template-columns:minmax(0,1fr)}
  .road{grid-template-columns:repeat(2,minmax(0,1fr))}
  .road li:nth-child(5){grid-column:1 / -1}
  .addons{grid-template-columns:minmax(0,1fr)}
  .ind-row{grid-template-columns:minmax(0,1fr) auto 28px;gap:4px 18px}
  .ind-row h3{grid-column:1;grid-row:1}
  .ind-row p{grid-column:1;grid-row:2}
  .ind-row .pill{grid-column:2;grid-row:1 / span 2;align-self:center}
  .ind-row svg{grid-column:3;grid-row:1 / span 2;align-self:center}
  .stage{margin-inline:auto}
  .eight{grid-template-columns:repeat(4,minmax(0,1fr))}
  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot-grid>div:first-child{grid-column:1 / -1}
}
@media (max-width:640px){
  .steps4{grid-template-columns:minmax(0,1fr)}
  .ind-row{grid-template-columns:minmax(0,1fr) 28px;gap:6px 12px}
  .ind-row h3{grid-column:1;grid-row:1}
  .ind-row svg{grid-row:1;grid-column:2}
  .ind-row p{grid-column:1 / -1;grid-row:2}
  .ind-row .pill{grid-column:1 / -1;grid-row:3;justify-self:start}
  .row2,.kpis,.control-list{grid-template-columns:minmax(0,1fr)}
  .brow{grid-template-columns:minmax(0,1fr) 56px;gap:4px 10px}
  .brow .lab{grid-column:1 / -1}
  .road{grid-template-columns:minmax(0,1fr)}
  .eight{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tablist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tab{padding:12px 14px;font-size:.95rem;flex-direction:column;align-items:flex-start;gap:2px}
  .tbl-wrap{overflow:visible;border:0;background:transparent}
  .tbl-wrap table{min-width:0}
  .tbl-wrap caption{padding:0 0 12px}
  .tbl-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .tbl-wrap tbody,.tbl-wrap tr,.tbl-wrap th,.tbl-wrap td{display:block}
  .tbl-wrap tr{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px 0;margin-bottom:10px}
  .tbl-wrap tbody th{border:0;padding:10px 18px 4px;font-family:var(--f-display);font-size:1rem}
  .tbl-wrap td{border:0;padding:6px 18px 8px}
  .tbl-wrap td::before{content:attr(data-label);display:block;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--muted)}
  .tbl-wrap tbody tr:last-child>*{border-bottom:0}
  .eq{flex-direction:column;align-items:flex-start;gap:2px}
  .eq .op{font-size:1.3rem;line-height:1}
  .eq .t.res+.op+.t{margin-top:12px}
  .hero-ctas .btn{flex:1 1 100%}
  .flow li{grid-template-columns:28px minmax(0,1fr)}
  .flow .st{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .ticker .row{animation:none}
}


/* ================= Mehrseiten-Erweiterungen ================= */

/* Navigation mit Dropdown */
.nav{align-items:center}
.nav>a,.dd-btn{position:relative;text-decoration:none;font-weight:600;font-size:.95rem;padding:8px 12px;border-radius:999px;color:var(--muted);transition:color .15s,background .15s}
.nav>a:hover,.dd-btn:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.nav>a[aria-current="page"],.dd-btn.current{color:var(--ink)}
.nav>a[aria-current="page"]::after,.dd-btn.current::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;background:var(--red);transform:skewX(-28deg)}
.hdr .wrap{position:relative}
.dd{position:static}
.dd-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:40px;position:relative;font-weight:600;font-size:.95rem;padding:8px 12px;border-radius:999px;color:var(--muted)}
.dd-btn:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.dd-btn svg{width:14px;height:14px;transition:transform .2s}
.dd[data-open] .dd-btn{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.dd[data-open] .dd-btn svg{transform:rotate(180deg)}

/* Mega-Dropdown: alle Leistungen mit Unterpunkten */
.dd-menu{display:none;position:absolute;top:calc(100% - 6px);left:var(--gutter-l);right:var(--gutter-r);background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:0 34px 70px -28px rgba(10,12,18,.4),var(--shadow);padding:14px;z-index:60;animation:ddIn .18s ease}
.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
@keyframes ddIn{from{opacity:0;transform:translateY(-6px)}}
.dd[data-open] .dd-menu{display:block}
@media (hover:hover) and (pointer:fine){.dd:hover .dd-menu{display:block}.dd:hover .dd-btn svg{transform:rotate(180deg)}}
.mm-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.mm-col{display:grid;align-content:start;gap:4px;padding:6px;border-radius:16px}
.mm-head{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start;padding:10px;border-radius:14px;text-decoration:none;color:var(--ink);transition:background .15s}
.mm-head:hover,.mm-head:focus-visible{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.mm-head[aria-current="page"]{background:var(--red-soft)}
.dd-menu .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--red-soft);color:var(--red-ink)}
.dd-menu .ico svg{width:22px;height:22px}
.dd-menu b{display:block;font-size:1rem;line-height:1.3}
.dd-menu span.t{display:block;font-size:.84rem;line-height:1.4;color:var(--muted);font-weight:500;margin-top:3px}
.mm-sub{list-style:none;margin:2px 0 0;padding:0 10px 4px 66px;display:grid;gap:0}
.mm-sub a{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:.9rem;font-weight:600;color:var(--muted);text-decoration:none}
.mm-sub a::before{content:"";width:7px;height:7px;flex:none;background:var(--red);clip-path:polygon(50% 0,100% 100%,0 100%)}
.mm-sub a:hover,.mm-sub a:focus-visible{color:var(--ink)}
.mm-foot{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:10px;padding-top:12px;border-top:1px dashed var(--line)}
.mm-check,.mm-calc{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 14px 10px 10px;border-radius:14px;text-decoration:none;color:var(--ink);background:var(--red-soft);transition:filter .15s}
.mm-calc{grid-template-columns:44px minmax(0,1fr);background:color-mix(in srgb,var(--ink) 4%,transparent)}
.mm-check:hover,.mm-calc:hover{filter:brightness(.97)}
.mm-check>svg{width:16px;height:16px;color:var(--red-ink)}
.mm-check .ico{background:var(--red);color:#fff}
.dd-menu .all{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:14px;background:var(--ink);color:var(--bg);font-weight:700;text-decoration:none}
.dd-menu .all:hover,.dd-menu .all:focus-visible{opacity:.92}
.dd-menu .all svg{width:16px;height:16px}
@media (max-width:1320px){.mm-sub{padding-left:10px}}

/* Mobiles Menü mit Unterpunkten */
@media (max-width:1240px){
  .mobile-nav{max-height:calc(100dvh - 72px);overflow-y:auto}
  .mobile-nav .grp-l{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted);padding:14px 0 4px}
  .mobile-nav .sub{display:grid;padding-left:14px;border-left:3px solid var(--red);margin-bottom:6px}
  .mobile-nav .sub a{font-family:var(--f-body);font-weight:700;font-size:1.05rem;padding:11px 0}
  .mobile-nav a[aria-current="page"]{color:var(--red-ink)}
}

/* Unterseiten-Kopf */
.phero{padding-block:clamp(36px,6vw,80px) clamp(48px,7vw,96px);position:relative;overflow:hidden}
.phero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,5vw,72px);align-items:center}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-size:.88rem;font-weight:600;color:var(--muted);margin-bottom:22px}
.crumbs a{color:var(--muted);text-decoration:none;padding-block:8px}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{opacity:1}
.phero h1{font-size:clamp(2.3rem,1.5rem + 3.6vw,4.6rem);font-weight:800;line-height:1;letter-spacing:-.025em;margin-top:18px}
.phero h1 .red{display:block}
.phero .lead{margin-top:24px}
.phero-art{position:relative;aspect-ratio:1;max-width:400px;justify-self:end;width:100%}
.phero-art .disc{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--red) 22%,transparent),transparent 72%)}
.phero-art .tile{position:absolute;inset:16%;border-radius:32%;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);display:grid;place-items:center;transform:rotate(-8deg)}
.phero-art .tile svg{width:46%;height:46%;color:var(--red-ink);transform:rotate(8deg)}
.phero-art .tile.alt{inset:auto 0 4% auto;width:40%;height:40%;border-radius:28%;background:var(--ink);color:var(--bg);transform:rotate(10deg);border:0}
.phero-art .tile.alt svg{color:var(--bg);width:52%;height:52%;transform:rotate(-10deg)}
.phero-facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;font-weight:600;font-size:.95rem}
.phero-facts span{display:inline-flex;align-items:center;gap:8px}
.phero-facts span::before{content:"";width:8px;height:8px;background:var(--red);clip-path:polygon(50% 0,100% 100%,0 100%)}

/* Leistungs-Karten */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.svc-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.8vw,32px);border-radius:20px;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .3s cubic-bezier(.2,.9,.3,1),border-color .3s,box-shadow .3s}
.svc-card:hover{transform:translateY(-6px);border-color:var(--ink);box-shadow:var(--shadow)}
.svc-card .ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--red-soft);color:var(--red-ink)}
.svc-card .ico svg{width:26px;height:26px}
.svc-card .num{position:absolute;right:22px;top:20px;font-family:var(--f-display);font-weight:800;font-size:.85rem;color:var(--muted)}
.svc-card h3{font-size:var(--step-2);font-weight:800;line-height:1.1}
.svc-card p{color:var(--muted)}
.svc-card ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.95rem}
.svc-card li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px;align-items:baseline}
.svc-card li::before{content:"";width:9px;height:9px;background:var(--red);clip-path:polygon(50% 0,100% 100%,0 100%);transform:translateY(-1px)}
.svc-card .go{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:8px;font-weight:700}
.svc-card .go svg{width:16px;height:16px;transition:transform .25s}
.svc-card:hover .go svg{transform:translate(3px,-3px)}
.svc-card:hover .go{color:var(--red-ink)}
.svc-card.dark{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.svc-card.dark p,.svc-card.dark li{color:color-mix(in srgb,var(--bg) 78%,transparent)}
.svc-card.dark .ico{background:var(--red);color:#fff}
.svc-card.dark:hover .go{color:var(--bg)}
.svc-card .new{position:absolute;right:20px;top:20px;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--red);color:#fff}

/* Leistungen-Übersicht: Zeilen */
.svc-rows{display:grid;gap:clamp(14px,2vw,20px)}
.svc-row{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1fr) auto;gap:clamp(16px,3vw,36px);align-items:start;padding:clamp(22px,3vw,34px);border-radius:22px;background:var(--surface);border:1px solid var(--line)}
.svc-row .ico{width:72px;height:72px;border-radius:20px;display:grid;place-items:center;background:var(--red-soft);color:var(--red-ink)}
.svc-row .ico svg{width:34px;height:34px}
.svc-row h2{font-size:var(--step-2);font-weight:800}
.svc-row p{color:var(--muted);margin-top:10px}
.svc-row ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.svc-row li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px}
.svc-row li svg{width:18px;height:18px;color:var(--red-ink);margin-top:4px}

/* Feature-Karten */
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(20px,2.4vw,28px);display:grid;gap:10px;align-content:start}
.feat .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--red-soft);color:var(--red-ink)}
.feat .ico svg{width:22px;height:22px}
.feat h3{font-family:var(--f-display);font-size:var(--step-1);font-weight:700;line-height:1.2}
.feat p{color:var(--muted);font-size:.97rem}
.feat ul{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.feat ul li{font-size:.8rem;font-weight:700;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--ink)}

/* KI-Band */
.ai-band{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,64px);align-items:start}
.ai-list{display:grid;gap:10px;counter-reset:a}
.ai-list div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:16px 18px;border-radius:14px;background:var(--surface);border:1px solid var(--line);align-items:start}
.ai-list div::before{counter-increment:a;content:"0" counter(a);font-family:var(--f-display);font-weight:800;font-size:1.05rem;color:var(--red-ink);padding-top:2px}
.ai-list b{display:block}
.ai-list p{color:var(--muted);font-size:.95rem}
.human{display:flex;gap:14px;align-items:center;margin-top:16px;padding:16px 18px;border-radius:14px;background:var(--ink);color:var(--bg);font-weight:600}
.human svg{width:28px;height:28px;flex:none;color:var(--red)}

/* Messwerte-Liste */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.metric{border-top:3px solid var(--ink);padding-top:14px;display:grid;gap:6px;align-content:start}
.metric b{font-family:var(--f-display);font-weight:800;font-size:1.25rem}
.metric span{color:var(--muted);font-size:.95rem}

/* FAQ */
.faq{display:grid;gap:10px;max-width:880px}
.faq details{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;font-weight:700;font-size:1.05rem;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-display);font-size:1.4rem;line-height:1;color:var(--red-ink);transition:transform .2s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:3px solid var(--red);outline-offset:-3px;border-radius:16px}
.faq details>div{padding:0 20px 18px;color:var(--muted)}

/* Sicherheits-Selbstcheck */
.sc{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,4vw,48px);align-items:start}
.sc-list{display:grid;gap:8px}
.sc-item{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s}
.sc-item:hover{border-color:var(--ink)}
.sc-item input{width:24px;height:24px;margin:1px 0 0;accent-color:var(--red);cursor:pointer}
.sc-item b{display:block;font-size:1rem}
.sc-item span{color:var(--muted);font-size:.9rem}
.sc-item:has(input:checked){border-color:var(--ink);background:color-mix(in srgb,var(--ink) 4%,var(--surface))}
.sc-item:has(input:focus-visible){outline:3px solid var(--red);outline-offset:2px}
.sc-res{position:sticky;top:96px;display:grid;gap:16px}
.sc-res .big{font-size:clamp(3.4rem,2.4rem + 4vw,5.6rem)}
.sc-meter{height:12px;border-radius:8px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden}
.sc-meter i{display:block;height:100%;width:0;background:var(--red);border-radius:8px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.sc-res h3{font-size:var(--step-2);font-weight:800}
.sc-res p{color:var(--muted)}
.alert{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:16px;border:1.5px solid var(--red);background:var(--red-soft);margin-top:clamp(28px,4vw,40px)}
.alert svg{width:26px;height:26px;flex:none;color:var(--red-ink);margin-top:1px}
.alert b{display:block;margin-bottom:4px}

/* Team */
.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.tm{display:grid;gap:14px;align-content:start}
.tm .ph{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:var(--ink);color:var(--bg);display:grid;place-items:center}
.tm .ph::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 80% 0%,color-mix(in srgb,var(--red) 55%,transparent),transparent 60%)}
.tm .ph b{position:relative;font-family:var(--f-display);font-weight:800;font-size:clamp(2.6rem,2rem + 2vw,3.6rem);letter-spacing:-.03em}
.tm .ph small{position:absolute;left:14px;bottom:12px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:1}
.tm .ph.open{background:transparent;color:var(--muted);border:2px dashed var(--line)}
.tm .ph.open::before{display:none}
.tm .ph.open b{font-size:2.6rem;color:var(--muted)}
.tm h3,.tm .tm-name{font-size:var(--step-1);font-weight:800}
.tm .role{color:var(--red-ink);font-weight:700;font-size:.95rem;margin-top:-8px}
.tm p{color:var(--muted);font-size:.95rem}
.tm .tags{display:flex;flex-wrap:wrap;gap:6px}
.tm .tags span{font-size:.78rem;font-weight:700;padding:4px 10px;border-radius:999px;border:1px solid var(--line)}
.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.values div{padding:22px;border-radius:16px;background:var(--surface);border:1px solid var(--line);display:grid;gap:8px;align-content:start}
.values b{font-family:var(--f-display);font-size:1.1rem;font-weight:700;line-height:1.2}
.values p{color:var(--muted);font-size:.95rem}

/* Startseite: Check-Teaser */
.dc-teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.dc-teaser .dc-cats{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:clamp(18px,2.6vw,28px)}
.team-teaser{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end}

/* Kontakt-Seite */
.next3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(36px,5vw,56px)}
.next3 div{border-top:3px solid rgba(255,255,255,.6);padding-top:14px;display:grid;gap:6px}
.next3 b{font-family:var(--f-display);font-size:1.05rem}
.next3 p{color:#FFFFFF;font-size:.95rem}

/* Rechtstexte */
.prose{max-width:75ch;display:grid;gap:14px}
.prose h2{font-size:var(--step-2);font-weight:800;margin-top:22px}
.prose p,.prose li{color:var(--muted)}
.prose .todo{display:inline-block;background:var(--red-soft);color:var(--red-ink);font-weight:700;border-radius:6px;padding:1px 8px}

@media (max-width:1060px){
  .team-grid,.values,.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .phero-grid,.ai-band,.sc,.dc-teaser{grid-template-columns:minmax(0,1fr)}
  .phero-art{max-width:260px;justify-self:start;order:-1;display:none}
  .svc-grid,.feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-row{grid-template-columns:56px minmax(0,1fr)}
  .svc-row .ico{width:56px;height:56px;border-radius:16px}
  .svc-row .ico svg{width:28px;height:28px}
  .svc-row>ul,.svc-row>.btn{grid-column:2}
  .sc-res{position:static}
  .next3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .svc-grid,.feats,.team-grid,.values,.metrics{grid-template-columns:minmax(0,1fr)}
  .svc-row{grid-template-columns:minmax(0,1fr)}
  .svc-row>ul,.svc-row>.btn{grid-column:auto}
  .team-teaser{grid-template-columns:minmax(0,1fr)}
  .tm{grid-template-columns:120px minmax(0,1fr);column-gap:16px}
  .tm .ph{grid-row:1 / span 5;aspect-ratio:4/5}
  .tm .ph b{font-size:2rem}
  .tm .ph small{display:none}
  .tm .role{margin-top:-10px}
}

/* Lange deutsche Wörter auf kleinen Bildschirmen */
.prose>*,.dc-head>*,.sec-head>*{min-width:0}
@media (max-width:640px){
  h1,h2,h3{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
  .prose h1{font-size:clamp(1.6rem,1.2rem + 3vw,2.2rem)}
}
@media (max-width:1240px){.mobile-nav .btn{justify-content:center;gap:10px;font-family:var(--f-body);font-size:1.05rem;border-bottom:0;padding:0 24px}}

/* Kopfzeile mit vier Leistungs-Reitern */
.nav{gap:2px}
.nav>a,.dd-btn{font-size:.92rem;padding:8px 10px}
.nav>a[aria-current="page"]::after,.dd-btn.current::after{left:10px;right:10px}
.hdr .wrap{gap:16px}
.dd.nohover:not([data-open]):hover .dd-menu{display:none}

/* Startseite: Leistungen als anklickbare Reiter */
.hero-tabs{display:flex;flex-wrap:wrap;gap:8px}
.hero-tabs a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--red) 45%,transparent);color:var(--red-ink);background:color-mix(in srgb,var(--surface) 60%,transparent);font-weight:800;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:background .15s,color .15s,border-color .15s,transform .2s}
.hero-tabs a svg{width:13px;height:13px;transition:transform .2s}
.hero-tabs a:hover,.hero-tabs a:focus-visible{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-2px)}
.hero-tabs a:hover svg{transform:translate(2px,-2px)}

/* Handy & Tablet: Reiterleiste unter dem Logo */
.tabbar-wrap,.tb-panel{display:none}
@media (max-width:1240px){
  .tabbar-wrap{display:block;position:relative}
  .tabbar-wrap::after{content:"";position:absolute;top:0;right:0;bottom:10px;width:32px;background:linear-gradient(90deg,transparent,var(--bg));pointer-events:none}
  .tabbar{display:flex;gap:8px;overflow-x:auto;padding:2px var(--gutter-r) 12px var(--gutter-l);scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding-inline:16px}
  .tabbar::-webkit-scrollbar{display:none}
  .tabbar>a,.tb-btn{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 15px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-weight:700;font-size:.92rem;white-space:nowrap;text-decoration:none}
  .tabbar>a:last-child{margin-right:24px}
  .tabbar>a[aria-current="page"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .tb-btn{all:unset;box-sizing:border-box;flex:none;display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 15px;border-radius:999px;background:var(--red);color:#fff;font-weight:800;font-size:.92rem;cursor:pointer;white-space:nowrap}
  .tb-btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
  .tb-btn svg{width:14px;height:14px;transition:transform .2s}
  .tb-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
  .tb-panel{display:grid;padding:6px var(--gutter-r) 16px var(--gutter-l);border-top:1px solid var(--line);background:var(--bg);max-height:calc(100dvh - 140px);overflow-y:auto}
  .tb-panel[hidden]{display:none}
  .tb-panel{gap:6px}
  .tbp-item{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:6px}
  .tbp-head{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:center;padding:8px;border-radius:12px;text-decoration:none;color:var(--ink)}
  .tbp-head[aria-current="page"]{background:var(--red-soft)}
  .tb-panel .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--red-soft);color:var(--red-ink)}
  .tb-panel .ico svg{width:22px;height:22px}
  .tb-panel b{display:block;font-size:1rem;line-height:1.3}
  .tb-panel span.t{display:block;font-size:.85rem;color:var(--muted);line-height:1.35}
  .tbp-sub{display:flex;flex-wrap:wrap;gap:6px;padding:4px 8px 8px 62px}
  .tbp-sub a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);font-size:.86rem;font-weight:700;color:var(--ink);text-decoration:none}
  .tb-panel .mm-check{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;border-radius:16px;background:var(--red-soft);color:var(--ink);text-decoration:none;margin-top:4px}
  .tb-panel .mm-check .ico{background:var(--red);color:#fff}
  .tb-panel .mm-check>svg{width:16px;height:16px;color:var(--red-ink)}
  .tb-panel .all{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:16px;background:var(--ink);color:var(--bg);font-weight:700;text-decoration:none}
  .tb-panel .all svg{width:16px;height:16px}
  .section{scroll-margin-top:0}
  .dc-app{scroll-margin-top:12px!important}
}

/* Preise auf Anfrage, drei Pakete */
.price.req b{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);letter-spacing:-.02em}
.offers.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.offers.three .offer{padding:clamp(22px,2.6vw,32px)}
@media (max-width:1100px){.offers.three{grid-template-columns:minmax(0,1fr)}}
.addon a{color:inherit;font-weight:700}

/* Leistungen-Übersicht: Direktsprünge */
.jump{grid-column:2 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:4px;border-top:1px dashed var(--line);margin-top:4px}
.jump span{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:4px;padding-top:8px}
.jump a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);font-size:.86rem;font-weight:700;color:var(--ink);text-decoration:none;margin-top:8px}
.jump a:hover{border-color:var(--ink)}
@media (max-width:980px){.jump{grid-column:2}}
@media (max-width:640px){.jump{grid-column:auto}}
@media (max-width:640px){.hero-tabs{gap:6px}.hero-tabs a{min-height:36px;padding:0 11px;font-size:.68rem;letter-spacing:.08em}}
.offers.three .offer .name{font-size:clamp(1.2rem,1rem + .8vw,1.5rem)}
.road h3{overflow-wrap:break-word;hyphens:manual}

/* Rechenbeispiele einfach erklärt */
.ex-how{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;flex-basis:100%}
.ex-how>span:not(.op){display:grid;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 12px;min-width:0}
.ex-how small{font-size:.78rem;color:var(--muted);font-weight:600}
.ex-how b{font-family:var(--f-display);font-size:1.05rem;font-variant-numeric:tabular-nums}
.ex-how .win{border-color:var(--red-ink)}
.ex-how .win b{color:var(--red-ink)}
.ex-how .op{align-self:center;font-weight:800;color:var(--muted)}
.ex-easy{flex-basis:100%;margin:0;font-size:.95rem;line-height:1.55;color:var(--ink);max-width:70ch}
.ex-easy b{color:var(--red-ink)}
.ex-list{flex-basis:100%;margin:0;padding-left:1.1em;display:grid;gap:4px;font-size:.92rem}

/* Bruttopreis */
.offer .gross{margin-top:-14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.offer .setup .g{font-weight:500}

/* ---------- Digital-Check-Button oben rechts ---------- */
.dc-top{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px 0 12px;border-radius:999px;border:2px solid var(--red);background:var(--surface);color:var(--red-ink);font-weight:800;font-size:.9rem;text-decoration:none;white-space:nowrap;flex:none;transition:background .15s,color .15s}
.dc-top svg{width:20px;height:20px;flex:none}
.dc-top:hover,.dc-top[aria-current="page"]{background:var(--red);color:var(--on-red)}
@media (max-width:560px){
  .hdr .theme-btn{display:none}
  .dc-top{min-height:40px;padding:0 12px 0 9px;font-size:.84rem;gap:6px}
  .dc-top svg{width:18px;height:18px}
}
@media (max-width:374px){
  .hdr .wrap{gap:6px}.hdr .hdr-actions{gap:6px}
  .hdr .brand .w{width:78px;height:15px}.hdr .brand .m{width:32px;height:27px}.hdr .brand{gap:6px}
  .dc-top{padding:0 11px;font-size:.8rem}.dc-top svg{display:none}
}
/* Mobiles Menü: Anrufen + Design-Schalter */
.mobile-nav .mnav-tel{justify-content:flex-start;gap:12px;color:var(--ink)}
.mobile-nav .mnav-tel svg{width:22px;height:22px;color:var(--red-ink);flex:none}
.mnav-theme{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-family:var(--f-display);font-weight:700;font-size:1.05rem;cursor:pointer;color:var(--ink)}
.mnav-theme:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.mnav-theme .sw{width:46px;height:26px;border-radius:999px;background:var(--line);position:relative;flex:none;transition:background .15s}
.mnav-theme .sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
.mnav-theme[aria-pressed="true"] .sw{background:var(--red)}
.mnav-theme[aria-pressed="true"] .sw::after{transform:translateX(20px)}
@media (min-width:561px){.mnav-theme{display:none}}

/* ---------- Footer ---------- */
.foot-h{font-family:var(--f-body);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;font-weight:700}
.foot .foot-contact{margin-top:18px}
.foot .foot-contact a{display:inline-flex;align-items:center;gap:10px;padding-block:8px}
.foot .foot-contact svg{width:20px;height:20px;color:var(--red-ink);flex:none}

/* ---------- Kontaktblock: Telefon ---------- */
.mailrow .telrow{display:inline-flex;align-items:center;gap:10px}
.mailrow .telrow svg{width:24px;height:24px;flex:none}
.contact .direct a:focus-visible,.contact .copy:focus-visible,.contact .eyebrow a:focus-visible{outline:3px solid #FFFFFF;outline-offset:3px}
.contact>.wrap>div:first-child :focus-visible{outline-color:#FFFFFF}

/* ---------- Cookie-Banner ---------- */
.cc{position:fixed;z-index:70;left:max(16px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));right:max(16px,env(safe-area-inset-right,0px));display:flex;justify-content:flex-start;pointer-events:none}
.cc[hidden]{display:none}
.cc-box{pointer-events:auto;max-width:560px;width:100%;max-height:calc(100dvh - 32px);overflow:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:20px;box-shadow:0 2px 6px rgba(0,0,0,.12),0 24px 60px -18px rgba(0,0,0,.45);padding:22px;display:grid;gap:12px}
.cc-t{font-family:var(--f-display);font-weight:800;font-size:1.15rem;line-height:1.2}
.cc-t:focus{outline:none}
.cc-box p{font-size:.92rem;line-height:1.55;color:var(--ink)}
.cc-links{display:flex;flex-wrap:wrap;gap:4px 18px}
.cc-links a{color:var(--ink);font-weight:700;text-underline-offset:3px;padding-block:6px;display:inline-block}
.cc-opts{display:grid;gap:8px}
.cc-opts[hidden]{display:none}
.cc-opt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:12px;border:1px solid var(--line);border-radius:12px}
.cc-opt input{width:22px;height:22px;margin-top:2px;accent-color:var(--red)}
.cc-opt label{display:grid;gap:2px;cursor:pointer}
.cc-opt label span{font-size:.86rem;color:var(--muted)}
.cc-opt input:disabled+label{cursor:default}
.cc-btns{display:flex;flex-wrap:wrap;gap:8px}
.cc-btns .btn{flex:1 1 auto;justify-content:center}
.cc-btns .btn[hidden]{display:none}
@media (max-width:520px){
  .cc{left:0;right:0;bottom:0}
  .cc-box{border-radius:20px 20px 0 0;padding:16px 16px max(16px,env(safe-area-inset-bottom,0px));gap:10px}
  .cc-t{font-size:1.05rem}
  .cc-box p{font-size:.84rem;line-height:1.5}
  .cc-links a{padding-block:4px}
  .cc-opt{padding:10px;gap:10px}.cc-opt label span{font-size:.8rem}
  .cc-btns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .cc-btns .btn{min-height:44px;padding:0 10px;font-size:.9rem;white-space:nowrap}
  .cc-btns [data-cc="more"],.cc-btns [data-cc="save"]{grid-column:1 / -1}
}

/* ---------- Bewegung anhalten ---------- */
.flow-pause{all:unset;box-sizing:border-box;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;cursor:pointer;color:var(--ink);flex:none;margin-left:auto}
.flow-pause:hover{border-color:var(--ink)}
.flow-pause:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.flow-pause svg{width:16px;height:16px}
.flow-pause .i-play,.motion-off .flow-pause .i-pause{display:none}
.motion-off .flow-pause .i-play{display:block}
.flow-hd{flex-wrap:wrap}
.motion-off .ticker .row,.motion-off .live i{animation:none}
.ticker s{opacity:.9}

/* Kopfzeile Desktop: alles in einer Zeile */
.nav>a,.dd-btn{white-space:nowrap}
@media (min-width:1241px){.hdr>.wrap{max-width:1480px}}


/* Digital-Check: automatisch erkannte Antworten */
.dc-autonote{font-weight:700;color:var(--ink);margin-top:-4px}
.dc-auto{border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;gap:8px;text-align:left;background:var(--surface);margin-block:6px 4px}
.dc-auto>b{font-size:.9rem}
.dc-auto ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dc-auto li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;font-size:.9rem;line-height:1.45}
.dc-auto .ok{width:22px;height:22px;border-radius:50%;background:var(--red);color:var(--on-red);display:grid;place-items:center;font-size:.75rem;font-weight:800}
.dc-result .dc-auto,#dcResult .dc-auto{margin-top:22px}

/* Barrierefreiheit: Feldränder mit 3:1 Kontrast, Platzhalter, Zielgrößen */
:root{--field-line:#7D828E}
:root[data-theme="dark"]{--field-line:#80848F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--field-line:#80848F}}
.neg{--field-line:#80848F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .neg{--field-line:#7D828E}}
:root[data-theme="dark"] .neg{--field-line:#7D828E}
.fld input,.fld textarea{border-color:var(--field-line)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--muted);opacity:1}
.cc-opt input{width:24px;height:24px}
.flow li.human .st{color:inherit}
.tm .ph-ico{width:56px;height:56px;color:var(--muted)}
/* Fokus und Sprungziele nicht unter der festen Kopfzeile (WCAG 2.4.11) */
html{scroll-padding-top:84px}
@media (max-width:1240px){html{scroll-padding-top:140px}}
@media (max-width:560px){
  .ex-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .ex-how .op{display:none}
  .ex-how>span:not(.op){padding:8px 9px}
  .ex-how small{font-size:.72rem;line-height:1.25}
}

/* Claim: Wachstum / durch smarte / Lösungen. */
.hero h1 .ln-s{font-size:.5em;line-height:1.1;letter-spacing:-.01em;margin-block:.14em .1em}
.price b .ab{font-size:.38em;letter-spacing:0;font-weight:700;vertical-align:.35em;margin-right:.1em}
.offer .token{margin-top:-10px;font-size:.9rem;font-weight:700;color:var(--red-ink)}

/* ================= Sprache, Suche, Barrierefreiheit ================= */
.prose h3{font-size:var(--step-1);font-weight:800;margin-top:10px}
.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}
.hdr-actions .icon-btn svg{width:20px;height:20px}
.hb-lang{text-decoration:none;font-weight:800;font-size:.85rem;letter-spacing:.04em}
.hb-lang:hover,.hb-search:hover,.hb-a11y:hover{border-color:var(--ink)}

@media (max-width:560px){.hdr .hb-a11y,.hdr .hb-lang,.hdr .hb-search{display:none}}
/* Werkzeuge im Handy-Menü */
.mnav-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:6px 0 12px;border-bottom:1px solid var(--line)}
.mobile-nav .mnav-tool,.mnav-tool{all:unset;box-sizing:border-box;cursor:pointer;display:grid;justify-items:center;align-content:center;gap:6px;min-height:72px;padding:10px 6px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font-family:var(--f-body);font-weight:700;font-size:.85rem;text-align:center;text-decoration:none}
.mobile-nav .mnav-tool::after{content:none}
.mnav-tool svg{width:24px;height:24px;color:var(--red-ink)}
.mnav-tool:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* Dialoge: Barrierefreiheit und Suche */
.ap,.sd{position:fixed;inset:0;z-index:95;background:rgba(8,9,12,.55);display:flex;padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.ap[hidden],.sd[hidden]{display:none}
.dlg-open body{overflow:hidden}
.ap{justify-content:flex-end;align-items:flex-start}
.ap-box,.sd-box{background:var(--surface);color:var(--ink);border-radius:20px;box-shadow:0 24px 64px -16px rgba(0,0,0,.5);width:100%;max-height:100%;overflow:auto;padding:20px;display:grid;gap:14px;align-content:start}
.ap-box{max-width:420px}
.ap-hd,.sd-hd{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ap-hd h2{font-size:1.25rem;font-weight:800}
.ap-x,.sd-x{flex:none}
.ap-x svg,.sd-x svg{width:20px;height:20px}
.ap-grp{border:0;margin:0;padding:0;display:grid;gap:8px}
.ap-grp legend{font-weight:800;font-size:.95rem;margin-bottom:8px;padding:0}
.ap-segs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ap-seg{position:relative;display:block;cursor:pointer}
.ap-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ap-seg span{display:grid;place-items:center;min-height:44px;padding:6px 8px;border:1.5px solid var(--field-line);border-radius:12px;font-weight:700;font-size:.9rem;text-align:center}
.ap-seg input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.ap-seg input:focus-visible+span{outline:3px solid var(--red);outline-offset:2px}
.ap-sw{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;position:relative}
.ap-sw label{display:grid;gap:2px;cursor:pointer;grid-column:1;grid-row:1}
.ap-sw label span{font-size:.85rem;color:var(--muted)}
.ap-sw input{grid-column:2;grid-row:1;appearance:none;-webkit-appearance:none;width:52px;height:30px;border-radius:999px;background:var(--field-line);position:relative;cursor:pointer;margin:0;transition:background .15s}
.ap-sw input::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .15s}
.ap-sw input:checked{background:var(--red)}
.ap-sw input:checked::after{transform:translateX(22px)}
.ap-sw input:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.ap-note{font-size:.88rem;color:var(--muted)}
.ap-note a{color:var(--ink);font-weight:700}
.ap-box>.btn{justify-self:start}
.sd{justify-content:center;align-items:flex-start;padding-top:max(8vh,16px)}
.sd-box{max-width:680px}
.sd-form{flex:1;min-width:0;display:grid;gap:6px}
.sd-l{font-weight:800;font-size:.95rem}
.sd-row{display:flex;align-items:center;gap:10px;border:2px solid var(--ink);border-radius:14px;padding:0 12px;background:var(--surface)}
.sd-row svg{width:20px;height:20px;flex:none;color:var(--muted)}
.sd-row input{flex:1;min-width:0;border:0;background:transparent;font-size:1.05rem;padding:12px 0;outline:none;color:var(--ink)}
.sd-row:focus-within{border-color:var(--red);box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 20%,transparent)}
.sd-row input::placeholder{color:var(--muted);opacity:1}
.sd-hd{align-items:flex-end}
.sd-status{font-size:.88rem;color:var(--muted);min-height:1.4em}
.sd-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sd-list a{display:grid;gap:3px;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink)}
.sd-list a:hover,.sd-list a:focus-visible{border-color:var(--red);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 30%,transparent)}
.sd-p{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--red-ink)}
.sd-list b{font-size:1rem}
.sd-x{font-size:.88rem;color:var(--muted)}
.sd-list mark{background:color-mix(in srgb,var(--red) 22%,transparent);color:inherit;border-radius:3px;padding:0 1px}
@media (max-width:560px){.ap,.sd{padding:0}.ap-box,.sd-box{border-radius:0;max-width:none;min-height:100%}}

/* Einstellungen aus dem Barrierefreiheits-Menü */
.a11y-fs1 main,.a11y-fs1 .foot,.a11y-fs1 .ap-box,.a11y-fs1 .sd-box,.a11y-fs1 .cc-box{zoom:1.15}
.a11y-fs2 main,.a11y-fs2 .foot,.a11y-fs2 .ap-box,.a11y-fs2 .sd-box,.a11y-fs2 .cc-box{zoom:1.3}
.a11y-links a:not(.btn):not(.icon-btn):not(.mnav-tool):not(.dc-top):not(.svc-card):not(.brand){text-decoration:underline!important;text-decoration-thickness:2px!important;text-underline-offset:3px}
.a11y-spacing body{line-height:1.8}
.a11y-spacing :is(p,li,dd,td,th,label,small,.lead,.note,summary){line-height:1.8!important;letter-spacing:.05em!important;word-spacing:.16em!important}
.a11y-spacing :is(p,.lead,.note)+:is(p,ul,ol){margin-top:1em}
:root.a11y-contrast{--muted:#2E323B;--line:#5E6370;--red-ink:#A30F16;--field-line:#4B505C;--inv-muted:#E8E9EC;--inv-line:#8B909B;--inv-red-ink:#FF8A8E}
:root.a11y-contrast[data-theme="dark"]{--muted:#E8E9EC;--line:#8B909B;--red-ink:#FF8A8E;--field-line:#A2A6B0;--inv-muted:#2E323B;--inv-line:#5E6370;--inv-red-ink:#A30F16}
@media (prefers-color-scheme:dark){:root.a11y-contrast:not([data-theme="light"]){--muted:#E8E9EC;--line:#8B909B;--red-ink:#FF8A8E;--field-line:#A2A6B0;--inv-muted:#2E323B;--inv-line:#5E6370;--inv-red-ink:#A30F16}}
.a11y-contrast .btn.ghost,.a11y-contrast .icon-btn,.a11y-contrast .chip,.a11y-contrast .tab{border-width:2px;border-color:currentColor}
.a11y-contrast :focus-visible{outline-width:4px!important}
.foot-grid>*{min-width:0}
.foot ul a,.foot ul .linkbtn{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;max-width:100%}
.foot ul a,.foot ul .linkbtn{overflow-wrap:anywhere}
.foot ul .linkbtn{display:block;text-align:left;box-sizing:border-box}
/* Große Schrift auf sehr schmalen Bildschirmen: nichts darf seitlich überstehen */
.sl-top{flex-wrap:wrap;min-width:0}
.sl-top label{min-width:0}
.sl input[type=range]{min-width:0;max-width:100%;box-sizing:border-box}
@media (max-width:420px){
  .a11y-fs1 .foot .brand .w,.a11y-fs2 .foot .brand .w{width:120px;height:22px}
  .a11y-fs1 .foot .brand .m,.a11y-fs2 .foot .brand .m{width:46px;height:38px}
}
.tm{min-width:0}
.tm .tags span{max-width:100%;overflow-wrap:anywhere}
@media (max-width:420px){.a11y-fs1 .team-grid,.a11y-fs2 .team-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){
  .a11y-fs1 .tm,.a11y-fs2 .tm{grid-template-columns:minmax(0,1fr)}
  .a11y-fs1 .tm .ph,.a11y-fs2 .tm .ph{grid-row:auto;max-width:140px}
  .a11y-fs2 .tm p,.a11y-fs2 .tm .role{overflow-wrap:anywhere;hyphens:auto}
}
/* Digital-Check: Angaben im Einwilligungs-Dialog (laut Datenschutzerklärung) */
#dcConsent{overflow-y:auto;overscroll-behavior:contain;place-items:start center}
#dcConsent .ovl-box{max-width:600px;margin-block:auto}
.dc-who{display:grid;gap:12px}
.dc-optin-note{font-size:.88rem;color:var(--muted)}
/* Gekürzte Fassung (Nov. 2026): vier Leistungen, drei Teammitglieder, Projektschritte */
.svc-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.svc-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.svc-grid.four{grid-template-columns:minmax(0,1fr)}}
.team-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.team-grid.three{grid-template-columns:minmax(0,1fr)}}
.pillar p{margin:0}
.stage .bigmark{aspect-ratio:291/238;animation:markIn .9s .1s cubic-bezier(.2,.9,.3,1) both}
@keyframes markIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.stage .bigmark{animation:none}}
.motion-off .stage .bigmark{animation:none}
.proj{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:start}
.proj-hd{display:grid;gap:12px}
.proj-hd .h3{font-family:var(--f-display);font-size:var(--step-2,1.6rem);line-height:1.2;font-weight:700}
.proj-hd p{color:var(--muted)}
.proj-list summary .pn{display:inline-block;min-width:2.2em;font-family:var(--f-display);font-weight:800;color:var(--red-ink)}
.proj-list dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:12px 0 0}
.proj-list dt{font-weight:700}
.proj-list dd{margin:0;color:var(--muted)}
@media (max-width:900px){.proj{grid-template-columns:minmax(0,1fr)}}
.tm p,.tm .role,.tm-name{overflow-wrap:anywhere;hyphens:auto;min-width:0}
.offer .btn{max-width:100%;white-space:normal;text-align:center}
.tablist .tab{min-width:0;overflow-wrap:anywhere;hyphens:auto}
.offer .kick{flex-wrap:wrap;gap:8px}
.offer .kick .name{min-width:0;overflow-wrap:anywhere;hyphens:auto}
@media (max-width:1299px){.hdr .cta-top{display:none}}
/* Paketinhalte statt Preisangabe */
.offer .inc-h{margin:0 0 -10px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.offer.neg .inc-h{color:inherit;opacity:.75}
.offer ul.inc{gap:10px}
.offer ul.inc li span.t{color:inherit;font-size:.97rem;line-height:1.45}
.offer.neg ul.inc li svg{color:var(--red)}
/* Team mit Fotos */
.team-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px}
@media (max-width:640px){.team-grid.two{grid-template-columns:minmax(0,1fr)}}
.tm .ph.photo{background:#f5f5f5}
.tm .ph.photo::before{display:none}
.tm .ph.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:grayscale(1)}