/* =========================================================
   Fahrzeuge – Listing & Detailseiten
   Listing dunkel (User-Entscheidung: gesamte Seite wie Startseite-Hero),
   Detail-Cards bleiben weiss/deckend (siehe .vcard weiter unten).
   ========================================================= */

/* ============ PAGE-HERO (kompakt) ============ */
/* ============ FILTER-BAR ============
   Drei-Zeilen-Layout (Layoutvorgabe ACI, Skizze):
   Zeile 1: Suche · Sortierung · Reset
   Zeile 2: alle Dropdown-Filter kompakt in einer Reihe (Inhaltsbreite)
   Zeile 3: Ausstattungs-Checkboxen inline · Treffer-Anzahl rechts
   Zeile 2+3 = .filter-body, auf Mobile hinter "Filter"-Toggle eingeklappt.
   Dunkel statt weiss, analog .reifen-filter -- die ganze Seite ist jetzt
   dunkel, eine weisse Leiste würde als Fremdkörper zwischen dem dunklen
   Hero-Foto und der dunklen Listing-Sektion sitzen. Transluzent statt
   --surface-dark-anchor (voll deckend): das Hintergrundfoto soll wie im
   Rest der Seite durchscheinen, nicht durch eine solide Flaeche verdeckt
   werden. Blur haelt den Suchtext/Filter-Labels trotzdem lesbar, waehrend
   Karten darunter durchscrollen (sticky). */
.filter-bar {
  background: rgba(13, 14, 17, .55);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--border-hairline-dark);
  position: sticky;
  top: var(--nav-h);
  z-index: 50;
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
  transition: top .25s ease;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .filter-bar { background: rgba(13, 14, 17, .88); }
}
/* .nav verdichtet sich nach ~80px Scroll auf (--nav-h - 6px) (main.js
   .is-scrolled, siehe .nav.is-scrolled .nav-in in main.css) — die
   Filter-Leiste muss ihren Sticky-Offset exakt mitziehen, sonst bleibt eine
   Luecke zwischen Nav-Unterkante und Filter-Leiste stehen. Der vorherige
   feste 58px-Wert stammte noch von einem kleineren --nav-h (heute 108px)
   und war seit dessen Vergroesserung (Platz fuers BVfK-Siegel) veraltet —
   daher die sichtbare Luecke beim Scrollen. calc() statt fixer Wert haelt
   das dauerhaft synchron, falls --nav-h sich nochmal aendert. */
.nav.is-scrolled ~ main .filter-bar { top: calc(var(--nav-h) - 6px); }
.filter-in { max-width: var(--maxw); margin: 0 auto; padding: 8px 24px; }

/* ZEILE 1: Suche + Sortierung + Reset */
.filter-row1 {
  display: flex; align-items: center; gap: 12px;
}
.filter-search { position: relative; flex: 1 1 auto; min-width: 0; }
.filter-search svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; fill: var(--text-on-dark-muted); pointer-events: none;
}
.filter-search input {
  width: 100%; box-sizing: border-box;
  height: 34px;
  padding: 0 14px 0 36px;
  font-size: 13px; color: var(--text-on-dark);
  background: rgba(255,255,255,.06); border: 1px solid var(--border-hairline-dark);
  border-radius: 8px;
  transition: border-color .2s, background .2s;
}
.filter-search input::placeholder { color: var(--text-on-dark-muted); }
.filter-search input:focus-visible { border-color: var(--accent-red); background: rgba(255,255,255,.1); }

