/* ============================================================
   caravan-dealer.net — Öffentliche Seite · Kandidat B „Neu denken“

   Konzept: Tiefes Kino-Schwarz statt Steintextur. Eine einzige
   warme Glut-Horizontlinie tritt unter dem Hero-Artwork aus —
   als würde der Sonnenuntergang des Logos in die Seite bluten.
   Gold nur als Kanten-Licht (vertikale Gradient-Haarlinien an
   Karten und Panels), Chrom für Headlines, feines prozedurales
   Korn in natürlicher Kachelgröße (gestochen scharf bei jeder
   Auflösung, kein Raster-Upscaling).

   Mobile-first. Breakpoints: 640 / 768 / 1024.
   Setzt tokens.css voraus (Farben, .btn, .chrome-text, .gold-text).
   ============================================================ */

/* ---------- 0) Lokale Design-Variablen (nur diese Datei) ---------- */

body.public-page {
  /* Flächen — warm abgestufte Fast-Schwarz-Panels */
  --pb-black:    #070605;
  --pb-panel-hi: #15100a;
  --pb-panel:    #0d0a07;
  --pb-panel-lo: #0a0806;

  /* Radius-Sprache: knapper, technischer als bisher */
  --pb-r-card:  10px;
  --pb-r-ui:    9px;
  --pb-r-panel: 14px;

  /* Kanten-Licht: Gold-Haarlinie, oben hell (Lichtkante), unten fast aus */
  --pb-frame:       linear-gradient(180deg, rgba(244, 214, 140, 0.40) 0%, rgba(201, 150, 58, 0.15) 42%, rgba(236, 231, 221, 0.06) 100%);
  --pb-frame-muted: linear-gradient(180deg, rgba(236, 231, 221, 0.16) 0%, rgba(236, 231, 221, 0.05) 100%);
  --pb-hairline-x:  linear-gradient(90deg, rgba(201, 150, 58, 0) 0%, rgba(201, 150, 58, 0.55) 50%, rgba(201, 150, 58, 0) 100%);

  /* Feines Korn: SVG-feTurbulence, 160-px-Kachel in NATÜRLICHER Größe —
     kein Raster, daher bei QHD/Retina immer scharf */
  --pb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- 1) Grundgerüst / Atmosphäre ---------- */

body.public-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Solides, warmes Fast-Schwarz als Grundfläche (Luminanz « 0.05) */
  background-color: var(--pb-black);
  overflow-x: hidden;
  overflow-x: clip;
}

/* Atmosphäre (fixiert): Korn in natürlicher Kachelgröße, Vignette,
   sehr leiser Glut-Boden. Rein prozedural — keine Rasterbilder. */
body.public-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--pb-grain) left top / 160px 160px repeat,
    radial-gradient(130% 100% at 50% 40%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.38) 100%),
    radial-gradient(1200px 520px at 50% 108%, rgba(224, 123, 31, 0.045) 0%, rgba(224, 123, 31, 0) 70%),
    linear-gradient(180deg, #0b0806 0%, var(--pb-black) 34%);
  background-color: var(--pb-black);
}

body.public-page ::selection {
  background: rgba(201, 150, 58, 0.35);
  color: var(--chrome-hi);
}

.site-main {
  /* Über dem Header-Fade stapeln: Suchleiste und Karten werden
     nie vom Verlauf überdeckt (das war das „Ertrinken“ der Suche) */
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  width: 100%;
  max-width: 1270px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px) clamp(16px, 3vw, 32px) 8px;
}

.site-main-narrow {
  max-width: 720px;
}

/* Buttons folgen der knapperen Radius-Sprache dieser Seite */
.btn {
  border-radius: var(--pb-r-ui);
}

/* ---------- 2) Header + Glut-Horizont ---------- */

.site-header {
  /* EXAKT die Randpixel-Farbe von hero-desktop.jpg / logo-emblem.jpg
     (gemessen: reines Schwarz) — nur so fließt das Artwork bündig ein */
  background: #000;
  position: relative;
}

/* Horizont unter dem Hero: oben garantiert reines #000 (bündig zum
   Artwork), darunter tritt eine warme Glutlinie aus dem Schwarz —
   der Sonnenuntergang des Logos setzt sich in der Seite fort.
   Liegt hinter .site-main (z-index), überdeckt also nie Inhalte. */
.site-header::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: clamp(200px, 26vw, 340px);
  background:
    linear-gradient(180deg, #000 0px, #000 36px, rgba(0, 0, 0, 0.92) 96px, rgba(0, 0, 0, 0) 100%),
    radial-gradient(1100px 62% at 50% 0%, rgba(224, 123, 31, 0.15) 0%, rgba(224, 123, 31, 0.03) 55%, rgba(224, 123, 31, 0) 76%);
  pointer-events: none;
}

