/* ============================================================
   DESIGN-TOKENS
   Ein verbindliches System für die gesamte Seite. Jede Karte,
   jeder Button, jedes Formularfeld und jeder Abstand bezieht
   sich auf genau diese Werte — nirgendwo werden Radien, Schatten,
   Rahmen oder Abstände frei Hand gewählt.

   THEME: Alle Farben laufen über CSS-Variablen. Der Dunkelmodus
   (bisheriges Design) ist die Grundeinstellung auf :root. Der
   Hellmodus überschreibt dieselben Variablen unter
   :root[data-theme="light"] — dieselbe Gestaltungssprache
   (Schriften, Radien, Abstände, Gold-Akzent), nur mit hellem
   statt dunklem Hintergrund und angepassten Kontrasten. Welches
   Attribut aktiv ist, wird von der Umschalt-Logik in script.js
   gesetzt und im Local Storage gemerkt (siehe initThemeToggle).
   ============================================================ */
:root {
  /* Farben (Dunkelmodus, Grundeinstellung: Schwarz-Gold) */
  --accent: #C9A85C;
  --accent-hover: #e4c785;
  /* --accent-text: eigene Variable für Gold-Text auf dem Seitenhintergrund
     (Eyebrow-Labels, Statistik-Zahlen, Links im Fließtext, Autoren-Kürzel
     bei Bewertungen usw.) — getrennt von --accent, das weiterhin für
     Button-Hintergründe, Ränder und Icons steht. Im Dunkelmodus identisch
     zu --accent (dort bereits >8:1 Kontrast), im Hellmodus abgedunkelt
     (siehe dort) auf ein WCAG-AA-taugliches Kontrastverhältnis. */
  --accent-text: var(--accent);
  --bg: #0c0b0a;
  --ink: #141210;
  --text: #f5f2ec;
  --text-secondary: rgba(245,242,236,.72);
  --text-tertiary: rgba(245,242,236,.55);
  --text-muted: rgba(245,242,236,.4);

  /* Abstands-Skala, Basiswert 8px — gilt für alle Layout-Abstände */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-7: 64px;
  --sp-8: 80px;
  --sp-9: 96px;
  --sp-10: 128px;
  --gutter: clamp(24px, 5vw, 32px);

  /* Eckenradien: drei Werte für die gesamte Seite. --radius ist der
     Standard für Karten, Buttons, Formularfelder & Co. --radius-sm ist
     bewusst kleiner und nur für sehr kleine Elemente gedacht (Badges,
     kleine Icon-Boxen), bei denen der große Radius sonst unproportioniert
     rund wirken würde. --radius-full bleibt für bewusst kreisrunde
     Elemente reserviert. */
  --radius: 15px;
  --radius-sm: 8px;
  --radius-full: 999px;

  /* Rahmen-Skala: drei Intensitätsstufen + eine Eingabefeld-Variante,
     statt beliebiger Alpha-Werte pro Element */
  --border-subtle: rgba(201,168,92,.12);
  --border-default: rgba(201,168,92,.2);
  --border-strong: rgba(201,168,92,.42);
  --border-input: rgba(201,168,92,.3);

  /* Schatten-Skala */
  --shadow-sm: 0 4px 16px rgba(0,0,0,.28);
  --shadow-md: 0 14px 34px rgba(0,0,0,.4);
  --shadow-lg: 0 26px 56px rgba(0,0,0,.5);
  --shadow-gold-sm: 0 4px 18px rgba(201,168,92,.24);
  --shadow-gold-md: 0 10px 28px rgba(201,168,92,.38);

  /* Bewegung: ein Easing, zwei Tempi, zwei Hub-Distanzen */
  --ease: cubic-bezier(.22,.8,.28,1);
  --t-fast: .2s var(--ease);
  --t-med: .35s var(--ease);
  --lift-card: translateY(-6px);
  --lift-btn: translateY(-2px);

  /* Eine Kartenoberfläche für die gesamte Seite */
  --surface-card: linear-gradient(165deg,#171512,#121110);
  --surface-panel: #100f0d;

  /* Theme-spezifische Oberflächen, die im Hellmodus ebenfalls
     umdefiniert werden (Header, mobiles Menü, Hintergrundwelle,
     dekorative Platzhalter-Verläufe, Google-Maps-Filter) */
  --header-bg: rgba(10,9,8,0.9);
  --mobile-nav-bg: #100e0c;
  --wave-alt: #100e0c;
  --surface-decor-1: #221d16;
  --surface-decor-2: #171310;
  --map-filter: grayscale(0.3) invert(0.92) contrast(0.9);

  /* Das Logo ist als helles Champagner-Gold auf Transparenz gezeichnet —
     auf dunklem Grund braucht es keine Anpassung. */
  --logo-filter: none;

  color-scheme: dark;
}

/* ============================================================
   HELLMODUS
   Dieselben Variablen, andere Werte: heller Hintergrund, dunkler
   und gut lesbarer Text, Gold-Akzent bleibt identisch. Rahmen und
   Schatten sind für einen hellen Hintergrund neu kalibriert
   (etwas kräftigere Rahmen-Alphawerte, weichere/dunklere Schatten
   statt tiefschwarzer Schlagschatten), damit Karten weiterhin
   hochwertig wirken statt flach.
   ============================================================ */
:root[data-theme="light"] {
  --accent: #C9A85C;
  --accent-hover: #b48f45;
  /* Gleicher Farbton wie --accent, nur abgedunkelt (HSL-Lightness 0.57 -> 0.30,
     Sättigung/Farbton unverändert) — reines #C9A85C als Textfarbe läge auf dem
     hellen Hintergrund nur bei ~2,1:1 Kontrast (WCAG AA verlangt 4,5:1 für
     normalen Text). Diese Variante erreicht ~6:1 auf --bg und ~5,4:1 auf
     --surface-panel und bleibt dabei erkennbar golden statt bräunlich-trüb. */
  --accent-text: #735c26;
  --bg: #faf7f1;
  --ink: #141210;
  --text: #221f1b;
  --text-secondary: rgba(34,31,27,.74);
  --text-tertiary: rgba(34,31,27,.58);
  --text-muted: rgba(34,31,27,.42);

  --border-subtle: rgba(201,168,92,.22);
  --border-default: rgba(180,140,66,.38);
  --border-strong: rgba(160,120,50,.6);
  --border-input: rgba(180,140,66,.42);

  --shadow-sm: 0 4px 16px rgba(40,32,18,.09);
  --shadow-md: 0 14px 34px rgba(40,32,18,.13);
  --shadow-lg: 0 26px 56px rgba(40,32,18,.17);
  --shadow-gold-sm: 0 4px 18px rgba(201,168,92,.22);
  --shadow-gold-md: 0 10px 28px rgba(201,168,92,.32);

  --surface-card: linear-gradient(165deg,#ffffff,#f6f0e3);
  --surface-panel: #f2ebdc;

  --header-bg: rgba(255,253,248,0.88);
  --mobile-nav-bg: #fffcf6;
  --wave-alt: #f2ebdb;
  --surface-decor-1: #f0e5cd;
  --surface-decor-2: #e8dabb;
  --map-filter: none;

  /* Das Logo ist in seiner "echten" Farbe ein sehr helles Champagner-Gold
     und hätte auf hellem Grund kaum Kontrast (~1,1:1). Abgedunkelt auf ein
     kräftigeres Antik-Gold behält Farbton und Sättigung bei (reine
     Helligkeits-Skalierung ändert den Farbton nicht), erreicht aber
     ~4:1 Kontrast und bleibt damit auch im Hellmodus gut lesbar. */
  --logo-filter: brightness(0.52) saturate(1.15);

  color-scheme: light;
}

html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--text); font-family: 'Manrope', sans-serif; overflow-x: hidden;
  /* Eine durchgehende, sehr sanfte Helligkeitswelle über die ganze Seite statt
     einzelner Abschnitts-Hintergründe mit harten Kanten dazwischen. */
  background: var(--bg);
  background-image: linear-gradient(180deg,
    var(--bg) 0%, var(--wave-alt) 10%, var(--bg) 22%, var(--bg) 38%,
    var(--wave-alt) 52%, var(--bg) 66%, var(--bg) 80%, var(--wave-alt) 92%, var(--bg) 100%);
  /* Weicher Übergang beim Umschalten zwischen Hell- und Dunkelmodus statt
     eines harten Sprungs. (Der Verlauf selbst überblendet technisch bedingt
     nicht weich, seine Farbtöne liegen aber ohnehin nah beieinander.) */
  transition: background-color var(--t-med), color var(--t-med);
}
img { max-width: 100%; }
a { color: var(--accent-text); text-decoration: none; }
::placeholder { color: var(--text-muted); }
select:focus, input:focus, textarea:focus,
.dropdown-trigger:focus, .pill:focus-visible { outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(201,168,92,0.15); }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeInUp .7s var(--ease) both; }
.fade-in.d1 { animation-delay: .1s; }
.fade-in.d2 { animation-delay: .2s; }
.fade-in.d3 { animation-delay: .3s; }

