/* =====================================================================
   Konfigurator (Relaunch-Layer) — Hero-Mini + Overlay-Funnel.
   Ersetzt den statischen Ansprechpartner-Block im Hero durch den
   nativen Spar-Konfigurator. Additiv, non-destruktiv.

   Tokens stammen aus relaunch.css (dort geladen); hier nur die im
   Original-Konfigurator (lite.css) genutzten Timing-Tokens ergaenzt.
   Alle Klassen sind unter .kmini bzw. #ovBackdrop gescoped, damit sie
   NICHT mit bestehenden relaunch.css-Klassen (.step/.badge/.reveal ...)
   kollidieren.
   ===================================================================== */

:root{
  /* Timing-Tokens 1:1 aus lite.css (Original-Konfigurator) */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-press:110ms; --dur:180ms; --dur-reveal:420ms;
}

/* ---- HERO-MINI-KONFIGURATOR (ersetzt <aside class="advisor">) ---- */
.kmini{background:#fff;border-radius:var(--r-2xl);box-shadow:var(--shadow-lg);
  padding:28px;position:relative}
/* "Hier starten"-Geste: der Hero-Primaer "Kostenlos beraten lassen" ist auf Desktop
   ein toter Anker (Karte schon sichtbar). Statt ins Leere zu springen, lenkt der Klick
   den Blick per zwei kontrollierten Pulsen auf die Karte, dann stoppt es. Kein Dauer-Loop.
   Compositor-freundlich (Web-Interface-Guideline): animiert werden NUR transform+opacity.
   Der Halo ist ein eigener ::after-Ring mit statischem box-shadow, der nach aussen auf die
   orange Buehne skaliert und ausblendet; die Karte hebt zusaetzlich minimal an. */
.kmini::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.85);opacity:0}
.kmini.is-cueing{animation:kminiLift .8s ease-out 2}
.kmini.is-cueing::after{animation:kminiHalo .8s ease-out 2}
@keyframes kminiLift{0%,100%{transform:scale(1)} 35%{transform:scale(1.015)}}
@keyframes kminiHalo{
  0%  {opacity:.85; transform:scale(1)}
  70% {opacity:0;   transform:scale(1.045)}
  100%{opacity:0;   transform:scale(1.045)}
}
@media (prefers-reduced-motion:reduce){
  .kmini.is-cueing,.kmini.is-cueing::after{animation:none}
}
.kmini::before{content:"";position:absolute;inset:-1px;border-radius:inherit;
  padding:1px;background:linear-gradient(135deg,var(--orange),transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.kmini-eyebrow{font-size:12.5px;font-weight:680;letter-spacing:.03em;color:var(--cta);
  text-transform:uppercase;display:flex;align-items:center;gap:7px}
.kmini-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.kmini h2{font-size:22px;line-height:1.2;letter-spacing:-.02em;margin:12px 0 0;font-weight:720}
.kmini p{font-size:14.5px;color:var(--ink-2);margin:8px 0 0}

/* Erster Schritt als Hook direkt in der Karte (Wert wird ins Overlay vorbefuellt) */
/* Slider-Zone: leise graue Fuellung als "hier anfassen"-Signal, aber OHNE Rahmen
   (17.07. Variante B): Fill + Rahmen zusammen waren ein Box-in-Box auf der weissen
   Karte und das nach dem Declutter schwerste Element im Hero. Ein Signal reicht;
   der Fill bleibt, die harte Umrandung faellt weg. */
.kmini-q{margin-top:20px;background:var(--paper-2);
  border-radius:var(--r-lg);padding:16px 16px 18px}
.kmini-q label{font-size:14px;font-weight:620;display:flex;justify-content:space-between;
  align-items:baseline}
.kmini-q .val{font-size:20px;font-weight:740;color:var(--cta);font-variant-numeric:tabular-nums}
/* Slider senioren-/touch-tauglich (Hero-Mini + alle Overlay-Schritte, Paritaet):
   30px-Thumb + 44px hohe Greif-Zone (WCAG 2.5.5), dickerer Track, kein Tap-Delay,
   :active-Rueckmeldung, Fokus-Ring. Overlay-Regel (frueher accent-color) ersetzt. */
.kmini-q input[type=range],
#ovBackdrop .step input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;
  margin-top:8px;background:transparent;cursor:pointer;touch-action:manipulation}
.kmini-q input[type=range]::-webkit-slider-runnable-track,
#ovBackdrop .step input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;
  background:var(--line)}
