/* Bewertungs-Funnel — Design portiert vom immo-holm-Original.
 * Nutzt die CSS-Variablen der Host-Seite (--accent-deep, --bg, --ink …) MIT Fallback:
 *   var(--accent-deep, var(--bw-accent, #4f9c97))
 * → Eingebettet erbt der Funnel das Site-Design; standalone greifen die Fallbacks.
 * --bw-accent etc. werden inline aus der CMS-Config gesetzt (primary_color).
 */
.bw-scope {
  --_accent:       var(--accent,        var(--bw-accent,      #a9dbd9));
  --_accent-deep:  var(--accent-deep,   var(--bw-accent-deep, #4f9c97));
  --_accent-ink:   var(--accent-ink,    #1f3f3d);
  --_bg:           var(--bg,            #ffffff);
  --_bg-elev:      var(--bg-elev,       #ffffff);
  --_border:       var(--border,        #e3e6e6);
  --_border-strong:var(--border-strong, #c8cdcd);
  --_ink:          var(--ink,           #1c2421);
  --_ink-2:        var(--ink-2,         #4a5450);
  --_ink-3:        var(--ink-3,         #7c8682);
  --_radius:       var(--radius,        12px);
  --_radius-lg:    var(--radius-lg,     18px);
  --_font-serif:   var(--font-serif,    Georgia, "Times New Roman", serif);
  --_font-mono:    var(--font-mono,     ui-monospace, "SF Mono", Menlo, monospace);
}

/* Standalone-Body (nur wenn nicht eingebettet) */
.bw-body { margin:0; background: color-mix(in oklab, var(--_accent) 6%, var(--_bg)); color: var(--_ink);
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif); -webkit-font-smoothing:antialiased; }
.bw-wrap { max-width: 820px; margin: 0 auto; padding: 28px 16px 52px; }
.bw-head { text-align:center; max-width:720px; margin:0 auto 24px; }
.bw-head .eyebrow { font-family: var(--_font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color: var(--_accent-deep); }
.bw-head h1 { font-family: var(--_font-serif); margin:12px 0 10px; font-size: clamp(26px,4vw,38px); font-weight:500; line-height:1.15; }
.bw-head .lead { color: var(--_ink-2); font-size:15.5px; line-height:1.5; }
.bw-headbar { display:flex; align-items:center; justify-content:space-between; max-width:760px; margin:0 auto 18px; }
.bw-logo { max-height:42px; }
.bw-logo-text { font-weight:800; font-size:18px; }
.bw-phone { color: var(--_accent-deep); text-decoration:none; font-weight:600; font-size:14px; }

* { box-sizing: border-box; }

.bv-card { max-width:760px; margin:0 auto; background: var(--_bg-elev); border:1px solid var(--_border);
  border-radius: var(--_radius-lg); padding:28px 30px 24px; box-shadow:0 10px 30px rgba(0,0,0,.05); }
@media (max-width:560px){ .bv-card { padding:20px 16px; } }

.bv-progress { height:6px; border-radius:999px; background: var(--_border); overflow:hidden; }
.bv-progress-bar { display:block; height:100%; width:16.6%; background: var(--_accent-deep); border-radius:999px; transition:width .35s ease; }
.bv-stepinfo { font-family: var(--_font-mono); font-size:11.5px; color: var(--_ink-3); text-transform:uppercase; letter-spacing:.08em; margin:10px 0 18px; }

.bv-step { display:none; border:0; padding:0; margin:0; min-inline-size:auto; }
.bv-step.is-active { display:block; animation: bvFade .3s ease; }
@keyframes bvFade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.bv-q { font-family: var(--_font-serif); font-size:21px; font-weight:500; margin:0 0 18px; padding:0; color: var(--_ink); }
.bv-sub { font-family: var(--_font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color: var(--_ink-3); margin:22px 0 10px; }

.bv-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bv-cards[hidden] { display:none !important; }
.bv-cards-sm { grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); }
.bv-opt { position:relative; cursor:pointer; }
.bv-opt input { position:absolute; opacity:0; pointer-events:none; }
.bv-opt-body { display:flex; flex-direction:column; gap:4px; align-items:flex-start; height:100%; padding:16px;
  border:1.5px solid var(--_border); border-radius: var(--_radius); background: var(--_bg); transition:border-color .15s, background .15s, transform .1s; }
.bv-opt-body strong { font-size:15.5px; color: var(--_ink); }
.bv-opt-body em { font-style:normal; font-size:12.5px; color: var(--_ink-3); }
.bv-opt-icon { width:46px; height:46px; color: var(--_accent-deep); margin-bottom:6px; }
.bv-opt-icon .sec { opacity:.4; }
.bv-opt-icon-sm { width:36px; height:36px; margin-bottom:4px; }
.bv-cards-icon .bv-opt-body { align-items:center; text-align:center; }
.bv-cards-icon .bv-opt-body strong { font-size:14px; }
.bv-opt:hover .bv-opt-body { border-color: var(--_accent-deep); }
.bv-opt input:checked + .bv-opt-body { border-color: var(--_accent-deep); background: color-mix(in oklab, var(--_accent) 18%, var(--_bg)); box-shadow:0 0 0 1px var(--_accent-deep) inset; }

.bv-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.bv-field { display:flex; flex-direction:column; gap:6px; font-size:13.5px; color: var(--_ink-2); font-weight:500; }
.bv-field.bv-col-2 { grid-column:1 / -1; }
.bv-field input, .bv-field select { padding:12px 14px; border:1px solid var(--_border-strong); border-radius: var(--_radius);
  font-size:15px; font-family:inherit; background: var(--_bg); color: var(--_ink); }
.bv-field input:focus, .bv-field select:focus { outline:2px solid var(--_accent-deep); outline-offset:1px; border-color: var(--_accent-deep); }
.bv-spacer { display:block; height:44px; }
@media (max-width:560px){ .bv-fields { grid-template-columns:1fr; } }

.bv-chips { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:4px; }
.bv-chip { cursor:pointer; }
.bv-chip input { position:absolute; opacity:0; pointer-events:none; }
.bv-chip span { display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border:1.5px solid var(--_border);
  border-radius:999px; font-size:13.5px; background: var(--_bg); color: var(--_ink); transition:all .15s; }
.bv-chip-ico { width:15px; height:15px; flex-shrink:0; color: var(--_accent-deep); }
.bv-chip-ico .sec { opacity:.55; }
.bv-chip input:checked + span .bv-chip-ico { color:#fff; }
.bv-chip:hover span { border-color: var(--_accent-deep); }
.bv-chip input:checked + span { background: var(--_accent-deep); border-color: var(--_accent-deep); color:#fff; }

.bv-consent { display:flex; gap:10px; align-items:flex-start; margin:22px 0 4px; font-size:13.5px; color: var(--_ink-2); line-height:1.5; }
.bv-consent input { margin-top:3px; flex-shrink:0; }
.bv-consent a { color: var(--_accent-deep); }
.bv-honey { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Eigene Buttons mit Fallback — falls Host keine .btn-Klassen hat */
.bv-nav { display:flex; align-items:center; gap:12px; margin-top:26px; }
.bv-nav-spacer { flex:1; }
.bw-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer;
  font:inherit; font-weight:600; font-size:15px; padding:13px 24px; border-radius: var(--_radius); border:1.5px solid transparent; }
.bw-btn[hidden] { display:none !important; }
.bw-btn-accent  { background: var(--_accent-deep); color:#fff; }
.bw-btn-primary { background: var(--_accent-ink); color:#fff; }
.bw-btn-ghost   { background:transparent; color: var(--_ink-2); border-color: var(--_border-strong); }
.bw-btn:hover { filter:brightness(1.06); }

.bv-error { color:#b3261e; font-size:14px; margin:12px 0 0; }
.bv-trust { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px; font-size:12.5px; color: var(--_ink-3); }
.bv-trust svg { color: var(--_accent-deep); }

.bv-success { text-align:center; padding:44px 30px; }
.bv-success-icon { width:56px; height:56px; border-radius:50%; background: var(--_accent); color: var(--_accent-ink);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.bv-success h3 { margin:0 0 10px; font-size:22px; color: var(--_ink); }
.bv-success p { color: var(--_ink-2); max-width:460px; margin:0 auto 20px; }

.bw-foot { text-align:center; color: var(--_ink-3); font-size:12px; margin-top:22px; }