.header-logo {
  display: flex;
  justify-content: center;
  /* Mobil: Hero-Bild randlos bis zum Bildschirmrand */
  padding: 0;
}

.header-hero-link {
  display: block;
  width: 100%;
  line-height: 0; /* kein Zwischenraum unter dem Bild */
}

.header-logo picture {
  display: flex;
  justify-content: center;
  width: 100%;
}

.header-logo img {
  width: 100%;
  height: auto;
}

/* Kontaktzeile: Gold-Eyebrow, Chrom-Nummer, ruhige Note.
   Mobil ausgeblendet — das Hero-Bild zeigt WhatsApp-Nummer + „Jederzeit erreichbar"
   bereits und ist tappbar; die Zeile erscheint erst ab Desktop (≥768px) unter dem Banner. */
.header-contact {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px 20px;
  text-align: center;
}

.header-contact-label {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--gold);
  font-size: 1.05rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em; /* optischer Ausgleich der Sperrung */
  text-transform: uppercase;
}

.header-contact-number {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 10px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 8vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: 0.03em;
}

.header-contact-note {
  color: var(--text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  /* Volles Hero-Artwork (Kundenvorlage), randlos, verschmilzt mit #000 */
  .header-logo {
    padding: 0;
  }
  .header-logo img {
    width: 100%;
    max-width: 1440px;
  }
  /* Schlanke Kontaktzeile unter dem Banner, Nummer von feinen
     Gold-Haarlinien flankiert (Nummer im JPEG ist nicht klickbar) */
  .header-contact {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding: 8px 16px 20px;
  }
  .header-contact-label {
    font-size: 0.95rem;
    text-indent: 0;
  }
  .header-contact-number {
    position: relative;
    margin: 0 8px;
    font-size: 1.4rem;
  }
  .header-contact-number::before,
  .header-contact-number::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background: linear-gradient(180deg, rgba(201, 150, 58, 0) 0%, var(--line-gold) 50%, rgba(201, 150, 58, 0) 100%);
  }
  .header-contact-number::before { left: -13px; }
  .header-contact-number::after  { right: -13px; }
}

/* Kompakter Header (Impressum / Datenschutz) — gleicher Horizont */
.site-header-compact {
  padding: 20px 16px 4px;
  text-align: center;
}

.header-home-link {
  display: inline-block;
}

.header-home-link img {
  width: 84px;
  height: auto;
  margin: 0 auto;
}

@media (hover: hover) {
  .header-home-link:hover img {
    filter: brightness(1.08);
  }
}

/* ---------- 3) Suchleiste — schwebendes Glas-Kommandodeck ---------- */

.search-bar {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  max-width: 800px;
  margin: 0 auto clamp(24px, 4vw, 40px);
  padding: 12px;
  border: 1px solid transparent;
  border-radius: var(--pb-r-panel);
  /* Solider Fallback ohne backdrop-filter: klar sichtbares Panel */
  background:
    linear-gradient(180deg, #14100a 0%, #0c0906 100%) padding-box,
    var(--pb-frame) border-box;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.85);
}

/* Mattglas: dezent getönt, kräftiger Blur — die Leiste „schwebt" über der Seite */
@supports (backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px)) {
  .search-bar {
    background:
      linear-gradient(180deg, rgba(22, 17, 10, 0.42) 0%, rgba(12, 9, 6, 0.30) 100%) padding-box,
      var(--pb-frame-muted) border-box;
    border-color: transparent;
    -webkit-backdrop-filter: blur(18px) saturate(1.18);
    backdrop-filter: blur(18px) saturate(1.18);
    box-shadow:
      inset 0 1px 0 rgba(244, 214, 140, 0.06),
      0 20px 44px -26px rgba(0, 0, 0, 0.8);
  }
}

.search-input,
.search-price-input {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(7, 6, 5, 0.62);
  border: 1px solid var(--line-soft);
  border-radius: var(--pb-r-ui);
  color: var(--text);
  font-size: 16px; /* verhindert iOS-Zoom */
  padding: 12px 14px;
  min-height: 48px;
}