.filter-sort { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; white-space: nowrap; }
.filter-sort label { font-size: 11px; color: var(--text-on-dark-muted); }
.filter-sort select {
  height: 34px;
  padding: 0 24px 0 10px;
  background: rgba(255,255,255,.06);
  border: 1.5px solid var(--border-hairline-dark);
  border-radius: 6px;
  font-size: 12px; color: var(--text-on-dark);
  font-family: inherit;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%23ffffff'%3E%3Cpath d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
.filter-sort select option { background: var(--surface-dark-anchor); color: #fff; }

.filter-reset {
  flex: 0 0 auto;
  font-size: 11px; color: var(--red); font-weight: 600;
  background: none; border: none; cursor: pointer;
  padding: 4px 6px; border-radius: 4px;
  white-space: nowrap;
  transition: background .2s;
}
.filter-reset:hover { background: rgba(232,32,40,.16); }

/* "Filter"-Toggle: nur < 768px sichtbar, öffnet/schließt .filter-body */
.filter-toggle {
  display: none;
  align-items: center; gap: 6px;
  height: 34px; padding: 0 12px;
  background: rgba(255,255,255,.06); border: 1.5px solid var(--border-hairline-dark);
  border-radius: 6px;
  font-size: 12px; font-weight: 600; color: var(--text-on-dark);
  cursor: pointer; flex: 0 0 auto;
}
.filter-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.filter-toggle[aria-expanded="true"] { border-color: var(--accent-red); color: var(--accent-red); }

/* ZEILE 2: Dropdown-Filter — kompakte Inhaltsbreite statt volle Grid-Spalten */
.filter-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 6px;
}
.filter-field { display: inline-flex; align-items: center; }
.filter-field label {
  /* visuell versteckt (Select-Optionen sind selbsterklärend: "Alle Marken" etc.),
     bleibt aber für Screenreader zugänglich */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.filter-field select {
  height: 32px;
  padding: 0 24px 0 10px;
  background: rgba(255,255,255,.06);
  border: 1.5px solid var(--border-hairline-dark);
  border-radius: 6px;
  font-size: 12px; color: var(--text-on-dark);
  font-family: inherit;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%23ffffff'%3E%3Cpath d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color .2s;
  cursor: pointer;
}
.filter-field select option { background: var(--surface-dark-anchor); color: #fff; }

/* ZEILE 3: Ausstattungs-Checkboxen (Sprint 5.9) + Treffer-Anzahl */
.filter-features {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
  padding-top: 6px; margin-top: 6px;
  border-top: 1px solid var(--border-hairline-dark);
}
.filter-chk {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-on-dark-muted); cursor: pointer;
  user-select: none;
}
.filter-chk input { width: 14px; height: 14px; accent-color: var(--accent-red); cursor: pointer; }

.filter-count {
  margin-left: auto;
  font-size: 12px; color: var(--text-on-dark-muted); white-space: nowrap;
}
.filter-count span { font-weight: 700; color: var(--text-on-dark); }

@media (max-width: 767px) {
  .filter-in { padding: 8px 20px; }
  .filter-sort { display: none; }
  .filter-toggle { display: inline-flex; }

  /* Suche bekommt eine eigene Zeile (zu wichtig zum Quetschen), Filter-Toggle
     + Reset darunter nebeneinander. Touch-Targets hier bewusst auf 44px
     angehoben (Desktop-Kompaktheit gilt nur für Maus-Bedienung). */
  .filter-row1 { flex-wrap: wrap; gap: 8px; }
  .filter-search { flex: 1 1 100%; order: 1; }
  .filter-search input { height: 44px; font-size: 14px; }
  .filter-toggle { order: 2; height: 44px; font-size: 13px; }
  .filter-reset { order: 3; margin-left: auto; padding: 6px 8px; font-size: 12px; }

  /* Zeile 2+3 hinter dem Filter-Toggle einklappen: bei 7 Dropdowns + 6
     Checkboxen wäre die gestapelte Vollansicht auf Mobile zu lang vor den
     ersten Ergebnissen — Toggle hält den Fold kompakt (analog job/reifen-Filter). */
  .filter-body {
    display: none;
    max-height: 60vh; overflow-y: auto;
  }
  .filter-body.is-open { display: block; }

  .filter-grid { flex-direction: column; align-items: stretch; }
  .filter-field select { width: 100%; height: 44px; font-size: 14px; }
  .filter-chk { min-height: 44px; }
  .filter-count { margin-left: 0; width: 100%; padding-top: 4px; }
}

/* ============ LISTING-GRID ============
   Hintergrund kommt jetzt vom globalen .sec--warm-Scrim (main.css) statt
   einer eigenen deckenden Flaeche -- padding/min-height bleiben als
   listing-spezifisches Layout erhalten. */
.list-sec { padding: 32px 24px 80px; min-height: 600px; }
.list-in { max-width: var(--maxw); margin: 0 auto; }
.list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1000px) { .list-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .list-grid { grid-template-columns: 1fr; } }

/* ============ VEHICLE CARD (Premium, hell) ============ */
.vcard {
  background: var(--surface-card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-hairline);
  transition: transform .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out;
  display: flex; flex-direction: column;
}
/* Hover-Lift nur auf Nicht-Touch-Geräten (Touch: Karten bleiben statisch) */
@media (hover: hover) {
  .vcard:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
  }
  .vcard:hover .vcard-img img { transform: scale(1.04); }
}
.vcard.is-hidden { display: none; }
/* Client-Pagination: über die aktuelle „Seite" hinausgehende Treffer ausblenden. */
.vcard.is-paged { display: none; }

.vcard-img {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eaeaea;
}
/* Platzhalter, wenn ein Fahrzeug (noch) keine Bilder hat. */
.vcard-noimg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #888; background: #eaeaea;
}
.vcard-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .2s ease-out;
}