/* ============================================================
   LOGO-EINBLENDUNG: SCHREIBEFFEKT
   Reine CSS-Animation ohne Scroll-Trigger, läuft daher automatisch nur
   einmal beim initialen Rendern ab, nicht erneut beim Scrollen.

   Der Schreibeffekt zerlegt das Logo (assets/braun-logo.png, 396×152px)
   in Kacheln, die jeweils nur ihren eigenen Ausschnitt des Bildes zeigen
   (i::before mit passendem background-position). Der Schriftzug "Braun"
   läuft per animiertem clip-path wie eine Feder von links nach rechts
   ein, "AUTOMOBILE" erscheint danach Buchstabe für Buchstabe, zuletzt
   blenden die beiden Zierstriche ein. Alle px-Werte beziehen sich auf
   die Originalgröße 396×152 — .braun-logo wird als Ganzes per transform:
   scale() auf die jeweilige Zielgröße (Header/Footer) herunterskaliert,
   sodass die Kachel-Positionen dabei unverändert bleiben können.
   Bei anderer Logo-Datei müssen die px-Werte neu ausgemessen werden. */
.logo-wrap {
  position: relative; overflow: hidden; border-radius: var(--radius); flex-shrink: 0;
  width: 115px; height: 44px;
}
.braun-logo {
  position: absolute; top: 0; left: 0; width: 396px; height: 152px;
  transform: scale(0.28947); transform-origin: top left;
  filter: var(--logo-filter);
}
.braun-logo i { position: absolute; display: block; overflow: hidden; }
.braun-logo i::before {
  content: ""; position: absolute; left: var(--x); top: var(--y);
  width: 396px; height: 152px;
  background: url("assets/braun-logo.png") 0 0 / 396px 152px no-repeat;
}

/* 1) Schreibschrift "Braun": läuft von links nach rechts ein, mit
      kurzen Haltepunkten an den Buchstabengrenzen */
.braun-logo .script {
  left: 0; top: 0; width: 396px; height: 118px;
  --x: 0px; --y: 0px;
  animation: braun-write 1.15s linear both;
}
@keyframes braun-write {
  0%   { clip-path: inset(0 368px 0 0); }   /* vor dem B */
  26%  { clip-path: inset(0 246px 0 0); }   /* B */
  30%  { clip-path: inset(0 246px 0 0); }
  44%  { clip-path: inset(0 201px 0 0); }   /* r */
  47%  { clip-path: inset(0 201px 0 0); }
  58%  { clip-path: inset(0 164px 0 0); }   /* a */
  61%  { clip-path: inset(0 164px 0 0); }
  70%  { clip-path: inset(0 140px 0 0); }   /* u */
  73%  { clip-path: inset(0 140px 0 0); }
  86%  { clip-path: inset(0  91px 0 0); }   /* n */
  89%  { clip-path: inset(0  91px 0 0); }
  100% { clip-path: inset(0 0 0 0); }       /* Schwung / Unterstrich */
}