.kmini-q input[type=range]::-moz-range-track,
#ovBackdrop .step input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:var(--line)}
.kmini-q input[type=range]::-webkit-slider-thumb,
#ovBackdrop .step input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:30px;height:30px;margin-top:-11px;border-radius:50%;background:var(--cta);
  border:3px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.28)}
.kmini-q input[type=range]::-moz-range-thumb,
#ovBackdrop .step input[type=range]::-moz-range-thumb{width:30px;height:30px;border-radius:50%;
  background:var(--cta);border:3px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.28)}
.kmini-q input[type=range]:active::-webkit-slider-thumb,
#ovBackdrop .step input[type=range]:active::-webkit-slider-thumb{width:34px;height:34px;margin-top:-13px}
.kmini-q input[type=range]:active::-moz-range-thumb,
#ovBackdrop .step input[type=range]:active::-moz-range-thumb{width:34px;height:34px}
.kmini-q input[type=range]:focus-visible,
#ovBackdrop .step input[type=range]:focus-visible{outline:none}
.kmini-q input[type=range]:focus-visible::-webkit-slider-thumb,
#ovBackdrop .step input[type=range]:focus-visible::-webkit-slider-thumb{outline:3px solid var(--cta);
  outline-offset:2px}
.kmini-q input[type=range]:focus-visible::-moz-range-thumb,
#ovBackdrop .step input[type=range]:focus-visible::-moz-range-thumb{outline:3px solid var(--cta);
  outline-offset:2px}
.kmini-q .rng-legend{display:flex;justify-content:space-between;font-size:12px;
  color:var(--ink-3);margin-top:5px}
.kmini-cta{margin-top:18px}
.kmini-cta .btn{width:100%}
/* Die kmini-Karte liegt im Hero, wo .hero .btn-primary den Button WEISS faerbt
   (weiss-auf-orange). In der weissen Karte wuerde er dadurch verschwinden —
   deshalb hier per ID zurueck auf den gefuellten CTA (#C24E00, WCAG AA). */
#kminiStart.btn-primary{background:var(--cta);color:#fff;
  box-shadow:0 1px 1px rgba(168,67,0,.4),0 8px 22px rgba(194,78,0,.28)}
#kminiStart.btn-primary:hover{background:var(--cta-d);
  box-shadow:0 2px 2px rgba(168,67,0,.4),0 12px 28px rgba(194,78,0,.34)}

/* Kopfzeile: Eyebrow-Pille + Sterne-Beweis in einer Reihe (Variante A 17.07.).
   flex-wrap: wo der Platz nicht reicht (schmale Phones), rutscht die Sterne-Leiste
   sauber unter die Pille — nie wortintern gebrochen. Beraterbox wurde aus dem
   Hero-Mini entfernt (Hero = ein Job); sie lebt an beiden Funnel-Enden weiter. */
.kmini-headrow{display:flex;align-items:center;justify-content:space-between;
  gap:6px 14px;flex-wrap:wrap}
.kmini-headrow .kmini-trust{margin-top:0}
.kmini .k-avatar,#ovBackdrop .k-avatar{width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,#ffd8b0,#ff9d4d);display:grid;place-items:center;
  color:#7a3900;flex:none;font-weight:700;font-size:16px;position:relative;overflow:visible}
.kmini .k-avatar img,#ovBackdrop .k-avatar img{position:absolute;inset:0;width:100%;height:100%;
  border-radius:50%;object-fit:cover;display:block}
.kmini .k-avatar .on,#ovBackdrop .k-avatar .on{position:absolute;right:-1px;bottom:-1px;
  width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid #fff}
.kmini .k-txt b,#ovBackdrop .k-txt b{font-size:14px;display:block;letter-spacing:-.01em}
.kmini .k-txt .subline,#ovBackdrop .k-txt .subline{font-size:12.5px;color:var(--ink-2)}