.vcard-badges {
  position: absolute; top: 12px; left: 12px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 2;
}
.vcard-badge {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 6px;
  font-size: 11px; font-weight: 700;
  color: var(--text);
  letter-spacing: .2px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.vcard-photos {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11px; font-weight: 600;
  border-radius: 6px;
  z-index: 2;
}

/* Fahrzeug-ID (Angebotsnummer) als Badge oben links (Item 1, Sprint 5) */
.vcard-id {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 10px;
  background: var(--accent-red);
  color: #fff;
  font-size: 12px; font-weight: 700;
  letter-spacing: .2px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  z-index: 2;
}

.vcard-body {
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
  color: var(--text);
}

.vcard-title {
  font-size: var(--fs-h3); font-weight: 700;
  font-family: var(--font-heading);
  color: var(--text);
  letter-spacing: -.01em;
  margin-bottom: 2px;
  line-height: 1.15;
}
/* Voller Versionstext (Item 3) — darf umbrechen (max. 2 Zeilen), nicht kürzen */
.vcard-variant {
  font-size: 14px; color: #555;
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.vcard-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  padding: 10px 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}
.vcard-fact {
  display: flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: #444;
}
.vcard-fact svg {
  width: 16px; height: 16px;
  fill: #999;
  flex-shrink: 0;
}
/* MwSt.-Status in den Card-Eckdaten — „ja" affirmativ hervorgehoben */
.vcard-fact--mwst-ja { color: #1c7c3c; font-weight: 700; }
.vcard-fact--mwst-ja svg { fill: #1c7c3c; }
.vcard-fact--mwst-anfrage { color: #888; }

.vcard-price-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}
.vcard-price {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.vcard-price-main {
  font-size: 20px; font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
  line-height: 1;
}
/* "Finanzierung ab" ist selbst der §17-PAngV-Pflicht-Link aufs repräsentative
   Beispiel (Detailseite, #vdet-finanz) — kompakt neben dem Preis statt als
   eigene Zeile mit separatem Beispiel-Link darunter. */
.vcard-price-fin {
  font-size: 12px; color: var(--text-muted);
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s;
}
.vcard-price-fin strong { color: var(--text); font-weight: 700; }
.vcard-price-fin:hover { color: var(--accent-red); }
.vcard-price-fin:hover strong { color: var(--accent-red); }

.vcard-cta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 14px;
  background: var(--surface-dark-anchor);
  color: #fff;
  font-size: 12px; font-weight: 600;
  border-radius: 8px;
  transition: background .2s, transform .2s;
  white-space: nowrap;
}
.vcard-cta:hover {
  background: var(--red);
  transform: translateX(2px);
}

/* .list-sec ist jetzt sec--anchor (dunkel) -- die Empty-State-Box bekommt
   daher eine dunkle Flaeche statt der vorherigen weissen Card, sonst
   saesse ein heller Kasten fremd auf dem dunklen Grund. */
.list-empty {
  text-align: center;
  padding: var(--space-section-y) var(--space-gutter); /* war 80px 24px */
  background: var(--surface-dark-anchor);
  border-radius: 16px;
  border: 1px dashed var(--border-hairline-dark);
}
.list-empty h3 {
  font-family: var(--font-heading);
  font-size: 24px;
  color: var(--text-on-dark);
  margin-bottom: 8px;
}
.list-empty p { color: var(--text-on-dark-muted); max-width: 480px; margin: 0 auto; }
.list-empty a { color: var(--red); font-weight: 600; }

/* „Mehr laden"-Leiste (Client-Pagination) */
.list-more { display: flex; justify-content: center; margin-top: 32px; }
.list-more-btn {
  padding: 14px 32px;
  background: var(--surface-dark-anchor);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.list-more-btn:hover { background: var(--red); transform: translateY(-1px); }
.list-more-btn span { opacity: .7; font-weight: 400; font-size: 13px; }

/* Detail-Galerie: Platzhalter ohne Bilder */
.vdet-gallery-main--empty {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; background: #eaeaea; color: #888; font-size: 14px;
}

/* ============ DETAILSEITE ============ */
/* padding-top von 100px auf 40px reduziert: die Nav-Hoehe wird jetzt vom
   neuen .page-hero-Block (Breadcrumb/Titel, siehe fahrzeug.njk) uebernommen,
   .vdetail beginnt direkt danach mit der Galerie/Sidebar. */
.vdetail {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px 24px 80px;
  color: var(--text);
  background: #fff;
}
/* Vorher opake Vollflaechen (#f7f7f5) auf body/main -- dadurch blieb das
   globale Hintergrundfoto (.site-bg) auf dieser Seite komplett unsichtbar,
   im Unterschied zu allen anderen Seiten. Transparent lassen, damit .site-bg
   durchscheint; .vdet-section-Karten bleiben eigenstaendig deckend weiss
   (Kartenkomponente, kein Seiten-Hintergrund) und tragen weiterhin den
   Kontrast. */
.page--fahrzeug-detail { background: transparent; }
.page--fahrzeug-detail main { background: transparent; }
.page--fahrzeug-detail .vdetail {
  background: transparent;
}
/* Alle "weissen Karten" der Detailseite leicht transluzent statt voll
   deckend (User-Feedback: "damit das Hintergrundbild weiterhin durch-
   kommt") -- Blur haelt Text/Preise trotzdem lesbar, waehrend das Foto
   durch die Karten hindurch erkennbar bleibt statt komplett verdeckt zu
   werden. Ein gemeinsamer Selector fuer alle Karten-Klassen statt N
   Einzel-Overrides (identische Werte, DRY). Fallback fuer Browser ohne
   backdrop-filter faellt auf nahezu deckend zurueck (Lesbarkeit geht vor
   Foto-Durchsicht, falls der Blur fehlt). */
.page--fahrzeug-detail .vdet-content-title,
.page--fahrzeug-detail .vdet-hl,
.page--fahrzeug-detail .vdet-gallery-all,
.page--fahrzeug-detail .vdet-price-box,
.page--fahrzeug-detail .vdet-section {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page--fahrzeug-detail .vdet-content-title,
  .page--fahrzeug-detail .vdet-hl,
  .page--fahrzeug-detail .vdet-gallery-all,
  .page--fahrzeug-detail .vdet-price-box,
  .page--fahrzeug-detail .vdet-section {
    background: rgba(255, 255, 255, .96);
  }
}
/* Dunkler Foto-Scrim wie auf /fahrzeuge/ und /reifen/ (User-Entscheidung:
   die ganze Seite soll wie der Startseiten-Hero wirken) -- vorher lag hier
   nur "transparent" ohne eigenen Scrim, dadurch griff bloss der globale,
   fuer HELLE Sektionen gedachte Aufhell-Schleier (.site-bg::after) und das
   Foto wirkte blass/grau statt wie im Hero. sec--anchor-Mechanik (::before
   + radialer Gradient) hier direkt auf .vdetail repliziert, weil die Seite
   kein .sec-Element nutzt. .vdet-section-Karten bleiben eigenstaendig
   deckend weiss und liegen ueber dem Scrim (siehe .sec > * { position:
   relative } main.css -- hier analog via z-index auf .vdetail-Kindern).

   WICHTIG: der Scrim muss die volle Viewport-Breite abdecken, nicht nur
   .vdetail's eigene max-width-Spalte -- sonst bleibt links/rechts neben
   dem Content ein ungetoenter Streifen des rohen .site-bg-Fotos stehen,
   der als harte senkrechte Kante genau an der Container-Kante auffaellt
   (durch den Fahrzeug-Foto-Bereich sichtbar). Deshalb NICHT auf .vdetail
   selbst (die hat max-width), sondern auf einem eigenen full-bleed Layer,
   der aus dem gecappten Container ausbricht (100vw + Zentrierung analog
   zum .sec-Muster, wo .sec selbst ungecappt ist und nur .sec-in es ist). */
.page--fahrzeug-detail .vdetail {
  position: relative;
}
.page--fahrzeug-detail .vdetail::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255, 255, 255, .035), transparent 72%),
    var(--scrim-photo);
}
.page--fahrzeug-detail .vdetail > * { position: relative; }

/* .vdet-crumbs + .vdet-title sitzen jetzt im dunklen .page-hero-Scrim
   (siehe fahrzeug.njk) statt auf dem hellen Karten-Hintergrund -- Textfarben
   auf hell/dunkel umgestellt.
   Kompakterer Hero fuer die Detailseite (User-Feedback 1: die dunkle Flaeche
   wirkte als grosser toter Block, Autoname/Angebotsnummer gingen darin
   unter). .page-hero selbst bleibt unangetastet (wird von /reifen/, /jobs/,
   /termin/ etc. geteilt, deren Hero mehr Inhalt traegt) -- Seiten-Override
   nur hier.
   User-Feedback 2: der zu diesem Zweck abgeschwaechte Scrim ging zu weit --
   das helle Deckenlicht im Foto stach durch den duennen dunklen Schleier
   und liess Titel/Badge "verwaschen" statt auffaellig wirken (Kontrast
   WEISS-auf-Foto zu niedrig, nicht die Groesse war das Problem). Links (wo
   Titel/Breadcrumb sitzen) wieder auf die urspruengliche starke Deckkraft
   angehoben; rechts (Foto/Badge-Bereich) bleibt heller, damit das Foto dort
   noch erkennbar ist -- Kompromiss zwischen "Foto sichtbar" (User-Wunsch 1)
   und "Text/Badge lesbar-auffaellig" (User-Wunsch 2), nicht ein Rueckfall
   auf den alten fast-blickdichten Vollflaechen-Scrim. */
.page--fahrzeug-detail .page-hero {
  padding-top: calc(var(--nav-h) + 20px);
  padding-bottom: var(--space-md);
  background:
    linear-gradient(100deg, rgba(13, 14, 17, .95) 0%, rgba(13, 14, 17, .85) 35%, rgba(13, 14, 17, .55) 100%);
}
.vdet-crumbs {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(255,255,255,.55);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.vdet-crumbs a { color: rgba(255,255,255,.75); transition: color .2s; }
.vdet-crumbs a:hover { color: var(--red); }
.vdet-crumbs span { color: rgba(255,255,255,.45); }

/* Angebots-Nr.-Badge lebt jetzt in .vdet-content-title (siehe unten +
   fahrzeug.njk) statt im Hero-Band -- eigener heller Kontext, daher
   dezenter neutraler Rahmen statt der dunklen Foto-Scrim-Variante von
   vorher (rgba(10,11,14,…) waere auf Weiss ein Fremdkoerper). */
.vdet-id-badge {
  display: inline-flex;
  flex-shrink: 0;
  padding: 6px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  font-size: 12.5px; color: var(--text-muted);
  letter-spacing: .2px; white-space: nowrap;
}
.vdet-id-badge strong { color: var(--accent-red); font-weight: 800; }

/* Seitentitel im hellen Content-Bereich (verschoben aus dem dunklen Hero-
   Band, siehe fahrzeug.njk-Kommentar). .vdetail selbst ist auf dieser Seite
   transparent (das Foto scheint durch den dunklen Scrim, siehe weiter oben
   .page--fahrzeug-detail .vdetail::before) -- ein Titel "im hellen Bereich"
   braucht daher eine EIGENE deckende Flaeche, sonst sitzt er weiterhin auf
   dem Foto/Scrim (genau das Problem, das verschoben werden sollte). Gleiche
   Karten-Sprache wie .vdet-price-box (weiss, radius, Schatten) statt einer
   neuen Form -- Titel und Preis-Karte lesen als zusammengehoerige, helle
   Content-Zone direkt unter dem dunklen Hero.
   Lebt INNERHALB von .vdet-gallery (nicht als eigene volle-Breite-Sektion
   ueber .vdet-main) -- erbt dadurch automatisch die Galerie-Spaltenbreite
   (1fr aus .vdet-main's Grid, siehe unten), User-Feedback: die Karte soll
   nur so breit wie das Fahrzeugbild sein, nicht bis unter die Preis-Sidebar
   reichen. */
/* Dezenter als die vorherige Vollflaechen-Karte (User-Feedback: "die Box
   dezenter") -- schwaecherer Schatten/Rand, und Titel + Angebots-Nr. jetzt
   in EINER Zeile statt zwei gestapelten Reihen (Eyebrow entfernt, siehe
   fahrzeug.njk-Kommentar). space-between haelt den Titel links, die Badge
   rechtsbuendig; wrap erlaubt Umbruch bei langen Modellnamen/schmalen
   Viewports statt Overflow. */
.vdet-content-title {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 16px 20px;
  margin-bottom: 12px;
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
}
.vdet-content-title h1 {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 0;
}
.vdet-highlights {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.vdet-hl {
  padding: 5px 12px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--text);
  letter-spacing: .2px;
}

/* MAIN: Galerie + Sidebar */
.vdet-main {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  margin-bottom: 48px;
}
@media (max-width: 960px) {
  .vdet-main { grid-template-columns: 1fr; }
}

.vdet-gallery { min-width: 0; }

/* HERO-Bild (Klick öffnet Lightbox) */
.vdet-hero {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #eaeaea;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  margin-bottom: 12px;
  cursor: zoom-in;
}
.vdet-hero img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.vdet-hero:hover img { transform: scale(1.04); }
.vdet-hero-count {
  position: absolute; bottom: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
  color: #fff; font-size: 12px; font-weight: 600;
  border-radius: 8px;
}

/* Empty-State (keine Bilder) */
.vdet-gallery-main {
  width: 100%; aspect-ratio: 4 / 3;
  background: #eaeaea; border-radius: 16px; overflow: hidden; margin-bottom: 12px;
}
.vdet-gallery-main img { width: 100%; height: 100%; object-fit: cover; }

/* THUMBNAIL-STREIFEN: schmal, horizontal scrollbar */
.vdet-thumbstrip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.vdet-thumbstrip::-webkit-scrollbar { height: 6px; }
.vdet-thumbstrip::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
.vdet-thumb {
  flex: 0 0 auto;
  width: 92px;
  aspect-ratio: 4 / 3;
  background: #eaeaea;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color .2s, transform .2s;
  cursor: pointer;
  padding: 0;
  scroll-snap-align: start;
}
.vdet-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vdet-thumb:hover { transform: translateY(-2px); }
.vdet-thumb.is-active { border-color: var(--red); }

/* „Alle Bilder anzeigen (N)" */
.vdet-gallery-all {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 11px 16px;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  font-size: 14px; font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.vdet-gallery-all:hover { border-color: var(--red); background: rgba(232,32,40,.04); }

/* ============ LIGHTBOX ============ */
body.lb-open { overflow: hidden; }
.vdet-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.93);
}
.vdet-lightbox[hidden] { display: none; }
.vdet-lb-stage {
  margin: 0;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  position: relative;
}
.vdet-lb-img {
  max-width: 90vw; max-height: 86vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.vdet-lb-counter {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  padding: 6px 14px;
  background: rgba(0,0,0,.6);
  color: #fff; font-size: 13px; font-weight: 600;
  border-radius: 20px;
}
.vdet-lb-close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12);
  border: none; border-radius: 50%;
  color: #fff; cursor: pointer;
  transition: background .2s;
}
.vdet-lb-close:hover { background: rgba(255,255,255,.25); }
.vdet-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.10);
  border: none; border-radius: 50%;
  color: #fff; cursor: pointer;
  transition: background .2s;
}
.vdet-lb-nav:hover { background: rgba(255,255,255,.24); }
.vdet-lb-prev { left: 20px; }
.vdet-lb-next { right: 20px; }
@media (max-width: 640px) {
  .vdet-lb-img { max-width: 96vw; max-height: 80vh; }
  .vdet-lb-nav { width: 44px; height: 44px; }
  .vdet-lb-prev { left: 8px; }
  .vdet-lb-next { right: 8px; }
}