/* 2) "AUTOMOBILE": Buchstabe für Buchstabe */
.braun-logo .ltr { top: 118px; height: 34px; animation: braun-ink 0.24s ease-out both; }
.braun-logo .ltr::before { --y: -118px; }
@keyframes braun-ink {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}
.braun-logo .l1  { left: 112px; width: 19px; animation-delay: 1.00s; }
.braun-logo .l2  { left: 131px; width: 17px; animation-delay: 1.07s; }
.braun-logo .l3  { left: 149px; width: 16px; animation-delay: 1.14s; }
.braun-logo .l4  { left: 165px; width: 19px; animation-delay: 1.21s; }
.braun-logo .l5  { left: 185px; width: 19px; animation-delay: 1.28s; }
.braun-logo .l6  { left: 206px; width: 19px; animation-delay: 1.35s; }
.braun-logo .l7  { left: 226px; width: 16px; animation-delay: 1.42s; }
.braun-logo .l8  { left: 244px; width:  9px; animation-delay: 1.49s; }
.braun-logo .l9  { left: 255px; width: 13px; animation-delay: 1.56s; }
.braun-logo .l10 { left: 269px; width: 15px; animation-delay: 1.63s; }
.braun-logo .l1::before  { --x: -112px; }
.braun-logo .l2::before  { --x: -131px; }
.braun-logo .l3::before  { --x: -149px; }
.braun-logo .l4::before  { --x: -165px; }
.braun-logo .l5::before  { --x: -185px; }
.braun-logo .l6::before  { --x: -206px; }
.braun-logo .l7::before  { --x: -226px; }
.braun-logo .l8::before  { --x: -244px; }
.braun-logo .l9::before  { --x: -255px; }
.braun-logo .l10::before { --x: -269px; }

/* 3) Zierstriche links/rechts */
.braun-logo .dash { top: 118px; height: 34px; animation: braun-fade 0.4s ease-out both; }
.braun-logo .dash-l { left:  20px; width: 92px; animation-delay: 1.72s; }
.braun-logo .dash-r { left: 283px; width: 93px; animation-delay: 1.78s; }
.braun-logo .dash-l::before { --x:  -20px; --y: -118px; }
.braun-logo .dash-r::before { --x: -283px; --y: -118px; }
@keyframes braun-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .braun-logo i { animation: none !important; }
  .braun-logo .script { clip-path: none; }
}

/* Inhalte sind immer sichtbar (opacity:1) — die Einblend-Animation ist rein optional
   und wird per JS nur dann aktiviert, wenn sie zuverlässig funktioniert. So kann ein
   Abschnitt nie dauerhaft unsichtbar bleiben, selbst wenn JS fehlschlägt oder der
   IntersectionObserver auf einem Gerät nicht zuverlässig auslöst. */
.reveal { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.pre-reveal { opacity: 0; transform: translateY(24px); }
.reveal.visible { opacity: 1; transform: translateY(0); }

.wrap { max-width: 1200px; margin: 0 auto; }

/* ============================================================
   TYPOGRAFIE-SYSTEM
   Ein Satz Überschriften- und Label-Klassen, den jeder Abschnitt
   gleichermaßen verwendet — keine abschnittsspezifischen Größen.
   ============================================================ */
.h1 {
  font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(40px,6.2vw,72px);
  line-height: 1.08; letter-spacing: -0.01em;
}
.h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(32px,4.2vw,48px);
  line-height: 1.12; margin: 0 0 var(--sp-5); color: var(--text);
}
.eyebrow {
  display: block; font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 var(--sp-2);
}
.lede { font-size: 17px; line-height: 1.7; color: var(--text-secondary); }
.copy { font-size: 16px; line-height: 1.75; color: var(--text-secondary); margin: 0 0 var(--sp-2); }
.copy:last-child { margin-bottom: 0; }
.label-tight {
  font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-text);
}
.stars { color: var(--accent-text); font-size: 14px; letter-spacing: 0.05em; }

/* ============================================================
   BUTTON-SYSTEM
   Eine Basisklasse + zwei Größen. Jeder klickbare Haupt-CTA der
   Seite (Hero, Formulare) und jede sekundäre Aktion (Telefon,
   Karten-Detaillink) greifen auf dieselben Regeln zurück.
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  background: var(--accent); color: var(--ink); font-family: 'Manrope', sans-serif;
  font-weight: 700; letter-spacing: 0.02em; border: 1px solid var(--accent);
  border-radius: var(--radius); cursor: pointer; text-align: center;
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), color var(--t-fast);
  box-shadow: var(--shadow-gold-sm);
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: var(--shadow-gold-md); transform: var(--lift-btn); }
.btn:active { transform: scale(0.97); }
.btn-lg { padding: var(--sp-3) var(--sp-5); font-size: 16px; min-height: 56px; }
.btn-sm { padding: var(--sp-2) var(--sp-3); font-size: 14px; min-height: 48px; }
.btn-block { display: flex; width: 100%; }
.btn-ghost {
  background: transparent; color: var(--accent-text);
  box-shadow: 0 0 0 1px var(--border-strong);
}
.btn-ghost:hover { background: rgba(201,168,92,0.08); box-shadow: 0 0 0 1px var(--accent); color: var(--accent-text); }

/* ============================================================
   KARTEN-SYSTEM
   Fahrzeugkarten, Bewertungskarten, Formulare und die Filter-
   leiste teilen sich exakt dieselbe Oberfläche, denselben Radius,
   dieselbe Schattentiefe und dieselbe Rahmenfarbe.
   ============================================================ */
.card {
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
  transition: background-color var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}
.card-interactive { transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med), background-color var(--t-med), color var(--t-med); }
.card-interactive:hover { transform: var(--lift-card); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }

/* ============================================================
   FORMULAR-SYSTEM
   Ein Satz Feldregeln für alle Formulare der Seite (Kontakt,
   Fahrzeugankauf) — identische Rahmen, Innenabstände, Radien
   und Fokus-Zustände.
   ============================================================ */
