/* ===================================================================
   FAVE – Fahrzeugvermittlung Deutschland
   Premium Conversion Landingpage · Schwarz-Rot-Gold
   =================================================================== */

:root {
  /* Marke – tiefe, edle Töne; Rot bleibt der Signal-Akzent nur für CTAs */
  --black: #0A0908;
  --ink: #14110F;
  --ink-2: #221D19;
  --ink-3: #362F28;
  --red: #B31522;
  --red-dark: #8E0F1A;
  --gold: #C3A15A;      /* Akzent auf dunklem Grund / Linien */
  --gold-light: #E8D5A3;
  --gold-ink: #826729;  /* goldbraun – lesbar als Textfarbe auf hellem Grund */

  /* Neutral – klares Weiß mit kühlem Zweitton (Slop-Fix: bewusster Reset statt Creme) */
  --paper: #FFFFFF;
  --paper-2: #F6F6F7;
  --white: #fff;
  --text: #453E37;
  --muted: #736960;
  --line: rgba(20, 17, 15, .09);
  --line-strong: rgba(20, 17, 15, .16);

  /* System */
  --maxw: 1240px;
  --display: 'Sora', system-ui, -apple-system, sans-serif;
  /* Slop-Fix (slop_fonts): Fließtext auf System-Stack statt Inter */
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --r: 16px;
  --r-lg: 26px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow: 0 4px 24px rgba(10, 9, 8, .06);
  --shadow-lg: 0 30px 80px rgba(10, 9, 8, .17);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--display); color: var(--ink); line-height: 1.08; font-weight: 700; letter-spacing: -.02em; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