.search-input {
  flex: 1 1 240px;
  width: 100%;
  /* Gold-Lupe als Inline-SVG (prozedural, keine externe Ressource) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c9963a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px center;
  padding-left: 42px;
}

.search-price {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
}

/* Preisfeld mit €-Zeichen: € liegt als Adornment über dem Input,
   ist NIE Teil des Eingabewerts (Filter bleibt rein numerisch). */
.price-field {
  position: relative;
  width: 116px;
}

.price-field .search-price-input {
  width: 100%;
  min-width: 0;
  padding-right: 30px; /* Platz fürs € */
}

.price-eur {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.95rem;
  pointer-events: none;
}

.search-price-sep {
  color: var(--text-muted);
}

.search-input:focus,
.search-price-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 150, 58, 0.22);
}

.search-input::placeholder,
.search-price-input::placeholder {
  color: var(--text-muted);
}

@media (max-width: 639px) {
  .search-bar { padding: 10px; gap: 8px; }
  .search-input { flex-basis: 100%; }
  .search-price { width: 100%; }
  .price-field { flex: 1 1 0; width: auto; min-width: 0; }
}

/* ---------- Schnellfilter-Badges (priorisieren die Hauptliste, blenden nichts aus) ---------- */

.filter-badges {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 800px;
  /* Unterrand knapp — direkt darunter folgt die Detailfilter-Zeile */
  margin: calc(-1 * clamp(12px, 2vw, 20px)) auto 12px;
}