/* Trust — Werte 1:1 aus dem Original-Konfigurator (KonfiguratorShortcode),
   vom Betreiber belegt. Sterne-Leiste am Kopf, Micro/Bekannt-aus am Fuss. */
.kmini-trust{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:13px}
.kmini-stars{color:#f5a623;letter-spacing:1.5px;font-size:14px;line-height:1}
.kmini-rating{font-weight:740;color:var(--ink);font-variant-numeric:tabular-nums}
.kmini-trust-meta{color:var(--ink-3)}
.kmini-foottrust{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px}
/* Fuss-Trust (DSGVO/unverbindlich/keine Abos): jede Zusage ist eine ATOMARE
   Einheit (white-space:nowrap) — Icon+Text reissen nie, "DSGVO-konform" bricht
   nie wortintern. Passen alle drei nebeneinander -> eine zentrierte Reihe; wird
   die Karte zu schmal, brechen GANZE Zusagen sauber um (2+1 / gestapelt), statt
   dass Woerter zerfetzen. Ersetzt den fragilen nowrap+vw-clamp-Ansatz (2 Patches,
   User 12.07. IMG_1791 + Android-Recording 13.07.): der scheiterte, weil clamp
   an der VIEWPORT-Breite haengt, die begrenzende Breite aber die KARTE ist
   (Buy-Box-Spalte, schmaler als der Viewport — erst recht mit Display-Zoom). */
.kmini-micro{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:7px 16px;font-size:12.5px;color:var(--ink-2);font-weight:560}
.kmini-micro span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.kmini-ico{width:14px;height:14px;color:var(--green);flex:none}
/* Container-Query: Schrift richtet sich an der ECHTEN Kartenbreite aus, nicht am
   Viewport — genau die Achse, an der der alte clamp vorbeigemessen hat. Progressiv
   (@supports), Fallback ist das saubere Umbrechen oben. */
@supports (container-type:inline-size){
  .kmini-foottrust{container-type:inline-size}
  @container (max-width:290px){
    .kmini-micro{font-size:11.5px;gap:6px 12px}
  }
}
.kmini-press{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}
.kmini-press-label{text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  font-size:10px;color:var(--ink-3);flex:none}
.kmini-press-names{font-size:12px;color:var(--ink-2);font-weight:560}
/* Mobil (<=560px): Konfigurator auf FILTER-MASS (Check24-/Verivox-Muster, gemessen
   14.07.). Fuss-Trust-Deko und der Untertitel weichen dem fruehen Tarif-Zugriff; der
   funktionale Kern (Slider + "Ersparnis berechnen") und die Trust-Beweise am Kopf
   (Sterne 4,9 + "Kostenlos & unverbindlich") bleiben sichtbar. Die ausgeblendeten
   Bloecke wiederholen sich 1:1 im Overlay-Funnel bzw. im Hero-Text -> keine Info geht
   verloren; auch keine SEO-Keywords (reine Trust-Deko). Ergebnis: Konfigurator ~380px.
   Entscheid User 14.07. (Scroll-Tiefe mobil, "Check24-Muster"). Beraterbox seit
   17.07. ganz aus dem Hero-Mini raus (Variante A), daher keine Mobil-Sonderregel mehr. */
@media(max-width:560px){
  .kmini-foottrust{display:none}   /* DSGVO/keine-Abos + "Bekannt aus" (Deko) */
  #kminiSub{display:none}          /* Untertitel "In 60 Sekunden ..." */
}

/* ---- OVERLAY-FUNNEL ---- */
.ov-backdrop{position:fixed;inset:0;background:rgba(12,20,30,.55);backdrop-filter:blur(3px);
  display:none;place-items:center;padding:20px;z-index:50}
.ov-backdrop.open{display:grid}
.ov{background:#fff;width:100%;max-width:560px;border-radius:var(--r-2xl);
  box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;
  max-height:calc(100vh - 40px)}
#ovBackdrop .ov-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;
  align-items:center;gap:14px}
