/* Lokalmagnet-LP (Lead-Gen), 1:1 nach dem Onepage-Muster (Zanker & du Hommet, 20.09.2026).
   Alle Werte per getComputedStyle von der Live-Onepage gemessen. Mobile first (390px, Inhalt 342px). */
:root{
  --akzent:#db233f;           /* Knopf-/Fortschrittsfarbe des Kunden */
  --akzent-rgb:219,35,63;
  --akzent-text:#fff;
  --akzent-dunkel-rgb:159,0,23;
  --ikon:#c70031;             /* Antwort-Icons */
  --zweit:#0071ba;            /* Zweitfarbe: Karten-Verlauf, Vorteile-Haken */
  --zweit-rgb:0,113,186;
  --tinte:#0e0e0e;
  --tinte2:#09060b;
  --grau:#7e7e7e;
  --kachel:rgba(9,6,11,.05);
  --feld:rgba(9,6,11,.07);
  --blatt:#fff;
  --hell:#f6f6f6;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,"SF Pro Text",system-ui,"Helvetica Neue","Calibri Light",Roboto,sans-serif;
  color:var(--tinte);background:var(--blatt);font-size:16px;line-height:1.5;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{color:inherit;font:inherit;-webkit-tap-highlight-color:transparent;cursor:pointer}
b,strong{font-weight:700}
.lang-wort{display:inline!important;padding:0!important;margin:0!important;font:inherit!important;color:inherit!important}
.lang-wort.an{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
h1,h2,h3,p{overflow-wrap:break-word}
.wrap{width:100%;max-width:798px;margin:0 auto;padding:0 24px}

/* ── Kopf: weiss, Logo zentriert (Onepage 115x65) ── */
.kopf{padding:12px 0;display:flex;justify-content:center;min-height:89px;align-items:center}
.kopf img{height:var(--logo-h,65px);width:auto;max-width:200px;object-fit:contain}

/* ── Einstieg ── */
.hero{text-align:center;padding:3px 24px 0}
.region{font-size:14px;line-height:21px;letter-spacing:-.4px;margin:0 0 14px}
.region span{display:block;text-decoration:underline;text-underline-offset:3px}
.hero-bild{display:block;border-radius:16px;overflow:hidden}
.hero-bild img{width:100%;aspect-ratio:2/1;object-fit:cover}
h1{font-size:24px;font-weight:700;line-height:1.2;margin:14px 0 8px}
.unter{font-size:15px;line-height:1.5;letter-spacing:-.2px}
.pfeil{display:inline-flex;width:45px;height:45px;margin:8px auto 0;color:var(--akzent);align-items:center;justify-content:center}
.pfeil svg{width:45px;height:45px}

/* ── Formularkarte: Verlauf aus Zweitfarbe (oben links) und dunklem Akzent (unten rechts) ── */
.formular{padding-top:8px}
.f-karte{background:
  radial-gradient(circle at 0% 0%,rgba(var(--zweit-rgb),.34) 0%,rgba(0,0,0,0) 70%),
  radial-gradient(circle at 100% 100%,rgba(var(--akzent-dunkel-rgb),.06) 0%,rgba(0,0,0,0) 70%),#fff;
  border-radius:16px;padding:24px 24px 44px;text-align:center}
.fortschritt{width:160px;margin:0 auto 10px;display:flex;flex-direction:column;align-items:center;gap:8px}
.prozent{font-size:16px;line-height:24px}
.balken{display:block;width:100%;height:8px;border-radius:100px;background:rgba(9,6,11,.08);overflow:hidden}
.balken i{display:block;height:100%;width:0;border-radius:100px;background:var(--akzent);transition:width .35s ease}
.f-schritt{display:none}
.f-schritt.aktiv{display:block;animation:rein .35s ease both}
.f-schritt.aktiv.sofort{animation:none}
@keyframes rein{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.f-schritt.aktiv{animation:none}.balken i{transition:none}}
.f-bild{display:block;margin:0 auto 16px}
.f-bild img{width:100%;max-height:159px;object-fit:contain;margin:0 auto}
.f-karte h2{font-size:24px;font-weight:700;line-height:1.21;color:var(--tinte2);margin:0 0 3px}
.hinweis{font-size:11px;line-height:1.5;margin:0 0 16px}
.f-karte h2+.antworten{margin-top:16px}

/* Antworten: Kacheln (2 Spalten, Icon 72px auf Vorschaufeld 127px) oder Liste */
.antworten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:354px;margin:0 auto}
.antwort{border:0;border-radius:6px;background:var(--kachel);text-align:left;display:flex;flex-direction:column;
  padding:0;overflow:hidden;color:var(--tinte2);transition:transform .12s,background .2s}
.antwort:hover{background:rgba(9,6,11,.08)}
.antwort.gedrueckt{transform:scale(.97)}
.antwort:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.a-ikon{display:flex;align-items:center;justify-content:center;min-height:127px;color:var(--ikon)}
.a-ikon svg{width:72px;height:72px}
.a-label{display:block;padding:13px 19px;font-size:17px;line-height:24px}
.layout-liste{grid-template-columns:minmax(0,1fr);gap:17px;max-width:none}
.layout-liste .antwort{flex-direction:row;align-items:center;gap:0;min-height:50px}
.layout-liste .a-ikon{min-height:0;width:56px;flex-shrink:0;justify-content:center;padding-left:0}
.layout-liste .a-ikon svg{width:24px;height:24px}
.layout-liste .a-label{padding:13px 19px 13px 0}
.layout-liste .antwort>.a-label:first-child{padding-left:19px}
.a-radio{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:rgba(9,6,11,.13);margin:0 0 0 16px}
.mit-radio .a-label{padding-left:16px}
.einstieg{font-size:14px;line-height:21px;letter-spacing:-.4px;margin:32px 0 22px}
.badge{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;line-height:21px;color:var(--grau);margin:0}
.badge svg{width:32px;height:32px;color:#d2d2d2;flex-shrink:0}
.badge.gruen{color:var(--tinte);margin:14px 0 0}
.badge.gruen svg{width:24px;height:24px}
.vorteile-titel{font-size:18px;font-weight:500;line-height:1.2;margin:78px 0 22px;color:#000}
.vorteile{list-style:none;text-align:left;display:flex;flex-direction:column;gap:14px}
.vorteile li{display:flex;gap:10px;align-items:flex-start;font-size:13px;font-weight:700;line-height:1.3;color:#000}
.vorteile svg{flex-shrink:0;width:18px;height:18px;margin-top:0;color:#000}

/* Eingabefelder, PLZ und Kontakt */
.felder{display:flex;flex-direction:column;gap:12px;margin:20px auto 0;max-width:294px}
.feld{max-width:294px;margin:0 auto;width:100%}
.plz .feld{margin-top:20px}
.feld input{width:100%;height:48px;border:0;border-radius:6px;background:var(--feld);padding:11px 14px 13px;font:inherit;font-size:14px;color:var(--tinte2);outline:none}
.feld input::placeholder{color:rgba(9,6,11,.3)}
.feld input:focus{box-shadow:0 0 0 2px rgba(var(--akzent-rgb),.5)}
.feld input.fehler{box-shadow:0 0 0 2px var(--akzent)}
.klein{font-size:11px;line-height:1.5;text-align:left;margin:20px auto 0;max-width:294px}
.klein a{color:inherit}
.f-meld{color:var(--akzent);font-size:13px;line-height:1.4;margin:10px 0 0;min-height:0}
.f-meld:empty{display:none}
.knopf{display:flex;align-items:center;justify-content:center;width:100%;max-width:294px;min-height:56px;margin:20px auto 0;
  background:var(--akzent);color:var(--akzent-text);border:0;border-radius:8px;padding:7px 28px;font-size:15px;font-weight:600;line-height:1.2;text-align:center}
.knopf:disabled{opacity:.6;cursor:default}
.k-badge{font-size:14px;font-weight:700;line-height:21px;margin:0 0 12px;color:var(--tinte)}
.k-text{font-size:14px;line-height:21px;letter-spacing:-.2px;margin:12px auto 0;max-width:294px}
.kontakt .klein{margin-top:16px}

/* Danke */
.danke-haken{width:64px;height:64px;border-radius:50%;background:var(--akzent);color:#fff;display:flex;align-items:center;justify-content:center;margin:6px auto 18px;animation:haken .5s ease both}
.danke-haken svg{width:34px;height:34px}
@keyframes haken{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.danke-titel{white-space:pre-line;color:var(--grau);font-size:20px;line-height:1.25}
.danke h3{font-size:18px;font-weight:700;line-height:1.2;margin:28px 0 14px}
.danke-schritte{list-style:none;text-align:left;border-top:1px solid rgba(9,6,11,.12)}
.danke-schritte li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid rgba(9,6,11,.12)}
.danke-schritte .nr{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--akzent);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.danke-schritte b{display:block;font-size:14px;line-height:1.3}
.danke-schritte p{font-size:13px;line-height:1.45;margin-top:4px;color:var(--grau)}
.danke-tel{font-size:14px;line-height:21px;white-space:pre-line}
.danke-tel a{display:block;font-weight:700;font-size:18px;text-decoration:none;margin-top:4px}

/* ── Referenzen ── */
.referenzen{padding-top:175px;padding-bottom:58px;text-align:center}
.referenzen h2{font-size:18px;font-weight:700;line-height:1.2;margin:0 0 29px}
.team-bild{display:block;border-radius:8px;overflow:hidden;margin:0 0 25px}
.team-bild img{width:100%;aspect-ratio:2/1;object-fit:cover}
.punkte{list-style:none;text-align:left;margin:0 0 45px}
.p-kopf{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;padding:9px 0;text-align:left;font-size:15px;font-weight:700;line-height:1.3;color:var(--tinte)}
.p-kopf span{flex:1;min-width:0}
.p-check{flex-shrink:0;width:22px;height:22px;color:var(--zweit)}
.p-pfeil{flex-shrink:0;width:26px;height:26px;color:var(--tinte);transition:transform .25s}
.p-kopf[aria-expanded="true"] .p-pfeil{transform:rotate(180deg)}
.p-text{padding:2px 38px 14px 34px}
.p-text p{font-size:14px;line-height:21px}
.cta{display:flex;align-items:center;justify-content:center;min-height:61px;width:100%;background:var(--akzent);color:var(--akzent-text);
  border-radius:8px;padding:7px 13px;font-size:13px;font-weight:700;line-height:1.2;text-decoration:none;text-align:center}
.cta-hinweis{font-size:12px;line-height:18px;color:#a7a7a7;margin:8px 0 0}
.bew-titel{margin-top:150px!important;font-size:20px!important;line-height:1.18!important;margin-bottom:20px!important}
.google{display:flex;align-items:center;justify-content:center;gap:16px;font-size:12px;line-height:18px;margin:0 0 27px}
.g-block{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.g-block .sterne{margin-left:2px}
.google img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.sterne{display:inline-flex;gap:2px;color:#f6b21b}
.sterne svg{width:16px;height:16px}
.g-text b{font-weight:700}
.bewertungen{display:flex;flex-direction:column;gap:20px;padding:0 8px;margin:0 0 20px}
.bew{background:var(--hell);border-radius:12px;overflow:hidden;text-align:left}
.bew picture img{width:100%;aspect-ratio:326/209;object-fit:cover}
.bew-inhalt{padding:20px 24px 24px}
.verif{display:flex;align-items:center;gap:8px;font-size:12px;line-height:18px}
.verif img{width:17px;height:17px;border-radius:50%;object-fit:cover}
.wer{display:flex;align-items:center;gap:12px;margin:12px 0 16px}
.wer img{width:41px;height:41px;border-radius:50%;object-fit:cover;flex-shrink:0}
.wer>span{display:flex;flex-direction:column;gap:2px}
.wer b{font-size:16px;font-weight:600;line-height:1.4}
.bew .text{font-size:14px;line-height:21px;white-space:pre-line}

/* ── Fuss (hellgrau) ── */
.fuss{text-align:center;padding:20px 24px 6px;background:var(--hell)}
.fuss img{height:60px;width:auto;max-width:190px;object-fit:contain;margin:0 auto 14px}
.fuss p{font-size:11px;font-weight:700;line-height:16.5px;margin:0 0 6px}
.fuss nav{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;font-size:8px;line-height:9.6px;font-weight:300}
.fuss nav a{text-decoration:none;padding:10px}

/* ── Desktop: Typo bleibt wie mobil (macht das Original genauso), Karte 750px mit 80px Innenraum ── */
@media (min-width:700px){
  .hero{max-width:599px}
  .f-karte{padding:80px}
  .fortschritt{margin-bottom:12px}
  .f-bild img{max-height:446px}
  .referenzen{max-width:992px}
  .referenzen h2,.team-bild,.punkte,.cta-hinweis{max-width:714px;margin-left:auto;margin-right:auto}
  .bewertungen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:0;align-items:start}
  .cta{max-width:405px;margin-left:auto;margin-right:auto}
  .kopf{min-height:101px}
}

/* ── Cookie-Banner, Optik 1:1 Onepage ── */
.kl-consent{position:fixed;left:0;right:0;bottom:0;z-index:999;padding:8px;
  padding-bottom:calc(8px + env(safe-area-inset-bottom));
  display:flex;justify-content:flex-start;pointer-events:none}
.kl-consent[hidden]{display:none!important}
.kl-consent-karte{pointer-events:auto;width:100%;max-width:600px;
  background:#fff;border-radius:8px;box-shadow:0 20px 140px 20px rgba(0,0,0,.1);
  animation:kl-consent-rein .5s ease both}
@keyframes kl-consent-rein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.kl-consent-karte{animation:none}}
.kl-consent-inhalt{display:flex;flex-direction:column}
.kl-consent-textblock{flex:1;min-width:0;padding:20px;display:flex;flex-direction:column;gap:8px;justify-content:center;text-align:left}
.kl-consent-titel{font-size:16px;font-weight:600;line-height:24px}
.kl-consent-text{font-size:13px;line-height:1.4;color:rgba(14,14,14,.7)}
.kl-consent-links{font-size:13px;line-height:1.5}
.kl-consent-links a{text-decoration:underline;opacity:.6;transition:opacity .3s}
.kl-consent-links a:hover{opacity:1}
.kl-consent-knoepfe{display:flex;flex-direction:column;gap:12px;padding:0 20px 20px}
.kl-knopf{border:0;cursor:pointer;border-radius:4px;padding:14px 20px;
  font-size:13px;font-weight:600;line-height:1.3;text-align:center;font-family:inherit;
  background:#f2f2f2;color:var(--tinte);
  box-shadow:0 1px 2px rgba(0,0,0,.07),0 1px 2px rgba(229,229,229,.3),0 2px 4px rgba(0,0,0,.07),
    0 4px 8px rgba(0,0,0,.07),0 8px 16px rgba(229,229,229,.1),0 16px 32px rgba(229,229,229,.1),
    inset 0 2px 0 rgba(255,255,255,.15),inset 0 0 0 1px rgba(0,0,0,.05);
  transition:filter .3s ease-in-out,transform .2s}
.kl-knopf:hover{filter:brightness(.96)}
.kl-knopf-dunkel{background:#191919;color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.07),0 1px 2px rgba(12,12,12,.3),0 2px 4px rgba(0,0,0,.07),
    0 4px 8px rgba(0,0,0,.07),0 8px 16px rgba(12,12,12,.1),0 16px 32px rgba(12,12,12,.1),
    inset 0 2px 0 rgba(255,255,255,.15),inset 0 0 0 1px rgba(0,0,0,.05)}
@media (min-width:700px){
  .kl-consent{justify-content:center;padding:16px}
  .kl-consent-karte{max-width:900px}
  .kl-consent-inhalt{flex-direction:row;align-items:flex-start}
  .kl-consent-knoepfe{width:170px;flex-shrink:0;padding:20px 20px 20px 8px}
}
.kl-cat{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 0;border-top:1px solid rgba(14,14,14,.1)}
.kl-cat:first-of-type{border-top:0}
.kl-cat b{display:block;font-size:15px}
.kl-cat span{display:block;font-size:13px;color:var(--grau);margin-top:2px}
.kl-schalter{position:relative;flex-shrink:0;width:46px;height:26px}
.kl-schalter input{position:absolute;opacity:0;inset:0}
.kl-riegel{position:absolute;inset:0;border-radius:999px;background:#cfd4d9;transition:background .15s}
.kl-riegel::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;transition:transform .15s}
.kl-schalter input:checked+.kl-riegel{background:var(--akzent)}
.kl-schalter input:checked+.kl-riegel::after{transform:translateX(20px)}
.kl-schalter-fest .kl-riegel{opacity:.6}
.recht{max-width:690px;margin:30px auto 60px;padding:0 24px;font-size:14px}
.recht h1{margin:22px 0 14px;font-size:26px}