.filter-badge {
  position: relative; /* Anker für die Prioritätsnummer (überlagert, ändert die Breite nicht) */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  background: rgba(7, 6, 5, 0.62);
  color: var(--gold-bright);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.filter-badge.is-active {
  background: var(--grad-gold);
  border-color: transparent;
  color: #181008;
}

.filter-badge:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (hover: hover) {
  .filter-badge:not(.is-active):hover { border-color: rgba(201, 150, 58, 0.55); color: var(--gold-hi); }
}

/* Prioritätsnummer bei Mehrfachauswahl: als Blase oben rechts ÜBERLAGERT,
   damit die Badge-Breite konstant bleibt (kein Umbruch der Badge-Zeile) */
.badge-num {
  position: absolute;
  top: -7px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--line-gold);
  background: rgba(24, 16, 8, 0.95);
  color: var(--gold-bright);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

@media (max-width: 520px) {
  .filter-badge { flex: 1 1 calc(50% - 5px); justify-content: center; padding: 0 10px; font-size: 0.85rem; }
}

/* ---------- Detailfilter (typbezogen): Achse · zul. Gesamtmasse ---------- */
/* Bewusst dezenter als die Kategorie-Badges — zweite Filterebene */

/* Mobil (Basis): zwei linksbündige Zeilen als Raster — feste Label-Spalte + 2 GLEICH breite
   Chips (1fr/1fr), dadurch fluchten alle vier Chips exakt. Ab 768px: eine Zeile, Gruppen
   nebeneinander mit goldenem Trennbalken (--gold). */
.detail-filters {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 520px;
  margin: 0 0 clamp(24px, 4vw, 40px); /* linksbündig zur Inhaltskante */
}

.detail-group {
  display: grid;
  grid-template-columns: 96px 1fr 1fr;
  align-items: center;
  gap: 8px;
}

.detail-label {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.detail-chip {
  position: relative; /* Anker für die unsichtbare Hitbox-Erweiterung */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(7, 6, 5, 0.5);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap; /* "bis 3,5 t" darf im Chip nicht intern umbrechen */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Unsichtbare Hitbox-Erweiterung auf effektiv 44px (Touch-Empfehlung), Chip bleibt optisch klein */
.detail-chip::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
}

.detail-chip.is-active {
  border-color: var(--gold);
  background: rgba(201, 150, 58, 0.12);
  color: var(--gold-bright);
}

.detail-chip:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (hover: hover) {
  .detail-chip:not(.is-active):hover { border-color: rgba(201, 150, 58, 0.45); color: var(--text); }
}

@media (max-width: 520px) {
  /* Mobil: knappere Abstände — der Filter-Kopf soll möglichst wenig vom ersten Video verdecken */
  .filter-badges { margin-bottom: 10px; }
  .detail-filters { margin-bottom: 16px; }
  .detail-chip { padding: 0 8px; }
}

@media (max-width: 360px) {
  /* Sehr schmale Phones: schmalere Label-Spalte + kompaktere Chips, damit nichts überläuft */
  .detail-group { grid-template-columns: 86px 1fr 1fr; gap: 6px; }
  .detail-chip { font-size: 0.8rem; padding: 0 4px; }
}

@media (min-width: 768px) {
  /* Tablet/Desktop: beide Gruppen in EINER Zeile, getrennt durch goldenen Balken */
  .detail-filters {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0; /* Abstand macht der Trennbalken (22px je Seite) — symmetrisch */
    width: fit-content;
    max-width: 100%;
    margin: 0 auto clamp(24px, 4vw, 40px);
  }
  .detail-group {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .detail-group + .detail-group {
    position: relative;
    margin-left: 22px;
    padding-left: 22px;
  }
  .detail-group + .detail-group::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 26px;
    border-radius: 1px;
    background: var(--gold);
  }
  .detail-label { padding-right: 4px; }
}

/* Keine Treffer: gleiches Panel-Vokabular wie das Suchdeck */
.no-results {
  max-width: 560px;
  margin: 0 auto clamp(20px, 4vw, 32px);
  padding: 26px 20px;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--pb-r-panel);
  background:
    linear-gradient(180deg, var(--pb-panel-hi) 0%, var(--pb-panel-lo) 100%) padding-box,
    var(--pb-frame) border-box;
}

.no-results p {
  margin: 0 0 14px;
  color: var(--text-muted);
}

/* ---------- 4) Fahrzeug-Grid ---------- */

/* ---------- Startseiten-Abschnitte: „direkt verfügbar" + Bestellfahrzeuge ---------- */
.home-section { margin: 0; }
.home-section[hidden] { display: none; }

.section-heading {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.05;
  text-align: center;
  overflow-wrap: break-word;
  margin: clamp(6px, 2vw, 16px) auto clamp(16px, 3vw, 26px);
}
.avail-heading {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  color: var(--chrome-hi);
}
.order-section { margin-top: clamp(20px, 4vw, 34px); }
.order-heading {
  font-size: clamp(1.25rem, 3.8vw, 1.9rem);
  color: var(--gold-bright);
}

.order-divider {
  border: 0;
  height: 1px;
  max-width: 800px;
  margin: clamp(30px, 6vw, 56px) auto clamp(4px, 2vw, 14px);
  background: var(--pb-hairline-x);
}
.order-divider[hidden] { display: none; }

/* ---------- Pagination (Seiten-Navigation der Hauptliste) ---------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: clamp(28px, 5vw, 44px) auto 0;
}
.pagination[hidden] { display: none; }

.page-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
  border-radius: var(--pb-r-ui);
  background: rgba(7, 6, 5, 0.55);
  color: var(--gold-bright);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.page-btn.is-active {
  background: var(--grad-gold);
  color: #181008;
  border-color: transparent;
  box-shadow: 0 2px 10px -4px rgba(201, 150, 58, 0.5);
}
.page-btn.page-nav { font-size: 1.4rem; }
.page-btn:disabled { opacity: 0.35; cursor: default; }
.page-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
@media (hover: hover) {
  .page-btn:not(.is-active):not(:disabled):hover { background: rgba(201, 150, 58, 0.16); }
}
.page-ellipsis {
  color: var(--text-muted);
  padding: 0 2px;
  align-self: flex-end;
  user-select: none;
}

/* Auswahl „Pro Seite" unter dem Seitenwähler — bewusst dezenter als die Seitenzahlen */
.per-page {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px 10px;
  margin: clamp(20px, 4vw, 32px) auto 0;
}
.per-page[hidden] { display: none; }
/* Steht der Seitenwähler darüber, reicht ein kleiner Abstand */
.pagination:not([hidden]) + .per-page { margin-top: 12px; }

.per-page-label {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.per-page-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.per-page-btn {
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--pb-r-ui);
  background: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.per-page-btn.is-active {
  color: var(--gold-bright);
  box-shadow: inset 0 -2px 0 0 var(--gold);
}
.per-page-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
@media (hover: hover) {
  .per-page-btn:not(.is-active):hover { color: var(--gold-bright); }
}

.vehicle-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 3vw, 32px);
}

.vehicle-cell {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .vehicle-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .vehicle-cell {
    max-width: none;
    margin: 0;
  }
}

@media (min-width: 1024px) {
  .vehicle-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- 5) Fahrzeug-Karte — flache Platte mit Kanten-Licht ---------- */

.vehicle-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  border-radius: var(--pb-r-card);
  /* Dunkle Platte, Gold-Lichtkante oben, die nach unten verlischt */
  background:
    linear-gradient(180deg, var(--pb-panel-hi) 0%, var(--pb-panel) 55%, var(--pb-panel-lo) 100%) padding-box,
    var(--pb-frame) border-box;
  overflow: hidden;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .vehicle-card {
    transition: transform 160ms ease-out, box-shadow 160ms ease-out;
  }
  .vehicle-card:hover {
    transform: translateY(-3px);
    box-shadow:
      0 22px 44px -22px rgba(0, 0, 0, 0.9),
      0 0 32px rgba(201, 150, 58, 0.10);
  }
}

