/* ─── RESET & BASE ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:   #0b0d12;   /* Schwarz (ESK) */
  --navy2:  #13161d;
  --gold:   #0014ad;   /* Royalblau aus dem ESK-Logo (Markenfarbe, Knoepfe) */
  --gold2:  #1f3be0;   /* Royalblau hover */
  --rose:   #8fa0ff;   /* Heller Blauton für Text/Zahlen auf Dunkel */
  --white:  #ffffff;
  --off:    #f4f6f9;   /* Kühles Off-White */
  --text:   #14161c;
  --muted:  #6b7280;
  --border: #e2e8f0;
  --radius: 12px;
  --shadow: 0 4px 24px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.14);
  --transition: .25s ease;
  /* Flaechen und Akzent-Text getrennt von --white/--gold: "weiss" bleibt
     die Textfarbe auf Dunkel, "gold" die Knopffarbe – Karten und
     Akzentschrift wechseln mit dem Thema. */
  --seite:    #ffffff;   /* Grund der Seite */
  --surface:  #ffffff;   /* Karten, Formulare, Fenster */
  --surface2: #f4f6f9;   /* zweite Ebene: Hover, Innenkaesten */
  --navy-tief:#0b0d12;   /* dunkle Abschnitte, Fusszeile */
  --akzent:   #0014ad;   /* Akzentschrift, Rahmen */
  --akzent2:  #1f3be0;
  --feld:     #ffffff;   /* Eingabefelder – heller als die Karte drumherum */
  --feld-rand:#e2e8f0;
  --karte-hell:#ffffff;  /* Bewertungskarten – die hellste Flaeche */
  /* Markenfarbe als RGB-Tripel fuer Leuchten und Toenungen (rgba(var(...), a)) –
     so wechselt mit dem Haus (data-haus, siehe unten) auch jeder Schimmer. */
  --marke-rgb:      0,20,173;    /* = --gold */
  --marke-hell-rgb: 74,99,255;   /* aufgehellt, fuer Leuchten auf Dunkel */
  --akzent-rgb:     111,133,255; /* = --akzent im dunklen Thema */
  --marke-tief-rgb: 10,14,60;
  --marke-tief:     #0a1258;
  /* Chrome am Telefon darf Seiten, die keinen Dunkelmodus mitbringen, von
     sich aus abdunkeln ("Websites abdunkeln" in den Einstellungen). Das
     Ergebnis waere ein umgefaerbtes Bordeaux auf grauem Grund. "only light"
     ist der vorgesehene Weg, das abzulehnen: die Seite bleibt so, wie sie
     gebaut ist. Einzelne Elemente duerfen weiterhin dunkel sein – die
     Auswahlfelder im dunklen Fahrzeugbereich setzen das selbst. */
  color-scheme: only light;
}
/* ─── Dunkles Thema der Website ───
   Die Verwaltung (html.admin, Anmeldung) bleibt hell; die Website selbst
   laeuft auf Anthrazit. Nur Token – die Regeln darunter bleiben gleich. */
html:not(.admin):not(.admin-login) {
  --seite:    #0b0d12;
  --surface:  #12151c;
  --surface2: #191c25;
  --off:      #0f1117;
  --navy-tief:#07080c;
  --text:     #e9ebf0;
  --muted:    #9ea3b0;
  --border:   #262a34;
  --akzent:   #6f85ff;
  --akzent2:  #a3b1ff;
  --feld:     #1c1f28;
  --feld-rand:#323745;
  --karte-hell:#1a1d26;
  --shadow:    0 4px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.5);
  color-scheme: dark;
}

/* ─── Zweites Haus: Negrov Automobile ───
   Gleicher Hof, eigenes Logo in Violett. Die Middleware setzt data-haus am
   <html> (Cookie "haus", Umschalter im Kopf) – nur Token, die Regeln bleiben. */
html[data-haus="negrov"] {
  --gold:   #6a0ad8;
  --gold2:  #8130f5;
  --rose:   #c5a8ff;
  --akzent: #6a0ad8;
  --akzent2:#8130f5;
  --marke-rgb:      106,10,216;
  --marke-hell-rgb: 143,77,255;
  --akzent-rgb:     177,140,255;
  --marke-tief-rgb: 34,8,74;
  --marke-tief:     #22084a;
}
html[data-haus="negrov"]:not(.admin):not(.admin-login) {
  --akzent:  #b18cff;
  --akzent2: #cdb5ff;
}

/* Kein globales smooth-Scrolling: sonst animiert der Browser beim
   Aktualisieren den Sprung von oben zur wiederhergestellten Position.
   Sanftes Scrollen zu Ankern macht main.js gezielt per JS. */
html { background: var(--navy); scroll-padding-top: 84px; }
/* Verhindert elastisches Überscrollen (Rubber-Band), das sonst kurz den Hintergrund zeigt */
html, body { overscroll-behavior: none; overflow-x: clip; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  background: var(--seite);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
p { color: var(--muted); }

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Kopf- und Fusszeile laufen ueber die ganze Breite, der Inhalt dazwischen
   bleibt bei 1160 Pixeln. Fliesstext ueber die volle Breite eines grossen
   Bildschirms liest sich schlecht – eine Navigationsleiste dagegen wirkt
   eingeschnuert, wenn sie in der Mitte klebt. Der Rand waechst mit dem
   Bildschirm, damit Logo und Menue nicht an der Kante kleben. */
.site-header .container,
.site-footer .container {
  max-width: none;
  padding-left: clamp(24px, 4vw, 72px);
  padding-right: clamp(24px, 4vw, 72px);
}

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 8px;
  background: transparent;   /* sonst erhält <button> den hellgrauen UA-Default */
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: all var(--transition);
  border: 2px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--gold);
  color: var(--white);
}
.btn-primary:hover { background: var(--gold2); transform: translateY(-1px); }
.btn-outline {
  border-color: rgba(255,255,255,.5);
  color: var(--white);
}
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,.08); }
.btn-gold {
  background: var(--gold);
  color: var(--white);
  font-weight: 700;
  padding: 14px 32px;
}
.btn-gold:hover { background: var(--gold2); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--marke-rgb),.35); }

/* ─── NAVIGATION ─── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 0;
  transition: background var(--transition), box-shadow var(--transition);
}
.site-header.scrolled {
  background: rgba(11,13,18,.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0,0,0,.3);
}
/* Solide Kopfleiste, solange das Mobil-Menü offen ist (Scroll-Lock
   setzt scrollY auf 0, sonst verliert der Header seinen Hintergrund) */
/* .nohero mitgeschrieben, damit diese Regel gewinnt: .site-header.nohero
   steht weiter unten in der Datei und ist gleich spezifisch – ohne die
   dritte Klasse bliebe deren backdrop-filter stehen. */
