/* 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; }
/* Hinweis „(optional)" neben einer Feldbeschriftung. Bewusst leiser als das
   Etikett, aber NICHT durchsichtig gestellt: eine Deckkraft unter 1 senkt den
   gemessenen Kontrast und faellt in der Barrierefreiheitspruefung durch. */
.bv-optional { font-weight:400; color: var(--_ink-3, var(--_ink-2)); }
@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; }

/* ── Kanten und Schatten ─────────────────────────────────────────────────────
   Gemessen am 30.08.2026: Karte #f5f5f3 gegen Seitengrund #ffffff = 1,09:1,
   Kachelkante #e5e7eb gegen die Karte = 1,13:1. Das ist faktisch dieselbe Farbe —
   der ganze Hauptinhalt las sich als eine einzige weiße Fläche („die ganze
   Formularseite ist im Hauptcontent weiß", Tom). Zwei helle Flächen lassen sich
   über die Füllung nicht trennen; das ist Physik, kein Versäumnis. Was eine Karte
   als Karte lesbar macht, ist die Kante zusammen mit dem Schatten darunter.
   Neue Kante #b9c2c0: 1,82:1 gegen Weiß, 1,67:1 gegen die Karte. Bewusst am Ende
   der Datei, damit :hover und :checked danach wieder gewinnen.                */
.bw-scope .bv-card { border-color:#b9c2c0;
  box-shadow:0 1px 2px rgba(28,36,33,.06), 0 20px 44px -26px rgba(28,36,33,.55); }
.bw-scope .bv-opt-body { border-color:#b9c2c0; }
.bw-scope .bv-field input, .bw-scope .bv-field select, .bw-scope .bv-field textarea { border-color:#b9c2c0; }
.bw-scope .bv-chip span { border-color:#b9c2c0; }
.bw-scope .bv-opt:hover .bv-opt-body { border-color:var(--_accent-deep); }
.bw-scope .bv-opt input:checked + .bv-opt-body { border-color:var(--_accent-deep); }
.bw-scope .bv-field input:focus, .bw-scope .bv-field select:focus,
.bw-scope .bv-field textarea:focus { border-color:var(--_accent-deep); }
.bw-scope .bv-chip input:checked + span { border-color:var(--_accent-deep); }

/* ── Vorbelegtes Suchprofil ──────────────────────────────────────────────────
   Erscheint nur, wenn der Besucher von einer Objektseite kommt (?von=<slug>).
   Der Vorschlag steht sichtbar da und muss bestaetigt werden — vorbelegte Werte
   gehoeren nicht unsichtbar ins Formular. */
.bw-scope .es-vorschlag { margin-bottom: 18px; }
.bw-scope .es-vorschlag-eyebrow { display:block; font-size:11.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--_accent-deep); font-weight:600; margin-bottom:6px; }
.bw-scope .es-vorschlag h3 { margin:0 0 6px; font-size:20px; color:var(--_ink); }
.bw-scope .es-vorschlag-quelle { margin:0 0 14px; font-size:13.5px; color:var(--_ink-3); }
.bw-scope .es-vorschlag-quelle a { color:var(--_accent-deep); }
.bw-scope .es-vorschlag-liste { display:grid; grid-template-columns:auto 1fr; gap:8px 18px;
  margin:0 0 14px; padding:14px 16px; background:var(--_bg); border:1px solid #b9c2c0;
  border-radius:var(--_radius); }
.bw-scope .es-vorschlag-liste dt { font-size:13px; color:var(--_ink-3); }
.bw-scope .es-vorschlag-liste dd { margin:0; font-size:14.5px; font-weight:600; color:var(--_ink); }
.bw-scope .es-vorschlag-hinweis { margin:0 0 16px; font-size:13px; color:var(--_ink-3); }
.bw-scope .es-vorschlag-knoepfe { display:flex; flex-wrap:wrap; gap:10px; }
@media (max-width:560px){ .bw-scope .es-vorschlag-liste { grid-template-columns:1fr; gap:2px 0; }
  .bw-scope .es-vorschlag-liste dd { margin-bottom:8px; } }