/* Sticky-Sidebar */
.vdet-sidebar {
  align-self: start;
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}
.vdet-price-box {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.vdet-price-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: #888;
  margin-bottom: 4px;
}
.vdet-price {
  font-family: var(--font-heading);
  font-size: 38px; font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.vdet-price-meta {
  font-size: 12px; color: #888;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}
/* MwSt.-Badge unter dem Preis (Item 3) — deutlich hervorgehoben */
.vdet-mwst-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 4px 0 20px;
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 13px; font-weight: 700;
}
.vdet-mwst-badge svg { flex-shrink: 0; }
.vdet-mwst-badge--ja      { background: #e6f4ea; color: #1c7c3c; border: 1px solid #b6e0c3; }
.vdet-mwst-badge--nein    { background: var(--surface-alt); color: var(--text); border: 1px solid var(--border); }
.vdet-mwst-badge--anfrage { background: var(--surface-alt); color: var(--text-muted); border: 1px solid var(--border); }

.vdet-finance {
  background: #f8f8f8;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.vdet-finance-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: #666;
  margin-bottom: 4px;
}
.vdet-finance-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.vdet-finance-prefix {
  font-size: 14px;
  color: #666;
}
.vdet-finance-amount strong {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}
.vdet-finance-meta {
  font-size: 11px; color: #888;
  line-height: 1.5;
  margin-top: 6px;
}
.vdet-finance-cta {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
  transition: gap .2s;
}
.vdet-finance-cta:hover {
  text-decoration: underline;
}

.vdet-cta-group {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 20px;
}
.vdet-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  font-size: 14px; font-weight: 600;
  border-radius: 10px;
  transition: transform .15s, background .2s, border-color .2s;
  cursor: pointer;
  text-decoration: none;
}
.vdet-btn-primary {
  background: var(--red);
  color: #fff;
  border: 1px solid var(--red);
}
.vdet-btn-primary:hover {
  background: var(--red-dark);
  transform: translateY(-1px);
}
.vdet-btn-whatsapp {
  background: #25D366;
  color: #fff;
  border: 1px solid #25D366;
}
.vdet-btn-whatsapp:hover {
  background: #1dbd57;
  transform: translateY(-1px);
}
.vdet-btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1.5px solid #e0e0e0;
}
.vdet-btn-ghost:hover {
  border-color: var(--text);
}