.site-header.nav-open,
.site-header.nav-open.nohero,
.site-header.nav-open.scrolled {
  background: var(--navy);
  box-shadow: none;
  /* Entscheidend, nicht Kosmetik: ein backdrop-filter am Header macht ihn
     zum Bezugsrahmen fuer alles, was darin fixed liegt – die Menue-Schublade
     (.nav-clip) waere dann auf die Kopfzeilenhoehe eingesperrt statt ueber
     den Bildschirm zu gehen. Auf der Startseite kommt der Filter von
     .scrolled und wird beim Oeffnen abgeraeumt; auf allen Seiten mit
     .nohero klebt er dauerhaft am Header. Deshalb hier fuer beide Faelle
     abschalten, solange das Menue offen ist. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
/* ESK-Logo als Bild: auf dunklem Kopf und Fuss die helle Fassung
   (Schwarz -> Weiss, Royalblau aufgehellt), auf hellen Flaechen das Original. */
.logo { display: flex; align-items: center; gap: 10px; line-height: 1; color: #fff; }
.logo-bild { display: block; height: 48px; width: auto; flex: none; }
.footer-logo .logo-bild { height: 46px; }
.nav-brand .logo-bild { height: 44px; }
/* Haeuser-Umschalter: beide Logos im Kopf, das gewaehlte hell, das andere
   gedimmt – ein Klick wechselt das Haus und bleibt auf derselben Seite. */
.haus-wahl { display: flex; align-items: center; gap: 14px; flex: none; }
.haus-wahl .haus { display: block; line-height: 0; opacity: .38; filter: saturate(.35); transition: opacity var(--transition), filter var(--transition); }
.haus-wahl .haus:hover, .haus-wahl .haus:focus-visible { opacity: .85; filter: none; }
.haus-wahl .haus.hier { opacity: 1; filter: none; }
.haus-wahl .haus-esk img { height: 40px; width: auto; }
.haus-wahl .haus-negrov img { height: 27px; width: auto; }
.haus-trenner { width: 1px; height: 30px; background: rgba(255,255,255,.2); flex: none; }
@media (max-width: 1180px) {
  .haus-wahl { gap: 10px; }
  .haus-wahl .haus-esk img { height: 32px; }
  .haus-wahl .haus-negrov img { height: 22px; }
}
.logo-mark { width: 42px; height: auto; display: block; flex: none; }
.logo-word { display: flex; flex-direction: column; gap: 3px; }
.logo-word small { font-size: .58rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.logo-word b { font-family: 'Playfair Display', Georgia, serif; font-size: 1.15rem; font-weight: 700; color: #fff; letter-spacing: .01em; }
/* Alt-Klassen für Footer-Kompatibilität */
.logo-main { font-size: 1.25rem; font-weight: 700; color: var(--white); letter-spacing: -.02em; }
.logo-sub   { font-size: .65rem; font-weight: 400; color: var(--rose); letter-spacing: .12em; text-transform: uppercase; }
/* Auf dem Desktop unsichtbarer Wrapper; mobil dient er als Clip-Rahmen,
   damit die eingefahrene Schublade nie ausserhalb des Viewports liegt
   (sonst laesst iOS beim Pinch-Zoom einen schwarzen Rand rechts zu) */
.nav-clip { display: contents; }
.main-nav { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
/* Marken-Block nur in der mobilen Menue-Schublade sichtbar */
.nav-brand { display: none; }
.main-nav a {
  color: rgba(255,255,255,.8);
  font-size: .9rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 6px;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
.main-nav a:hover { color: var(--white); background: rgba(255,255,255,.08); }
.nav-cta {
  background: var(--gold) !important;
  color: var(--white) !important;
  font-weight: 700 !important;
  padding: 9px 20px !important;
  border-radius: 8px !important;
  margin-left: 8px;
}
.nav-cta:hover { background: var(--gold2) !important; }

/* Schließen-X in der Menue-Schublade (nur mobil sichtbar) */

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  /* ueber der Menü-Schublade (.nav-clip, z 90), damit der Burger
     sichtbar bleibt und dort zum X morphen kann */
  position: relative;
  z-index: 95;
}
.burger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--surface);
  border-radius: 2px;
  transition: all .3s;
}

/* ─── HERO ─── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  /* Kraeftiger Schleier: der Himmel im Foto ist hell, ohne Abdunkeln
     saehe der Kopf nach Tag aus und der Text ginge unter. */
  background-image:
    linear-gradient(180deg, rgba(11,13,18,.6) 0%, rgba(11,13,18,0) 28%),
    linear-gradient(90deg, rgba(11,13,18,.93) 0%, rgba(11,13,18,.84) 48%, rgba(11,13,18,.72) 100%),
    url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=1920&q=80&auto=format');
  /* Unsplash-Foto, frei nutzbar: Porsche Panamera auf der Autobahn in der
     Daemmerung – dasselbe Bild wie beim Beispielfahrzeug 1001. */
  background-position: center 55%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 96px;
  padding-bottom: 96px;
}
.hero-eyebrow {
  color: var(--rose);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.hero-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 20px;
}
.hero-sub {
  color: rgba(255,255,255,.78);
  font-size: 1.05rem;
  max-width: 720px;
  margin-bottom: 36px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* "Über uns" steht über "Aktuelle Fahrzeuge" – im HTML kommt Fahrzeuge zuerst
   (wegen der Sprungmarken), die Anzeige dreht der Flex-order. */
.sec-swap { display: flex; flex-direction: column; }
.sec-swap #ueber-uns { order: -1; }
/* Navbar-Reihenfolge: Über uns · Fahrzeuge · Leistungen · Ankauf ·
   Finanzierung · Mietwagen · Kontakt · CTA. Im HTML stehen die Links anders,
   die Anzeige dreht der Flex-order. Auf der echten Domain fehlen Finanzierung
   und Mietwagen (entfernt die _middleware.js), sonst ist es dieselbe Reihenfolge –
   Leistungen und Ankauf waren dort frueher getauscht, das ist bewusst weg. */
.main-nav a[href$="#ueber-uns"]        { order: 1; }
/* Auf pages.dev fuehrt "Fahrzeuge" auf die eigene Seite – der Punkt darf
   deshalb nicht an seiner Reihenfolge verlieren. */
.main-nav a[href$="#fahrzeuge"],
.main-nav a[href$="/fahrzeuge"]        { order: 2; }
.main-nav a[href$="#leistungen"]       { order: 3; }
.main-nav a[href$="ankauf.html"]       { order: 4; }
.main-nav a[href$="finanzierung.html"] { order: 5; }
/* Die Mietwagen-Fahrzeugseiten verweisen auf die kurze Adresse /mietwagen –
   ohne die zweite Zeile faellt der Punkt auf order 0 und springt an den
   Anfang der Leiste. */
.main-nav a[href$="mietwagen.html"],
.main-nav a[href$="/mietwagen"]        { order: 6; }
.main-nav a[href$="#kontakt"]          { order: 7; }
.main-nav .nav-sprache                 { order: 8; }
.main-nav .nav-cta                     { order: 8; }

/* ─── Sprachumschalter DE EN ───
   Setzt die Middleware direkt vor "Jetzt anrufen" ein (functions/_sprache.js).
   So zurueckhaltend wie moeglich: zwei kleine Kuerzel ohne Rand und ohne
   Flaeche, die gewaehlte Sprache hell, die andere gedimmt. Eigene Regeln fuer
   die Links, weil ".main-nav a" sonst Polster und Groesse der Menuepunkte
   vererbt. */
.nav-sprache { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.main-nav .nav-sprache a {
  padding: 4px 5px; border-radius: 0; background: none;
  font-size: .7rem; font-weight: 600; letter-spacing: .08em; line-height: 1;
  color: rgba(255,255,255,.42);
}
.main-nav .nav-sprache a:hover { color: rgba(255,255,255,.85); background: none; }
.main-nav .nav-sprache a.hier { color: #fff; background: none; }
/* Rechtstexte auf Englisch: Hinweis, dass die deutsche Fassung gilt. */
.legal-sprache {
  margin: -6px 0 18px; padding: 10px 14px; border-radius: 8px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--muted); font-size: .86rem;
}
.main-nav .nav-brand                   { order: 9; }

/* ─── Zentrierte Menuezeile ───
   Zentriert wird ueber zwei automatische Raender statt ueber
   justify-content: der freie Platz verteilt sich damit gleichmaessig links
   und rechts von der Linkgruppe – zwischen Logo und Anrufknopf, die beide
   an ihrem Platz bleiben. Ein zentriertes justify-content koennte das
   nicht, weil der Knopf Teil derselben Zeile ist.

   Nur ab 769 px: darunter ist die Leiste eine Schublade, dort waeren die
   Raender sinnlos. */
@media (min-width: 769px) {
  .main-nav { flex: 1 1 auto; }
  .main-nav > a:first-of-type { margin-left: auto; }
  .main-nav .nav-cta { margin-left: auto; }
  /* Mit Sprachumschalter schiebt er den Anrufknopf nach rechts und haelt
     selbst etwas Abstand davon. */
  .main-nav .nav-sprache { margin-left: auto; }
  .main-nav .nav-sprache + .nav-cta { margin-left: 18px; }
}

.scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.4);
  animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce { 0%,100%{ transform: translateX(-50%) translateY(0); } 50%{ transform: translateX(-50%) translateY(8px); } }

/* ─── SECTIONS ─── */
.section { padding: 60px 0 96px; }
.section-dark { background: var(--navy-tief); }
.section-light { background: var(--off); }

/* Fixierter Parallax-Hintergrund (Bild bleibt beim Scrollen stehen) */
.section-fixed-bg {
  position: relative;
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
#leistungen {
  background-image:
    linear-gradient(rgba(11,13,18,.74), rgba(11,13,18,.86)),
    url('https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?w=1600&q=80&auto=format&fit=crop');
  background-position: center 30%;
}

.section-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: 12px;
}
.section-label.light { color: var(--rose); }
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 20px;
}
.section-title.light { color: var(--white); }
/* Das "&" in Playfair ist sehr verschnörkelt – hier bewusst schlicht halten. */
.section-title .amp-plain { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: .78em; }
.section-intro { max-width: 560px; color: var(--muted); margin-bottom: 48px; font-size: 1.05rem; }
.section-intro.light { color: rgba(255,255,255,.65); }

/* ─── TWO COL ─── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* ─── ÜBER UNS ─── */
.col-text p { margin-bottom: 16px; }
.check-list {
  list-style: none;
  margin: 24px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.check-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: .95rem;
  font-weight: 500;
}
.check-list li::before {
  content: '';
  width: 18px; height: 18px;
  flex-shrink: 0;
  background: var(--gold);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.about-card {
  background: var(--surface2);
  color: var(--white);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.about-icon {
  width: 72px; height: 72px;
  background: rgba(var(--marke-rgb),.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--rose);
}
.about-card-title { font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: 8px; }
.about-card-addr { color: rgba(255,255,255,.6); font-size: .9rem; line-height: 1.8; }
.about-card-addr a { color: var(--rose); font-weight: 600; }
.about-card-addr a:hover { color: var(--akzent2); }

/* ─── FAHRZEUGE / MOBILE.DE ─── */
.mobilede-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.mobilede-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 40px;
}
.mobilede-logo-wrap { margin-bottom: 20px; }
.mobilede-icon { height: 30px; }
.mobilede-card h3 { color: var(--white); font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; }
.mobilede-card p { color: rgba(255,255,255,.6); margin-bottom: 28px; font-size: .95rem; }
.mobilede-stats {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
}
.stat { text-align: center; }
.stat-num { display: block; font-size: 1.5rem; font-weight: 700; color: var(--rose); }
.stat-label { font-size: .75rem; color: rgba(255,255,255,.5); }

.mobilede-features { display: flex; flex-direction: column; gap: 20px; }
.feature-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.feature-icon {
  width: 40px; height: 40px;
  background: rgba(var(--marke-rgb),.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rose);
  flex-shrink: 0;
}
.feature-item strong { color: var(--white); display: block; margin-bottom: 2px; font-size: .95rem; }
.feature-item p { color: rgba(255,255,255,.5); font-size: .85rem; margin: 0; }

/* ─── LEISTUNGEN ─── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 36px;
}
.service-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 20px 20px;
  transition: box-shadow var(--transition), transform var(--transition);
  /* Flex-Spalte, damit der weiterführende Link per margin-top:auto nach unten
     rutscht. Die Karten sind als Grid-Elemente ohnehin gleich hoch – dadurch
     stehen die Links aller Karten auf derselben Höhe, egal wie lang der Text
     darüber ist. */
  display: flex;
  flex-direction: column;
}
.service-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
/* Kompakter als zuvor: das Zeichen kleiner, weniger Polster, engere
   Zeilen. Vier Karten nebeneinander standen sonst als hohe weisse Flaechen
   da, in denen wenig steht. */
.service-icon {
  width: 42px; height: 42px;
  background: rgba(var(--marke-rgb),.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--akzent);
  margin-bottom: 14px;
}
.service-icon svg { width: 22px; height: 22px; }
.service-card h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.service-card p { font-size: .87rem; line-height: 1.55; }
.service-card .local-link { font-size: .82rem; }

/* ─── BEWERTUNGEN ─── */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
  margin-bottom: 48px;
}
.review-card {
  background: var(--karte-hell);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stars { color: var(--akzent); font-size: 1rem; letter-spacing: 2px; }
.review-card p { font-size: .9rem; line-height: 1.65; flex: 1; font-style: italic; }
.reviewer { font-weight: 600; font-size: .85rem; color: var(--text); }
.review-source {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--akzent);
}
.rating-summary {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.rating-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rating-logo { width: 24px; height: 24px; }
.mobilede-pill, .autoscout-pill {
  width: 30px; height: 30px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .75rem; color: white;
}
.mobilede-pill { background: #005ca9; }
.autoscout-pill { background: #ff6b00; }
.rating-item strong { display: block; font-size: 1.05rem; color: var(--text); }
.rating-item span { font-size: .8rem; color: var(--muted); }

/* ─── KONTAKT ─── */
.kontakt-grid { gap: 72px; align-items: start; }
/* Ankauf-Seite: Formular breiter, Felder etwas kompakter & luftiger verteilt */
/* Der Ankauf hatte neun kurze Felder in Zweierreihen – dadurch wurde das
   Formular sehr hoch, waehrend links unter dem kurzen Text ein grosses Loch
   blieb. Jetzt liegen alle Felder in EINEM Raster mit drei Spalten: die
   Zweierreihen loesen sich per display:contents auf, ihre Felder wandern
   direkt ins Raster des Formulars. Das Formular wird rund ein Drittel
   flacher und beide Spalten sind ungefaehr gleich hoch. */
.ankauf-page .kontakt-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 48px; align-items: center; }
.ankauf-page .contact-form {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 18px; padding: 30px 32px;
}
.ankauf-page .form-row { display: contents; }
.ankauf-page .form-field { margin-bottom: 13px; min-width: 0; }
/* Freitext, Titel, Knopf und Hinweis ueber die volle Breite. */
.ankauf-page .form-field:has(textarea),
.ankauf-page .form-title,
.ankauf-page .form-actions,
.ankauf-page .form-consent,
.ankauf-page .hp-field { grid-column: 1 / -1; }
.ankauf-page .form-field label { font-size: .78rem; margin-bottom: 5px; }
.ankauf-page .form-field input,
.ankauf-page .form-field select,
.ankauf-page .form-field textarea { padding: 10px 12px; font-size: .9rem; }
.ankauf-page .form-field textarea { min-height: 84px; }
.ankauf-page .form-title { margin-bottom: 16px; }

@media (max-width: 1000px) { .ankauf-page .contact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .ankauf-page .kontakt-grid { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 560px)  { .ankauf-page .contact-form { grid-template-columns: 1fr; } }
.contact-info { display: flex; flex-direction: column; gap: 28px; margin: 32px 0 40px; }
.contact-item { display: flex; gap: 16px; align-items: flex-start; }
.contact-item svg { color: var(--akzent); flex-shrink: 0; margin-top: 2px; }
.contact-item strong { display: block; color: var(--text); font-size: .9rem; margin-bottom: 4px; }
.contact-item p, .contact-item a { color: var(--muted); font-size: .95rem; }
.contact-item a:hover { color: var(--akzent); }

.hours-table { border-collapse: collapse; }
.hours-table td { padding: 3px 20px 3px 0; font-size: .9rem; color: var(--muted); }
.hours-table td:first-child { color: var(--text); font-weight: 500; }

.kontakt-map { margin-top: 48px; }
.map-placeholder {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.map-img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
  border: 0;
  transition: transform .6s ease;
}
.map-placeholder:hover .map-img { transform: scale(1.04); }
.map-open {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--gold);
  color: var(--white);
  font-size: .9rem;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: background var(--transition), transform var(--transition);
}
.map-open:hover { background: var(--gold2); transform: translateY(-2px); }
.map-open svg { color: var(--white); }

/* ─── KONTAKTFORMULAR ─── */
.contact-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow);
}
/* Im Kontakt-Grid füllt das Formular die rechte Spalte */
.kontakt-grid .contact-form { margin: 0; }
.form-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 6px; }
.form-sub { color: var(--muted); font-size: .9rem; margin-bottom: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { margin-bottom: 18px; display: flex; flex-direction: column; }
.form-field label { font-size: .85rem; font-weight: 600; margin-bottom: 7px; color: var(--text); }
.form-field input,
.form-field select,
.form-field textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--feld-rand);
  border-radius: 8px;
  background: var(--feld);
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field select { cursor: pointer; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(var(--akzent-rgb),.22);
}
.form-field textarea { resize: vertical; min-height: 130px; }
.hp-field { display: none !important; }
.form-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.form-status { font-size: .92rem; font-weight: 500; margin: 0; }
.form-status.success { color: #1d7a4d; }
.form-status.error   { color: #f28b82; }
#cf-submit:disabled { opacity: .6; cursor: not-allowed; }
.form-consent { margin: 16px 0 0; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.form-consent a { color: var(--akzent); text-decoration: underline; }
.form-consent a:hover { color: var(--akzent2); }
/* Telefon und WhatsApp stehen als Paar zusammen. Der WhatsApp-Hinweis war
   vorher ein einzelner Satz darunter und wirkte verloren. */
.ankauf-contact { margin-top: 26px; display: flex; flex-direction: column; gap: 20px; }
/* Landing-Teaser: klickbares Bild, das auf /ankauf verweist */
.about-photo.ankauf-photo { position: relative; display: block; overflow: hidden; text-decoration: none; }
.ankauf-photo img { transition: transform .4s cubic-bezier(.2,.8,.3,1); }
/* Das Ankauf-Foto nutzt dieselben Maße wie das "Über uns"-Foto: volle
   Spaltenbreite, 4:3 (siehe .about-photo img). Das Bild ist selbst schon exakt
   4:3 auf Max zugeschnitten, daher wird nichts weggeschnitten. */
.ankauf-photo:hover img, .ankauf-photo:focus-visible img { transform: scale(1.04); }
.ankauf-photo-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; color: #fff; font-weight: 600; font-size: .95rem; background: linear-gradient(transparent, rgba(11,13,18,.82)); }
.ankauf-photo:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ─── ÜBER-UNS FOTO ─── */
.about-photo { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.about-photo img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
/* Das Werkstatt-Foto ist hochkant (865x1200) und wird im 4:3-Rahmen auf 54 %
   seiner Höhe beschnitten. Mittig zentriert liegt der Ausschnitt bei 23–77 %
   und kappt genau die Köpfe. 22 % zieht ihn nach oben – derselbe Wert, der auf
   der Startseite für dasselbe Foto schon benutzt wird (.gallery-item--faces). */
.about-photo--faces img { object-position: center 22%; }

/* ─── FINANZIERUNGSRECHNER ─── */
/* minmax(0, 1fr) statt 1fr: die Zahlenfelder bringen eine eigene
   Mindestbreite mit (der Browser rechnet mit rund 20 Zeichen). Mit dem
   blossen 1fr wuerde das Raster darauf aufgehen und die Karte am Telefon
   ueber den Bildschirmrand hinauslaufen. */
.fin-calc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 44px; align-items: stretch; }
.fin-inputs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow);
}
.fin-inputs .form-field { margin-bottom: 0; }
/* Schieberegler unter dem jeweiligen Feld – in der Hausfarbe, sonst
   unveraendert: ein selbstgebauter Regler sieht auf jedem System anders
   aus und laesst sich schlechter bedienen als der des Systems. */
.fin-schieber {
  -webkit-appearance: auto; appearance: auto;
  width: 100%; margin: 10px 0 0; padding: 0; accent-color: var(--akzent); cursor: pointer;
}
.fin-anteil { margin: 6px 0 0; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Was die Zahlen bedeuten, unter den Feldern ueber die volle Kartenbreite.
   Vorher endete die Karte nach vier Feldern und stand halb leer neben dem
   Ergebnis. */
.fin-hinweise {
  grid-column: 1 / -1; list-style: none; margin: 4px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.fin-hinweise li {
  position: relative; padding-left: 20px; font-size: .84rem; color: var(--muted); line-height: 1.5;
}
.fin-hinweise li::before { content: "\2713"; position: absolute; left: 0; color: var(--akzent); font-weight: 700; }
.fin-result {
  background: var(--surface2); color: #fff; border-radius: var(--radius);
  padding: 32px; display: flex; flex-direction: column; gap: 4px;
}
.fin-result-label { color: rgba(255,255,255,.7); font-size: .9rem; margin: 0; }
.fin-rate-big {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 3.1rem); line-height: 1; color: #fff; margin: 0 0 6px;
  font-variant-numeric: tabular-nums;
}
.fin-rate-big span { color: var(--rose); }
.fin-detail { margin: 14px 0 0; display: flex; flex-direction: column; gap: 11px; border-top: 1px solid rgba(255,255,255,.15); padding-top: 16px; }
.fin-detail > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .92rem; }
.fin-detail dt { color: rgba(255,255,255,.7); margin: 0; }
.fin-detail dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.fin-cta { margin-top: 22px; align-self: flex-start; }
.fin-legal { color: var(--muted); font-size: .78rem; line-height: 1.6; margin-top: 24px; max-width: 820px; }

/* Der Finanzierung-Teaser auf der Startseite zeigt rechts ein Foto in
   derselben Form wie das Ankauf-Foto darüber (.about-photo: volle
   Spaltenbreite, 4:3, gleicher Radius/Schatten). Die Bildspalte ist hier
   bewusst breiter als die Textspalte – der Text ist kürzer als beim Ankauf
   und braucht die Hälfte nicht. Gleiche Spezifität wie .two-col, steht aber
   davor, deshalb greift die 1-Spalten-Regel im Handy-Breakpoint weiterhin. */
.fin-teaser { grid-template-columns: 1fr 1.35fr; }
.fin-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.fin-steps li { display: flex; gap: 13px; align-items: flex-start; }
.fin-step-num {
  flex: none; width: 27px; height: 27px; border-radius: 50%;
  background: var(--gold); color: #fff; font-weight: 700; font-size: .82rem;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.fin-steps strong { display: block; font-size: .9rem; color: var(--text); margin-bottom: 3px; }
.fin-steps p { margin: 0; font-size: .84rem; color: var(--muted); line-height: 1.55; }
@media (max-width: 760px) {
  .fin-calc { grid-template-columns: minmax(0, 1fr); }
}
/* Am Telefon steht jedes Feld fuer sich: nebeneinander blieben von
   "Fahrzeugpreis" und "Anzahlung" je gut 120 px – zu wenig fuer Beschriftung,
   Zahl und Schieberegler darunter. */
@media (max-width: 620px) {
  .fin-inputs { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px; }
  .fin-result { padding: 24px; }
}
.fin-inputs input, .fin-inputs select { min-width: 0; }

/* ─── BEWERTUNGEN ─── */
.rating-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 30px 36px; margin-top: 44px;
}
.rating-score { display: flex; align-items: center; gap: 18px; }
.rating-google { flex: none; }
.rating-text { display: flex; flex-direction: column; gap: 5px; }
.rating-topline { display: flex; align-items: center; gap: 14px; }
.rating-num { font-family: 'Playfair Display', Georgia, serif; font-size: 2.5rem; font-weight: 700; line-height: 1; color: var(--text); }
.rating-count { font-size: .9rem; color: var(--muted); }
.stars-visual { position: relative; display: inline-block; font-size: 1.35rem; letter-spacing: 3px; line-height: 1; }
.stars-bg { color: var(--border); }
.stars-fg { position: absolute; left: 0; top: 0; color: var(--akzent); overflow: hidden; white-space: nowrap; }
.rating-cta { flex: none; }
@media (max-width: 620px) {
  .rating-hero { flex-direction: column; align-items: flex-start; padding: 26px 24px; }
}
/* Google-Bewertung als Abschnitts-Headline: mittig, flach, minimalistisch */
#bewertungen { padding-top: 48px; padding-bottom: 60px; }
/* Bewertungs-Bereich etwas breiter als der Standard-Container, damit 4 Karten
   nebeneinander komfortabel Platz haben. */
#bewertungen .container { max-width: 1320px; }
#bewertungen .section-label { text-align: center; }
.rating-headline {
  display: flex; align-items: center; width: fit-content; max-width: 100%;
  border: 1px solid var(--feld-rand); border-radius: 999px;
  background: var(--karte-hell);
  padding: 9px 20px; margin: 4px auto 18px;
}
.rating-headline .rating-score { align-items: center; gap: 12px; }
.rating-headline .rating-google { width: 26px; height: 26px; }
/* eine flache Zeile statt gestapelt */
.rating-headline .rating-text { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
.rating-headline .rating-num { font-size: 1.5rem; }
.rating-headline .stars-visual { font-size: 1.05rem; letter-spacing: 2px; }
.rating-headline .rating-count { font-size: .82rem; }
.rating-headline .rating-topline { gap: 10px; flex-wrap: nowrap; }
.reviews-carousel { margin-top: 18px; }
.rating-cta-wrap { margin-top: 24px; }
/* CTA mittig unter dem Karussell */
.rating-cta-wrap { text-align: center; margin-top: 32px; }
.reviews-carousel { position: relative; margin-top: 26px; }
.reviews-track {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: 4px 2px 8px; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reviews-track::-webkit-scrollbar { display: none; }
.reviews-track .review-card { flex: 0 0 clamp(258px, 82%, 320px); scroll-snap-align: start; padding: 18px 20px; gap: 10px; }
/* Ab mittleren Bildschirmen genau 4 Karten nebeneinander (3 Lücken à 18px). */
@media (min-width: 880px) {
  .reviews-track .review-card { flex-basis: calc((100% - 54px) / 4); }
}
.reviews-track .review-avatar { width: 36px; height: 36px; font-size: 1rem; }
/* Text auf 6 Zeilen begrenzen -> gleichmäßige, etwas flachere Karten */
.reviews-track .review-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
  overflow: hidden; font-size: .89rem; line-height: 1.55;
}
.reviews-arrow, .fzs-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 1.6rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--shadow); transition: background .2s ease, transform .2s ease;
}
.reviews-arrow:hover, .fzs-arrow:hover { background: var(--surface2); transform: translateY(-50%) scale(1.06); }
.reviews-prev { left: -23px; }
.reviews-next { right: -23px; }
.reviews-arrow[hidden], .fzs-arrow[hidden] { display: none; }
@media (max-width: 720px) { .reviews-arrow, .fzs-arrow { display: none; } }
.review-card {
  background: var(--karte-hell); border: 1px solid var(--feld-rand); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px 22px; display: flex; flex-direction: column; gap: 11px;
}
.review-head { display: flex; align-items: center; gap: 12px; }
.review-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 1.05rem; line-height: 1;
}
.review-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; }
.review-name { font-weight: 600; font-size: .92rem; color: var(--text); }
.review-date { font-size: .78rem; color: var(--muted); }
.review-g { flex: none; opacity: .9; }
.review-stars { color: var(--akzent); font-size: 1rem; letter-spacing: 2px; line-height: 1; }
.review-stars .star-empty { color: var(--border); }
.review-text { color: var(--muted); font-size: .92rem; line-height: 1.6; margin: 0; }
.review-card[hidden] { display: none; }
/* ESK: Platzhalter-Bewertungen sind als solche erkennbar, bis echte da sind. */
.review-beispiel { display: inline-block; margin-left: 4px; padding: 1px 6px; border: 1px solid currentColor; border-radius: 4px;
  font-size: .6rem; font-weight: 700; font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--akzent); vertical-align: middle; }