/* Scroll-Reveal: Startzustand nur wenn JS die Klasse setzt (No-JS => sichtbar).
   Wirkt auf die Zelle, nicht die Karte, damit der Hover-Transform unberührt bleibt. */
.vehicle-grid.reveal-on .vehicle-cell {
  opacity: 0;
  transform: translateY(18px);
}
.vehicle-grid.reveal-on .vehicle-cell.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.card-media {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 0; /* Karte clippt via overflow:hidden */
  overflow: hidden;
  background: var(--pb-panel-lo);
}

.card-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Nativer Fullscreen (Player-Button): Hochformat BEIBEHALTEN statt cover-Zerrung.
   WICHTIG: :fullscreen und :-webkit-full-screen MÜSSEN getrennte Regeln sein —
   eine unbekannte Pseudoklasse invalidiert sonst die gesamte Selektorliste. */
.card-media video:fullscreen {
  object-fit: contain;
  background: #000;
}

.card-media video:-webkit-full-screen {
  object-fit: contain;
  background: #000;
}

.card-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: opacity 200ms ease;
}

/* Marken-Fallback, wenn kein Poster existiert (nie schwarzes Loch);
   Emblem wird verkleinert dargestellt — kein Upscaling */
.card-poster-fallback {
  background: radial-gradient(120% 80% at 50% 110%, rgba(224, 123, 31, 0.08) 0%, rgba(224, 123, 31, 0) 60%), var(--pb-panel);
}

.card-poster-fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/logo-emblem.jpg') center center / 62% auto no-repeat;
  opacity: 0.09;
}

/* Play-Button: feiner Gold-Ring, dunkles Glas, Glut-Halo */
.play-btn {
  position: absolute;
  top: 72%; /* einheitlich etwas unterhalb der Mitte (auch bei verkauften, unter dem Band) */
  left: 50%;
  z-index: 4; /* über dem Verkauft-Band: sichtbar + Fokusring nicht verdeckt (QA-Finding) */
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(244, 214, 140, 0.85);
  background: radial-gradient(circle at 35% 30%, rgba(35, 26, 16, 0.55) 0%, rgba(7, 6, 5, 0.62) 100%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow:
    0 0 0 6px rgba(7, 6, 5, 0.28),
    0 0 30px rgba(224, 123, 31, 0.22);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: opacity 200ms ease;
  -webkit-tap-highlight-color: transparent;
}

.play-triangle {
  width: 24px;
  height: 28px;
  margin-left: 5px;
  background: var(--grad-chrome);
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@media (hover: hover) {
  .play-btn:hover {
    background: radial-gradient(circle at 35% 30%, rgba(45, 33, 20, 0.7) 0%, rgba(7, 6, 5, 0.78) 100%);
    box-shadow:
      0 0 0 6px rgba(7, 6, 5, 0.38),
      0 0 40px rgba(224, 123, 31, 0.35);
  }
}

/* Video läuft: Poster + Play-Button ausblenden (JS setzt die Klasse) */
.card-media.is-playing .card-poster,
.card-media.is-playing .play-btn {
  opacity: 0;
  pointer-events: none;
}

/* --- Typo-Rhythmus: Eyebrow → Titel → Fakten → Preisblock --- */

.card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 20px;
}

/* Meta-Zeile rückt als goldenes Eyebrow ÜBER den Titel (nur visuell,
   DOM-/Vorlese-Reihenfolge bleibt unverändert) */
.card-meta {
  order: -1;
  margin: 0;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 3.7vw, 1.42rem);
  line-height: 1.1;
  letter-spacing: 0.03em;
  overflow-wrap: anywhere;
}

