/* Lokal eingebettete Schriften - kein Request an Google.
   Variable Schnitte: ein Gewichtsbereich je Datei. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../assets/fonts/inter-100-900-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../assets/fonts/inter-100-900-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(../assets/fonts/plus-jakarta-sans-200-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(../assets/fonts/plus-jakarta-sans-200-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --navy:#0D2740;
  --navy-deep:#081C30;
  --blue:#2C6FA8;
  --blue-bright:#3E8FD4;
  --sky:#A9D3F2;
  --ice:#EEF6FC;
  --ice-2:#E2EFF9;
  --paper:#FFFFFF;
  --ink:#13293D;
  --ink-soft:#4A6076;
  --line:rgba(19,41,61,.14);
  --line-light:rgba(255,255,255,.16);
  --ok:#1E9E6A;
  --flag:#C05A3C;
  --tp:#00B67A;
  --font-head:"Plus Jakarta Sans","Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
#pruefung,#ablauf,#rechner,#preis,#faq,#stimmen,#top{scroll-margin-top:106px}
body{font-family:var(--font-body);color:var(--ink);background:var(--paper);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--font-head);font-weight:700;line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
h2{font-size:clamp(28px,3.6vw,40px);margin-bottom:18px;max-width:660px}
p{max-width:640px}
a{color:inherit}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:16px;display:block}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-body);font-weight:600;font-size:16px;padding:15px 26px;border-radius:10px;border:none;cursor:pointer;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 26px rgba(44,111,168,.35)}
.btn-primary:hover{background:var(--blue-bright);transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{transform:translateY(-2px)}

/* ===== Header ===== */
header{position:sticky;top:0;z-index:50;background:rgba(238,246,252,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:18px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand .mark{width:36px;height:32px;display:block;flex:none}
.brand span{font-family:var(--font-head);font-weight:700;font-size:20.5px;letter-spacing:-.01em;color:var(--navy)}
.nav-links{display:flex;align-items:center;gap:26px;font-size:15px;font-weight:500}
.nav-links a{text-decoration:none;color:var(--ink-soft)}
.nav-links a:hover{color:var(--navy)}
.nav-links .tel{color:var(--navy);font-weight:600}
.nav .btn{padding:11px 20px;font-size:15px}
/* Ausblenden der Navigation entfernt - siehe Burger-Menü weiter unten. */

/* ===== Hero ===== */
.hero{background:linear-gradient(170deg,var(--navy) 0%,var(--navy-deep) 80%);color:#fff;padding:84px 0 92px;position:relative}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;position:relative}
.hero .eyebrow{color:var(--sky)}
.hero h1{font-size:clamp(31px,3.6vw,44px);margin-bottom:18px;max-width:560px;color:#fff}
.hero h1 em{font-style:normal;color:var(--sky)}
.hero h1 .mk{display:inline-block;background:#F5C84C;color:var(--navy-deep);padding:1px 14px 4px;border-radius:9px;transform:rotate(-1.4deg);font-style:normal}
.hero .sub{font-size:17.5px;color:rgba(255,255,255,.82);margin-bottom:26px;max-width:520px}
.checks{list-style:none;display:grid;gap:12px;margin-bottom:30px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:rgba(255,255,255,.92)}
.checks .c{flex:none;width:24px;height:24px;border-radius:7px;background:rgba(62,143,212,.22);border:1px solid rgba(169,211,242,.4);color:var(--sky);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;margin-top:2px}
.hero-proof{display:flex;align-items:center;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line-light);padding-top:24px}
.tp-badge{display:inline-flex;align-items:center;gap:9px;text-decoration:none;background:rgba(0,182,122,.14);border:1px solid rgba(0,182,122,.45);padding:10px 15px;border-radius:9px;color:#fff;font-size:13.5px;font-weight:600;white-space:nowrap;line-height:1;transition:transform .18s ease,background .18s ease,border-color .18s ease}
.tp-badge:hover{transform:translateY(-2px);background:rgba(0,182,122,.24);border-color:rgba(0,182,122,.8)}
.tp-badge .stars{color:var(--tp);letter-spacing:1.5px;margin-right:-1.5px;font-size:13px}

/* Formular */
.form-card{background:var(--paper);color:var(--ink);border-radius:16px;padding:26px 28px 24px;box-shadow:0 34px 80px rgba(3,15,28,.45)}
@keyframes formglow{0%{box-shadow:0 0 0 0 rgba(62,143,212,0),0 34px 80px rgba(3,15,28,.45)}22%{box-shadow:0 0 0 4px rgba(62,143,212,.45),0 34px 80px rgba(3,15,28,.45)}100%{box-shadow:0 0 0 4px rgba(62,143,212,0),0 34px 80px rgba(3,15,28,.45)}}
.form-card.flash{animation:formglow 2.2s ease}
@media(prefers-reduced-motion:reduce){.form-card.flash{animation:none}}
.form-card h2{font-size:21px;margin-bottom:16px;max-width:none;letter-spacing:-.01em}
.field{margin-bottom:12px}
.field label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.field input{width:100%;border:none;border-bottom:1.5px solid var(--line);background:transparent;padding:8px 2px 9px;font-family:var(--font-body);font-size:16px;color:var(--ink);border-radius:0}
.field input:focus{outline:none;border-bottom-color:var(--blue)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-soft);margin:16px 0}
.consent input{margin-top:3px;accent-color:var(--blue)}
.consent a{color:var(--blue)}
.form-card .btn{width:100%}
@media(max-width:920px){
  .hero .wrap{grid-template-columns:1fr}
  .hero{padding:52px 0 64px}
}

/* ===== Trustbar ===== */
.trustbar{background:#fff;border-bottom:1px solid var(--line)}
.trustbar .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:30px 24px}
.stat{text-align:center}
.stat .v{font-family:var(--font-head);font-weight:700;font-size:clamp(24px,2.6vw,32px);color:var(--navy);letter-spacing:-.01em}
.stat .l{font-size:13px;color:var(--ink-soft);margin-top:3px}
@media(max-width:720px){.trustbar .wrap{grid-template-columns:repeat(2,1fr);row-gap:22px}}

/* ===== Sections ===== */
section{padding:84px 0}
.sec-ice{background:var(--ice)}
.sec-navy{background:linear-gradient(160deg,var(--navy),var(--navy-deep));color:#fff}
.sec-navy h2{color:#fff}
.sec-navy .eyebrow{color:var(--sky)}

/* Pain + Rechner */
.pain-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:start}
.pain-list{list-style:none;display:grid;gap:16px;margin:26px 0 30px}
.pain-list li{display:flex;gap:13px;align-items:flex-start}
.pain-list .x{flex:none;width:26px;height:26px;border-radius:8px;background:rgba(192,90,60,.1);color:var(--flag);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;margin-top:2px}
.quote{border-left:3px solid var(--blue);padding:4px 0 4px 20px;font-size:15.5px;color:var(--ink-soft)}
.quote b{color:var(--ink)}
.quote .src{display:block;margin-top:8px;font-size:13px}

.calc{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:28px 28px 24px;box-shadow:0 22px 55px rgba(13,39,64,.1)}
.calc .eyebrow{margin-bottom:8px}
.calc h3{font-size:21px;margin-bottom:16px;line-height:1.3}
.calc .row{margin-bottom:18px}
.calc label{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px}
.calc label .num-wrap{display:flex;align-items:baseline;gap:4px;font-family:var(--font-body);font-weight:700;font-size:15px;color:var(--ink);letter-spacing:0;text-transform:none}
.calc input.num{width:60px;text-align:right;border:none;border-bottom:1px dashed rgba(19,41,61,.4);background:transparent;font-family:var(--font-body);font-weight:700;font-size:15px;color:var(--ink);padding:0 1px 1px}
.calc input.num:focus{outline:none;border-bottom:1px solid var(--blue)}
.calc input.num::-webkit-outer-spin-button,.calc input.num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc input.num[type=number]{-moz-appearance:textfield;appearance:textfield}
.calc input[type=range]{width:100%;accent-color:var(--blue)}
.calc-sublabel{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.del-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.del-cell{display:flex;align-items:baseline;gap:8px;border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--ice);cursor:text}
.del-cell:focus-within{border-color:var(--blue)}
.del-cell span{font-size:12px;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.del-cell input{border:none;background:transparent;width:100%;text-align:right;font-family:var(--font-body);font-weight:700;font-size:15px;color:var(--ink);padding:0}
.del-cell input:focus{outline:none}
.del-cell input::-webkit-outer-spin-button,.del-cell input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.del-cell input[type=number]{-moz-appearance:textfield;appearance:textfield}
.rev-chip{display:none;font-size:13px;font-weight:600;color:var(--ink);background:var(--ice);border:1px solid var(--ice-2);border-radius:8px;padding:8px 12px;margin-bottom:16px}
.rev-chip.show{display:inline-block}
.q-progress{display:flex;gap:6px;margin:4px 0 18px}
.qp{height:4px;flex:1;border-radius:99px;background:var(--ice-2);transition:background .25s ease}
.qp.on{background:var(--blue)}
.q-text{font-weight:700;font-size:16.5px;color:var(--ink);margin-bottom:13px;max-width:none}
.q-answers{display:grid;gap:9px}
.q-btn{text-align:left;font-family:var(--font-body);font-size:14.5px;font-weight:600;padding:12px 15px;border:1.5px solid var(--line);border-radius:10px;background:var(--ice);color:var(--ink);cursor:pointer;transition:border-color .15s ease,background .15s ease}
.q-btn:hover{border-color:var(--blue);background:#fff}
.q-score{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:12px}
.q-pct-label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.q-pct{font-family:var(--font-head);font-weight:800;font-size:42px;line-height:1;color:var(--ok);letter-spacing:-.01em}
.q-score .tier{margin-bottom:7px}
.q-res-text{font-size:14.5px;color:var(--ink-soft);margin:2px 0 16px;max-width:none}
.q-cta{width:100%}
.q-restart{display:block;margin:12px auto 0;background:none;border:none;font-family:var(--font-body);font-size:13px;color:var(--ink-soft);text-decoration:underline;cursor:pointer}
.q-disclaimer{font-size:12.5px;color:var(--ink-soft);margin-top:18px;border-top:1px dashed var(--line);padding-top:13px;line-height:1.5}
.verdict{display:flex;align-items:center;gap:10px;margin:22px 0 12px}
.v-label{font-size:14px;font-weight:700;color:var(--ink)}
.tier{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:7px;background:rgba(192,90,60,.1);border:1px solid rgba(192,90,60,.35);color:var(--flag)}
.tier.t-mid{background:rgba(62,143,212,.1);border-color:rgba(62,143,212,.35);color:var(--blue)}
.tier.t-ok{background:rgba(30,158,106,.1);border-color:rgba(30,158,106,.35);color:var(--ok)}
.findings{list-style:none;display:grid;gap:9px;background:var(--ice);border:1px solid var(--ice-2);border-radius:10px;padding:14px 16px;font-size:13.5px;color:var(--ink-soft);line-height:1.55}
.findings li{display:flex;gap:9px;align-items:flex-start}
.findings li::before{content:"›";font-weight:800;color:var(--blue);flex:none}
.findings b{color:var(--ink)}
.calc-cta{font-size:15px;margin-top:16px;line-height:1.55}
.calc-cta b{color:var(--navy)}
@media(max-width:920px){.pain-grid{grid-template-columns:1fr}}
@media(max-width:420px){
  .idx-grid{grid-template-columns:1fr}
  .del-grid{gap:8px}
  .del-cell{padding:8px 10px}
}

/* ===== Ablauf + Prüfakte ===== */
.process-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.process-grid .file-card{margin-top:64px}
.steps{counter-reset:s;display:grid;gap:0;margin-top:8px}
.step{position:relative;padding:22px 0 22px 62px;border-bottom:1px solid var(--line-light)}
.step:last-child{border-bottom:none}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;left:0;top:22px;font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--sky);border:1px solid rgba(169,211,242,.4);border-radius:9px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:rgba(62,143,212,.14)}
.step h3{font-size:18.5px;margin-bottom:7px;color:#fff}
.step p{font-size:15px;color:rgba(255,255,255,.75);max-width:460px}
.step .tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:4px 9px;border-radius:6px;background:rgba(0,182,122,.16);border:1px solid rgba(0,182,122,.4);color:#7CDDB6;margin-left:8px;vertical-align:2px}
.step .tag-pay{background:rgba(62,143,212,.16);border-color:rgba(169,211,242,.45);color:var(--sky)}

/* Prüfakte (Signature-Animation) */
.file-card{background:#fff;color:var(--ink);border-radius:14px;box-shadow:0 34px 80px rgba(3,15,28,.5);overflow:hidden;font-size:14.5px}
.file-head{display:flex;justify-content:space-between;align-items:center;background:var(--ice);border-bottom:1px solid var(--line);padding:13px 20px}
.file-head .fh-l{font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.file-head .fh-r{font-size:12px;color:var(--ink-soft)}
.file-body{padding:20px 20px 22px}
.file-review{border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin-bottom:18px;background:var(--ice)}
.file-review .fr-top{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-soft);margin-bottom:5px}
.file-review .fr-top b{color:var(--ink)}
.file-review .fr-stars{color:#F4A83D;font-size:13px;letter-spacing:1px;margin-bottom:5px}
.file-review .fr-text{font-size:14px;line-height:1.5;color:var(--ink);transition:color .4s ease,text-decoration-color .4s ease;text-decoration:line-through;text-decoration-color:transparent}
.file-card.p3 .fr-text{color:#93A2B1;text-decoration-color:var(--flag)}
.file-steps{list-style:none;display:grid;gap:12px}
.file-steps li{display:flex;gap:11px;align-items:center;color:var(--ink-soft);transition:color .35s ease}
.file-steps .fs-dot{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:transparent;background:#fff;transition:all .35s ease}
.file-card.p1 .fs1,.file-card.p2 .fs1,.file-card.p2 .fs2,.file-card.p3 .fs1,.file-card.p3 .fs2,.file-card.p3 .fs3{color:var(--ink)}
.file-card.p1 .fs1 .fs-dot,.file-card.p2 .fs1 .fs-dot,.file-card.p2 .fs2 .fs-dot,.file-card.p3 .fs1 .fs-dot,.file-card.p3 .fs2 .fs-dot,.file-card.p3 .fs3 .fs-dot{background:var(--ok);border-color:var(--ok);color:#fff}
.file-result{margin-top:18px;border-top:1px dashed var(--line);padding-top:16px;display:flex;justify-content:space-between;align-items:center;opacity:0;transform:translateY(5px);transition:opacity .4s ease,transform .4s ease}
.file-card.p4 .file-result{opacity:1;transform:translateY(0)}
.file-result .fr-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;background:rgba(30,158,106,.1);border:1px solid rgba(30,158,106,.4);color:var(--ok);border-radius:8px;padding:7px 11px}
.file-result .fr-case{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.file-card *{transition:none!important}}
@media(max-width:920px){.process-grid{grid-template-columns:1fr;gap:40px}}

/* ===== Preis ===== */
.price-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;max-width:620px;margin:0 auto;padding:38px 40px;box-shadow:0 22px 55px rgba(13,39,64,.1);text-align:center}
.price-card .p-val{font-family:var(--font-head);font-weight:700;font-size:52px;color:var(--navy);letter-spacing:-.02em;line-height:1}
.price-card .p-sub{font-size:15px;color:var(--ink-soft);margin:8px 0 24px}
.price-list{list-style:none;display:grid;gap:11px;text-align:left;max-width:380px;margin:0 auto 26px}
.price-list li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px}
.price-list .c{flex:none;width:22px;height:22px;border-radius:7px;background:rgba(30,158,106,.1);color:var(--ok);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;margin-top:2px}
.price-card .p-pak{font-size:13.5px;color:var(--ink-soft);margin-top:16px}

/* ===== Testimonials ===== */
.tp-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:34px}
.tp-sum{display:inline-flex;align-items:center;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px 20px;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease}
.tp-sum:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(13,39,64,.12)}
.tp-sum .s{color:var(--tp);font-size:17px;letter-spacing:2px}
.tp-sum .t{font-size:14.5px;color:var(--ink-soft)}
.tp-sum .t b{color:var(--ink)}
.marquee{overflow:hidden;margin:0 -24px;padding:6px 0 10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.m-track{display:flex;gap:18px;width:max-content;padding:0 24px;animation:mslide 90s linear infinite;will-change:transform}
.marquee:hover .m-track{animation-play-state:paused}
.marquee.paused .m-track{animation-play-state:paused}
@keyframes mslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .m-track{animation:none;flex-wrap:wrap;width:auto}
  .m-track .testi:nth-child(n+5){display:none}
}
.testi{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:24px 26px;width:420px;flex:none;transition:transform .16s ease,box-shadow .16s ease}
.testi:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(13,39,64,.12)}
.testi .t-link{position:absolute;inset:0;border-radius:inherit;z-index:1}
.testi .stars{color:var(--tp);letter-spacing:2px;font-size:14px;margin-bottom:11px}
.testi p{font-size:15px;line-height:1.6;color:var(--ink);margin-bottom:14px}
.testi .who{font-size:13.5px;color:var(--ink-soft)}
.testi .who b{color:var(--ink)}
@media(max-width:760px){.testi{width:78vw;padding:20px 22px}}

/* ===== Doku ===== */
.doc-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.doc-points{list-style:none;display:grid;gap:14px;margin-top:24px}
.doc-points li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:rgba(255,255,255,.88)}
.doc-points .c{flex:none;width:24px;height:24px;border-radius:7px;background:rgba(0,182,122,.16);border:1px solid rgba(0,182,122,.4);color:#7CDDB6;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;margin-top:2px}
.doc-card{background:#fff;color:var(--ink);border-radius:14px;padding:24px 26px;box-shadow:0 34px 80px rgba(3,15,28,.5)}
.doc-card .dc-h{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}
.doc-card .dc-row{display:flex;justify-content:space-between;font-size:14px;padding:7px 0}
.doc-card .dc-row span{color:var(--ink-soft)}
.doc-card .dc-row b{font-variant-numeric:tabular-nums}
.doc-card .dc-ok{margin-top:12px;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;background:rgba(30,158,106,.1);border:1px solid rgba(30,158,106,.4);color:var(--ok);border-radius:8px;padding:7px 11px}
@media(max-width:920px){.doc-grid{grid-template-columns:1fr;gap:40px}}

/* ===== FAQ ===== */
.faq-list{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:21px 4px;font-family:var(--font-head);font-weight:600;font-size:17.5px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .ic{flex:none;width:26px;height:26px;border-radius:8px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--ink-soft);transition:transform .2s ease}
.faq-item[open] summary .ic{transform:rotate(45deg);border-color:var(--blue);color:var(--blue)}
.faq-item .a{padding:0 4px 22px;color:var(--ink-soft);font-size:15.5px;max-width:640px}

/* ===== Final CTA ===== */
.final{text-align:center}
.final h2{font-size:clamp(28px,3.8vw,42px);max-width:720px;margin:0 auto 18px}
.final p{margin:0 auto 30px;color:rgba(255,255,255,.8);max-width:520px;text-wrap:balance}

/* ===== Footer ===== */
footer{background:var(--navy-deep);color:rgba(255,255,255,.6);padding:44px 0;font-size:13.5px}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
footer a{color:rgba(255,255,255,.75);text-decoration:none;margin-right:20px}
footer a:hover{color:#fff}
.foot-brand{display:flex;align-items:center;gap:10px}
.foot-brand .mark{width:28px;height:25px;display:block}
.foot-brand span{font-family:var(--font-head);font-weight:700;font-size:17px;color:#fff}
.foot-legal{width:100%;font-size:12.5px;color:rgba(255,255,255,.45);margin-top:8px}

/* Sticky Mobile CTA + WhatsApp */
.sticky-cta{display:none}
@media(max-width:760px){
  .sticky-cta{display:block;position:fixed;bottom:0;left:0;right:0;z-index:60;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .sticky-cta .btn{width:100%}
  footer{padding-bottom:calc(44px + 78px + env(safe-area-inset-bottom))}
}
.wa{position:fixed;right:22px;bottom:22px;z-index:55;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .18s}
.wa:hover{transform:scale(1.07)}
.wa svg{width:30px;height:30px;fill:#fff}
@media(max-width:760px){.wa{bottom:calc(86px + env(safe-area-inset-bottom))}}


/* ==========================================================================
   Ergänzungen: mobiles Menü, Cookiebanner, Formularstatus, Rechtsseiten.
   Alles darunter arbeitet mit den --ui-* Variablen, damit derselbe Block
   für beide Marken funktioniert.
   ========================================================================== */

:root{
  --ui-panel:#fff;
  --ui-soft:var(--ice);
  --ui-ink:var(--ink);
  --ui-ink-soft:var(--ink-soft);
  --ui-line:var(--line);
  --ui-accent:var(--blue);
  --ui-accent-ink:#fff;
  --ui-ok:var(--ok);
  --ui-flag:var(--flag);
  --ui-radius:10px;
  --ui-font-head:var(--font-head);
  --ui-font-body:var(--font-body);
}

/* --- Kein waagerechtes Scrollen ------------------------------------------
   Auf schmalen Geräten schob bisher ein zu breites Element die ganze Seite
   nach rechts - sichtbar als weißer Streifen neben dem Inhalt. */
html,body{max-width:100%;overflow-x:clip}
@supports not (overflow-x:clip){html,body{overflow-x:hidden}}
img,svg,video,canvas{max-width:100%}

/* Die eigentliche Ursache: der Trustpilot-Nachweis stand per white-space:nowrap
   auf einer einzigen Zeile und war damit 358 px breit. Da er im selben Raster
   wie der Rest des Hero-Bereichs liegt, hat er die gesamte Spalte - und damit
   die Seite - über die Displaybreite hinausgezogen. Das war der weiße Streifen
   rechts neben dem Inhalt. */
@media(max-width:560px){
  .tp-badge{white-space:normal;line-height:1.45;align-items:flex-start}
  .tp-badge .stars{flex:none}
}

/* Sehr schmale Geräte (iPhone SE, 320 px). Kinder eines Rasters haben von
   Haus aus min-width:auto - ein langes Wort oder ein Zahlenfeld zieht damit
   die ganze Spalte auf und schiebt die Seite über den Displayrand. */
@media(max-width:430px){
  .wrap>*,.wrap>*>*,.calc,.calc>*,.g-cards>*,.del-grid>*,.steps>*{min-width:0}
  h1,h2,h3,p,li,address,.q-text,.tb-label{overflow-wrap:break-word}
}

/* --- Sprunglink für Tastatur und Screenreader --------------------------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;
  background:var(--ui-accent);color:var(--ui-accent-ink);font-weight:600;
  border-radius:0 0 var(--ui-radius) 0;text-decoration:none}
.skip-link:focus{left:0}

/* ==========================================================================
   Mobiles Menü
   ========================================================================== */

.nav-toggle{display:none;align-items:center;gap:9px;background:none;border:none;
  cursor:pointer;padding:9px 4px;font-family:var(--ui-font-body);font-size:14px;
  font-weight:600;color:var(--ui-ink);-webkit-tap-highlight-color:transparent}
.nav-toggle-bars{display:block;width:22px;height:15px;position:relative;flex:none}
.nav-toggle-bars span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:currentColor;transition:transform .22s ease,opacity .18s ease,top .22s ease}
.nav-toggle-bars span:nth-child(1){top:0}
.nav-toggle-bars span:nth-child(2){top:6.5px}
.nav-toggle-bars span:nth-child(3){top:13px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){top:6.5px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){top:6.5px;transform:rotate(-45deg)}
.nav-toggle:focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px;border-radius:6px}

/* Die eingeklappte Schaltfläche im Panel taucht nur mobil auf. */
.nav-cta-inline{display:none}

@media(max-width:920px){
  /* Wortmarke links, Schaltfläche und Burger als Gruppe rechts - sonst
     steht die Schaltfläche zwischen beiden in der Luft. */
  .nav-toggle{display:inline-flex;order:3;margin-left:14px}
  .nav-cta{margin-left:auto}

  /* Aus der Navigationsleiste wird ein Panel unter dem Kopfbereich. */
  .nav-links{position:absolute;left:0;right:0;top:100%;display:block;
    background:var(--ui-panel);border-bottom:1px solid var(--ui-line);
    box-shadow:0 18px 40px rgba(0,0,0,.14);
    padding:8px 24px 20px;margin:0;list-style:none;
    max-height:0;overflow:hidden;opacity:0;visibility:hidden;
    transition:max-height .26s ease,opacity .2s ease,visibility 0s linear .26s}
  body.nav-open .nav-links{max-height:min(72vh,520px);opacity:1;visibility:visible;
    overflow-y:auto;transition:max-height .26s ease,opacity .2s ease,visibility 0s}

  .nav-links li{display:block}
  .nav-links a,.nav-links li>a{display:block;padding:13px 0;font-size:16.5px;
    border-bottom:1px solid var(--ui-line);color:var(--ui-ink)}
  .nav-links li:last-child a,.nav-links a:last-child{border-bottom:none}

  /* Telefonnummer und Schaltfläche kommen ans Ende des Panels. */
  .nav-links .tel,.nav-links .nav-phone{font-weight:600;color:var(--ui-accent)}
  .nav-cta-inline{display:block;margin-top:16px;text-align:center;border-bottom:none}
  .nav-links .nav-cta{display:block;margin-top:16px;text-align:center;border-bottom:none}

  header{position:sticky}
  .nav{position:relative}
}

/* Auf sehr schmalen Geräten drängelten sich Wortmarke und Schaltfläche.
   Die Dauer-Schaltfläche am unteren Rand übernimmt dort den Job. */
@media(max-width:600px){
  .nav-cta{display:none}
  .nav-toggle-text{display:none}
  .nav-toggle{padding:10px 2px}
}

/* ==========================================================================
   Cookiebanner
   ========================================================================== */

.cc{position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:var(--ui-panel);color:var(--ui-ink);
  border-top:1px solid var(--ui-line);
  box-shadow:0 -18px 50px rgba(0,0,0,.18);
  padding:20px 0 calc(20px + env(safe-area-inset-bottom));
  font-size:14.5px;line-height:1.6;
  animation:cc-in .3s ease}
.cc[hidden]{display:none}
@keyframes cc-in{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.cc{animation:none}}

.cc-inner{max-width:1140px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.cc-copy{flex:1 1 420px;min-width:0}
.cc-title{font-family:var(--ui-font-head);font-size:17px;font-weight:700;
  margin:0 0 6px;letter-spacing:-.01em;max-width:none}
.cc-text{margin:0;color:var(--ui-ink-soft);max-width:64ch}
.cc-text a{color:var(--ui-accent);text-decoration:underline}

.cc-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;flex:0 0 auto}
.cc-btn{font-family:var(--ui-font-body);font-size:14.5px;font-weight:600;
  padding:12px 20px;border-radius:var(--ui-radius);border:1.5px solid transparent;
  cursor:pointer;white-space:nowrap;transition:transform .15s ease,background .15s ease}
.cc-btn:hover{transform:translateY(-1px)}
.cc-btn:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}

/* Zustimmen und Ablehnen sind bewusst gleich gestaltet. Wäre das Ablehnen
   unauffälliger, wäre die Einwilligung nach DSGVO nicht freiwillig. */
.cc-btn-primary{background:var(--ui-accent);color:var(--ui-accent-ink)}
.cc-btn-ghost{background:transparent;color:var(--ui-ink-soft);
  border-color:var(--ui-line);text-decoration:underline}

.cc-settings{max-width:1140px;margin:18px auto 0;padding:18px 24px 0;
  border-top:1px solid var(--ui-line)}
.cc-settings[hidden]{display:none}
.cc-list{list-style:none;display:grid;gap:14px;margin:0 0 18px;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cc-opt{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  background:var(--ui-soft);border:1px solid var(--ui-line);
  border-radius:var(--ui-radius);padding:13px 15px;font-size:13.5px;
  color:var(--ui-ink-soft);line-height:1.5}
.cc-opt b{color:var(--ui-ink)}
.cc-opt input{margin-top:3px;flex:none;accent-color:var(--ui-accent);width:17px;height:17px}
.cc-opt input:disabled{opacity:.55}
.cc-save{width:auto}

@media(max-width:760px){
  .cc{max-height:82vh;overflow-y:auto}
  .cc-inner{gap:16px}
  .cc-actions{width:100%}
  .cc-btn{flex:1 1 auto;text-align:center}
  .cc-btn-ghost{flex-basis:100%}
  /* Die Dauer-Schaltfläche am unteren Rand würde sonst darunter liegen. */
  body:has(.cc:not([hidden])) .sticky-cta{display:none}
}

/* ==========================================================================
   Kontaktformular
   ========================================================================== */

/* Honigtopf gegen Bots: für Menschen unsichtbar, für Skripte verlockend.
   display:none würde von manchen Bots erkannt - daher aus dem Bild geschoben. */
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;
  height:1px!important;overflow:hidden!important}

.form-status{margin:14px 0 0;font-size:14px;line-height:1.55;max-width:none}
.form-status:empty{display:none}
.form-status.is-ok{color:var(--ui-ok);font-weight:600}
.form-status.is-error{color:var(--ui-flag);font-weight:600}

/* ==========================================================================
   Rechtsseiten (AGB, Datenschutz, Impressum)
   ========================================================================== */

.page{padding:56px 0 88px;background:var(--ui-soft);min-height:60vh}
.page>.wrap{max-width:880px}
.page h1{font-family:var(--ui-font-head);font-size:clamp(30px,4.4vw,42px);
  margin-bottom:10px;color:var(--ui-ink)}
.page-sub{color:var(--ui-ink-soft);font-size:17px;margin-bottom:32px;max-width:60ch}

.legal-card{background:var(--ui-panel);border:1px solid var(--ui-line);
  border-radius:var(--ui-radius);padding:clamp(24px,4vw,46px);
  box-shadow:0 18px 44px rgba(0,0,0,.06)}

/* Die Startseite gibt jedem <section> großzügige Abstände. Innerhalb der
   Rechtstexte wären das seitenlange Lücken - hier also zurücksetzen. */
.legal-card section{padding:0;margin:0 0 30px}
.legal-card section:last-child{margin-bottom:0}
.legal-card h2{font-family:var(--ui-font-head);font-size:19.5px;font-weight:700;
  margin:0 0 10px;color:var(--ui-ink);max-width:none;letter-spacing:-.005em}
.legal-card h3{font-size:16.5px;margin:18px 0 8px;color:var(--ui-ink)}
.legal-card p,.legal-card li,.legal-card address{color:var(--ui-ink-soft);
  font-size:15.5px;line-height:1.7;max-width:72ch}
.legal-card p{margin-bottom:11px}
.legal-card p:last-child{margin-bottom:0}
.legal-card address{font-style:normal;background:var(--ui-soft);
  border-left:3px solid var(--ui-accent);border-radius:0 8px 8px 0;
  padding:13px 17px;margin:4px 0}
.legal-card ul,.legal-card ol{margin:4px 0 12px;padding-left:22px}
.legal-card li{margin-bottom:6px}
.legal-card a{color:var(--ui-accent);text-decoration:underline;
  overflow-wrap:anywhere}
.legal-card strong,.legal-card b{color:var(--ui-ink)}

/* Hinweiskasten für Stellen, die noch anwaltlich freigegeben werden. */
.legal-note{background:var(--ui-soft);border:1px dashed var(--ui-accent);
  border-radius:var(--ui-radius);padding:14px 17px;margin:16px 0;
  font-size:14.5px;color:var(--ui-ink-soft)}

.legal-updated{margin-top:26px;font-size:13.5px;color:var(--ui-ink-soft)}

/* --- Danke-Seite --------------------------------------------------------- */
.danke{text-align:center}
.danke .legal-card{max-width:640px;margin:0 auto;text-align:left}
.danke-icon{width:64px;height:64px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;margin:0 auto 22px;
  background:var(--ui-accent);color:var(--ui-accent-ink);font-size:31px}

/* ==========================================================================
   Fußbereich
   ========================================================================== */

.foot-nav{display:flex;align-items:center;gap:0 20px;flex-wrap:wrap}
.foot-cc{background:none;border:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:inherit;color:rgba(255,255,255,.75);
  text-decoration:underline;text-underline-offset:2px}
.foot-cc:hover{color:#fff}
.foot-cc:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ==========================================================================
   WhatsApp-Knopf
   ========================================================================== */

/* Erscheint bewusst erst nach ein paar Sekunden: Wer gerade erst gelandet
   ist, soll den Einstieg lesen und nicht sofort angesprungen werden. */
.wa{position:fixed;right:20px;bottom:20px;z-index:55;
  width:56px;height:56px;border-radius:50%;
  background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(20,90,45,.28),0 12px 30px rgba(0,0,0,.16);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.8);
  transition:opacity .5s ease,
             transform .5s cubic-bezier(.2,.9,.25,1),
             box-shadow .22s ease,
             visibility 0s linear .5s}
.wa.ist-da{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.wa:hover{transform:translateY(-3px) scale(1.05);
  box-shadow:0 5px 14px rgba(20,90,45,.34),0 18px 40px rgba(0,0,0,.22)}
.wa:active{transform:translateY(-1px) scale(1.01)}
.wa:focus-visible{outline:3px solid #fff;outline-offset:3px}
.wa svg{width:29px;height:29px;fill:#fff;display:block}

/* Beschriftung, die erst beim Darüberfahren herauswächst - der Knopf bleibt
   dadurch ruhig, erklärt sich aber, sobald jemand hinsieht. */
.wa::before{content:"Schreiben Sie uns";position:absolute;
  right:calc(100% + 12px);top:50%;translate:0 -50%;
  white-space:nowrap;background:var(--ui-ink);color:#fff;
  padding:9px 13px;border-radius:9px;
  font-family:var(--ui-font-body);font-size:13.5px;font-weight:600;
  box-shadow:0 8px 22px rgba(0,0,0,.2);
  opacity:0;translate:8px -50%;pointer-events:none;
  transition:opacity .2s ease,translate .2s ease}
.wa:hover::before,.wa:focus-visible::before{opacity:1;translate:0 -50%}

@media(max-width:760px){
  .wa{width:52px;height:52px;right:16px}
  .wa svg{width:27px;height:27px}
  .wa::before{display:none}
}
@media(prefers-reduced-motion:reduce){
  .wa{transition:opacity .2s ease,visibility 0s linear .2s;transform:none}
  .wa.ist-da{transform:none}
  .wa:hover{transform:none}
}

/* ==========================================================================
   Aufleuchten beim Klick auf eine Schaltfläche
   ========================================================================== */

/* Aufleuchten beim Klick.
   Zwei frühere Anläufe blieben unsichtbar: erst lag der Effekt per
   z-index:-1 hinter dem Knopf, dann haengte er an einem Farbverlauf mit
   var(--klick-x) - wurde diese Variable ungueltig (etwa "Infinity%"),
   fiel die gesamte background-Angabe aus und man sah nichts. Jetzt eine
   schlichte Flaeche, die aufblitzt und verschwindet. Da kann nichts mehr
   danebengehen. */
.btn,.cc-btn,.nav-cta{position:relative;overflow:hidden}
.btn::after,.cc-btn::after,.nav-cta::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;background:#fff;opacity:0}
.btn.leuchtet::after,.cc-btn.leuchtet::after,.nav-cta.leuchtet::after{
  animation:btn-leuchten .5s ease-out}
@keyframes btn-leuchten{
  0%{opacity:.5}
  35%{opacity:.32}
  100%{opacity:0}
}
/* Helle Schaltflaechen brauchen einen dunklen Blitz, sonst sieht man nichts. */
.btn-light::after,.btn-cream::after,.cc-btn-ghost::after{background:#000}
.btn-light.leuchtet::after,.btn-cream.leuchtet::after,.cc-btn-ghost.leuchtet::after{
  animation:btn-leuchten-dunkel .5s ease-out}
@keyframes btn-leuchten-dunkel{
  0%{opacity:.22}
  35%{opacity:.14}
  100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .btn.leuchtet::after,.cc-btn.leuchtet::after,.nav-cta.leuchtet::after{animation:none}
}

/* ==========================================================================
   Das Versprechen unter dem Formular
   ========================================================================== */

.speed-promise{align-items:flex-start;gap:11px;font-size:13px;line-height:1.55;
  padding:13px 15px;text-wrap:pretty}
.speed-promise>span{min-width:0}
.promise-icon{flex:none;width:17px;height:17px;margin-top:1px;
  stroke:var(--ui-accent);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
/* Auf schmalen Kästen sonst zerrissene Zeilen. Zwischen 920 und 1080px
   steht das Formular noch in der schmalen zweiten Spalte - dort bleiben
   innen nur rund 340px, und der Kasten lief auf drei Zeilen. Weniger
   Polsterung und Abstand geben die fehlende Breite zurück. */
@media(max-width:1080px){
  .speed-promise{font-size:12.5px;line-height:1.5;gap:8px;padding:12px 12px}
  .promise-icon{width:16px;height:16px}
}

/* ==========================================================================
   Nur für diese Marke
   ========================================================================== */
/* ---- Hero-Absatz: gleichmäßige Zeilen ----
   Die dritte Zeile brach auf zwei Wörter herunter und ließ den Absatz
   ausgefranst wirken. balance verteilt die Wörter gleichmäßig auf alle
   Zeilen, statt jede Zeile bis zum Anschlag zu füllen. */
.hero .sub{text-wrap:balance}

/* ---- Formularkarte war 82px kürzer als die linke Spalte ----
   Gemessen bei 1512px: links 557px, Karte 475px. Der Karte fehlten die
   beiden Elemente, die mono. schon hatte - die Unterzeile zur Überschrift
   und die Fußnote unter dem Knopf. Beide schließen die Lücke und sagen
   zugleich das, was Interessenten an dieser Stelle wissen wollen. */
.form-card .form-sub{font-size:13.5px;color:var(--ink-soft);
  margin:-9px 0 15px;line-height:1.45;text-wrap:balance}

/* Fußnote unter dem Knopf: bewusst ohne Fläche und Rahmen, damit sie
   nicht als zweiter Kasten mit dem Knopf konkurriert. */
.speed-promise{display:flex;align-items:flex-start;gap:10px;
  border-top:1px solid var(--ui-line);margin-top:14px;padding:12px 2px 0;
  font-size:12.5px;line-height:1.5;color:var(--ink-soft);text-wrap:balance}
.speed-promise>span{min-width:0}
.speed-promise strong{color:var(--ink)}
.promise-icon{flex:none;width:17px;height:17px;margin-top:1px;
  stroke:var(--ink-soft);fill:none;stroke-width:1.7;opacity:.85;
  stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================================
   Zeilenumbrüche auf dem Handy
   ========================================================================== */

/* Der Browser füllt jede Zeile bis zum Anschlag und lässt dadurch die
   letzte Zeile als Rest übrig - "von Google.", "7 Tagen", "Trustpilot"
   standen so allein. balance verteilt die Wörter auf alle Zeilen gleich,
   pretty verhindert nur einzelne Schlusswörter. Beides kostet nichts und
   greift nur dort, wo tatsächlich umbrochen wird. */
.checks li,.pain-list li div,.file-steps li,.q-res-text,.q-disclaimer,
.form-card h2,.form-sub,.speed-promise,.tp-badge,.step p,.eyebrow,
.stat .l,.q-pct-label,.doc-points li,.q-score .tier{text-wrap:balance}

/* Angaben, die als Einheit lesbar bleiben muessen. */
.nowrap{white-space:nowrap}

/* Die Trustpilot-Zeile im Hero brach mitten in der Angabe um. */
.tp-badge{align-items:center}

@media(max-width:560px){
  /* Die Auszeichnung stand direkt an der Überschrift und wirkte wie ein
     Teil davon. Eigene Zeile mit Abstand trennt beides sichtbar. */
  .step h3{display:flex;flex-wrap:wrap;align-items:center;gap:9px 10px;
    margin-bottom:10px}
  .step h3 .tag{margin-left:0;vertical-align:baseline}

  /* Der Knopf im Schnell-Check war so breit, dass der Pfeil auf einer
     eigenen Zeile stand und die Fläche darunter leer wirkte. */
  .q-cta{padding:15px 18px;font-size:15px;text-wrap:nowrap}

  /* Prozentwert und Einschätzung standen nebeneinander und teilten sich
     die Breite ungleich auf. Untereinander liest sich beides ruhiger. */
  .q-score{flex-direction:column;align-items:flex-start;gap:12px}
  .q-score .tier{align-self:flex-start}
}
/* ==========================================================================
   Schriftwechsel unsichtbar machen
   ==========================================================================
   Gemessen am 09.08.2026: Plus Jakarta Sans ist 108,8 % so breit wie
   Arial, Inter 106,9 %. Ohne Angleichung springt das Layout beim
   Nachladen sichtbar. */
@font-face{font-family:"Jakarta Ersatz";
  src:local("Arial"),local("Helvetica"),local("sans-serif");
  size-adjust:108.8%;ascent-override:94%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Inter Ersatz";
  src:local("Arial"),local("Helvetica"),local("sans-serif");
  size-adjust:106.9%;ascent-override:94%;descent-override:24%;line-gap-override:0%}
:root{
  --font-head:"Plus Jakarta Sans","Jakarta Ersatz",Inter,system-ui,sans-serif;
  --font-body:Inter,"Inter Ersatz",system-ui,sans-serif;
}


/* ==========================================================================
   Feinschliff nach Prüfung auf dem Handy
   ========================================================================== */

/* Zwischenüberschriften waren auf schmalen Displays auf 29 px festgenagelt.
   Gemessen: der Schlusstitel brauchte dadurch fünf Zeilen, bei 24 px sind es
   drei. Die Regel greift nur unterhalb von 520 px. */
@media(max-width:520px){
  /* .final h2 hat eine eigene Regel mit hoeherer Spezifitaet und muss
     ausdruecklich mit genannt werden, sonst bleibt der Schlusstitel gross. */
  h2,.final h2{font-size:24px}
}

/* Die Antwortknöpfe im Schnell-Check hatten gar keine eigene Textfarbe und
   erbten die Browser-Vorgabe: in Chrome schwarz, in Safari blau. */
.quiz-opts button{color:var(--ui-ink)}


/* ==========================================================================
   Fußbereich: Luft statt Gedränge
   ========================================================================== */

/* Vorher standen Wortmarke, Kontakt und Links in einer einzigen Reihe mit
   space-between. Die Marke stand dadurch verloren ganz links, der Rest
   drängte sich rechts. Jetzt zwei klar getrennte Ebenen. */
footer{padding-top:52px;padding-bottom:44px}
footer .wrap{display:block}

.foot-top{display:flex;justify-content:space-between;align-items:flex-start;
  gap:32px 56px;flex-wrap:wrap;padding-bottom:28px}
.foot-right{display:flex;gap:12px 56px;flex-wrap:wrap;align-items:flex-start;
  justify-content:flex-end;flex:1 1 auto}

.foot-contact{display:flex;flex-direction:column;gap:7px}
.foot-contact a{margin-right:0}

.foot-nav{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.foot-nav a{margin-right:0}

/* Vorher stand alles in einer einzigen, sehr langen Zeile quer ueber die
   volle Breite. Zwei kurze Zeilen mit begrenzter Laufweite lesen sich
   ruhiger und wirken nicht wie ein Kleingedrucktes-Band. */
.foot-legal{width:100%;margin:0;padding-top:24px;
  border-top:1px solid var(--ui-line-fuss,rgba(255,255,255,.14));
  font-size:12.5px;line-height:1.75;max-width:none;
  display:flex;flex-direction:column;gap:3px}
.foot-legal span{max-width:70ch}

@media(max-width:760px){
  footer{padding-top:40px}
  .foot-top{flex-direction:column;gap:26px}
  .foot-right{justify-content:flex-start;gap:22px 48px}
  .foot-legal{padding-top:20px}
}


/* ==========================================================================
   Sanftes Einblenden beim Reinscrollen
   ========================================================================== */

/* Die Klasse "einblenden" setzt erst JavaScript - ohne JavaScript ist
   deshalb nichts versteckt. "ist-sichtbar" kommt, sobald der Block in den
   Blick kommt. Beides greift nur, wenn keine reduzierte Bewegung
   eingestellt ist. */
@media(prefers-reduced-motion:no-preference){
  .einblenden{opacity:0;transform:translateY(12px);
    transition:opacity .4s ease,transform .4s ease;
    will-change:opacity,transform}
  .einblenden.ist-sichtbar{opacity:1;transform:none;will-change:auto}
}


/* ==========================================================================
   Trustpilot-Nachweis
   ==========================================================================
   Vorher endete die Zeile auf "auf Trustpilot" - und genau dort brach sie
   um, sodass "auf" und "Trustpilot" untereinander standen. Statt es mit
   nowrap zu erzwingen (dann wird der Kasten zu breit), steht am Ende jetzt
   die Marke als eigene Einheit: Stern plus Wort, die nie auseinanderfallen.
   Umbrochen wird davor, wo es nicht stört. */
/* Die Marke steht VOR den Sternen und ohne eigenes Sternsymbol. Mit einem
   sechsten Stern daneben las sich die Zeile wie eine Sechs-Sterne-Wertung. */
.tp-marke{white-space:nowrap;font-weight:700;letter-spacing:-.01em}
.tp-wert{white-space:nowrap}

/* Der Kasten im Kopfbereich darf umbrechen - aber nur zwischen Wert und
   Marke, nicht mitten in einer Angabe. */
.tp-badge{flex-wrap:wrap;row-gap:4px;column-gap:9px;white-space:normal;
  line-height:1.35}

/* Die Zusammenfassung über den Stimmen: Wert oben, Anzahl und Marke
   darunter - statt eines hängenden Mittelpunkts am Zeilenende. */
.tp-zeile{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:flex-start;gap:2px 9px;margin-top:2px;text-align:left}

/* Zusammenfassung über den Stimmen: Marke als kleine Zeile darüber, dann
   Wert und Anzahl NEBENEINANDER - drei Zeilen machten die Karte zu hoch.
   Kein zusätzliches Sternsymbol an der Marke: zusammen mit den fünf
   Sternen daneben las es sich wie eine Sechs-Sterne-Wertung. */
.tp-sum .t{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.tp-sum .tp-marke{font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ui-ink-soft)}
.tp-sum .tp-zeile{display:flex;align-items:baseline;gap:9px;margin:0;flex-wrap:wrap}
.tp-sum .tp-zahl{font-size:24px;font-weight:800;letter-spacing:-.02em;
  color:var(--ui-ink);line-height:1.1}
.tp-sum .tp-anz{font-size:14px;color:var(--ui-ink-soft)}


/* ==========================================================================
   Branchenseiten
   ==========================================================================
   Eigene Adressen für einzelne Kundengruppen. Bewusst schlicht gehalten:
   Diese Seiten sollen eine Frage beantworten und zum Formular auf der
   Startseite führen, nicht die Startseite ersetzen. */

.branche .wrap{max-width:820px}
.brotkrumen{font-size:13px;color:var(--ui-ink-soft);margin-bottom:22px}
.brotkrumen a{color:var(--ui-ink-soft)}
.brotkrumen span{margin:0 4px}

.branche h1{margin:8px 0 16px;text-wrap:balance}
.br-lede{font-size:18px;line-height:1.65;color:var(--ui-ink-soft);
  margin-bottom:30px;text-wrap:pretty}
.branche h2{margin:44px 0 16px;text-wrap:balance}

/* Kennzahlen als ruhige Reihe, nicht als zweite Kennzahlenleiste. */
.br-zahlen{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  margin:0 0 28px;padding:20px 0;border-top:1px solid var(--ui-line);
  border-bottom:1px solid var(--ui-line)}
.br-zahlen b{display:block;font-family:var(--ui-font-head);font-size:26px;
  line-height:1.1;color:var(--ui-ink)}
.br-zahlen span{display:block;font-size:13px;color:var(--ui-ink-soft);margin-top:4px}

.br-cta{display:inline-block}
.br-cta-sub{font-size:13.5px;color:var(--ui-ink-soft);margin-top:10px}

.br-faelle{list-style:none;display:grid;gap:16px;margin:0;padding:0}
.br-faelle li{background:var(--ui-soft);border:1px solid var(--ui-line);
  border-radius:var(--ui-radius);padding:18px 20px}
.br-faelle strong{display:block;margin-bottom:5px;color:var(--ui-ink)}
.br-faelle span{color:var(--ui-ink-soft);font-size:15px;line-height:1.6}

.br-hinweis{margin-top:22px;padding-left:18px;border-left:3px solid var(--ui-accent);
  color:var(--ui-ink-soft);font-size:15.5px;line-height:1.65;text-wrap:pretty}

.br-ablauf{margin:0;padding-left:22px;display:grid;gap:12px;
  color:var(--ui-ink-soft);line-height:1.6}
.br-ablauf strong{color:var(--ui-ink)}

/* Aufklappbare Fragen: ohne JavaScript, das kann der Browser selbst. */
.br-faq{border-bottom:1px solid var(--ui-line);padding:2px 0}
.br-faq summary{cursor:pointer;padding:15px 0;font-weight:600;
  color:var(--ui-ink);list-style:none;display:flex;justify-content:space-between;
  gap:16px;align-items:flex-start}
.br-faq summary::-webkit-details-marker{display:none}
.br-faq summary::after{content:"+";flex:none;font-size:20px;line-height:1;
  color:var(--ui-ink-soft);transition:transform .18s ease}
.br-faq[open] summary::after{transform:rotate(45deg)}
.br-faq p{padding:0 0 16px;color:var(--ui-ink-soft);line-height:1.65;max-width:64ch}

.br-schluss{margin:48px 0 8px;padding:30px 28px;background:var(--ui-soft);
  border:1px solid var(--ui-line);border-radius:var(--ui-radius)}
.br-schluss h2{margin:0 0 10px}
.br-schluss p{color:var(--ui-ink-soft);margin-bottom:20px;text-wrap:pretty}
.br-zurueck{margin-top:26px;font-size:14px}

/* Verweisleiste auf der Startseite */
.branchen-links{border-top:1px solid var(--ui-line);padding-top:26px;margin-top:8px}
.branchen-links h3{font-size:13px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ui-ink-soft);margin-bottom:14px}
.branchen-links ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;
  margin:0;padding:0}
.branchen-links a{display:inline-block;padding:9px 15px;border-radius:99px;
  border:1px solid var(--ui-line);background:var(--ui-panel);
  font-size:14px;color:var(--ui-ink);text-decoration:none;
  transition:border-color .16s ease,transform .16s ease}
.branchen-links a:hover{border-color:var(--ui-accent);transform:translateY(-1px)}


/* Kennzahl, die zu Trustpilot führt. Der Pfeil zeigt an, dass die Seite
   gewechselt wird - ein Link ohne jeden Hinweis wird sonst übersehen. */
.stat-link{display:block;text-decoration:none;color:inherit;border-radius:10px;
  padding:6px 4px;margin:-6px -4px;transition:background .16s ease}
.stat-link:hover{background:rgba(62,143,212,.08)}
.stat-link:hover .l{color:var(--ui-accent)}
.stat-link:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.stat-pfeil{font-size:.85em;opacity:.6;margin-left:2px}
/* Nur für Vorleseprogramme, optisch nicht vorhanden. */
.nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* Senkrechter Trennstrich zwischen Marke und Wertung (mono.). Er ersetzt
   den zweiten Stern, der neben den fünf Sternen wie ein sechster wirkte. */
.tp-trenner{width:1px;align-self:stretch;min-height:18px;
  background:currentColor;opacity:.28}

/* ----- Trustpilot-Zusammenfassung, einzeilig -------------------------
   Vorher: Textsterne neben einem zweizeiligen Block. Die Sterne wurden
   damit mittig zum GANZEN Block gestellt - das Auge erwartet sie aber
   auf Hoehe der Zahl, deshalb sassen sie sichtbar zu hoch. Jetzt eine
   Zeile mit gezeichneten Sternen, deren Rahmen genau auf der Form
   liegt. Auf schmalen Schirmen darf die Zeile umbrechen. */
.tp-sum{flex-wrap:wrap;row-gap:6px;column-gap:12px}
.tp-sum .tp-star{height:14px;width:auto;flex:0 0 auto;display:block;
  color:var(--tp)}
.tp-sum .tp-marke{font-size:15px;font-weight:700;letter-spacing:-.01em;
  text-transform:none;color:var(--ui-ink)}
.tp-sum .tp-wert{font-size:14.5px;color:var(--ui-ink-soft);white-space:nowrap}
.tp-sum .tp-wert b{font-size:17px;font-weight:800;color:var(--ui-ink);
  letter-spacing:-.01em;margin-right:5px;
  /* Gemessen: die groessere Zahl sitzt auf gemeinsamer Grundlinie
     0,82 px hoeher als "Trustpilot" und die Sterne - groessere
     Versalhoehe, gleiche Grundlinie. Der Versatz gleicht die
     Versalmitten an, ohne dass es jemand als Verschiebung sieht. */
  position:relative;top:.8px}
@media(max-width:560px){
  /* Variante B: Der Kasten ist nur so breit wie sein Inhalt und bleibt
     einzeilig. Vorher lief er ueber die volle Breite, brach um und liess
     rechts eine grosse leere Flaeche stehen. Der vollstaendige Satz passt
     bei 390 px nur mit etwas kleinerer Schrift in eine Zeile. */
  .tp-sum{flex-wrap:nowrap;width:auto;padding:13px 16px;column-gap:9px}
  .tp-sum .tp-marke{font-size:13.5px}
  .tp-sum .tp-star{height:12px}
  .tp-sum .tp-wert{white-space:nowrap;font-size:13px}
  .tp-sum .tp-wert b{font-size:15px;margin-right:4px}
}