.reviews-hinweis { margin-top: 14px; text-align: center; font-size: .8rem; color: var(--muted); }
.reviews-more { text-align: center; margin-top: 30px; }
@media (max-width: 900px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .reviews-grid { grid-template-columns: 1fr; } }

/* Schwebender WhatsApp-Kontaktbutton (unten rechts) — Puls-Ring + Hover-Tooltip */
.wa-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 150;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(145deg, #2ce16f, #1fb457);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(37,211,102,.42), 0 3px 10px rgba(0,0,0,.18);
  text-decoration: none;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease;
}
.wa-float:hover, .wa-float:focus-visible {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 16px 34px rgba(37,211,102,.55), 0 4px 12px rgba(0,0,0,.22);
  color: #fff; outline: none;
}
.wa-float-glyph { display: block; width: 34px; height: 34px; position: relative; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
/* Tooltip, der beim Hover nach links ausfährt */
.wa-float-tip {
  position: absolute; right: 74px; top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: var(--navy); color: #fff;
  font-size: .86rem; font-weight: 600; white-space: nowrap;
  padding: 9px 15px; border-radius: 11px;
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .22s cubic-bezier(.2,.8,.3,1);
}
.wa-float-tip::after {
  content: ''; position: absolute; right: -5px; top: 50%;
  width: 11px; height: 11px; background: inherit;
  transform: translateY(-50%) rotate(45deg); border-radius: 2px;
}
.wa-float:hover .wa-float-tip, .wa-float:focus-visible .wa-float-tip {
  opacity: 1; transform: translateY(-50%) translateX(0);
}
@media (max-width: 620px) {
  .wa-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .wa-float-glyph { width: 32px; height: 32px; }
  .wa-float-tip { display: none; }
}

/* ─── Fahrzeug-Detailseite (/fahrzeug/{id}) ─── */
.fz-page { padding-top: 112px; padding-bottom: 72px; }
/* Breiter als der uebrige Inhalt, aber nicht ueber die ganze Breite wie die
   Auslage: Foto und Angaben bekommen Luft, die Zeilen im Text darunter
   bleiben aber lesbar lang. */
.fz-page > .container {
  max-width: 1440px;
  padding-left: clamp(24px, 3vw, 48px);
  padding-right: clamp(24px, 3vw, 48px);
}
.fz-crumb { font-size: .85rem; color: var(--muted); margin-bottom: 22px; }
.fz-crumb a { color: var(--muted); }
.fz-crumb a:hover { color: var(--akzent); }
.fz-crumb b { color: var(--text); font-weight: 600; }
.fz-crumb span { margin: 0 6px; opacity: .55; }
.fz-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 40px; align-items: start; }
.fz-main { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); background: var(--surface2); display: block; }
.fz-noimg { display: flex; align-items: center; justify-content: center; color: var(--muted); border: 1px solid var(--border); }
/* Die Vorschaureihe schliesst buendig mit dem grossen Bild ab: auto-fit
   legt so viele Spalten an, wie bei mindestens 88 px hineinpassen, und
   dehnt die belegten auf die volle Breite. Bei den ueblichen zwanzig bis
   dreissig Fotos ergibt das kleine Bilder ueber die ganze Spalte; bei nur
   drei oder vier werden sie entsprechend groesser – dafuer steht die Reihe
   nie ausgefranst da. */
.fz-thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 10px; margin-top: 12px; }
.fz-thumb { padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; background: none; aspect-ratio: 4/3; }
.fz-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fz-thumb.active { border-color: var(--akzent); }
.fz-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.6rem, 3.2vw, 2.2rem); color: var(--text); line-height: 1.2; margin-bottom: 12px; }
.fz-price { font-size: 1.9rem; font-weight: 700; color: var(--akzent); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fz-vat { font-size: .82rem; color: var(--muted); margin: 6px 0 20px; }
.fz-info { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 26px 28px; position: sticky; top: 92px; }
/* Genauso auf den Fahrzeugseiten im Verkauf: die Eckdaten als heller Kasten
   statt als abgetrennter Bereich. */
/* minmax(0, 1fr) statt 1fr: sonst zieht der laengste Wert seine Spalte breit
   und quetscht die andere zusammen – bei einem Nutzfahrzeug brach dadurch
   "130 kW (177 PS)" auf zwei Zeilen um, obwohl im Kasten Platz war. So
   bleiben beide Spalten gleich breit, egal was drinsteht. */
.fz-specs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; margin: 20px 0 22px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px;
}
.fz-specs div { display: flex; flex-direction: column; gap: 3px; }
/* In allen Datenblöcken traegt die Bezeichnung mehr Gewicht als der Wert –
   so liest sich der Block als Liste von Merkmalen. Betrifft nur Daten, nicht
   die Preise: dort ist der Wert die Aussage. */
/* Die Bezeichnung steht fast schwarz da, nicht grau: sie ist der Anker, an
   dem das Auge die Zeile findet. Vom Wert unterscheidet sie sich ueber
   Groesse, Versalien und Gewicht – dafuer braucht es keine blasse Farbe. */
.fz-specs i { font-style: normal; font-weight: 700; color: var(--text); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.fz-specs b { color: var(--text); font-size: 1rem; font-weight: 400; }
/* Auf den Mietwagen-Fahrzeugseiten stehen Bezeichnung und Wert als <dt>/<dd>.
   Die Bezeichnung traegt mehr Gewicht als der Wert – so liest sich der Block
   als Liste von Merkmalen. Der Standardeinzug von <dd> muss dabei weg. */
.fz-specs dt {
  font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text);
}
.fz-specs dd { margin: 0; font-size: 1rem; font-weight: 400; color: var(--text); }
/* Vier Stichworte unter dem Fahrzeugnamen. Zwischenstationen waren Pillen
   (ausgefranste Kante bei unterschiedlich langen Woertern) und ein weisser
   Kasten (zwei Karten untereinander im selben Infokasten – zu viel Rahmen
   fuer vier Woerter). Jetzt duenn und klein direkt unter dem Titel, ohne
   eigenen Hintergrund: die Zeile gehoert zum Namen. Die vollstaendige
   Ausstattung steht unten im eigenen Block. */
.fz-stich {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 14px;
}
.fz-stich li {
  display: flex; align-items: center; gap: 5px;
  font-size: .78rem; font-weight: 500; color: var(--muted); line-height: 1.5;
}
.fz-stich li::before { content: "\2713"; color: var(--akzent); font-weight: 700; font-size: .76rem; }

.fz-actions { display: flex; flex-direction: column; gap: 10px; }
.fz-actions > .btn { width: 100%; }
.fz-actions .btn { justify-content: center; }
/* Telefon und mobile.de bewusst als leise Textzeile statt als weitere
   Schaltflaechen: vier gleich gewichtete Buttons wirken ueberladen. So bleibt
   eine klare Rangfolge – Probefahrt, dann Anfrage, dann die Nebenwege.
   Die Rufnummer steht ausgeschrieben, das ist nuetzlicher als "Anrufen". */
.fz-quiet {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px 12px; margin: 14px 0 0; font-size: .86rem; color: var(--muted);
}
.fz-quiet a {
  color: var(--muted); text-decoration: none;
  border-bottom: 1px solid var(--border); transition: var(--transition);
}
.fz-quiet a:hover { color: var(--akzent); border-bottom-color: currentColor; }
/* Der Teilen-Knopf sieht aus wie die Links daneben – er tut ja auch etwas
   Aehnliches. Ein <button> muss er sein, weil er nirgendwo hinfuehrt. */
/* Klein und ohne Wort: ein Zeichen in der leisen Zeile, das beim Kopieren
   kurz zum Haekchen wird. Ein <button> muss es sein, weil es nirgendwo
   hinfuehrt; die Beschriftung traegt es fuer Vorlesegeraete im aria-label. */
.fz-teilen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; cursor: pointer;
  color: var(--muted); background: none;
  border: 1px solid var(--border); border-radius: 7px;
  transition: var(--transition);
}
.fz-teilen svg { width: 14px; height: 14px; }
.fz-teilen .fz-teilen-an { display: none; }
.fz-teilen:hover { color: var(--akzent); border-color: var(--akzent); }
.fz-teilen.geschafft { color: #1d7a4d; border-color: #1d7a4d; }
.fz-teilen.geschafft .fz-teilen-aus { display: none; }
.fz-teilen.geschafft .fz-teilen-an { display: block; }
.btn-sm { padding: 11px 16px; font-size: .9rem; }
/* Leiser Knopf: schwarz statt bordeaux, normal statt fett. Fuer Wege, die
   danebenstehen duerfen – "nichts dabei?" ist kein Angebot, sondern ein
   Ausweg. */
.btn-leise {
  background: transparent; color: var(--text); font-weight: 500;
  border: 1px solid var(--border);
}
.btn-leise:hover { border-color: var(--text); background: rgba(255,255,255,.06); transform: none; }
.btn-outline-red { border: 2px solid var(--akzent); color: var(--akzent); background: transparent; }
.btn-outline-red:hover { background: var(--akzent); color: var(--navy); transform: translateY(-1px); }
/* Auf den Fahrzeugseiten stehen die beiden Knoepfe nebeneinander: der eine
   fuellt sich beim Zeigen, der andere leert sich. So gehoeren sie sichtbar
   zusammen, ohne gleich auszusehen. */
.fz-actions .btn-primary:hover {
  background: transparent; color: var(--akzent); box-shadow: inset 0 0 0 2px var(--gold);
}
/* Die Ausstattung sitzt im selben Kasten wie "Gut zu wissen" auf den
   Mietwagenseiten (.mw-terms): weiss mit Rand, die Ueberschrift darueber
   statt darin. Hier drei Spalten statt zwei – es sind kurze Woerter. */
/* ul.fz-aus, nicht .fz-aus: .mw-terms steht weiter unten in der Datei und
   setzt zwei Spalten – mit dem Elementnamen ist die Reihenfolge egal. */
ul.fz-aus { grid-template-columns: repeat(3, 1fr); gap: 12px 26px; }
ul.fz-aus li { font-size: .9rem; padding-left: 22px; }
.fz-feat-count {
  font-size: .78rem; font-weight: 700; color: var(--akzent);
  background: rgba(var(--marke-rgb),.09); padding: 3px 11px; border-radius: 999px;
  margin-left: 8px; vertical-align: middle;
}
@media (max-width: 860px) { ul.fz-aus { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { ul.fz-aus { grid-template-columns: 1fr; } }

.fz-back { margin-top: 40px; }
.fz-back a { color: var(--muted); font-weight: 600; }
.fz-back a:hover { color: var(--akzent); }
/* Ähnliche Fahrzeuge (Empfehlungen unten auf der Detailseite) */
.fz-similar { margin-top: 48px; border-top: 1px solid var(--border); padding-top: 30px; }
.fz-similar h2 { font-size: 1.25rem; color: var(--text); margin-bottom: 20px; }
.fzs-carousel { position: relative; }
.fzs-track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: 4px 2px 8px; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fzs-track::-webkit-scrollbar { display: none; }
.fzs-track .fzs-card { flex: 0 0 clamp(220px, 72%, 262px); scroll-snap-align: start; }
.fzs-prev { left: -23px; }
.fzs-next { right: -23px; }
.fzs-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.fzs-card:hover, .fzs-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-lg); outline: none; }
.fzs-img { aspect-ratio: 16 / 10; background: #e7edf4; overflow: hidden; }
.fzs-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fzs-noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-size: .85rem; }
.fzs-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.fzs-title { font-size: .98rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.fzs-sub { font-size: .8rem; color: var(--muted); }
.fzs-price { font-size: 1.1rem; font-weight: 700; color: var(--akzent); margin-top: 4px; }
@media (max-width: 860px) {
  .fz-grid { grid-template-columns: 1fr; gap: 22px; }
  .fz-info { position: static; }

  /* ─── Fahrzeugseiten am Telefon ───
     Untereinander gelesen zaehlt eine andere Reihenfolge als nebeneinander:
     erst das Foto, dann Name, Preis und die beiden Knoepfe – das ist die
     Entscheidung. Alles Beschreibende (Stichworte, Eckdaten, Tarife) kommt
     darunter, wo man ohnehin weiterliest. Umgesetzt ueber die Reihenfolge
     im Flex-Fluss, das Markup bleibt fuer alle Breiten dasselbe. */
  .fz-thumbs { display: none; }
  .fz-offen { display: flex; flex-direction: column; }
  .fz-offen > .section-label     { order: 1; }
  .fz-offen > .fz-title          { order: 2; }
  .fz-offen > .fz-teil-preis,
  .fz-offen > .mw-tarife         { order: 3; }
  .fz-offen > .fz-vat            { order: 4; }
  .fz-offen > .fz-actions        { order: 5; }
  /* Die beiden Knoepfe teilen sich auch am Telefon eine Zeile – untereinander
     schoben sie alles Weitere aus dem Blick. 140 px reichen fuer die
     laengste Beschriftung ("Probefahrt vereinbaren" bricht dort auf zwei
     Zeilen, das ist in Ordnung und bleibt tippbar). */
  /* .fz-info mitgeschrieben: die Regel fuer breite Schirme (flex-basis
     190 px) steht weiter unten in der Datei und wuerde sonst gewinnen –
     bei 190 px passen zwei Knoepfe nicht nebeneinander und brechen um. */
  .fz-info.fz-offen .fz-actions .btn {
    flex: 1 1 140px; min-width: 0;
    padding: 11px 12px; font-size: .84rem;
    /* .btn haelt seine Beschriftung in einer Zeile – damit ist die kleinste
       moegliche Breite die des ganzen Textes, und zwei Knoepfe passen nie
       nebeneinander. Hier darf umgebrochen werden. */
    white-space: normal; text-align: center; line-height: 1.3;
  }
  .fz-offen > .fz-stich          { order: 6; margin: 0; justify-content: center; }
  .fz-offen > .fz-teil-daten,
  .fz-offen > .mw-detail-hinweis { order: 7; }

  /* Die Trennlinie gehoert jetzt an andere Stellen: ueber die Knoepfe und
     ueber den Block darunter, nicht mehr ueber die Eckdaten allein. */
  .fz-offen > .fz-teil-preis { border-top: 0; margin-top: 4px; padding-top: 0; }
  .fz-offen > .fz-actions { margin-top: 18px; padding-top: 18px; }
  .fz-offen > .fz-stich { padding-top: 18px; border-top: 1px solid var(--border); margin-top: 18px; }
  .fz-offen > .fz-teil-daten { margin-top: 16px; padding-top: 16px; }
  .fz-offen > .fz-stich + .fz-teil-daten { border-top: 0; margin-top: 4px; padding-top: 0; }
}
@media (max-width: 520px) {
  .fz-info { padding: 22px 20px 24px; }
}
.about-photo figcaption {
  background: var(--navy); color: rgba(255,255,255,.85);
  font-size: .85rem; padding: 12px 16px; text-align: center; letter-spacing: .01em;
}

/* ─── NUTZFAHRZEUGE-BANNER ─── */
.banner {
  position: relative;
  padding: 150px 0;
  background:
    linear-gradient(rgba(11,13,18,.72), rgba(var(--marke-tief-rgb),.62)),
    url('../images/mietwagen/beispiel-transporter.jpg') center/cover no-repeat fixed;
}
.banner-content { text-align: center; max-width: 720px; margin: 0 auto; }
.banner-content .btn { margin-top: 12px; }

/* ─── EINBLICKE / GALERIE ─── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 44px;
}
.gallery-item {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.gallery-item:hover img { transform: scale(1.06); }
/* Erstes Bild näher auf die Gesichter, leicht nach oben */
.gallery-item--faces img {
  object-position: center 22%;
  transform: scale(1.18);
  transform-origin: center 28%;
}
.gallery-item--faces:hover img { transform: scale(1.24); }
.gallery-item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 16px 14px;
  color: var(--white);
  font-size: .92rem;
  font-weight: 600;
  background: linear-gradient(to top, rgba(11,13,18,.82) 0%, rgba(11,13,18,0) 100%);
}

/* ─── ZAHLEN / FAKTEN ─── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.stat-box {
  text-align: center;
  padding: 32px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.stat-big {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--akzent);
}
.stat-big.stat-text { font-size: 2.6rem; display: flex; align-items: center; justify-content: center; gap: 6px; }
.stat-star {
  width: .85em;
  height: .85em;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linejoin: round;
  opacity: .9;
  flex: none;
  /* Playfair-Ziffern sitzen hoeher als die Zeilenmitte -> Stern auf die
     optische Mitte der 4,9 nach unten schieben (sonst wirkt er wie Potenz) */
  position: relative;
  top: .22em;
}
.stat-cap {
  display: block;
  margin-top: 12px;
  font-size: .95rem;
  color: var(--muted);
  letter-spacing: .01em;
}