.field {
  background: var(--bg); border: 1px solid var(--border-input); color: var(--text);
  border-radius: var(--radius); padding: var(--sp-2); font-size: 15px; min-height: 48px;
  font-family: 'Manrope', sans-serif; transition: border-color var(--t-fast), background-color var(--t-med), color var(--t-med);
}
.field:hover { border-color: var(--border-strong); }
textarea.field { min-height: unset; resize: vertical; }
/* overflow: visible überschreibt das overflow: hidden von .card (Formulare
   tragen zusätzlich die Klasse "card") — sonst schneidet die Formularkarte
   die aufklappenden Dropdown-Menüs von "Unfallfrei?"/"Kraftstoff" am unteren
   Kartenrand ab, siehe .filters weiter unten für dasselbe Problem. */
.form { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); overflow: visible; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.form-fieldset { display: flex; flex-direction: column; gap: var(--sp-2); padding: 0; margin: 0; border: 0; }
.form-legend { padding: 0; margin-bottom: 2px; }
.form-divider { height: 1px; background: var(--border-subtle); margin: var(--sp-1) 0; }
.field-hint { font-size: 12px; color: var(--text-muted); margin-top: -6px; }
.field-label { font-size: 14px; color: var(--text-secondary); }
/* Beschriftung oberhalb eines Feldes (Pill-Gruppe oder Dropdown), analog zum
   mobile.de-Vorbild: kleine Beschriftung, Feld darunter. Nutzt .field-label
   für einheitliche Typografie mit den übrigen Formular-Beschriftungen. */
.field-group { display: flex; flex-direction: column; gap: 6px; }
.field-group .field-label { margin: 0; }

/* ------------------------------------------------------------
   Pill-Buttons (Kraftstoff-Filter im Fahrzeugbestand)
   ------------------------------------------------------------ */
.pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 18px; border-radius: var(--radius-full);
  font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.01em;
  background: transparent; border: 1px solid var(--border-input); color: var(--text-secondary);
  cursor: pointer; user-select: none; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.pill:hover { border-color: var(--border-strong); color: var(--text); background: rgba(201,168,92,0.08); }
.pill.is-active { background: var(--accent); border-color: var(--accent); color: var(--ink); box-shadow: var(--shadow-gold-sm); }
.pill.is-active:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ------------------------------------------------------------
   Selbst gestaltete Dropdown-Komponente (ersetzt native <select>
   für Sortierung sowie "Unfallfrei?"/"Kraftstoff" im Ankaufsformular).
   ------------------------------------------------------------ */
.dropdown { position: relative; }
.dropdown-trigger.field {
  display: flex; align-items: stretch; width: 100%; padding: 0 0 0 var(--sp-2);
  overflow: hidden; cursor: pointer; user-select: none; text-align: left;
  font-family: 'Manrope', sans-serif; font-size: 15px; color: var(--text);
}
.dropdown-value {
  flex: 1 1 auto; display: flex; align-items: center;
  padding: var(--sp-2) 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dropdown-value.is-placeholder { color: var(--text-muted); }
/* Pfeil-Kästchen: eigenes, leicht abgesetztes Feld am rechten Rand mit
   dezenter Trennlinie statt eines frei schwebenden Pfeils. */
.dropdown-arrow-box {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 46px; margin-left: var(--sp-2); border-left: 1px solid var(--border-input);
  background: rgba(201,168,92,0.05);
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.dropdown-trigger:hover .dropdown-arrow-box { border-color: var(--border-strong); }
.dropdown.is-open .dropdown-arrow-box { border-color: var(--border-strong); background: rgba(201,168,92,0.1); }
.dropdown-arrow-box svg { transition: transform var(--t-fast); }
.dropdown.is-open .dropdown-arrow-box svg { transform: rotate(180deg); }

.dropdown-menu {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30;
  background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius);
  box-shadow: var(--shadow-md); margin: 0; padding: 6px; list-style: none;
  max-height: 260px; overflow-y: auto;
}
.dropdown.is-open .dropdown-menu { display: block; animation: dropdownMenuIn .18s var(--ease) both; }
@keyframes dropdownMenuIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.dropdown-option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 10px 12px; border-radius: var(--radius-sm); font-size: 15px; color: var(--text);
  cursor: pointer; user-select: none; transition: background-color var(--t-fast);
}
.dropdown-option:hover, .dropdown-option:focus { background: rgba(201,168,92,0.1); outline: none; }
.dropdown-option.is-selected { color: var(--accent-text); font-weight: 700; }
.dropdown-option.is-selected::after { content: "✓"; color: var(--accent); font-weight: 700; }
.field-file { padding: 12px; font-size: 13px; cursor: pointer; }
.field-file::file-selector-button {
  background: var(--accent); color: var(--ink); border: none; font-weight: 700; font-size: 13px;
  border-radius: var(--radius); padding: 10px 16px; margin-right: var(--sp-2); cursor: pointer;
  font-family: 'Manrope', sans-serif; transition: background var(--t-fast);
}
.field-file::file-selector-button:hover { background: var(--accent-hover); }
/* Datenschutz-Einwilligung: eine Checkbox + Fließtext im selben Formular-
   Stil, damit sie sich nicht wie ein Fremdkörper zwischen den Feldern
   anfühlt. Genutzt im Fahrzeugankauf- und im Kontaktformular. */
.consent-label { display: flex; align-items: flex-start; gap: var(--sp-2); cursor: pointer; }
.consent-label input[type="checkbox"] {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; accent-color: var(--accent); cursor: pointer;
}
.consent-label span { font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.consent-label a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.consent-label a:hover { color: var(--accent-hover); }

/* Honeypot-Feld gegen automatisierten Spam (Netlifys eigene Empfehlung):
   für echte Besucher unsichtbar und aus der Tab-Reihenfolge genommen,
   simple Bots, die jedes Feld ausfüllen, tappen aber hinein. */
.hp-field { display: none; }

/* ============================================================
   HEADER
   ============================================================ */
header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-2) var(--gutter);
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color var(--t-med), border-color var(--t-med);
}
.nav-desktop { display: flex; gap: var(--sp-4); align-items: center; }
.nav-desktop a {
  color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: 0.03em;
  transition: color var(--t-fast);
}
.nav-desktop a:hover { color: var(--accent-text); }

