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

:root {
  --navy:   #15151a;   /* Carbon / Anthrazit */
  --navy2:  #1d1e25;
  --gold:   #1c6e8c;   /* Petrolblau (Markenfarbe, Akzent) */
  --gold2:  #2585a8;   /* Petrolblau hover */
  --rose:   #7fb2c4;   /* Heller Blauton für Text/Zahlen auf Dunkel */
  --white:  #ffffff;
  --off:    #f5f3ef;   /* Warmes Creme */
  --text:   #1e2535;
  --muted:  #6b7280;
  --border: #e7e1d7;
  --radius: 12px;
  --shadow: 0 4px 24px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.14);
  --transition: .25s ease;
}

/* 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(--white);
  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(28,110,140,.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(21,21,26,.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) */
.site-header.nav-open {
  background: var(--navy);
  box-shadow: none;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.logo { display: flex; flex-direction: column; line-height: 1; gap: 1px; }
.logo-mark { width: 127px; height: auto; display: block; }
.logo-word { font-size: .64rem; font-weight: 600; color: rgba(255,255,255,.72); letter-spacing: .01em; }
.logo-gmbh { font-size: .62em; font-weight: 400; color: rgba(255,255,255,.55); letter-spacing: .04em; }
/* 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(--white);
  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;
  /* gleichmaessig dunkel (wie links), nach rechts nur leicht heller */
  background-image:
    linear-gradient(180deg, rgba(21,21,26,.55) 0%, rgba(21,21,26,0) 26%),
    linear-gradient(90deg, rgba(21,21,26,.9) 0%, rgba(21,21,26,.78) 48%, rgba(21,21,26,.62) 100%),
    url('https://images.unsplash.com/photo-1580273916550-e323be2ae537?w=1920&h=913&fit=crop&q=80&auto=format');
  background-position: center 30%;
  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-cta                     { order: 8; }
.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; }
}

.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); }
.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(21,21,26,.74), rgba(21,21,26,.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(--gold);
  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(--navy);
  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(201,168,76,.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(--gold2); }

/* ─── 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(201,168,76,.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: 24px;
  margin-top: 48px;
}
.service-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 24px;
  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); }
.service-icon {
  width: 56px; height: 56px;
  background: rgba(201,168,76,.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  margin-bottom: 20px;
}
.service-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.service-card p { font-size: .9rem; line-height: 1.6; }

/* ─── BEWERTUNGEN ─── */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
  margin-bottom: 48px;
}
.review-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stars { color: var(--gold); 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(--gold);
}
.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(--gold); 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(--gold); }

.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(--white);
  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(--border);
  border-radius: 8px;
  background: #fff;
  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(--gold);
  box-shadow: 0 0 0 3px rgba(28,110,140,.15);
}
.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: #b3261e; }
#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(--gold); text-decoration: underline; }
.form-consent a:hover { color: var(--gold2); }
/* 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 Flo 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(21,21,26,.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 ─── */
.fin-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 44px; align-items: stretch; }
.fin-inputs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  background: var(--white); 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(--gold); 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(--gold); font-weight: 700; }
.fin-result {
  background: var(--navy); 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: 1fr; }
}

/* ─── BEWERTUNGEN ─── */
.rating-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  background: var(--white); 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(--gold); 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(--border); border-radius: 999px;
  background: rgba(255,255,255,.6);
  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(--white); 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(--off); 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(--white); border: 1px solid var(--border); 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(--gold); 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; }
