
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600&family=Nunito:wght@400;600;700;800&display=swap');
#sbs-vorauswahl{
  --ink:#082B57; --accent:#1F4E84; --tint:#E9F1FB; --tintB:#9FBEE3; --line:#E3E9F0;
  --muted:#5B6B7B; --body:#22303F; --good:#1E7A52; --goodBg:#ECF7F1; --goodB:#BFE3CF; --warn:#B23A2E;
  font-family:Nunito,system-ui,Segoe UI,sans-serif; color:var(--body); line-height:1.5;
  max-width:720px; margin:0 auto; -webkit-font-smoothing:antialiased;
}
#sbs-vorauswahl *{box-sizing:border-box}
#sbs-vorauswahl .sbs-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 26px}
#sbs-vorauswahl .sbs-eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;font-weight:800;color:var(--accent);margin:0 0 8px}
#sbs-vorauswahl h2{font-family:Lora,serif;font-size:26px;font-weight:600;color:var(--ink);margin:0 0 10px;line-height:1.2}
#sbs-vorauswahl .sbs-lead{font-size:15px;line-height:1.6;color:var(--body);margin:0}

/* Fortschritt */
#sbs-vorauswahl .sbs-bar{margin:24px 0 16px}
#sbs-vorauswahl .sbs-ind{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
#sbs-vorauswahl .sbs-stepof{text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;font-weight:800;color:var(--accent)}
#sbs-vorauswahl .sbs-steptitle{font-size:12.5px;font-weight:700;color:var(--muted)}
#sbs-vorauswahl .sbs-dots{display:flex;gap:6px}
#sbs-vorauswahl .sbs-dot{flex:1;height:5px;border-radius:999px;background:#DCE5EF;transition:background .3s}
#sbs-vorauswahl .sbs-dot.on{background:var(--ink)}

/* Schritt-Panels */
#sbs-vorauswahl .sbs-panel{display:none}
#sbs-vorauswahl .sbs-panel.is-active{display:block;animation:sbsIn .26s ease}
@keyframes sbsIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#sbs-vorauswahl .sbs-step{margin:0 0 6px;display:flex;align-items:center;gap:10px}
#sbs-vorauswahl .sbs-stepnum{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--ink);color:#fff;font-family:Lora,serif;font-weight:600;font-size:14px;flex:none}
#sbs-vorauswahl .sbs-step h3{font-family:Lora,serif;font-size:18px;color:var(--ink);font-weight:600;margin:0}
#sbs-vorauswahl .sbs-hint{font-size:13px;color:var(--muted);margin:0 0 14px;font-style:italic}

#sbs-vorauswahl .sbs-opt{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;margin-bottom:10px;cursor:pointer;transition:border-color .15s,background .15s}
#sbs-vorauswahl .sbs-opt:hover{border-color:var(--tintB)}
#sbs-vorauswahl .sbs-opt:has(input:checked){border-color:var(--ink);background:var(--tint)}
#sbs-vorauswahl .sbs-opt input{width:20px;height:20px;margin-top:1px;accent-color:var(--ink);flex:none}
#sbs-vorauswahl .sbs-opt span{font-size:14.5px;color:var(--body)}
#sbs-vorauswahl .sbs-opt input:checked ~ span{color:var(--ink);font-weight:600}

#sbs-vorauswahl .sbs-yn{display:flex;gap:10px;flex-wrap:wrap}
#sbs-vorauswahl .sbs-pill{position:relative;cursor:pointer}
#sbs-vorauswahl .sbs-pill input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
#sbs-vorauswahl .sbs-pill span{display:inline-block;padding:11px 20px;border:1.5px solid var(--line);border-radius:999px;font-weight:700;font-size:14.5px;color:var(--body);background:#fff;transition:all .15s}
#sbs-vorauswahl .sbs-pill input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
#sbs-vorauswahl .sbs-need{font-size:13.5px;color:var(--warn);margin:12px 0 0;font-weight:600}

/* Navigation */
#sbs-vorauswahl .sbs-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px}
#sbs-vorauswahl .sbs-back{display:inline-flex;align-items:center;gap:7px;padding:11px 18px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--body);font-weight:700;font-size:14.5px;cursor:pointer;font-family:Nunito,sans-serif}
#sbs-vorauswahl .sbs-next{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border:none;border-radius:12px;background:var(--ink);color:#fff;font-weight:800;font-size:15px;cursor:pointer;font-family:Nunito,sans-serif}

/* Ergebnis */
#sbs-vorauswahl .sbs-result{display:none}
#sbs-vorauswahl .sbs-result.show{display:block;animation:sbsIn .26s ease;border-radius:16px;padding:22px}
#sbs-vorauswahl .sbs-good{background:var(--goodBg);border:1.5px solid var(--goodB);color:var(--good)}
#sbs-vorauswahl .sbs-advise{background:var(--tint);border:1.5px solid var(--tintB);color:var(--ink)}
#sbs-vorauswahl .sbs-neutral{background:#F4F7FB;border:1.5px solid var(--line);color:var(--ink)}
#sbs-vorauswahl .sbs-rhead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
#sbs-vorauswahl .sbs-rhead svg{flex:none}
#sbs-vorauswahl .sbs-rhead h3{font-family:Lora,serif;font-size:19px;margin:0;color:inherit}
#sbs-vorauswahl .sbs-rtext{font-size:15px;line-height:1.6;color:var(--body);margin:0 0 16px}
#sbs-vorauswahl .sbs-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
#sbs-vorauswahl .sbs-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:12px;background:var(--ink);color:#fff;font-weight:800;font-size:15px;text-decoration:none}
#sbs-vorauswahl .sbs-good .sbs-btn{background:var(--good)}
#sbs-vorauswahl .sbs-tel{font-size:14px;font-weight:700;color:var(--muted);text-decoration:none}
#sbs-vorauswahl .sbs-links{margin-top:14px;display:flex;gap:18px;flex-wrap:wrap}
#sbs-vorauswahl .sbs-restart{background:none;border:none;color:var(--muted);font-size:13.5px;text-decoration:underline;cursor:pointer;font-family:Nunito,sans-serif;padding:0}

#sbs-vorauswahl .sbs-card.done .sbs-bar,
#sbs-vorauswahl .sbs-card.done .sbs-panel,
#sbs-vorauswahl .sbs-card.done .sbs-nav{display:none}
#sbs-vorauswahl .sbs-foot{font-size:12.5px;color:var(--muted);margin:18px 2px 0;line-height:1.55}