#ovBackdrop .ov-progress{flex:1;height:7px;border-radius:980px;background:var(--paper-2);overflow:hidden}
/* Fortschritt per transform:scaleX (GPU, kein Layout) statt width */
#ovBackdrop .ov-progress i{display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--orange),var(--cta));
  border-radius:inherit;transform:scaleX(.125);transform-origin:left;
  transition:transform .35s var(--ease)}
#ovBackdrop .ov-step-count{font-size:12.5px;color:var(--ink-3);font-weight:600;white-space:nowrap;
  font-variant-numeric:tabular-nums}
#ovBackdrop .ov-close{border:none;background:var(--paper-2);width:34px;height:34px;border-radius:50%;
  cursor:pointer;color:var(--ink-2);font-size:18px;line-height:1;display:grid;place-items:center}
#ovBackdrop .ov-close:hover{background:#ececf0}
#ovBackdrop .ov-close:focus-visible{outline:2.5px solid var(--cta);outline-offset:2px}
#ovBackdrop .ov-body{padding:26px 26px 8px;overflow-y:auto;overscroll-behavior:contain}
#ovBackdrop .ov-body h3{font-size:20px;letter-spacing:-.02em;margin:0;font-weight:720}
#ovBackdrop .ov-body .sub{font-size:14px;color:var(--ink-2);margin:7px 0 0}
#ovBackdrop .ov-foot{padding:16px 26px 22px;display:flex;gap:12px;align-items:center}
#ovBackdrop .ov-foot .spacer{flex:1}
#ovBackdrop .lnk-back{background:none;border:none;color:var(--ink-2);font-weight:600;font-size:14.5px;
  cursor:pointer;padding:10px 6px;font-family:inherit;border-radius:8px}
#ovBackdrop .lnk-back:hover{color:var(--ink)}
#ovBackdrop .lnk-back:focus-visible{outline:2.5px solid var(--cta);outline-offset:2px}

#ovBackdrop .step{display:none}
#ovBackdrop .step.active{display:block;animation:mbk-fade-in .25s var(--ease)}
/* relaunch.css .step traegt einen decimal-leading-zero-Counter (Prozess-Karten
   "01".."04") + eine Verbinder-Linie. Im Funnel ist immer nur der AKTIVE .step
   sichtbar; CSS-Counter zaehlen display:none-Elemente nicht mit -> der Zaehler
   sieht nur dieses eine Element und zeigt auf JEDEM Schritt "01". Hier
   neutralisiert; die Schrittanzeige im Funnel laeuft ueber #ovCount ("Schritt X / 8"). */
#ovBackdrop .step::before,
#ovBackdrop .step:not(:last-child)::after{content:none}
@keyframes mbk-fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- Scan-Sweep Preloader (Reveal-Berechnung) — Shop-Optik ---- */
#ovBackdrop .scan{display:none;padding:34px 0 10px;text-align:center}
#ovBackdrop .scan.on{display:block;animation:mbk-fade-in .25s var(--ease)}
#ovBackdrop .scan-row{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;
  padding:10px 14px;overflow:hidden;border-radius:980px;max-width:320px;margin:0 auto}
#ovBackdrop .scan-logo{min-width:52px;height:52px;border-radius:50%;background:#fff;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;opacity:.4;
  will-change:transform,opacity;animation:scan-pulse 2.2s var(--ease) infinite}
#ovBackdrop .scan-logo img{height:36px;width:36px;border-radius:50%;object-fit:cover;display:block}
#ovBackdrop .scan-logo.tk{animation-delay:0ms} #ovBackdrop .scan-logo.vf{animation-delay:250ms}
#ovBackdrop .scan-logo.o2{animation-delay:500ms}
@keyframes scan-pulse{0%{opacity:.4;transform:scale(1)}8%{opacity:1;transform:scale(1.08)}
  20%{opacity:.4;transform:scale(1)}100%{opacity:.4;transform:scale(1)}}
#ovBackdrop .scan-sweep{position:absolute;top:0;bottom:0;left:0;width:64px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,104,0,.35),transparent);
  transform:translateX(-72px);will-change:transform,opacity;
  animation:scan-sweep 2.2s var(--ease) infinite}