.card-specs {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.card-desc-wrap {
  margin: 0;
}

.card-desc {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Die Beschreibung kann jetzt Basis-HTML enthalten (Absätze, Listen, Fett/Kursiv).
   Eingeklappt (3 Zeilen) die Kind-Margins neutralisieren, damit der Clamp sauber zählt. */
.card-desc > * { margin: 0; }
.card-desc ul { padding-left: 1.15em; list-style: disc; }
.card-desc ol { padding-left: 1.15em; list-style: decimal; }
.card-desc strong, .card-desc b { color: var(--text); }

.card-desc:empty {
  display: none;
}

.card-desc.is-expanded {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}

/* Ausgeklappt: lesbare Abstände wiederherstellen */
.card-desc.is-expanded > * + * { margin-top: 0.5em; }
.card-desc.is-expanded ul,
.card-desc.is-expanded ol { padding-left: 1.35em; }
.card-desc.is-expanded li + li { margin-top: 0.25em; }

.desc-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin: -8px 0 -12px;
  padding: 0 2px;
  background: none;
  border: 0;
  color: var(--gold-bright);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.desc-toggle[hidden] {
  display: none;
}

@media (hover: hover) {
  .desc-toggle:hover {
    color: var(--gold-hi);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* Preisblock: großer Gold-Preis, MwSt. eng darunter, Finanzierung als Chip.
   margin-top:auto verankert Preis→MwSt→Finanzierung→Trennlinie→Buttons als
   unten bündigen Block; der Ausgleichsplatz landet zwischen Beschreibung und Preis
   (einheitliche Karten, egal ob „mehr anzeigen" vorhanden ist). */
.card-price {
  margin: auto 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 5vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
}

.card-vat {
  margin: -4px 0 0;
  color: var(--text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.card-financing {
  align-self: flex-start;
  margin: 2px 0 0;
  padding: 6px 12px;
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  background: rgba(201, 150, 58, 0.08);
  color: var(--gold-bright);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Horizontale Haarlinie: Gold, das an den Enden verlischt */
.card-hairline {
  border: 0;
  width: 100%;
  height: 1px;
  margin: 4px 0 2px;
  background: var(--pb-hairline-x);
}

.card-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.card-cta .btn {
  min-width: 0;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 0.95rem;
}

.card-cta > .btn:only-child {
  grid-column: 1 / -1;
}

/* Teilen-Button: eigene Zeile über die volle Breite (immer sichtbar, auch bei verkauften) */
.card-cta .share-btn {
  grid-column: 1 / -1;
}
/* Ohne E-Mail-Button (nur WhatsApp + Teilen): WhatsApp nimmt die ganze erste Zeile */
.card-cta > .btn:first-child:nth-last-child(2) {
  grid-column: 1 / -1;
}
.share-btn.is-copied {
  border-color: var(--gold-bright);
  color: var(--gold-hi);
}

/* Geteilter Link geöffnet: Zielkarte kurz hervorheben */
.vehicle-cell {
  scroll-margin-top: 24px;
}
.vehicle-cell.is-shared .vehicle-card {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  animation: shared-pulse 2.4s ease;
}
@keyframes shared-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 150, 58, 0); }
  18%      { box-shadow: 0 0 0 7px rgba(201, 150, 58, 0.3); }
}
@media (prefers-reduced-motion: reduce) {
  .vehicle-cell.is-shared .vehicle-card { animation: none; }
}

/* ---------- 6) Verkauft: Plaketten-Band + Ausgrauen (7 Tage sichtbar) ---------- */

/* Neuinterpretation: statt rotem Gummistempel ein kinoreifes
   Rauchglas-Band quer über dem Video — ROTE Lettern (explizite Kundenanforderung),
   rote Haarlinien rahmen das Band, dunkles Glas sichert die Lesbarkeit. */
.sold-stamp {
  opacity: 1;
  transition: opacity 400ms ease; /* Fade beim Abspielen aus, bei Stopp wieder ein */
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%) rotate(-6deg);
  width: 130%;
  padding: 10px 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 8vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: #e04545;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  background:
    linear-gradient(90deg, rgba(224, 69, 69, 0) 0%, rgba(224, 69, 69, 0.8) 50%, rgba(224, 69, 69, 0) 100%) left top / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(224, 69, 69, 0) 0%, rgba(224, 69, 69, 0.8) 50%, rgba(224, 69, 69, 0) 100%) left bottom / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(10, 7, 6, 0.94) 0%, rgba(10, 7, 6, 0.90) 100%); /* deckender: Rot-Kontrast auch über hellen Videos ≥ 4,5:1 */
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  pointer-events: none; /* Video bleibt abspielbar */
  white-space: nowrap;
}

/* Video/Poster bleiben bewusst in Farbe — nur Band, Texte und Buttons
   kennzeichnen den Verkauf */

/* Rahmen der verkauften Karte: Gold-Kante weicht stiller Silberkante */
.vehicle-card.is-sold {
  background:
    linear-gradient(180deg, #100d0a 0%, var(--pb-panel-lo) 100%) padding-box,
    var(--pb-frame-muted) border-box;
}

/* Schrift ausgrauen: Chrom-/Gold-Gradienten neutralisieren */
.is-sold .card-title,
.is-sold .card-price {
  background: none;
  -webkit-text-fill-color: var(--text-muted);
  color: var(--text-muted);
}

/* Während der Wiedergabe blendet der VERKAUFT-Stempel aus (Pause/Ende: wieder ein) */
.card-media.is-running .sold-stamp {
  opacity: 0;
}

/* Kontrast-Anhebung Preis (QA-Finding): dunkelster Verlaufsstopp heller als im Token,
   nur öffentlich — Token bleibt unangetastet (Admin nutzt ihn weiter). */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .vehicle-card:not(.is-sold) .card-price.gold-text {
    background: linear-gradient(160deg, #f4d68c 0%, #cf9c40 45%, #b07f2c 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}

.is-sold .card-meta,
.is-sold .card-specs,
.is-sold .card-desc,
.is-sold .card-vat,
.is-sold .card-financing,
.is-sold .desc-toggle {
  color: var(--text-muted);
}

.is-sold .card-financing {
  border-color: var(--line-soft);
  background: transparent;
}

.is-sold .card-hairline {
  background: linear-gradient(90deg, rgba(236, 231, 221, 0) 0%, rgba(236, 231, 221, 0.16) 50%, rgba(236, 231, 221, 0) 100%);
}

/* Deaktivierte Kontakt-Buttons (verkauft) */
.btn-disabled {
  background: #131009;
  border-color: var(--line-soft);
  color: var(--text-muted);
  cursor: default;
  pointer-events: none;
  user-select: none;
}

/* ---------- 7) Empty State — Glut-Horizont statt Artwork-Box ---------- */

.video-error {
  position: absolute;
  inset: auto 12px 12px;
  margin: 0;
  padding: 10px 14px;
  background: rgba(7, 6, 5, 0.92);
  border: 1px solid rgba(214, 79, 79, 0.55);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.9rem;
  text-align: center;
}

.empty-state {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 80px) clamp(20px, 4vw, 56px) clamp(44px, 6vw, 64px);
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--pb-r-panel);
  /* Prozedurale Bühne: Glut steigt vom Boden auf, Goldlicht von oben */
  background:
    radial-gradient(120% 85% at 50% 120%, rgba(224, 123, 31, 0.20) 0%, rgba(224, 123, 31, 0.05) 45%, rgba(224, 123, 31, 0) 72%) padding-box,
    radial-gradient(90% 60% at 50% -12%, rgba(201, 150, 58, 0.10) 0%, rgba(201, 150, 58, 0) 60%) padding-box,
    linear-gradient(180deg, var(--pb-panel-hi) 0%, var(--pb-panel-lo) 100%) padding-box,
    var(--pb-frame) border-box;
  overflow: hidden;
}

/* Emblem kehrt zurück: klein (verkleinert = scharf), mit Glut-Halo */
.empty-emblem {
  display: block;
  width: 136px;
  height: auto;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(201, 150, 58, 0.40),
    0 10px 44px rgba(224, 123, 31, 0.25);
}

.empty-headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 7vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: 0.04em;
}

.empty-text {
  margin: 0 0 8px;
  color: var(--text-muted);
}

/* ---------- 8) Rechtsseiten (Impressum / Datenschutz) ---------- */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  color: var(--gold-bright);
  text-decoration: none;
  font-size: 0.95rem;
}

@media (hover: hover) {
  .back-link:hover {
    color: var(--gold-hi);
  }
}

.legal-title {
  margin: 4px 0 20px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 7vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: 0.03em;
}

/* Gold-Unterstrich als Marken-Signatur unter dem Seitentitel */
.legal-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  margin-top: 12px;
  background: var(--grad-gold);
}