/* ─── FAHRZEUG-GALERIE ─── */
/* Filter, Sortierung und Anzahl in EINER Zeile. Vorher standen die Filter
   oben und Sortierung/Anzahl in einer zweiten Leiste darunter – das kostete
   Hoehe, ohne mehr zu sagen. Alles etwas kleiner, damit es in eine Zeile passt. */
.veh-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 28px 0 20px; }
/* Die Leiste bleibt beim Scrollen unter der Kopfzeile stehen: bei vierzig
   Fahrzeugen muesste man sonst zum Filtern jedes Mal hochscrollen. Der
   Hintergrund gehoert dazu, sonst laufen die Karten sichtbar darunter durch;
   z-index unter der Kopfzeile (100), damit sie nicht darueberliegt.
   Etwas schmaler als zuvor: mit ausgeschriebener Anzahl ("41 Fahrzeuge")
   passte die Zeile sonst nicht mehr in einen Bildschirm und die Sortierung
   rutschte darunter. */
.veh-filters {
  position: sticky; top: 72px; z-index: 20;
  padding: 12px 0; margin: 16px 0 8px;
}
/* Solange zwei Kacheln nebeneinander stehen, bleibt die Leiste klebrig –
   dort ist sie zwei Zeilen hoch und nuetzt mehr, als sie verdeckt. Darunter
   laeuft die Auslage als Reihe zum Wischen; eine klebende Leiste haette
   dann die halbe Anzeige belegt, also scrollt sie dort mit. */
@media (max-width: 620px) {
  .veh-filters { position: static; }
}
.section-dark .veh-filters { background: var(--navy); }
.section-light .veh-filters { background: var(--surface2); }
.veh-filters select {
  font-family: inherit; font-size: .84rem; padding: 8px 10px; min-width: 118px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 8px;
  background: rgba(11,13,18,.6); color: #fff; cursor: pointer;
  color-scheme: dark; backdrop-filter: blur(6px);
}
.veh-filters select:focus { outline: none; border-color: var(--akzent2); box-shadow: 0 0 0 2px rgba(var(--marke-hell-rgb),.55); }
.veh-reset {
  font-family: inherit; font-size: .8rem; font-weight: 700; padding: 8px 12px; cursor: pointer;
  white-space: nowrap;
  background: rgba(11,13,18,.6); color: #fff;
  border: 1px solid rgba(255,255,255,.2); border-radius: 8px; transition: all var(--transition);
}
.veh-reset:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); color: #fff; }

.veh-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.veh-count { color: rgba(255,255,255,.6); font-size: .82rem; }
/* Rechts in der Zeile stehen Anzahl und Sortierung: der Filterblock endet
   mit "Zurücksetzen", danach schiebt der automatische Rand alles Weitere
   ans Ende. So gehoert optisch zusammen, was zusammengehoert. */
.veh-filters .veh-count { margin-left: auto; white-space: nowrap; }
/* Die Blaetterei sitzt genau in der Mitte der Leiste – und damit ueber der
   Mitte des Rasters darunter, senkrecht ueber der Blaetterei am Ende der
   Liste. Automatische Raender haetten sie nur zwischen Filter und Anzahl
   mittig gesetzt, das ist nicht dieselbe Mitte.
   Absolut heisst auch: sie nimmt keinen Platz in der Zeile ein und kann die
   Filter nicht umbrechen lassen. */
/* Kein "position: relative" hier – die Leiste ist bereits sticky, und eine
   zweite position-Angabe weiter unten in der Datei hat das ueberschrieben.
   Sticky ist selbst positioniert und reicht als Bezug fuer das absolute
   Kind. */
.veh-blatt-oben {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 50%; margin-top: -15px;
}
.veh-blatt-oben[hidden] { display: none; }
/* Ab hier stiesse sie an die Filter links – dann laeuft sie einfach in der
   Zeile mit, statt sich zu ueberlagern. */
@media (max-width: 1300px) {
  .veh-blatt-oben { position: static; transform: none; margin: 0 auto; }
}
.blatt-kurz { gap: 4px; }
.blatt-kurz .blatt-pfeil { min-width: 28px; width: 28px; height: 28px; padding: 0; font-size: 1rem; line-height: 1; }
.blatt-stand { font-size: .82rem; color: var(--muted); white-space: nowrap; padding: 0 2px; font-variant-numeric: tabular-nums; }
.blatt-stand b { color: var(--text); font-weight: 700; }
.veh-filters .veh-sort { flex: none; }

.veh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }

/* Am Telefon liegen die Fahrzeuge auf der Startseite nebeneinander und
   werden gewischt – wie die Bewertungen weiter unten. Neun Kacheln
   untereinander sind dort ein langer Weg nach unten, und wer nur schauen
   will, scrollt daran vorbei. Rein ueber Scroll-Snap: das Wischen macht
   der Browser, kein Skript.

   Die Reihe laeuft bis an beide Bildschirmkanten (negative Raender gegen
   das Polster des Containers), damit die naechste Kachel angeschnitten
   sichtbar ist – das ist der Hinweis, dass es seitwaerts weitergeht. */
/* Auf dem dunklen Grund der Startseite trägt die Mehrfachauswahl dieselbe
   Optik wie die Auswahlfelder daneben: dunkel mit heller Schrift. */
.section-dark .mehrfach-knopf {
  background: rgba(11,13,18,.6); color: #fff;
  border-color: rgba(255,255,255,.2); backdrop-filter: blur(6px);
  min-width: 118px; font-size: .84rem; padding: 8px 10px;
}
.section-dark .mehrfach-knopf:hover { border-color: rgba(255,255,255,.45); }
.section-dark .mehrfach.gewaehlt .mehrfach-knopf { border-color: var(--akzent2); color: #fff; }
.section-dark .mehrfach-pfeil { color: rgba(255,255,255,.6); }



@media (max-width: 620px) {
  #fahrzeuge .veh-grid {
    display: flex; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-left: -24px; margin-right: -24px;
    padding: 2px 24px 6px;
  }
  #fahrzeuge .veh-grid::-webkit-scrollbar { display: none; }
  #fahrzeuge .veh-card { flex: 0 0 78%; scroll-snap-align: start; }
  /* Die Mietflotte genauso – dieselbe Bewegung an beiden Stellen, damit man
     sie nur einmal lernt. Der helle Grund dort braucht keine eigenen
     Farbwerte, nur dieselbe Mechanik. */
  #flotte .mw-grid {
    display: flex; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-left: -16px; margin-right: -16px;
    padding: 2px 16px 6px;
  }
  #flotte .mw-grid::-webkit-scrollbar { display: none; }
  #flotte .mw-grid > * { flex: 0 0 78%; scroll-snap-align: start; }
  /* Etwas kompakter als am Rechner: auf dem Telefon soll neben der Kachel
     noch Seite zu sehen sein, nicht nur die Kachel. Flacheres Bild, engerer
     Rumpf, kleinere Eckdaten – die Angaben bleiben dieselben. */
  #fahrzeuge .veh-card-img { aspect-ratio: 21 / 9; }
  #fahrzeuge .veh-card-body { padding: 10px 12px 11px; }
  #fahrzeuge .veh-card-title { font-size: .88rem; margin-bottom: 6px; }
  #fahrzeuge .veh-specs { gap: 5px 8px; font-size: .68rem; margin-bottom: 8px; }
  #fahrzeuge .veh-specs i { font-size: .56rem; }
  #fahrzeuge .veh-card-foot { padding-top: 7px; }
  #fahrzeuge .veh-price { font-size: 1rem; }
  #fahrzeuge .veh-vat { font-size: .66rem; }
  #fahrzeuge .veh-detail-link { font-size: .78rem; }
}


.veh-card {
  background: var(--surface); border-radius: var(--radius); overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none; color: inherit;
}
.veh-card:hover, .veh-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-lg); outline: none; }
.veh-card-img { position: relative; aspect-ratio: 16 / 10; background: #e7edf4; overflow: hidden; }
.veh-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.veh-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #eff3f7; color: #c2c6cf; }
.veh-noimg svg { width: 56px; height: 56px; }
.veh-pricetag {
  position: absolute; top: 12px; left: 12px; background: #1d7a4d; color: #fff;
  font-size: .78rem; font-weight: 600; padding: 5px 12px; border-radius: 999px;
}
.veh-pricetag.inline { position: static; display: inline-block; vertical-align: middle; margin-left: 8px; }
/* Zwei Marken statt der alten Preisbewertung: "Neu" faellt in der Hausfarbe
   auf, "Beispiel" bleibt bewusst leise – es beschreibt die Demo, nicht das
   Fahrzeug. */
.veh-pricetag.neu { background: var(--gold); }
.veh-pricetag.beispiel { background: rgba(11,13,18,.62); font-weight: 500; }
.veh-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.veh-card-title { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 14px; line-height: 1.3; }
.veh-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; font-size: .85rem; color: var(--text); margin-bottom: 16px; }
/* Auch span: die Mietwagen-Karten (js/mietwagen.js) bauen ihre Eckdaten als
   <span><i>Label</i>Wert</span>. Ohne diese Regel stand dort "GETRIEBESchalt-
   getriebe" ohne Trennung – die Stapelung griff nur fuer div. */