.vdet-trust {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}
.vdet-trust-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #555;
}
.vdet-trust-item svg { color: #2ea44f; flex-shrink: 0; }

/* Sections auf Detailseite */
.vdet-section {
  margin-bottom: 48px;
  padding: 32px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #eee;
  box-shadow: 0 2px 8px rgba(0,0,0,.03);
}
.vdet-sec-h {
  font-family: var(--font-heading);
  font-size: 24px; font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--red);
  display: inline-block;
}

/* Kompaktere, dichtere Eckdaten (Item 2, Sprint 6) */
.vdet-facts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 28px;
}
@media (max-width: 900px) { .vdet-facts-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .vdet-facts-grid { grid-template-columns: repeat(2, 1fr); } }
.vdet-fact {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 0;
  border-bottom: 1px solid #f0f0f0;
}
.vdet-fact-l {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: #888;
}
.vdet-fact-v {
  font-size: 16.5px; font-weight: 500; color: var(--text);
}

/* Beschreibung/Eckdaten etwas größer für bessere Lesbarkeit (Item 6, Sprint 5) */
.vdet-desc {
  font-size: 16.5px; line-height: 1.75; color: #333;
}

/* ---------- Ausstattung als Gruppen statt Endlos-Liste ----------
   Ausgangslage: die AS24-Beschreibung ist EINE flache <ul> mit im Median 91,
   maximal 136 Punkten -- einspaltig lief die bis ganz nach unten
   (User-Feedback: "geht einfach der Reihe nach bis nach unten").
   Jetzt: Kategorien nebeneinander, innerhalb der Kategorie zwei Spalten,
   lange Kategorien zugeklappt. Damit schrumpft der Block von ~130 Zeilen
   auf wenige Bildschirmhoehen. */