.header-controls { display: flex; align-items: center; gap: var(--sp-2); }

/* Dunkel-/Hellmodus-Umschalter: ein Icon-Button im Header, immer sichtbar
   (auch unter dem Mobile-Breakpoint, im Unterschied zu Nav-Links/Telefon-
   Button), damit er sowohl am Desktop als auch mobil gut erreichbar ist. */
.theme-toggle {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--border-input); border-radius: var(--radius);
  cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast);
}
.theme-toggle:hover { border-color: var(--border-strong); background: rgba(201,168,92,0.08); }
.theme-toggle svg {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.theme-toggle .icon-sun { opacity: 0; transform: translate(-50%,-50%) rotate(-90deg) scale(.6); }
.theme-toggle .icon-moon { opacity: 1; transform: translate(-50%,-50%) rotate(0deg) scale(1); }
:root[data-theme="light"] .theme-toggle .icon-sun { opacity: 1; transform: translate(-50%,-50%) rotate(0deg) scale(1); }
:root[data-theme="light"] .theme-toggle .icon-moon { opacity: 0; transform: translate(-50%,-50%) rotate(90deg) scale(.6); }

/* Anruf-Icon-Button im Header: dieselbe Optik wie .theme-toggle (Maße,
   Rahmen, Hover), aber ohne Umschalt-Animation — ein einzelnes Telefon-
   Icon, das per tel:-Link direkt anruft. Ersetzt den zuvor ausgeschriebenen
   "0173 3614083"-Button, der neben dem WhatsApp-Button unten rechts auf
   der Desktop-Ansicht redundant wirkte. Auf Mobil ohnehin ausgeblendet
   (siehe Media Query unten) — dort zeigt die mobile Navigation die Nummer
   weiterhin ausgeschrieben (.mobile-nav a.mobile-phone). */
.header-phone-btn {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--border-input); border-radius: var(--radius);
  cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast);
}
.header-phone-btn:hover { border-color: var(--border-strong); background: rgba(201,168,92,0.08); }

.hamburger-btn {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border-input); border-radius: var(--radius);
  cursor: pointer; flex-shrink: 0; transition: border-color var(--t-fast);
}
.hamburger-btn:hover { border-color: var(--border-strong); }
.mobile-nav {
  display: none; flex-direction: column; position: sticky; top: 73px; z-index: 49;
  background: var(--mobile-nav-bg); border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-md);
  transition: background-color var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  color: var(--text); font-size: 15px; font-weight: 600; letter-spacing: 0.03em;
  padding: var(--sp-2) var(--gutter); border-bottom: 1px solid var(--border-subtle);
}
.mobile-nav a.mobile-phone { color: var(--accent-text); font-weight: 700; border-bottom: none; }

@media (max-width: 768px) {
  .nav-desktop, header .btn, .header-phone-btn { display: none; }
  .hamburger-btn { display: flex; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 720px; display: flex; align-items: center;
  padding: var(--sp-9) var(--gutter);
  background: linear-gradient(150deg, var(--surface-panel) 0%, var(--surface-decor-1) 45%, var(--bg) 100%);
  overflow: hidden;
  transition: background-color var(--t-med);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 70% at 30% 20%, rgba(201,168,92,0.08), transparent 60%);
}
.hero-inner { position: relative; max-width: 1200px; margin: 0 auto; width: 100%; }
.hero-inner .eyebrow { margin-bottom: var(--sp-3); }
.hero-inner .h1 { margin: 0 0 var(--sp-3); max-width: 860px; }
.hero-sub { font-size: 19px; line-height: 1.65; color: var(--text-secondary); max-width: 540px; margin: 0 0 var(--sp-5); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.rating-pill {
  display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-default); border-radius: var(--radius); background: rgba(201,168,92,0.05);
}
.rating-pill .rating-text { font-size: 13px; color: var(--text-secondary); font-weight: 600; }

/* ============================================================
   STATISTIKEN
   Bewusst ohne Karte/Hintergrund, ruhig auf dem Seitenhintergrund
   platziert, direkt unter dem Hero-Bereich. Die Zahlen starten im
   Markup bei 0 und werden per JS (initStatsCounter() in script.js)
   beim ersten Sichtbarwerden hochgezählt.
   ============================================================ */
.stats { padding: var(--sp-6) var(--gutter); }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-4); text-align: center; }
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px) { .stats-grid { grid-template-columns: 1fr; gap: var(--sp-4); } }
.stat-item { display: flex; flex-direction: column; align-items: center; }
.stat-number {
  font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(36px,5vw,56px);
  line-height: 1; color: var(--accent-text);
  /* Cormorant Garamond zeichnet Ziffern standardmäßig als "alte Ziffern"
     (unterschiedliche Höhen/Grundlinien wie bei Kleinbuchstaben) — dabei
     wirkt die 1 wie ein großes "I" (z. B. bei "12"). lining-nums erzwingt
     stattdessen gleich hohe, eindeutige Standardziffern. */
  font-variant-numeric: lining-nums;
}
.stat-label { font-size: 13px; color: var(--text-tertiary); margin-top: var(--sp-1); }

/* ============================================================
   ABSCHNITTS-RASTER
   Jeder Inhaltsabschnitt (Fahrzeuge, Ankauf, Über uns, Bewertungen,
   Kontakt) teilt sich denselben vertikalen Rhythmus.
   ============================================================ */
.section { padding: var(--sp-10) var(--gutter); }
@media (max-width: 640px) { .section { padding: var(--sp-8) var(--gutter); } }
.section-intro { max-width: 680px; margin: 0 0 var(--sp-5); }

/* Panel-Abschnitte heben sich durch einen sehr sanften, randlosen
   Helligkeitswechsel ab statt durch eine harte Trennlinie: der
   Verlauf blendet oben und unten über 64px sanft ein/aus. */
.panel {
  background: linear-gradient(180deg,
    transparent 0, var(--surface-panel) var(--sp-7),
    var(--surface-panel) calc(100% - var(--sp-7)), transparent 100%);
}

