:root{
--white:#FFFFFF;
--surface:#F4F6F7;
--surface-2:#E9EDEF;
--ink:#1A1D23;
--ink-2:#39404B;
--muted:#616C7A;
--line:#DFE4E8;
--red:#9E1723;
--red-dark:#7C111B;
--red-soft:#FAEEEF;
--slate:#2B313A;
--slate-line:#444C58;
--slate-muted:#A7B0BC;
--ok:#1C7A4E;
--f-display:'Quicksand',ui-rounded,'Segoe UI',system-ui,sans-serif;
--f-body:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,sans-serif;
--f-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
--gl:max(20px,env(safe-area-inset-left,0px));
--gr:max(20px,env(safe-area-inset-right,0px));
--head-h:66px;
color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--white);color:var(--ink);
font-family:var(--f-body);font-size:16px;line-height:1.62;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* Unterstrichen wird nur dort, wo ein Link im Fliesstext steht */
.prose a,.note a,.bt-api a,.ans a,.lede a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;line-height:1.13;letter-spacing:-.018em;text-wrap:balance}
h1{font-size:clamp(2rem,4.8vw,3.4rem);font-weight:700}
h2{font-size:clamp(1.55rem,3.2vw,2.3rem);font-weight:700}
h3{font-size:clamp(1.1rem,1.7vw,1.3rem);font-weight:600}
h4{font-size:1.02rem;font-weight:600}
p{margin:0}
code{font-family:var(--f-mono);font-size:.9em}
:focus-visible{outline:2.5px solid var(--red);outline-offset:3px;border-radius:2px}
.rise{opacity:1;transform:none}
.js .rise{opacity:0;transform:translateY(18px)}
.js .rise.in{opacity:1;transform:none;transition:opacity .62s cubic-bezier(.22,.8,.3,1),transform .62s cubic-bezier(.22,.8,.3,1)}
.js .rise.d1.in{transition-delay:.07s}
.js .rise.d2.in{transition-delay:.14s}
.js .rise.d3.in{transition-delay:.21s}
.js .rise.d4.in{transition-delay:.28s}
.js .rise.d5.in{transition-delay:.35s}
.flow .pay{will-change:opacity,transform}
@keyframes heroUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.js .heroup{animation:heroUp .7s cubic-bezier(.22,.8,.3,1) both}
.js .heroup.h1{animation-delay:.05s}
.js .heroup.h2{animation-delay:.14s}
.js .heroup.h3{animation-delay:.23s}
.js .heroup.h4{animation-delay:.32s}
.js .heroup.h5{animation-delay:.41s}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*{animation:none!important;transition:none!important}
.js .rise{opacity:1!important;transform:none!important}
}
.band{width:100%;position:relative}
.band--grey{background:var(--surface)}
.band--slate{background:var(--slate);color:#E9EDEF}
.band--slate h2,.band--slate h3,.band--slate h4{color:#fff}
.band--red{background:var(--red);color:#fff}
.band--red h2,.band--red h3,.band--red h4{color:#fff}
.wrap{max-width:1240px;margin-inline:auto;padding-left:var(--gl);padding-right:var(--gr);padding-block:clamp(52px,7vw,92px)}
.wrap--sm{padding-block:clamp(32px,4vw,52px)}
.wrap--xs{padding-block:clamp(20px,2.4vw,30px)}
.eyebrow{display:block;font-family:var(--f-mono);font-size:.71rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--red);margin-bottom:13px}
.band--slate .eyebrow,.band--red .eyebrow{color:#F2A3AC}
.band--red .eyebrow{color:#FFD9DD}
.lede{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--muted);max-width:64ch;margin-top:15px}
.band--slate .lede{color:var(--slate-muted)}
.band--red .lede{color:#FADDE0}
.sec-head{max-width:72ch;margin-bottom:clamp(26px,3.6vw,42px)}
.sec-head--row{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:22px;flex-wrap:wrap}
.sec-head--row>div{max-width:62ch}
.scrollbar{position:fixed;top:0;left:0;height:3px;background:var(--red);width:0;z-index:90;transition:width .1s linear}
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:70;background:rgba(255,255,255,.93);backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid var(--line)}
.navbar{max-width:1240px;margin-inline:auto;padding-left:var(--gl);padding-right:var(--gr);min-height:var(--head-h);display:flex;align-items:center;gap:16px}
.brand{text-decoration:none;display:flex;align-items:center;gap:10px;border:0;background:none;padding:0;cursor:pointer;font:inherit;color:inherit;flex:none}
.brand img{height:36px;width:auto}
.brand .claim{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);border-left:1px solid var(--line);padding-left:10px}
nav.main{display:flex;gap:2px;margin-left:auto;align-items:center}
.navitem{position:relative}
.navitem>button,.navitem>a{font:500 .88rem/1 var(--f-body);color:var(--ink-2);background:none;border:0;padding:10px 11px;border-radius:5px;cursor:pointer;display:flex;align-items:center;gap:5px;position:relative}
.navitem>button::after,.navitem>a::after{content:"";position:absolute;left:11px;right:11px;bottom:4px;height:1.5px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.navitem>button:hover::after,.navitem>a:hover::after,.navitem.open>button::after,.navitem>button[aria-current="page"]::after,.navitem>a[aria-current="page"]::after{transform:scaleX(1)}
.navitem>button:hover,.navitem>a:hover,.navitem.open>button{color:var(--ink)}
.caret{font-size:.6rem;opacity:.55;transition:transform .2s}
.navitem.open .caret{transform:rotate(180deg)}
.dropdown{position:absolute;top:calc(100% + 6px);left:-8px;min-width:290px;background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:0 14px 40px rgba(26,29,35,.14);padding:7px;display:none;flex-direction:column;gap:1px}
.navitem.open .dropdown{display:flex;animation:heroUp .22s ease both}
.dropdown a{text-align:left;background:none;border:0;padding:10px 12px;border-radius:3px;cursor:pointer;font:inherit;color:var(--ink);display:grid;gap:2px}
.dropdown a{box-shadow:inset 0 0 0 0 var(--red);transition:background .16s ease,box-shadow .16s ease}
.dropdown a:hover,.dropdown a:focus-visible{background:var(--surface);box-shadow:inset 2px 0 0 0 var(--red)}
.dropdown a:hover b{color:var(--red)}
.dropdown a[aria-current="page"]{background:var(--red-soft);box-shadow:inset 2px 0 0 0 var(--red)}
.dropdown a[aria-current="page"] b{color:var(--red)}
.dropdown a span{font:500 .78rem/1.35 var(--f-body);color:var(--muted)}
.dropdown a b{font-weight:600;font-size:.9rem}
.dd-head{font:500 .66rem/1 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);padding:10px 12px 5px}
.lang{display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden;flex:none}
.lang a{font:500 .76rem/1 var(--f-mono);letter-spacing:.05em;background:#fff;border:0;padding:8px 9px;cursor:pointer;color:var(--muted)}
.lang a[aria-current="true"]{background:var(--red);color:#fff}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:4px;padding:9px 11px;cursor:pointer;font:500 .8rem/1 var(--f-body)}
@media (max-width:1080px){
.brand .claim{display:none}
nav.main{display:none}
.burger{display:block;margin-left:auto}
.navbar{flex-wrap:wrap}
nav.main.open{display:flex;flex-direction:column;align-items:stretch;width:100%;order:4;gap:0;padding-bottom:14px;margin-left:0}
nav.main.open .navitem>button,nav.main.open .navitem>a{width:100%;justify-content:space-between;padding:13px 4px;border-bottom:1px solid var(--line)}
nav.main.open .navitem>button::after,nav.main.open .navitem>a::after{display:none}
.dropdown{position:static;border:0;box-shadow:none;min-width:0;padding:4px 0 10px 12px;border-left:2px solid var(--red)}
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:600 .92rem/1 var(--f-body);text-decoration:none;cursor:pointer;padding:14px 23px;border-radius:3px;border:1.5px solid transparent;transition:transform .14s ease,box-shadow .2s ease,background .18s ease,color .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--red);color:#fff;box-shadow:0 3px 14px rgba(158,23,35,.26)}
.btn--primary:hover{background:var(--red-dark);box-shadow:0 7px 22px rgba(158,23,35,.3)}
.btn--ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn--ghost:hover{border-color:var(--ink)}
.band--slate .btn--ghost,.band--red .btn--ghost{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
.band--slate .btn--ghost:hover,.band--red .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.band--red .btn--primary{background:#fff;color:var(--red);box-shadow:0 3px 14px rgba(0,0,0,.18)}
.band--red .btn--primary:hover{background:#fff;color:var(--red-dark)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn--sm{padding:11px 16px;font-size:.85rem}
.hero{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(26px,4vw,54px);align-items:stretch}
.hero--wide{grid-template-columns:1fr}
@media (max-width:920px){.hero{grid-template-columns:1fr}
.hero-media{min-height:0}
.hero-media img{height:auto;min-height:0;aspect-ratio:3/2}}
.hero h1 .hl{color:var(--red)}
.hero-media{position:relative;overflow:hidden;background:var(--surface);border-radius:3px;min-height:100%}
.hero-media img{width:100%;height:100%;min-height:380px;object-fit:cover;transform:scale(1.02);transition:transform 9s ease-out}
.js .hero-media.in img{transform:scale(1)}
.hero-media--tall img{aspect-ratio:4/3}
.hero-tag{position:absolute;left:0;bottom:0;background:var(--slate);color:#fff;font:400 .8rem/1.5 var(--f-body);letter-spacing:.005em;padding:11px 16px;max-width:88%}
.hero-tag b{color:#fff;font-weight:600}
.trust{display:flex;gap:10px 26px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid var(--line);font:500 .8rem/1.3 var(--f-body);color:var(--muted)}
.trust span{white-space:nowrap}

.trust span{display:flex;align-items:center;gap:6px}
.trust span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
@media (max-width:760px){.metrics{grid-template-columns:repeat(2,1fr)}}
.metric{background:var(--white);padding:24px 20px}
.band--grey .metric{background:var(--surface)}
.metric b{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(1.6rem,2.8vw,2.15rem);color:var(--red);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.metric small{display:block;color:var(--muted);font-size:.81rem;margin-top:6px;line-height:1.45}
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee-track{display:flex;gap:46px;width:max-content;animation:slide 44s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee img{height:40px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter .3s,opacity .3s;flex:none;mix-blend-mode:multiply}
.marquee img:hover{filter:grayscale(0);opacity:1}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}
.grid{display:grid;gap:18px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}
.card{text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:3px;padding:24px 22px;display:flex;flex-direction:column;gap:10px;min-width:0;transition:border-color .2s,box-shadow .25s,transform .25s}
.card--link{cursor:pointer;text-align:left;font:inherit;color:inherit}
.card--link:hover{border-color:var(--red);box-shadow:0 10px 30px rgba(26,29,35,.08);transform:translateY(-3px)}
.card .num{font:500 .7rem/1 var(--f-mono);color:var(--red);letter-spacing:.1em}
.card p{color:var(--muted);font-size:.93rem}
.card ul{margin:2px 0 0;padding-left:1.05em;color:var(--muted);font-size:.9rem;display:grid;gap:6px}
.card .more{margin-top:auto;padding-top:12px;font:600 .85rem/1 var(--f-body);color:var(--red);display:inline-flex;gap:6px;align-items:center}
.card--link:hover .more .arr{transform:translateX(4px)}
.arr{display:inline-block;transition:transform .2s}
.card-ico{width:38px;height:38px;border-radius:3px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;font:600 .95rem/1 var(--f-mono);flex:none}
.band--slate .card{background:#333944;border-color:var(--slate-line)}
.band--slate .card p,.band--slate .card ul{color:var(--slate-muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.split--flip .split-media{order:-1}
@media (max-width:860px){.split--flip .split-media{order:0}}
.split-media{overflow:hidden;border-radius:3px;background:var(--surface)}
.split-media img{width:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,.8,.3,1)}
.split-media:hover img{transform:scale(1.035)}
.split-media--contain{background:var(--surface);display:grid;place-items:center;padding:22px}
.split-media--contain img{object-fit:contain;max-height:420px}
.hero-media.split-media--contain img{height:auto;min-height:0}
.ticks{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.ticks li{display:grid;grid-template-columns:20px 1fr;gap:11px;font-size:.95rem;color:var(--ink-2)}
.ticks li::before{content:"";width:16px;height:16px;margin-top:4px;border-radius:50%;background:var(--red-soft);border:1.5px solid var(--red);box-shadow:inset 0 0 0 2.5px #fff}
.band--slate .ticks li{color:var(--slate-muted)}
.band--slate .ticks li::before{background:transparent;border-color:#F2A3AC;box-shadow:inset 0 0 0 2.5px var(--slate)}
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:1000px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.flow{grid-template-columns:1fr}}
.pay{background:#fff;padding:0 0 20px;display:flex;flex-direction:column;gap:10px;min-width:0;transition:background .25s,transform .25s}
.pay:hover{background:var(--red-soft);transform:translateY(-3px)}
.pay>*:not(.pay-bild){margin-left:18px;margin-right:18px}
.pay-bild{display:block;background:var(--surface);border-bottom:1px solid var(--line);overflow:hidden;margin-bottom:4px}
.pay-bild img{width:100%;aspect-ratio:420/264;object-fit:contain;padding:14px;transition:transform .5s cubic-bezier(.22,.8,.3,1)}
.pay:hover .pay-bild img{transform:scale(1.06)}
.pay h4{margin-top:14px}
.pay h4{font-family:var(--f-display);font-size:1rem;font-weight:600;margin:0}
.pay p{font-size:.85rem;color:var(--muted)}
.chip{font:500 .67rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;padding:5px 8px;border-radius:2px;align-self:flex-start}
.chip--roam{background:#E3F2E9;color:#19683F}
.chip--noroam{background:var(--red-soft);color:var(--red)}
.pay .price{margin-top:auto;display:block;padding-top:10px;border-top:1px solid var(--line)}
.pay .price b{display:block;font:600 .8rem/1.3 var(--f-body);color:var(--red);letter-spacing:.01em}
.pay .price em{display:block;margin-top:5px;font:400 .78rem/1.45 var(--f-body);font-style:normal;color:var(--muted)}
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:3px;background:#fff}
table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:540px}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font:500 .71rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--surface);white-space:nowrap}
td.num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
td.yes{color:var(--ok);font-weight:600}
td.no{color:var(--muted)}
tr.sum td{font-weight:600;background:var(--surface);border-bottom:0}
tr.sum td.num{color:var(--red)}
tbody tr:last-child td{border-bottom:0}
tbody tr.hl td{background:var(--red-soft)}
caption{caption-side:top;text-align:left;padding:14px;font:500 .77rem/1.45 var(--f-mono);color:var(--muted);background:var(--surface);border-bottom:1px solid var(--line)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,36px);align-items:end}
@media (max-width:720px){.compare{grid-template-columns:1fr}}
.bar-block h4{font-size:.95rem;font-weight:600;margin-bottom:12px;font-family:var(--f-body)}
.bar-track{height:clamp(140px,17vw,200px);display:flex;align-items:flex-end;background:var(--surface);border-radius:2px;padding:8px}
.band--grey .bar-track{background:var(--surface-2)}
.bar{border-radius:2px 2px 0 0;flex:1;transition:height 1.3s cubic-bezier(.22,.8,.3,1)}
.js .bar{height:0}
.bar--bad{background:var(--slate)}
.bar--good{background:var(--red)}
.bar-label{font:500 .77rem/1.45 var(--f-mono);color:var(--muted);margin-top:11px;font-variant-numeric:tabular-nums}
.bar-label b{display:block;font-family:var(--f-display);font-size:1.35rem;color:var(--ink);font-weight:700}
.saving{display:inline-flex;align-items:baseline;gap:9px;margin-top:20px;background:var(--red-soft);color:var(--red);padding:10px 15px;border-radius:3px;font:600 .88rem/1 var(--f-body)}
.saving b{font-family:var(--f-display);font-size:1.4rem}
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.step{background:#fff;padding:22px;display:grid;grid-template-columns:50px 1fr;gap:18px;align-items:start}
@media (max-width:620px){.step{grid-template-columns:1fr;gap:9px}}
.step .n{font-family:var(--f-display);font-weight:700;font-size:1.5rem;color:var(--red);font-variant-numeric:tabular-nums;line-height:1}
.step h4{margin:0 0 6px}
.step p{font-size:.92rem;color:var(--muted)}
.step .meta{font:500 .74rem/1 var(--f-mono);color:var(--muted);margin-top:10px}
.refs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:900px){.refs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:580px){.refs{grid-template-columns:1fr}}
.ref{border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s}
.ref:hover{box-shadow:0 12px 32px rgba(26,29,35,.1);transform:translateY(-3px)}
.ref-img{overflow:hidden}
.ref-img img{aspect-ratio:16/10;object-fit:cover;width:100%;transition:transform .7s cubic-bezier(.22,.8,.3,1)}
.ref:hover .ref-img img{transform:scale(1.05)}
.ref-body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.ref-body p{font-size:.88rem;color:var(--muted)}
.ref-body .kpi{margin-top:auto;padding-top:8px;font:500 .78rem/1.4 var(--f-mono);color:var(--red)}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:19px 40px 19px 0;position:relative;font-family:var(--f-display);font-weight:600;font-size:1.03rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font:400 1.5rem/1 var(--f-mono);color:var(--red);transition:transform .25s}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--red)}
.faq .ans{padding:0 44px 20px 0;color:var(--muted);font-size:.95rem;animation:heroUp .3s ease both}
.faq .ans p+p{margin-top:12px}
.feed-status{display:inline-flex;align-items:center;gap:8px;font:500 .73rem/1 var(--f-mono);letter-spacing:.04em;padding:7px 11px;border-radius:2px;background:var(--surface);color:var(--muted);border:1px solid var(--line)}
.feed-status .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.feed-status[data-state="live"]{color:var(--ok);border-color:#BFE0CD;background:#F1F9F4}
.feed-status[data-state="live"] .dot{background:var(--ok);animation:pulse 2.4s ease-in-out infinite}
.feed-status[data-state="loading"] .dot{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.28}}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:920px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.posts{grid-template-columns:1fr}}
.post{text-decoration:none;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#fff;display:flex;flex-direction:column;text-align:left;cursor:pointer;padding:0;font:inherit;color:inherit;transition:border-color .2s,transform .25s,box-shadow .25s}
.post:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:0 12px 30px rgba(26,29,35,.09)}
.post-img{aspect-ratio:16/9;background:var(--surface-2);overflow:hidden}
.post-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,.8,.3,1)}
.post:hover .post-img img{transform:scale(1.05)}
.post-body{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1;min-width:0}
.post-meta{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font:500 .72rem/1 var(--f-mono);color:var(--muted)}
.tag{font:500 .67rem/1 var(--f-mono);letter-spacing:.05em;background:var(--red-soft);color:var(--red);padding:5px 7px;border-radius:2px}
.post .post-title{font-family:var(--f-display);font-size:1.04rem;font-weight:600;line-height:1.22;letter-spacing:-.012em}
.post .post-ex{font-size:.88rem;color:var(--muted)}
.post .read{margin-top:auto;padding-top:10px;font:600 .82rem/1 var(--f-body);color:var(--red)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.filters button{font:500 .8rem/1 var(--f-body);padding:9px 13px;border-radius:2px;cursor:pointer;background:#fff;border:1px solid var(--line);color:var(--muted);transition:all .18s}
.filters button:hover{color:var(--ink);border-color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.article{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:920px){.article{grid-template-columns:1fr}}
.article-main{min-width:0}
.article-hero{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:3px;margin:24px 0 28px;background:var(--surface-2)}
.prose{font-size:1.02rem;line-height:1.74;min-width:0}
.prose h1,.prose h2{font-size:clamp(1.3rem,2.3vw,1.6rem);margin:32px 0 12px;font-weight:600}
.prose h3,.prose h4{font-size:1.1rem;margin:26px 0 10px;font-weight:600}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:1.2em;display:grid;gap:8px}
.prose a{color:var(--red);text-underline-offset:3px}
.prose img{border-radius:3px;margin:18px 0}
.aside{border:1px solid var(--line);border-radius:3px;padding:20px;display:flex;flex-direction:column;gap:14px;background:var(--surface);position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--head-h) + 18px)}
@media (max-width:920px){.aside{position:static}}
.aside p{font-size:.85rem;color:var(--muted)}
.backlink{background:none;border:0;padding:0;cursor:pointer;font:600 .85rem/1 var(--f-body);color:var(--red);margin-bottom:22px;display:inline-flex;gap:7px;align-items:center}
.note{border-left:3px solid var(--red);background:var(--red-soft);padding:16px 19px;border-radius:0 3px 3px 0;font-size:.94rem}
.band--slate .note{background:#333944;border-color:#F2A3AC;color:var(--slate-muted)}
.note b{font-weight:600;color:var(--ink)}
.band--slate .note b{color:#fff}
.kbd{font:500 .76rem/1 var(--f-mono);background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:4px 7px;color:var(--ink-2)}
.codeblock{background:var(--slate);color:#D6DCE4;font:400 .82rem/1.65 var(--f-mono);padding:18px;border-radius:3px;overflow-x:auto;white-space:pre}
.codeblock .c{color:#8E9AAA}
.codeblock .k{color:#F2A3AC}
.pillrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.pill{font:500 .76rem/1 var(--f-mono);border:1px solid var(--line);border-radius:99px;padding:8px 13px;color:var(--ink-2);background:#fff}
.band--slate .pill{border-color:var(--slate-line);color:var(--slate-muted);background:transparent}
.band--red .pill{border-color:rgba(255,255,255,.35);color:#fff;background:transparent}
.crumb{font:500 .76rem/1 var(--f-mono);color:var(--muted);margin-bottom:16px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumb button{background:none;border:0;padding:0;font:inherit;color:var(--red);cursor:pointer}
.contact{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
.form-mock{border:1px solid var(--line);border-radius:3px;padding:24px;background:#fff;display:grid;gap:14px}
.form-mock label{font:500 .73rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.form-mock input,.form-mock textarea,.form-mock select{width:100%;font:400 .95rem/1.4 var(--f-body);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:2px;padding:11px 12px}
.form-mock input:focus,.form-mock select:focus{border-color:var(--red)}
.form-mock .field{display:grid;gap:6px}
.hs-hint{font:500 .72rem/1.45 var(--f-mono);color:var(--muted)}
.form-note{font-size:.85rem;color:var(--ok);margin-top:2px}
footer.site{background:var(--slate);color:var(--slate-muted);font-size:.88rem}
footer.site .wrap{padding-block:clamp(36px,5vw,58px)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
@media (max-width:900px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h5{font:500 .71rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-grid a{color:var(--slate-muted);text-decoration:none;background:none;border:0;padding:0;font:inherit;cursor:pointer;text-align:left;transition:color .18s}
.foot-grid a:hover{color:#fff}
.foot-logo{height:38px;width:auto;margin-bottom:14px}
.foot-bottom{border-top:1px solid var(--slate-line);margin-top:32px;padding-top:20px;display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between;font-size:.8rem}
.copyable{font-family:inherit;color:inherit;user-select:all}
.foot-grid .copyable,footer .copyable{color:#fff}
.proto-ribbon{background:var(--red);color:#fff;font:500 .76rem/1.45 var(--f-mono)}
.proto-ribbon .wrap{padding-block:9px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.totop{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:65;width:42px;height:42px;border-radius:50%;background:var(--red);color:#fff;border:0;cursor:pointer;font-size:1.05rem;box-shadow:0 6px 20px rgba(158,23,35,.3);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;transform:translateY(8px)}
.totop.show{opacity:1;pointer-events:auto;transform:none}.rechner{background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.rechner-steuer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.feld{background:#fff;padding:16px 18px;display:grid;gap:8px;align-content:start}
.feld--weit{grid-column:1/-1}
.feld>span{font:500 .7rem/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.feld select{font:500 .95rem/1.3 var(--f-body);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:2px;padding:9px 10px;width:100%}
.feld select:focus{border-color:var(--red)}
.feld input[type=range]{width:100%;accent-color:var(--red);height:22px;cursor:pointer}
.feld output{font:700 1.1rem/1 var(--f-display);color:var(--red);font-variant-numeric:tabular-nums}
.feld--weit{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center}
.feld--weit>span{grid-column:1/-1}
.rechner-bild{padding:18px 18px 8px;background:var(--surface)}
.rechner-bild svg{width:100%;height:auto;display:block}
.rechner-legende{display:flex;gap:18px;flex-wrap:wrap;align-items:center;padding:6px 2px 10px;font:500 .74rem/1 var(--f-body);color:var(--muted)}
.lg{display:flex;align-items:center;gap:7px}
.lg::before{content:"";width:14px;height:3px;border-radius:2px}
.lg--grau::before{background:var(--slate)}
.lg--rot::before{background:var(--red)}
.lg-zeit{margin-left:auto;font-family:var(--f-mono);font-size:.7rem}
.rechner-werte{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line)}
.wert{background:#fff;padding:16px 18px;display:grid;gap:4px;align-content:start}
.wert small{font:500 .68rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.wert b{font:700 1.3rem/1.1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.wert em{font:500 .76rem/1.3 var(--f-body);font-style:normal;color:var(--ok)}
.wert--gut b{color:var(--red)}
.wert--summe{background:var(--red-soft)}
.wert--summe b{color:var(--red);font-size:1.45rem}
.wert--summe em{color:var(--red)}
.rechner-hinweis{margin:0;padding:12px 18px;background:#FFF6E8;border-top:1px solid var(--line);font:500 .82rem/1.45 var(--f-body);color:#8A5B12}
@media (max-width:900px){
.rechner-steuer{grid-template-columns:1fr 1fr}
.rechner-werte{grid-template-columns:1fr 1fr}
.wert--summe{grid-column:1/-1}
}
@media (max-width:560px){
.rechner-steuer{grid-template-columns:1fr}
.rechner-werte{grid-template-columns:1fr}
}
/* ---------- Backend-Tour ---------- */
.btour{background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.bt-reiter-zeile{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.bt-reiter{background:#fff;border:0;border-top:3px solid transparent;padding:14px 16px 13px;text-align:left;cursor:pointer;display:grid;gap:3px;transition:background .18s,border-color .18s}
.bt-reiter b{font:600 .92rem/1.25 var(--f-body);color:var(--ink)}
.bt-reiter span{font:400 .76rem/1.35 var(--f-body);color:var(--muted)}
.bt-reiter:hover{background:var(--surface)}
.bt-reiter[aria-pressed="true"]{border-top-color:var(--red);background:var(--red-soft)}
.bt-reiter[aria-pressed="true"] b{color:var(--red)}
.bt-buehne{background:var(--surface);padding:20px}
.bt-screen{background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden;box-shadow:0 1px 3px rgba(26,29,35,.06)}
.bt-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);background:#FBFCFC}
.bt-tool{font:500 .74rem/1 var(--f-body);color:var(--ink-2);border:1px solid var(--line);border-radius:2px;padding:6px 10px;background:#fff}
.bt-tool--prim{background:var(--red);border-color:var(--red);color:#fff}
.bt-suche{margin-left:auto;font:400 .74rem/1 var(--f-body);color:var(--muted);border:1px solid var(--line);border-radius:2px;padding:6px 34px 6px 10px;background:#fff}
.bt-tabwrap{overflow-x:auto}
.bt-tab{width:100%;border-collapse:collapse;font:400 .84rem/1.45 var(--f-body);min-width:560px}
.bt-tab th{font:500 .67rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.bt-tab td{padding:11px 14px;border-bottom:1px solid var(--surface-2);color:var(--ink-2);vertical-align:top}
.bt-tab tbody tr:last-child td{border-bottom:0}
.bt-tab .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bt-tab b{color:var(--ink);font-weight:600}
.bt-pill{display:inline-block;font:500 .7rem/1 var(--f-mono);padding:4px 7px;border-radius:2px;background:var(--surface);color:var(--ink-2)}
.bt-pill--on{background:#E6F4EC;color:var(--ok)}
.bt-pill--rot{background:var(--red-soft);color:var(--red)}
.bt-fuss{margin:0;padding:11px 14px;border-top:1px solid var(--line);background:#FBFCFC;font:400 .8rem/1.5 var(--f-body);color:var(--muted)}
.bt-baum{list-style:none;margin:0;padding:16px 18px;font:400 .88rem/1.5 var(--f-body)}
.bt-baum ul{list-style:none;margin:0;padding:0 0 0 24px;border-left:1px solid var(--line)}
.bt-k{padding:7px 0 0;position:relative}
.bt-k-name{font-weight:600;color:var(--ink)}
.bt-k--0>.bt-k-name{font:700 1rem/1.3 var(--f-display);color:var(--red)}
.bt-k--2>.bt-k-name{font-weight:400;color:var(--ink-2)}
.bt-k-meta{margin-left:10px;font:500 .72rem/1 var(--f-mono);color:var(--muted)}
.bt-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
.bt-feld{background:#fff;padding:14px 16px;display:grid;gap:5px}
.bt-feld small{font:500 .66rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.bt-feld b{font:500 .9rem/1.35 var(--f-body);color:var(--ink)}
.bt-pin{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--red-soft);border-top:1px solid var(--line)}
.bt-pin-ico{flex:0 0 22px;height:22px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:.72rem}
.bt-pin b{display:block;font:600 .9rem/1.35 var(--f-body);color:var(--red)}
.bt-pin span{font:400 .83rem/1.5 var(--f-body);color:var(--ink-2)}
.bt-hinweis{margin:14px 0 0;font:400 .82rem/1.5 var(--f-body);color:var(--muted)}
.bt-api{margin-top:22px;padding:16px 18px;background:var(--slate);color:var(--slate-muted);border-radius:3px;font:400 .9rem/1.6 var(--f-body)}
.bt-api b{color:#fff}
.bt-link{background:none;border:0;padding:0;font:600 .9rem/1.6 var(--f-body);color:#fff;text-decoration:underline;cursor:pointer}
@media (max-width:900px){.bt-reiter-zeile{grid-template-columns:1fr 1fr}.bt-form{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.bt-reiter-zeile{grid-template-columns:1fr}.bt-reiter span{display:none}.bt-form{grid-template-columns:1fr}.bt-buehne{padding:12px}}

/* ---------- Transparenz-Journal ---------- */
.journal{background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.j-steuer{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.j-steuer .feld--weit{grid-column:auto}
.j-tab{width:100%;border-collapse:collapse;font:400 .87rem/1.5 var(--f-body);min-width:660px}
.j-tab th{font:500 .66rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:bottom}
.j-tab th.num{text-align:right}
.j-tab td{padding:12px 14px;border-bottom:1px solid var(--surface-2);color:var(--ink-2)}
.j-tab .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.j-tab td b{display:block;color:var(--ink);font-weight:600}
.j-tab td em{font-style:normal;font:400 .76rem/1.4 var(--f-body);color:var(--muted)}
.j-kopf-enio,.j-tab td.j-enio{background:var(--red-soft)}
.j-tab td.j-enio{color:var(--red);font-weight:600}
.j-kopf-gar,.j-tab td.j-gar{background:var(--surface)}
.j-sperr{font:500 .74rem/1 var(--f-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.j-tab tfoot td{border-top:2px solid var(--line);border-bottom:0;font-weight:700;color:var(--ink)}
.j-werte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line)}
.j-param{margin:0;padding:11px 14px;border-top:1px solid var(--line);background:#FBFCFC;font:500 .74rem/1.5 var(--f-mono);color:var(--muted)}
@media (max-width:760px){.j-steuer{grid-template-columns:1fr}.j-werte{grid-template-columns:1fr}}

/* ---------- Abrechnungsmodelle ---------- */
.amod{background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.am-wahl{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.am-opt{background:#fff;border:0;border-top:3px solid transparent;padding:0 0 14px;cursor:pointer;display:grid;gap:3px;text-align:center;transition:background .18s}
.am-opt:hover{background:var(--surface)}
.am-opt[aria-pressed="true"]{border-top-color:var(--red);background:var(--red-soft)}
.am-bild{display:block;background:var(--surface-2);overflow:hidden;margin-bottom:10px}
.am-bild img{width:100%;height:auto;display:block;aspect-ratio:5/3;object-fit:cover;transition:transform .3s}
.am-opt:hover .am-bild img{transform:scale(1.04)}
.am-wer{font:600 .9rem/1.25 var(--f-body);color:var(--ink);padding:0 10px}
.am-opt[aria-pressed="true"] .am-wer{color:var(--red)}
.am-was{font:400 .8rem/1.3 var(--f-body);color:var(--ink-2);padding:0 10px}
.am-wo{font:500 .68rem/1.3 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:0 8px}
.am-detail{background:var(--surface);padding:20px}
.am-daten{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.am-paar{background:#fff;padding:15px 18px;display:grid;gap:5px;align-content:start}
.am-paar small{font:500 .66rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.am-paar b{font:700 1.05rem/1.3 var(--f-display);color:var(--red)}
.am-paar--text{grid-column:1/-1}
.am-paar--text p{margin:0;font:400 .92rem/1.6 var(--f-body);color:var(--ink-2)}
.am-fluss{background:#fff;padding:15px 18px;grid-column:1/-1;display:grid;gap:10px}
.am-fluss small{font:500 .66rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.am-kette{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.am-knoten{font:500 .86rem/1.3 var(--f-body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:9px 13px}
.am-knoten--enio{background:var(--red);border-color:var(--red);color:#fff;font-weight:700;font-family:var(--f-display)}
.am-pfeil{color:var(--red);font-size:1.05rem}
@media (max-width:900px){.am-wahl{grid-template-columns:repeat(3,minmax(0,1fr))}.am-daten{grid-template-columns:1fr}}
@media (max-width:560px){.am-wahl{grid-template-columns:1fr 1fr}.am-wo{display:none}.am-detail{padding:12px}}

/* ---------- Leistungskette ---------- */
.kette{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.kt{background:#fff;padding:18px 16px;display:grid;gap:7px;align-content:start;position:relative}
.kt-n{font:500 .68rem/1 var(--f-mono);letter-spacing:.09em;color:var(--red)}
.kt b{font:700 1rem/1.25 var(--f-display);color:var(--ink)}
.kt>span{font:400 .84rem/1.5 var(--f-body);color:var(--ink-2)}
.kt-wer{font:500 .68rem/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-style:normal;margin-top:3px}
.kette-schluss{margin-top:20px;padding:18px 20px;background:var(--red-soft);border-left:3px solid var(--red);font:400 .98rem/1.65 var(--f-body);color:var(--ink-2)}
.kette-schluss b{color:var(--red)}
@media (max-width:1050px){.kette{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.kette{grid-template-columns:1fr 1fr}}
/* Backend-Tour auf dunklem Band */
.band--slate .bt-hinweis{color:var(--slate-muted)}
.band--slate .btour{border-color:var(--slate-line)}
.band--slate .bt-buehne{background:#333944}
.band--slate .bt-api{background:transparent;border:1px solid var(--slate-line)}
/* Animierter Depot-Kreislauf im Hero */
.hero-media--anim{background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:18px}
.hero-media--anim .tk{width:100%;height:auto;max-height:100%;display:block}
@media (max-width:920px){.hero-media--anim{min-height:0;padding:12px}}
/* Bildunterschrift bei der Animation nicht ueber die Grafik legen */
.hero-media--anim{flex-direction:column;justify-content:center;gap:12px}
.hero-media--anim .hero-tag{position:static;width:100%;background:transparent;color:var(--muted);padding:11px 2px 0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;backdrop-filter:none}
.hero-media--anim .hero-tag b{color:var(--ink)}
/* display:grid wuerde das hidden-Attribut aushebeln */
.am-daten[hidden],.bt-panel[hidden],.rechner-hinweis[hidden]{display:none!important}
/* Videos */
.vids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.vid{display:flex;flex-direction:column;gap:12px;min-width:0}
.vid-start{position:relative;display:block;padding:0;border:1px solid var(--line);background:var(--surface);border-radius:3px;overflow:hidden;cursor:pointer;width:100%}
.vid-bild{display:block;aspect-ratio:16/9;background:var(--surface-2)}
.vid-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.vid-start:hover .vid-bild img{transform:scale(1.03)}
.vid-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:1.1rem;padding-left:4px;box-shadow:0 8px 24px rgba(158,23,35,.35);transition:transform .22s ease}
.vid-start:hover .vid-play{transform:translate(-50%,-50%) scale(1.08)}
.vid-frame{width:100%;aspect-ratio:16/9;border:1px solid var(--line);border-radius:3px;display:block}
.vid-rahmen{position:relative;display:block;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--surface)}
.vid--leer .vid-bild img{filter:grayscale(.35)}
.vid--leer .vid-play{background:var(--muted);box-shadow:none}
.vid-text b{display:block;font:700 1.05rem/1.3 var(--f-display);color:var(--ink)}
.vid-text span{display:block;margin-top:5px;font:400 .9rem/1.6 var(--f-body);color:var(--ink-2)}
@media (max-width:760px){.vids{grid-template-columns:1fr}}
/* Karten mit Zusatzinfo beim Hover */
.card--mehr{cursor:default;outline:none}
.card--mehr:hover,.card--mehr:focus-visible{border-color:var(--red);box-shadow:0 14px 34px rgba(26,29,35,.1);transform:translateY(-3px)}
.card-auf{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px;font:500 .74rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.card--mehr:hover .card-auf,.card--mehr:focus-visible .card-auf{color:var(--red)}
.card-plus{position:relative;width:14px;height:14px;flex:none}
.card-plus::before,.card-plus::after{content:"";position:absolute;background:currentColor;transition:transform .3s ease,opacity .3s ease}
.card-plus::before{left:0;top:6px;width:14px;height:1.5px}
.card-plus::after{left:6px;top:0;width:1.5px;height:14px}
.card--mehr:hover .card-plus::after,.card--mehr:focus-visible .card-plus::after{transform:rotate(90deg);opacity:0}
.card-mehr{display:grid;grid-template-rows:0fr;transition:grid-template-rows .36s cubic-bezier(.2,.7,.3,1),opacity .28s ease,margin-top .36s ease;opacity:0;margin-top:0}
.card--mehr:hover .card-mehr,.card--mehr:focus-visible .card-mehr{grid-template-rows:1fr;opacity:1;margin-top:12px}
.card-mehr-i{overflow:hidden;min-height:0;display:block;font:400 .87rem/1.6 var(--f-body);color:var(--ink-2);border-top:1px solid var(--line);padding-top:12px}
.card--mehr h3,.card--mehr p{transition:none}
@media (hover:none){
.card-auf{display:none}
.card-mehr{grid-template-rows:1fr;opacity:1;margin-top:12px}
}
@media (prefers-reduced-motion:reduce){.card-mehr{transition:none}}
/* Schemaskizzen in den Karten */
.card-mehr-i{display:grid;gap:12px}
.card-mehr-p{display:block;font:400 .87rem/1.6 var(--f-body);color:var(--ink-2)}
.card-skizze{display:block;background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:10px}
.card-skizze svg{width:100%;height:auto;display:block}
.sk-k{fill:#fff;stroke:#C6CDD4;stroke-width:1}
.sk-k--rot{fill:var(--red);stroke:var(--red)}
.sk-t{font:500 8.5px var(--f-mono);fill:#616C7A;text-anchor:middle;letter-spacing:.03em}
.sk-k--rot + .sk-t{fill:#fff}
.sk-l{stroke:#C6CDD4;stroke-width:1.2;fill:none;stroke-dasharray:3 3}
.sk-pf{fill:#C6CDD4}
.sk-p{fill:var(--red)}
.sk-feld{fill:#F4F6F7;stroke:#C6CDD4;stroke-width:1}
.sk-z{font:600 9.5px var(--f-mono);fill:var(--ink);text-anchor:middle}
.sk-z1{animation:skZ1 2.6s steps(1) infinite}
.sk-z2{animation:skZ2 2.6s steps(1) infinite}
@keyframes skZ1{0%,45%{opacity:1}46%,100%{opacity:0}}
@keyframes skZ2{0%,45%{opacity:0}46%,100%{opacity:1}}
.sk-karte{fill:var(--red)}
.sk-chip{fill:#E7B9BE}
.sk-kt{font:600 8.5px var(--f-mono);fill:#fff;text-anchor:middle}
.sk-sp{fill:#E9EDEF}
.sk-bar{fill:var(--red)}
.sk-bar-a{animation:skBarA 3.4s ease-in-out infinite}
.sk-bar-b{animation:skBarB 3.4s ease-in-out infinite;fill:#9AA3AE}
@keyframes skBarA{0%{width:0}55%,100%{width:130px}}
@keyframes skBarB{0%{width:0}55%{width:38px}100%{width:54px}}
.sk-badge{font:700 8px var(--f-mono);fill:var(--red);letter-spacing:.1em}
.sk-grenze{stroke:var(--red);stroke-width:1.2;stroke-dasharray:4 3}
.sk-l-links{text-anchor:start}
@media (prefers-reduced-motion:reduce){.card-skizze *{animation:none!important}.card-skizze circle.sk-p{display:none}}

/* Ablaufschritte: Fortschritt und Zusatzinfo */
.step{position:relative;transition:background .2s}
.step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);transform:scaleY(0);transform-origin:top;animation:stepLauf 9s linear infinite;animation-delay:calc(var(--i,0) * 1.4s)}
@keyframes stepLauf{0%{transform:scaleY(0);opacity:0}4%{opacity:1}14%{transform:scaleY(1);opacity:1}26%{transform:scaleY(1);opacity:1}32%,100%{transform:scaleY(1);opacity:.18}}
.step .n{transition:transform .3s ease}
.step--mehr{cursor:default;outline:none}
.step--mehr:hover,.step--mehr:focus-visible{background:var(--surface)}
.step--mehr:hover .n,.step--mehr:focus-visible .n{transform:scale(1.18)}
.step-inhalt{display:flex;flex-direction:column;min-width:0}
.step--mehr .card-auf{margin-top:12px;padding-top:0}
.step--mehr:hover .card-auf,.step--mehr:focus-visible .card-auf{color:var(--red)}
.step--mehr:hover .card-mehr,.step--mehr:focus-visible .card-mehr{grid-template-rows:1fr;opacity:1;margin-top:10px}
.step--mehr:hover .card-plus::after,.step--mehr:focus-visible .card-plus::after{transform:rotate(90deg);opacity:0}
@media (hover:none){.step--mehr .card-auf{display:none}.step--mehr .card-mehr{grid-template-rows:1fr;opacity:1;margin-top:10px}}
@media (prefers-reduced-motion:reduce){.step::before{animation:none;transform:scaleY(1);opacity:.18}}
/* ---------------- Beispiel-Dashboard ---------------- */
.db{--db-a:#6366F1;--db-b:#F59E0B;--db-c:#14B8A6;--db-linie:#E2E8F0;--db-flaeche:#F8FAFC;display:grid;gap:18px}

/* Filterzeile: vier gleich breite Felder in einem Raster */
.db-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--db-linie);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.db-f{background:#fff;padding:14px 18px;display:grid;gap:9px;align-content:start;min-width:0}
.db-f--zentriert{justify-items:center;background:transparent;padding:0;margin-bottom:2px}
.db-f-l{font:500 .64rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#9AA3AE}
.db-seg{display:flex;flex-wrap:wrap;gap:6px}
.db-seg button{display:inline-flex;align-items:center;gap:7px;font:500 .79rem/1 var(--f-body);padding:8px 12px;border:1px solid var(--db-linie);background:#fff;color:#69727D;border-radius:999px;cursor:pointer;transition:all .16s}
.db-seg button:hover{border-color:#A5B4FC;color:#0F172A;background:#F8FAFC}
.db-seg button[aria-pressed="true"]{background:#EEF2FF;border-color:#C7D2FE;color:#4F46E5;font-weight:600}
.db-punkt{width:9px;height:9px;border-radius:50%;background:#CBD5E1;flex:none;transition:background .16s}
#db-ort button[data-o="a"] .db-punkt{background:var(--db-a)}
#db-ort button[data-o="b"] .db-punkt{background:var(--db-b)}
#db-ort button[data-o="c"] .db-punkt{background:var(--db-c)}
#db-ort button[aria-pressed="false"] .db-punkt{background:#D8DDE3}
#db-ort button[aria-pressed="false"]{color:#A2AAB4}
#db-ort button[data-o="a"][aria-pressed="true"]{background:#F0F3F6;border-color:#BAC3CF;color:#4E5A6B}
#db-ort button[data-o="b"][aria-pressed="true"]{background:#FBF4E7;border-color:#E6D0A6;color:#8A6520}
#db-ort button[data-o="c"][aria-pressed="true"]{background:#FAF0F1;border-color:#E2C0C4;color:#9A5560}

/* Kennzahlen */
.db-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr));gap:1px;background:var(--db-linie);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.db-kachel{background:#fff;padding:15px 16px;display:grid;gap:3px;align-content:start}
.db-kachel small{font:500 .63rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#9AA3AE}
.db-kachel b{font:700 1.35rem/1.15 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em;overflow-wrap:anywhere}
.db-kachel em{font:400 .75rem/1.3 var(--f-body);font-style:normal;color:#8D96A1}
.db-kachel--key{background:#EEF2FF}
.db-kachel--key b{color:#4F46E5}
.db-kachel--key em{color:#818CF8}

/* Karten */
.db-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.db-karte{background:#fff;border:1px solid var(--line);border-radius:3px;padding:16px 18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.db-karte--breit{grid-column:1/-1}
.db-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.db-karte h3{margin:0;font:700 1.02rem/1.25 var(--f-display);color:var(--ink)}
.db-sub{font:500 .68rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:#6366F1}
.db-hilfe{margin:0;font:400 .83rem/1.5 var(--f-body);color:#8D96A1}
.db-chart{position:relative;width:100%;min-width:0}
.db-chart svg{display:block;width:100%;height:auto;overflow:visible}
.db-chart--gross{margin-top:4px}
.db-ax{font:500 9.5px var(--f-mono);fill:#A2AAB4}
.db-lab{font:500 10.5px var(--f-body);fill:#5B6572}
.db-inbar{font:600 10.5px var(--f-mono);fill:#fff}
.db-end{font:700 10.5px var(--f-display)}
.db-tip{position:absolute;pointer-events:none;background:#fff;border:1px solid var(--db-linie);border-radius:4px;box-shadow:0 10px 28px rgba(26,29,35,.12);padding:9px 12px;font:400 .78rem/1.55 var(--f-body);white-space:nowrap;z-index:5;font-variant-numeric:tabular-nums;color:#5B6572}
.db-tip b{color:var(--ink);font-weight:600}
.db-tip>b:first-child{display:block;font:500 .64rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#9AA3AE;margin-bottom:4px}

/* Tabellen */
.db-tabelle{overflow-x:auto}
.db-tab{width:100%;border-collapse:collapse;font:400 .85rem/1.5 var(--f-body);font-variant-numeric:tabular-nums;min-width:640px}
.db-tab th{font:500 .62rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#9AA3AE;text-align:left;padding:11px 12px;border-bottom:1px solid var(--db-linie);white-space:nowrap}
.db-tab th.num,.db-tab td.num{text-align:right}
.db-tab td{padding:11px 12px;border-bottom:1px solid #F1F4F6;color:#5B6572;white-space:nowrap}
.db-tab tbody tr:hover td{background:#FBFCFD}
.db-tab td b{color:var(--ink);font-weight:600;display:block}
.db-tab td em{font-style:normal;font:400 .75rem/1.4 var(--f-body);color:#9AA3AE}
.db-tab tr.db-hervor td{background:#EEF2FF;color:#4F46E5;font-weight:600;border-bottom:0}
.db-tab tr.db-hervor:hover td{background:#E0E7FF}
.db-tab tr.db-hervor td b{color:#4F46E5}

/* Prognose */
.db-prog{background:#fff;border:1px solid var(--line);border-radius:3px;padding:22px;display:grid;gap:14px}
.db-prog-kopf{display:grid;gap:7px;max-width:72ch}
.db-prog-kopf h3{margin:0;font:700 1.3rem/1.25 var(--f-display);color:var(--ink)}
.db-prog-kopf p{margin:0;font:400 .92rem/1.6 var(--f-body);color:var(--ink-2)}
@media (min-width:1120px){.db-filter{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:860px){.db-grid{grid-template-columns:1fr}.db-karte--breit{grid-column:auto}}
@media (max-width:620px){.db-filter{grid-template-columns:1fr}.db-prog{padding:14px}}
/* Glossar */
.glos{background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.glos-kopf{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);background:#FBFCFC}
.glos-such{flex:1;min-width:0;font:400 .95rem/1.3 var(--f-body);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:2px;padding:10px 12px}
.glos-such:focus{outline:none;border-color:var(--red)}
.glos-zahl{font:500 .7rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.glos-zahl b{color:var(--red);font-size:.95rem}
.glos-liste{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line)}
.glos-e{background:#fff;padding:16px 18px;display:grid;gap:5px;align-content:start}
.glos-e[hidden]{display:none}
.glos-e dt{font:700 1rem/1.3 var(--f-display);color:var(--ink);display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.glos-lang{font:500 .66rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.glos-e dd{margin:0;font:400 .88rem/1.6 var(--f-body);color:var(--ink-2)}
.glos-e dd b{color:var(--ink)}
.glos-leer{margin:0;padding:18px;font:400 .9rem/1.5 var(--f-body);color:var(--muted)}
@media (max-width:760px){.glos-liste{grid-template-columns:1fr}}
/* Ergebnis-Eyebrow auf Karten */
.card-ober{font:500 .64rem/1.4 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--red);margin-bottom:-4px}
.band--slate .card-ober{color:#F2A3AC}
/* Versprechen im Hero */
.hero-vers{margin-top:26px;padding:16px 18px;border-left:3px solid var(--red);background:var(--red-soft);font:500 .95rem/1.6 var(--f-body);color:var(--ink);max-width:56ch}
.hero-vers b{color:var(--red)}
/* ---------------- ENIO App, interaktiv ---------------- */
.appd{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;align-items:start}
.appd-phone{display:flex;justify-content:center}
.ph{width:286px;background:#1A1D23;border-radius:38px;padding:9px;box-shadow:0 22px 50px rgba(26,29,35,.22);position:relative}
.ph-not{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:104px;height:22px;background:#1A1D23;border-radius:0 0 14px 14px;z-index:4}
.ph-stat{display:flex;justify-content:space-between;background:#fff;border-radius:30px 30px 0 0;padding:9px 20px 3px;font:600 .68rem/1 var(--f-body);color:var(--ink)}
.ph-stat-r{letter-spacing:.06em}
.ph-screens{background:#F4F6F7;height:452px;overflow:hidden;position:relative}
.ap-s{position:absolute;inset:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}
.ap-s[hidden]{display:none}
.ph-tabs{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;background:#fff;border-top:1px solid var(--line);border-radius:0 0 30px 30px;padding:7px 4px 13px;position:relative}
.ph-tabs button{background:none;border:0;padding:4px 0;display:grid;gap:3px;justify-items:center;cursor:pointer;font:500 .55rem/1 var(--f-body);color:#A2AAB4}
.ph-tabs button .ph-i{font-size:.95rem;line-height:1}
.ph-tabs button[aria-pressed="true"]{color:var(--red)}
.ph-qr{width:42px;height:42px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:1.1rem;justify-self:center;margin-top:-16px;box-shadow:0 6px 16px rgba(158,23,35,.3)}
.ap-such{margin:9px 10px;background:#fff;border-radius:8px;padding:9px 12px;font:400 .72rem/1 var(--f-body);color:#A2AAB4;box-shadow:0 1px 4px rgba(26,29,35,.08)}
.ap-map{position:relative;flex:1;min-height:0}
.ap-map svg{width:100%;height:100%;display:block}
.ap-pin{position:absolute;width:26px;height:26px;border-radius:50%;background:#5C9E81;color:#fff;border:2px solid #fff;font:700 .66rem/1 var(--f-body);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.2);display:grid;place-items:center;transition:all .18s}
.ap-pin--an{background:var(--red);width:32px;height:32px;font-size:.75rem;z-index:2}
.ap-sheet{background:#fff;border-radius:14px 14px 0 0;padding:14px 15px 16px;display:grid;gap:5px;box-shadow:0 -4px 18px rgba(26,29,35,.12)}
.ap-sheet-n{font:700 .88rem/1.3 var(--f-display);color:var(--ink)}
.ap-sheet-a{font:400 .7rem/1.4 var(--f-body);color:#8D96A1}
.ap-sheet-z{display:flex;justify-content:space-between;align-items:center;font:500 .7rem/1 var(--f-body);color:#5B6572;margin-top:4px}
.ap-frei{background:#E6F4EC;color:#2F7F5C;border-radius:10px;padding:4px 8px;font-size:.64rem;font-weight:600}
.ap-sheet-p{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);margin-top:7px;padding-top:8px;font:500 .72rem/1 var(--f-body);color:#8D96A1}
.ap-sheet-p b{font:700 1.02rem/1 var(--f-display);color:var(--ink)}
.ap-sheet-h{margin:0;font:400 .66rem/1.45 var(--f-body);color:#8D96A1}
.ap-btn{margin-top:8px;width:100%;background:var(--red);color:#fff;border:0;border-radius:7px;padding:11px;font:600 .78rem/1 var(--f-body);cursor:pointer}
.ap-btn--aus{background:#fff;color:var(--red);border:1.5px solid var(--red)}
.ap-btn--hell{background:#fff;color:#5B6572;border:1px solid var(--line)}
.ap-gruen{color:#2F7F5C}
.ap-grau{color:#8D96A1}
.ap-kopf{background:#fff;padding:11px 15px;border-bottom:1px solid var(--line);font:700 .82rem/1.2 var(--f-display);color:var(--ink);position:sticky;top:0;z-index:2}
.ap-back{background:none;border:0;padding:0;font:600 .76rem/1.2 var(--f-body);color:var(--red);cursor:pointer}
.ap-laden{padding:16px 15px;display:grid;gap:9px}
.ap-ring{position:relative;justify-self:center;width:132px;height:132px}
.ap-ring svg{width:100%;height:100%}
.ap-ring-t{position:absolute;inset:0;display:grid;place-content:center;justify-items:center}
.ap-ring-t b{font:700 1.5rem/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.ap-ring-t small{font:500 .62rem/1 var(--f-mono);color:#8D96A1;letter-spacing:.08em}
.ap-laden-z{justify-self:center;display:flex;align-items:center;gap:7px;font:500 .72rem/1 var(--f-body);color:#5B6572}
.ap-blink{width:7px;height:7px;border-radius:50%;background:#2F7F5C;animation:apBlink 1.3s ease-in-out infinite}
@keyframes apBlink{0%,100%{opacity:1}50%{opacity:.25}}
.ap-zeile{display:flex;justify-content:space-between;align-items:baseline;background:#fff;border-radius:7px;padding:9px 11px;font:400 .7rem/1.3 var(--f-body);color:#8D96A1}
.ap-zeile b{font:600 .74rem/1.3 var(--f-body);color:var(--ink)}
.ap-liste{display:grid;gap:8px;padding:10px}
.ap-e{background:#fff;border:0;border-radius:9px;padding:11px 12px;display:grid;gap:4px;text-align:left;cursor:pointer;box-shadow:0 1px 3px rgba(26,29,35,.06);transition:transform .14s,box-shadow .18s}
.ap-e:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(26,29,35,.1)}
.ap-e-k{display:flex;justify-content:space-between;align-items:center;gap:7px}
.ap-e-d{font:500 .62rem/1 var(--f-mono);color:#A2AAB4;letter-spacing:.04em}
.ap-p{font:600 .56rem/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;border-radius:9px;padding:4px 7px;white-space:nowrap}
.ap-p--firma{background:#E6F4EC;color:#2F7F5C}
.ap-p--home{background:#FBF4E7;color:#8A6520}
.ap-p--roam{background:#F0F3F6;color:#4E5A6B}
.ap-p--adhoc{background:#FAF0F1;color:#9A5560}
.ap-e-o{font:600 .78rem/1.3 var(--f-body);color:var(--ink)}
.ap-e-w{display:flex;justify-content:space-between;align-items:baseline;font:400 .68rem/1 var(--f-body);color:#8D96A1}
.ap-e-w b{font:700 .84rem/1 var(--f-display);color:var(--ink)}
.ap-det{padding:12px 15px 16px;display:grid;gap:9px}
.ap-det-k{display:flex;justify-content:space-between;align-items:center}
.ap-det-o{font:700 .95rem/1.25 var(--f-display);color:var(--ink)}
.ap-det-id{font:500 .6rem/1.4 var(--f-mono);color:#A2AAB4;word-break:break-all}
.ap-det-w{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.ap-det-w>div{background:#fff;padding:9px 8px;display:grid;gap:2px}
.ap-det-w small{font:500 .54rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#A2AAB4}
.ap-det-w b{font:700 .8rem/1.2 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.ap-det-hin{margin:0;font:400 .68rem/1.5 var(--f-body);color:#5B6572;background:#fff;border-radius:7px;padding:9px 11px}
.ap-feld{background:#fff;border-radius:8px;padding:11px;display:grid;gap:7px}
.ap-feld>small{font:500 .56rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:#A2AAB4}
.ap-feld em{font:400 .64rem/1.4 var(--f-body);font-style:normal;color:#8D96A1}
.ap-tog{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.ap-tog button{border:1px solid var(--line);background:#fff;border-radius:6px;padding:8px;font:600 .72rem/1 var(--f-body);color:#8D96A1;cursor:pointer;transition:all .14s}
.ap-tog button[aria-pressed="true"]{background:var(--red-soft);border-color:#E4BDC1;color:var(--red)}
.ap-km{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:6px;padding:7px 9px}
.ap-km input{border:0;outline:none;width:76px;font:600 .82rem/1 var(--f-body);color:var(--ink);font-variant-numeric:tabular-nums}
.ap-km-e{font:500 .68rem/1 var(--f-body);color:#A2AAB4}
.ap-km-ok{margin-left:auto;font:600 .6rem/1 var(--f-mono);color:#2F7F5C;opacity:0;transition:opacity .25s}
.ap-km-ok.an{opacity:1}
.ap-konto{padding:12px 15px 16px;display:grid;gap:8px}
.ap-ab{font:500 .56rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#A2AAB4;margin-top:4px}
.ap-kk{background:#fff;border-radius:9px;padding:11px 12px;display:grid;gap:2px}
.ap-kk--firma{background:linear-gradient(135deg,#9E1723,#7C111B);color:#fff}
.ap-kk b{font:700 .82rem/1.2 var(--f-display);color:inherit}
.ap-kk span{font:500 .64rem/1.3 var(--f-mono);opacity:.8}
.ap-kk em{font:400 .64rem/1.3 var(--f-body);font-style:normal;opacity:.75}
.ap-kk:not(.ap-kk--firma) b{color:var(--ink)}
.ap-kk:not(.ap-kk--firma) span,.ap-kk:not(.ap-kk--firma) em{color:#8D96A1;opacity:1}
.ap-tz{background:#fff;border-radius:7px;padding:9px 11px;display:flex;justify-content:space-between;align-items:baseline;font:400 .7rem/1.3 var(--f-body);color:#5B6572}
.ap-tz b{font:700 .8rem/1 var(--f-display);color:var(--ink)}
.ap-konto-hin{margin:4px 0 0;font:400 .64rem/1.5 var(--f-body);color:#8D96A1}
.appd-text{display:grid;gap:10px;align-content:start}
.appd-v{display:grid;grid-template-columns:34px 1fr;gap:4px 14px;background:#fff;border:1px solid var(--line);border-radius:3px;padding:16px 18px;text-align:left;cursor:pointer;transition:border-color .18s,box-shadow .22s,transform .22s}
.appd-v:hover{border-color:#B6BEC8;transform:translateY(-2px);box-shadow:0 10px 26px rgba(26,29,35,.08)}
.appd-v--an{border-color:var(--red);box-shadow:0 10px 26px rgba(158,23,35,.1)}
.appd-v-n{grid-row:1/3;font:500 .68rem/1.4 var(--f-mono);letter-spacing:.09em;color:var(--red)}
.appd-v b{font:700 1.05rem/1.3 var(--f-display);color:var(--ink)}
.appd-v>span:last-child{font:400 .9rem/1.6 var(--f-body);color:var(--ink-2)}
@media (max-width:980px){.appd{grid-template-columns:1fr;gap:28px;justify-items:center}.appd-text{width:100%}}
/* ---------------- Angebotsrechner ---------------- */
.ang{display:grid;gap:16px}
.ang-eingaben{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.ang-gruppe{background:#fff;padding:14px 16px;display:grid;gap:10px;align-content:start}
.ang-gruppe--weit{grid-column:1/-1}
.ang-g-l{font:500 .64rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#9AA3AE}
.ang-gruppe .feld{background:transparent;padding:0;gap:6px}
.ang-gruppe .feld>span{font:400 .78rem/1.35 var(--f-body);letter-spacing:0;text-transform:none;color:var(--ink-2)}
.ang-gruppe input[type=number]{font:600 .98rem/1.3 var(--f-body);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:2px;padding:9px 10px;width:100%;font-variant-numeric:tabular-nums}
.ang-gruppe input[type=number]:focus{outline:none;border-color:var(--red)}
.ang-gruppe .feld--weit{grid-template-columns:1fr auto;gap:6px 14px;align-items:center}
.ang-vier{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ang-ab{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.ang-kachel{background:#fff;padding:14px 16px;display:grid;gap:3px;align-content:start}
.ang-kachel small{font:500 .62rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#9AA3AE}
.ang-kachel b{font:700 1.3rem/1.15 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em;overflow-wrap:anywhere}
.ang-kachel em{font:400 .73rem/1.3 var(--f-body);font-style:normal;color:#8D96A1}
.ang-kachel--gut b{color:#2F7F5C}
.ang-kachel--offen b{color:#A8424D}
.ang-kachel--key{background:var(--red-soft)}
.ang-kachel--key b{color:var(--red)}
.ang-kachel--key em{color:#B2707A}
.ang-spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.ang-karte{background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.ang-k-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.ang-k-kopf h3{margin:0;font:700 1.02rem/1.25 var(--f-display);color:var(--ink)}
.ang-marke{font:600 .6rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;border-radius:10px;padding:5px 9px;white-space:nowrap}
.ang-marke--rot{background:#FBF4F5;color:#A8424D}
.ang-marke--gruen{background:#EDF6F1;color:#2F7F5C}
.ang-tab{overflow-x:auto}
.ang-t{width:100%;border-collapse:collapse;font:400 .85rem/1.5 var(--f-body);font-variant-numeric:tabular-nums}
.ang-t th{font:500 .6rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#9AA3AE;text-align:left;padding:10px 16px;border-bottom:1px solid var(--line)}
.ang-t th.num,.ang-t td.num{text-align:right;white-space:nowrap}
.ang-t td{padding:11px 16px;border-bottom:1px solid #F1F4F6;color:#5B6572;vertical-align:top}
.ang-t td b{display:block;color:var(--ink);font-weight:600;font-size:.87rem}
.ang-t td em{display:block;margin-top:3px;font-style:normal;font:400 .73rem/1.45 var(--f-body);color:#9AA3AE}
.ang-t tr.ang-sum td{background:#FBFCFD;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
.ang-t tr.ang-gesamt td{background:var(--red-soft);color:var(--red);font:700 .98rem/1.3 var(--f-display);border-bottom:0;padding:14px 16px}
.ang-erg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.ang-hinweis{margin:0;font:400 .82rem/1.6 var(--f-body);color:#8D96A1;max-width:96ch}
@media (max-width:900px){.ang-eingaben{grid-template-columns:1fr 1fr}.ang-spalten{grid-template-columns:1fr}.ang-vier{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ang-eingaben{grid-template-columns:1fr}.ang-vier{grid-template-columns:1fr}}
/* ---------------- API-Katalog ---------------- */
.apis{display:grid;gap:18px}
.api-leiste{display:grid;gap:12px;background:#fff;border:1px solid var(--line);border-radius:3px;padding:16px 18px}
.api-chips{display:flex;flex-wrap:wrap;gap:7px}
.api-chips button{display:inline-flex;align-items:center;gap:8px;font:500 .8rem/1 var(--f-body);padding:9px 13px;border:1px solid var(--line);background:#fff;color:#69727D;border-radius:999px;cursor:pointer;transition:all .16s}
.api-chips button:hover{border-color:#B6BEC8;color:var(--ink)}
.api-chips button[aria-pressed="true"]{background:var(--red-soft);border-color:#E4BDC1;color:var(--red);font-weight:600}
.api-n{font:600 .66rem/1 var(--f-mono);background:#F0F3F6;color:#7A848F;border-radius:9px;padding:3px 7px}
.api-chips button[aria-pressed="true"] .api-n{background:#fff;color:var(--red)}
.api-suchzeile{display:flex;align-items:center;gap:14px}
.api-such{flex:1;min-width:0;font:400 .95rem/1.3 var(--f-body);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:2px;padding:10px 12px}
.api-such:focus{outline:none;border-color:var(--red)}
.api-zahl{font:500 .7rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:#9AA3AE;white-space:nowrap}
.api-zahl b{color:var(--red);font-size:.95rem}
.api-gitter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.api-k{background:#fff;border:1px solid var(--line);border-radius:3px;padding:20px;display:flex;flex-direction:column;gap:10px;min-width:0;transition:border-color .2s,box-shadow .25s,transform .25s}
.api-k:hover{border-color:#B6BEC8;box-shadow:0 12px 30px rgba(26,29,35,.08);transform:translateY(-2px)}
.api-k[hidden]{display:none}
.api-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.api-grp{font:600 .6rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;border-radius:10px;padding:5px 9px;white-space:nowrap}
.api-grp--daten{background:#F0F3F6;color:#4E5A6B}
.api-grp--steuern{background:#FAF0F1;color:#9A5560}
.api-grp--tarife{background:#FBF4E7;color:#8A6520}
.api-grp--kunden{background:#EDF6F1;color:#2F7F5C}
.api-ver{font:500 .64rem/1 var(--f-mono);color:#A2AAB4;white-space:nowrap}
.api-k h3{margin:0;font:700 1.08rem/1.3 var(--f-display);color:var(--ink)}
.api-zweck{margin:0;font:500 .92rem/1.55 var(--f-body);color:var(--ink-2)}
.api-daten{background:var(--surface);border-radius:2px;padding:12px 14px;display:grid;gap:5px}
.api-daten small{font:500 .6rem/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:#9AA3AE}
.api-daten p{margin:0;font:400 .86rem/1.6 var(--f-body);color:#5B6572}
.api-hin{margin:0;font:400 .78rem/1.5 var(--f-body);color:#8A6520;background:#FBF4E7;border-radius:2px;padding:9px 12px}
.api-auf{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;background:none;border:0;border-top:1px solid var(--line);padding:13px 0 0;cursor:pointer;font:500 .72rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:#9AA3AE;transition:color .18s}
.api-auf:hover,.api-k--offen .api-auf{color:var(--red)}
.api-pfeil{transition:transform .25s ease;font-size:.85rem}
.api-k--offen .api-pfeil{transform:rotate(180deg)}
.api-eps{list-style:none;margin:0;padding:0;display:grid;gap:7px;max-height:0;overflow:hidden;opacity:0;transition:max-height .35s cubic-bezier(.2,.7,.3,1),opacity .25s,margin .3s}
.api-k--offen .api-eps{max-height:760px;opacity:1;margin-top:2px}
.api-eps li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;padding:8px 10px;background:var(--surface);border-radius:2px}
.api-eps code{flex:1 1 auto;min-width:0;font:500 .74rem/1.4 var(--f-mono);color:var(--ink);word-break:break-all}
.api-eps li>span:not(.api-m){flex:1 1 100%;font:400 .74rem/1.45 var(--f-body);color:#8D96A1}
.api-eps li .api-m{flex:0 0 auto}
.api-m{flex:0 0 auto;font:700 .58rem/1 var(--f-mono);letter-spacing:.06em;border-radius:3px;padding:5px 6px;color:#fff;white-space:nowrap}
.api-m--get{background:#5C7FA5}
.api-m--post{background:#5C9E81}
.api-m--put{background:#C98A2E}
.api-m--patch{background:#9C7FB5}
.api-m--delete{background:#C0737B}
.api-leer{margin:0;font:400 .92rem/1.5 var(--f-body);color:var(--muted)}
@media (max-width:1000px){.api-gitter{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:660px){.api-gitter{grid-template-columns:1fr}.api-suchzeile{flex-wrap:wrap}}
/* Angebotsrechner: Summen auf einer Linie, Ergebnis in einer Reihe */
.ang-spalten{align-items:stretch}
.ang-karte{display:flex;flex-direction:column}
.ang-tab{flex:1 1 auto}
.ang-fuss{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:15px 16px;background:var(--red-soft);color:var(--red);border-top:1px solid var(--line)}
.ang-fuss span{font:600 .82rem/1.3 var(--f-body)}
.ang-fuss b{font:700 1.18rem/1 var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.ang-fuss--gruen{background:#EDF6F1;color:#2F7F5C}
.ang-zwei{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;align-items:end}
.ang-zwei .feld--weit{grid-column:auto}
@media (min-width:1000px){.ang-erg{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:900px){.ang-zwei{grid-template-columns:1fr}}
/* ---------------- Angebotsanfrage ---------------- */
.anker-ziel{position:relative;top:calc(-1 * var(--head-h) - 18px)}
.anf{display:grid;gap:14px}
.anf-block{background:#fff;border:1px solid var(--line);border-radius:3px;padding:22px}
.anf-b-kopf{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.anf-nr{font:500 .68rem/1.4 var(--f-mono);letter-spacing:.09em;color:var(--red)}
.anf-b-kopf h3{margin:0;font:700 1.14rem/1.25 var(--f-display);color:var(--ink)}
.anf-b-text{margin:0 0 16px;font:400 .92rem/1.6 var(--f-body);color:var(--ink-2);max-width:80ch}
.anf-sg{border:1px solid var(--line);border-radius:3px;overflow:hidden}
.anf-sg-kopf{display:flex;justify-content:space-between;gap:16px;padding:10px 16px;background:#FBFCFD;border-bottom:1px solid var(--line);font:500 .62rem/1.3 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:#9AA3AE}
.anf-z{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 16px;border-bottom:1px solid #F1F4F6}
.anf-z:last-child{border-bottom:0}
.anf-z:hover{background:#FBFCFD}
.anf-z-t{display:grid;gap:2px;min-width:0}
.anf-z-t b{font:600 .92rem/1.35 var(--f-body);color:var(--ink)}
.anf-z-t em{font-style:normal;font:400 .8rem/1.45 var(--f-body);color:#8D96A1}
.anf-tog{display:grid;grid-template-columns:auto auto;gap:5px;flex:none}
.anf-tog button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font:500 .76rem/1 var(--f-body);color:#8D96A1;cursor:pointer;transition:all .15s;white-space:nowrap}
.anf-tog button:hover{border-color:#B6BEC8;color:var(--ink)}
.anf-tog button[data-w="ich"][aria-pressed="true"]{background:#F0F3F6;border-color:#BAC3CF;color:#4E5A6B;font-weight:600}
.anf-tog button[data-w="enio"][aria-pressed="true"]{background:var(--red-soft);border-color:#E4BDC1;color:var(--red);font-weight:600}
.anf-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.anf-feld{display:grid;gap:6px}
.anf-feld--weit{grid-column:1/-1}
.anf-feld span{font:500 .64rem/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:#9AA3AE}
.anf-feld input,.anf-feld textarea{font:400 .95rem/1.5 var(--f-body);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:2px;padding:10px 12px;width:100%;resize:vertical}
.anf-feld input:focus,.anf-feld textarea:focus{outline:none;border-color:var(--red)}
.anf-aktion{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.anf-status{font:500 .84rem/1.4 var(--f-body);color:var(--red)}
.anf-vorschau{background:var(--slate);border-radius:3px;padding:18px 20px;color:var(--slate-muted)}
.anf-v-kopf{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}
.anf-v-kopf h4{margin:0;font:700 .95rem/1.2 var(--f-display);color:#fff}
.anf-zu{background:none;border:1px solid var(--slate-line);border-radius:2px;color:var(--slate-muted);font:500 .74rem/1 var(--f-body);padding:7px 12px;cursor:pointer}
.anf-zu:hover{border-color:#fff;color:#fff}
.anf-vorschau pre{margin:0;overflow-x:auto;font:400 .78rem/1.65 var(--f-mono);color:#D8DEE5;white-space:pre-wrap;word-break:break-word}
@media (max-width:900px){.anf-form{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.anf-form{grid-template-columns:1fr}.anf-z{flex-direction:column;align-items:flex-start;gap:10px}.anf-tog{width:100%;grid-template-columns:1fr 1fr}}
.ang-gruppe-hin{margin:2px 0 0;font:400 .78rem/1.5 var(--f-body);color:#9AA3AE}
/* Ergebnisband */
.wrk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.wrk-k{background:#fff;padding:24px 22px;display:grid;gap:7px;align-content:start;position:relative;transition:background .22s}
.wrk-k::before{content:"";position:absolute;left:0;top:0;width:3px;height:0;background:var(--red);transition:height .35s cubic-bezier(.2,.7,.3,1)}
.wrk-k:hover::before{height:100%}
.wrk-z{font:700 2.5rem/1 var(--f-display);color:var(--red);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.wrk-l{font:600 .92rem/1.3 var(--f-body);color:var(--ink)}
.wrk-p{font:400 .86rem/1.6 var(--f-body);color:var(--ink-2)}
.wrk-quelle{margin:14px 0 0;font:400 .8rem/1.5 var(--f-body);color:var(--muted);max-width:92ch}
.band--slate .wrk{border-color:var(--slate-line);background:var(--slate-line)}
.band--slate .wrk-k{background:#333944}
.band--slate .wrk-l{color:#fff}
.band--slate .wrk-p{color:var(--slate-muted)}
.band--slate .wrk-z{color:#F2A3AC}
.band--slate .wrk-quelle{color:var(--slate-muted)}
@media (max-width:900px){.wrk{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.wrk{grid-template-columns:1fr}}
/* Service Level */
.sla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.sla-k{background:#fff;border:1px solid var(--line);border-top:3px solid var(--line);border-radius:3px;padding:20px;display:flex;flex-direction:column;gap:10px;min-width:0;transition:box-shadow .25s,transform .25s}
.sla-k:hover{box-shadow:0 12px 30px rgba(26,29,35,.08);transform:translateY(-2px)}
.sla-k--p1{border-top-color:#9E1723}
.sla-k--p2{border-top-color:#C98A2E}
.sla-k--p3{border-top-color:#5C7FA5}
.sla-k--p4{border-top-color:#9AA3AE}
.sla-kopf{display:grid;gap:3px}
.sla-stufe{font:700 .68rem/1 var(--f-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.sla-k--p1 .sla-stufe{color:#9E1723}
.sla-k--p2 .sla-stufe{color:#8A6520}
.sla-k--p3 .sla-stufe{color:#4E5A6B}
.sla-name{font:700 1.08rem/1.25 var(--f-display);color:var(--ink)}
.sla-was{margin:0;font:400 .87rem/1.6 var(--f-body);color:var(--ink-2);flex:1}
.sla-zeiten{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.sla-zeiten>div{background:var(--surface);padding:11px 12px;display:grid;gap:3px}
.sla-zeiten small{font:500 .58rem/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#9AA3AE}
.sla-zeiten b{font:700 1rem/1.2 var(--f-display);color:var(--ink)}
.sla-k--p1 .sla-zeiten b{color:#9E1723}
.sla-bsp{margin:0;font:400 .78rem/1.5 var(--f-body);color:#8D96A1}
.sla-bsp span{display:block;font:500 .58rem/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#B6BEC8;margin-bottom:3px}
.sla-zeit{display:flex;align-items:flex-start;gap:14px;margin-top:16px;padding:16px 18px;background:var(--red-soft);border-left:3px solid var(--red);border-radius:2px}
.sla-uhr{color:#2F7F5C;font-size:.7rem;line-height:1.6;animation:apBlink 1.8s ease-in-out infinite}
.sla-zeit b{display:block;font:700 1rem/1.3 var(--f-display);color:var(--ink)}
.sla-zeit span{font:400 .9rem/1.6 var(--f-body);color:var(--ink-2)}
@media (max-width:1000px){.sla{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.sla{grid-template-columns:1fr}}
/* Cashflow über fünf Jahre */
.ang-cfk{display:block;padding:0}
.ang-cf-hin{margin:0;padding:0 18px 12px;font:400 .87rem/1.6 var(--f-body);color:#8D96A1;max-width:96ch}
.ang-cf{position:relative;padding:0 18px 6px}
.ang-cf svg{display:block;width:100%;height:auto;overflow:visible}
.cf-ax{font:500 9.5px var(--f-mono);fill:#A2AAB4}
.cf-jahr{font:600 10.5px var(--f-mono);fill:#5B6572}
.cf-wert{font:700 10px var(--f-display);fill:#5B6572}
.cf-null{stroke:#5B6572;stroke-width:1.2}
.cf-gitter{stroke:#EDF0F3;stroke-width:1}
.cf-ertrag{fill:#7CB69B}
.cf-kosten{fill:#D99AA2}
.cf-linie{fill:none;stroke:#9E1723;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.cf-punkt{fill:#9E1723}
.cf-break{stroke:#1C7A4E;stroke-width:1.4;stroke-dasharray:4 3}
.cf-breaktext{font:700 9.5px var(--f-mono);fill:#2F7F5C}
.ang-cf .db-tip{position:absolute}
/* ---------------- Erklaerende Grafiken: PRIO, Heimladen, App, Startscreen, Roaming ---------------- */
.erk-modus{display:flex;flex-wrap:wrap;gap:6px}
.erk-mb{font:500 .8rem/1 var(--f-body);padding:9px 14px;border:1px solid var(--line);background:#fff;color:#69727D;border-radius:999px;cursor:pointer;transition:all .16s}
.erk-mb:hover{border-color:#B6BEC8;color:var(--ink)}
.erk-mb[aria-pressed="true"]{background:var(--red-soft);border-color:#E4BDC1;color:var(--red);font-weight:600}

/* --- PRIO-Button --- */
.erk-prio{background:#fff;border:1px solid var(--line);border-radius:3px;padding:20px 22px;display:grid;gap:14px}
.erk-steuer{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.erk-reg{display:flex;align-items:center;gap:10px;font:500 .72rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#9AA3AE}
.erk-reg input[type=range]{width:148px;accent-color:var(--red)}
.erk-reg b{font:700 .95rem/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums;min-width:60px;text-transform:none;letter-spacing:0}
.erk-skala{display:grid;grid-template-columns:210px 1fr 180px;align-items:center}
.erk-skala span{display:none}
.erk-zeilen{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.erk-zeile{display:grid;grid-template-columns:210px 1fr 180px;gap:16px;align-items:center;background:#fff;padding:11px 0}
.erk-wer{display:grid;gap:2px;position:relative;padding-right:10px}
.erk-wer b{font:600 .95rem/1.25 var(--f-display);color:var(--ink)}
.erk-wer small{font:400 .73rem/1.35 var(--f-body);color:#8D96A1}
.erk-pb{justify-self:start;margin-top:5px;font:700 .62rem/1 var(--f-mono);letter-spacing:.1em;padding:6px 10px;border:1px solid var(--line);background:#fff;color:#9AA3AE;border-radius:999px;cursor:pointer;transition:all .16s}
.erk-pb:hover{border-color:var(--red);color:var(--red)}
.erk-pb[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.erk-spur{min-width:0}
.sp{display:block;width:100%;height:58px}
.sp-flaeche{fill:#C9D0D8;opacity:.55}
.sp-prio .sp-flaeche{fill:#9E1723;opacity:.8}
.sp-grid{stroke:#EEF1F3;stroke-width:1;vector-effect:non-scaling-stroke}
.sp-ab{stroke:#9AA3AE;stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.erk-erg{display:grid;gap:1px;justify-items:end;text-align:right}
.erk-erg b{font:700 1.15rem/1.1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.erk-erg small{font:400 .72rem/1.3 var(--f-body);color:#9AA3AE}
.erk-st{font:500 .72rem/1.3 var(--f-body);margin-top:3px}
.ist-voll .erk-st{color:var(--ok)}
.ist-knapp .erk-st{color:var(--red)}
.ist-knapp b{color:var(--red)}
.erk-fuss{margin:0;font:400 .88rem/1.6 var(--f-body);color:var(--ink-2);max-width:88ch}
.erk-fuss-2{display:block;margin-top:6px;color:#8D96A1;font-size:.85rem}
@media (max-width:860px){
.erk-skala{display:none}
.erk-zeile{grid-template-columns:1fr;gap:8px;padding:14px 0}
.erk-erg{justify-items:start;text-align:left}
}

/* --- Charge@Home: zu Hause gegen oeffentlich --- */
.erk-heim{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.erk-eing,.erk-erg2{background:#fff;padding:22px}
.erk-heim h3{margin:0 0 14px;font:700 1rem/1.25 var(--f-display);color:var(--ink)}
.erk-fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.erk-f{display:grid;gap:5px;min-width:0}
.erk-f--weit{grid-column:1/-1}
.erk-f span{font:500 .68rem/1.35 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:#9AA3AE}
.erk-f span b{color:var(--red);font-size:.84rem;letter-spacing:0}
.erk-f input[type=number]{font:600 1rem/1 var(--f-display);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:2px;padding:9px 10px;width:100%;font-variant-numeric:tabular-nums}
.erk-f input[type=number]:focus{outline:none;border-color:var(--red)}
.erk-f input[type=range]{width:100%;accent-color:var(--red)}
.erk-bar{display:grid;gap:6px;margin-bottom:14px}
.erk-bl{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.erk-bl span{font:400 .85rem/1.3 var(--f-body);color:var(--ink-2)}
.erk-bl b{font:700 1.15rem/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.erk-balken{display:flex;height:26px;background:#F4F6F7;border-radius:2px;overflow:hidden}
.erk-seg{display:block;height:100%;transition:width .4s cubic-bezier(.22,.8,.3,1)}
.erk-seg--oeff{background:#B6BEC7}
.erk-seg--heim{background:#2F7F5C}
.erk-leg{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:18px}
.erk-lg{font:400 .74rem/1.3 var(--f-body);color:#8D96A1;display:inline-flex;align-items:center;gap:7px}
.erk-lg::before{content:"";width:10px;height:10px;border-radius:2px;flex:none}
.erk-lg--heim::before{background:#2F7F5C}
.erk-lg--oeff::before{background:#B6BEC7}
.erk-gross{border-top:1px solid var(--line);padding-top:16px;display:grid;gap:2px}
.erk-gross small{font:500 .68rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#9AA3AE}
.erk-gross b{font:700 2.1rem/1.05 var(--f-display);color:var(--ok);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.erk-mini{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.erk-mini li{display:grid;gap:2px;min-width:0}
.erk-mini small{font:400 .7rem/1.35 var(--f-body);color:#9AA3AE}
.erk-mini b{font:700 .98rem/1.2 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:860px){.erk-heim{grid-template-columns:1fr}.erk-mini{grid-template-columns:1fr}}

/* --- App mit eigener Marke, im Hero --- */
.hero-media--app{background:transparent;border-radius:0;overflow:visible}
.erk-app{display:grid;gap:14px;justify-items:center;--marke:#9E1723}
.erk-modus--app{justify-content:center}
.erk-app .erk-mb[aria-pressed="true"]{background:color-mix(in srgb,var(--marke) 10%,#fff);border-color:color-mix(in srgb,var(--marke) 35%,#fff);color:var(--marke)}
.hp-phone{width:100%;max-width:330px;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 18px 44px rgba(26,29,35,.14)}
.hp-top{background:var(--marke);color:#fff;padding:13px 16px;display:flex;align-items:baseline;gap:10px;transition:background .3s}
.hp-top b{font:700 1.05rem/1 var(--f-display);letter-spacing:.01em}
.hp-top span{font:400 .74rem/1 var(--f-body);opacity:.86}
.hp-map{position:relative;height:196px;background:#EEF1F3}
.hp-map svg{width:100%;height:100%;display:block}
.hp-pin{position:absolute;transform:translate(-50%,-50%);font:700 .68rem/1 var(--f-mono);padding:6px 9px;border-radius:999px;border:1.5px solid #fff;background:#8D96A1;color:#fff;cursor:pointer;box-shadow:0 2px 7px rgba(26,29,35,.24);transition:all .18s;white-space:nowrap}
.hp-pin[data-g="2"]{background:#2F7F5C}
.hp-pin[data-g="1"]{background:#C08A2E}
.hp-pin[aria-pressed="true"]{background:var(--marke);transform:translate(-50%,-50%) scale(1.16);z-index:3}
.hp-det{padding:14px 16px;display:grid;gap:3px;border-top:1px solid var(--line)}
.hp-det b{font:600 .95rem/1.25 var(--f-display);color:var(--ink)}
.hp-det small{font:500 .7rem/1.3 var(--f-mono);letter-spacing:.03em;color:var(--marke)}
.hp-det p{margin:5px 0 0;font:400 .8rem/1.55 var(--f-body);color:#69727D}
.hp-fuss{margin:0;max-width:40ch;text-align:center;font:400 .82rem/1.55 var(--f-body);color:#8D96A1}

/* --- Backend-Startscreen im Hero, moderne Dashboard-Farben --- */
.erk-kpi{--ind:#6366F1;--ind-d:#4F46E5;--ind-s:#EEF2FF;--sl:#64748B;--sl-l:#94A3B8;--li:#E2E8F0;
width:100%;background:#fff;border:1px solid var(--li);border-radius:10px;padding:16px;display:grid;gap:12px;box-shadow:0 14px 38px rgba(15,23,42,.07)}
.kpi-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px}
.kpi-live{display:inline-flex;align-items:center;gap:7px;font:600 .66rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#059669}
.kpi-live i{width:7px;height:7px;border-radius:50%;background:#10B981;animation:kpiPuls 1.8s ease-in-out infinite}
@keyframes kpiPuls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.kpi-zeit{font:500 .72rem/1 var(--f-mono);color:var(--sl-l);font-variant-numeric:tabular-nums}
.kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kpi-k{background:#F8FAFC;border:1px solid var(--li);border-radius:8px;padding:11px 12px;display:grid;gap:2px;align-content:start;min-width:0}
.kpi-k small{font:600 .6rem/1.3 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--sl-l)}
.kpi-k b{font:700 1.3rem/1.15 var(--f-display);color:#0F172A;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi-k span{font:400 .68rem/1.3 var(--f-body);color:var(--sl)}
.kpi-k--run{background:var(--ind-s);border-color:#C7D2FE}
.kpi-k--run b{color:var(--ind-d)}
.kpi-dots{display:flex;gap:3px;margin-top:5px}
.kpi-dots i{width:100%;max-width:9px;height:5px;border-radius:2px;background:#C7D2FE;transition:background .3s}
.kpi-dots i.an{background:var(--ind)}
.kpi-bar{height:5px;border-radius:3px;background:#E2E8F0;margin-top:7px;overflow:hidden}
.kpi-bar i{display:block;height:100%;background:var(--ind);border-radius:3px;transition:width .5s cubic-bezier(.22,.8,.3,1)}
.kpi-neu{animation:kpiNeu .8s ease-out}
@keyframes kpiNeu{0%{color:#0891B2;transform:translateY(-2px)}100%{color:#0F172A;transform:none}}
.kpi-weit{background:#0F172A;border-radius:8px;padding:12px 14px;display:grid;gap:9px}
.kpi-wkopf{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.kpi-wkopf small{font:600 .6rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:#94A3B8}
.kpi-wkopf b{font:700 1.05rem/1 var(--f-display);color:#fff;font-variant-numeric:tabular-nums}
.kpi-spalten{display:flex;align-items:flex-end;gap:4px;height:52px}
.kpi-spalten i{flex:1;background:#475569;border-radius:2px;transition:height .5s cubic-bezier(.22,.8,.3,1)}
.kpi-spalten i.kpi-jetzt{background:#22D3EE}
.kpi-fuss{margin:0;font:400 .76rem/1.5 var(--f-body);color:var(--sl-l);text-align:center}
@media (max-width:620px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- Roaming: Plattform gegen bilateral --- */
.erk-roam{display:grid;gap:16px;justify-items:start}
.erk-roamtafel{width:100%;background:#fff;border:1px solid var(--line);border-radius:3px;padding:14px}
.rm{display:block;width:100%;height:auto}
.erk-roam[data-rmodus="0"] .rm-g1{display:none}
.erk-roam[data-rmodus="1"] .rm-g0{display:none}
.erk-roam[data-rmodus="0"] .rm-z1{display:none}
.erk-roam[data-rmodus="1"] .rm-z0{display:none}
.erk-roamtext{margin:0;font:400 .95rem/1.7 var(--f-body);color:var(--ink-2);max-width:82ch}

/* --- THG-Quote: Pflicht gegen Angebot --- */
.erk-thg{display:grid;gap:16px}
.thg-regler{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;background:#fff;border:1px solid var(--line);border-radius:3px;padding:16px 18px}
.thg-tafel{background:#fff;border:1px solid var(--line);border-radius:3px;padding:10px 14px}
.tg{display:block;width:100%;height:auto}
.thg-erg{display:grid;gap:2px;justify-items:start}
.thg-erg small{font:500 .68rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#9AA3AE}
.thg-erg b{font:700 2.3rem/1.05 var(--f-display);color:var(--red);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
@media (max-width:760px){.thg-regler{grid-template-columns:1fr}}

/* --- THG-Rechner --- */
.erk-thgr{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.thgr-eing,.thgr-aus{background:#fff;padding:22px}
.thgr-eing{display:grid;gap:14px;align-content:start}
.thgr-fest{border-top:1px solid var(--line);padding-top:12px}
.thgr-fest b{font:700 1.1rem/1 var(--f-display);color:var(--ok);font-variant-numeric:tabular-nums}
.thgr-gross{display:grid;gap:2px;margin-bottom:20px}
.thgr-gross small{font:500 .68rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#9AA3AE}
.thgr-gross b{font:700 2.5rem/1.05 var(--f-display);color:var(--ok);font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.thgr-gross span{font:400 .8rem/1.4 var(--f-body);color:#8D96A1}
.thgr-diff{margin:4px 0 0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.thgr-diff b{font:700 1.35rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.thgr-diff b.ist-plus{color:var(--ok)}
.thgr-diff b.ist-minus{color:var(--red)}
.thgr-diff span{font:400 .86rem/1.4 var(--f-body);color:var(--ink-2)}
.thgr-unter{margin:14px 0 0;font:400 .86rem/1.6 var(--f-body);color:#8D96A1;max-width:84ch}
@media (max-width:860px){.erk-thgr{grid-template-columns:1fr}}

/* --- Kennzeichen, DMS, Werkstattrechnung --- */
.split-media--anim{background:transparent;overflow:visible}
.dm{display:block;width:100%;height:auto}

/* --- Ladekurve --- */
.erk-kurve{background:#fff;border:1px solid var(--line);border-radius:3px;padding:16px 18px}
.lk{display:block;width:100%;height:auto;overflow:visible}

/* --- Breite Diagramme auf dem Telefon: lieber schieben als unlesbar schrumpfen --- */
@media (max-width:760px){
.erk-kurve,.thg-tafel,.erk-roamtafel{overflow-x:auto;-webkit-overflow-scrolling:touch}
.erk-kurve .lk{min-width:620px}
.thg-tafel .tg{min-width:580px}
.erk-roamtafel .rm{min-width:660px}
}

/* --- Schalter: Ladeinfrastruktur vorhanden oder zu beschaffen --- */
.ang-schalter{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.ang-sb{font:500 .8rem/1 var(--f-body);padding:9px 14px;border:1px solid var(--line);background:#fff;color:#69727D;border-radius:999px;cursor:pointer;transition:all .16s}
.ang-sb:hover{border-color:#B6BEC8;color:var(--ink)}
.ang-sb[aria-pressed="true"]{background:var(--red-soft);border-color:#E4BDC1;color:var(--red);font-weight:600}
.ang[data-hw="0"] .feld--preis{display:none}

/* --- Berechnung per E-Mail --- */
.ang-mail{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(18px,3vw,40px);align-items:start;background:#fff;border:1px solid var(--line);border-radius:3px;padding:22px}
.ang-mail h3{margin:0 0 7px;font:700 1.1rem/1.25 var(--f-display);color:var(--ink)}
.ang-mail p{margin:0;font:400 .9rem/1.6 var(--f-body);color:var(--ink-2)}
.ang-mail-feld{display:grid;gap:14px;justify-items:start}
.ang-mail-feld .feld{width:100%;padding:0;gap:7px}
.ang-mail-feld .feld>span{font:500 .86rem/1.4 var(--f-body);letter-spacing:0;text-transform:none;color:var(--ink-2)}
.ang-mail-feld .feld input{width:100%;font:400 1rem/1.4 var(--f-body);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:2px;padding:14px 14px}
.ang-mail-feld .feld input:focus{outline:none;border-color:var(--red)}
.ang-mail-feld .btn{justify-self:start}
.ang-mail-ok{margin:0;font:500 .86rem/1.5 var(--f-body);color:var(--ok)}
.ang-mail-ok.ist-fehler{color:var(--red)}
.ang-mail-ok[hidden]{display:none}
@media (max-width:760px){.ang-mail{grid-template-columns:1fr}}

/* --- Jede Ladekarte funktioniert --- */
.erk-karten{display:grid;gap:12px;width:100%;--kf:#9E1723}
.erk-karten[data-f="roam"]{--kf:#1F5FA8}
.erk-karten[data-f="vertrag"]{--kf:#2F7F5C}
.kt-l{font:500 .64rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#9AA3AE}
.kt-gitter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.kt-k{display:grid;gap:2px;text-align:left;padding:9px 11px;border:1px solid var(--line);background:#fff;border-radius:3px;cursor:pointer;transition:all .16s;min-width:0}
.kt-k b{font:600 .86rem/1.2 var(--f-display);color:var(--ink);overflow-wrap:anywhere}
.kt-k small{font:400 .67rem/1.3 var(--f-mono);color:#9AA3AE}
.kt-k:hover{border-color:#B6BEC8}
.kt-k[aria-pressed="true"]{border-color:var(--kf);background:color-mix(in srgb,var(--kf) 7%,#fff)}
.kt-k[aria-pressed="true"] b{color:var(--kf)}
.kt-saeule{display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:3px;padding:14px 16px}
.kt-svg{width:92px;height:auto}
.kt-anzeige{display:grid;gap:3px;min-width:0}
.kt-frei{font:600 .62rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ok)}
.kt-anzeige b{font:700 1.02rem/1.2 var(--f-display);color:var(--ink)}
.kt-weg{font:500 .68rem/1 var(--f-mono);letter-spacing:.05em;color:var(--kf)}
.kt-anzeige p{margin:4px 0 0;font:400 .82rem/1.55 var(--f-body);color:#69727D}
.kt-fuss{margin:0;font:400 .82rem/1.55 var(--f-body);color:#8D96A1}
.kt-neu .kt-led{animation:ktLed .9s ease-out}
.kt-neu .kt-balken{animation:ktBalken .8s cubic-bezier(.22,.8,.3,1)}
@keyframes ktLed{0%{opacity:.2;r:3}60%{opacity:1;r:9}100%{opacity:1;r:7}}
@keyframes ktBalken{0%{width:0}100%{width:48px}}
@media (prefers-reduced-motion:reduce){.kt-neu .kt-led,.kt-neu .kt-balken{animation:none}}
@media (max-width:420px){.kt-gitter{grid-template-columns:1fr}.kt-saeule{grid-template-columns:1fr;justify-items:start}}

/* --- Unterlagen anfordern --- */
.erk-unterlagen{display:grid;gap:16px}
.ul-l{font:500 .68rem/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:#9AA3AE}
.ul-gitter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ul-d{position:relative;display:grid;gap:6px;align-content:start;text-align:left;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:3px;cursor:pointer;transition:all .16s}
.ul-d:hover{border-color:#B6BEC8}
.ul-d b{font:600 1rem/1.3 var(--f-display);color:var(--ink);padding-right:26px}
.ul-d small{font:400 .84rem/1.55 var(--f-body);color:#8D96A1}
.ul-ico{justify-self:start;font:700 .62rem/1 var(--f-mono);letter-spacing:.1em;color:var(--red);background:var(--red-soft);padding:5px 8px;border-radius:2px}
.ul-haken{position:absolute;top:16px;right:16px;width:20px;height:20px;border:1.5px solid var(--line);border-radius:50%;transition:all .16s}
.ul-d[aria-pressed="true"]{border-color:var(--red);background:#FFFCFC}
.ul-d[aria-pressed="true"] .ul-haken{border-color:var(--red);background:var(--red)}
.ul-d[aria-pressed="true"] .ul-haken::after{content:"";position:absolute;left:4px;top:9px;width:6px;height:2px;background:#fff;border-radius:1px;transform:rotate(45deg)}
.ul-d[aria-pressed="true"] .ul-haken::before{content:"";position:absolute;left:7px;top:11px;width:10px;height:2px;background:#fff;border-radius:1px;transform:rotate(-50deg)}
.ul-form{background:#fff;border:1px solid var(--line);border-radius:3px;padding:22px;display:grid;gap:16px;justify-items:start}
.ul-hin{margin:0;font:400 .92rem/1.65 var(--f-body);color:var(--ink-2);max-width:84ch}
.ul-felder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:100%}
.ul-f{display:grid;gap:7px;min-width:0}
.ul-f>span{font:500 .86rem/1.4 var(--f-body);color:var(--ink-2)}
.ul-f input{width:100%;font:400 1rem/1.4 var(--f-body);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:2px;padding:14px}
.ul-f input:focus{outline:none;border-color:var(--red)}
.ul-ok{margin:0;font:500 .9rem/1.5 var(--f-body);color:var(--ok)}
.ul-ok.ist-fehler{color:var(--red)}
.ul-ok[hidden]{display:none}
@media (max-width:900px){.ul-gitter{grid-template-columns:repeat(2,minmax(0,1fr))}.ul-felder{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ul-gitter,.ul-felder{grid-template-columns:1fr}}

/* --- Ausnahme: eine Hero-Zeile im Grün der Einsparung --- */
.hero h1 .hl.hl--gruen{color:var(--ok)}

/* --- Kontaktformular --- */
.kontaktform{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(26px,4vw,56px);align-items:start}
.kf-daten{display:grid;gap:5px;margin-top:26px;font:400 .95rem/1.6 var(--f-body);color:var(--ink-2)}
.kf-daten b{font:700 1rem/1.4 var(--f-display);color:var(--ink)}
.kf-daten a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.kf-daten a:hover{color:var(--red)}
.kf-daten span{color:var(--muted)}
.kf-form{background:#fff;border:1px solid var(--line);border-radius:3px;padding:26px;display:grid;gap:18px}
.kf-felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.kf-f{display:grid;gap:7px;min-width:0}
.kf-f--voll{grid-column:1/-1}
.kf-f>span{font:500 .86rem/1.4 var(--f-body);color:var(--ink-2)}
.kf-f input,.kf-f select,.kf-f textarea{width:100%;font:400 1rem/1.4 var(--f-body);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:2px;padding:13px 14px}
.kf-f textarea{resize:vertical;min-height:104px}
.kf-f input:focus,.kf-f select:focus,.kf-f textarea:focus{outline:none;border-color:var(--red)}
.kf-f textarea::placeholder{color:#B4BCC5}
.kf-l{font:500 .68rem/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:#9AA3AE}
.kf-wuensche{display:flex;flex-wrap:wrap;gap:7px}
.kf-w{font:500 .84rem/1 var(--f-body);padding:10px 14px;border:1px solid var(--line);background:#fff;color:#69727D;border-radius:999px;cursor:pointer;transition:all .16s}
.kf-w:hover{border-color:#B6BEC8;color:var(--ink)}
.kf-w[aria-pressed="true"]{background:var(--red-soft);border-color:#E4BDC1;color:var(--red);font-weight:600}
.kf-ab{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.kf-ab small{font:400 .78rem/1.4 var(--f-body);color:#9AA3AE}
.kf-hin{margin:0;font:400 .84rem/1.6 var(--f-body);color:#8D96A1;max-width:72ch}
.kf-ok{margin:0;font:500 .92rem/1.5 var(--f-body);color:var(--ok)}
.kf-ok.ist-fehler{color:var(--red)}
.kf-ok[hidden]{display:none}
@media (max-width:900px){.kontaktform{grid-template-columns:1fr}}
@media (max-width:560px){.kf-felder{grid-template-columns:1fr}.kf-form{padding:18px}}

/* --- Rechtliche Verweise im Fuss --- */
.foot-recht{display:flex;flex-wrap:wrap;gap:8px 22px;padding:22px 0 0;margin-top:26px;border-top:1px solid var(--slate-line)}
.foot-recht a{font:400 .84rem/1.5 var(--f-body);color:var(--slate-muted);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.foot-recht a:hover{color:#fff}

/* --- Rechtstexte: Datenschutz, AGB, Waschkuechen-Service --- */
.rechtstext{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:clamp(26px,4vw,64px);align-items:start}
.rt-stand{margin:-10px 0 26px;font:500 .74rem/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:#9AA3AE}
.rt-toc{position:sticky;top:96px;display:grid;gap:3px;max-height:calc(100vh - 140px);overflow-y:auto;padding-right:8px}
.rt-toc-l{font:500 .68rem/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:#9AA3AE;padding-bottom:9px}
.rt-toc a{display:flex;gap:8px;font:400 .84rem/1.45 var(--f-body);color:var(--ink-2);text-decoration:none;padding:5px 0;border-bottom:1px solid transparent}
.rt-toc a:hover{color:var(--red)}
.rt-toc a i{flex:0 0 auto;font-style:normal;font:500 .76rem/1.6 var(--f-mono);color:#B4BCC5;min-width:16px}
.rt-doc{min-width:0;max-width:78ch}
.rt-s{padding-bottom:26px;scroll-margin-top:104px}
.rt-s + .rt-s{border-top:1px solid var(--line);padding-top:26px}
.rt-s h3{display:flex;gap:12px;margin:0 0 14px;font:700 1.18rem/1.35 var(--f-display);color:var(--ink)}
.rt-s h3 span{flex:0 0 auto;font:500 .9rem/1.8 var(--f-mono);color:var(--red)}
.rt-s p{margin:0 0 13px;font:400 .95rem/1.72 var(--f-body);color:var(--ink-2)}
.rt-s p:last-child{margin-bottom:0}
.rt-s a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;word-break:break-word}
.rt-s a:hover{color:var(--red)}
.rt-sub{margin:20px 0 10px;font:600 .95rem/1.45 var(--f-display);color:var(--ink)}
.rt-li{margin:0 0 13px;padding-left:19px;display:grid;gap:7px}
.rt-li li{font:400 .95rem/1.66 var(--f-body);color:var(--ink-2)}
.rt-li li::marker{color:#C3CAD2}
.rt-fest{margin:0 0 14px;padding:14px 16px;background:var(--paper-2,#F6F7F8);border-left:2px solid var(--red);font:400 .9rem/1.62 var(--f-mono);color:var(--ink-2);white-space:pre-line;overflow-x:auto}
@media (max-width:900px){
.rechtstext{grid-template-columns:1fr;gap:26px}
.rt-toc{position:static;max-height:none;overflow:visible;border-bottom:1px solid var(--line);padding-bottom:16px}
.rt-toc a{padding:4px 0}
}

.thg-fuss{margin:10px 0 0;font:400 .8rem/1.55 var(--f-body);color:#9AA3AE;max-width:76ch}

/* --- Blogbeitrag im Seitendesign --- */
/* Keine kuenstliche Verengung: die Ueberschrift nutzt die Spaltenbreite */
.artikel-kopf h1{max-width:none}
.artikel-kopf .lede{max-width:72ch}
.artikel-kopf h1{margin:14px 0 0}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:500 .74rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#9AA3AE}
.art-bild{margin:38px 0 0;max-width:74ch;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--surface)}
/* vollstaendiges Bild, kein Beschnitt - sonst fehlen Koepfe */
.art-bild img{display:block;width:100%;height:auto}
.artikel{margin-top:38px;max-width:66ch;font:400 1.02rem/1.78 var(--f-body);color:var(--ink-2)}
.artikel > *:first-child{margin-top:0}
.artikel p{margin:0 0 18px}
.artikel h2{margin:38px 0 14px;font:700 1.55rem/1.3 var(--f-display);color:var(--ink);max-width:28ch}
.artikel h3{margin:30px 0 12px;font:700 1.18rem/1.38 var(--f-display);color:var(--ink)}
.artikel h4{margin:24px 0 10px;font:600 1.02rem/1.4 var(--f-display);color:var(--ink)}
.artikel h2 strong,.artikel h3 strong,.artikel h4 strong{font-weight:inherit}
.artikel ul,.artikel ol{margin:0 0 20px;padding-left:21px;display:grid;gap:9px}
.artikel li{line-height:1.7}
.artikel li::marker{color:#C3CAD2}
.artikel a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;word-break:break-word}
.artikel a:hover{color:var(--red)}
.artikel strong,.artikel b{color:var(--ink);font-weight:600}
.artikel img{display:block;max-width:100%;height:auto;margin:26px 0;border:1px solid var(--line);border-radius:3px}
.artikel blockquote{margin:26px 0;padding:4px 0 4px 20px;border-left:2px solid var(--red);font:400 1.1rem/1.65 var(--f-display);color:var(--ink)}
.artikel hr{margin:32px 0;border:0;border-top:1px solid var(--line)}
.artikel table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.93rem}
.artikel th,.artikel td{padding:11px 13px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.artikel th{font:600 .72rem/1.3 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:#8D96A1}
.art-tab{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0}
.art-tab table{margin:0}
.art-quelle{margin:28px 0 0;font:400 .88rem/1.6 var(--f-body)}
.art-quelle a{color:#8D96A1;text-decoration:underline;text-underline-offset:3px}
.art-quelle a:hover{color:var(--red)}
@media (max-width:760px){
.artikel-kopf h1{max-width:none}
.artikel{font-size:1rem}
.artikel h2{font-size:1.32rem}
.art-tab table{min-width:520px}
}

/* --- Zustimmung zu Besuchsmessung --- */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:90;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(26,29,35,.09)}
.ck[hidden]{display:none}
.ck-in{max-width:1180px;margin:0 auto;padding:20px clamp(16px,4vw,40px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 32px;align-items:center}
.ck-txt b{display:block;font:700 1rem/1.4 var(--f-display);color:var(--ink);margin-bottom:5px}
.ck-txt p{margin:0;font:400 .88rem/1.6 var(--f-body);color:var(--ink-2);max-width:88ch}
.ck-txt a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ck-txt a:hover{color:var(--red)}
.ck-knoepfe{display:flex;gap:10px;flex-wrap:wrap}
.ck-knoepfe .btn{white-space:nowrap}
.ck-auf{font:400 .84rem/1.5 var(--f-body);color:var(--slate-muted);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ck-auf:hover{color:#fff}
@media (max-width:700px){
.ck-in{grid-template-columns:1fr;gap:14px;padding:16px}
.ck-knoepfe .btn{flex:1 1 auto;justify-content:center;text-align:center}
.ck-txt p{font-size:.84rem}
}

/* --- Bilder im Beitrag mit Bildunterschrift --- */
.artikel figure{margin:28px 0;padding:0}
/* width:100% statt auto - mit width:auto faellt ein noch nicht geladenes
   Bild auf null zusammen und das verzoegerte Laden loest nie aus. */
.artikel figure img{margin:0;display:block;width:100%;height:auto}
/* Hochformat wuerde sonst ueber 1100 px hoch: Figur schmaeler setzen */
.artikel figure.hoch{max-width:380px}
.artikel figcaption{margin-top:10px;font:400 .85rem/1.6 var(--f-body);color:#8D96A1;max-width:62ch}

/* ---------------- Beitrag: Kennzahlen, Inhalt, nummerierte Abschnitte ---- */
.art-zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:30px 0 0;
  max-width:74ch;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.art-zahlen>div{background:var(--white);padding:17px 19px}
.art-zahlen b{display:block;font:700 1.4rem/1.2 var(--f-display);color:var(--ink)}
.art-zahlen span{display:block;margin-top:3px;font:400 .82rem/1.45 var(--f-body);color:var(--muted)}
@media (max-width:760px){.art-zahlen{grid-template-columns:repeat(2,1fr)}
  .art-zahlen b{font-size:1.2rem}}

.art-inhalt{margin:30px 0 0;max-width:74ch;padding:19px 23px;
  border:1px solid var(--line);border-radius:3px;background:var(--surface)}
.art-inhalt b{font:500 .72rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#9AA3AE}
.art-inhalt ol{margin:13px 0 0;padding:0;list-style:none;counter-reset:ai;columns:2;column-gap:34px}
.art-inhalt li{counter-increment:ai;margin:0 0 8px;break-inside:avoid;
  font:400 .93rem/1.5 var(--f-body);display:flex;gap:9px}
.art-inhalt li::before{content:counter(ai,decimal-leading-zero);flex:none;
  font:500 .78rem/1.75 var(--f-mono);color:#B6BDC6;font-variant-numeric:tabular-nums}
.art-inhalt a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
.art-inhalt a:hover{color:var(--ink);border-bottom-color:var(--red)}
@media (max-width:760px){.art-inhalt ol{columns:1}}

/* Nummerierte Abschnitte. Welche Ebene gliedert, entscheidet der Renderer:
   --n2 bei eigenen Beitraegen, --n3 bei den aus HubSpot uebernommenen. */
.artikel--n2,.artikel--n3{counter-reset:ab}
.artikel--n2 > h2,.artikel--n3 > h3{counter-increment:ab;margin:48px 0 14px;
  padding-top:24px;border-top:1px solid var(--line);max-width:none}
.artikel--n2 > h2 > span{display:block;max-width:28ch}
.artikel--n3 > h3 > span{display:block;max-width:38ch}
.artikel--n2 > h2::before,.artikel--n3 > h3::before{content:counter(ab,decimal-leading-zero);
  display:block;margin-bottom:9px;font:500 .72rem/1 var(--f-mono);letter-spacing:.08em;color:var(--red)}
.artikel--n2 > h2:first-child,.artikel--n3 > h3:first-child{margin-top:0;padding-top:0;border-top:0}

/* Querverweis auf eine Seite, die an dieser Stelle weiterhilft */
.art-mehr{margin:32px 0;padding:21px 23px;border:1px solid var(--line);
  border-left:2px solid var(--red);border-radius:0 3px 3px 0;background:var(--surface)}
.art-mehr b{display:block;font:700 1.02rem/1.4 var(--f-display);color:var(--ink)}
.art-mehr p{margin:7px 0 15px;font:400 .95rem/1.65 var(--f-body);color:var(--ink-2)}
/* im Fliesstext sind Links unterstrichen - der Knopf ist keiner */
.art-mehr .btn{margin:0;text-decoration:none}
.art-mehr .btn:hover{text-decoration:none}

/* ---------------- Schluesselsatz ---------------------------------------
   Der Satz steht woertlich auch im Text - hier nur gross vorweggenommen.
   Bewusst ohne Anfuehrungszeichen: in Beitraegen mit echten Kundenzitaten
   soll er nicht wie die Aussage einer Person wirken. aria-hidden, damit
   Screenreader ihn nicht zweimal vorlesen. */
.art-zitat{margin:40px 0;padding:24px 0;max-width:74ch;
  border-top:1px solid var(--red);border-bottom:1px solid var(--red);
  font:700 1.34rem/1.48 var(--f-display);color:var(--ink);
  text-wrap:balance}
.art-zitat strong,.art-zitat b{font-weight:inherit}
@media (max-width:760px){.art-zitat{margin:32px 0;padding:20px 0;font-size:1.14rem}}

/* ---------------- Systembild Depot-Laden ------------------------------- */
.depot-bild{background:#fff;border:1px solid var(--line);border-radius:3px;
  padding:18px 20px;max-width:620px;margin:0 auto}
.depot-bild .tc{display:block;width:100%;height:auto}
@media (max-width:620px){.depot-bild{padding:12px 10px}}

/* ---------------- Menue: Gruppen als Spalten -------------------------- */
/* Am Desktop stehen Software und Hardware nebeneinander. Unter 1080 px
   klappt die Navigation ohnehin ins Burger-Menue, dort bleibt es gestapelt. */
.dropdown{flex-direction:row;align-items:flex-start}
.dd-grp{display:flex;flex-direction:column;gap:1px;min-width:260px}
/* Das letzte Menue liegt am rechten Rand - seine Klappe oeffnet nach links,
   sonst steht sie bei knapp 1080 px ueber den Bildschirmrand hinaus. */
.navitem:last-child .dropdown{left:auto;right:-8px}
.dd-grp + .dd-grp{margin-left:7px;padding-left:8px;border-left:1px solid var(--line)}
@media (max-width:1080px){
  .dropdown{flex-direction:column}
  .dd-grp + .dd-grp{margin-left:0;padding-left:0;border-left:0}
}

/* ---------------- ROI-Rechner: einklappbare Bereiche ------------------- */
/* Die Bereichsueberschrift war winzig, grau und in Versalien - als
   Klappleiste braucht sie Gewicht und Kontrast. */
.ang-gruppe{padding:0;display:block}
summary.ang-g-l{display:flex;align-items:baseline;gap:12px;cursor:pointer;
  padding:15px 16px;margin:0;list-style:none;
  font:inherit;letter-spacing:0;text-transform:none;color:inherit;
  transition:background .14s ease}
summary.ang-g-l::-webkit-details-marker{display:none}
summary.ang-g-l:hover{background:var(--surface)}
summary.ang-g-l:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.ang-g-t{font:700 1.02rem/1.3 var(--f-display);color:var(--ink);flex:none}
.ang-g-kurz{font:500 .78rem/1.4 var(--f-mono);color:var(--muted);
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ang-gruppe[open] .ang-g-kurz{opacity:0;transition:opacity .12s ease}
/* Der Pfeil steht links vor dem Titel und ist kraeftig rot - rechts und
   grau wurde er uebersehen, und damit auch der Inhalt dahinter. */
.ang-g-pf{flex:none;width:17px;text-align:center;
  font:700 1.24rem/1 var(--f-body);color:var(--red)}
/* Zwei eigene Zeichen statt eines gedrehten Rahmens: ein um 45 Grad
   gedrehter Rahmen liest sich aufgeklappt wie ein Haekchen. */
.ang-g-pf::before{content:'▸'}
.ang-gruppe[open] .ang-g-pf::before{content:'▾'}
summary.ang-g-l:hover .ang-g-pf{color:var(--red-dark)}
.ang-g-koerper{padding:0 16px 16px;display:grid;gap:12px}
@media (max-width:560px){
  summary.ang-g-l{flex-wrap:wrap;gap:4px 10px}
  .ang-g-kurz{flex-basis:100%;white-space:normal}
}

/* Ladepunkte gesamt - Ergebniszeile in der Hardware-Box */
.ang-summe{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;
  margin-top:4px;padding:13px 15px;background:var(--surface);
  border:1px solid var(--line);border-radius:3px}
.ang-summe-l{font:400 .82rem/1.3 var(--f-body);color:var(--ink-2)}
.ang-summe b{font:700 1.3rem/1 var(--f-display);color:var(--red);
  font-variant-numeric:tabular-nums}
.ang-summe-h{font:400 .76rem/1.4 var(--f-body);color:var(--muted);flex:1;min-width:0}