@keyframes scan-sweep{0%{transform:translateX(-72px);opacity:0}12%{opacity:1}88%{opacity:1}
  100%{transform:translateX(300px);opacity:0}}
#ovBackdrop .scan-cap{font-weight:520;color:var(--ink-2);margin-top:20px;font-size:15px}
#ovBackdrop .scan-cap .spin{display:inline-block;width:15px;height:15px;vertical-align:-2px;margin-right:7px;
  border:2px solid var(--line);border-top-color:var(--cta);border-radius:50%;
  animation:mbk-spin 1s linear infinite}
@keyframes mbk-spin{to{transform:rotate(360deg)}}

/* Gestaffelter Reveal-Auftritt (nur opacity/transform, kein CLS) */
@keyframes mbk-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#ovBackdrop .reveal.play .rv-eyebrow,#ovBackdrop .reveal.play .rv-range,
#ovBackdrop .reveal.play .rv-sub,#ovBackdrop .reveal.play .rv-tarif,
#ovBackdrop .reveal.play .fn-advisor,#ovBackdrop .reveal.play .rv-disc{
  animation:mbk-rise var(--dur-reveal) var(--ease) both}
#ovBackdrop .reveal.play .rv-range{animation-delay:80ms}
#ovBackdrop .reveal.play .rv-sub{animation-delay:140ms}
#ovBackdrop .reveal.play .rv-tarif{animation-delay:220ms}
#ovBackdrop .reveal.play .fn-advisor{animation-delay:300ms}
#ovBackdrop .reveal.play .rv-disc{animation-delay:360ms}

@media(prefers-reduced-motion:reduce){
  #ovBackdrop .step.active,#ovBackdrop .scan.on,#ovBackdrop .reveal.play *{animation:none!important}
  #ovBackdrop .scan-logo{opacity:1;animation:none} #ovBackdrop .scan-sweep{display:none}
  #ovBackdrop .scan-cap .spin{animation:mbk-spin 1s linear infinite!important}
}

/* Range-Step */
#ovBackdrop .rng-big{text-align:center;margin:26px 0 8px}
#ovBackdrop .rng-big .num{font-size:44px;font-weight:780;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums}
#ovBackdrop .rng-big .unit{font-size:17px;color:var(--ink-2);font-weight:600;margin-left:6px}
/* Overlay-Slider-Optik siehe gemeinsame Slider-Regel oben (Hero + Overlay-Paritaet). */
#ovBackdrop .rng-legend2{display:flex;justify-content:space-between;font-size:12px;
  color:var(--ink-3);margin-top:6px}

/* Radio-Kacheln */
#ovBackdrop .opts{display:grid;gap:12px;margin-top:22px}
#ovBackdrop .opts.net{grid-template-columns:repeat(2,1fr)}
.kmini .btn,#ovBackdrop .opt,#ovBackdrop .btn,#ovBackdrop .ov-close,#ovBackdrop .lnk-back{touch-action:manipulation}
#ovBackdrop .opt{border:1.5px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;cursor:pointer;
  display:flex;align-items:center;gap:13px;font-weight:620;font-size:15px;background:#fff;
  transition:border-color var(--dur),background var(--dur),box-shadow var(--dur),transform var(--dur-press) var(--ease)}
#ovBackdrop .opt:hover{border-color:#d5d9e0;background:#fafbfc}
#ovBackdrop .opt:active{transform:scale(.985)}
#ovBackdrop .opt.sel{border-color:var(--cta);background:#fff7f1;box-shadow:inset 0 0 0 1px var(--cta)}
#ovBackdrop .opt:focus-visible{outline:2.5px solid var(--cta);outline-offset:2px}
#ovBackdrop .opt .badge{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  color:#fff;font-size:12px;font-weight:800;flex:none;letter-spacing:-.02em}
#ovBackdrop .opt .logo{width:34px;height:34px;border-radius:50%;background:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
#ovBackdrop .opt .logo img{height:34px;width:34px;border-radius:50%;object-fit:cover;display:block}

/* Berater-Chip im Funnel */
#ovBackdrop .fn-advisor{display:flex;align-items:flex-start;gap:11px;margin-top:22px;background:var(--paper-2);
  border-radius:var(--r-lg);padding:12px 14px}