/* ============================================================
   FAHRZEUGBESTAND
   ============================================================ */
/* overflow: visible überschreibt das overflow: hidden von .card — sonst
   schneidet die Filterleiste das aufklappende Sortierung-Dropdown-Menü am
   unteren Kartenrand ab. align-items: center statt des Stretch-Standards
   verhindert außerdem, dass sich die Kraftstoff-Pillen bei ungleicher Höhe
   der beiden Filterspalten (z. B. wenn die Pillen mehrzeilig umbrechen)
   gegenüber der Sortierung verschieben. */
.filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); padding: var(--sp-3);
  overflow: visible;
}
.filters .field-group { flex: 1 1 220px; }

.vehicles-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap: var(--sp-4); }
@media (max-width: 768px) {
  .vehicles-grid { grid-template-columns: 1fr; }
}
.vehicle-card { display: flex; flex-direction: column; }
.vehicle-photo {
  position: relative; height: 210px; overflow: hidden;
  background: linear-gradient(160deg, var(--surface-decor-1), var(--surface-decor-2));
  border-radius: var(--radius) var(--radius) 0 0; cursor: zoom-in;
  /* Erlaubt dem Browser weiterhin vertikales Scrollen der Seite mit dem
     Finger; die horizontale Wisch-Geste wird per JS ausgewertet (siehe
     initVehiclePhotoCarousel in script.js). */
  touch-action: pan-y;
}
/* Bild-Karussell: alle Fotos eines Fahrzeugs liegen nebeneinander in einer
   Flex-Leiste, die per translateX() verschoben wird — für Pfeile/Punkte
   animiert (CSS-Transition), während einer aktiven Wisch-Geste ohne
   Transition (folgt 1:1 dem Finger, siehe .dragging). */
.vehicle-photo-track { display: flex; width: 100%; height: 100%; transition: transform .45s var(--ease); }
.vehicle-photo-track.dragging { transition: none; }
.vehicle-photo-slide { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.vehicle-card:hover .vehicle-photo-slide { transform: scale(1.04); }
.vehicle-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(12,11,10,0) 60%, rgba(12,11,10,0.55) 100%);
}
.badge {
  position: absolute; top: var(--sp-2); left: var(--sp-2); padding: 7px 13px;
  border: 1px solid; border-radius: var(--radius-sm); z-index: 1;
}
.badge.unfallfrei { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.badge.repariert { background: rgba(12,11,10,.55); color: #D99B5F; border-color: #D99B5F; }
.badge.beschaedigt { background: rgba(12,11,10,.55); color: #C9756B; border-color: #C9756B; }

/* Pfeil-Navigation: nur im Markup vorhanden, wenn ein Fahrzeug mehr als
   ein Foto hat (siehe vehicleCardHtml in script.js) — kein zusätzlicher
   CSS-Schalter nötig. Auf Desktop erst bei Hover über die Karte sichtbar,
   auf Geräten ohne Hover (Touch) dauerhaft leicht sichtbar. */
.photo-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 32px; height: 32px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,11,10,0.5); border: 1px solid rgba(201,168,92,0.4);
  cursor: pointer; opacity: 0;
  transition: opacity var(--t-fast), background-color var(--t-fast), border-color var(--t-fast);
}
.photo-nav:hover { background: rgba(12,11,10,0.78); border-color: var(--accent); }
.photo-nav:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
.photo-prev { left: var(--sp-2); }
.photo-next { right: var(--sp-2); }
.vehicle-card:hover .photo-nav { opacity: 1; }
@media (max-width: 768px) {
  .photo-nav { opacity: 0.75; }
}

/* Positions-Punkte (Dots) unten am Bild — feste helle Töne statt Theme-
   Variablen, da sie über einem Foto liegen, nicht über dem Seitenhintergrund. */
.photo-dots {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2;
  display: flex; gap: 6px;
}
.photo-dot {
  width: 6px; height: 6px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.55); box-shadow: 0 0 2px rgba(0,0,0,0.5); cursor: pointer;
  transition: background-color var(--t-fast), transform var(--t-fast);
}
.photo-dot:hover { background: rgba(255,255,255,0.8); }
.photo-dot.active { background: var(--accent); transform: scale(1.3); }

.vehicle-body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.vehicle-body h3 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 21px; margin: 0; line-height: 1.3; color: var(--text); font-variant-numeric: lining-nums; }
.vehicle-price { display: flex; align-items: baseline; gap: var(--sp-1); }
.vehicle-price .amount { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 28px; color: var(--accent-text); font-variant-numeric: lining-nums; }
.vehicle-divider { height: 1px; background: var(--border-subtle); }
.vehicle-specs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); font-size: 13px; color: var(--text-secondary); }
.vehicle-specs div { display: flex; align-items: center; gap: var(--sp-1); }
.vehicle-specs svg { flex-shrink: 0; }
.vehicle-body .btn { margin-top: auto; }

/* ============================================================
   FAHRZEUGANKAUF
   ============================================================ */
.ankauf-form { max-width: 680px; }

/* ============================================================
   ÜBER UNS
   ============================================================ */
.about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-7); align-items: center; }
@media (max-width: 768px) { .about-grid { grid-template-columns: 1fr; } }
.about-visual {
  position: relative; height: 340px; overflow: hidden;
  border: 1px solid var(--border-subtle); border-radius: var(--radius);
  transition: border-color var(--t-med);
}
.about-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   BEWERTUNGEN
   ============================================================ */
.reviews-wrap { text-align: center; }
.rating-summary {
  display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-6);
}
.rating-summary .g-circle {
  width: 38px; height: 38px; border-radius: var(--radius-full); border: 1.5px solid var(--accent);
  display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif;
  font-weight: 700; font-size: 18px; color: var(--accent-text); flex-shrink: 0;
}
.rating-summary .rs-text { text-align: left; }
.rating-summary .rs-score { display: flex; align-items: baseline; gap: var(--sp-1); }
.rating-summary .rs-score .num { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 28px; color: var(--text); font-variant-numeric: lining-nums; }
.rating-summary .rs-count { font-size: 13px; color: var(--text-tertiary); }