/* Einheitliche vertikale Rhythmik über alle Sektionen */
.section { padding: clamp(76px, 10vw, 116px) 0; position: relative; }
.section--dark { background: var(--ink); color: #CFC6BC; }
.section--paper2 { background: var(--paper-2); }

.head { max-width: 760px; margin: 0 auto clamp(44px, 6vw, 68px); text-align: center; }
/* Eine H2-Größe für die gesamte Seite (klare Hierarchie unter der H1) */
.head h2 { font-size: clamp(1.72rem, 4.2vw, 3rem); margin-bottom: 18px; }
.head p { font-size: 1.12rem; color: var(--muted); max-width: 62ch; margin-inline: auto; }
.section--dark .head h2 { color: #fff; }
.section--dark .head p { color: #A99E92; }

/* Label über Überschriften */
/* Slop-Fix (allcaps_labels): normale Schreibweise statt VERSALIEN;
   Trikolore als SVG-Streifen statt CSS-Gradient (slop_gradients) */
.label {
  display: inline-flex; align-items: center; gap: 13px;
  font-weight: 600; font-size: .88rem; letter-spacing: 0;
  color: var(--gold-ink); margin-bottom: 22px;
}
.label::before {
  content: ""; width: 27px; height: 2px; border-radius: 2px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="27" height="2"><rect width="9" height="2" fill="%2314110F"/><rect x="9" width="9" height="2" fill="%23B31522"/><rect x="18" width="9" height="2" fill="%23C3A15A"/></svg>') no-repeat;
}
.section--dark .label, .hero .label { color: var(--gold-light); }
.section--dark .label::before, .hero .label::before {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="27" height="2"><rect width="9" height="2" fill="%23FFFFFF"/><rect x="9" width="9" height="2" fill="%23B31522"/><rect x="18" width="9" height="2" fill="%23C3A15A"/></svg>') no-repeat;
}
.label--center { justify-content: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-weight: 600; font-size: 1rem;
  padding: 17px 32px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap; position: relative; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .25s ease, color .25s ease, border-color .25s ease;
}
.btn .arr { transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
/* Slop-Fix (colored_glow, slop_gradients): Vollton statt Verlauf, neutraler Schatten, kein Glanz-Sweep */
.btn-primary {
  background: var(--red);
  color: #fff; box-shadow: 0 4px 14px rgba(10, 9, 8, .08);
}
.btn-primary:hover { transform: translateY(-2px); background: var(--red-dark); box-shadow: 0 8px 20px rgba(10, 9, 8, .08); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.btn-glass {
  background: rgba(10, 9, 8, .55); color: #fff;
  border-color: rgba(255, 255, 255, .35);
}
.btn-glass:hover { background: rgba(255, 255, 255, .2); border-color: #fff; transform: translateY(-2px); }
.btn-sm { padding: 11px 22px; font-size: .9rem; }
.btn-lg { padding: 20px 40px; font-size: 1.06rem; }
.btn-block { width: 100%; }

/* ---------- Scroll-Animationen (dezent, edel: sanftes Scharfstellen) ---------- */
.reveal {
  opacity: 0; transform: translateY(26px); filter: blur(6px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
.reveal.in { opacity: 1; transform: none; filter: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
/* Slop-Fix (glassmorphism): opak statt Milchglas */
.site-header.scrolled {
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 1px 0 var(--line), 0 6px 24px rgba(10, 9, 8, .05);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 84px; }

/* Unterseiten (Impressum etc.): Header immer mit Hintergrund */
body:not(.home) .site-header {
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 1px 0 var(--line);
}

.brand { display: inline-flex; align-items: center; gap: 14px; }
.brand-mark { height: 42px; flex: 0 0 auto; display: flex; align-items: center; }
.brand-mark img { height: 100%; width: auto; display: block; }
.brand-mark .lg-light { display: none; }
/* Auf dunklem Grund (Hero-Header, Footer) die helle Variante zeigen */
body.home .site-header:not(.scrolled):not(.menu-open) .brand-mark .lg-dark { display: none; }
body.home .site-header:not(.scrolled):not(.menu-open) .brand-mark .lg-light { display: block; }
.footer-brand .brand-mark .lg-dark { display: none; }
.footer-brand .brand-mark .lg-light { display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text strong { font-family: var(--display); font-size: 1.34rem; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.brand-text small {
  display: flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-ink); margin-top: 5px;
}
.brand-text small::after { content: ""; height: 1px; flex: 1; background: var(--line-strong); min-width: 12px; }

.main-nav { display: flex; align-items: center; gap: 34px; }
.main-nav a:not(.btn) {
  font-weight: 500; font-size: .92rem; color: var(--ink-2); position: relative; transition: color .2s;
}
.main-nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 1.5px;
  background: var(--gold); transition: width .3s var(--ease);
}
.main-nav a:not(.btn):hover { color: var(--ink); }
.main-nav a:not(.btn):hover::after { width: 100%; }

/* Telefonnummer im Header (viele Verkäufer rufen lieber an) */
.main-nav a.nav-tel { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; }
.main-nav a.nav-tel::after { display: none; }
.main-nav a.nav-tel svg { flex: 0 0 auto; opacity: .75; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 10px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Header über dem Hero: transparent + helle Schrift */
body.home .site-header:not(.scrolled):not(.menu-open) .brand-text strong { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
body.home .site-header:not(.scrolled):not(.menu-open) .brand-text small { color: var(--gold-light); text-shadow: 0 2px 14px rgba(0,0,0,.5); }
body.home .site-header:not(.scrolled):not(.menu-open) .brand-text small::after { background: rgba(255,255,255,.35); }
body.home .site-header:not(.scrolled):not(.menu-open) .main-nav a:not(.btn) { color: #F2EDE6; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
body.home .site-header:not(.scrolled):not(.menu-open) .main-nav a:not(.btn):hover { color: var(--gold-light); }
body.home .site-header:not(.scrolled):not(.menu-open) .brand-mark .m-ink { fill: #FBF9F6; }
body.home .site-header:not(.scrolled):not(.menu-open) .brand-mark .m-arc { stroke: #FBF9F6; }
body.home .site-header:not(.scrolled):not(.menu-open) .nav-toggle span { background: #fff; }

section[id] { scroll-margin-top: 90px; }
/* Formularkarte ist auf schmalen Displays das Sprungziel – Platz für den fixen Header */
.form-card { scroll-margin-top: 84px; }

/* ---------- HERO (Showroom-Inszenierung) ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center;
  padding: 120px 0 48px; overflow: hidden; background: var(--black);
}
/* Slop-Fix (slop_gradients): Vollton statt Atmosphären-Verläufe */
.hero--showroom { background: #0F0D0A; }
/* Echtes Showroom-Video als Bühne; Poster übernimmt den LCP */
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%; z-index: 0;
}
/* Mobil: Ausschnitt seitlich verschieben, damit die Person nicht direkt hinter der Headline steht */
@media (max-width: 640px) {
  .hero-bg { object-position: 30% 38%; }
  .hero-scrim {
    /* der EINE erlaubte Verlauf der Seite: funktionaler Kontrast-Scrim über dem Video */
    background: linear-gradient(180deg, rgba(10, 9, 8, .84) 0%, rgba(12, 10, 9, .6) 50%, rgba(10, 9, 8, .9) 100%);
  }
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10, 9, 8, .8) 0%, rgba(12, 10, 9, .55) 50%, rgba(10, 9, 8, .88) 100%);
}

.hero-anchor { margin-top: 16px; font-size: .88rem; color: #B8AEA1; }
.hero-anchor a { color: var(--gold-light); font-weight: 600; }
.hero-anchor a:hover { text-decoration: underline; }
.hero-inner { position: relative; z-index: 2; }
.hero h1 {
  color: #fff; font-size: clamp(2.05rem, 5.2vw, 4rem); line-height: 1.08;
  margin-bottom: 22px; text-shadow: 0 4px 40px rgba(0, 0, 0, .5); max-width: 18ch; margin-inline: auto;
}
.hero h1 em { font-style: normal; color: var(--gold); }
.hero-sub {
  font-size: clamp(1.04rem, 1.9vw, 1.22rem); color: #E4DCD2; max-width: 60ch;
  margin: 0 auto 34px; text-shadow: 0 2px 20px rgba(0, 0, 0, .5);
}
.hero-sub strong { color: var(--gold-light); font-weight: 600; }
.hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; }

/* Quick-Start-Formular im Hero */
.hero-form {
  display: flex; gap: 10px; max-width: 640px; margin: 0 auto 18px;
  background: rgba(10, 9, 8, .6); border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px; padding: 8px;
}
.hero-form input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: var(--sans); font-size: 1.02rem; color: #fff; padding: 10px 18px;
}
.hero-form input::placeholder { color: rgba(255, 255, 255, .65); }
.hero-form .btn { flex: 0 0 auto; }
.hero-note {
  margin: -4px 0 30px; font-size: .85rem; color: #C8BEB0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}
.hero-secondary {
  display: inline-block; color: rgba(255, 255, 255, .8); font-size: .95rem;
  margin-bottom: 46px; transition: color .2s;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}
.hero-secondary:hover { color: var(--gold-light); }

/* ---------- Fahrzeug-Picker (Marke → Modell → Ausführung) ---------- */
.picker {
  border: 1.5px solid var(--line-strong); border-radius: 16px; background: #fff;
  overflow: hidden; margin-bottom: 14px;
}
.picker-stage { animation: fadeStep .35s var(--ease); }
.picker-search {
  width: 100%; border: 0; border-bottom: 1px solid var(--line); background: var(--paper);
  font-family: var(--sans); font-size: 1rem; color: var(--ink); padding: 15px 18px; outline: none;
}
.picker-search:focus { background: #fff; }
/* Mehr Luft: die Liste war in einem zu kleinen Fenster gefangen */
.picker-scroll { max-height: min(440px, 52vh); overflow-y: auto; overscroll-behavior: contain; padding: 14px; }
.picker-caption {
  font-size: .82rem; font-weight: 600;
  color: var(--muted); margin: 6px 4px 10px;
}
.picker-caption small { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Marken-Kacheln (beliebt) */
.brand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.brand-tile {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 6px 10px; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--paper); cursor: pointer; transition: all .18s var(--ease); text-align: center;
}
.brand-tile:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: var(--shadow); }
.brand-tile b {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display); font-size: 1.05rem; font-weight: 700; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line-strong); position: relative;
}
.brand-tile b::after {
  /* Monogramm-Kreise entfernt (avatar-Slop-Fix) – Regel bleibt für evtl. Rückbau */
  content: none;
}
.brand-tile i { font-style: normal; font-size: .74rem; font-weight: 600; color: var(--ink-2); }

/* Listenzeilen (alle Marken / Modelle) */
.picker-list { display: flex; flex-direction: column; }
.picker-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 10px;
  border-radius: 10px; cursor: pointer; font-size: .98rem; color: var(--text);
  transition: background .15s;
  /* Zeilen sind echte Buttons (Tastatur & Screenreader) – Button-Optik zurücksetzen */
  width: 100%; text-align: left; background: none; border: 0; font-family: inherit;
}
.picker-row:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.picker-row:hover { background: var(--paper-2); color: var(--ink); }
.picker-row b {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  font-family: var(--display); font-size: .82rem; font-weight: 700; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong);
}
.picker-row .arrow { margin-left: auto; color: var(--muted); font-size: .85rem; }
.picker-hint { font-size: .8rem; color: var(--muted); padding: 10px 6px 2px; text-align: center; }

/* Kopfzeile mit Zurück + gewählter Wert */
.picker-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--ink); color: #fff;
}
.picker-back {
  border: 0; background: rgba(255, 255, 255, .12); color: #fff; width: 30px; height: 30px;
  border-radius: 50%; cursor: pointer; font-size: 1rem; display: grid; place-items: center;
  transition: background .15s;
}
.picker-back:hover { background: rgba(255, 255, 255, .25); }
.picker-chosen { font-family: var(--display); font-weight: 700; font-size: 1.02rem; }

/* Ausführungs-Chips */
.variant-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.variant-chip {
  border: 1.5px solid var(--line-strong); background: var(--paper); border-radius: 999px;
  padding: 9px 16px; font-family: var(--sans); font-size: .9rem; font-weight: 500; color: var(--text);
  cursor: pointer; transition: all .18s var(--ease);
}
.variant-chip:hover { border-color: var(--red); color: var(--ink); transform: translateY(-1px); }
.variant-free { display: flex; gap: 8px; flex-wrap: wrap; }
.variant-free input {
  flex: 1 1 170px; min-width: 0; border: 1.5px solid var(--line-strong); border-radius: 10px;
  font-family: var(--sans); font-size: .95rem; padding: 10px 14px; background: var(--paper);
}
.variant-free input:focus { outline: none; border-color: var(--red); background: #fff; }
.picker-error { color: var(--red); font-size: .88rem; font-weight: 500; margin-top: 4px; }

/* Fahrzeug-Pass (Live-Zusammenfassung) */
/* Übernommenes Fahrzeug – sichtbare Bestätigung, dass die Hero-Eingabe zählt */
.f-pass {
  display: flex; align-items: center; gap: 9px; margin-top: 12px; flex-wrap: wrap;
  background: rgba(195, 161, 90, .12); border: 1px solid rgba(195, 161, 90, .4);
  border-radius: 10px; padding: 10px 14px;
  font-size: .9rem; font-weight: 600; color: var(--ink);
  animation: fadeStep .4s var(--ease);
}
.f-pass svg { color: var(--gold-ink); flex: 0 0 auto; }
.f-pass b { color: var(--ink); }
.f-pass-label { font-weight: 500; color: var(--muted); flex: 0 0 auto; }

/* Kein Treffer im Picker – sichtbarer Ausweg statt leerer Liste */
.picker-empty { padding: 18px 6px; text-align: center; }
.picker-empty p { font-size: .92rem; color: var(--muted); margin-bottom: 12px; }

/* Ausstattungs-Chips (Mehrfachauswahl) */
.field-label { display: block; font-weight: 600; font-size: .78rem; letter-spacing: .04em; color: var(--ink-2); margin-bottom: 10px; }
.field-label small, .field label small { font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }
.mchip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.mchip { cursor: pointer; }
.mchip input { position: absolute; opacity: 0; pointer-events: none; }
.mchip span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border: 1.5px solid var(--line-strong); border-radius: 999px;
  background: var(--paper); font-size: .88rem; font-weight: 500; color: var(--text);
  transition: all .18s var(--ease);
}
.mchip:hover span { border-color: var(--red); }
.mchip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.mchip input:checked + span::before { content: "✓"; font-size: .78rem; color: var(--gold); }
.mchip input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }

/* FIN-Erklärung + Vertrauens-Hinweis */
.why-fin { margin-top: 8px; }
.why-fin summary {
  cursor: pointer; list-style: none; font-size: .8rem; color: var(--red); font-weight: 500;
}
.why-fin summary::before { content: "ⓘ "; }
.why-fin summary::-webkit-details-marker { display: none; }
.why-fin p { font-size: .82rem; color: var(--muted); margin-top: 8px; padding: 12px 14px; background: var(--paper-2); border-radius: 10px; }
.trust-note {
  display: flex; align-items: flex-start; justify-content: flex-start; gap: 8px;
  font-size: .78rem; line-height: 1.45; color: var(--muted); margin: 10px 0 18px; text-align: left;
}
.trust-note svg { color: #1B7A4B; flex: 0 0 auto; }

/* Upsell auf dem Erfolgs-Screen */
.fs-upsell { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.fs-upsell > p { font-size: .95rem; margin-bottom: 18px; }
.fs-upsell .btn { display: flex; width: 100%; justify-content: center; white-space: normal; text-align: center; padding-inline: 20px; }
.fs-upsell .btn + .btn { margin-top: 10px; }
.fs-skip { display: block; margin-top: 14px; font-size: .88rem; color: var(--muted); text-decoration: underline; }
.fs-skip:hover { color: var(--red); }
#detail-form h3 { font-size: var(--fs-h3); margin-bottom: 4px; }

/* Erfolgs-Screen */
.funnel-success { text-align: center; padding: 26px 8px; }
.fs-check { width: 84px; height: 84px; margin: 0 auto 22px; }
.fs-check svg { width: 100%; height: 100%; }
.fs-check circle {
  stroke: #1B7A4B; stroke-width: 2.4; stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: fsDraw .7s var(--ease) forwards;
}
.fs-check path {
  stroke: #1B7A4B; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 36; stroke-dashoffset: 36; animation: fsDraw .5s .55s var(--ease) forwards;
}
@keyframes fsDraw { to { stroke-dashoffset: 0; } }
.funnel-success h3 { font-size: 1.7rem; margin-bottom: 10px; }
.funnel-success p { color: var(--muted); max-width: 40ch; margin: 0 auto 24px; }

/* Sticky-CTA (mobil) */
.mobile-cta {
  position: fixed; left: 14px; right: 82px; bottom: 14px; z-index: 89;
  display: none; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 20px; border-radius: 999px;
  background: var(--red);
  color: #fff; font-weight: 600; font-size: 1rem;
  box-shadow: 0 6px 18px rgba(10, 9, 8, .08);
  animation: ctaIn .4s var(--ease);
}
@keyframes ctaIn { from { transform: translateY(80px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Vertrauens-Leiste im Hero */
.hero-trust {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 14px;
  position: relative; z-index: 2;
}
.hero-trust li {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(10, 9, 8, .55); border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px; padding: 10px 20px;
  color: #F2EDE6; font-size: .9rem; font-weight: 500;
}
.hero-trust svg { color: var(--gold); flex: 0 0 auto; }

.hero-scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3;
  color: rgba(255, 255, 255, .75); animation: bob 2.6s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(9px); } }

/* ---------- Portale-Leiste ---------- */
.portals { background: var(--ink); padding: 30px 0; }
.portals-inner { display: flex; align-items: center; justify-content: center; gap: 20px 48px; flex-wrap: wrap; }
.portals span { font-family: var(--display); font-weight: 500; font-size: .92rem; letter-spacing: .04em; color: #9C9186; }
.portals .p-label { font-family: var(--sans); font-size: .86rem; color: var(--gold); font-weight: 600; }

/* ---------- Vorteils-Karten ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 40px 34px; box-shadow: var(--shadow);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
.card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); border-color: rgba(201, 162, 74, .5); }
.card-ico {
  width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(195, 161, 90, .1);
  border: 1px solid rgba(195,161,90,.28);
  color: var(--gold-ink); margin-bottom: 24px;
}
.card h3 { font-size: var(--fs-h3); margin-bottom: 12px; }
.card p { color: var(--muted); font-size: 1rem; }

/* ---------- Ablauf: 3 Schritte ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; }
.steps::before {
  content: ""; position: absolute; top: 46px; left: 12%; right: 12%; height: 1px;
  background: var(--line-strong);
}
.step { text-align: center; position: relative; }
.step-n {
  width: 92px; height: 92px; margin: 0 auto 26px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--display); font-size: 2.3rem; font-weight: 700;
  color: var(--gold); background: var(--paper);
  border: 1px solid var(--line-strong); box-shadow: 0 0 0 8px var(--paper);
  position: relative; z-index: 2;
}
.section--paper2 .step-n, .section--paper2 .step-n { background: var(--paper-2); box-shadow: 0 0 0 8px var(--paper-2); }
.step h3 { font-size: var(--fs-h3); margin-bottom: 12px; }
.step p { color: var(--muted); max-width: 32ch; margin: 0 auto; }

/* ---------- Vergleich Privat vs. FAVE ---------- */
.compare {
  max-width: 940px; margin: 0 auto; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg);
}
.compare-row { display: grid; grid-template-columns: 1.15fr 1fr 1fr; align-items: center; border-bottom: 1px solid var(--line); }
.compare-row:last-child { border-bottom: 0; }
.compare-row > * { padding: 20px 24px; }
.compare-head { background: var(--ink); }
.compare-head > * { color: #A99E92; font-weight: 600; font-size: .92rem; }
.compare-head .c-fave { color: #fff; background: rgba(196, 30, 42, .16); position: relative; }
.compare-head .c-fave::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 1" preserveAspectRatio="none"><rect width="1" height="1" fill="%23FFFFFF"/><rect x="1" width="1" height="1" fill="%23B31522"/><rect x="2" width="1" height="1" fill="%23C3A15A"/></svg>') center / 100% 100% no-repeat; }
.c-crit { font-weight: 600; color: var(--ink); }
.c-priv, .c-fave { display: flex; align-items: center; gap: 10px; font-size: .97rem; }
.c-priv { color: var(--muted); }
.c-priv svg { color: #B9AFA4; flex: 0 0 auto; }
.c-fave { color: var(--ink); font-weight: 500; background: rgba(201, 162, 74, .06); }
.c-fave svg { color: #1B7A4B; flex: 0 0 auto; }

/* ---------- Foto-Zwischenband ---------- */
.media-band {
  position: relative; overflow: hidden; padding: 160px 0; text-align: center;
  background-image: url('../img/band-handschlag.jpg');
  background-size: cover; background-position: center 42%;
}
.band-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%; z-index: 0;
}
.media-band::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(10, 9, 8, .58);
}
.media-band .container { position: relative; z-index: 2; }
.media-band h2 {
  color: #fff; font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 720px; margin: 0 auto 30px;
  text-shadow: 0 3px 30px rgba(0, 0, 0, .55);
}
.media-band h2 em { font-style: normal; color: var(--gold); }

/* ---------- Zahlen / Vertrauen ---------- */
.section--dark { overflow: hidden; }
.trust-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .16;
}
.trust-scrim { position: absolute; inset: 0; background: rgba(20, 17, 15, .85); }
.section--dark .container { position: relative; z-index: 2; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 26px; }
.stat {
  background: #17130F; border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r); padding: 34px 22px; text-align: center;
  transition: transform .4s var(--ease), border-color .3s;
}
.stat:hover { transform: translateY(-5px); border-color: rgba(201, 162, 74, .45); }
/* Slop-Fix (stats_banner): Zusagen statt Riesenziffern – moderate Größe + Beleg-Zeile */
.stat b {
  display: block; font-family: var(--display); font-size: 1.5rem;
  color: var(--gold); line-height: 1; margin-bottom: 10px; font-weight: 700;
}
.stat span { font-size: .95rem; color: #A99E92; }
.stats-beleg { text-align: center; font-size: .9rem; color: #A99E92; margin-top: 18px; }
.stats-beleg a { color: var(--gold-light); text-decoration: underline; }

.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.badge {
  display: flex; align-items: center; gap: 14px; padding: 20px 22px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--r); font-size: .95rem; color: #DCD3C9; font-weight: 500;
}
.badge svg { color: var(--gold); flex: 0 0 auto; }

/* Google-Karte */
.google-card {
  margin-top: 48px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding: 28px 32px; border-radius: var(--r);
  background: #17130F; border: 1px solid rgba(255, 255, 255, .1);
}
.google-card p { color: #DCD3C9; }
.google-card strong { color: #fff; font-family: var(--display); font-size: 1.2rem; display: block; margin-bottom: 4px; }

/* ---------- Echte Google-Bewertungen ---------- */
.reviews { margin-top: clamp(40px, 6vw, 60px); }
.reviews-head {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-bottom: 30px; flex-wrap: wrap; text-align: left;
}
.reviews-score { display: flex; align-items: baseline; gap: 10px; }
.reviews-score b { font-family: var(--display); font-size: 2.6rem; font-weight: 700; color: #fff; line-height: 1; }
.reviews .stars { color: var(--gold); letter-spacing: 2px; font-size: 1.05rem; }
.reviews-meta strong { display: block; color: #fff; font-size: 1.02rem; }
.reviews-meta span { font-size: .88rem; color: #A99E92; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.review {
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg); padding: 26px 26px 24px;
}
.review .stars { display: block; margin-bottom: 12px; font-size: 1rem; }
.review p { color: #E4DCD2; font-size: .96rem; line-height: 1.6; margin-bottom: 16px; }
.review strong { color: #fff; font-size: .92rem; font-weight: 600; }
.reviews-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
  color: var(--gold-light); font-weight: 600; font-size: .92rem;
  border-bottom: 1px solid rgba(232, 213, 163, .4); padding-bottom: 2px;
}
.reviews-link:hover { color: #fff; border-color: #fff; }
.reviews-link .arr { transition: transform .3s var(--ease); }
.reviews-link:hover .arr { transform: translateX(4px); }
@media (max-width: 900px) { .review-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
@media (max-width: 640px) { .reviews-head { justify-content: flex-start; } }

/* ---------- Schritt-Zusagen (Prozess-Transparenz) ---------- */
.step-zusage {
  margin-top: 12px; font-size: .88rem !important; font-weight: 600;
  color: #1B7A4B !important; max-width: 30ch; margin-inline: auto;
}

/* ---------- Über uns ---------- */
.ueber-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 52px; align-items: center; }
.ueber-copy h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 20px; }
.ueber-lead { font-size: 1.14rem; color: var(--text); max-width: 58ch; margin-bottom: 22px; }
.ueber-versprechen {
  font-family: var(--display); font-weight: 400; font-size: 1.18rem; line-height: 1.55;
  color: var(--ink); border-left: 2px solid var(--gold); padding: 4px 0 4px 22px;
  max-width: 54ch; margin-bottom: 26px;
}
.ueber-fakten { display: grid; gap: 10px; font-size: .98rem; color: var(--text); }
.ueber-fakten a { color: var(--gold-ink); font-weight: 600; }
.ueber-fakten a:hover { text-decoration: underline; }
/* Die beiden Inhaber – echte Gesichter sind der stärkste Vertrauensbeweis */
.ueber-team { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.person {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow); position: relative;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
.person::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 1" preserveAspectRatio="none"><rect width="1" height="1" fill="%2314110F"/><rect x="1" width="1" height="1" fill="%23B31522"/><rect x="2" width="1" height="1" fill="%23C3A15A"/></svg>') center / 100% 100% no-repeat;
}
.person:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(195,161,90,.5); }
.person img { width: 100%; height: auto; display: block; background: #fff; }
.person figcaption { padding: 16px 14px 20px; text-align: center; border-top: 1px solid var(--line); }
.person figcaption b {
  display: block; font-family: var(--display); font-size: 1.06rem; font-weight: 600;
  color: var(--ink); margin-bottom: 3px;
}
.person figcaption span {
  font-size: .82rem;
  color: var(--gold-ink); font-weight: 600;
}

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  margin-bottom: 12px; overflow: hidden; transition: box-shadow .3s, border-color .3s;
}
.faq-item[open] { box-shadow: var(--shadow); border-color: var(--line-strong); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 24px 28px; display: flex; gap: 18px;
  align-items: center; justify-content: space-between;
  font-family: var(--display); font-size: 1.12rem; font-weight: 600; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-family: var(--sans); font-size: 1.6rem; font-weight: 300; color: var(--gold-ink);
  line-height: 1; transition: transform .35s var(--ease); flex: 0 0 auto;
}
.faq-item[open] summary::after { transform: rotate(135deg); }
.faq-body { padding: 0 28px 26px; color: var(--muted); }

/* ---------- Abschluss-CTA + Formular ---------- */
.final { position: relative; background: var(--ink); overflow: hidden; }
/* Slop-Fix (slop_gradients): Atmosphären-Radialverläufe entfernt */
.final::before { content: none; }
.final .container { position: relative; z-index: 2; }
.final-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 68px; align-items: center; }
/* Schutz: kein Kind darf die Spalte über die Bildschirmbreite hinaus aufziehen */
.final-grid > * { min-width: 0; }
.final h2 { color: #fff; font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 22px; }
.final h2 em { font-style: normal; color: var(--gold); }
.final-lead { color: #B6ABA0; font-size: 1.14rem; margin-bottom: 34px; }
.final-points { display: grid; gap: 14px; margin-bottom: 36px; }
.final-points li { display: flex; align-items: center; gap: 12px; color: #DCD3C9; }
.final-points svg { color: var(--gold); flex: 0 0 auto; }
.final-direct { display: flex; flex-wrap: wrap; gap: 12px; }
.final-direct a {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  color: #fff; font-weight: 500; font-size: .95rem; transition: background .25s, transform .25s var(--ease);
}
.final-direct a:hover { background: rgba(255, 255, 255, .13); transform: translateY(-2px); }
.final-direct svg { color: var(--gold); }

.form-card {
  background: rgba(255, 255, 255, .97); border-radius: var(--r-lg); padding: 40px;
  box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, .5);
}
.form-card h3 { font-size: 1.6rem; margin-bottom: 6px; }
.form-card > p { color: var(--muted); font-size: .95rem; margin-bottom: 26px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; margin-bottom: 16px; }
.field label { font-weight: 600; font-size: .78rem; letter-spacing: .04em; color: var(--ink-2); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 1rem; color: var(--ink); width: 100%;
  padding: 14px 16px; border: 1.5px solid var(--line-strong); border-radius: 12px;
  background: var(--paper); transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--red); background: #fff;
}
.field textarea { resize: vertical; min-height: 92px; }
.field input[type="file"] { padding: 11px 14px; font-size: .88rem; color: var(--muted); }
.field input[type="file"]::file-selector-button {
  font-family: var(--sans); font-weight: 600; font-size: .82rem; margin-right: 12px;
  padding: 8px 14px; border: 0; border-radius: 8px; background: var(--ink); color: #fff; cursor: pointer;
}
.hint { font-size: .78rem; color: var(--muted); margin-top: 6px; }

/* ---------- Mehrstufiger Funnel ---------- */
.funnel-progress { margin-bottom: 26px; }
.fp-track { height: 5px; background: var(--line); border-radius: 5px; overflow: hidden; margin-bottom: 12px; }
.fp-fill { height: 100%; width: 16.7%; border-radius: 5px; background: var(--red); transition: width .5s var(--ease); }
/* darf umbrechen – sonst sprengt eine längere Schritt-Bezeichnung die Karte */
.fp-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.fp-label { font-size: .85rem; color: var(--ink-2); font-weight: 600; min-width: 0; }
.fp-time { font-size: .76rem; color: var(--muted); white-space: nowrap; }

/* Antwort-Chips (Radio-Buttons als große Tap-Flächen) */
.chip-group { display: grid; gap: 10px; margin-bottom: 6px; }
.chip { display: block; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border: 1.5px solid var(--line-strong); border-radius: 14px;
  background: var(--paper); font-weight: 500; font-size: 1rem; color: var(--text);
  transition: border-color .2s, background .2s, box-shadow .2s, transform .15s var(--ease);
}
.chip span::after {
  content: ""; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line-strong); transition: all .2s;
  display: grid; place-items: center; font-size: .78rem; color: #fff; line-height: 1;
}
.chip:hover span { border-color: var(--red); transform: translateY(-1px); }
.chip input:checked + span {
  border-color: var(--red); background: #fff; color: var(--ink);
  box-shadow: 0 0 0 4px rgba(10, 9, 8, .06);
}
.chip input:checked + span::after { content: "✓"; background: var(--red); border-color: var(--red); }
/* Jahres-Raster im Funnel: kompakte Kacheln statt Zeilen */
.chips-jahre { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.chips-jahre .chip span { justify-content: center; padding: 12px 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chips-jahre .chip span::after { display: none; }
.chips-jahre .chip input:checked + span { background: var(--red); color: #fff; border-color: var(--red); }
@media (max-width: 480px) { .chips-jahre { grid-template-columns: repeat(3, 1fr); } }
/* Antrieb-Schritt: zwei kompakte Chip-Reihen mit Zeilenüberschrift */
.antrieb-label { font-size: .88rem; font-weight: 700; color: var(--gold-ink); margin: 16px 0 8px; }
.chips-kompakt { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.chips-kompakt .chip span { justify-content: center; padding: 12px 8px; font-weight: 600; }
.chips-kompakt .chip span::after { display: none; }
.chips-kompakt .chip input:checked + span { background: var(--red); color: #fff; border-color: var(--red); }
/* Exakter Kilometerstand */
.km-wrap { position: relative; }
.km-wrap input { width: 100%; padding-right: 58px; font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.km-einheit { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; pointer-events: none; }
.chip input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }

.fstep { animation: fadeStep .45s var(--ease); }
.fstep[hidden] { display: none; }
.fstep > h3 { font-size: var(--fs-h3); margin-bottom: 4px; }
.fstep-sub { color: var(--muted); font-size: .92rem; margin-bottom: 22px; }
@keyframes fadeStep { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

.fnav { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.fnav-next, .fnav-submit { flex: 1 1 200px; }
.fnav-back { flex: 0 0 auto; }
/* Auf schmalen Displays: Hauptaktion volle Breite, „Zurück“ darunter */
@media (max-width: 520px) {
  .fnav { flex-direction: column-reverse; align-items: stretch; }
  /* flex-basis wirkt in Spaltenrichtung auf die HÖHE – daher zurücksetzen */
  .fnav .btn { flex: 0 0 auto; width: 100%; justify-content: center; }
  .fnav-submit, .fnav-next { font-size: .98rem; padding-inline: 18px; }
}

.photo-hint { background: var(--paper-2); border-radius: 16px; padding: 18px 20px; margin-bottom: 18px; }
.photo-hint-title { display: flex; align-items: center; gap: 9px; font-size: .9rem; font-weight: 600; color: var(--ink); margin-bottom: 13px; }
.photo-hint-title svg { color: var(--red); flex: 0 0 auto; }
.photo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-chips span {
  display: inline-flex; align-items: center; gap: 6px; background: #fff;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; font-size: .8rem; color: var(--text);
}
.photo-chips svg { color: var(--gold); flex: 0 0 auto; }
.check { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 22px; font-size: .87rem; color: var(--muted); cursor: pointer; }
.check input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--red); }
.check a { color: var(--red); text-decoration: underline; }
.form-note { margin-top: 16px; font-size: .95rem; font-weight: 500; text-align: center; }
.form-note.success { color: #1B7A4B; }
.form-note.error { color: var(--red); }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: #8B8178; padding: 0 0 30px; }
.site-footer::before { content: ""; display: block; height: 3px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 1" preserveAspectRatio="none"><rect width="1" height="1" fill="%23FFFFFF"/><rect x="1" width="1" height="1" fill="%23B31522"/><rect x="2" width="1" height="1" fill="%23C3A15A"/></svg>') center / 100% 100% no-repeat; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 50px; padding: 62px 0 42px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.footer-brand .brand-text strong { color: #fff; }
.footer-brand .brand-mark .m-ink { fill: #FBF9F6; }
.footer-brand .brand-mark .m-arc { stroke: #FBF9F6; }
.footer-brand p { margin-top: 18px; font-size: .95rem; max-width: 300px; }
.footer-col h4 { color: #fff; font-family: var(--sans); font-weight: 600; font-size: .92rem; margin-bottom: 16px; }
.footer-col a { display: block; padding: 6px 0; font-size: .95rem; transition: color .2s; }
.footer-col a:hover { color: var(--gold); }
.footer-bottom { padding-top: 24px; font-size: .84rem; color: #6B6259; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* ---------- WhatsApp ---------- */
.whatsapp-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.whatsapp-fab:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 16px 38px rgba(0, 0, 0, .36); }
.whatsapp-fab svg { width: 30px; height: 30px; }
.wa-ping { position: absolute; inset: 0; border-radius: 50%; background: #25D366; opacity: .5; animation: ping 2.8s ease-out infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(1.75); opacity: 0; } }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .cards, .steps, .stats, .badges { grid-template-columns: repeat(2, 1fr); }
  .steps::before { display: none; }
  .final-grid { grid-template-columns: 1fr; gap: 46px; }
  .ueber-grid { grid-template-columns: 1fr; gap: 40px; }
  .ueber-team { max-width: 460px; margin: 0 auto; gap: 14px; }
  .section { padding: 96px 0; }
}

@media (max-width: 980px) {
  .main-nav {
    position: fixed; inset: 84px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(255, 255, 255, .99); padding: 16px 28px 26px;
    box-shadow: 0 20px 44px rgba(10, 9, 8, .14); transform: translateY(-130%);
    transition: transform .4s var(--ease); visibility: hidden;
  }
  .main-nav.open { transform: none; visibility: visible; }
  .main-nav a:not(.btn) { padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink-2) !important; text-shadow: none !important; }
  .main-nav a.btn { margin-top: 16px; justify-content: center; }
  .nav-toggle { display: flex; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }

  /* Kompaktere Skala fürs Handy – ohne die Skala wirkt die Seite „herangezoomt“.
     Fließtext bleibt bei 16px (Lesbarkeit für die Zielgruppe 35+). */
  .hero h1 { font-size: 1.85rem; line-height: 1.14; margin-bottom: 16px; }
  .hero-sub { font-size: 1rem; margin-bottom: 26px; }
  .hero-note { font-size: .78rem; }
  .head h2, .ueber-copy h2, .final h2, .media-band h2 { font-size: 1.55rem; }
  .head p { font-size: 1rem; }
  .card h3, .step h3 { font-size: 1.18rem; }
  .card { padding: 28px 24px; }
  .card-ico { width: 48px; height: 48px; margin-bottom: 18px; }
  .step-n { width: 68px; height: 68px; font-size: 1.7rem; margin-bottom: 18px; }
  .stat { padding: 24px 18px; }
  .stat b { font-size: 1.9rem; }
  .faq-item summary { font-size: 1rem; padding: 18px 20px; }
  .ueber-lead, .ueber-versprechen { font-size: 1rem; }
  .form-card h3, .fstep h3 { font-size: 1.24rem; }
  .btn-lg { padding: 15px 24px; font-size: 1rem; }
  .btn { padding: 14px 22px; }
  .section { padding: 62px 0; }
  .head { margin-bottom: 38px; }

  .brand-mark { height: 34px; }
  .brand { gap: 10px; }
  .media-band { background-attachment: scroll; padding: 84px 0; }
  .container { padding: 0 20px; }
  .cards, .steps, .stats, .badges { grid-template-columns: 1fr; }
  .hero { padding: 110px 0 50px; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .hero-trust { gap: 10px; }
  .hero-trust li { font-size: .82rem; padding: 9px 15px; }
  .f-row { grid-template-columns: 1fr; }
  .form-card { padding: 26px; }
  .footer-inner { grid-template-columns: 1fr; gap: 34px; }
  .compare-row { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .compare-row > * { padding: 13px 20px; }
  .compare-head { display: none; }
  .c-crit { background: var(--paper-2); font-size: .88rem; padding-top: 16px; padding-bottom: 10px; }
  .c-priv::before { content: "Privatverkauf: "; font-weight: 600; color: var(--ink); }
  .c-fave::before { content: "Mit FAVE: "; font-weight: 600; }
  .whatsapp-fab { width: 52px; height: 52px; right: 16px; bottom: 16px; }
  .whatsapp-fab svg { width: 27px; height: 27px; }
  /* Hero-Formular stapeln */
  .hero-form { flex-direction: column; border-radius: 22px; padding: 10px; }
  .hero-form input { text-align: center; padding: 12px; }
  .hero-form .btn { width: 100%; }
  /* Sticky-CTA einblenden */
  .mobile-cta:not([hidden]) { display: flex; }
}

@media (max-width: 420px) {
  /* Platz sparen: breites Logo + Wortmarke passen sonst nicht nebeneinander */
  .brand-text small { display: none; }
  .brand-mark { height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
}

/* ---------- WhatsApp als gleichwertiger Weg ---------- */
.hero-alt {
  margin: -18px 0 30px; font-size: .88rem; color: #C8BEB0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}
.hero-alt a {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 4px;
  color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, .45);
  padding-bottom: 1px; transition: color .2s, border-color .2s;
}
.hero-alt a svg { color: #25D366; }
.hero-alt a:hover { color: var(--gold-light); border-color: var(--gold-light); }

.form-alt {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: .86rem; color: var(--muted); text-align: center;
}
.form-alt a {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ink); font-weight: 600; text-decoration: underline;
  text-decoration-color: var(--line-strong); text-underline-offset: 3px;
}
.form-alt a svg { color: #25D366; }
.form-alt a:hover { text-decoration-color: var(--gold); }

/* ---------- Ansprechpartner am Entscheidungspunkt ---------- */
.ansprechpartner {
  display: flex; align-items: center; gap: 14px; margin: 0 0 18px;
  padding: 12px 14px; border-radius: var(--r);
  background: rgba(195, 161, 90, .08); border: 1px solid rgba(195, 161, 90, .28);
}
.ansprechpartner img {
  width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 2px 8px rgba(10, 9, 8, .12);
}
.ansprechpartner strong { display: block; font-size: .92rem; color: var(--ink); margin-bottom: 2px; }
.ansprechpartner span { display: block; font-size: .8rem; color: var(--muted); line-height: 1.4; }
.ansprechpartner a { color: var(--gold-ink); font-weight: 600; }

/* ---------- Früher Einstieg nach dem Ablauf ---------- */
.zwischen-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px 32px;
  flex-wrap: wrap; margin-top: clamp(44px, 6vw, 64px);
  background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: var(--r); padding: 26px 30px; box-shadow: var(--shadow);
}
.zwischen-cta strong {
  display: block; font-family: var(--display); font-size: 1.18rem; font-weight: 600;
  color: var(--ink); margin-bottom: 4px;
}
.zwischen-cta span { font-size: .95rem; color: var(--muted); }
.zwischen-cta .btn { flex: 0 0 auto; }
@media (max-width: 620px) {
  .zwischen-cta { padding: 22px; text-align: center; justify-content: center; }
  .zwischen-cta .btn { width: 100%; }
}

/* ---------- Overlay für das Anfrage-Formular ---------- */
.modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; }
.modal-scrim {
  /* Kein backdrop-filter: Der Scrim liegt über der ganzen Seite – hinter ihm
     läuft das Hero-Video. Ein Weichzeichner müsste deshalb bei jedem Frame
     neu berechnet werden und ließ das Formular spürbar haken. Ein etwas
     deckenderer Ton sieht praktisch gleich aus und kostet nichts. */
  position: absolute; inset: 0; background: rgba(10, 9, 8, .88);
  opacity: 0; transition: opacity .3s var(--ease);
}
.modal.in .modal-scrim { opacity: 1; }
.modal-box {
  position: relative; width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 40px);
  overflow-y: auto; overscroll-behavior: contain; border-radius: var(--r-lg);
  background: var(--paper); box-shadow: var(--shadow-lg);
  transform: translateY(24px) scale(.98); opacity: 0;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.modal.in .modal-box { transform: none; opacity: 1; }
/* Das Formular sitzt im Overlay direkt auf dem Untergrund – ohne zweite Karte */
.modal-slot .form-card { box-shadow: none; border: 0; border-radius: 0; background: transparent; }
.modal-close {
  position: sticky; top: 10px; float: right; margin: 10px 10px 0 0; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .9); color: var(--ink-2); cursor: pointer;
  display: grid; place-items: center; transition: background .2s, color .2s, transform .2s;
}
.modal-close:hover { background: var(--ink); color: #fff; transform: rotate(90deg); }
body.modal-offen { overflow: hidden; }
@media (max-width: 620px) {
  /* Auf dem Handy als Vollbild – mehr Platz, kein Gefummel neben der Tastatur */
  .modal-box { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-box, .modal-scrim { transition: none; }
}

/* ---------- Einwilligungs-Hinweis (nur aktiv, wenn ein Pixel gesetzt ist) ---------- */
.consent {
  position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 300;
  background: var(--ink); color: #DDD5CB; border: 1px solid rgba(195,161,90,.3);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding: 18px 20px; max-width: 760px; margin-inline: auto;
  opacity: 0; transform: translateY(16px); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.consent.in { opacity: 1; transform: none; }
.consent-inner { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.consent-text { flex: 1 1 320px; }
.consent-text strong { display: block; color: #fff; font-family: var(--display); font-size: 1rem; margin-bottom: 5px; }
.consent-text p { font-size: .86rem; line-height: 1.5; }
.consent-text a { color: var(--gold-light); text-decoration: underline; }
.consent-btns { display: flex; gap: 10px; flex: 0 0 auto; }
.consent .btn-ghost { color: #DDD5CB; border-color: rgba(255,255,255,.3); }
.consent .btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }
@media (max-width: 620px) {
  .consent { padding: 16px; }
  .consent-btns { width: 100%; }
  .consent-btns .btn { flex: 1; justify-content: center; }
}

/* ---------- Rechtsseiten ---------- */
.legal { padding: 140px 0 100px; }
.legal .container { max-width: 820px; }
.legal h1 { font-size: clamp(2.1rem, 4.4vw, 3rem); margin-bottom: 10px; }
.legal .updated { color: var(--muted); font-size: .9rem; margin-bottom: 40px; }
.legal h2 { font-size: 1.4rem; margin: 40px 0 14px; }
.legal p, .legal li { margin-bottom: 13px; }
.legal ul { list-style: disc; padding-left: 24px; }
.legal a { color: var(--red); text-decoration: underline; }
.legal .back { display: inline-block; margin-bottom: 28px; font-weight: 600; font-size: .9rem; color: var(--red); }
.legal .disclaimer { background: var(--white); border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; padding: 18px 22px; font-size: .93rem; margin-bottom: 34px; }

/* ===== Barrierefreiheit: Sprunglink + Fokus (25.07.2026) ===== */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--red); color: #fff; font-family: var(--sans); font-weight: 600;
  font-size: .95rem; padding: 12px 20px; border-radius: 8px; text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; outline: 3px solid #fff; outline-offset: 2px; }
main:focus { outline: none; }
/* Suchfelder: Fokus muss sichtbar sein, Hintergrundwechsel allein reicht nicht (WCAG 2.4.11) */
.picker-search:focus-visible,
.variant-free input:focus-visible {
  outline: 2px solid var(--red); outline-offset: -2px; background: #fff;
}
.hero-form input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 999px; }


/* ============================================================
   Typografisches Feintuning & Detailarbeit (25.07.2026)
   Die Kleinigkeiten, die den Unterschied zwischen "schnell
   generiert" und "von Hand gesetzt" ausmachen.
   ============================================================ */

/* Anker-Sprünge dürfen nicht hinter dem fixen Header landen */
html { scroll-padding-top: 92px; }
@media (max-width: 720px) { html { scroll-padding-top: 74px; } }

/* Überschriften brechen ausgewogen statt mit einem Wort in der letzten Zeile */
h1, h2, h3, .head h2, .hero h1 { text-wrap: balance; }
/* Fließtext vermeidet Schusterjungen */
p, li, .hero-sub, .head p { text-wrap: pretty; }

/* Zahlen laufen in Spalten und Statistiken sauber untereinander */
.stat b, .step-n, .fp-meta, .rev-score, .vergleich td, table td, time,
.preis, .zahl { font-variant-numeric: tabular-nums; }

/* Deutsche Langwörter (Fahrzeugvermittlung, Gewährleistung) sauber trennen –
   nur dort, wo es eng wird, nicht im Fließtext auf großen Schirmen */
@media (max-width: 620px) {
  h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; }
}

/* Echte Kapitälchen-Anmutung für Labels statt reiner Großschreibung */
.eyebrow, .label, .picker-caption, .brand-text small {
  font-feature-settings: "case" 1;
}

/* Markenkonforme Textauswahl statt Browser-Blau */
::selection { background: var(--gold); color: var(--ink); }

/* Bilder nie über den Rand, nie verzerrt */
img, video { max-width: 100%; height: auto; }

/* Fokus für Tastatur immer sichtbar – auch auf dunklem Grund */
.site-footer a:focus-visible,
.vertrauen a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ===== Druckansicht: AGB, Impressum und Datenschutz werden ausgedruckt
   und zum Anwalt mitgenommen. Dann stört die Navigation nur. ===== */
@media print {
  @page { margin: 18mm 16mm; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-header, .site-footer, .whatsapp-fab, .skip-link,
  .sticky-cta, .modal, .consent, .back, .disclaimer { display: none !important; }
  .legal { padding: 0; }
  .container { max-width: none; padding: 0; }
  h1 { font-size: 20pt; }
  h2 { font-size: 13pt; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}


/* ============================================================
   Rhythmus & Typo-Skala (25.07.2026)
   Vorher hatten 9 von 11 Sektionen exakt denselben Abstand und
   die Schriftgrößen wuchsen frei. Beides liest sich mechanisch.
   ============================================================ */

:root {
  /* Eine Skala statt 17 gewachsener Einzelwerte.
     Verhältnis ~1,25 (große Terz) – ruhig, ohne Sprünge. */
  --fs-h3:    1.52rem;   /* 24px – schließt die Lücke zwischen H2 und Fließtext */
  --fs-lead:  1.15rem;   /* 18px – Einleitungen */
  --fs-body:  1rem;      /* 16px */
  --fs-small: .875rem;   /* 14px – Hinweise */
  --fs-label: .78rem;    /* 12,5px – Labels, Meta */

  /* Abstands-Rhythmus: nicht jede Sektion ist gleich wichtig */
  --raum-weit:    clamp(88px, 11.5vw, 138px);
  --raum-normal:  clamp(76px, 10vw, 116px);
  --raum-eng:     clamp(64px, 8.5vw, 98px);
}

/* Sektionen atmen unterschiedlich – Auftakt und Abschluss bekommen Luft,
   unterstützende Abschnitte treten zurück. Das erzeugt Rhythmus beim Scrollen. */
#vorteile  { padding-block: var(--raum-weit); }    /* erster Inhalt nach dem Hero */
#ablauf    { padding-block: var(--raum-eng); }     /* kompakte Schrittfolge */
#vergleich { padding-block: var(--raum-weit); }    /* Kernargument, braucht Bühne */
#mehrwert  { padding-block: var(--raum-eng); }
#vertrauen { padding-block: var(--raum-weit); }    /* wichtigste Vertrauenssektion */
#ueber-uns { padding-block: var(--raum-normal); }
#faq       { padding-block: var(--raum-eng); }     /* Nachschlagewerk, kein Blickfang */
#anfrage   { padding-block: var(--raum-weit); }    /* Conversion-Ziel */

/* Untertitel unter Abschnittsüberschriften auf eine Größe */
.head p { font-size: var(--fs-lead); }

/* Auf kleinen Schirmen zählt Dichte mehr als Rhythmus */
@media (max-width: 720px) {
  #vorteile, #vergleich, #vertrauen, #anfrage { padding-block: clamp(58px, 9vw, 74px); }
  #ablauf, #mehrwert, #faq, #ueber-uns        { padding-block: clamp(50px, 8vw, 64px); }
}

/* Mindestgröße für small: <small> in ohnehin kleinem Text wurde bis auf 9,3 px
   heruntergerechnet – das sind genau die Hilfetexte im Funnel, die gelesen
   werden müssen. Zielgruppe 40+. */
small { font-size: max(.82em, 11.5px); }
.picker-caption small, .field-label small, .fstep-sub small, .hint small {
  font-size: 11.5px; font-weight: 500; letter-spacing: normal; text-transform: none;
}


/* ============================================================
   Logo-Größe Header (25.07.2026)
   42 px waren für ein Header-Emblem zu präsent – üblich sind 32–38 px.
   Der Footer darf größer bleiben: dort ist die Marke der Abbinder,
   nicht ein Element neben der Navigation.
   ============================================================ */
.site-header .brand-mark { height: 32px; }
.site-header .brand { gap: 11px; }

/* Wortmarke proportional mitziehen, sonst kippt das Verhältnis */
.site-header .brand-text strong { font-size: 1.06rem; letter-spacing: -.005em; }
.site-header .brand-text small  { font-size: .68rem; letter-spacing: .17em; }

/* Footer bleibt präsenter */
.footer-brand .brand-mark { height: 46px; }

@media (max-width: 720px) {
  .site-header .brand-mark { height: 28px; }
  .site-header .brand { gap: 10px; }
  .site-header .brand-text strong { font-size: .97rem; }
  .site-header .brand-text small  { font-size: .6rem; }
  .footer-brand .brand-mark { height: 38px; }
}
/* Keine eigene Stufe unter 420 px mehr: 28 px bleibt bis zum kleinsten Gerät.
   Das Adler-Emblem ist detailliert und wird darunter blobartig. */

/* Gold auf dunklem Grund: --gold-ink ist für helle Flächen gedacht und
   verschwindet auf #14110F fast (3,5:1). Dort die helle Variante nutzen. */
.section--dark .label,
.final .label,
.section--dark .eyebrow,
.hero .label { color: var(--gold-light); }


/* ============================================================
   Rendering-Entlastung (26.07.2026)
   Ursache der Ruckler im Formular: Jedes Element mit einem
   filter/backdrop-filter bekommt eine eigene GPU-Ebene – auch
   wenn der Filterwert 0 ist. Bei 48 reveal-Elementen plus 14
   backdrop-filter summiert sich das.
   ============================================================ */

/* Nach dem Einblenden keine Filter-Ebene mehr vorhalten */
.reveal.in { filter: none; will-change: auto; }

/* Während der Animation darf der Browser optimieren, danach nicht mehr */
.reveal:not(.in) { will-change: opacity, transform; }

/* backdrop-filter ist auf schwächeren Geräten der teuerste Effekt überhaupt.
   Unter 900 px durch eine deckendere Fläche ersetzen – sieht fast gleich aus,
   kostet aber einen Bruchteil. */
@media (max-width: 900px) {
  .hero-form, .stat, .review, .glass, .modal-box {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .hero-form { background: rgba(28, 24, 20, .82); }
  .stat, .review { background: rgba(255, 255, 255, .06); }
}

/* Geräte mit wenig Leistung oder reduzierter Bewegung: gar keine Weichzeichner */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { filter: none !important; }
  [style*="backdrop"], .hero-form, .glass { backdrop-filter: none !important; }
}

/* Google-Bewertung im Hero (26.07.2026)
   Der stärkste Vertrauensbeweis lag bei 57 % der Seitenhöhe – acht
   Bildschirme scrollen. Bei einem Gut im Wert von 30.000 € muss der
   Beleg vor die erste Entscheidung. */
.hero-stars {
  display: inline-flex; align-items: center; gap: 7px;
  color: #E4DCCF; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(228,220,207,.28); padding-bottom: 1px;
  transition: border-color .2s ease, color .2s ease;
}
.hero-stars:hover, .hero-stars:focus-visible { color: #fff; border-bottom-color: var(--gold); }
.hero-stars .stars { color: var(--gold); letter-spacing: .06em; font-size: .95em; }
.hero-stars strong { color: #fff; font-weight: 700; }
.anchor-trenner { margin: 0 4px; opacity: .5; }
@media (max-width: 560px) {
  .hero-anchor { line-height: 1.9; }
  .anchor-trenner { display: none; }
  .hero-stars { display: flex; justify-content: center; margin-bottom: 2px; }
}


/* ============================================================
   Overlay offen: Hintergrund entlasten (26.07.2026)
   Sichtbare Ursache der Ruckler im Formular. Solange das Overlay
   offen ist, sieht niemand den Hintergrund – also dort auch keine
   Weichzeichner und keine Animationen mehr berechnen.
   ============================================================ */
body.modal-offen .hero-bg,
body.modal-offen .band-bg,
body.modal-offen .trust-bg { visibility: hidden; }

body.modal-offen .hero-form,
body.modal-offen .stat,
body.modal-offen .review,
body.modal-offen .site-header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Das Overlay selbst bekommt eine eigene Ebene, damit Klicks darin
   nicht die ganze Seite neu zeichnen lassen. */
.modal-box { contain: layout paint; }

/* ============================================================
   Markenliste: nur rendern, was sichtbar ist (26.07.2026)
   Der Funnel enthält 74 Markenkacheln und damit über die Hälfte
   aller Elemente der Seite. Beim Öffnen des Overlays wandert das
   Formular per JS in den Dialog – der Browser berechnet dabei alles
   neu. content-visibility überspringt, was gerade außerhalb des
   Sichtbereichs der Liste liegt; contain-intrinsic-size hält dabei
   die Scrollhöhe stabil, damit nichts springt.
   ============================================================ */
.picker-scroll .picker-row,
.picker-scroll .brand-tile {
  content-visibility: auto;
  contain-intrinsic-size: auto 52px;
}
/* Die Liste selbst als eigene Ebene – Änderungen darin lassen
   den Rest des Formulars unberührt. */
.picker-scroll { contain: layout paint; }