.legal-note {
  margin: 0 0 26px;
  padding: 12px 16px;
  border: 1px solid var(--line-gold);
  border-radius: 10px;
  background: rgba(201, 150, 58, 0.07);
  color: var(--gold-bright);
  font-size: 0.9rem;
}

/* Rechtstext: großzügigere Zeilenhöhe für dichte Absätze */
.legal-content {
  line-height: 1.7;
}

.legal h2 {
  margin: 40px 0 12px; /* klare Trennung zwischen den Abschnitten */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--chrome-hi);
}

/* Erste Überschrift schließt knapp an den Seitentitel an (kein großer Sprung) */
.legal-content > *:first-child {
  margin-top: 8px;
}

.legal p {
  margin: 0 0 16px;
}

.legal ul {
  margin: 6px 0 18px;
  padding-left: 24px;
}

/* Listenpunkte bekommen Luft und kleben nicht mehr aneinander */
.legal li {
  margin-bottom: 8px;
}

.legal li:last-child {
  margin-bottom: 0;
}

.legal address {
  font-style: normal;
  margin: 0 0 14px;
}

.legal .placeholder {
  color: var(--gold-bright);
}

/* Vom Kunden per WYSIWYG gepflegte Rechtstexte */
.legal-content h3,
.legal-content h4 {
  margin: 28px 0 8px;
  color: var(--chrome-hi);
  font-weight: 700;
}