.vdet-desc-intro {
  font-size: 16.5px; line-height: 1.7; color: var(--text);
  margin-bottom: 6px;
}
.vdet-equip-count {
  font-size: 13px; color: var(--text-muted);
  margin-bottom: 18px;
}
/* Masonry-artig ueber CSS-Spalten statt Grid: bei einem Raster haengt die
   Zeilenhoehe an der hoechsten Kategorie der Zeile -- neben einer
   zugeklappten Gruppe blieb dadurch eine grosse Leerflaeche stehen (im ersten
   Entwurf gut sichtbar). Spalten fuellen dagegen von oben nach unten
   durchgehend auf, egal wie unterschiedlich hoch die Bloecke sind.
   break-inside verhindert, dass eine Kategorie mitten im Umbruch zerrissen
   wird. */
.vdet-equip {
  columns: 2;
  column-gap: 28px;
}
.vdet-equip > * {
  break-inside: avoid;
  page-break-inside: avoid;   /* aeltere Engines */
  margin-bottom: 20px;
  /* inline-block verhindert in einigen Engines den Umbruch zuverlaessiger
     als break-inside allein. */
  display: inline-block;
  width: 100%;
}
@media (max-width: 700px) { .vdet-equip { columns: 1; } }

/* Kopfzeile einer Kategorie -- als <h3> (kurze Gruppe) und als <summary>
   (aufklappbare Gruppe) identisch gestylt, damit beide Varianten in einer
   Rasterzeile gleich aussehen. */
