/* CallButler - gemeinsames Stylesheet, erzeugt aus den neun Inline-Varianten der Seiten.
   Wird als Datei unter /stil/cb-stil.css ausgeliefert; die Seiten tragen nur noch einen Verweis.
   Bloecke: 237 - erzeugt am 2026-09-09 aus 310 Seiten (v2, Selektor-Vergleich berichtigt). */
:root{--ink:#0B1220;--indigo:#4F46E5;--cyan:#22D3EE;--mint:#2DE1B4;--cloud:#F6F8FC;--slate:#5B6A80;--line:#E7ECF5;--wrap:1080px}
*{box-sizing:border-box}
main a:not(.btn){color:var(--indigo);text-underline-offset:2px}
main a:not(.btn):hover{color:var(--ink)}
.hubliste{position:relative;overflow:hidden;background:var(--ink,#0B1220);border-radius:26px;padding:36px 28px;margin:48px 0 22px}
.hubliste::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 380px at 82% -12%,rgba(99,102,241,.20),transparent 62%),radial-gradient(560px 320px at -8% 108%,rgba(34,211,238,.13),transparent 60%);pointer-events:none}
.hubliste h2{position:relative;color:#fff;font-size:19px;line-height:1.3;margin:0 0 22px;font-family:'Space Grotesk',system-ui,sans-serif}
.hubliste h3{position:relative;margin:24px 0 12px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#94A3B8}
.hubliste ul{position:relative;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.hubliste li{margin:0;display:flex}
main .hubliste li a{display:flex;align-items:center;gap:12px;width:100%;padding:15px;border-radius:15px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);color:#E8ECF6;font-size:14px;font-weight:600;line-height:1.25;text-decoration:none;transition:transform .22s,background .22s,border-color .22s}
main .hubliste li a::before{content:"";flex:none;width:38px;height:38px;border-radius:11px;border:1px solid rgba(45,225,180,.22);background:rgba(45,225,180,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232DE1B4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/19px 19px no-repeat;transition:box-shadow .22s}
main .hubliste li a:hover{background:rgba(255,255,255,.09);border-color:rgba(45,225,180,.45);transform:translateY(-3px);color:#fff;text-decoration:none}
main .hubliste li a:hover::before{box-shadow:0 0 18px rgba(45,225,180,.35)}
main .hubliste li a:focus-visible{outline:2px solid #2DE1B4;outline-offset:2px}
@media(max-width:640px){.hubliste{padding:24px 15px;border-radius:18px}.hubliste ul{grid-template-columns:1fr;gap:9px}main .hubliste li a{padding:13px;gap:10px}}
@media(prefers-reduced-motion:reduce){main .hubliste li a{transition:none}main .hubliste li a:hover{transform:none}}
main .bk .bk-t{color:#E8ECF6}
main .bk .bk-t:hover{color:#fff}
main .bk .bk-cta{color:#fff}
body{margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.65}
.nav{display:flex;align-items:center;justify-content:space-between;max-width:var(--wrap);margin:0 auto;padding:16px 40px;position:relative}
.navright{display:flex;align-items:center;gap:12px}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;background:none;border:1px solid var(--line);border-radius:10px;cursor:pointer;padding:0 11px}
.burger span{display:block;height:2px;background:var(--ink);border-radius:2px}
.mobmenu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex-direction:column;padding:8px 24px 18px;box-shadow:0 16px 34px -14px rgba(11,18,32,.28);z-index:30}
.mobmenu.open{display:flex}
.mobmenu a{padding:13px 2px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);font-family:'Space Grotesk';font-weight:500;font-size:15px}
.mobmenu a.btn{color:#fff;border:none;margin-top:12px;text-align:center;font-weight:600}
.brand{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk';font-weight:700;font-size:20px}
.brand b{color:var(--indigo)}
.navlinks{display:flex;gap:22px;font-size:14px;color:var(--slate)}
.navlinks a{color:var(--slate);text-decoration:none}
.btn{background:var(--indigo);color:#fff;font-weight:600;font-size:14px;padding:11px 18px;border-radius:10px;border:none;text-decoration:none;display:inline-block;white-space:nowrap}
.slider{position:relative;height:auto;min-height:460px;overflow:hidden;border-top:1px solid var(--line);display:flex;align-items:center}
.slide{position:absolute;inset:0;background-size:cover;background-position:right center;opacity:0;transition:opacity.8s}
.slide.active{opacity:1}
.slide:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,18,32,.44) 0%,rgba(11,18,32,.20) 45%,transparent 75%)}
.hero-wrap{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;padding:36px 40px;display:flex;align-items:center}
.badge{position:absolute;top:20px;left:50%;transform:translateX(-540px);z-index:3;background:rgba(255,255,255,.70);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);border:1px solid rgba(255,255,255,.5);color:var(--ink);font-family:'Space Grotesk';font-weight:600;font-size:12px;padding:8px 12px;border-radius:999px}
.badge:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mint);margin-right:7px;vertical-align:middle}
.shead{color:#fff;max-width:560px;background:rgba(11,18,32,.32);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:24px 26px;box-shadow:0 20px 50px -20px rgba(0,0,0,.5)}
.shead.pill{display:inline-flex;font-family:'Space Grotesk';font-size:12px;color:var(--mint);background:rgba(45,225,180,.10);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(45,225,180,.45);border-radius:999px;padding:6px 12px}
.shead h1{font-family:'Space Grotesk';font-weight:700;font-size:36px;margin:16px 0 12px;line-height:1.12;text-wrap:balance}
.shead p{color:#D4DCF0;font-size:16px;margin:0 0 18px;max-width:460px}
.dots{position:absolute;bottom:16px;left:50%;transform:translateX(480px);display:flex;gap:7px;z-index:3}
.dot{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.5);cursor:pointer}
.dot.on{background:var(--mint)}
main{max-width:var(--wrap);margin:0 auto;padding:44px 40px}
h2{font-family:'Space Grotesk';font-weight:700;font-size:25px;line-height:1.2;margin:26px 0 16px;text-wrap:balance}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{background:var(--cloud);border:1px solid var(--line);border-radius:16px;padding:22px}
.step.n{width:34px;height:34px;border-radius:10px;background:var(--ink);color:#fff;font-family:'Space Grotesk';font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.step h3{font-family:'Space Grotesk';font-size:16px;margin:0 0 6px}
.step p{font-size:14px;color:var(--slate);margin:0}
.ctabox{background:linear-gradient(135deg,rgba(99,102,241,.10),rgba(45,225,180,.10));border:1px solid var(--line);border-left:4px solid var(--indigo);border-radius:16px;padding:22px 24px;margin:24px 0}
.ctabox p{margin:0 0 14px;font-size:16px;color:var(--ink)}
.band{height:240px;background-size:cover;background-position:center;border-radius:16px;margin:28px 0;position:relative;overflow:hidden}
.band:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,18,32,.28),transparent 60%)}
.band.q{position:absolute;z-index:2;left:26px;top:50%;transform:translateY(-50%);color:#fff;font-family:'Space Grotesk';font-size:20px;max-width:520px;line-height:1.35;background:rgba(11,18,32,.30);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px 22px}
.split{display:flex;gap:26px;align-items:center;margin:28px 0}
.split img{width:48%;height:auto;border-radius:14px;display:block}
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
.plan{border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column}
.plan.hl{border:2px solid var(--indigo)}
.plan.pn{font-family:'Space Grotesk';font-weight:600;font-size:17px}
.plan.pr{font-family:'Space Grotesk';font-weight:700;font-size:30px;margin:8px 0 2px}
.plan.pr small{font-size:13px;color:var(--slate);font-weight:500}
.plan.chf{font-size:12px;color:var(--slate)}
.plan ul{list-style:none;padding:0;margin:14px 0;font-size:14px;color:var(--slate);flex:1}
.plan li{padding:5px 0 5px 20px;position:relative}
.plan li:before{content:"✓";position:absolute;left:0;color:var(--mint);font-weight:700}
.foot{background:var(--ink);color:#9FB0D6;position:relative}
.foot:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#6366F1,#22D3EE,#2DE1B4)}
.footin{max-width:var(--wrap);margin:0 auto;padding:52px 40px 30px;display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:30px}
.fcol h4{font-family:'Space Grotesk';font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 16px}
.fcol a{display:block;color:#9FB0D6;text-decoration:none;font-size:14px;padding:6px 0;transition:color.15s}
.fcol a:hover{color:#2DE1B4}
.fbrand.flogo{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk';font-weight:700;font-size:20px;color:#fff}
.fbrand.flogo b{color:#22D3EE}
.fbrand p{font-size:14px;color:#9FB0D6;margin:14px 0 16px;max-width:280px;line-height:1.6}
.fcontact{font-size:14px;line-height:1.9}
.fcontact a{color:#C7D2EC;text-decoration:none}
.fcontact a:hover{color:#2DE1B4}
.fbadge{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-family:'Space Grotesk';font-size:12px;color:#2DE1B4;border:1px solid rgba(45,225,180,.4);border-radius:999px;padding:6px 12px}
.fbar{border-top:1px solid rgba(255,255,255,.08);max-width:var(--wrap);margin:0 auto;padding:18px 40px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:12px;color:#7E8CB0;flex-wrap:wrap}
.fbar a{color:#7E8CB0;text-decoration:none}
.fbar a:hover{color:#2DE1B4}
@media(max-width:1000px){.badge{left:20px;transform:none}.dots{right:20px;left:auto;transform:none}.shead h1{font-size:28px}}
@media(max-width:820px){.nav{padding:12px 16px;gap:10px}.brand{font-size:17px;gap:8px}.nav-cta{display:none}.burger{display:flex}.slider{height:auto;min-height:520px}.slide{background-position:70% center}.hero-wrap{position:relative;padding:96px 20px 40px;align-items:flex-start}.badge{position:absolute;left:20px;top:18px;transform:none;font-size:11px;max-width:calc(100% - 40px)}.dots{left:50%;right:auto;transform:translateX(-50%);bottom:16px}.shead{max-width:100%;padding:20px}.shead h1{font-size:26px;line-height:1.16}.shead p{font-size:14px;max-width:100%}
 h2{font-size:21px;line-height:1.22}.steps,.prices{grid-template-columns:1fr}.split{flex-direction:column}.split img{width:100%;height:auto}.band.q{font-size:18px;left:20px;right:20px;max-width:none}.footin{grid-template-columns:1fr 1fr;gap:24px;padding:36px 24px 22px}.fbrand{grid-column:1 / -1}.fbar{flex-direction:column;align-items:flex-start;padding:16px 24px}.navlinks{display:none}}
.brand{text-decoration:none;color:inherit;cursor:pointer}
.brand:hover{opacity:.85}
.brand:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:6px}
.autor{font-size:13.5px;color:var(--slate);border-top:1px solid var(--line);padding-top:14px;margin-top:26px}
.topbar{background:var(--ink);color:#D4DCF0;font-family:'Space Grotesk',system-ui,sans-serif;font-size:13px;text-align:center;padding:9px 16px;line-height:1.4}
.topbar a{color:#fff;font-weight:600;text-decoration:none;white-space:nowrap}
.topbar a:hover{text-decoration:underline}
@media(max-width:640px){.topbar{font-size:12px;padding:8px 12px}}
.cb-call{position:relative;overflow:hidden;background:var(--ink,#0B1220);border-radius:22px;padding:22px;margin:22px 0;color:#E8ECF6;display:grid;grid-template-columns:1.35fr .9fr;gap:18px;align-items:start}
.cb-call::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 380px at 82% -12%,rgba(99,102,241,.22),transparent 62%),radial-gradient(560px 320px at -8% 108%,rgba(34,211,238,.14),transparent 60%);pointer-events:none}
.cb-call>*{position:relative;min-width:0}
.cb-main{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:16px}
.cb-head{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:14px}
.cb-av{flex:none;width:40px;height:40px;border-radius:11px;background:rgba(45,225,180,.12);border:1px solid rgba(45,225,180,.25);display:grid;place-items:center}
.cb-av svg{width:19px;height:19px;stroke:#2DE1B4;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cb-head b{display:block;font-size:14px;color:#fff}
.cb-head small{color:#94A3B8;font-size:12.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cb-live{width:8px;height:8px;border-radius:50%;background:#2DE1B4;animation:cbring 1.6s infinite}
@keyframes cbring{0%{box-shadow:0 0 0 0 rgba(45,225,180,.6)}70%{box-shadow:0 0 0 8px rgba(45,225,180,0)}100%{box-shadow:0 0 0 0 rgba(45,225,180,0)}}
.cb-wave{display:inline-flex;align-items:center;gap:3px;height:18px}
.cb-wave i{display:block;width:3px;height:6px;border-radius:2px;background:#2DE1B4;animation:cbwv 1s ease-in-out infinite}
.cb-wave i:nth-child(2){animation-delay:.12s}
.cb-wave i:nth-child(3){animation-delay:.24s}
.cb-wave i:nth-child(4){animation-delay:.36s}
.cb-wave i:nth-child(5){animation-delay:.48s}
.cb-wave.off i{animation:none;height:4px;opacity:.4}
@keyframes cbwv{0%,100%{height:5px}50%{height:18px}}
.cb-st{margin-left:auto;text-align:right;flex:none}
.cb-timer{display:block;font-family:'Space Grotesk',system-ui,sans-serif;font-size:21px;font-weight:600;color:#fff;line-height:1.1}
.cb-lbl{font-size:10.5px;color:#94A3B8;text-transform:uppercase;letter-spacing:.06em}
.cb-lines{display:flex;flex-direction:column;gap:10px}
.cb-b{max-width:84%;margin:0;padding:11px 15px;border-radius:15px;font-size:15px;line-height:1.5;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.cb-b.in,.cb-static .cb-b{opacity:1;transform:none}
.cb-sp{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px;opacity:.7}
.cb-ki{align-self:flex-start;border-bottom-left-radius:6px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);color:#E8ECF6}
.cb-an{align-self:flex-end;border-bottom-right-radius:6px;background:linear-gradient(135deg,rgba(99,102,241,.9),rgba(34,211,238,.85));color:#fff}
.cb-caret{display:inline-block;width:2px;height:1em;background:currentColor;vertical-align:-2px;margin-left:2px;animation:cbbl 1s steps(2) infinite}
@keyframes cbbl{50%{opacity:0}}
.cb-dots{display:inline-flex;gap:4px;align-items:center;height:1.5em}
.cb-dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;animation:cbdt 1.2s infinite}
.cb-dots i:nth-child(2){animation-delay:.2s}
.cb-dots i:nth-child(3){animation-delay:.4s}
@keyframes cbdt{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.cb-foot{display:flex;justify-content:center;margin-top:14px}
.cb-replay{appearance:none;font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:#E8ECF6;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 14px;display:inline-flex;align-items:center;gap:7px;transition:.15s}
.cb-replay:hover{border-color:rgba(45,225,180,.5);color:#fff}
.cb-replay:disabled{opacity:.45;cursor:default}
.cb-replay svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cb-note{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:18px}
.cb-note h4{font-family:'Space Grotesk',system-ui,sans-serif;font-size:14.5px;color:#fff;margin:0 0 10px;display:flex;align-items:center;gap:9px}
.cb-note h4 span{width:28px;height:28px;border-radius:8px;background:rgba(45,225,180,.12);border:1px solid rgba(45,225,180,.22);display:grid;place-items:center}
.cb-note h4 svg{width:14px;height:14px;stroke:#2DE1B4;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cb-f{display:grid;grid-template-columns:20px 1fr;gap:10px;padding:9px 0;border-top:1px solid rgba(255,255,255,.08);font-size:13.5px;line-height:1.45}
.cb-f:first-of-type{border-top:none}
.cb-ck{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(148,163,184,.4);display:grid;place-items:center;transition:.3s;margin-top:1px}
.cb-ck svg{width:11px;height:11px;stroke:#0B1220;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.4);transition:.3s}
.cb-f.done .cb-ck,.cb-static .cb-ck{background:#2DE1B4;border-color:#2DE1B4}
.cb-f.done .cb-ck svg,.cb-static .cb-ck svg{opacity:1;transform:none}
.cb-f.live .cb-ck{border-color:#22D3EE;box-shadow:0 0 0 4px rgba(34,211,238,.15);animation:cbpl 1.4s infinite}
@keyframes cbpl{50%{box-shadow:0 0 0 7px rgba(34,211,238,.05)}}
.cb-fv{color:#94A3B8;transition:color .3s}
.cb-f.done .cb-fv,.cb-static .cb-fv{color:#E8ECF6}
.cb-hand{margin-top:12px;padding:12px 14px;border-radius:12px;background:rgba(45,225,180,.08);border:1px dashed rgba(45,225,180,.35);font-size:13px;line-height:1.45;opacity:0;transform:translateY(6px);transition:.4s}
.cb-hand.in,.cb-static .cb-hand{opacity:1;transform:none}
.cb-hand b{color:#2DE1B4}
.cb-side{display:flex;flex-direction:column;gap:14px}
.cb-out{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:16px 18px;opacity:.35;transition:opacity .4s}
.cb-out.on,.cb-static .cb-out{opacity:1}
.cb-out h4{font-family:'Space Grotesk',system-ui,sans-serif;font-size:14.5px;color:#fff;margin:0 0 4px;display:flex;align-items:center;gap:9px}
.cb-out h4 span{width:28px;height:28px;border-radius:8px;background:rgba(99,102,241,.18);border:1px solid rgba(99,102,241,.35);display:grid;place-items:center;flex:none}
.cb-out h4 svg{width:14px;height:14px;stroke:#A5B4FC;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cb-out .sub{font-size:12px;color:#94A3B8;margin:0 0 10px}
.cb-step{display:grid;grid-template-columns:20px 1fr;gap:10px;padding:10px 0;border-top:1px solid rgba(255,255,255,.08);opacity:.35;transform:translateX(-4px);transition:.4s}
.cb-step.on,.cb-static .cb-step{opacity:1;transform:none}
.cb-step.on .cb-ck,.cb-static .cb-step .cb-ck{background:#2DE1B4;border-color:#2DE1B4}
.cb-step.on .cb-ck svg,.cb-static .cb-step .cb-ck svg{opacity:1;transform:none}
.cb-step .t{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#94A3B8;margin-bottom:5px}
.cb-step .body{font-size:13px;line-height:1.45;color:#E8ECF6}
.cb-person{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cb-person>span:nth-child(2){flex:1 1 150px;min-width:0}
.cb-ini{flex:none;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#6366F1,#22D3EE);display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff}
.cb-ini svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cb-person b{display:block;font-size:14px;color:#fff}
.cb-person small{display:block;color:#94A3B8;font-size:12px}
.cb-person small strong{color:#E8ECF6;font-weight:500;font-family:'Space Grotesk',system-ui,sans-serif;letter-spacing:.02em}
.cb-tag{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#2DE1B4;background:rgba(45,225,180,.1);border:1px solid rgba(45,225,180,.3);border-radius:999px;padding:2px 8px;margin-left:auto;white-space:nowrap}
.cb-sum{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.cb-sum li{display:flex;gap:7px}
.cb-sum li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:#2DE1B4;margin-top:8px}
.cb-cal{display:flex;gap:12px;align-items:center}
.cb-date{flex:none;width:52px;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.14);text-align:center;font-family:'Space Grotesk',system-ui,sans-serif}
.cb-date i{display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.08em;background:var(--indigo);color:#fff;padding:3px 0}
.cb-date b{display:block;font-size:20px;color:#fff;padding:4px 0 2px;line-height:1}
.cb-date small{display:block;font-size:10px;color:#94A3B8;padding-bottom:5px}
.cb-date svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin:6px auto 4px;display:block}
.cb-cal .body b{color:#fff;font-weight:600}
.cb-cal .body em{font-style:normal;color:#94A3B8;font-size:12px;display:block}
.cb-ch{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.cb-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:7px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#94A3B8;transition:.35s}
.cb-chip svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cb-chip .ok{width:16px;height:16px;border-radius:50%;background:#2DE1B4;display:grid;place-items:center;transform:scale(0);transition:.3s cubic-bezier(.2,.9,.3,1.4)}
.cb-chip .ok svg{width:9px;height:9px;stroke:#0B1220;stroke-width:3.5}
.cb-chip.on,.cb-static .cb-chip{color:#fff;border-color:rgba(45,225,180,.45);background:rgba(45,225,180,.08)}
.cb-chip.on .ok,.cb-static .cb-chip .ok{transform:scale(1)}
.cb-stamp{font-size:11.5px;color:#94A3B8;margin-top:8px}
.cb-stamp b{color:#2DE1B4;font-weight:600}
@media(max-width:820px){.cb-call{grid-template-columns:1fr;padding:16px;border-radius:18px}.cb-b{max-width:92%}}
@media(prefers-reduced-motion:reduce){.cb-call *{animation:none!important;transition:none!important}}
.wahl{position:relative;font-family:'Space Grotesk',system-ui,sans-serif}
.wahl>summary{list-style:none;display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;cursor:pointer;color:var(--slate);font-size:13.5px;font-weight:500;padding:7px 12px 7px 10px;line-height:1}
.wahl>summary::-webkit-details-marker{display:none}
.wahl>summary::marker{content:''}
.wahl>summary:hover,.wahl[open]>summary{border-color:#CBD5E8;color:var(--ink)}
.wahl>summary:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.wahl .chev{width:10px;height:10px;flex:none;transition:transform .18s}
.wahl[open] .chev{transform:rotate(180deg)}
.wahl .globe{width:16px;height:16px;flex:none;opacity:.75}
.wahl.land>summary{padding:3px;gap:0}
.wahl .fahne{width:30px;height:30px;display:block;border-radius:999px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(11,18,32,.10)}
.wahlmenu{position:absolute;top:calc(100% + 10px);right:0;min-width:226px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 44px -18px rgba(11,18,32,.34);padding:7px;z-index:60}
.wahlmenu p.t{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--slate);padding:8px 10px 6px;margin:0}
.wahlmenu a,.wahlmenu span.ist,.wahlmenu span.aus{display:flex;align-items:center;gap:10px;border-radius:10px;padding:9px 10px;font-size:14px;color:var(--ink);text-decoration:none}
.wahlmenu a:hover{background:var(--cloud)}
.wahlmenu span.ist{font-weight:600}
.wahlmenu span.aus{color:#A9B4C6}
.wahlmenu .fahne{width:22px;height:22px}
.wahlmenu .k{margin-left:auto;font-size:12px;color:var(--slate);letter-spacing:.04em}
.wahlmenu span.ist .k::after{content:'\2713';margin-left:7px;color:var(--indigo);font-weight:700}
.wahlmenu span.aus .k{color:#C2CBDA}
.wahlmenu hr{border:none;border-top:1px solid var(--line);margin:6px 8px}
.wahlmenu p.h{font-size:12px;color:var(--slate);line-height:1.45;padding:2px 10px 8px;margin:0}
.mobtitel{font-family:'Space Grotesk';font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--slate);margin:16px 0 0}
.mobsprache{display:flex;gap:8px;padding:8px 0 4px}
.mobsprache a,.mobsprache span{flex:1;text-align:center;border:1px solid var(--line);border-radius:10px;padding:9px 0;font-family:'Space Grotesk';font-size:14px;font-weight:500;color:var(--ink);text-decoration:none}
.mobsprache [aria-current="true"]{border-color:var(--indigo);color:var(--indigo);font-weight:600;background:#F5F6FE}
.mobsprache span:not([aria-current]){color:#B9C2D2;border-color:#EFF2F8}
@media(max-width:820px){.wahl.lang{display:none}.wahl .fahne{width:28px;height:28px}}
.shead .pill{display:inline-flex;font-family:'Space Grotesk';font-size:12px;color:var(--mint);background:rgba(45,225,180,.10);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(45,225,180,.45);border-radius:999px;padding:6px 12px}
.step .n{width:34px;height:34px;border-radius:10px;background:var(--ink);color:#fff;font-family:'Space Grotesk';font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.band .q{position:absolute;z-index:2;left:26px;top:50%;transform:translateY(-50%);color:#fff;font-family:'Space Grotesk';font-size:20px;max-width:520px;line-height:1.35;background:rgba(11,18,32,.30);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px 22px}
.plan .pn{font-family:'Space Grotesk';font-weight:600;font-size:17px}
.plan .pr{font-family:'Space Grotesk';font-weight:700;font-size:30px;margin:8px 0 2px}
.plan .pr small{font-size:13px;color:var(--slate);font-weight:500}
.plan .chf{font-size:12px;color:var(--slate)}
.fbrand .flogo{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk';font-weight:700;font-size:20px;color:#fff}
.fbrand .flogo b{color:#22D3EE}
@media(max-width:820px){.nav{padding:12px 16px;gap:10px}
 .brand{font-size:17px;gap:8px}
 .nav-cta{display:none}
 .burger{display:flex}
 .slider{height:auto;min-height:520px}
 .slide{background-position:70% center}
 .hero-wrap{position:relative;padding:96px 20px 40px;align-items:flex-start}
 .badge{position:absolute;left:20px;top:18px;transform:none;font-size:11px;max-width:calc(100% – 40px)}
 .dots{left:50%;right:auto;transform:translateX(-50%);bottom:16px}
 .shead{max-width:100%;padding:20px}
 .shead h1{font-size:26px;line-height:1.16}
 .shead p{font-size:14px;max-width:100%}
 h2{font-size:21px;line-height:1.22}
 .steps,.prices{grid-template-columns:1fr}.split{flex-direction:column}.split img{width:100%;height:auto}
 .band .q{font-size:18px;left:20px;right:20px;max-width:none}
 .footin{grid-template-columns:1fr 1fr;gap:24px;padding:36px 24px 22px}
 .fbrand{grid-column:1 / -1}
 .fbar{flex-direction:column;align-items:flex-start;padding:16px 24px}
 .navlinks{display:none}}

/* --- Tabellen, Branchenkarten und Themenbloecke: bisher als eigener Stilblock
   (tbl-css, bk-css, hub-css) im Kopf der jeweiligen Seiten, am 2026-09-10 hierher
   gezogen. Reihenfolge wie zuvor: nach den allgemeinen Regeln, vor den Werkzeugen. --- */
.tblw{margin:22px 0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
.tblw table{width:100%;border-collapse:collapse;font-size:14.5px}
.tblw th,.tblw td{padding:13px 16px;text-align:left;vertical-align:middle}
.tblw thead th,.tblw tr:first-child th{background:var(--cloud);font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:13.5px;letter-spacing:.01em;color:var(--ink);border-bottom:1px solid var(--line);white-space:nowrap}
.tblw tbody tr,.tblw tr+tr{border-top:1px solid var(--line)}
.tblw tbody tr:hover,.tblw tr:hover{background:rgba(99,102,241,.035)}
.tblw td:first-child,.tblw th:first-child{color:var(--slate);font-weight:600}
.tblw td strong{font-weight:700}
.tblw .yes{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--ink)}
.tblw .yes::before{content:"✓";flex:none;width:19px;height:19px;border-radius:50%;background:rgba(45,225,180,.16);color:#0A7255;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900}
.tblw .no{color:var(--slate);opacity:.65}
@media(max-width:760px){
 .tblw{border:0;border-radius:0;background:transparent}
 .tblw table,.tblw tbody,.tblw tr,.tblw td{display:block;width:100%}
 .tblw thead,.tblw tr:first-child th{display:none}
 .tblw tr{border:1px solid var(--line);border-radius:14px;margin:0 0 12px;background:#fff;overflow:hidden}
 .tblw tr:first-child{display:none}
 .tblw td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 14px;border-top:1px solid var(--line);text-align:right}
 .tblw td:first-child{border-top:0;background:var(--cloud);font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;color:var(--ink);text-align:left;display:block}
 .tblw td[data-label]:not(:first-child)::before{content:attr(data-label);flex:none;color:var(--slate);font-size:12.5px;font-weight:600;text-align:left}
 .tblw td:first-child::before{content:none}
}
.bk{background:var(--ink,#0B1220);border-radius:26px;padding:36px 28px;position:relative;overflow:hidden;margin:22px 0}
.bk::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 380px at 82% -12%,rgba(99,102,241,.20),transparent 62%),radial-gradient(560px 320px at -8% 108%,rgba(34,211,238,.13),transparent 60%);pointer-events:none}
.bk-h{position:relative;display:flex;align-items:flex-start;gap:14px;cursor:pointer;user-select:none}
.bk-h h3{color:#fff;font-size:19px;margin:0 0 4px;font-family:'Space Grotesk',system-ui,sans-serif}
.bk-h .s{color:#94A3B8;font-size:13.5px;line-height:1.5;margin:0}
.bk-n{margin-left:auto;flex:none;display:flex;align-items:center;gap:10px}
.bk-cnt{font-size:11.5px;color:#94A3B8;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);padding:3px 10px;border-radius:99px;white-space:nowrap}
.bk-tog{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;color:#94A3B8;transition:.2s;font-size:13px;line-height:1}
.bk-h:hover .bk-tog{border-color:rgba(45,225,180,.5);color:#2DE1B4}
.bk.zu .bk-tog{transform:rotate(-90deg)}
.bk-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px;position:relative;margin-top:22px}
.bk.zu .bk-g{display:none}
.bk-t{position:relative;display:flex;align-items:center;gap:12px;padding:15px;border-radius:15px;text-decoration:none;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);color:#E8ECF6;transition:transform .22s,background .22s,border-color .22s;overflow:hidden}
.bk-t::after{content:"";position:absolute;width:250px;height:250px;background:radial-gradient(circle,rgba(45,225,180,.16),transparent 62%);left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%);opacity:0;transition:opacity .3s;pointer-events:none}
.bk-t:hover{background:rgba(255,255,255,.09);border-color:rgba(45,225,180,.45);transform:translateY(-3px)}
.bk-t:hover::after{opacity:1}
.bk-t:focus-visible{outline:2px solid #2DE1B4;outline-offset:2px}
.bk-i{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(45,225,180,.12);border:1px solid rgba(45,225,180,.22);position:relative;z-index:1;transition:box-shadow .22s}
.bk-i svg{width:19px;height:19px;stroke:#2DE1B4;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bk-t:hover .bk-i{box-shadow:0 0 18px rgba(45,225,180,.35)}
.bk-t b{font-size:14px;font-weight:600;position:relative;z-index:1;line-height:1.25}
.bk-cta{background:linear-gradient(135deg,#6366F1,#22D3EE);border-color:transparent}
.bk-cta .bk-i{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.28)}
.bk-cta .bk-i svg{stroke:#fff}
.bk-cta b{color:#fff}
.bk-cta:hover{background:linear-gradient(135deg,#5457e0,#1cc3dd)}
@media(max-width:640px){
 .bk{padding:24px 15px;border-radius:18px}
 .bk-g{grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}
 .bk-t{flex-direction:column;align-items:flex-start;gap:9px;padding:13px}
 .bk-h h3{font-size:17px}
 .bk-h .s{font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){.bk-t,.bk-t::after,.bk-i{transition:none}.bk-t:hover{transform:none}}
.hub{margin:26px 0 40px}
.hub-h{display:flex;align-items:baseline;gap:12px;margin:0 0 4px}
.hub-h h2{font-size:20px;margin:0}
.hub-h .cnt{font-size:11.5px;color:var(--slate);background:var(--cloud);border:1px solid var(--line);padding:2px 9px;border-radius:99px;flex:none}
.hub-h .ln{flex:1;height:1px;background:var(--line)}
.hub-s{color:var(--slate);font-size:13.5px;margin:0 0 16px}
.hub-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.hub-c{display:flex;flex-direction:column;gap:7px;padding:16px 17px;border:1px solid var(--line);border-radius:14px;background:#fff;text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s,border-color .2s}
.hub-c:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(11,18,32,.09);border-color:rgba(99,102,241,.45)}
.hub-c b{font-size:14.5px;font-weight:600;line-height:1.35}
.hub-c span{font-size:12.5px;color:var(--slate);line-height:1.5}
.hub-c i{font-style:normal;font-size:12.5px;color:var(--indigo);font-weight:600;margin-top:2px}
.hub-c:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
@media(max-width:640px){.hub-g{grid-template-columns:1fr}.hub-h h2{font-size:17px}}

/* --- Werkzeuge und Preisplaene: bisher als Stilblock im Rumpf der einzelnen Seiten,
   am 2026-09-10 hierher gezogen. Reihenfolge wie zuvor: ganz am Ende. --- */
#cbp-plaene{
  --cbp-ink:var(--ink); --cbp-ink-soft:var(--slate); --cbp-line:var(--line);
  --cbp-acc:var(--indigo); --cbp-acc-2:var(--cyan); --cbp-acc-ink:#ffffff;
  --cbp-card:#ffffff; --cbp-bg:var(--cloud); --cbp-ok:#0A7255;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--cbp-ink); max-width:1180px; margin:0 auto; padding:clamp(24px,5vw,56px) clamp(16px,4vw,24px);
  box-sizing:border-box;
}
#cbp-plaene *,#cbp-plaene *::before,#cbp-plaene *::after{box-sizing:inherit}
#cbp-plaene .cbp-head{text-align:center;max-width:720px;margin:0 auto clamp(20px,4vw,36px)}
#cbp-plaene h2{font-family:'Space Grotesk',system-ui,sans-serif;font-size:clamp(26px,4.5vw,40px);line-height:1.15;margin:0 0 10px;font-weight:800;letter-spacing:-.02em}
#cbp-plaene .cbp-sub{font-size:clamp(15px,2.2vw,18px);color:var(--cbp-ink-soft);margin:0;line-height:1.55}
#cbp-plaene .cbp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,18px);align-items:stretch;margin-top:clamp(20px,3vw,30px)}
#cbp-plaene .cbp-card{
  position:relative;display:flex;flex-direction:column;background:var(--cbp-card);
  border:1px solid var(--cbp-line);border-radius:20px;padding:clamp(18px,2.2vw,24px);
  transition:transform .2s ease,box-shadow .2s ease;
}
#cbp-plaene .cbp-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(11,18,32,.10)}
#cbp-plaene .cbp-card--hero{
  background:var(--cbp-ink);color:#fff;border-color:var(--cbp-ink);
  box-shadow:0 18px 44px rgba(11,18,32,.28);
}
#cbp-plaene .cbp-card--hero:hover{box-shadow:0 22px 52px rgba(11,18,32,.34)}
#cbp-plaene .cbp-card--ent{background:var(--cbp-bg);border-style:dashed}
#cbp-plaene .cbp-flag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:linear-gradient(90deg,var(--cbp-acc),var(--cbp-acc-2));color:var(--cbp-acc-ink);
  font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:6px 13px;border-radius:999px;
}
#cbp-plaene .cbp-plan{font-size:14.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cbp-acc);margin:0 0 2px}
#cbp-plaene .cbp-card--hero .cbp-plan{color:var(--cbp-acc-2)}
#cbp-plaene .cbp-for{font-size:13px;color:var(--cbp-ink-soft);margin:0 0 14px;min-height:2.6em;line-height:1.3}
#cbp-plaene .cbp-card--hero .cbp-for{color:#94A3B8}
#cbp-plaene .cbp-price{display:flex;align-items:baseline;gap:6px;margin:0 0 2px;flex-wrap:wrap}
#cbp-plaene .cbp-price strong{font-size:clamp(28px,3.4vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1}
#cbp-plaene .cbp-price span{font-size:13.5px;color:var(--cbp-ink-soft)}
#cbp-plaene .cbp-card--hero .cbp-price span{color:#94a3b8}
#cbp-plaene .cbp-specs{list-style:none;margin:0 0 16px;padding:14px 0 4px;border-top:1px solid var(--cbp-line)}
#cbp-plaene .cbp-card--hero .cbp-specs{border-top-color:rgba(255,255,255,.16)}
#cbp-plaene .cbp-specs li{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:6px 0}
#cbp-plaene .cbp-specs li span:first-child{color:var(--cbp-ink-soft)}
#cbp-plaene .cbp-card--hero .cbp-specs li span:first-child{color:#94A3B8}
#cbp-plaene .cbp-specs li strong{font-weight:800;text-align:right}
#cbp-plaene .cbp-extra{
  display:flex;gap:8px;align-items:flex-start;font-size:13px;font-weight:700;
  background:rgba(99,102,241,.09);color:var(--cbp-acc);border-radius:12px;padding:9px 11px;margin:0 0 14px;line-height:1.35;
}
#cbp-plaene .cbp-card--hero .cbp-extra{background:rgba(34,211,238,.14);color:var(--mint)}
#cbp-plaene .cbp-cta{
  margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;border-radius:14px;font-size:15px;font-weight:800;text-decoration:none;
  border:2px solid var(--cbp-ink);color:var(--cbp-ink);background:transparent;transition:all .18s ease;
}
#cbp-plaene .cbp-cta:hover{background:var(--cbp-ink);color:#fff}
#cbp-plaene .cbp-cta--hero{background:linear-gradient(90deg,var(--cbp-acc),var(--cbp-acc-2));border:0;color:var(--cbp-acc-ink)}
#cbp-plaene .cbp-cta--hero:hover{filter:brightness(1.08);color:#fff}
#cbp-plaene .cbp-cta:focus-visible{outline:3px solid var(--cbp-acc-2);outline-offset:3px}
#cbp-plaene .cbp-note{font-size:12px;color:var(--cbp-ink-soft);text-align:center;margin:10px 0 0}
#cbp-plaene .cbp-card--hero .cbp-note{color:#94a3b8}
#cbp-plaene .cbp-all{
  margin-top:clamp(20px,3vw,30px);background:var(--cbp-bg);border:1px solid var(--cbp-line);
  border-radius:20px;padding:clamp(18px,2.5vw,24px);
}
#cbp-plaene .cbp-all p{margin:0 0 12px;font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--cbp-ink-soft)}
#cbp-plaene .cbp-all ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 20px}
#cbp-plaene .cbp-all li{display:flex;gap:9px;align-items:flex-start;font-size:15px;line-height:1.4}
#cbp-plaene .cbp-tick{flex:none;width:20px;height:20px;border-radius:50%;background:rgba(45,225,180,.16);color:var(--cbp-ok);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;margin-top:1px}
#cbp-plaene .cbp-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:clamp(16px,2.5vw,22px) 0 0;padding:0;list-style:none}
#cbp-plaene .cbp-trust li{font-size:13.5px;color:var(--cbp-ink-soft);display:flex;gap:7px;align-items:center}
@media (max-width:980px){
  #cbp-plaene .cbp-grid{grid-template-columns:1fr 1fr;max-width:640px;margin-left:auto;margin-right:auto}
}
@media (max-width:560px){
  #cbp-plaene .cbp-grid{grid-template-columns:1fr;max-width:440px}
  #cbp-plaene .cbp-card--hero{order:-1;transform:none}
  #cbp-plaene .cbp-card:hover{transform:none}
  #cbp-plaene .cbp-for{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  #cbp-plaene .cbp-card,#cbp-plaene .cbp-cta{transition:none}
  #cbp-plaene .cbp-card:hover{transform:none}
}
#cbv-vergleich{ --cbv-ink:var(--ink); --cbv-soft:var(--slate); --cbv-line:var(--line); --cbv-acc:var(--indigo); --cbv-acc-2:var(--cyan); --cbv-bg:var(--cloud); --cbv-ok:#0A7255; font-family:'Inter',system-ui,sans-serif; color:var(--cbv-ink); max-width:1120px; margin:clamp(18px,3vw,28px) auto; box-sizing:border-box; } #cbv-vergleich *,#cbv-vergleich *::before,#cbv-vergleich *::after{box-sizing:inherit} #cbv-vergleich .cbv-grid{display:grid;grid-template-columns:1.1fr 1fr 1.15fr;border:1px solid var(--cbv-line);border-radius:20px;overflow:hidden} #cbv-vergleich .cbv-cell{padding:14px 18px;font-size:15px;border-top:1px solid var(--cbv-line);display:flex;align-items:center} #cbv-vergleich .cbv-cell--head{border-top:0;background:var(--cbv-bg);font-weight:800;font-size:14px;letter-spacing:.02em} #cbv-vergleich .cbv-cell--pos{color:var(--cbv-soft);font-weight:600} #cbv-vergleich .cbv-cell--old{color:var(--cbv-ink)} #cbv-vergleich .cbv-cell--win{background:var(--cbv-ink);color:#fff;font-weight:700;gap:9px} #cbv-vergleich .cbv-cell--winhead{ background:var(--cbv-ink);color:#fff;border-top:0;font-weight:800;font-size:14px; display:flex;flex-wrap:wrap;gap:8px;align-items:center; } #cbv-vergleich .cbv-badge{background:linear-gradient(90deg,var(--cbv-acc),var(--cbv-acc-2));color:#fff;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;border-radius:999px} #cbv-vergleich .cbv-tick{flex:none;width:20px;height:20px;border-radius:50%;background:rgba(45,225,180,.18);color:var(--mint);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900} #cbv-vergleich .cbv-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;margin:14px 0 0;padding:0;list-style:none} #cbv-vergleich .cbv-foot li{font-size:13px;color:var(--cbv-soft)} #cbv-vergleich .cbv-label{display:none} @media (max-width:760px){ #cbv-vergleich .cbv-grid{display:block;border:0;border-radius:0;overflow:visible} #cbv-vergleich .cbv-cell--head,#cbv-vergleich .cbv-cell--winhead{display:none} #cbv-vergleich .cbv-row{ display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 14px;border:1px solid var(--cbv-line); border-radius:16px;overflow:hidden; } #cbv-vergleich .cbv-cell{border-top:0;display:block;padding:12px 14px} #cbv-vergleich .cbv-cell--pos{ grid-column:1 / -1;background:var(--cbv-bg);font-size:13px;font-weight:800;color:var(--cbv-ink); text-transform:uppercase;letter-spacing:.04em;padding:10px 14px; } #cbv-vergleich .cbv-cell--old,#cbv-vergleich .cbv-cell--win{font-size:14.5px;min-height:74px} #cbv-vergleich .cbv-cell--win{display:flex;align-items:flex-start;gap:8px} #cbv-vergleich .cbv-label{ display:block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin:0 0 4px; } #cbv-vergleich .cbv-cell--old .cbv-label{color:var(--cbv-soft)} #cbv-vergleich .cbv-cell--win .cbv-label{color:var(--mint)} #cbv-vergleich .cbv-cell--win{flex-direction:column} }
.wz{background:var(--cloud);border:1px solid var(--line);border-radius:18px;padding:24px;margin:24px 0}
.wz label{display:block;font-family:'Space Grotesk';font-size:13px;margin:0 0 5px}
.wz .feld{margin:0 0 16px}
.wz input[type=number],.wz input[type=text],.wz select,.wz textarea{width:100%;max-width:340px;font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.wz textarea{max-width:100%;min-height:120px}
.wz .gitter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.wz .hinweis{font-size:13px;color:var(--slate);margin:4px 0 0}
.erg{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:18px 0 0}
.erg .zeile{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
.erg .zeile:last-child{border-bottom:none}
.erg .zeile b{font-family:'Space Grotesk';white-space:nowrap}
.erg .gross{font-size:20px;font-family:'Space Grotesk'}
.formel{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:10px 0;overflow-x:auto}
@media(max-width:640px){.wz .gitter{grid-template-columns:1fr}}

/* --- 11.09.2026, Planknoepfe: zwei Reihen die fluchten, Zusatzkasten unten,
       'Beliebteste Wahl' als Band ueber der Karte. Alles innerhalb von #cbp-plaene. --- */
#cbp-plaene .cbp-for{min-height:3.9em}
#cbp-plaene .cbp-price{min-height:66px}
#cbp-plaene .cbp-fuss{margin-top:0;display:flex;flex-direction:column;gap:10px}
#cbp-plaene .cbp-fuss .cbp-cta{margin-top:0}
#cbp-plaene .cbp-fuss .cbp-note{margin:2px 0 0}
#cbp-plaene .cbp-extra{margin:14px 0 0;margin-top:auto}
#cbp-plaene .cbp-grid{padding-top:38px}
#cbp-plaene .cbp-flag{top:auto;bottom:calc(100% + 6px);left:0;right:0;transform:none;
  white-space:nowrap;border-radius:14px;text-align:center;padding:8px 12px;line-height:1.2}
@media (max-width:560px){
  #cbp-plaene .cbp-for{min-height:0}
  #cbp-plaene .cbp-price{min-height:0}
  #cbp-plaene .cbp-grid{padding-top:34px}
}

/* --- 11.09.2026, Planknoepfe Teil 2: gemeinsame Zeilenhoehen ueber alle vier Karten.
       Die min-height-Werte oben bleiben als Rueckfall fuer Browser ohne subgrid. --- */
@supports (grid-template-rows: subgrid){
  #cbp-plaene .cbp-grid{grid-template-rows:auto auto auto auto auto auto}
  #cbp-plaene .cbp-card{display:grid;grid-template-rows:subgrid;grid-row:span 6}
  #cbp-plaene .cbp-for{min-height:0}
  #cbp-plaene .cbp-price{min-height:0}
  #cbp-plaene .cbp-extra{margin-top:0}
}
/* --- 11.09.2026, Planblock der Marktseiten (/ch/, /de/, /at/): vier Karten
       nebeneinander statt drei, damit Enterprise nicht in eine zweite Reihe faellt.
       Ab 1080px steht das Raster auf seinen vollen 1000px, die Karten sind dann
       238px breit und der Preis bleibt einzeilig (gemessen: Umbruch ab 233px).
       Darunter zwei Spalten; ab 820px greift unveraendert die bestehende
       einspaltige Regel, deshalb ist die Vierspalter-Regel nach oben begrenzt.
       Gleiche Randstaerke, damit die hervorgehobene Karte nicht 1px tiefer sitzt. --- */
@media (min-width:1080px){
  .prices{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:1079px) and (min-width:821px){
  .prices{grid-template-columns:repeat(2,1fr)}
}
.prices .plan{border-width:2px}
/* --- 11.09.2026, Kopfleiste: das Burger-Menue erscheint schon ab 1023px statt
       erst ab 820px. Grund gemessen: die volle Leiste braucht 988px; ab 989px
       abwaerts lief die Seite waagrecht ueber - auf jeder Seite, nicht nur den
       Marktseiten. Betroffen waren Tablets im Querformat und kleine Laptops.
       Nur die Regeln der Leiste wandern mit; die Inhaltsregeln des 820er-Blocks
       (Ueberschriften, Raster, Fussbereich) bleiben unveraendert bei 820px.
       Nach unten begrenzt, damit unter 821px weiter die bestehenden Regeln gelten. --- */
@media (max-width:1023px) and (min-width:821px){
  .nav{padding:12px 16px;gap:10px}
  .brand{font-size:17px;gap:8px}
  .navlinks{display:none}
  .nav-cta{display:none}
  .burger{display:flex}
  .wahl.lang{display:none}
  .wahl .fahne{width:28px;height:28px}
}
/* --- 11.09.2026, Knoepfe auf schmalen Fenstern: .btn hat white-space:nowrap.
       Auf /testanruf/ steht ein ganzer Satz in einem Knopf; der war 544px breit
       und liess die Seite bei 390px waagrecht ueberlaufen. Auf schmalen Fenstern
       darf ein Knopf daher umbrechen und nicht breiter als sein Rahmen werden.
       Kurze Knoepfe bleiben unveraendert, weil sie ohnehin hineinpassen.
       Nur bis 820px, damit die Darstellung auf dem Desktop unberuehrt bleibt. --- */
@media (max-width:820px){
  .btn{white-space:normal;max-width:100%;text-align:center}
}