.veh-specs div, .veh-specs span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.veh-specs i { font-style: normal; font-weight: 700; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.veh-specs b { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.veh-card-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.veh-price-wrap { display: flex; flex-direction: column; gap: 2px; }
.veh-price { font-size: 1.25rem; font-weight: 700; color: var(--akzent); }
.veh-vat { font-size: .72rem; color: var(--muted); line-height: 1.2; }
.veh-detail-link { font-size: .85rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
/* Kompaktere Kacheln in "Aktuelle Fahrzeuge" — Kachel flacher, Body gestaucht.
   Die Eckdaten-Tabelle sitzt kompakt und vertikal mittig im freien Raum. */
#fahrzeuge .veh-card-img,
.shop-liste .veh-card-img { aspect-ratio: 2 / 1; }
#fahrzeuge .veh-card-body,
.shop-liste .veh-card-body { padding: 11px 14px 12px; }
#fahrzeuge .veh-card-title,
.shop-liste .veh-card-title { font-size: .95rem; margin-bottom: 8px; line-height: 1.25; }
/* Eckdaten dreispaltig -> nur 2 Zeilen statt 3, Kachel wird flacher. Schrift
   und Abstände kleiner; lange Werte (Getriebe/Kraftstoff) sind gekürzt. */
#fahrzeuge .veh-specs,
.shop-liste .veh-specs { flex: 1 1 auto; align-content: center; grid-template-columns: repeat(3, 1fr); gap: 7px 10px; font-size: .72rem; margin-bottom: 10px; }
#fahrzeuge .veh-specs i,
.shop-liste .veh-specs i { font-size: .6rem; }
#fahrzeuge .veh-card-foot,
.shop-liste .veh-card-foot { padding-top: 8px; }
#fahrzeuge .veh-price,
.shop-liste .veh-price { font-size: 1.1rem; }

.veh-empty { grid-column: 1 / -1; color: rgba(255,255,255,.7); text-align: center; padding: 40px 0; }
.veh-empty a { color: var(--rose); text-decoration: underline; }
.veh-more { text-align: center; margin-top: 32px; }
.veh-more-btn { min-width: 280px; }
.veh-note { color: rgba(255,255,255,.45); font-size: .82rem; margin-top: 18px; font-style: italic; }
.veh-legal { color: rgba(255,255,255,.5); font-size: .72rem; line-height: 1.55; margin-top: 24px; max-width: none; }
/* Die beiden Schaltflaechen stehen untereinander statt nebeneinander: zuerst
   der gesamte Bestand, darunter der Wunschalarm als Antwort auf "nichts dabei".
   Der Abstand von 36px entspricht bewusst dem Abstand zwischen dem
   "Weitere Fahrzeuge"-Button und dem ersten Button hier (.veh-cta margin-top). */
.veh-cta { display: flex; flex-direction: column; align-items: center; gap: 36px; text-align: center; margin-top: 36px; }
/* Eigener Bestand und mobile.de stehen nebeneinander, der Suchauftrag
   darunter: zwei Wege zum selben Ziel, dann die Antwort auf "nichts dabei". */
.veh-cta-reihe { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ─── Shop-Seite (/fahrzeuge, nur pages.dev) ───
   Eine durchgehende Auslage: Kopf und Liste stehen auf demselben Grund, es
   gibt keine Sektionsgrenze dazwischen. Die Seite laeuft dabei ueber die
   ganze Bildschirmbreite – mit denselben Seitenraendern wie Kopf- und
   Fusszeile, damit die erste Kachel unter dem Logo beginnt. */
/* Der Grund gehoert der Seite, nicht den einzelnen Abschnitten: sonst
   blitzt an jeder Fuge zwischen Kopf und Liste das Weiss des Dokuments
   durch. */
body.shop-page { background: var(--off); }
.shop-kopf, .shop-liste { background: var(--off); }
.shop-kopf .container, .shop-liste .container {
  max-width: none;
  padding-left: clamp(24px, 4vw, 72px);
  padding-right: clamp(24px, 4vw, 72px);
}
/* Die feste Kopfzeile liegt ueber der Seite – ohne den Abstand steckt die
   Ueberschrift darunter. Derselbe Wert wie auf den Fahrzeugseiten. */
.shop-kopf { padding: 108px 0 4px; }
.shop-krume { font-size: .85rem; color: var(--muted); margin-bottom: 20px; }
.shop-krume a { color: var(--muted); }
.shop-krume a:hover { color: var(--akzent); }
.shop-krume span { margin: 0 7px; }
.shop-kopf h1 { margin-bottom: 0; }
/* Ueberschrift links, Herkunft der Fahrzeuge rechts – die Zeile gibt dem
   Kopf eine Kante, statt dass eine kurze Zeile allein im Raum steht. */
.shop-zeile {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.shop-quelle { margin: 0; font-size: .82rem; color: var(--muted); }

/* Schnellwahl nach Fahrzeugart: der Weg, den man in einem Laden zuerst
   geht – erst die Art, dann die Feinheiten. Die Zahl daneben zeigt, was es
   ueberhaupt gibt, und bleibt deshalb die des ganzen Bestands. */
.shop-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 18px 0 0; padding: 0;
}
.shop-chips[hidden] { display: none; }
.shop-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: .85rem; font-weight: 600; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 15px; cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.shop-chip span {
  font-size: .72rem; font-weight: 700; color: var(--muted);
  background: var(--surface2); border-radius: 999px; padding: 2px 7px;
  font-variant-numeric: tabular-nums;
}
.shop-chip:hover { border-color: var(--akzent); color: var(--akzent); }
.shop-chip.hier { background: var(--gold); border-color: var(--gold); color: #fff; }
.shop-chip.hier span { background: rgba(255,255,255,.2); color: #fff; }
/* Die Zeile ist hier die Ueberschrift der Seite und keine Beschriftung
   ueber einer Sektion – also eine Spur groesser. */
.shop-kopf .section-label { margin-bottom: 0; font-size: 1.02rem; letter-spacing: .13em; }

/* .section.shop-liste, nicht nur .shop-liste: die Regel fuer schmale
   Schirme setzt weiter unten in der Datei wieder ein Polster oben – auf dem
   Handy klaffte dadurch eine Luecke zwischen Ueberschrift und Filtern. */
.section.shop-liste { padding-top: 0; }
.shop-liste .veh-filters { background: var(--surface2); }
/* Etwas schmaler als sonst: die Blaetterei in der Mitte der Leiste braucht
   den Platz, und die Beschriftungen sind hier kurz. */
.shop-liste .veh-filters select { min-width: 96px; }
/* ─── Mehrfachauswahl (Marken) ─── */
.mehrfach { position: relative; }
.mehrfach-knopf {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: .84rem; color: var(--text);
  background: var(--feld); border: 1px solid var(--feld-rand); border-radius: 8px;
  padding: 8px 11px; min-width: 132px; cursor: pointer; text-align: left;
  transition: var(--transition);
}
.mehrfach-knopf:hover { border-color: var(--muted); }
.mehrfach-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mehrfach-pfeil { flex: none; color: var(--muted); transition: transform var(--transition); }
.mehrfach.offen .mehrfach-pfeil { transform: rotate(180deg); }
.mehrfach.gewaehlt .mehrfach-knopf { border-color: var(--akzent); color: var(--akzent); font-weight: 600; }
.mehrfach-tafel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 220px; max-height: 320px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px;
}
.mehrfach-tafel[hidden] { display: none; }
.mehrfach-zeile {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: 7px; font-size: .86rem; cursor: pointer;
}
.mehrfach-zeile:hover { background: var(--surface2); }
.mehrfach-zeile input { accent-color: var(--akzent); width: 15px; height: 15px; cursor: pointer; }
.mehrfach-alle {
  width: 100%; margin-top: 4px; padding: 8px; cursor: pointer;
  font-family: inherit; font-size: .8rem; font-weight: 600; color: var(--muted);
  background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0;
}
.mehrfach-alle:hover { color: var(--akzent); }

.shop-liste .veh-filters select,
.shop-liste .veh-reset {
  background: var(--surface); color: var(--text); border-color: var(--border);
  color-scheme: inherit; backdrop-filter: none;
}
/* In der Auslage ist "Zuruecksetzen" der einzige Knopf in der Leiste – dort
   darf er auch wie einer aussehen. Steht bewusst NACH der hellen Regel fuer
   Auswahlfelder und Knopf und ist eine Stufe spezifischer: die andere Regel
   fasst beide in einer Selektorenliste zusammen, und darauf ist kein
   Verlass, wenn nur eines von beiden anders aussehen soll. */
/* Preis und MwSt. sehen aus wie die Markenauswahl daneben: gleiche Hoehe,
   gleicher Innenabstand, gleicher Pfeil. Der Pfeil des Systems ist auf
   jedem Rechner ein anderer – deshalb abgeschaltet und derselbe Winkel als
   Hintergrundbild gesetzt wie im Knopf der Mehrfachauswahl. */
.shop-liste .veh-filters select {
  appearance: none; -webkit-appearance: none;
  min-width: 132px; padding: 8px 32px 8px 11px;
  background-color: var(--feld);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 13px;
}
.shop-liste .veh-filters select:hover { border-color: var(--muted); }

.shop-liste .veh-filters button.veh-reset {
  padding: 8px 13px; background: var(--gold); color: #fff;
  border-color: var(--akzent); font-weight: 700;
}
.shop-liste .veh-filters button.veh-reset:hover {
  background: var(--gold2); border-color: var(--akzent2); color: #fff;
}
.shop-liste .veh-count { color: var(--muted); }
.shop-liste .veh-legal, .shop-liste .veh-note { color: var(--muted); }
.shop-liste .veh-empty { color: var(--muted); }
.shop-liste .veh-empty a { color: var(--akzent); }
/* Weisse Karte auf cremefarbenem Grund braucht eine Kante, sonst zerfliesst
   sie am Rand. Auf dunklem Grund war das nicht noetig. */
.shop-liste .veh-card { border: 1px solid var(--border); }
.shop-liste .veh-card:hover { border-color: rgba(var(--marke-rgb),.35); }
/* Feste vier Spalten statt auto-fill: auf einem breiten Schirm haette
   auto-fill fuenf oder sechs Kacheln nebeneinander gestellt und die zwoelf
   je Seite auf zwei angefangene Reihen verteilt. Vier mal drei geht immer
   auf – und die Kacheln werden mit dem Schirm breiter, statt mehr zu
   werden. */
.shop-liste .veh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .shop-liste .veh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 880px)  { .shop-liste .veh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .shop-liste .veh-grid { grid-template-columns: 1fr; } }

@media (max-width: 768px) {
  .shop-kopf { padding: 92px 0 0; }
  /* Auf dem Handy stehen Ueberschrift und Filter naeher beieinander – der
     Platz gehoert den Fahrzeugen. */
  .shop-liste .veh-filters { margin-top: 6px; padding-top: 6px; }
}

/* Skeletons */
.veh-skel { pointer-events: none; }
.veh-skel-img { aspect-ratio: 16 / 10; background: linear-gradient(90deg,var(--surface2),var(--border),var(--surface2)); background-size: 200% 100%; animation: vehShimmer 1.3s infinite; }
.veh-skel-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.veh-skel-body span { height: 12px; border-radius: 4px; background: linear-gradient(90deg,var(--surface2),var(--border),var(--surface2)); background-size: 200% 100%; animation: vehShimmer 1.3s infinite; }
.veh-skel-body span:nth-child(1){ width: 70%; height: 16px; }
.veh-skel-body span:nth-child(2){ width: 100%; }
.veh-skel-body span:nth-child(3){ width: 45%; }
@keyframes vehShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Detail-Modal */
.veh-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.veh-modal[hidden] { display: none; }
.veh-modal-backdrop { position: absolute; inset: 0; background: rgba(10,10,14,.65); backdrop-filter: blur(2px); }
.veh-modal-box {
  position: relative; background: var(--surface); border-radius: var(--radius); width: 100%; max-width: 920px;
  max-height: 90vh; overflow: auto; display: grid; grid-template-columns: 1.1fr 1fr; box-shadow: var(--shadow-lg);
}
.veh-modal-close {
  position: absolute; top: 12px; right: 14px; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.5); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.veh-modal-close:hover { background: rgba(0,0,0,.75); }
.veh-modal-gallery { background: #f1f4f8; }
.veh-modal-main { width: 100%; height: 320px; object-fit: cover; display: block; }
.veh-thumbs { display: flex; gap: 8px; padding: 10px; flex-wrap: wrap; }
.veh-thumbs img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; cursor: pointer; opacity: .6; border: 2px solid transparent; }
.veh-thumbs img.active, .veh-thumbs img:hover { opacity: 1; border-color: var(--akzent); }
.veh-modal-info { padding: 28px 28px 26px; }
.veh-modal-info h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; }
.veh-modal-price { font-size: 1.5rem; font-weight: 700; color: var(--akzent); margin-bottom: 4px; }
.veh-modal-vat { font-size: .82rem; color: var(--muted); margin-bottom: 20px; }
.veh-modal-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.veh-modal-specs div { display: flex; flex-direction: column; }
.veh-modal-specs i { font-style: normal; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
.veh-modal-specs b { font-weight: 600; font-size: .98rem; }
.veh-features h4 { font-size: .95rem; font-weight: 700; margin-bottom: 8px; }
.veh-features ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin-bottom: 24px; }
.veh-features li { font-size: .85rem; color: var(--text); padding-left: 18px; position: relative; }
.veh-features li::before { content: "✓"; position: absolute; left: 0; color: var(--akzent); font-weight: 700; }
.veh-modal-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-outline-dark { border: 1px solid var(--border); color: var(--text); background: transparent; }
.btn-outline-dark:hover { background: var(--surface2); }

/* ─── FOOTER ─── */
.site-footer {
  background: var(--navy-tief);
  padding: 48px 0;
}
/* 3-Spalten: links Name+Adresse, Mitte Social, rechts Rechtslinks */
.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px 48px;
}
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; justify-self: start; }
.footer-logo { display: flex; align-items: center; gap: 10px; line-height: 1; color: #fff; }
.footer-addr { color: rgba(255,255,255,.5); font-size: .875rem; }
/* Oeffnungszeiten zwischen Anschrift und Rufnummer – noch eine Spur leiser
   als der Rest, sie sind Beiwerk und sollen die Rufnummer nicht bedraengen. */
.footer-zeiten { color: rgba(255,255,255,.34); font-size: .8rem; line-height: 2; }
.footer-addr a { color: var(--rose); }
.footer-links { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; justify-self: end; }
.footer-links a { color: rgba(255,255,255,.5); font-size: .875rem; transition: color var(--transition); }
.footer-links a:hover { color: var(--white); }
.footer-social { display: flex; justify-content: center; gap: 14px; justify-self: center; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.18);
  transition: color var(--transition), border-color var(--transition), background var(--transition), transform var(--transition);
}
.footer-social a:hover {
  color: var(--white);
  border-color: var(--akzent2);
  background: var(--gold);
  transform: translateY(-2px);
}
.footer-copy {
  grid-column: 1 / -1;
  text-align: center;
  color: rgba(255,255,255,.3);
  font-size: .8rem;
  margin-top: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-copy a { color: rgba(255,255,255,.4); }

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .mobilede-preview { grid-template-columns: 1fr; }
  .mobilede-stats { justify-content: flex-start; }
}

@media (max-width: 768px) {
  .section { padding: 44px 0 64px; }
  .two-col { grid-template-columns: 1fr; gap: 40px; }
  .kontakt-grid { gap: 40px; }
  .reviews-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .rating-summary { gap: 20px; }

  /* Menü als Schublade, die von rechts bis zur Bildschirmmitte einfährt.
     Der .nav-clip-Rahmen (Viewport-gross, overflow hidden) schneidet die
     rausgefahrene Schublade ab — kein iOS-Pinch-Zoom-Rand. Die Schublade
     faehrt UNTER dem Header (z 100) durch; der Burger morpht dort zum X. */
  .nav-clip {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
    overflow: hidden;
    pointer-events: none;
  }
  .main-nav {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: auto;
    width: 50%;
    min-width: 220px;
    max-width: 340px;
    background: var(--navy);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 96px 22px 40px;
    gap: 10px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Scharfe Hairline statt breitem Weichzeichner-Schatten: sonst wischt
       beim Einfahren ein weicher Schattenkeil ueber die noch sichtbare
       Hintergrundhaelfte und die wirkt dadurch leicht verzerrt. */
    box-shadow: -1px 0 0 rgba(255,255,255,.08);
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    /* Zuklappen bewusst etwas langsamer als das Aufklappen */
    transition: transform .6s cubic-bezier(.22,.61,.36,1), visibility .6s;
  }
  .main-nav.open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform .4s cubic-bezier(.22,.61,.36,1), visibility .4s;
  }
  /* unsichtbarer Klick-Faenger: Tipp neben das Menü schliesst es */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 85;
    background: transparent;
    pointer-events: none;
  }
  .nav-backdrop.open { pointer-events: auto; }
  .main-nav a {
    font-size: 1.2rem;
    padding: 12px 16px;
  }
  /* Marken-Block unten mittig in der Schublade – erbt exakt die
     Logo-Proportion der Landingpage (Linie + Schrift), damit es dort
     identisch aussieht. Keine Sonder-Groessen mehr. */
  .nav-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    /* margin oben UND unten auto -> Block sitzt mittig im freien Raum
       zwischen den Menuepunkten und dem unteren Rand */
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 24px;
    text-align: center;
  }

  @media (prefers-reduced-motion: reduce) {
    .main-nav { transition: visibility 0s; }
  }
  .nav-cta { text-align: center; margin-left: 0 !important; }
  /* In der Schublade: ueber dem Anrufknopf, etwas groesser zum Tippen. */
  .nav-sprache { align-self: flex-start; margin: 6px 0 2px 10px; gap: 6px; }
  .main-nav .nav-sprache a { font-size: .9rem; padding: 8px 6px; }
  .burger { display: flex; }

  .hero-title { font-size: 2.2rem; }
  .col-visual { display: none; }
  /* Handy: Inhalt mittig (vertikal zentriert), linksbuendig */
  .hero { align-items: center; }
  .hero-content { padding-top: 88px; padding-bottom: 80px; }

  .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form { padding: 24px; }

  .stats-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .gallery-grid { gap: 12px; }
  .gallery-item figcaption { font-size: .82rem; padding: 22px 12px 10px; }
  .stat-big { font-size: 2.5rem; }
  .stat-box { padding: 24px 12px; }

  .veh-filters select { min-width: 0; flex: 1 1 calc(50% - 4px); }
  .veh-filters .veh-count { margin-left: 0; width: 100%; }
  .veh-modal-box { grid-template-columns: 1fr; max-height: 92vh; }
  .veh-modal-main { height: 220px; }
  .veh-modal-info { padding: 20px; }

  /* fixed-attachment ruckelt auf iOS -> mitscrollen lassen */
  .section-fixed-bg, .banner, .hero-bg { background-attachment: scroll; }
  /* Schmal: etwas nach links, damit Heckleuchten und Schriftzug ins Bild
     kommen statt nur Tuer und Dach. */
  .hero-bg { background-position: 40% 50%; }

  /* mobile.de-Button darf auf schmalen Handys umbrechen statt ueber den
     Bildschirmrand hinauszulaufen (langer Text + white-space:nowrap) */
  .veh-cta .btn {
    white-space: normal;
    max-width: 100%;
    padding: 13px 22px;
    text-align: center;
  }

  /* Nutzfahrzeuge-Banner: naeher an die Fahrzeugreihe zoomen */
  .banner { background-size: 200% auto; background-position: 55% 42%; }

  /* Footer wieder einspaltig, zentriert */
  .footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 20px; }
  .footer-brand { align-items: center; justify-self: center; }
  .footer-logo { align-items: center; }
  .footer-links { align-items: center; justify-self: center; }
  .footer-social { justify-self: center; }
}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; }
  .btn { justify-content: center; }
}