.vdet-equip-cat h3,
.vdet-equip-cat > summary {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; font-weight: 700;
  color: var(--text);
  letter-spacing: .4px; text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border-hairline);
}
.vdet-equip-cat-t { flex: 1; }
/* Anzahl je Kategorie: macht die Menge sofort einschaetzbar, ohne zu zaehlen. */
.vdet-equip-cat-n {
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  background: rgba(20, 17, 15, .05);
  border-radius: 999px;
  padding: 2px 8px;
  flex-shrink: 0;
}
/* Einspaltig INNERHALB der Kategorie: die Kategorien selbst stehen bereits in
   zwei Spalten (siehe .vdet-equip). Nochmal zu teilen ergaebe vier sehr
   schmale Spalten, in denen die meisten Merkmale umbrechen. */
.vdet-equip-cat ul { display: block; }
.vdet-equip-cat li {
  font-size: 13px; color: var(--text-muted);
  line-height: 1.45;
  padding: 3px 0 3px 16px;
  position: relative;
}
.vdet-equip-cat li::before {
  content: '';
  position: absolute; left: 0; top: 9px;
  width: 4px; height: 4px;
  background: var(--red);
  border-radius: 50%;
}

/* Aufklappbare Kategorie. <details> bringt einen eigenen Marker mit, der je
   nach Browser links vor dem Text sitzt und das Flex-Layout stoert -- daher
   abgeschaltet und durch ein eigenes Chevron ersetzt. */
.vdet-equip-cat--fold > summary { cursor: pointer; list-style: none; }
.vdet-equip-cat--fold > summary::-webkit-details-marker { display: none; }
.vdet-equip-cat--fold > summary::after {
  content: '';
  width: 7px; height: 7px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.vdet-equip-cat--fold[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.vdet-equip-cat--fold > summary:hover { color: var(--red); }
.vdet-equip-cat--fold > summary:hover::after { border-color: var(--red); }
.vdet-equip-cat--fold > summary:focus-visible {
  outline: 2px solid var(--red); outline-offset: 3px;
}

/* HINWEIS-/Vorteils-Bloecke: Fliesstext, kein Merkmal-Raster. Immer sichtbar,
   weil dort rechtlich relevante Saetze stehen (Gewaehr, Zwischenverkauf). */
.vdet-desc-note {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border-hairline);
}
.vdet-desc-note h3 {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--text);
  margin-bottom: 8px;
}
.vdet-desc-note p {
  font-size: 14px; line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 6px;
}