#ovBackdrop .fn-advisor .k-txt{flex:1;min-width:0}
#ovBackdrop .fn-advisor .k-txt b{font-size:13.5px}
#ovBackdrop .fn-advisor .k-txt .subline{font-size:12px}
/* Antwortzeit-Bildunterschrift im Kontakt-Fuss (Schritt 7) — geteilte .k-resp in relaunch.css */
@media(max-width:560px){
  /* Avatar neben Text (Zeile 1), Kontakt-Block (Nummer + Antwortzeit-Zeile darunter)
     volle Breite unter dem Text eingerueckt. Keine Pille mehr, die um Platz kaempft. */
  #ovBackdrop .fn-advisor{display:grid;grid-template-columns:auto 1fr;
    grid-template-areas:"avatar text" "contact contact";align-items:start;row-gap:10px;column-gap:11px}
  #ovBackdrop .fn-advisor .k-avatar{grid-area:avatar}
  #ovBackdrop .fn-advisor .k-txt{grid-area:text}
  #ovBackdrop .fn-advisor .k-txt b{font-size:clamp(12px,calc(3vw + 3.2px),13.5px)}
  #ovBackdrop .fn-advisor .k-contact{grid-area:contact;justify-self:start;margin-left:52px;
    align-items:flex-start;gap:2px}
}
/* Sehr schmale Phones (<=319px, z.B. Galaxy Fold aussen 280px): Kontakt-Einrueckung
   raus, sonst overflowt die 44er-Rufnummer die Karte (Text-Spalte + margin-left
   52 lassen der nowrap-Nummer nur ~124px). 320px+ bleiben bei 52px ausgerichtet. */
@media(max-width:319px){
  #ovBackdrop .fn-advisor .k-contact{margin-left:0}
}
/* Kompakt am KONTAKT-Schritt (Step 8, .fn-advisor--compact): leise Vertrauens-
   Zeile statt geschatteter Box — konkurriert am Absende-Moment nicht mit dem CTA.
   Reveal-Schritt (Step 7) behaelt die volle Box. Subline hier redundant zu Recap
   + H3 -> versteckt (rein CSS, Partial unveraendert). */
#ovBackdrop .fn-advisor--compact{background:transparent;border-radius:0;
  border-top:1px solid var(--line);padding:14px 2px 2px;margin-top:16px}
#ovBackdrop .fn-advisor--compact .k-avatar{width:34px;height:34px}
#ovBackdrop .fn-advisor--compact .k-avatar svg{width:18px;height:18px}
#ovBackdrop .fn-advisor--compact .k-avatar .on{width:10px;height:10px}
#ovBackdrop .fn-advisor--compact .k-txt b{font-size:13px}
#ovBackdrop .fn-advisor--compact .k-txt .subline{display:none}
@media(max-width:560px){
  /* Avatar geschrumpft -> Kontakt-Einrueckung nachziehen (34 + 11 Gap = 45). */
  #ovBackdrop .fn-advisor--compact .k-contact{margin-left:45px}
}
@media(max-width:319px){
  #ovBackdrop .fn-advisor--compact .k-contact{margin-left:0}
}
#ovBackdrop .fn-privacy{margin:12px 0 0;font-size:12px;line-height:1.45;color:var(--ink-3,#6b7280);text-align:center}

/* Reveal */
#ovBackdrop .reveal{text-align:center;padding:8px 0}
#ovBackdrop .reveal .rv-eyebrow{font-size:12.5px;font-weight:680;letter-spacing:.03em;color:var(--green);
  text-transform:uppercase}
#ovBackdrop .reveal .rv-range{font-size:40px;font-weight:800;letter-spacing:-.03em;margin:12px 0 2px;
  color:var(--ink);font-variant-numeric:tabular-nums}