.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(--gold); }
.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(--off); 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(--gold); }
.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(--gold); 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(--off); 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(--white); 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(--gold); 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(--gold); border-bottom-color: currentColor; }
.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(21,21,26,.04); transform: none; }
.btn-outline-red { border: 2px solid var(--gold); color: var(--gold); background: transparent; }
.btn-outline-red:hover { background: var(--gold); color: #fff; 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(--gold); 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(--gold);
  background: rgba(28,110,140,.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(--gold); }
/* Ä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(--white); 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: #e9e6e0; 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(--gold); margin-top: 4px; }
@media (max-width: 860px) {
  .fz-grid { grid-template-columns: 1fr; gap: 26px; }
  .fz-info { position: static; }
}
@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(21,21,26,.72), rgba(40,18,22,.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(21,21,26,.82) 0%, rgba(21,21,26,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(--white);
  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(--gold);
}
.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;
}
/* Auf schmalen Schirmen bricht die Leiste auf drei Zeilen um. Klebrig
   wuerde sie dort die halbe Anzeige verdecken – dann lieber mitscrollen. */
@media (max-width: 880px) {
  .veh-filters { position: static; }
}
.section-dark .veh-filters { background: var(--navy); }
.section-light .veh-filters { background: var(--off); }
.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(21,21,26,.6); color: #fff; cursor: pointer;
  color-scheme: dark; backdrop-filter: blur(6px);
}
.veh-filters select:focus { outline: none; border-color: var(--gold2); box-shadow: 0 0 0 2px rgba(37,133,168,.55); }
.veh-reset {
  font-family: inherit; font-size: .8rem; font-weight: 700; padding: 8px 12px; cursor: pointer;
  white-space: nowrap;
  background: rgba(21,21,26,.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; }

.veh-card {
  background: #fff; 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: #e9e6e0; 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: #f0eee9; color: #c8c2b8; }
.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; }
.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(--gold); }
.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(--gold); }
.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(--white); 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(--off); border-radius: 999px; padding: 2px 7px;
  font-variant-numeric: tabular-nums;
}
.shop-chip:hover { border-color: var(--gold); color: var(--gold); }
.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(--off); }
/* 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(--white); border: 1px solid var(--border); 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(--gold); color: var(--gold); 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(--white); 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(--off); }
.mehrfach-zeile input { accent-color: var(--gold); 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(--gold); }

.shop-liste .veh-filters select,
.shop-liste .veh-reset {
  background: var(--white); color: var(--text); border-color: var(--border);
  color-scheme: light; 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(--white);
  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(--gold); font-weight: 700;
}
.shop-liste .veh-filters button.veh-reset:hover {
  background: var(--gold2); border-color: var(--gold2); 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(--gold); }
/* 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(28,110,140,.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,#ddd9d2,#ece9e3,#ddd9d2); 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,#e3e0d9,#efece6,#e3e0d9); 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: #fff; 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: #f1efe9; }
.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(--gold); }
.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(--gold); 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(--gold); 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(--off); }

/* ─── FOOTER ─── */
.site-footer {
  background: var(--navy);
  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; flex-direction: column; line-height: 1.1; align-items: flex-start; }
.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(--gold2);
  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;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    /* 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; }
  .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; }

  /* 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(--white); }
.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(--gold); }
.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(21,21,26,.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: #f0eee9; }
.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: #fff; color: var(--text); border-color: var(--border);
  color-scheme: light; backdrop-filter: none;
}
.mw-filters select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(28,110,140,.15); }
.mw-reset {
  background: #fff; color: var(--text); border-color: var(--border);
}
.mw-reset:hover { background: var(--off); border-color: var(--gold); color: var(--gold); }
.mw-count { color: var(--muted); }
.mw-empty { color: var(--muted); }
.mw-empty a { color: var(--gold); 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(21,21,26,.6); border-color: rgba(255,255,255,.2); color: #fff;
}
.section-dark .blatt button:hover:not(:disabled):not(.hier) { border-color: var(--gold2); 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(--white); border: 1px solid var(--border);
  border-radius: 9px; transition: var(--transition);
}
.blatt button:hover:not(:disabled):not(.hier) { border-color: var(--gold); color: var(--gold); }
.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(--white); 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(--white); 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(--gold); 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(21,21,26,.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(21,21,26,.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(21,21,26,.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(21,21,26,.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(21,21,26,.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(21,21,26,.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(21,21,26,.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(--white); 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(--gold); background: var(--white); color: var(--gold);
  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: #f1efea; 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(28,110,140,.16); }
.mwk-tag.belegt { background: var(--gold); color: #fff; cursor: not-allowed; }
.mwk-tag.vergangen { background: none; color: #c9c3b8; cursor: default; }
.mwk-tag.spanne { background: rgba(28,110,140,.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: #f1efea; }
.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(--gold); }

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

/* 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(--gold); 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(--white); 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 (#1c6e8c) 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(--gold); 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: 18px; }


@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(--white); 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(--gold); }
.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(--gold);
  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(--off); 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(--white); border-left: 3px solid var(--gold);
  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(--gold); }

/* ── Demo-Verweis auf den Adminbereich (rechts in der Navigation) ──
   Fuer Kundenprojekte einfach die .nav-admin-Links aus den Seiten entfernen. */
.nav-admin {
  /* Die Leiste sortiert per Flex-order (s. o.) – 10 heisst: ganz rechts,
     noch hinter dem Anruf-Knopf (order 8). */
  order: 10;
  margin-left: .35rem;
  padding: .5rem .95rem;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  font-size: .82rem;
  letter-spacing: .02em;
  color: rgba(255,255,255,.78);
  white-space: nowrap;
}
.nav-admin:hover { border-color: rgba(255,255,255,.62); color: #fff; }