/* EnVKV */
.vdet-envkv-intro {
  font-size: 13px; color: #666; margin-bottom: 16px;
}
.vdet-envkv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* Plug-in-Hybrid hat bis zu 6 Felder, sonst 4-5 — auto-fit verhindert leere
   Slots in der letzten Reihe bei variabler Feldzahl pro kraftstoffVariant. */
.vdet-envkv-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
@media (max-width: 700px) { .vdet-envkv-grid { grid-template-columns: repeat(2, 1fr); } }

/* Notbremse-Variant: keine vollständigen EnVKV-Daten — Hinweis statt
   partielles Rendering (rechtlich sicher, siehe CLAUDE.md §5.14). */
.vdet-envkv--unavailable .vdet-envkv-intro { color: #444; }

/* CO₂-Kosten-Klassen-Hinweis (PKW-EnVKV §3a seit 01.05.2024). Sichtbarer
   Platzhalter bis AS24-API die Werte liefert — explizit, damit es nicht
   vergessen wird. */
.vdet-envkv-co2costs {
  margin-top: 20px;
  padding: 12px 16px;
  background: rgba(232, 32, 40, 0.06);
  border-left: 3px solid var(--red);
  border-radius: 4px;
  font-size: 13px;
  color: #444;
  line-height: 1.5;
}
.vdet-envkv-co2costs strong { display: block; color: var(--text); margin-bottom: 2px; }
.vdet-envkv-l {
  font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: #888;
  margin-bottom: 4px;
}
.vdet-envkv-v {
  font-size: 18px; font-weight: 700; color: var(--text);
}
.vdet-efficiency {
  display: inline-block;
  min-width: 32px;
  padding: 4px 10px;
  border-radius: 6px;
  color: #fff;
  text-align: center;
  font-weight: 700;
}
.vdet-efficiency--a { background: #009639; }
.vdet-efficiency--b { background: #4cb848; }
.vdet-efficiency--c { background: #c3d500; color: var(--text); }
.vdet-efficiency--d { background: #fff200; color: var(--text); }
.vdet-efficiency--e { background: #f7a600; }
.vdet-efficiency--f { background: #e5352d; }
.vdet-efficiency--g { background: #c91414; }

/* PDF-Dokumente */
.vdet-docs-intro { font-size: 14px; color: #666; margin-bottom: 20px; }
/* Untergruppen-Überschrift in „Dokumente & Tools" (Sprint 6.7) */
.vdet-subhead {
  font-family: var(--font-heading);
  font-size: 13px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-muted);
  margin: 24px 0 12px;
}
.vdet-subhead:first-of-type { margin-top: 0; }
.vdet-docs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 700px) { .vdet-docs-grid { grid-template-columns: 1fr; } }
.vdet-doc {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  background: #f7f7f5;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  transition: border-color .2s, background .2s;
  color: var(--text);
  text-decoration: none;
}
.vdet-doc:hover { border-color: var(--red); background: #fff; }
.vdet-doc-t { font-size: 14px; font-weight: 600; color: var(--text); }
.vdet-doc-m { font-size: 12px; color: #888; margin-top: 2px; }

/* Ähnliche */
.vdet-similar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 800px) { .vdet-similar-grid { grid-template-columns: 1fr; } }
.vdet-similar-card {
  display: flex; flex-direction: column;
  background: #f7f7f5;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
  color: var(--text);
  text-decoration: none;
}
.vdet-similar-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.vdet-similar-card img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
}
.vdet-similar-body { padding: 14px 16px; }
.vdet-similar-title { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.2; }
.vdet-similar-meta { font-size: 12px; color: #888; margin: 4px 0 8px; }
.vdet-similar-price { font-size: 20px; font-weight: 800; color: var(--red); letter-spacing: -.01em; }

/* PDF-Stub-State (Exposé wartet auf AS24-API) */
.vdet-doc--soon {
  opacity: .5;
  pointer-events: none;
  cursor: not-allowed;
}

/* Hilfreiche Tools — externe Service-Links (BMF/BZSt). Layout jetzt
   nebeneinander wie die Dokumente-Karten darueber (.vdet-docs-grid):
   gleiche 2-Spalten-Grid-Logik statt der vorherigen gestapelten
   primary/secondary-Hierarchie mit unterschiedlicher Kartengroesse. */
.vdet-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 700px) { .vdet-tools-grid { grid-template-columns: 1fr; } }
.vdet-tools-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: #f7f7f5;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .2s, background .2s;
}
.vdet-tools-card:hover {
  border-color: var(--red);
  background: #fff;
}
.vdet-tools-icon {
  flex-shrink: 0;
  color: var(--red);
  margin-top: 2px;
}
.vdet-tools-body { flex: 1; min-width: 0; }
.vdet-tools-t {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.vdet-tools-ext {
  color: #aaa;
  flex-shrink: 0;
}
.vdet-tools-card:hover .vdet-tools-ext { color: var(--red); }
.vdet-tools-m {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
  line-height: 1.45;
}