:root{--blau:#1E4FBA;--blau-d:#173F96;--champ:#F0D9A0;--champ-d:#E9CD85;--navy:#14163A;--navy-2:#1B1F4D;--offwhite:#F3F5F9;--eis:#6FA8F5;--mint:#3ECF97;--mut:#5B6079;--line:#E5E9F2;--wa:#25D366;--rot:#E0483D}
*{margin:0;padding:0;box-sizing:border-box}
:focus{outline:none}
:focus-visible{outline:2px solid var(--blau);outline-offset:3px;border-radius:6px}
html{scroll-behavior:smooth}
body{font-family:'Manrope',system-ui,-apple-system,sans-serif;color:var(--navy);background:#fff;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.6px;line-height:1.14;overflow-wrap:break-word;hyphens:auto}
p,li,td,th,span,label,a{overflow-wrap:break-word}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.wrap-s{max-width:820px;margin:0 auto;padding:0 22px}
.mut{color:var(--mut)}
section{padding:78px 0}
.sec-alt{background:var(--offwhite)}
.sec-dark{background:linear-gradient(160deg,#14163A 0%,#1E3170 62%,#1E4FBA 145%);color:#fff}
.sec-dark h2,.sec-dark h3,.sec-dark h4{color:#fff}
.eyebrow{font-weight:300;font-size:12.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--blau);margin-bottom:12px}
.sec-dark .eyebrow{color:var(--champ)}
.sec-h{font-size:38px;margin-bottom:14px;max-width:780px}
.sec-sub{font-size:17.5px;color:var(--mut);max-width:700px;margin-bottom:40px}
.sec-dark .sec-sub{color:#C7D2EA}
.center{text-align:center}
.center .sec-h,.center .sec-sub{margin-left:auto;margin-right:auto}

/* Buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--blau);color:#fff;font-family:inherit;font-weight:700;font-size:16px;padding:14px 28px;border-radius:10px;border:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .15s;overflow:hidden;text-align:center}
.btn:hover{background:var(--blau-d);transform:translateY(-2px);box-shadow:0 12px 26px rgba(30,79,186,.28)}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s ease}
.btn:hover::after{left:130%}
.btn-champ{background:var(--champ);color:var(--navy)}
.btn-champ:hover{background:var(--champ-d);box-shadow:0 12px 26px rgba(240,217,160,.32)}
.btn-wa{background:var(--wa);color:#fff;white-space:nowrap}
.btn-wa:hover{background:#1FBE5B;color:#fff;box-shadow:0 12px 26px rgba(37,211,102,.32)}
.btn-tel{background:#fff;white-space:nowrap;padding:10px 18px;color:var(--navy);border:1.5px solid var(--line);box-shadow:0 2px 10px rgba(20,22,58,.06)}
.btn-tel:hover{background:#fff;border-color:var(--blau);color:var(--blau);box-shadow:0 12px 26px rgba(30,79,186,.16)}
.btn-tel .tk{display:flex;flex-direction:column;align-items:flex-start;line-height:1.12}
.btn-tel .tk small{font-size:10.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--mut)}
.btn-tel .tk b{font-size:15px;font-weight:800;letter-spacing:-.3px;white-space:nowrap}
.sec-dark .btn-tel{background:#fff;border-color:#fff;color:var(--blau)}
.sec-dark .btn-tel .tk small{color:var(--mut)}
.sec-dark .btn-tel:hover{background:#fff;border-color:var(--champ);color:var(--blau-d);box-shadow:0 14px 30px rgba(0,0,0,.28)}
.btn-ghost{background:transparent;color:var(--navy);border:1.5px solid var(--line);font-weight:700;padding:13px 26px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.18s;font-family:inherit;font-size:15px;cursor:pointer}
.btn-ghost:hover{border-color:var(--blau);color:var(--blau)}
.sec-dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,.32)}
.sec-dark .btn-ghost:hover{border-color:var(--champ);color:var(--champ)}
.btn-lg{font-size:17px;padding:17px 34px}
.btn-block{display:flex;width:100%}
.btnrow{display:flex;gap:12px;flex-wrap:wrap}
.btnrow.center{justify-content:center}

/* Logo */
.logo{font-weight:800;font-size:26px;white-space:nowrap;color:var(--blau);letter-spacing:-1.1px;line-height:1.05;display:inline-block}
.logo span{color:var(--champ)}
.logo .slogan{display:block;font-size:7.7px;font-weight:700;letter-spacing:.05px;color:var(--blau);margin-top:-1px;text-align:right}
.foot-logo{color:#fff}
.foot-logo i{font-style:normal;background:linear-gradient(92deg,var(--eis) 0%,#9AC4FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.foot-logo span{color:var(--champ)}
.foot-logo .slogan{color:#9FADCE;background:none;-webkit-text-fill-color:#9FADCE}

/* Header */
header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header .wrap{max-width:1300px}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:16px;flex-wrap:nowrap}
.navlinks{display:flex;align-items:center;gap:21px;font-size:14.5px;font-weight:600;white-space:nowrap}
.navlinks>a{color:var(--navy);opacity:.85;transition:.15s;padding:4px 0;border-bottom:2px solid transparent}
.navlinks>a:hover{opacity:1;color:var(--blau)}
.navlinks>a.aktiv{color:var(--blau);opacity:1;border-bottom-color:var(--blau)}
.nav-cta{display:flex;align-items:center;gap:10px;flex:none}
.nav-cta .btn-wa{padding:12px 20px;font-size:15px}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.burger i{display:block;width:24px;height:2.5px;background:var(--navy);border-radius:2px}
.mega{position:relative}
.mega>button{background:none;border:none;font-family:inherit;font-size:15px;font-weight:600;color:var(--navy);opacity:.85;cursor:pointer;display:flex;align-items:center;gap:6px;padding:4px 0}
.mega>button:hover{opacity:1;color:var(--blau)}
.mega>button svg{transition:transform .2s}
.mega.open>button svg{transform:rotate(180deg)}
.megapanel{position:absolute;top:calc(100% + 20px);left:50%;transform:translateX(-50%) translateY(-8px);width:min(600px,94vw);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 26px 64px rgba(20,22,58,.17);padding:14px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transition:.2s}
.mega.open .megapanel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mbr{display:flex;align-items:center;gap:15px;padding:13px 14px;border-radius:12px;transition:.15s;white-space:normal}
.mbr:hover{background:var(--offwhite)}
.mico{width:44px;height:44px;flex:none;border-radius:12px;background:rgba(30,79,186,.09);color:var(--blau);display:flex;align-items:center;justify-content:center;transition:.15s}
.mbr:hover .mico{background:var(--blau);color:#fff}
.mtxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.mtxt b{font-size:15.5px;font-weight:800;letter-spacing:-.3px;color:var(--navy)}
.mtxt em{font-style:normal;font-size:13px;color:var(--mut);line-height:1.4}

/* Hero */
.hero{padding:74px 0 64px;background:radial-gradient(1100px 520px at 78% -10%,rgba(111,168,245,.18),transparent 62%)}
.herogrid{display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:center}
.herogrid>*,.grid2>*,.grid3>*,.brgrid>*,.rgrid>*,.mockgrid>*,.funnel>*,.vsgrid>*{min-width:0}
h1{font-size:52px;letter-spacing:-2px;margin-bottom:20px}
h1 em{font-style:normal;color:var(--blau)}
.lead{font-size:19px;color:var(--mut);max-width:560px;margin-bottom:26px}
.heropills{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}
.pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:700;box-shadow:0 2px 8px rgba(20,22,58,.05)}
.pill svg{flex:none}

/* Konfigurator */
.konfig{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 26px 70px rgba(20,22,58,.13);padding:28px}
.konfig h3{font-size:21px;margin-bottom:4px}
.konfig .ksub{font-size:14px;color:var(--mut);margin-bottom:20px}
.kfield{margin-bottom:16px}
.kfield label{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;font-weight:700;margin-bottom:7px;color:var(--navy);gap:10px}
.kfield label b{color:var(--blau);font-size:15px}
select,input[type=number],input[type=text],input[type=email],textarea{width:100%;font-family:inherit;font-size:15.5px;font-weight:600;color:var(--navy);background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:13px 14px;transition:.15s;-webkit-appearance:none;appearance:none}
select{cursor:pointer;min-width:0;text-overflow:ellipsis;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235B6079' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--blau);box-shadow:0 0 0 3px rgba(30,79,186,.12)}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--blau) 0%,var(--blau) var(--pct,20%),var(--line) var(--pct,20%),var(--line) 100%);outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--blau);box-shadow:0 2px 8px rgba(30,79,186,.35);cursor:pointer}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--blau);cursor:pointer}
.kout{background:var(--offwhite);border-radius:13px;padding:16px 18px;margin:20px 0 16px}
.krow{display:flex;justify-content:space-between;align-items:baseline;font-size:14.5px;padding:5px 0;color:var(--mut);gap:12px}
.krow b{color:var(--navy);font-weight:700;font-size:15.5px;text-align:right}
.krow.total{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-size:16px;color:var(--navy);font-weight:700}
.krow.total b{font-size:23px;color:var(--blau);letter-spacing:-.6px}
.strike{text-decoration:line-through;color:var(--mut);font-weight:600;font-size:13.5px;margin-right:6px}
.savebadge{display:inline-block;background:var(--mint);color:#06301f;font-size:11.5px;font-weight:800;padding:2px 8px;border-radius:999px;margin-left:8px;vertical-align:middle}
.knote{font-size:12.5px;color:var(--mut);margin-top:12px;line-height:1.5}

/* Trustband */
.trust{background:var(--navy);color:#fff;padding:44px 0}
.trustgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;text-align:center}
.trustgrid b{display:block;font-size:44px;font-weight:800;color:var(--champ);letter-spacing:-2px;line-height:1.05}
.trustgrid span{font-size:13.5px;color:#B9C4DF;display:block;margin-top:6px}

/* Karten */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;transition:.2s}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(20,22,58,.10);border-color:#D5DEF0}
.card h3{font-size:19px;margin-bottom:9px}
.card p{font-size:15px;color:var(--mut)}
.ico{width:46px;height:46px;border-radius:12px;background:rgba(30,79,186,.09);color:var(--blau);display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex:none}
.ico.champ{background:rgba(240,217,160,.35);color:var(--navy)}
.step-n{width:38px;height:38px;border-radius:11px;background:var(--blau);color:#fff;font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}

/* Prinzip als Fluss */
.prinzip{background:linear-gradient(180deg,#fff 0%,var(--offwhite) 100%);position:relative;overflow:hidden}
.prinzip::before{content:"";position:absolute;inset:0;background:radial-gradient(720px 320px at 50% 0%,rgba(111,168,245,.14),transparent 68%);pointer-events:none}
.flow{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:12px}
.flow::before{content:"";position:absolute;top:56px;left:16%;right:16%;height:2px;background:repeating-linear-gradient(90deg,rgba(30,79,186,.34) 0 9px,transparent 9px 18px)}
.fstat{position:relative;text-align:center;padding:0 12px}
.fstat{--verschub:0}
.fghost{position:absolute;top:-8px;left:calc(50% + 26px);z-index:3;width:30px;height:30px;border-radius:50%;background:var(--blau);color:#fff;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(30,79,186,.4);border:2px solid #fff}
.fico{position:relative;z-index:1;width:76px;height:76px;margin:0 auto 20px;border-radius:24px;background:#fff;border:1px solid var(--line);color:var(--blau);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px rgba(20,22,58,.10);transition:.25s}
.fstat:hover .fico{transform:translateY(-4px);border-color:var(--blau);box-shadow:0 20px 44px rgba(30,79,186,.20)}
.fstat:nth-child(2) .fico{background:#fff;border-color:var(--line);color:var(--blau)}
.fstat h3{position:relative;z-index:1;font-size:19.5px;margin-bottom:9px}
.fstat p{position:relative;z-index:1;font-size:15px;color:var(--mut);max-width:320px;margin:0 auto}

/* Ablauf im Zickzack */
.zzweg{position:relative;display:flex;flex-direction:column;gap:0}
.zz{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;position:sticky;top:104px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:38px;margin-bottom:26px;box-shadow:0 24px 60px rgba(20,22,58,.10);transition:transform .5s ease,opacity .5s ease}
.zz>*{min-width:0}
.zz.um .zztext{order:2}
.zz.um .zzbild{order:1}

.zz.raus{transform:scale(.955) translateY(-14px);opacity:.55}
.zznum{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:var(--blau);color:#fff;font-weight:800;font-size:18px;margin-bottom:16px;box-shadow:0 10px 24px rgba(30,79,186,.28)}
.zztext h3{font-size:26px;margin-bottom:10px}
.zztext>p{font-size:16.5px;color:var(--mut);margin-bottom:18px}
.zzlist{list-style:none;display:flex;flex-direction:column;gap:9px}
.zzlist li{display:flex;gap:10px;align-items:flex-start;font-size:15px;font-weight:600;color:var(--navy)}
.zzlist li svg{flex:none;margin-top:2px}
.zzbild{border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:var(--offwhite)}
.zzbild img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.zz:hover .zzbild img{transform:scale(1.035)}

/* Branchen-Auswahl */
.btabs{display:flex;gap:10px;overflow-x:auto;overflow-y:visible;padding:14px 6px 24px;margin:-14px -6px 12px;scrollbar-width:none}
.btabs::-webkit-scrollbar{display:none}
.btab{flex:1 1 0;min-width:150px;justify-content:center;display:inline-flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:11px 20px;font-family:inherit;font-size:14.5px;font-weight:700;color:var(--navy);cursor:pointer;white-space:nowrap;transition:.18s}
.btab span{display:flex;color:var(--mut);transition:.18s}
.btab:hover{border-color:var(--navy);color:var(--navy);background:var(--offwhite);transform:translateY(-1px)}
.btab:hover span{color:var(--navy)}
.btab.aktiv{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 8px 22px rgba(20,22,58,.20)}
.btab.aktiv span{color:var(--champ)}
.bpanel{display:none;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:0 18px 44px rgba(20,22,58,.08)}
.bpanel.aktiv{display:grid;animation:bpin .3s ease}
@keyframes bpin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bpanel>*{min-width:0}
.bpinfo h3{font-size:22px;line-height:1.3}
.bpthemen{display:flex;flex-direction:column;gap:2px}
.bpt{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:14px 16px;border-radius:12px;transition:.15s;border:1px solid transparent}
.bpt:hover{background:var(--offwhite);border-color:var(--line)}
.bptn{grid-column:1;grid-row:1;font-size:16px;font-weight:800;letter-spacing:-.3px}
.bptw{grid-column:1;grid-row:2;font-size:13.5px;color:var(--mut)}
.bptp{grid-column:2;grid-row:1/3;align-self:center;text-align:right;font-size:14.5px;font-weight:800;color:var(--blau);white-space:nowrap}
.bpt:hover .bptp{color:var(--blau-d)}

/* Branchenkarten */
.brgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.brcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 26px 22px;display:flex;flex-direction:column;transition:.2s}
.brcard:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(20,22,58,.10);border-color:#D5DEF0}
.brhead{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.brhead h3{font-size:20px;overflow-wrap:anywhere}
.brcard>p{font-size:14.5px;color:var(--mut);margin-bottom:18px}
.thlist{list-style:none;margin-bottom:20px;flex:1}
.thlist li{border-bottom:1px solid var(--line)}
.thlist li:last-child{border-bottom:none}
.thlist a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 8px;font-size:15px;font-weight:600;border-radius:8px;transition:.14s}
.thlist a:hover{background:var(--offwhite);color:var(--blau)}
.thlist a i{font-style:normal;font-size:13.5px;font-weight:700;color:var(--blau);white-space:nowrap}

/* Hero-Liste auf Branchenseiten */
.hlist{list-style:none;margin:0 0 26px;display:flex;flex-direction:column;gap:13px;max-width:600px}
.hlist li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--mut);line-height:1.55}
.hlist li svg{flex:none;margin-top:3px}
.hlist li b{color:var(--navy);font-weight:800}

/* Trust-Badges */
.tbadges{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.tbadges span{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--mut)}

/* Risiko-Liste */
.rlist{display:flex;flex-direction:column;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.rrow2{display:grid;grid-template-columns:1fr 42px 1fr;align-items:center;gap:10px;background:#fff;padding:16px 22px}
.rbad,.rgut{display:flex;align-items:flex-start;gap:11px;font-size:15px;line-height:1.5}
.rbad{color:var(--mut)}
.rgut{color:var(--navy);font-weight:600}
.rbad svg,.rgut svg{flex:none;margin-top:3px}
.rpfeil{text-align:center;color:var(--blau);font-weight:800;font-size:18px}

/* Preis-Kacheln */
.ptiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.ptiles>*{min-width:0}
.ptile{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;transition:.2s;min-height:190px}
.ptile:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(20,22,58,.10);border-color:#D5DEF0}
.ptico{width:42px;height:42px;border-radius:12px;background:rgba(30,79,186,.09);color:var(--blau);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.ptile b{font-size:15.5px;font-weight:800;letter-spacing:-.3px;line-height:1.25}
.ptile em{font-style:normal;font-size:13px;color:var(--mut)}
.ptp{margin-top:auto;padding-top:12px;font-weight:800;color:var(--blau);font-size:15px}

/* Vergleich Agentur */
.vsgrid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:20px;overflow:hidden;box-shadow:0 30px 70px rgba(20,22,58,.16)}
.vscol{padding:34px 30px;display:flex;flex-direction:column}
.vscol.links{background:#fff;border:1px solid var(--line);border-right:none}
.vscol.rechts{background:linear-gradient(165deg,#14163A 0%,#1E3170 100%);color:#fff;position:relative}
.vscol.rechts .ico{background:var(--champ)!important;color:var(--navy)!important;box-shadow:0 10px 26px rgba(240,217,160,.28)}

.vshead{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.vshead h3{font-size:21px}
.vssub{font-size:14px;color:var(--mut);margin-bottom:22px}
.vscol.rechts .vssub{color:#B9C4DF}
.vslist{list-style:none;flex:1}
.vslist li{display:flex;gap:12px;align-items:flex-start;font-size:15px;padding:11px 0;border-bottom:1px solid var(--line);color:var(--mut)}
.vscol.rechts .vslist li{border-bottom-color:rgba(255,255,255,.12);color:#D6DFF3}
.vslist li:last-child{border-bottom:none}
.vslist li svg{flex:none;margin-top:3px}
.vslist li b{color:var(--navy);font-weight:700}
.vslist li b.zeile{display:block;margin-bottom:2px}
.vscol.rechts .vslist li b{color:#fff}
.vsfoot{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.vscol.rechts .vsfoot{border-top-color:rgba(255,255,255,.14)}
.vsfoot span{display:block;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--mut);font-weight:700;margin-bottom:6px}
.vscol.rechts .vsfoot span{color:var(--champ)}
.vsfoot b{font-size:26px;font-weight:800;letter-spacing:-1px;display:block}
.vsfoot b.rot{color:var(--rot)}
.vsfoot b.gut{color:var(--mint)}
.vsfoot em{font-style:normal;font-size:13.5px;color:var(--mut);display:block;margin-top:4px;min-height:42px}
.vscol.rechts .vsfoot em{color:#B9C4DF}

/* Trichter Pruefstufen */
.funnel{display:grid;grid-template-columns:1.15fr .85fr;gap:46px;align-items:center}
.funnel.einspaltig{grid-template-columns:1fr;max-width:760px}
.fsteps{list-style:none;position:relative}
.fsteps::before{content:"";position:absolute;left:22px;top:24px;bottom:24px;width:2px;background:rgba(255,255,255,.13)}
.fsteps::after{content:"";position:absolute;left:22px;top:24px;width:2px;height:var(--fill,0%);max-height:calc(100% - 48px);background:var(--champ);box-shadow:0 0 10px rgba(240,217,160,.5);transition:height .4s ease}
.fstep{display:flex;gap:18px;align-items:flex-start;padding:13px 0;position:relative;opacity:.42;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.fstep.an{opacity:1;transform:none}
.fnum{width:46px;height:46px;flex:none;border-radius:14px;background:#1B2450;border:1px solid rgba(255,255,255,.16);color:#C7D2EA;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;position:relative;z-index:2;transition:background .3s,border-color .3s,color .3s,box-shadow .3s,transform .3s}
.fstep.jetzt .fnum{background:#232F63;border-color:var(--champ);color:var(--champ);transform:scale(1.08);box-shadow:0 0 0 6px rgba(240,217,160,.09),0 10px 28px rgba(240,217,160,.28)}
.fstep h4{font-size:16.5px;margin-bottom:3px;transition:color .3s}
.fstep.jetzt h4{color:var(--champ)}
.fstep p{font-size:14.5px;color:#B9C4DF;max-width:520px}
.fstep:hover{opacity:1;transform:none}
.fchart{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:20px;padding:28px 26px;backdrop-filter:blur(6px)}
.fchart h4{font-size:15px;margin-bottom:4px}
.fchart>p{font-size:13.5px;color:#B9C4DF;margin-bottom:22px}
.fbar{margin-bottom:15px}
.fbar span{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;color:#C7D2EA;margin-bottom:6px}
.fbar .ft{height:13px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.fbar .ff{height:100%;border-radius:999px;transition:width .6s ease}
.fbar.final span{color:var(--champ)}
.flegende{display:flex;gap:18px;margin:16px 0 4px;font-size:12px;font-weight:700;color:#B9C4DF}
.flegende i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.flegende .raus{background:#B4483F}
.flegende .bleibt{background:var(--champ)}
.fout{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);display:flex;align-items:flex-start;gap:12px}
.fout>svg{flex:none;margin-top:2px}
.fout p b{color:#fff;display:block;margin-bottom:3px}
.fout p{font-size:13.5px;color:#B9C4DF}

/* Lieferung, iPhone */
.mockgrid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.leadcard{background:#fff;border-radius:16px;box-shadow:0 26px 64px rgba(20,22,58,.20);overflow:hidden;border:1px solid var(--line);max-width:430px}
.lc-top{background:var(--navy);color:#fff;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.lc-top b{font-size:14.5px}
.lc-top span{font-size:11.5px;background:var(--mint);color:#06301f;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap}
.lc-body{padding:20px}
.lcrow{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.lcrow:last-of-type{border-bottom:none}
.lcrow span{color:var(--mut)}
.lcrow b{font-weight:700;text-align:right}
.lc-foot{background:var(--offwhite);padding:14px 20px;font-size:12.5px;color:var(--mut);display:flex;align-items:center;gap:8px}

.iphone{width:300px;margin:0 auto;position:relative;border-radius:58px;padding:12px;background:linear-gradient(155deg,#C9B6A0 0%,#8A7A67 16%,#EADFD0 34%,#7C6E5D 58%,#D8C8B4 78%,#6F6355 100%);box-shadow:0 46px 90px rgba(20,22,58,.30),0 3px 8px rgba(0,0,0,.28)}
.iphone::before{content:"";position:absolute;left:-3px;top:120px;width:3px;height:64px;border-radius:3px 0 0 3px;background:linear-gradient(180deg,#B9A78F,#7C6E5D)}
.iphone::after{content:"";position:absolute;right:-3px;top:150px;width:3px;height:92px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#B9A78F,#7C6E5D)}
.ip-screen{border-radius:47px;overflow:hidden;background:#fff;position:relative;aspect-ratio:9/19.5;display:flex;flex-direction:column;box-shadow:inset 0 0 0 2px rgba(0,0,0,.85)}
.ip-island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:96px;height:28px;background:#05060c;border-radius:999px;z-index:5}
.ip-island::after{content:"";position:absolute;right:9px;top:9px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2b3a5c,#0a0d18 70%)}
.ip-status{display:flex;justify-content:space-between;align-items:center;padding:16px 22px 6px;font-size:12.5px;font-weight:700;color:#0b0d17;position:relative;z-index:6}
.ip-status .sig{display:flex;gap:4px;align-items:center}
.wa-top{background:#075E54;color:#fff;padding:11px 15px 13px;display:flex;align-items:center;gap:11px}
.wa-av{width:36px;height:36px;border-radius:50%;background:linear-gradient(140deg,#1E4FBA,#6FA8F5);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex:none}
.wa-top b{font-size:15px;display:block;line-height:1.25}
.wa-top small{font-size:11.5px;color:#B9E0D8}
.wa-body{flex:1;background:#ECE5DD;background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:14px 14px;padding:14px 12px;display:flex;flex-direction:column;gap:8px}
.wa-msg{background:#fff;border-radius:10px 10px 10px 3px;padding:10px 12px 7px;font-size:13px;line-height:1.5;color:#0b0d17;box-shadow:0 1px 1px rgba(0,0,0,.13);max-width:92%}
.wa-msg.me{background:#DCF8C6;border-radius:9px 9px 2px 9px;align-self:flex-end}
.wa-msg b{color:#075E54}
.wa-msg .t{display:block;text-align:right;font-size:10.5px;color:#8a8f9a;margin-top:3px}
.wa-input{background:#F0F0F0;padding:9px 12px 20px;display:flex;gap:9px;align-items:center;position:relative}
.wa-input i{flex:1;background:#fff;border-radius:999px;height:34px;display:flex;align-items:center;padding:0 14px;font-style:normal;font-size:12.5px;color:#9aa0a6}
.wa-input u{width:34px;height:34px;border-radius:50%;background:#00A884;flex:none}
.wa-input::after{content:"";position:absolute;left:50%;bottom:7px;transform:translateX(-50%);width:110px;height:4px;border-radius:99px;background:#0b0d17;opacity:.25}

.lieferlinks{display:flex;flex-direction:column;gap:26px}
.liefertext h3{font-size:20px;margin-bottom:10px}
.liefertext p{font-size:15.5px;color:var(--mut)}

.phonefoto{max-width:320px;margin:0 auto}
.phonefoto img{width:100%;height:auto;filter:drop-shadow(0 24px 46px rgba(20,22,58,.22))}

/* Rechner */
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.rcalc{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 20px 50px rgba(20,22,58,.10)}
.rbreak{background:rgba(62,207,151,.14);border:1px solid rgba(62,207,151,.4);border-radius:11px;padding:12px 15px;font-size:14.5px;text-align:center;margin-top:14px;color:#0d4a33}
.rvis{display:flex;flex-direction:column;gap:14px}
.rbar{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.rbar span{font-size:13px;font-weight:700;color:var(--mut);display:block;margin-bottom:9px}
.rbar .track{height:14px;border-radius:999px;background:var(--offwhite);overflow:hidden}
.rbar .fill{height:100%;border-radius:999px;transition:width .35s ease}
.rbar .fill.inv{background:linear-gradient(90deg,#F5E4BC,var(--champ-d))}
.rbar .fill.ums{background:linear-gradient(90deg,var(--eis),var(--blau))}
.rbar .fill.erg{background:linear-gradient(90deg,var(--mint),#22a877)}
.rbar em{font-style:normal;font-weight:800;font-size:20px;letter-spacing:-.6px;display:block;margin-top:9px}

/* Tabelle */
.ptable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:15px}
.ptable th,.ptable td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)}
.ptable th{background:var(--offwhite);font-size:12.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mut);font-weight:700}
.ptable td:last-child,.ptable th:last-child{text-align:right;font-weight:700;white-space:nowrap}
.ptable tr:last-child td{border-bottom:none}
.ptable .grp td{background:var(--navy);color:#fff;font-weight:700;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;text-align:left}
.ptable a{color:var(--blau);font-weight:700}
.staffel{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.stbox{background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px;text-align:center}
.stbox b{display:block;font-size:24px;color:var(--blau);font-weight:800;letter-spacing:-1px}
.stbox span{font-size:13px;color:var(--mut)}

/* FAQ */
.faq{max-width:840px}
.fitem{border-bottom:1px solid var(--line)}
.fq{width:100%;background:none;border:none;font-family:inherit;font-size:17px;font-weight:700;color:var(--navy);text-align:left;padding:20px 40px 20px 0;cursor:pointer;position:relative;line-height:1.4}
.fq::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:400;color:var(--blau)}
.fitem.open .fq::after{content:"\2212"}
.fa{max-height:0;overflow:hidden;transition:max-height .3s ease;font-size:15.5px;color:var(--mut)}
.fitem.open .fa{max-height:600px;padding-bottom:20px}

/* Blog */
.bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bcard{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.bcard:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(20,22,58,.11);border-color:#D5DEF0}
.bcard .bimg{aspect-ratio:16/10;background:linear-gradient(135deg,#1E4FBA,#14163A);overflow:hidden}
.bcard .bimg img{width:100%;height:100%;object-fit:cover}
.bbody{padding:22px;display:flex;flex-direction:column;flex:1}
.bmeta{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--blau);font-weight:700;margin-bottom:9px}
.bcard h3{font-size:18.5px;margin-bottom:9px;line-height:1.25}
.bcard p{font-size:14.5px;color:var(--mut);flex:1}
.bmore{margin-top:16px;font-weight:700;color:var(--blau);font-size:14.5px}
.artikel{max-width:760px;margin:0 auto}
.artikel .ahero{aspect-ratio:16/9;border-radius:18px;overflow:hidden;margin:28px 0 34px;box-shadow:0 24px 56px rgba(20,22,58,.16)}
.artikel .ahero img{width:100%;height:100%;object-fit:cover}
.artikel h2{font-size:27px;margin:38px 0 14px}
.artikel h3{font-size:20px;margin:26px 0 10px}
.artikel p{font-size:17px;color:#2C3050;margin-bottom:16px}
.artikel ul,.artikel ol{margin:0 0 18px 22px;font-size:17px;color:#2C3050}
.artikel li{margin-bottom:8px}
.artikel .anote{background:var(--offwhite);border-left:4px solid var(--champ);border-radius:0 12px 12px 0;padding:18px 22px;margin:26px 0;font-size:16px}
.artikel .anote b{display:block;margin-bottom:4px}
.abox{background:var(--offwhite);border:1px solid var(--line);border-radius:16px;padding:26px;margin:30px 0}
.abox h4{font-size:17px;margin-bottom:12px}
.ameta{display:flex;gap:14px;flex-wrap:wrap;font-size:13.5px;color:var(--mut);font-weight:600}
.ameta span{display:flex;align-items:center;gap:6px}

/* Kaufstrecke */
.kaufkopf{margin-bottom:30px}
.ksteps{list-style:none;display:flex;gap:8px;margin-bottom:30px;flex-wrap:wrap}
.kstep{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:var(--mut);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:9px 18px 9px 9px}
.kstep span{width:26px;height:26px;border-radius:50%;background:var(--offwhite);color:var(--mut);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:none}
.kstep.aktiv{border-color:var(--blau);color:var(--blau);box-shadow:0 8px 20px rgba(30,79,186,.14)}
.kstep.aktiv span{background:var(--blau);color:#fff}
.kstep.fertig{border-color:rgba(62,207,151,.5);color:#1a7a55}
.kstep.fertig span{background:var(--mint);color:#06301f}
.kaufgrid{display:grid;grid-template-columns:1.35fr .65fr;gap:34px;align-items:start}
.kaufgrid>*{min-width:0}
.kaufbox{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:0 20px 50px rgba(20,22,58,.09)}
.kpane.hidden{display:none}
.kh{font-size:24px;margin-bottom:6px}
.ksub2{font-size:15px;color:var(--mut);margin-bottom:24px}
.kgrid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.kgrid2>*{min-width:0}
.kerr{background:#FDEDEB;border:1px solid #F3C4BE;color:#A3312A;border-radius:10px;padding:11px 14px;font-size:14px;font-weight:600;margin-bottom:14px}
input.invalid,select.invalid{border-color:var(--rot);box-shadow:0 0 0 3px rgba(224,72,61,.12)}
.kzurueck{display:flex;gap:18px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.kzurueck button{background:none;border:none;font-family:inherit;font-size:14px;font-weight:700;color:var(--mut);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.kzurueck button:hover{color:var(--blau)}
.kzusammen{background:var(--offwhite);border-radius:14px;padding:8px 18px;margin-bottom:20px}
.kz{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--mut)}
.kz:last-child{border-bottom:none}
.kz b{color:var(--navy);text-align:right}
.kz.stark{font-size:16px;color:var(--navy);font-weight:700}
.kz.stark b{font-size:20px;color:var(--blau);letter-spacing:-.5px}
.kcheck{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--mut);margin-bottom:14px;cursor:pointer;line-height:1.55}
.kcheck input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--blau);cursor:pointer}
.kcheck a{color:var(--blau);font-weight:700}
.kfertig{text-align:center;padding:26px 0}
.kfertig svg{width:46px;height:46px;margin:0 auto 16px}
.kfertig p{font-size:16px;color:var(--mut);max-width:520px;margin:0 auto}
.kaufsum{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;position:sticky;top:96px;box-shadow:0 14px 36px rgba(20,22,58,.07)}
.kaufsum h3{font-size:18px;margin-bottom:16px}
.ksicher{list-style:none;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.ksicher li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;font-weight:600;color:var(--mut)}
.ksicher li svg{flex:none;margin-top:1px}

.bband{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 26px 60px rgba(20,22,58,.14);aspect-ratio:16/7;margin:8px 0}
.bband img{width:100%;height:100%;object-fit:cover}
.bband figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 30px 22px;font-size:15px;font-weight:600;color:#fff;background:linear-gradient(180deg,transparent,rgba(20,22,58,.75))}

/* Breadcrumb */
.crumb{font-size:13.5px;color:var(--mut);padding:18px 0 0}
.crumb a{color:var(--mut)}
.crumb a:hover{color:var(--blau)}
.crumb span{margin:0 7px;opacity:.5}

/* CTA */
.ctabox{text-align:center;max-width:760px;margin:0 auto}
.ctabox h2{font-size:38px;margin-bottom:14px}
.ctabox p{font-size:18px;color:#C7D2EA;margin-bottom:30px}

/* Footer */
footer{background:var(--navy);color:#9FADCE;padding:60px 0 28px;font-size:14.5px}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px;margin-bottom:38px}
footer h5{color:#fff;font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:14px;font-weight:700}
footer a{display:block;padding:5px 0;transition:.15s;overflow-wrap:anywhere}
footer a:hover{color:var(--champ)}
footer p{overflow-wrap:anywhere}
.fbottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.5px}

/* Mobile CTA-Leiste */
.mcb{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:9px 12px;gap:9px;box-shadow:0 -6px 24px rgba(20,22,58,.10)}
.mcb a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:10px;font-weight:700;font-size:14.5px;padding:12px 8px}
.mcb .a1{background:var(--blau);color:#fff}
.mcb .a2{background:var(--wa);color:#fff}
.mcb .a3{background:#fff;border:1.5px solid var(--line);color:var(--navy)}

@media(max-width:1080px){
  .herogrid,.mockgrid,.rgrid,.vsgrid,.funnel{grid-template-columns:1fr;gap:32px}
  .grid3,.brgrid,.grid2,.bloggrid,.flow,.zz,.bpanel,.kaufgrid{grid-template-columns:1fr}
  .kaufbox{padding:22px 18px}
  .kaufsum{position:static;order:-1}
  .ksteps{gap:6px}
  .kstep{font-size:12.5px;padding:7px 13px 7px 7px}
  .kstep span{width:22px;height:22px;font-size:11.5px}
  .zz{gap:22px;padding:22px 18px;position:static;transform:none!important;opacity:1!important;margin-bottom:18px}
  .zz.um .zztext{order:1}
  .zz.um .zzbild{order:2}
  .zz::after{left:22px;height:30px}
  .zztext h3{font-size:22px}
  .bpanel{padding:22px 18px;gap:26px}
  .bband{aspect-ratio:16/10;border-radius:16px}
  .flow{gap:34px}
  .flow::before{display:none}
  .fghost{top:-6px;left:calc(50% + 24px)}
  .vsgrid{box-shadow:none;gap:18px;border-radius:0}
  .vscol{border-radius:18px}
  .vscol.links{border-right:1px solid var(--line)}
  .trustgrid{grid-template-columns:repeat(2,1fr);gap:26px}
  .trustgrid b{font-size:36px}
  .fgrid{grid-template-columns:1fr 1fr;gap:26px}
  h1{font-size:37px;letter-spacing:-1.2px}
  .sec-h,.ctabox h2{font-size:29px}
  .navlinks{display:none}
  .navlinks.show{display:flex;position:absolute;top:74px;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;gap:0;padding:12px 22px 20px;border-bottom:1px solid var(--line);box-shadow:0 16px 40px rgba(20,22,58,.12);max-height:calc(100vh - 74px);overflow-y:auto}
  .navlinks.show>a,.navlinks.show .mega{width:100%;padding:11px 0;border-bottom:1px solid var(--line)}
  .navlinks.show .mega>button{width:100%;justify-content:space-between}
  .megapanel{position:static;transform:none;width:100%;box-shadow:none;border:none;padding:6px 0 0;grid-template-columns:1fr;display:none;opacity:1;visibility:visible}
  .mega.open .megapanel{display:block;transform:none}
  .burger{display:flex}
  .nav-cta .btn-tel,.nav-cta .btn-wa{display:none}
  section{padding:56px 0}
  .staffel{grid-template-columns:1fr 1fr}
  .rrow2{grid-template-columns:1fr;gap:8px;padding:16px 18px}
  .rpfeil{text-align:left;transform:rotate(90deg);width:18px}
  .hero{padding:40px 0 46px}
  .mcb{display:flex}
  body{padding-bottom:66px}
  .artikel h2{font-size:23px}
  .artikel p,.artikel ul,.artikel ol{font-size:16px}
}
@media(max-width:700px){
  .logo .slogan{display:none}
  .ptable.preise th:nth-child(2),.ptable.preise td:nth-child(2),.ptable.preise th:nth-child(4),.ptable.preise td:nth-child(4){display:none}
}
@media(max-width:560px){
  .fgrid{grid-template-columns:1fr}
}
@media(max-width:420px){
  h1{font-size:30px}
  .konfig,.rcalc{padding:22px 18px}
  .brcard,.card,.vscol{padding:20px 18px}
  .brhead h3{font-size:18px}
  .wrap,.wrap-s{padding:0 16px}
  .sec-h,.ctabox h2{font-size:25px}
  .trustgrid b{font-size:32px}
  .iphone{width:250px}
}