/* ─── RECHTSSEITEN (Impressum / Datenschutz) ─── */
.legal { padding: 120px 0 80px; background: var(--surface); }
.legal .container { max-width: 820px; }
.legal h1 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--text); margin-bottom: 6px; }
.legal .legal-sub { color: var(--muted); margin-bottom: 28px; }
.legal h2 { font-size: 1.25rem; color: var(--text); margin: 34px 0 10px; }
.legal h3 { font-size: 1.02rem; color: var(--text); margin: 20px 0 6px; }
.legal p, .legal li { color: var(--text); font-size: .98rem; line-height: 1.75; }
.legal address { font-style: normal; color: var(--text); line-height: 1.8; margin: 4px 0 8px; }
.legal a { color: var(--akzent); }
.legal a:hover { text-decoration: underline; }
/* Buttons im Legal-Bereich behalten ihre eigene Schriftfarbe */
.legal a.btn-primary { color: var(--white); text-decoration: none; }
.legal ul { margin: 8px 0 12px 22px; }
.legal .ph { background: #fff7cc; border: 1px dashed #d8b400; border-radius: 5px; padding: 0 6px; color: #6b5600; font-size: .94em; }
.legal-note {
  background: #fff7cc; border: 1px solid #ead27a; border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 30px; font-size: .9rem; color: #6b5600;
}
.legal-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 40px; }

/* ─── MIETWAGEN ─── */
/* Aktiver Navi-Link (aktuelle Seite) */
.main-nav a.active { color: var(--white); }
.main-nav a.active::after {
  content: ""; display: block; height: 2px; background: var(--gold2);
  margin-top: 3px; border-radius: 2px;
}

/* Mietwagen-Seite ohne Hero: fixer Header braucht dauerhaft soliden Grund
   (weisse Nav-Schrift auf hellem Inhalt sonst unlesbar), erster Abschnitt Abstand. */
.site-header.nohero {
  background: rgba(11,13,18,.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0,0,0,.3);
}
.mw-top { padding-top: 112px; }

/* Flotten-Karten */
/* Breite Abschnitte: so breit wie die Fahrzeugseiten – mehr als der uebrige
   Inhalt, aber nicht ueber die ganze Bildschirmbreite. Traegt jeder
   Abschnitt selbst, damit nicht jede neue Seite eine eigene Regel braucht. */
.breit > .container {
  max-width: 1440px;
  padding-left: clamp(24px, 3vw, 48px);
  padding-right: clamp(24px, 3vw, 48px);
}
/* Vier feste Spalten wie in der Auslage: mit dem Schirm werden die Kacheln
   breiter, nicht mehr. */
.mw-grid { margin-top: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .mw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 880px)  { .mw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .mw-grid { grid-template-columns: 1fr; } }
.mw-cat {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  background: var(--gold); color: #fff; font-size: .74rem; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; letter-spacing: .02em;
}
.mw-card .veh-card-img { background: #eff3f7; }
.mw-prices {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 12px 0; margin-bottom: 4px; border-top: 1px solid var(--border);
}
.mw-prices span { display: flex; flex-direction: column; gap: 2px; }
.mw-prices span + span { border-left: 1px solid var(--border); padding-left: 12px; }
.mw-prices i { font-style: normal; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; }
.mw-prices b { font-weight: 700; font-size: .96rem; color: var(--text); }
.mw-card-foot { align-items: center; }
/* Rund 15 Prozent kleiner als zuvor: der Knopf sass sonst sehr breit unter
   den Preisen und zog mehr Aufmerksamkeit als das Fahrzeug darueber. */
.mw-card-foot .mw-req { padding: 8px 15px; font-size: .77rem; }
.mw-intro { max-width: 860px; }

/* Filterbereich der Mietflotte: helle Variante fuer den cremefarbenen Grund
   (der Fahrzeug-Filter .veh-* ist fuer den dunklen Bereich gestylt). */
.mw-filters { margin: 8px 0 16px; }
.mw-filters select {
  background: var(--feld); color: var(--text); border-color: var(--feld-rand);
  color-scheme: inherit; backdrop-filter: none;
}
.mw-filters select:focus { border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(var(--akzent-rgb),.22); }
.mw-reset {
  background: var(--feld); color: var(--text); border-color: var(--feld-rand);
}
.mw-reset:hover { background: var(--surface2); border-color: var(--akzent); color: var(--akzent); }
.mw-count { color: var(--muted); }
.mw-empty { color: var(--muted); }
.mw-empty a { color: var(--akzent); text-decoration: underline; }
.mw-more { margin-top: 28px; }

/* Im dunklen Fahrzeugbereich braucht die Seitenwahl helle Schrift auf
   dunklem Grund – sonst verschwindet sie im Hintergrund. */
.section-dark .blatt button {
  background: rgba(11,13,18,.6); border-color: rgba(255,255,255,.2); color: #fff;
}
.section-dark .blatt button:hover:not(:disabled):not(.hier) { border-color: var(--akzent2); color: #fff; }
.section-dark .blatt button.hier { background: var(--gold); border-color: var(--gold); }
.section-dark .blatt-luecke { color: rgba(255,255,255,.45); }

/* Seitenwahl unter der Flotte. Gleiche Bedienung wie im Adminbereich:
   Pfeile, Zahlen, aktuelle Seite gefuellt. */
.blatt { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.blatt button {
  min-width: 38px; height: 38px; padding: 0 12px; cursor: pointer;
  font-family: inherit; font-size: .9rem; color: var(--text);
  font-variant-numeric: tabular-nums;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 9px; transition: var(--transition);
}
.blatt button:hover:not(:disabled):not(.hier) { border-color: var(--akzent); color: var(--akzent); }
.blatt button.hier { background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 700; }
.blatt button:disabled { opacity: .35; cursor: default; }
/* Anfrage-Bereich = Startseiten-Kontakt 1:1 (Info links, Formular rechts, Karte
   als Vollbreit-Streifen darunter via .kontakt-map). Formular nur dezent
   kompakter, weil es mehr Felder als das Kontaktformular hat. */
/* Anfrage: ausgewogene Spalten, vertikal zentriert; Formular kompakt (nicht so
   hoch), Info-Spalte etwas gespreizt, "Mietwagen reservieren" kleiner -> linke
   und rechte Spalte wirken ungefaehr gleich hoch. */
#anfrage .two-col { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr); align-items: center; }
#anfrage .col-text .section-title { font-size: 1.7rem; }
#anfrage .contact-info { gap: 46px; margin-top: 30px; }
#mw-form { padding: 0; }
#mw-form .form-title { font-size: 1.15rem; margin-bottom: 12px; }
#mw-form .form-field { margin-bottom: 8px; }
#mw-form .form-field label { font-size: .78rem; margin-bottom: 4px; }
#mw-form .form-field input,
#mw-form .form-field select,
#mw-form .form-field textarea { padding: 8px 11px; font-size: .9rem; }
#mw-form .form-field textarea { min-height: 52px; }
#mw-form .form-consent { margin-top: 12px; }

/* Abstaende Mietwagen-Seite. "Gut zu wissen" (#ablauf) steht zuerst und braucht
   als erster Abschnitt den Header-Abstand aus .mw-top – die ID-Regel darf den
   nicht ueberschreiben, greift also nur wenn #ablauf NICHT der erste Block ist. */
#ablauf:not(.mw-top) { padding-top: 28px; }
/* Beide Abschnitte haben denselben hellen Grund und die Flotte hat seit dem
   Umbau keine eigene Ueberschrift mehr – mit dem alten Abstand klaffte
   dazwischen eine leere Flaeche, die nach einem Fehler aussah. */
#ablauf.mw-top { padding-bottom: 16px; }
#flotte { padding-top: 16px; padding-bottom: 44px; }
.mw-legal { color: var(--muted); font-size: .78rem; line-height: 1.6; margin-top: 26px; max-width: none; }

/* Ablauf / Bedingungen */
.mw-cond { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 36px; }
.mw-cond-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow);
}
.mw-cond-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; background: var(--gold); color: #fff;
  font-weight: 700; font-size: 1.05rem; margin-bottom: 14px;
}
.mw-cond-item h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.mw-cond-item p { color: var(--muted); font-size: .92rem; line-height: 1.6; }
.mw-terms {
  list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 28px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 28px;
}
.mw-terms li { position: relative; padding-left: 24px; color: var(--text); font-size: .95rem; line-height: 1.5; }
.mw-terms li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--akzent); font-weight: 700;
}

/* Kontaktblock am Fuss der Mietwagenseite. Seit das Formular dort weg ist
   (angefragt wird beim Fahrzeug), stehen die drei Angaben nebeneinander
   statt in einer schmalen Spalte neben dem Formular. */

@media (max-width: 760px) {
  .mw-cond { grid-template-columns: 1fr; }
  .mw-terms { grid-template-columns: 1fr; }
  .mw-prices { grid-template-columns: repeat(3, 1fr); }
}

/* Beispielfahrzeug: ein Band ueber dem Foto. Das Bild ist ein Muster aus dem
   Netz – ohne Hinweis haelt es jemand fuer das Auto, das vor der Tuer steht. */
.mw-muster {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  background: var(--navy); color: #fff;
  font-size: .7rem; font-weight: 600; letter-spacing: .02em;
  padding: 5px 11px; border-radius: 999px;
}
.mw-bildbereich { position: relative; }
/* Durch die Fotos blaettern – auf Karten, in den Vorschlaegen und am grossen
   Bild der Fahrzeugseite. Gedaempft sichtbar, damit erkennbar ist, dass es
   mehr als ein Foto gibt; beim Zeigen darauf voll. Die Mechanik dazu steht
   in js/main.js (bildBlaettern) bzw. bei den Detailseiten im Seitenskript. */
.veh-card-img, .fzs-img, .fz-bild { position: relative; }
.bild-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(11,13,18,.55); color: #fff; font-size: 1.3rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: .45; transition: opacity .18s ease, background .18s ease;
}
.bild-pfeil.zurueck { left: 10px; }
.bild-pfeil.vor { right: 10px; }
.bild-pfeil:hover { background: rgba(11,13,18,.85); }
.veh-card:hover .bild-pfeil, .fzs-card:hover .bild-pfeil,
.fz-bild:hover .bild-pfeil, .bild-pfeil:focus-visible { opacity: 1; }
.bild-zaehler {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  background: rgba(11,13,18,.72); color: #fff;
  font-size: .7rem; font-weight: 600; padding: 5px 11px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
/* Auf den kleinen Vorschlagskarten etwas kompakter. */
.fzs-img .bild-pfeil { width: 28px; height: 28px; font-size: 1.1rem; }
.fzs-img .bild-pfeil.zurueck { left: 6px; }
.fzs-img .bild-pfeil.vor { right: 6px; }
.fzs-img .bild-zaehler { right: 8px; bottom: 8px; font-size: .66rem; padding: 3px 8px; }

.mw-blaettern {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(11,13,18,.55); color: #fff; font-size: 1.25rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  /* Gedaempft sichtbar statt ganz weg: sonst weiss niemand, dass es mehr
     Fotos gibt, ausser er faehrt zufaellig mit der Maus darueber. */
  opacity: .45; transition: opacity .18s ease, background .18s ease;
}
.mw-blaettern.zurueck { left: 10px; }
.mw-blaettern.vor { right: 10px; }
.mw-blaettern:hover { background: rgba(11,13,18,.8); }
.mw-card:hover .mw-blaettern,
.mw-blaettern:focus-visible { opacity: 1; }
@media (pointer: coarse) { .mw-blaettern { opacity: 1; } }

/* Anzahl der Fotos: sagt, dass auf der Fahrzeugseite mehr wartet. */
.mw-fotos {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  background: rgba(11,13,18,.72); color: #fff;
  font-size: .7rem; font-weight: 600; padding: 5px 11px; border-radius: 999px;
}
.mw-muster-gross {
  left: 14px; top: 14px; bottom: auto; right: 14px;
  text-align: center; font-size: .78rem; padding: 8px 14px;
  background: rgba(11,13,18,.86); backdrop-filter: blur(3px);
}
.fzs-preis-zusatz { font-size: .72rem; font-weight: 400; color: var(--muted); }

/* ─── Verfuegbarkeit + Anfrage auf der Fahrzeugseite ─── */

/* Der Kalender zeigt nur Tage, keine Namen und keinen Grund – siehe
   functions/api/belegung/[id].js. Von aussen ist nicht erkennbar, ob ein Tag
   wegen einer Miete, wegen der Werkstatt oder wegen Urlaub belegt ist. */
/* Kalender und Felder waren zwei Kacheln nebeneinander, mit eigener
   Ueberschrift und eigenem Knopf – zwei Rahmen fuer eine einzige Handlung.
   Jetzt eine Flaeche ohne Rahmen und ohne Trennlinie: links die Tage,
   rechts die Angaben, darunter mittig der eine Knopf, der beides
   abschickt. */
/* stretch statt start: beide Spalten sind gleich hoch, und innen sorgt je
   ein dehnbares Element dafuer, dass sie auch gleich enden – links der
   Hinweis unter dem Kalender, rechts das Nachrichtenfeld. Ohne das hoerte
   die eine Spalte irgendwo mitten neben der anderen auf. */
.mw-anfrage-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 44px; align-items: stretch; }
.mw-anfrage-grid > .mwk {
  background: none; border: 0; border-radius: 0; padding: 0;
  display: flex; flex-direction: column;
}
.mwk-hinweis { margin-top: auto; }
.mw-felder { display: flex; flex-direction: column; }
.mw-feld-wachsen { flex: 1 1 auto; }
.mw-feld-wachsen textarea { flex: 1 1 auto; }
.mw-anfrage-form { background: none; border: 0; box-shadow: none; padding: 0; }
/* Der Fuss gehoert beiden Spalten – deshalb die Linie waagerecht ueber die
   volle Breite: sie verbindet, statt zu trennen. */
.mw-anfrage-fuss {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border);
  text-align: center;
}
/* Der Datenschutzhinweis ist Fliesstext, kein Ausruf: linksbuendig ueber
   die volle Breite, wie jeder andere Absatz auch. Zentriert bleibt nur, was
   kurz ist – der Knopf und die Rueckmeldung darunter. */
.mw-anfrage-fuss .form-consent {
  margin: 0; max-width: none; align-self: stretch; text-align: left;
}
@media (max-width: 900px) {
  .mw-anfrage-grid { grid-template-columns: 1fr; gap: 26px; }
}
/* Kompakter als die grossen Formulare der Unterseiten – hier steht der
   Kalender daneben, und beides soll nebeneinander Platz haben. */

.mw-anfrage-grid .form-title { font-size: 1.1rem; margin-bottom: 14px; }
.mw-anfrage-grid .form-field { margin-bottom: 12px; }
.mw-anfrage-grid .form-field label { font-size: .78rem; margin-bottom: 4px; }
.mw-anfrage-grid .form-field input,
.mw-anfrage-grid .form-field textarea { padding: 9px 12px; font-size: .9rem; }
.mw-anfrage-grid .form-field textarea { min-height: 72px; }
.mw-anfrage-grid .form-consent { font-size: .74rem; }
@media (max-width: 900px) { .mw-anfrage-grid { grid-template-columns: 1fr; } }