#ovBackdrop .reveal .rv-range .cur{color:var(--cta)}
#ovBackdrop .reveal .rv-sub{font-size:14px;color:var(--ink-2);max-width:40ch;margin:6px auto 0}
#ovBackdrop .reveal .rv-tarif{margin-top:20px;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;display:flex;align-items:center;gap:13px;text-align:left}
#ovBackdrop .reveal .rv-tarif .logo{width:44px;height:44px;border-radius:50%;background:#fff;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
#ovBackdrop .reveal .rv-tarif .logo img{height:44px;width:44px;border-radius:50%;object-fit:cover;display:block}
#ovBackdrop .reveal .rv-tarif b{font-size:15px}
#ovBackdrop .reveal .rv-tarif span{font-size:13px;color:var(--ink-2)}
/* Rechtstext (§5/§6 UWG) auf AA-sicheres ink-2 statt ink-3 */
#ovBackdrop .rv-disc{font-size:11.5px;color:var(--ink-2);margin-top:16px;line-height:1.45}

/* Cross-Sell-Karte (SIM < 3) */
#ovBackdrop .xsell{margin-top:20px;border:1.5px dashed var(--cta);border-radius:var(--r-lg);
  padding:18px;background:#fff7f1;text-align:center;display:none}
#ovBackdrop .xsell.show{display:block}
#ovBackdrop .xsell b{font-size:15.5px}
#ovBackdrop .xsell p{font-size:13.5px;color:var(--ink-2);margin:6px 0 14px}

/* Kontakt-Form */
#ovBackdrop .form-grid{display:grid;gap:13px;margin-top:20px}
#ovBackdrop .field label{font-size:13px;font-weight:600;color:var(--ink-2);display:block;margin-bottom:5px}
#ovBackdrop .field input{width:100%;border:1.5px solid var(--line);border-radius:var(--r-md);padding:12px 13px;
  font-size:16px;font-family:inherit}
#ovBackdrop .field input:focus{outline:none;border-color:var(--cta);box-shadow:0 0 0 3px rgba(194,78,0,.12)}
#ovBackdrop .field.invalid input{border-color:#d92d20;box-shadow:0 0 0 3px rgba(217,45,32,.12)}
#ovBackdrop .field .err{display:none;color:#b42318;font-size:12.5px;margin-top:5px;font-weight:600}
#ovBackdrop .field.invalid .err{display:block}
#ovBackdrop .consent{display:flex;gap:10px;align-items:flex-start;margin-top:4px;font-size:13px;color:var(--ink-2)}
#ovBackdrop .consent input{margin-top:2px;accent-color:var(--cta);width:17px;height:17px;flex:none}
#ovBackdrop .consent a{color:var(--cta)}
#ovBackdrop .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#ovBackdrop .save-recap{background:#f0faf3;border:1px solid #cdeed6;color:#14663a;border-radius:var(--r-md);
  padding:11px 14px;font-size:13.5px;margin-bottom:18px}
#ovBackdrop .save-recap b{color:var(--green-strong,#1e7a3a)}

/* Fehler-/Erfolg-Banner fuer den Lead-Versand */
#ovBackdrop .ov-note{border-radius:var(--r-md);padding:12px 14px;font-size:13.5px;margin-top:16px;display:none}
#ovBackdrop .ov-note.show{display:block}
#ovBackdrop .ov-note.err{background:#fef3f2;border:1px solid #fecdca;color:#b42318}
#ovBackdrop .ov-note.ok{background:#f0faf3;border:1px solid #cdeed6;color:#14663a}

@media(max-width:1000px){
  .kmini{max-width:480px}
}
@media(max-width:560px){
  #ovBackdrop .opts.net{grid-template-columns:1fr}
  /* Overlay als Bottom-Sheet — daumenfreundlich, volle Breite */
  .ov-backdrop.open{place-items:end center;padding:0}
  .ov{max-width:100%;max-height:94vh;border-radius:20px 20px 0 0}
  #ovBackdrop .ov-body{padding:22px 18px 8px}
  #ovBackdrop .ov-head{padding:16px 18px}
  /* Bottom-Sheet: Foot nicht unter den Home-Indicator schieben */
  #ovBackdrop .ov-foot{padding:14px 18px calc(20px + env(safe-area-inset-bottom))}
  .kmini{padding:22px}
  #ovBackdrop .rng-big .num{font-size:38px}
  #ovBackdrop .reveal .rv-range{font-size:32px}
}