.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: var(--sp-4); text-align: left; }
.review-card { position: relative; padding: var(--sp-4); }
.review-card .quote-mark { font-family: Georgia, serif; font-size: 48px; line-height: 1; color: rgba(201,168,92,0.25); margin-bottom: 4px; }
.review-card .review-top { display: flex; align-items: center; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.review-card .g-badge {
  width: 18px; height: 18px; border-radius: var(--radius-full); border: 1px solid var(--border-strong);
  font-size: 10px; display: flex; align-items: center; justify-content: center; color: var(--accent-text); font-weight: 700;
}
.review-card p { font-size: 15px; line-height: 1.75; color: var(--text-secondary); margin: 0 0 var(--sp-2); }
.review-card .review-name { font-size: 13px; font-weight: 600; color: var(--accent-text); }

/* ============================================================
   KONTAKT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info { display: flex; flex-direction: column; gap: var(--sp-4); }
.contact-label { margin-bottom: var(--sp-1); }
.contact-value { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.contact-info a.contact-value { transition: color var(--t-fast); }
.contact-info a.contact-value:hover { color: var(--accent-text); }
.ig-link { font-size: 15px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: var(--sp-1); transition: color var(--t-fast); }
.ig-link:hover { color: var(--accent-text); }
.ig-box { width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: var(--radius-sm); display: inline-block; }
.map-box { border: 1px solid var(--border-default); border-radius: var(--radius); overflow: hidden; transition: border-color var(--t-med); }
.map-box .map-label { padding: var(--sp-2); background: rgba(201,168,92,0.08); }
.map-box iframe { width: 100%; height: 220px; border: 0; display: block; filter: var(--map-filter); transition: filter var(--t-med); }
/* Platzhalter, solange die Google-Maps-Karte mangels Cookie-Einwilligung
   noch nicht geladen ist (siehe initCookieConsent in script.js) */
.map-placeholder {
  height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); padding: var(--sp-4); text-align: center; background: var(--surface-panel);
}
.map-placeholder p { font-size: 13px; line-height: 1.6; color: var(--text-tertiary); margin: 0; max-width: 260px; }

/* ============================================================
   COOKIE-HINWEIS
   Betrifft ausschließlich die Google-Maps-Karte im Kontaktbereich — die
   einzige verbleibende Stelle, an der beim Laden eine Verbindung zu
   einem Drittanbieter hergestellt wird (Schriftarten sind lokal gehostet,
   siehe assets/fonts). Erscheint einmalig, die Entscheidung wird im
   Local Storage gemerkt (siehe initCookieConsent in script.js).
   ============================================================ */
.cookie-banner {
  /* Nutzt die .card-Klasse für Oberfläche/Rahmen/Schatten (dasselbe
     Karten-System wie im Rest der Seite) — hier nur Positionierung. */
  position: fixed; left: 24px; bottom: 24px; z-index: 70;
  max-width: 380px; padding: var(--sp-3); box-shadow: var(--shadow-lg);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { font-size: 13px; line-height: 1.65; color: var(--text-secondary); margin: 0 0 var(--sp-2); }
.cookie-banner-actions { display: flex; gap: var(--sp-2); }
.cookie-banner-actions .btn { flex: 1; }
@media (max-width: 768px) {
  .cookie-banner { left: var(--gutter); right: var(--gutter); bottom: 104px; max-width: none; }
}

/* ============================================================
   WHATSAPP & MOBILE-KONTAKTLEISTE
   Desktop/Tablet: schwebender WhatsApp-Button unten rechts.
   Mobil (≤768px): stattdessen eine feste Leiste unten mit "Anrufen"
   und "WhatsApp" nebeneinander — dort, wo Besucher auf dem Handy
   tatsächlich mit dem Daumen hinkommen. Beide Wege nutzen dieselbe
   Telefonnummer wie im Header (0173 3614083 → wa.me/491733614083).
   ============================================================ */
.whatsapp-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 55;
  width: 56px; height: 56px; border-radius: var(--radius-full);
  background: var(--accent); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-gold-md);
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.whatsapp-float:hover { background: var(--accent-hover); box-shadow: var(--shadow-gold-md); transform: var(--lift-btn); }
@media (max-width: 768px) { .whatsapp-float { display: none; } }

.mobile-cta-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--gutter) calc(var(--sp-2) + env(safe-area-inset-bottom));
  background: var(--header-bg); backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-subtle);
  transition: background-color var(--t-med), border-color var(--t-med);
}
.mobile-cta-bar a { flex: 1; }
@media (max-width: 768px) {
  .mobile-cta-bar { display: flex; }
  /* Platz am unteren Rand, damit Footer/Inhalt nicht hinter der fixen
     Leiste verschwindet — großzügig bemessen inkl. Sicherheitsabstand
     für Geräte mit Home-Indicator (env(safe-area-inset-bottom)). */
  body { padding-bottom: 118px; }
}

/* ============================================================
   RECHTLICHES (Impressum / Datenschutz)
   Eine schmale Lesespalte im selben Typografie- und Karten-System
   wie der Rest der Seite, für die eigenständigen Unterseiten.
   ============================================================ */