.mwk { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px 20px; }
.mwk-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.mwk-kopf strong { flex: 1; text-align: center; font-size: .98rem; color: var(--text); }
/* Die Monatspfeile in der Hausfarbe: weisser Grund, bordeauxfarbener Rand
   und Pfeil. Beim Zeigen dreht es sich um. */
.mwk-kopf button {
  width: 32px; height: 32px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--akzent); background: var(--surface); color: var(--akzent);
  font: inherit; font-size: 1.15rem; line-height: 1; transition: var(--transition);
}
.mwk-kopf button:hover:not(:disabled) { background: var(--gold); color: #fff; }
.mwk-kopf button:disabled { opacity: .35; cursor: default; }

.mwk-monate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 620px) { .mwk-monate { grid-template-columns: 1fr; } }
.mwk-titel { font-size: .82rem; font-weight: 600; color: var(--text); text-align: center; margin-bottom: 8px; }
.mwk-wochentage, .mwk-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mwk-wochentage {
  margin-bottom: 6px; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); text-align: center;
}
.mwk-tag {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; font: inherit; font-size: .84rem; color: var(--text);
  background: #f1f4f8; border-radius: 7px; font-variant-numeric: tabular-nums;
}
.mwk-leer { background: none; }
.mwk-tag.frei { cursor: pointer; transition: background .15s ease; }
.mwk-tag.frei:hover { background: rgba(var(--marke-rgb),.16); }
.mwk-tag.belegt { background: var(--gold); color: #fff; cursor: not-allowed; }
.mwk-tag.vergangen { background: none; color: #c3c7d0; cursor: default; }
.mwk-tag.spanne { background: rgba(var(--marke-rgb),.24); }
.mwk-tag.gewaehlt { background: var(--navy); color: #fff; font-weight: 700; }
.mwk-tag:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* Die Legende steht oben rechts unter den Monatspfeilen – dort liest man sie,
   bevor man in die Kaesten schaut, nicht erst hinterher. */
.mwk-legende {
  display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center;
  justify-content: flex-end; margin: -6px 0 12px;
  font-size: .76rem; color: var(--muted);
}
.mwk-legende i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; }
.mwk-legende i.frei { background: #f1f4f8; }
.mwk-legende i.belegt { background: var(--gold); }
.mwk-hinweis { margin-top: 10px; font-size: .78rem; color: var(--muted); line-height: 1.55; }
.mwk-fehler { margin-top: 10px; font-size: .8rem; color: var(--akzent); }

/* ============================================================
   LOKALE LANDINGPAGES (Gebrauchtwagen/Ankauf/Werkstatt Sonneberg)
   ============================================================ */

/* Brotkrümel: gibt Suchmaschinen und Nutzern die Einordnung. */
.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; font-size: .78rem; color: var(--muted); }
.breadcrumb a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; transition: var(--transition); }
.breadcrumb a:hover { color: var(--akzent); border-bottom-color: currentColor; }
.breadcrumb span[aria-current] { color: var(--text); }

/* Einleitungstext unter der H1 – etwas größer als Fließtext. */
.local-lead { max-width: 62ch; font-size: 1.06rem; color: var(--text); }
.local-note { max-width: 68ch; margin-top: 26px; font-size: .88rem; color: var(--muted); }

/* Orte im Einzugsgebiet: schlichte Chips, kein Link – reiner Inhalt. */
.town-list { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.town-list li { padding: 7px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font-size: .82rem; color: var(--text); }

/* Button-Paar (Haupt-CTA + Telefon) unter den Textspalten. */
.local-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Weiterführender Link in den Service-Karten.
   --gold (#0014ad) statt --rose: Rose erreicht auf Weiß nur 3,39:1 und liegt
   damit unter dem Mindestkontrast von 4,5:1. --gold kommt auf 6,59:1. */
.local-link { display: inline-block; margin-top: 14px; font-size: .84rem; font-weight: 600; color: var(--akzent); text-decoration: none; border-bottom: 1px solid transparent; transition: var(--transition); }
.local-link:hover { border-bottom-color: currentColor; }

/* In den Service-Karten: mittig und am unteren Rand, damit die Links aller
   Karten auf einer Linie sitzen (siehe .service-card). */
.service-card .local-link { align-self: center; margin-top: auto; padding-top: 12px; }


@media (max-width: 560px) {
  .local-lead { font-size: 1rem; }
  .local-actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   PROBEFAHRT-ANFRAGE
   ============================================================ */

/* Schrittliste auf der Probefahrt-Seite nutzt .fin-steps, braucht aber
   etwas Luft zur folgenden Öffnungszeiten-Liste. */
/* Probefahrt: derselbe Aufbau wie beim Ankauf. Der Text links ist kuerzer
   als das Formular – vertikal zentriert haenge er merkwuerdig in der Mitte,
   deshalb oben buendig. Das Formular bekommt die groessere Haelfte und drei
   Spalten; die Zweierreihen loesen sich per display:contents ins Raster auf. */
.pf-page .kontakt-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 48px; align-items: start; }
.pf-page .contact-form {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px; padding: 30px 32px;
}
.pf-page .form-row { display: contents; }
.pf-page .form-field { margin-bottom: 16px; min-width: 0; }
/* Ueber die volle Breite: Titel, Fahrzeug, Zwischenzeilen, Freitext, Fuss. */
.pf-page .form-title,
.pf-page .form-sub,
.pf-page .form-field:has(#pf-vehicle),
.pf-page .form-field:has(textarea),
.pf-page .form-actions,
.pf-page .form-consent,
.pf-page .hp-field { grid-column: 1 / -1; }
/* Datum breiter als die Tageszeit – sonst bliebe die dritte Spalte leer. */
.pf-page .form-field:has(input[type="date"]) { grid-column: span 2; }
.pf-page .form-sub { margin: 4px 0 8px; }
.pf-page .form-title { margin-bottom: 16px; }
/* Kompakter: eine Probefahrt ist in einer Minute angefragt, das Formular
   soll nicht wirken wie ein Antrag. Masse wie auf der Ankaufseite. */
.pf-page .form-field label { font-size: .78rem; margin-bottom: 5px; }
.pf-page .form-field input,
.pf-page .form-field select,
.pf-page .form-field textarea { padding: 10px 12px; font-size: .9rem; }
.pf-page .form-field textarea { min-height: 76px; }
.pf-page .form-field { margin-bottom: 13px; }
/* Mehr Bildschirmbreite als die uebrigen Seiten – der Inhalt traegt sie. */
.pf-page .container { max-width: 1280px; }

@media (max-width: 1000px) {
  .pf-page .contact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-page .form-field:has(input[type="date"]) { grid-column: span 1; }
}
@media (max-width: 860px) { .pf-page .kontakt-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pf-page .contact-form { grid-template-columns: 1fr; } }

.pf-steps { margin: 26px 0 28px; }
.pf-contact { margin-top: 26px; display: flex; flex-direction: column; gap: 20px; }

/* Zwischenüberschrift im Formular ("Wunschtermin 1"). */
.form-sub {
  margin: 18px 0 8px; font-size: .76rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.form-sub:first-of-type { margin-top: 22px; }


/* ============================================================
   SUCHAUFTRAG
   ============================================================ */

/* Der frühere .wa-preview-Kasten ("noch nicht scharf geschaltet") ist weg –
   der Suchauftrag ist seit 28.07.2026 live. */

/* Der Text links ist deutlich kuerzer als das Formular rechts. Vertikal
   zentriert (Standard aus .two-col) haengt er dadurch merkwuerdig in der Mitte –
   hier buendig oben mit dem Formular starten. Aufbau wie bei Ankauf und
   Probefahrt: das Formular bekommt die groessere Haelfte und drei Spalten,
   die Zweierreihen loesen sich per display:contents ins Raster auf. */
.sa-page .kontakt-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 48px; align-items: start; }
.sa-page .contact-form {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px; padding: 30px 32px;
}
.sa-page .form-row { display: contents; }
.sa-page .form-field { margin-bottom: 16px; min-width: 0; }
.sa-page .form-title,
.sa-page .form-sub,
.sa-page .form-field:has(textarea),
.sa-page .form-actions,
.sa-page .form-consent,
.sa-page .hp-field,
.sa-page .wa-result { grid-column: 1 / -1; }
.sa-page .form-title { margin-bottom: 18px; }

@media (max-width: 1000px) { .sa-page .contact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .sa-page .kontakt-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px)  { .sa-page .contact-form { grid-template-columns: 1fr; } }

.wa-result { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.wa-result-head { margin: 0 0 14px; font-size: .95rem; font-weight: 600; color: var(--text); }
.wa-result-head span { display: block; font-size: .78rem; font-weight: 400; color: var(--muted); margin-top: 2px; }

.wa-hits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wa-hits a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 11px 14px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); text-decoration: none; transition: var(--transition);
}
.wa-hits a:hover { border-color: var(--rose); }
.wa-hit-title { font-size: .87rem; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-hit-price { flex: none; font-size: .87rem; font-weight: 700; color: var(--akzent); }
.wa-more { margin: 12px 0 0; font-size: .82rem; color: var(--muted); }

/* ─── MIETWAGEN-DETAILSEITE ───
   Nutzt die .fz-*-Stile der Verkaufs-Detailseite; hier nur, was zusaetzlich
   gebraucht wird. */
.fz-block { margin-top: 44px; }
.fz-block-kopf { font-size: 1.15rem; font-weight: 700; color: var(--text); margin-bottom: 16px; }

/* Tarife: drei gleich grosse Zahlen nebeneinander sagen nicht, welche die
   wichtige ist. Der Tagespreis fuehrt gross und in der Akzentfarbe, die
   beiden Alternativen stehen rechts daneben als ruhige Zeilen, getrennt nur
   durch eine Haarlinie. Kein Rahmen, kein Kasten – die Hierarchie traegt. */
.mw-tarife {
  display: flex; align-items: stretch; gap: 24px;
  margin: 20px 0 14px; padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.mw-tarif-haupt { display: flex; flex-direction: column; justify-content: center; flex: none; }
.mw-tarif-haupt b {
  font-size: 2.2rem; font-weight: 700; color: var(--akzent);
  line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.mw-tarif-haupt i {
  font-style: normal; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-top: 7px;
}
.mw-tarif-weitere {
  flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center;
  gap: 7px; padding-left: 24px; border-left: 1px solid var(--border);
}
.mw-tarif-weitere p { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: .9rem; }
.mw-tarif-weitere i { font-style: normal; color: var(--muted); }
.mw-tarif-weitere b {
  margin-left: auto; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums;
}
/* Was die Woche umgerechnet je Tag kostet – der eigentliche Grund, sie zu
   nehmen. Steht hinter der Bezeichnung, damit die Preise rechts eine saubere
   Spalte bilden. */
.mw-tarif-weitere span { font-size: .74rem; opacity: .8; }

@media (max-width: 520px) {
  .mw-tarife { flex-direction: column; gap: 16px; }
  .mw-tarif-weitere { padding-left: 0; padding-top: 16px; border-left: 0; border-top: 1px solid var(--border); }
}

/* Auch der Knopf auf der Fahrzeugseite eine Spur kleiner. */
.fz-info .fz-actions .btn { padding: 11px 24px; font-size: .88rem; }

/* ─── Offene Angabenspalte (Verkauf und Mietwagen) ───
   Vorher stand alles in einem cremefarbenen Kasten, der beim Scrollen
   mitlief. Der Kasten trennte die Angaben vom Fahrzeug, statt sie damit zu
   verbinden, und mitlaufend wirkte er wie ein Fremdkoerper neben einer
   Seite, die sonst stillsteht.
   Jetzt eine offene Spalte aus Gruppen, die eine Haarlinie trennt: Preis,
   Daten, Handlung. Die Linie laeuft ueber die volle Spaltenbreite und gibt
   die Gliederung, die vorher der Rahmen gab. */
.fz-offen {
  position: static; top: auto;
  background: none; border: 0; border-radius: 0; padding: 0;
}
.fz-offen .section-label { margin-bottom: 10px; }
/* Der Name bekommt Luft und einen ausgeglichenen Umbruch: bei zwei Zeilen
   stand sonst ein einzelnes Wort in der zweiten. */
.fz-offen .fz-title { margin-bottom: 14px; text-wrap: balance; line-height: 1.15; }
.fz-teil { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 24px; }
/* Eckdaten ohne Kasten: sie sind Teil der Spalte, nicht eine Insel darin.
   Drei Zeilen zu zwei Spalten, mit Luft dazwischen – so fuellt die Spalte
   die Hoehe des Fotos daneben, statt oben zusammenzurutschen. */
.fz-offen .fz-specs {
  background: none; border: 0; border-radius: 0; padding: 0;
  margin: 0; gap: 18px 22px;
}
.fz-offen .fz-price { font-size: 2.1rem; line-height: 1.1; }
.fz-offen .fz-vat { margin: 8px 0 0; }
/* Die Knoepfe stehen nebeneinander und teilen sich die Spalte – zwei
   Schaltflaechen ueber die volle Breite untereinander wirkten wie zwei
   gleich wichtige Wege, dabei ist die Probefahrt der eine und mobile.de
   der andere. Rufnummer und Weg zurueck stehen mittig darunter. */
.fz-offen .fz-actions { flex-direction: row; flex-wrap: wrap; gap: 12px; }
.fz-offen .fz-actions .btn { flex: 1 1 190px; width: auto; }
.fz-offen .fz-quiet { flex-basis: 100%; justify-content: center; margin-top: 10px; }
/* Der Hinweiskasten liegt jetzt auf Weiss und braucht seinen cremefarbenen
   Grund zurueck, sonst ist nur noch der rote Balken von ihm zu sehen. */
.mw-info .mw-detail-hinweis { background: var(--surface2); margin: 24px 0 0; }
/* Zwei Knoepfe teilen sich die Spalte, wie auf den Verkaufsseiten auch –
   die Sonderregel fuer den einzelnen Knopf ist damit hinfaellig. */
/* Die Tarifzeile ist selbst eine Gruppe – ihre untere Linie waere die
   zweite direkt neben der Haarlinie der naechsten Gruppe. */
.fz-offen .mw-tarife { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

/* Weiss statt Creme: der Kasten liegt selbst auf cremefarbenem Grund und
   war dort nur ueber den roten Balken zu erkennen. */
.mw-detail-hinweis {
  background: var(--surface); border-left: 3px solid var(--akzent);
  padding: 11px 15px; border-radius: 0 8px 8px 0;
  font-size: .89rem; color: var(--muted); margin: 0 0 20px;
}

/* Auf der Uebersicht fuehrt der Kartenkopf zur Detailseite, der Knopf
   dagegen direkt ins Anfrageformular – deshalb zwei getrennte Ziele. */
.mw-card-link { display: block; text-decoration: none; color: inherit; }
.mw-card-link:hover .veh-card-title { color: var(--akzent); }


/* ─── Bildbetrachter ─── */
/* Eine Schicht ueber der ganzen Seite. Dunkel, damit das Foto traegt, und
   ohne Kasten drumherum – der Rahmen ist der Bildschirm. */
.lupe {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(12,12,15,.93);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 4vw, 48px);
  animation: lupe-auf .18s ease;
}
.lupe[hidden] { display: none; }
@keyframes lupe-auf { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lupe { animation: none; } }
body.lupe-offen { overflow: hidden; }

.lupe-rahmen { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; }
.lupe-rahmen img {
  max-width: 100%; max-height: calc(100vh - 150px);
  width: auto; height: auto; display: block;
  border-radius: 10px; box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
.lupe-rahmen figcaption {
  color: rgba(255,255,255,.82); font-size: .92rem; text-align: center; max-width: 60ch;
}
.lupe-rahmen figcaption[hidden] { display: none; }

.lupe-zu, .lupe-pfeil {
  position: absolute; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
  border-radius: 999px; font-family: inherit; line-height: 1;
  transition: background .18s ease;
}
.lupe-zu:hover, .lupe-pfeil:hover { background: rgba(255,255,255,.24); }
.lupe-zu:focus-visible, .lupe-pfeil:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lupe-zu { top: 16px; right: 16px; width: 44px; height: 44px; font-size: 1.7rem; }
.lupe-pfeil { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 1.9rem; }
.lupe-pfeil.zurueck { left: 14px; }
.lupe-pfeil.vor { right: 14px; }
.lupe-pfeil[hidden] { display: none; }
.lupe-stand {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.65); font-size: .84rem; font-variant-numeric: tabular-nums;
}
.lupe-stand[hidden] { display: none; }

/* Am Telefon sind die Pfeile im Weg – dort wird gewischt. Der Zaehler
   bleibt, damit man weiss, dass es weitergeht. */
@media (max-width: 620px) {
  .lupe-pfeil { display: none; }
  .lupe-rahmen img { max-height: calc(100vh - 120px); }
}

/* Steht bewusst am Dateiende: die allgemeinen Handy-Regeln weiter oben
   (max-width 768) geben der Anzahl volle Breite und jedem Feld die halbe
   Zeile. Gleiche Spezifitaet – also entscheidet die Reihenfolge.

   Am Telefon sollen die Filterleisten kurz bleiben – auf jeder Seite, die
   eine hat: Startseite, Fahrzeugseite, Mietflotte. Reihenfolge: Marken mit
   Zuruecksetzen und Anzahl in der ersten Zeile, die uebrigen Felder und die
   Sortierung darunter. So steht das Zaehlwerk bei der Auswahl, die es
   zaehlt, und darunter stehen gleich breite Felder. */
@media (max-width: 620px) {
  .veh-filters { gap: 8px; }
  /* Rechts eine schmale Spalte, links der Rest: Zuruecksetzen und die
     Sortierung sind gleich breit und stehen beide am rechten Rand, die
     Auswahlfelder fuellen den Rest ihrer Zeile. Dadurch sind sie
     untereinander gleich lang und enden dort, wo die rechte Spalte
     beginnt. */
  .veh-filters .mehrfach { order: 1; flex: 0 0 calc(100% - 142px); min-width: 0; }
  /* Beide Knoepfe fest auf dieselbe Breite – die Shopseite setzt dem
     Zuruecksetzen sonst eine eigene, groessere. margin-left: auto sammelt
     den freien Platz davor, der Knopf sitzt damit in der rechten Ecke. */
  .veh-filters .veh-reset,
  .shop-liste .veh-filters button.veh-reset {
    order: 2; flex: 0 0 134px; margin-left: auto;
    padding: 7px 8px; font-size: .7rem;
  }
  /* width: auto noetig – die allgemeine Handy-Regel weiter unten setzt den
     Feldern 100 %, was als Flex-Basis gelesen jede Zeile sprengen wuerde. */
  /* Feste linke Spalte: 142 px sind der Knopf rechts (134) plus Abstand.
     Damit passt in eine Zeile immer genau ein Feld und ein Knopf – zwei
     Felder koennen sich keine Zeile mehr teilen, jedes Feld steht links,
     jeder Knopf rechts. */
  .veh-filters select:not(.veh-sort) { order: 4; flex: 0 0 calc(100% - 142px); min-width: 0; width: auto; }
  /* Das kleine Blaettern gehoert in die rechte Spalte wie Knopf und
     Sortierung – ohne margin-left: auto staende es direkt am Feld. */
  .veh-filters .veh-blatt-oben { order: 6; flex: 0 0 auto; margin: 0 0 0 auto; }
  /* Die Shopseite gibt ihren Auswahlfeldern min-width: 132px und einen
     eigenen Pfeil – beides muss hier mitgenannt werden, sonst waere die
     Sortierung breiter als der Knopf darueber. Knapper gesetzt, damit
     "Preis aufsteigend" in dieselbe Breite passt. */
  .veh-filters .veh-sort,
  .shop-liste .veh-filters select.veh-sort {
    order: 6; flex: 0 0 134px; margin-left: auto;
    min-width: 0; max-width: none; width: auto;
    font-size: .72rem; padding: 7px 24px 7px 8px;
    /* Eigener Pfeil statt des System-Pfeils: der des Browsers legt sich
       ueber den Innenabstand und schnitte "Preis aufsteigend" ab. */
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfd3da' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 7px center; background-size: 12px;
  }
  /* In der Auslage stehen die Felder auf Weiss – dort derselbe Pfeil in
     Grau wie bei den Feldern daneben. */
  .shop-liste .veh-filters select.veh-sort {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  }
  /* Auslage: Preis in die zweite Zeile zur Sortierung, MwSt. in die dritte
     zum Blaettern – sonst stuende MwSt. rechts oben statt links unten.
     Steht bewusst NACH der Regel fuer die Sortierung: die nennt denselben
     Selektor und wuerde sonst mit ihrer Reihenfolge gewinnen. */
  .shop-liste .veh-filters #f-price { order: 3; }
  .shop-liste .veh-filters select.veh-sort { order: 4; }
  .shop-liste .veh-filters #f-vat { order: 5; }
  /* Die Anzahl bekommt eine eigene, rechtsbuendige Zeile zum Schluss. In
     der ersten Zeile naehme sie den Feldern genau die Laenge, um die es
     hier geht. */
  .veh-filters .veh-count {
    order: 7; flex: 0 0 100%; width: auto; margin-left: 0;
    text-align: right; font-size: .68rem; white-space: nowrap;
  }
  .veh-filters .mehrfach-knopf { width: 100%; min-width: 0; }
  .mehrfach-tafel { min-width: 200px; }
  /* In der Mietflotte steht der Knopf im Quelltext hinter beiden Feldern.
     Ohne eigene Reihenfolge stuende er deshalb als Erstes in Zeile 1 –
     hier bekommt jedes Feld seine Zeile mit dem Partner rechts daneben. */
  .mw-filters #mw-f-cat { order: 1; }
  .mw-filters #mw-f-price { order: 3; }
}

/* ─── BEWERTUNGSSTREIFEN (kompakt, fuer Unterseiten) ─────────────────
   Die Startseite hat den grossen Abschnitt. Hier reicht eine Zeile mit
   Schnitt und Anzahl und darunter schmale Karten zum Wischen – gefuellt
   von js/bewertungen.js. Bewusst eigene Klassen (.bwk-*), damit nichts
   am grossen Abschnitt kippt. */
.bwk { border-top: 1px solid var(--border); padding-top: 22px; }
.bwk-oben {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.bwk-note { font-weight: 700; font-size: 1.05rem; color: var(--text); line-height: 1; }
.bwk-sterne { color: var(--akzent); font-size: .95rem; letter-spacing: 1.5px; line-height: 1; }
.bwk-sterne .bwk-leer { color: var(--border); }
.bwk-sterne-gross { font-size: 1rem; }
.bwk-anzahl { font-size: .82rem; color: var(--muted); }
/* Der Google-Link rutscht ans rechte Ende – auf schmalen Schirmen faellt
   er stattdessen in die naechste Zeile. */
.bwk-mehr {
  margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--akzent);
  border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
.bwk-mehr:hover { border-bottom-color: var(--akzent); }

.bwk-lauf { position: relative; }
.bwk-bahn {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: 2px 2px 6px; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bwk-bahn::-webkit-scrollbar { display: none; }
.bwk-karte {
  flex: 0 0 clamp(230px, 78%, 264px); scroll-snap-align: start;
  background: var(--karte-hell); border: 1px solid var(--feld-rand); border-radius: 10px;
  padding: 13px 15px; display: flex; flex-direction: column; gap: 8px;
}
/* Ab mittleren Bildschirmen vier schmale Karten nebeneinander. */
@media (min-width: 900px) {
  .bwk-karte { flex-basis: calc((100% - 42px) / 4); }
}
.bwk-kopfzeile { display: flex; align-items: center; gap: 9px; }
.bwk-avatar {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .85rem; line-height: 1;
}
.bwk-wer { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bwk-name { font-weight: 600; font-size: .84rem; color: var(--text); }
.bwk-wann { font-size: .72rem; color: var(--muted); }
/* Vier Zeilen: so bleiben alle Karten gleich flach, ohne dass der Text
   auf eine einzige Zeile zusammenschnurrt. */
.bwk-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden; color: var(--muted); font-size: .82rem; line-height: 1.5; margin: 0;
}
.bwk-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 1.25rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--shadow); transition: background .2s ease, transform .2s ease;
}
.bwk-pfeil:hover { background: var(--surface2); transform: translateY(-50%) scale(1.06); }
.bwk-pfeil-zurueck { left: -17px; }
.bwk-pfeil-vor { right: -17px; }
.bwk-pfeil[hidden] { display: none; }
@media (max-width: 720px) { .bwk-pfeil { display: none; } }
@media (max-width: 620px) {
  .bwk { padding-top: 18px; }
  .bwk-mehr { margin-left: 0; flex-basis: 100%; }
}

/* Bilder auf einer angelegten Seite: nebeneinander, gleich hoch. */
.local-bilder {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin-top: 22px;
}

/* ─── Atmosphaere der Abschnitte (dunkles Thema) ───
   Flaechen in reinem Anthrazit wirkten trist. Jeder Abschnitt bekommt
   deshalb ein eigenes, ruhiges Motiv im Markenblau – Licht, Linien oder
   Raster, nie bunt –, dazu einen leichten Verlauf. Der Text behaelt
   ueberall seinen Kontrast; einzig Ueber uns laedt eine kleine SVG-Datei.

   Ueber uns: Hoehenlinien wie auf einer Landkarte – das Haus ist in seiner
   Region verwurzelt, der Abschnitt zeigt sein Terrain. Die Linien liegen
   hinter dem Foto (images/hoehenlinien.svg), laufen nach links weich aus,
   damit der Text frei steht, und atmen kaum merklich. */
html:not(.admin):not(.admin-login) #ueber-uns {
  background:
    radial-gradient(ellipse 55% 75% at 78% 50%, rgba(var(--marke-hell-rgb),.26), transparent 70%),
    linear-gradient(160deg, var(--marke-tief) 0%, #0a0c12 100%);
  overflow: hidden; isolation: isolate;
}
html:not(.admin):not(.admin-login) #ueber-uns::after {
  content: ''; position: absolute; inset: -6%; z-index: -1; pointer-events: none;
  background: url('/images/hoehenlinien.svg?v=1') right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
  animation: ueber-uns-terrain 60s ease-in-out infinite alternate;
}
@keyframes ueber-uns-terrain {
  from { transform: translate3d(-1.5%, 1%, 0) scale(1); }
  to   { transform: translate3d(1.5%, -1%, 0) scale(1.04); }
}
/* Fahrzeugankauf: Stahl statt Kupfer. Dunkler Graphitgrund, darueber ein
   kuehles, sehr langsam wanderndes Licht in Stahlblau und Silber – wie ein
   Scheinwerfer in der Halle, der ganz leicht schwenkt. Bleibt in der
   Markenfarbe, damit der Abschnitt ernst wirkt und nicht bunt. */
html:not(.admin):not(.admin-login) #ankauf {
  background: linear-gradient(200deg, #0d0f14 0%, #090b0f 100%);
  overflow: hidden; isolation: isolate;
}
html:not(.admin):not(.admin-login) #ankauf::after {
  content: ''; position: absolute; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(closest-side at 32% 42%, rgba(var(--marke-hell-rgb),.22), transparent),
    radial-gradient(closest-side at 68% 62%, rgba(150,175,200,.10), transparent),
    radial-gradient(closest-side at 56% 28%, rgba(var(--akzent-rgb),.10), transparent);
  filter: blur(46px);
  animation: ankauf-licht 34s ease-in-out infinite alternate;
}
@keyframes ankauf-licht {
  0%   { transform: translate3d(-4%, -2%, 0) scale(1); }
  100% { transform: translate3d(4%, 3%, 0) scale(1.06); }
}
/* Finanzierung: ein feines Punktraster wie Millimeterpapier fuer die
   Kalkulation. Sichtbar wird es nur dort, wo ein weiches Licht darueber
   liegt – und das wandert sehr langsam von links nach rechts und zurueck.
   Die Bewegung steckt in der Maske, das Raster selbst steht still. */
html:not(.admin):not(.admin-login) #finanzierung {
  background:
    radial-gradient(ellipse 50% 70% at 80% 50%, rgba(var(--marke-hell-rgb),.18), transparent 70%),
    linear-gradient(160deg, #0a0c12 0%, var(--marke-tief) 100%);
  overflow: hidden; isolation: isolate;
}
html:not(.admin):not(.admin-login) #finanzierung::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(143,212,245,.55) 1.1px, transparent 1.7px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%);
  -webkit-mask-size: 70% 140%;      mask-size: 70% 140%;
  -webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
  -webkit-mask-position: 0% 50%;    mask-position: 0% 50%;
  animation: finanzierung-licht 44s ease-in-out infinite alternate;
}
@keyframes finanzierung-licht {
  from { -webkit-mask-position: 0% 50%;   mask-position: 0% 50%; }
  to   { -webkit-mask-position: 100% 50%; mask-position: 100% 50%; }
}
/* Einblicke: ein Ausstellungsraum bei Nacht. Graphitgrund, von oben ein
   breiter, kuehler Lichtkegel, der sehr langsam von links nach rechts
   schwenkt, dazu ein feines, stehendes Linienraster, das erst beim Hinsehen
   auffaellt. Keine Farbe ausser dem Markenblau. */
html:not(.admin):not(.admin-login) #einblicke {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 96px),
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(var(--marke-hell-rgb),.16), transparent 70%),
    linear-gradient(180deg, #0b0d11 0%, #08090d 100%);
  overflow: hidden; isolation: isolate;
}
html:not(.admin):not(.admin-login) #einblicke::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: -10%; width: 60%;
  z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(180,205,230,.07) 45%, rgba(var(--akzent-rgb),.09) 55%, transparent);
  transform: skewX(-14deg);
  animation: einblicke-kegel 48s ease-in-out infinite alternate;
}
@keyframes einblicke-kegel {
  from { transform: translate3d(0, 0, 0) skewX(-14deg); }
  to   { transform: translate3d(110%, 0, 0) skewX(-14deg); }
}
/* Wer Bewegung abgeschaltet hat, bekommt das Licht stehend. */
@media (prefers-reduced-motion: reduce) {
  html:not(.admin):not(.admin-login) #ueber-uns::after,
  html:not(.admin):not(.admin-login) #ankauf::after,
  html:not(.admin):not(.admin-login) #einblicke::after,
  html:not(.admin):not(.admin-login) #finanzierung::after { animation: none; }
  html:not(.admin):not(.admin-login) #finanzierung::after { -webkit-mask-position: 50% 50%; mask-position: 50% 50%; }
}
/* Eine haarfeine, zur Mitte hin leuchtende Kante trennt die Abschnitte,
   statt dass zwei Dunkeltoene stumpf aneinanderstossen. */
html:not(.admin):not(.admin-login) #ueber-uns,
html:not(.admin):not(.admin-login) #ankauf,
html:not(.admin):not(.admin-login) #finanzierung,
html:not(.admin):not(.admin-login) #einblicke { position: relative; }
html:not(.admin):not(.admin-login) #ueber-uns::before,
html:not(.admin):not(.admin-login) #ankauf::before,
html:not(.admin):not(.admin-login) #finanzierung::before,
html:not(.admin):not(.admin-login) #einblicke::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--akzent-rgb),.35), transparent);
  pointer-events: none;
}
/* Fotos in diesen Abschnitten: ein Hauch Blau im Schatten, damit sie im
   Licht stehen statt auf der Flaeche zu kleben. */
html:not(.admin):not(.admin-login) #ueber-uns .about-photo,
html:not(.admin):not(.admin-login) #ankauf .about-photo,
html:not(.admin):not(.admin-login) #finanzierung .about-photo {
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(var(--akzent-rgb),.12), 0 0 80px rgba(var(--marke-hell-rgb),.12);
}