/* Fahrzeug-Einzelseite — Korrekturen zum geerbten Marktplatz-CSS.
   -----------------------------------------------------------------------
   Diese Seite benutzt bewusst dieselben Klassen wie der Detail-Dialog des
   Marktplatzes; so gilt dessen Gestaltung (Preis, Eckdaten-Liste, Chips,
   Rechtstext) ohne eine einzige doppelt gepflegte Zeile.

   Drei Dinge stimmen dabei aber nicht, weil der Dialog ein FENSTER ist und
   diese Seite eine SEITE. Genau die stehen hier — und nur die:

   1. Der Dialog fuellt seine feste Hoehe (height:100%). Auf einer Seite gibt
      es keine feste Hoehe: die Bildspalte wuchs auf die Hoehe der Datenspalte,
      und das Foto stand oben in einer schwarzen Saeule.
   2. Im Dialog ist der Modellname ein <h2>. Auf einer Seite muss er ein <h1>
      sein — sonst hat die Seite keine Hauptueberschrift. Dadurch rutschen die
      Abschnitte auf <h2>, und die Dialog-Regel `.veh-detail-body h2` (grosse
      Kursivschrift) traf ploetzlich „Eckdaten" statt des Modellnamens.
   3. Die Knopfleiste klebt im Dialog unten fest (position:sticky). Auf einer
      Seite gehoert sie einfach ans Ende des Textes.
   ----------------------------------------------------------------------- */

/* 1) Kein Fenster-Layout ------------------------------------------------- */
.fzg-seite .veh-detail-inner {
  height: auto;
  gap: 32px;
  align-items: start;
}

.fzg-seite .veh-detail-img {
  overflow: visible;          /* die Miniaturen duerfen unter das Bild */
  background: none;
  border-radius: var(--r-md);
  position: sticky;           /* das Foto bleibt beim Lesen der Daten stehen */
  top: 96px;
}
@media (max-width: 767px) {
  .fzg-seite .veh-detail-img { height: auto; position: static; }
}

/* Das Foto behaelt seine Proportion, statt auf Spaltenhoehe gezogen zu werden. */
.fzg-seite .veh-detail-img > img {
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--border-2);
}

/* Die Miniaturen liegen direkt unter dem Bild, nicht am Spaltenende. */
.fzg-seite .veh-gallery-thumbs {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding: 0;
  background: none;
}
.fzg-seite .gallery-thumb-btn {
  width: 76px; height: 52px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-2);
  cursor: pointer;
  opacity: .62;
  transition: opacity .2s, border-color .2s;
}
.fzg-seite .gallery-thumb-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fzg-seite .gallery-thumb-btn:hover,
.fzg-seite .gallery-thumb-btn:focus-visible { opacity: 1; }
.fzg-seite .gallery-thumb-btn.is-active { opacity: 1; border-color: var(--border-red); }

/* 2) Die Datenspalte scrollt nicht selbst — das tut die Seite. ------------ */
.fzg-seite .veh-detail-body { overflow: visible; }
.fzg-seite .veh-detail-body-content { padding: 0; }

/* Der Modellname ist hier die Hauptueberschrift und traegt die Dialog-Optik. */
.fzg-seite .veh-detail-body h1 {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 34px; line-height: 1; letter-spacing: -0.02em;
  text-transform: uppercase; margin: 4px 0;
}
@media (min-width: 768px) { .fzg-seite .veh-detail-body h1 { font-size: 44px; } }

/* … und die Abschnitte bleiben die kleinen Marken, auch als <h2>.
   Ohne diese Zeile gewinnt `.veh-detail-body h2` aus dem Dialog-CSS und
   „Eckdaten" steht so gross da wie der Modellname. */
.fzg-seite .veh-detail-body h2.specs-heading {
  font-family: var(--font-mono);
  font-style: normal; font-weight: 400;
  font-size: 11px; line-height: 1.4; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 18px 0 6px;
}

/* 3) Knopfleiste am Textende, nicht klebend ------------------------------ */
.fzg-seite .veh-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border-2);
}
.fzg-seite .sold-note {
  font-size: 13px; line-height: 1.5; color: var(--text-secondary);
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border-2);
}