.legal-main { padding: var(--sp-9) var(--gutter) var(--sp-9); }
.legal-wrap { max-width: 760px; margin: 0 auto; }
.legal-wrap .h1 { font-size: clamp(32px,5vw,48px); margin: 0 0 var(--sp-2); }
.legal-updated { font-size: 13px; color: var(--text-muted); margin: 0 0 var(--sp-5); }
.legal-notice { padding: var(--sp-3); margin-bottom: var(--sp-6); }
.legal-section { margin: 0 0 var(--sp-6); }
.legal-section h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 26px;
  margin: 0 0 var(--sp-2); color: var(--text);
}
.legal-section h3 {
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; margin: var(--sp-4) 0 var(--sp-1); color: var(--accent-text);
}
.legal-section p { font-size: 15px; line-height: 1.75; color: var(--text-secondary); margin: 0 0 var(--sp-2); }
.legal-section ul { margin: 0 0 var(--sp-2); padding-left: 20px; }
.legal-section li { font-size: 15px; line-height: 1.75; color: var(--text-secondary); margin-bottom: 6px; }
.legal-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-3); margin: 0 0 var(--sp-2); }
.legal-dl dt { font-weight: 700; color: var(--text); font-size: 14px; }
.legal-dl dd { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.tbd {
  display: inline-block; color: #C9756B; background: rgba(201,117,107,.12);
  border: 1px dashed rgba(201,117,107,.55); border-radius: var(--radius-sm);
  padding: 1px 8px; font-weight: 700; font-size: 12.5px; letter-spacing: 0.01em; white-space: nowrap;
}

/* ============================================================
   BESTÄTIGUNGSSEITEN (ankauf-danke.html / kontakt-danke.html)
   Eine zentrierte Karte im selben Karten-System wie der Rest der Seite,
   eingebettet in die reguläre Kopf- und Fußzeile statt einer eigenen,
   isolierten Design-Insel.
   ============================================================ */
.confirm-main { padding: var(--sp-9) var(--gutter); display: flex; align-items: center; min-height: 60vh; }
.confirm-card { max-width: 480px; margin: 0 auto; text-align: center; padding: var(--sp-6) var(--sp-4); }
.confirm-check {
  width: 56px; height: 56px; border-radius: var(--radius-full); border: 1.5px solid var(--accent);
  display: flex; align-items: center; justify-content: center; margin: 0 auto var(--sp-3);
}
.confirm-card h1 {
  font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 32px;
  margin: 0 0 var(--sp-2); color: var(--text);
}
.confirm-card p { font-size: 16px; line-height: 1.7; color: var(--text-secondary); margin: 0 0 var(--sp-4); }

/* ============================================================
   FOOTER
   ============================================================ */
footer { padding: var(--sp-7) var(--gutter) var(--sp-5); border-top: 1px solid var(--border-subtle); transition: border-color var(--t-med); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.footer-logo { height: 38px; width: auto; margin-bottom: var(--sp-2); filter: var(--logo-filter); }
.footer-addr { font-size: 13px; color: var(--text-tertiary); line-height: 1.6; }
.footer-links { display: flex; gap: var(--sp-4); font-size: 14px; }
.footer-links a { color: var(--text-secondary); transition: color var(--t-fast); }
.footer-links a:hover { color: var(--accent-text); }
.footer-bottom { border-top: 1px solid var(--border-subtle); padding-top: var(--sp-2); font-size: 12px; color: var(--text-muted); transition: border-color var(--t-med); }

/* ============================================================
   FAHRZEUG-FOTOGALERIE (LIGHTBOX)
   Öffnet sich beim Klick auf das Foto einer Fahrzeugkarte und zeigt alle
   hinterlegten Fotos dieses Fahrzeugs im Großformat — Bedienung per Pfeilen,
   Miniaturansichten unten oder Pfeiltasten/Escape. Fahrzeuge ohne eigene
   Galerie (nur ein Hauptfoto) zeigen dasselbe Overlay mit einem einzelnen
   Bild, ohne Pfeile/Thumbnails. Siehe initVehicleLightbox in script.js.
   ============================================================ */
.vehicle-photo { cursor: zoom-in; }

.lightbox {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3); padding: var(--sp-6) var(--sp-4);
  background: rgba(6,5,4,0.94);
}
.lightbox[hidden] { display: none; }
.lightbox-stage {
  margin: 0; max-width: min(1100px, 92vw); display: flex; position: relative;
}
.lightbox-image {
  max-width: 100%; max-height: 72vh; width: auto; height: auto; object-fit: contain;
  border-radius: var(--radius); box-shadow: var(--shadow-lg); display: block; margin: 0 auto;
}
.lightbox-counter {
  position: absolute; bottom: var(--sp-2); left: 50%; transform: translateX(-50%);
  background: rgba(12,11,10,0.7); color: var(--text); font-size: 12px; font-weight: 600;
  padding: 4px 12px; border-radius: var(--radius-full); letter-spacing: 0.04em;
}
.lightbox-close, .lightbox-nav {
  position: fixed; display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--radius-full); flex-shrink: 0;
  background: rgba(12,11,10,0.6); border: 1px solid var(--border-input); cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.lightbox-close:hover, .lightbox-nav:hover { border-color: var(--border-strong); background: rgba(201,168,92,0.12); }
.lightbox-close { top: var(--sp-3); right: var(--sp-3); }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: var(--sp-3); }
.lightbox-next { right: var(--sp-3); }
/* [hidden] hat dieselbe Spezifität wie die Klassenselektoren oben und würde
   sonst von deren display:flex überschrieben — bei Fahrzeugen mit nur einem
   Foto (kein v.gallery) müssen Pfeile und Thumbnail-Leiste aber wirklich
   verschwinden, nicht nur unsichtbar-aber-klickbar bleiben. */
.lightbox-nav[hidden] { display: none; }
.lightbox-thumbs {
  display: flex; gap: var(--sp-1); max-width: 92vw; overflow-x: auto; padding: 2px;
}
.lightbox-thumbs[hidden] { display: none; }
.lightbox-thumbs img {
  width: 64px; height: 48px; object-fit: cover; border-radius: var(--radius-sm);
  cursor: pointer; opacity: 0.55; border: 1.5px solid transparent; flex-shrink: 0;
  transition: opacity var(--t-fast), border-color var(--t-fast);
}
.lightbox-thumbs img:hover { opacity: 0.85; }
.lightbox-thumbs img.active { opacity: 1; border-color: var(--accent); }

@media (max-width: 640px) {
  .lightbox-nav { width: 40px; height: 40px; }
  .lightbox-prev { left: var(--sp-1); }
  .lightbox-next { right: var(--sp-1); }
  .lightbox-close { top: var(--sp-1); right: var(--sp-1); }
  .lightbox-thumbs img { width: 48px; height: 36px; }
}