:root{
    /* Markenfarben hausverkauf.de + moderne, weichere Abstufungen */
    --hv-primary:#1f7a96;       /* Leitfarbe Blau (etwas frischer als #266a83) */
    --hv-primary-dark:#155d74;
    --hv-primary-soft:#eaf4f7;  /* sehr helle Blau-Tönung für Flächen/Selected */
    --hv-blue:#1f7a96;
    --hv-blue-dark:#155d74;
    --hv-green:#3c8323;
    --hv-bg:#f6f9fb;            /* ruhiger, neutraler Seitengrund */
    --hv-border:#e4ebf0;        /* sehr feine, neutrale Linien */
    --hv-border-strong:#d2dde4;
    --hv-text:#1c2b33;
    --hv-muted:#6a7882;
    --hv-track:#e1e9ee;
    /* Design-Tokens für den modernen Look */
    --r:24px;                  /* große, weiche Karten-Rundung (2027: runder) */
    --r-sm:14px;               /* Rundung für Felder/Kacheln */
    --r-pill:999px;
    --sh-sm:0 1px 2px rgba(16,42,55,.04), 0 1px 3px rgba(16,42,55,.06);
    --sh-md:0 6px 18px rgba(16,42,55,.07), 0 2px 6px rgba(16,42,55,.05);
    --sh-lg:0 30px 70px -24px rgba(16,42,55,.28), 0 12px 32px -16px rgba(16,42,55,.14);
    --sh-ring:0 0 0 4px rgba(31,122,150,.14);
    --sh-glow:0 0 0 1px rgba(31,122,150,.10), 0 8px 30px -6px rgba(31,122,150,.30);
    /* Aurora-Farbtupfer für den animierten Hintergrund */
    --aur-1:#7fd4e8;  --aur-2:#a8e6c1;  --aur-3:#c9e0ff;  --aur-4:#e6d4ff;
  }
  .hv-wrap *{box-sizing:border-box}
  .hv-wrap{
    font-family:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
    font-size:17px;   /* Basis am Seiten-Fließtext (18px) orientiert, 1px kleiner. em-Werte bauen darauf auf. */
    width:100%;max-width:100%;margin:0 auto;color:var(--hv-text);line-height:1.55;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    /* Abstand: oben 18px, unten deutlich mehr (72px) -> klarer Abstand zum
       folgenden Seiteninhalt unter dem Formular. */
    position:relative;isolation:isolate;padding:0 0 40px;
  }
  /* ---- Haus-Verkaufsschild-Icon links neben der Überschrift ---- */
  /* Text unten ausgerichtet (auf Höhe der Hauswand), da Schild/Wolke das Icon
     oben hochziehen – sonst säße der Text zu hoch. */
  .hv-h2{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:nowrap;margin-top:14px}
  .hv-h2-text{padding-bottom:0}
  .hv-h2-art{flex:0 0 auto;width:123px;height:123px;display:block;margin-top:6px;margin-left:-14px}
  .hv-h2-art svg{width:100%;height:100%;display:block;overflow:visible}
  /* Schild pendelt an der Aufhängung, Gedanken-Wolke schwebt (leicht versetzt) */
  @keyframes hvSwing{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
  @keyframes hvCloudFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  .hv-h2-art .hv-sign{animation:hvSwing 3.8s ease-in-out infinite;transform-origin:102px 73px}
  .hv-h2-art .hv-cloud{animation:hvCloudFloat 3.4s ease-in-out infinite .3s;transform-origin:center}
  @media (prefers-reduced-motion: reduce){ .hv-h2-art .hv-sign,.hv-h2-art .hv-cloud{animation:none} }
  @media(max-width:560px){
    .hv-h2{gap:6px}
    .hv-h2-art{width:56px;height:56px;margin-top:-15px;margin-left:-6px}
    /* Frage-Titel auf Mobil kompakter: engere Zeilenhöhe + etwas kleiner */
    .hv-q{font-size:1.22em;line-height:1.2;margin-bottom:18px}
  }
  /* ---- Hintergrund hinter dem Formular ENTFERNT ----
     Die farbigen Aurora-Wolken (.hv-wrap::before) sind raus — sie haben den
     Blick gestört und kosteten Render-Last. Das Formular sitzt jetzt ruhig auf
     dem normalen Seitengrund, nur die Karte trägt den Inhalt. */

  /* ---- Karte ----
     PERF: backdrop-filter ENTFERNT (war der teuerste Effekt). Da der Aurora-
     Hintergrund jetzt ganz weg ist, ist die Karte deckend weiß mit einem
     dezenten grauen Rand und weichem Schatten — ruhiger, klar abgesetzt vom
     Seitengrund, ohne jede Render-Last. */
  .hv-card{
    position:relative;
    background:#ffffff;
    border:1px solid var(--hv-border);
    border-radius:var(--r);
    padding:22px 40px 24px;
    box-shadow:var(--sh-lg);
  }
  /* feiner Glanz-Rand oben (Light-Edge) für den Glas-Effekt */
  .hv-card::before{
    content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 40%);
    -webkit-mask:linear-gradient(#000,#000);mask:linear-gradient(#000,#000);opacity:.6
  }
  /* Hinweis: KEIN "@supports not (...)"-Block — Drupal-7-CSS-Aggregation
     verschluckt sich an der verschachtelten Klammer-Syntax und verwirft danach
     das restliche CSS. Browser ohne backdrop-filter zeigen dank der weißen
     Basis-Deckkraft (rgba .72) trotzdem eine helle, lesbare Karte. */
  @media(max-width:560px){.hv-card{padding:18px 20px;border-radius:20px}}
  /* Beim Hochscrollen (Schrittwechsel) Platz für den sticky Seiten-Header lassen,
     damit der Formular-Titel nicht verdeckt wird. Wert ggf. an Header-Höhe anpassen. */
  .hv-card{scroll-margin-top:90px}
  .hv-card h2{
    margin:0 0 16px;font-size:1.75em;line-height:1.2;letter-spacing:-.02em;
    font-weight:700;text-align:center;color:var(--hv-text)
  }
  @media(max-width:560px){.hv-card h2{font-size:1.18em;line-height:1.22;margin-bottom:18px}}
  .hv-card .hv-sub{color:var(--hv-muted);font-size:.95em;margin:0 auto 16px;text-align:center;max-width:560px}
  /* Emotionaler Einstiegstext unter der Überschrift (nur Schritt 1 relevant, steht
     aber statisch oben in der Karte). Macht sofort klar, WARUM man bewerten lassen
     sollte (Verlust-Argument), statt nur zu beschreiben was passiert. */
  .hv-intro{
    max-width:620px;margin:2px auto 22px;text-align:center;
    font-size:.88em;line-height:1.5;color:var(--hv-muted)
  }
  .hv-intro strong{color:var(--hv-text);font-weight:600}
  @media(max-width:560px){.hv-intro{font-size:.84em;margin:0 auto 18px}}

  /* ---- Fortschrittsbalken ---- */
  .hv-progress{height:7px;background:rgba(225,233,238,.7);border-radius:var(--r-pill);margin:0 0 26px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(16,42,55,.06)}
  .hv-progress span{position:relative;display:block;height:100%;width:0;border-radius:var(--r-pill);
    transition:width .55s cubic-bezier(.34,1.2,.5,1);
    background:linear-gradient(90deg,#2bb0c9,var(--hv-primary));
    box-shadow:0 0 12px -1px rgba(31,122,150,.6)}
  /* Shimmer-Dauer-Animation entfernt (lief endlos = Ruckler). Der Balken
     gleitet beim Schrittwechsel weiterhin per width-transition. */

  /* ---- Schritt-Frage ---- */
  .hv-step{display:none}
  .hv-step.is-active{display:block;animation:hvfade .35s cubic-bezier(.4,0,.2,1)}
  @keyframes hvfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .hv-q{font-size:1.4em;font-weight:700;letter-spacing:-.01em;text-align:center;margin:0 0 24px}

  /* ---- Kachel-Auswahl ---- */
  .hv-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
  .hv-tiles.cols-3{grid-template-columns:repeat(3,1fr)}
  @media(max-width:620px){.hv-tiles,.hv-tiles.cols-3{grid-template-columns:1fr 1fr}}
  .hv-tile{
    position:relative;border:1px solid var(--hv-border-strong);border-radius:var(--r-sm);
    padding:22px 8px;text-align:center;cursor:pointer;
    background:linear-gradient(160deg,#ffffff 0%,#eef5f8 100%);   /* dezenter Verlauf: oben weiß, unten leichte Blau-Tönung */
    font-weight:600;font-size:1em;line-height:1.25;color:var(--hv-text);user-select:none;
    overflow-wrap:break-word;hyphens:auto;
    box-shadow:var(--sh-sm);overflow:hidden;
    /* PERF: nur noch transform animieren (läuft auf der GPU/Compositor, billig).
       box-shadow/border/background NICHT mehr übergangen — animierte Schatten
       sind in Firefox-Software-Rendering der Hauptgrund für verzögerten Hover. */
    transition:transform .18s cubic-bezier(.34,1.4,.5,1)
  }
  .hv-tile:hover{
    border-color:var(--hv-primary);background:linear-gradient(160deg,#ffffff 0%,#deeef3 100%);
    box-shadow:var(--sh-sm);transform:translateY(-3px)
  }
  .hv-tile.is-selected{
    border-color:rgba(31,122,150,.55);color:var(--hv-primary-dark);
    background:linear-gradient(180deg, rgba(234,244,247,.95), rgba(255,255,255,.85));
    box-shadow:var(--sh-glow);transform:translateY(-2px)
  }
  /* feiner Haken oben rechts bei Auswahl (grün = ausgewählt/bestätigt) */
  .hv-tile.is-selected::after{
    content:'';position:absolute;top:9px;right:9px;width:19px;height:19px;border-radius:50%;
    background:var(--hv-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
    box-shadow:0 2px 8px -1px rgba(60,131,35,.5);animation:hvPop .3s cubic-bezier(.34,1.56,.6,1)
  }
  @keyframes hvPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
  .hv-tile .hv-ico{display:block;margin:0 auto 11px;width:30px;height:30px;color:var(--hv-primary)}
  /* PERF: Icon-Skalierung beim Hover entfernt — sparte eine zweite Transition/Repaint je Kachel. */
  .hv-tile .hv-ico svg{width:100%;height:100%;display:block;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .hv-tile.is-selected .hv-ico{color:var(--hv-primary-dark)}

  /* ---- Slider ---- */
  .hv-slider-box{max-width:460px;margin:0 auto}
  .hv-slider-val{text-align:center;font-size:1.6rem;font-weight:800;color:var(--hv-primary);margin-bottom:14px}
  /* direkt editierbares Wert-Feld (mobilfreundlich: tippen statt schieben) */
  .hv-valinput{width:auto;max-width:4.4em;text-align:center;font-size:1.6rem;font-weight:800;color:var(--hv-primary);
    border:none;border-bottom:2px dashed var(--hv-track);background:transparent;padding:0 2px;font-family:inherit;
    -moz-appearance:textfield}
  .hv-valinput:focus{outline:none;border-bottom-color:var(--hv-primary)}
  .hv-valinput::-webkit-outer-spin-button,.hv-valinput::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .hv-valunit{font-size:1.6rem;font-weight:800;color:var(--hv-primary)}
  .hv-slider-val{display:inline-flex;align-items:baseline;justify-content:center;gap:4px;width:100%}
  .hv-valhint{text-align:center;font-size:.82em;color:var(--hv-muted);margin:-8px 0 14px}
  .hv-range{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:var(--r-pill);background:var(--hv-track);outline:none}
  .hv-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:var(--hv-primary);cursor:pointer;border:4px solid #fff;box-shadow:var(--sh-md);transition:transform .15s}
  .hv-range::-webkit-slider-thumb:hover{transform:scale(1.08)}
  .hv-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--hv-primary);cursor:pointer;border:4px solid #fff;box-shadow:var(--sh-md)}
  .hv-range-ends{display:flex;justify-content:space-between;color:var(--hv-muted);font-size:.88em;margin-top:10px}

  /* ---- Eingabefelder ---- */
  .hv-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:560px){.hv-grid{grid-template-columns:1fr}}
  .hv-field{margin-bottom:2px}
  .hv-field.full{grid-column:1 / -1}
  .hv-field label{display:block;font-weight:600;font-size:1em;margin-bottom:6px}
  .hv-field input,.hv-field select{
    width:100%;padding:14px 15px;border:1px solid rgba(210,221,228,.9);border-radius:var(--r-sm);
    font-size:1rem;background:rgba(255,255,255,.92);color:var(--hv-text);
    transition:border-color .18s,box-shadow .18s,background .18s
  }
  .hv-field input::placeholder{color:#9aa7b0}
  .hv-field input:focus,.hv-field select:focus{outline:none;border-color:var(--hv-primary);background:#fff;box-shadow:var(--sh-ring)}
  /* fehlendes/ungültiges Feld: rot umrandet, bis korrekt ausgefüllt */
  .hv-field input.hv-invalid{border-color:#d63a3a;box-shadow:0 0 0 3px rgba(214,58,58,.14)}
  .hv-field input.hv-invalid:focus{border-color:#d63a3a;box-shadow:0 0 0 3px rgba(214,58,58,.22)}
  .hv-err{display:none;color:#d63a3a;font-size:.9em;margin-top:10px;text-align:center;font-weight:500}

  /* ---- Buttons / Navigation ---- */
  .hv-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:32px}
  .hv-btn{
    position:relative;overflow:hidden;
    padding:14px 26px;border:none;border-radius:var(--r-pill);font-size:1em;font-weight:600;cursor:pointer;
    transition:transform .2s cubic-bezier(.34,1.4,.5,1),box-shadow .2s,background .2s,filter .2s
  }
  /* animierter Licht-Sheen, der bei Hover über den Button wandert */
  .hv-next::after,.hv-submit::after{
    content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
    transform:skewX(-18deg);transition:left .6s ease
  }
  .hv-next:hover::after,.hv-submit:hover::after{left:130%}
  .hv-next{background:linear-gradient(135deg,#2a8aa8,var(--hv-primary-dark));color:#fff;box-shadow:var(--sh-glow)}
  .hv-next:hover{transform:translateY(-2px);box-shadow:var(--sh-glow),0 12px 26px -8px rgba(31,122,150,.5);filter:brightness(1.05)}
  .hv-next:active{transform:translateY(0) scale(.98)}
  .hv-back{background:rgba(255,255,255,.8);color:var(--hv-muted);border:1px solid var(--hv-border-strong)}
  .hv-back:hover{background:rgba(255,255,255,.85);color:var(--hv-text)}
  .hv-submit{background:linear-gradient(135deg,#2a8aa8,var(--hv-primary-dark));color:#fff;width:100%;padding:18px;font-size:1.08em;font-weight:700;margin-top:12px;box-shadow:var(--sh-glow)}
  .hv-submit:hover{transform:translateY(-2px);box-shadow:var(--sh-glow),0 14px 30px -8px rgba(31,122,150,.55);filter:brightness(1.05)}
  .hv-submit:active{transform:translateY(0) scale(.99)}

  /* ---- Trust-Zeile unter dem Absende-Button ---- */
  .hv-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 12px;margin-top:18px;font-size:.9em;color:var(--hv-text);font-weight:600}
  .hv-trust span{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:var(--r-pill);background:#f0faf1;border:1px solid #c4e6c8}
  /* feine Icons (SVG-Maske) statt Emoji – einheitlich mit dem übrigen Formular */
  .hv-trust span::before{content:'';width:14px;height:14px;flex-shrink:0;background:var(--hv-green);
    -webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:13px;mask-size:13px}
  .hv-trust span.hv-t-check::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E")}
  .hv-trust span.hv-t-lock::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 0 1 6 0v3z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 0 1 6 0v3z'/%3E%3C/svg%3E")}

  /* ---- Consent / Hinweis ---- */
  .hv-consent{display:flex;gap:11px;align-items:flex-start;font-size:.95em;color:var(--hv-text);margin:20px 0 2px;font-weight:500;line-height:1.45}
  .hv-consent input{margin-top:2px;flex-shrink:0;width:18px;height:18px;accent-color:var(--hv-primary);border-radius:3px}
  /* fehlende Zustimmung: Checkbox rot umranden (wie die Textfelder) */
  .hv-consent input.hv-invalid{outline:2px solid #d63a3a;outline-offset:2px;box-shadow:0 0 0 3px rgba(214,58,58,.14)}
  .hv-consent.hv-invalid-text{color:#d63a3a}
  .hv-consent a{color:var(--hv-primary);text-underline-offset:2px}
  .hv-consent-note{background:var(--hv-bg);border-radius:var(--r-sm);padding:13px 15px;font-size:.88em;color:var(--hv-muted);margin:12px 0 0;line-height:1.5}
  .hv-consent-note a{color:var(--hv-primary)}

  /* ---- Schritt 9: Belohnungs-Text, Mini-Zusammenfassung, Feld-Hinweis ---- */
  /* motivierende Zeile über den Kontaktfeldern ("nur noch..."), grün = positiv */
  .hv-reward{text-align:center;font-size:.98em;font-weight:600;color:var(--hv-green);margin:-18px auto 16px;max-width:520px;line-height:1.4}
  /* Mini-Zusammenfassung des bereits Eingegebenen: macht den investierten Aufwand sichtbar */
  .hv-summary{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:0 auto 20px;max-width:560px}
  .hv-summary:empty{display:none}
  .hv-summary .hv-sum-item{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill);
    background:var(--hv-primary-soft);border:1px solid var(--hv-border-strong);
    font-size:.82em;font-weight:600;color:var(--hv-primary-dark);white-space:nowrap}
  /* kleiner beruhigender Hinweis unter einem Feld (z.B. Telefon) */
  .hv-fieldnote{margin:7px 2px 0;font-size:.82em;color:var(--hv-muted);line-height:1.4}

  /* ---- Danke-Seite ---- */
  .hv-sent{display:none;text-align:center}
  .hv-sent-head{
    background:linear-gradient(180deg,#f0faf1,#e8f6ea);border:1px solid #c4e6c8;border-radius:var(--r);
    padding:34px 24px 30px;color:#1c5a26;font-size:1.05em;line-height:1.55;box-shadow:var(--sh-sm)
  }
  /* elegantes Häkchen-Badge über der Danke-Überschrift (statt Emoji) */
  .hv-sent-head::before{
    content:'';display:block;width:54px;height:54px;margin:0 auto 14px;border-radius:50%;
    background-color:var(--hv-green);box-shadow:0 6px 16px -4px rgba(60,131,35,.5);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:center;background-size:30px
  }
  .hv-sent-head strong{display:block;font-size:1.32em;margin-bottom:8px;color:#14501f}
  /* Warum über Makler verkaufen */
  .hv-why{background:var(--hv-bg);border:1px solid var(--hv-border);border-radius:var(--r);padding:24px 26px;text-align:left;margin-top:28px}
  /* Einleitung: "erster Schritt getan, unverbindlich" – steht ÜBER der H3 */
  .hv-why-intro{margin:0 0 18px;font-size:.95em;color:var(--hv-muted);line-height:1.55;text-align:center}
  .hv-why-intro strong{color:var(--hv-text)}
  .hv-why h3{margin:0 0 16px;font-size:1.05em;color:var(--hv-text);text-align:center;font-weight:700;line-height:1.4}
  /* Verweis auf den Ratgeber-Artikel unter der Vorteilsliste */
  .hv-why-link{margin:18px 0 0;text-align:center;font-size:.92em}
  .hv-why-link a{color:var(--hv-primary);font-weight:600;text-decoration:none;text-underline-offset:2px}
  .hv-why-link a:hover{text-decoration:underline}
  .hv-why ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
  .hv-why li{position:relative;padding-left:30px;font-size:.95em;color:var(--hv-muted);line-height:1.5}
  .hv-why li::before{
    content:'';position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:var(--hv-green);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
    background-color:var(--hv-green)
  }
  .hv-why li strong{color:var(--hv-text);font-weight:600}

  /* ---- Anruf-Vorbereitung (blauer Hinweis auf der Danke-Seite) ---- */
  .hv-callout{display:flex;gap:14px;align-items:flex-start;margin-top:18px;
    background:var(--hv-primary-soft);border:1px solid var(--hv-border-strong);border-radius:18px;padding:18px 20px}
  .hv-callout-ic{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--hv-primary);
    display:flex;align-items:center;justify-content:center}
  .hv-callout-ic svg{width:19px;height:19px;stroke:#fff;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .hv-callout-tx{font-size:.95em;color:var(--hv-text);line-height:1.5}
  .hv-callout-tx strong{color:var(--hv-primary-dark)}

  /* ---- "Kostenlos"-Ecken-Schleife (Ribbon) oben rechts ----
     Eigener Clip-Container in der Ecke, damit das diagonale Band an der
     runden Kartenecke sauber abgeschnitten wird (ohne overflow:hidden auf
     der ganzen Karte). */
  .hv-ribbon{position:absolute;top:0;right:0;width:118px;height:118px;overflow:hidden;
    border-top-right-radius:var(--r);pointer-events:none;z-index:3}
  .hv-ribbon span{position:absolute;top:22px;right:-40px;transform:rotate(45deg);
    display:block;width:170px;text-align:center;
    background:linear-gradient(135deg,#4a9e2e,#3c8323);color:#fff;
    font-size:.66em;font-weight:700;letter-spacing:.07em;line-height:2.1;
    box-shadow:0 3px 8px -2px rgba(60,131,35,.55)}
  @media(max-width:560px){
    .hv-ribbon{width:96px;height:96px}
    .hv-ribbon span{top:16px;right:-44px;width:160px;font-size:.6em;line-height:1.9}
  }