/*
 * Gemeinsames Aussehen der Anfrage-Widgets (gutachten.html, energie.html).
 * Übernommen aus public/modernisierung.html (EasyMod), damit alle selbst
 * gehosteten Endkunden-Widgets gleich aussehen; Biberkopf kommt zusätzlich aus
 * /widget-kopf/biber-hero.css.
 */
:root{
  --brand:#103A68;--brand-dark:#06203C;--brand-50:#EEF3F9;--brand-100:#D3DEEC;
  --navy:#06203C;--ink:#1B2530;--muted:#64748B;--line:#E4E9F0;--line-strong:#CBD5E1;
  --bg:#F4F7FB;--card:#FFFFFF;--ok:#15A36E;--ok-50:#E7F6EF;--warn:#C77700;--warn-50:#FFF6E6;--warn-line:#F3D79B;--err:#E0414C;
  --radius:16px;--radius-sm:11px;
  --shadow:0 1px 2px rgba(16,40,64,.04),0 8px 28px rgba(16,40,64,.06);
  --font:"Nunito","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:var(--font);color:var(--ink);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
a{color:var(--brand);text-decoration:none}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

.topbar{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 4px 20px rgba(15,23,42,.05);padding-top:env(safe-area-inset-top)}
.topbar-inner{max-width:1040px;margin:0 auto;padding:8px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand-logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.2px;color:var(--navy);font-size:18px}
.brand-mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--brand-dark));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px}
/* Business-Logo mit Slogan-Zeile: höher als das Wortzeichen allein, sonst wird der Slogan unlesbar */
.brand-img{height:54px;width:auto;max-width:280px;display:block}
@media(max-width:520px){.brand-img{height:40px;max-width:200px}}
.brand-logo span b{color:var(--brand)}
.secure{display:flex;align-items:center;gap:7px;color:#334155;font-size:12.5px;font-weight:700;border:1px solid var(--line);border-radius:99px;padding:7px 12px;background:#fff;white-space:nowrap}
.secure svg{width:15px;height:15px}
@media(max-width:520px){.secure .t{display:none}}

.page{max-width:1040px;margin:0 auto;padding:24px 20px 60px;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:28px;align-items:start}
@media(max-width:900px){.page{grid-template-columns:1fr}}

/* ---------- Linke Spalte: Nutzenversprechen ---------- */
.pitch{background:radial-gradient(900px 480px at 88% -10%,rgba(63,138,240,.32),transparent 60%),radial-gradient(700px 520px at 6% 120%,rgba(21,160,107,.16),transparent 55%),linear-gradient(170deg,#06203C 0,#0A2C52 48%,#103A68 100%);color:#fff;border-radius:var(--radius);padding:32px 28px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.pitch::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.pitch>*{position:relative}
.kicker{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8FC1E9;margin-bottom:10px}
.pitch h1{margin:0 0 14px;font-size:clamp(26px,4.4vw,40px);line-height:1.1;letter-spacing:-.8px;font-weight:800;text-wrap:balance}
.pitch h1 em{font-style:normal;color:#63C3FF}
.pitch .lead{margin:0 0 22px;font-size:15px;line-height:1.6;color:#C9DCEC;max-width:520px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}
.fact{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:12px 14px}
.fact b{display:block;font-size:20px;letter-spacing:-.4px}
.fact span{font-size:12px;color:#A9C3DA}
@media(max-width:520px){.facts{grid-template-columns:1fr 1fr 1fr}.fact b{font-size:16px}}
.vorteile{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:9px}
.vorteile li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:#EAF3FB}
.vorteile svg{width:18px;height:18px;color:#3ED598;flex:0 0 auto;margin-top:2px}
.pcard{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:14px 16px}
.pcard .ava{width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;flex:0 0 auto;overflow:hidden}
.pcard .ava img{width:100%;height:100%;object-fit:cover}
.pcard .n{font-weight:800}
.pcard .r{font-size:12.5px;color:#A9C3DA}
.pcard .k{font-size:13px;color:#E9F2FA;margin-top:3px;overflow-wrap:anywhere}
.pcard .k a{color:#E9F2FA;font-weight:600}
@media(max-width:900px){.pitch{padding:24px 20px}.vorteile,.pcard{display:none}}

/* ---------- Rechte Spalte: Strecke ---------- */
.flow{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 22px 20px;position:sticky;top:76px}
@media(max-width:900px){.flow{position:static}}
.stepinfo{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px}
.bars{display:flex;gap:6px;margin-bottom:18px}
.bars i{flex:1;height:5px;border-radius:99px;background:var(--line-strong);transition:background .3s}
.bars i.on{background:var(--brand)}
.flow h2{margin:0 0 16px;font-size:20px;letter-spacing:-.3px;color:var(--navy)}
.schritt{display:none}
.schritt.aktiv{display:block;animation:ein .25s ease-out}
@keyframes ein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.f{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-width:0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.row.r3{grid-template-columns:2fr 1fr}
label.lab{font-size:12.5px;font-weight:600;color:#42505F}
label.lab .opt{font-weight:500;color:var(--muted)}
.hint{font-size:11.5px;color:var(--muted)}
.inp,.sel{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);padding:11px 13px;min-height:46px;outline:none;transition:border-color .15s,box-shadow .15s}
.inp:focus,.sel:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-100)}
.inp.invalid,.sel.invalid{border-color:var(--err);box-shadow:0 0 0 3px rgba(224,65,76,.12)}
.sel{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:38px}
.euro{position:relative}
.euro .inp{padding-right:34px;font-weight:700;font-size:18px}
.euro::after{content:"€";position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:700}
.quick{display:flex;gap:6px;flex-wrap:wrap}
.quick button{border:1px solid var(--brand-100);background:var(--brand-50);color:var(--brand-dark);font:inherit;font-size:12.5px;font-weight:700;padding:6px 10px;border-radius:99px;cursor:pointer}
.quick button:hover{border-color:var(--brand)}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{border:1.5px solid var(--line-strong);border-radius:12px;padding:12px;cursor:pointer;background:#fff;text-align:left;font:inherit;display:flex;flex-direction:column;gap:6px;transition:.15s}
.tile:hover{border-color:var(--brand)}
.tile.on{border-color:var(--brand);background:var(--brand-50)}
.tile svg{width:22px;height:22px;color:var(--brand-dark)}
.tile b{font-size:13.5px;color:var(--navy)}
.tile span{font-size:11.5px;color:var(--muted);line-height:1.35}

.details{display:none}
.details.zeigen{display:block}
.note{display:flex;gap:9px;background:var(--warn-50);border:1px solid var(--warn-line);border-radius:10px;padding:10px 12px;font-size:12.5px;color:#8A6D1F;margin-bottom:14px}

.seg{display:flex;background:var(--brand-50);border:1px solid var(--brand-100);border-radius:11px;padding:4px;gap:4px}
.seg button{flex:1;border:0;background:transparent;font:inherit;font-size:14px;font-weight:600;color:var(--brand-dark);padding:9px 10px;border-radius:8px;cursor:pointer}
.seg button.on{background:var(--brand);color:#fff}

.consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:#42505F;line-height:1.5;margin:4px 0 14px}
.consent input{accent-color:var(--brand);width:18px;height:18px;margin-top:1px;flex:0 0 auto}
.consent.invalid{color:var(--err)}

.nav{display:flex;gap:10px;margin-top:6px}
.btn{border:0;font:inherit;font-weight:700;font-size:15px;padding:13px 20px;border-radius:12px;cursor:pointer;min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-primary{flex:1;background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;box-shadow:0 4px 14px rgba(16,58,104,.35)}
.btn-primary:disabled{opacity:.6;cursor:wait}
.btn-back{background:#fff;border:1.5px solid var(--line-strong);color:var(--ink)}
.trust{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:11.5px;color:var(--muted);font-weight:600}
.trust span{display:flex;align-items:center;gap:5px}
.trust svg{width:13px;height:13px;color:var(--ok)}

.danke{display:none;text-align:center;padding:16px 4px}
.danke .ok{width:60px;height:60px;border-radius:50%;background:var(--ok-50);color:var(--ok);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.danke h2{margin:0 0 8px}
.danke p{margin:0 0 10px;color:#42505F;font-size:14px}
.danke ol{text-align:left;font-size:13.5px;color:#42505F;padding-left:20px;margin:12px 0 0}
body.fertig .schritt,body.fertig .bars,body.fertig .stepinfo{display:none !important}
body.fertig .danke{display:block}

.mini{grid-column:1/-1;font-size:11px;color:var(--muted);text-align:center;line-height:1.7}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* ---------- Mehrfachauswahl (Chips) + Leistungskacheln ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1.5px solid var(--line-strong);background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:600;padding:8px 11px;border-radius:99px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.15s}
.chip:hover{border-color:var(--brand)}
.chip.on{border-color:var(--brand);background:var(--brand-50);color:var(--brand-dark)}
.leistungen{display:grid;gap:8px}
.leistung{border:1.5px solid var(--line-strong);border-radius:12px;padding:12px 14px 12px 44px;cursor:pointer;background:#fff;text-align:left;font:inherit;position:relative;transition:.15s}
.leistung:hover{border-color:var(--brand)}
.leistung::before{content:"";position:absolute;left:14px;top:14px;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-strong);background:#fff}
.leistung.on{border-color:var(--brand);background:var(--brand-50)}
.leistung.on::before{background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;border-color:var(--brand)}
.leistung b{display:block;font-size:14px;color:var(--navy)}
.leistung span{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:2px}
.leistungen.invalid .leistung{border-color:var(--err)}
.hinweis{display:flex;gap:9px;background:var(--brand-50);border:1px solid var(--brand-100);border-radius:10px;padding:10px 12px;font-size:12.5px;color:#2B4A6B;margin-bottom:14px;line-height:1.45}
.hinweis svg{width:17px;height:17px;flex:0 0 auto;margin-top:1px;color:var(--brand)}
textarea.inp{min-height:90px;resize:vertical;font-size:15px}
.fehler{display:none;gap:9px;background:#FDECEE;border:1px solid #F5C2C7;border-radius:10px;padding:10px 12px;font-size:13px;color:#9B1C26;margin:0 0 12px}
.fehler.zeigen{display:flex}
/* Honeypot: für Menschen unsichtbar, Bots füllen ihn aus */
.hp{position:absolute !important;left:-10000px !important;top:auto;width:1px;height:1px;overflow:hidden}
@media(max-width:520px){.row{grid-template-columns:1fr}.row.r3{grid-template-columns:1fr}.flow{padding:18px 16px}}
@media(max-width:899px){.flow{scroll-margin-top:96px}}
/* ---------- Hausverkauf-Check: Unterlagen-Check + Ergebnis ---------- */
.doks{display:grid;gap:8px;margin-bottom:14px}
.dok{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1.5px solid var(--line);border-radius:12px;padding:9px 10px 9px 12px;min-width:0}
.dok>span{font-size:13.5px;font-weight:600;color:var(--navy);min-width:0;overflow-wrap:anywhere}
.dok>span small{display:block;font-weight:500;font-size:11.5px;color:var(--muted)}
.dok .seg{flex:0 0 auto;padding:3px}
.dok .seg button{font-size:12.5px;padding:6px 9px}
.dok .seg button.on[data-v="missing"]{background:var(--warn);color:#fff}
.dok.invalid,.dok .seg.invalid{border-color:var(--err)}
.dok[hidden]{display:none}
.dokstand{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;color:var(--muted);margin:-4px 0 14px}
.balken{flex:1;height:7px;border-radius:99px;background:var(--line);overflow:hidden}
.balken i{display:block;height:100%;width:0;background:var(--ok);border-radius:99px;transition:width .3s}
.ergebnis{text-align:left;margin:14px 0 4px;display:grid;gap:10px}
.erg-karte{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#fff}
.erg-karte .lab{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.erg-karte .spanne{font-size:clamp(22px,6vw,28px);font-weight:800;letter-spacing:-.5px;color:var(--navy);line-height:1.15}
.erg-karte .basis{font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:6px}
.erg-karte .quote{display:flex;align-items:center;gap:10px;margin:6px 0 4px}
.erg-karte .quote b{font-size:24px;color:var(--navy)}
.erg-karte ul{margin:6px 0 0;padding-left:18px;font-size:13px;color:#42505F}
.erg-karte.hervor{background:var(--brand-50);border-color:var(--brand-100)}
@media(max-width:520px){.dok{flex-direction:column;align-items:stretch}.dok .seg{width:100%}}
.chips.invalid .chip,.seg.invalid{border-color:var(--err)}