/* Fallback für per Trix (WYSIWYG) gespeicherte Rechtstexte: Trix erzeugt <div>-Blöcke
   statt <h2>/<p>. Diese bekommen sauberen Absatzabstand; reine <div><strong>…</strong></div>-
   Zeilen (= Abschnittsüberschriften) werden hervorgehoben. Betrifft NUR editierte Inhalte —
   der semantische Default nutzt h2/p/ul (keine Top-Level-<div>). */
.legal-content div {
  margin: 0 0 14px;
}
.legal-content > div:first-child {
  margin-top: 0;
}
.legal-content div:has(> strong:only-child) {
  margin-top: 28px;
  color: var(--chrome-hi);
  font-size: 1.08rem;
}

.legal-content a { color: var(--gold-bright); }
.legal-content strong { color: var(--text); }
.legal-content blockquote {
  margin: 0 0 14px;
  padding: 6px 0 6px 16px;
  border-left: 2px solid var(--line-gold);
  color: var(--text-muted);
}
.legal-content hr {
  border: 0;
  height: 1px;
  background: var(--line-soft);
  margin: 20px 0;
}

/* ---------- 9) Footer — Haarlinie statt harter Kante, leiser Glut-Boden ---------- */

.site-footer {
  position: relative;
  flex-shrink: 0;
  margin-top: clamp(36px, 7vw, 64px);
  padding: 28px 16px 36px;
  border-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

/* Zentrierte Gold-Haarlinie, an den Enden verlischt sie */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 92%);
  height: 1px;
  background: var(--pb-hairline-x);
}

/* Sehr leiser Glut-Schein am unteren Seitenrand */
.site-footer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  z-index: -1;
  background: radial-gradient(640px 150px at 50% 100%, rgba(224, 123, 31, 0.06) 0%, rgba(224, 123, 31, 0) 70%);
  pointer-events: none;
}

/* Rechtlicher Hinweis am Ende der Angebote */
.offers-disclaimer {
  margin: 32px auto 8px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

.footer-wa {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 10px;
  color: var(--gold-bright);
  text-decoration: none;
  font-weight: 600;
}

.footer-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 10px;
  color: var(--text-muted);
  text-decoration: none;
}

.footer-dot {
  color: var(--text-muted);
}

@media (hover: hover) {
  .footer-wa:hover {
    color: var(--gold-hi);
  }
  .footer-nav a:hover {
    color: var(--gold-bright);
  }
}

.footer-copy {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ---------- Ambient-Theater (Hochkant-Wiedergabe auf breiten Bildschirmen) ---------- */

.theater {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: theater-in 200ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .theater { animation: none; }
  /* Reveal-Startzustand neutralisieren — Karten sofort sichtbar, keine Bewegung */
  .vehicle-grid.reveal-on .vehicle-cell {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@keyframes theater-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Mini-Canvas (36×64) bildschirmfüllend skaliert + geblurrt = Live-Ambiente aus dem Video */
.theater-ambient {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  filter: blur(90px) saturate(1.15) brightness(0.55);
}

.theater-stage {
  position: relative;
  z-index: 1;
  height: min(92vh, 92svh);
  aspect-ratio: 9 / 16;
  max-width: 92vw;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(201, 150, 58, 0.35);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8), 0 0 60px rgba(201, 150, 58, 0.08);
  background: #000;
}

.theater-stage video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Hochformat bleibt IMMER erhalten */
}

.theater-close {
  position: absolute;
  z-index: 2;
  top: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: rgba(7, 6, 5, 0.6);
  color: var(--gold-bright);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

@media (hover: hover) {
  .theater-close:hover { background: rgba(201, 150, 58, 0.18); }
}

body.theater-open {
  overflow: hidden;
}

/* Optionaler Theater-Button in der Karte: erscheint nur während der Wiedergabe
   und nur auf breiten Bildschirmen (dort gibt es das Ambiente-Vollbild) */
.theater-btn {
  display: none;
  position: absolute;
  z-index: 5;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(201, 150, 58, 0.55);
  background: rgba(7, 6, 5, 0.55);
  color: var(--gold-bright);
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

@media (min-width: 1024px) {
  .card-media.is-playing .theater-btn { display: inline-flex; }
}

@media (hover: hover) {
  .theater-btn:hover { background: rgba(201, 150, 58, 0.2); }
}