/* Fahrzeugliste, Detailseite, Themenseiten und Fahrzeugkarten (auch auf der Startseite).
   Farben und Schrift aus base.css. Ruhig: feine Linien statt Schatten, eckige Kanten, keine Einblend-Effekte.
   Mobile first; Seitenleiste und mitlaufender Preiskasten ab 64rem. */

:root {
  --v-media: #e5e7e3; /* Fläche hinter Bildern, solange sie laden */
}

[hidden] {
  display: none !important;
}

/* ---------- Seitenrahmen ---------- */

.vehicles-page,
.vehicle-detail-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0.5rem var(--gutter) clamp(3rem, 6vw, 5rem);
}

.vehicles-page h2,
.vehicle-detail h2 {
  font-size: clamp(1.5rem, 3.2vw, 2rem);
}

/* Fokus: dunkler Rahmen, auf hellem Grund immer deutlich sichtbar */
.vehicles-page :is(a, button, input, select, summary):focus-visible,
.vehicle-detail :is(a, button, input, select, summary):focus-visible,
.vehicle-grid a:focus-visible {
  outline: 3px solid var(--graphit);
  outline-offset: 2px;
}

@media (hover: hover) {
  .vehicles-page .btn-outline:hover,
  .vehicle-detail .btn-outline:hover {
    background: var(--alu);
  }
}

/* ---------- Brotkrumen ---------- */

.breadcrumbs {
  font-size: 0.9375rem;
}

/* Eine Zeile: Lange Fahrzeugnamen am Ende kürzen (der volle Name steht direkt darunter in der Überschrift). */
.breadcrumbs ol {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.breadcrumbs li {
  display: flex;
  flex: none;
  align-items: center;
}

.breadcrumbs li:last-child {
  flex: 0 1 auto;
  min-width: 0;
}

.breadcrumbs li + li::before {
  content: '/';
  content: '/' / '';
  margin: 0 0.5rem;
  color: var(--stein);
}

.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--stein);
  text-decoration-color: var(--line);
  text-underline-offset: 0.2em;
}

.breadcrumbs a:hover {
  color: var(--graphit);
  text-decoration-color: currentColor;
}

.breadcrumbs [aria-current='page'] {
  min-width: 0;
  padding: 0.5rem 0;
  overflow: hidden;
  color: var(--graphit);
  font-weight: 600;
  text-overflow: ellipsis;
}

/* ---------- Seitenkopf (Liste, Themenseiten, Hinweisseiten) ---------- */

.page-head,
.theme-head {
  margin: 0.5rem 0 clamp(1.75rem, 4vw, 2.75rem);
}

.page-head h1,
.theme-head h1 {
  max-width: 16ch;
  margin: 0 0 1rem;
  font-size: clamp(2.25rem, 7vw, 4rem);
  line-height: 0.98;
}

.page-intro,
.theme-intro {
  max-width: 60ch;
  margin: 0;
  font-size: 1.125rem;
}

.theme-intro p {
  margin: 0 0 0.75rem;
}

.theme-intro p:last-child {
  margin-bottom: 0;
}

/* ---------- Filter (Handy: einklappbar über der Liste) ---------- */

.filter-side {
  margin-bottom: 1.5rem;
}

.filter-panel {
  border-top: 1px solid var(--graphit);
  border-bottom: 1px solid var(--line);
}

.filter-summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.5rem 0;
  cursor: pointer;
  list-style: none;
}

.filter-summary::-webkit-details-marker {
  display: none;
}

/* Pfeil: zeigt nach unten (zu) bzw. oben (offen) */
.filter-summary::after {
  content: '';
  flex: none;
  width: 0.5625rem;
  height: 0.5625rem;
  margin: -0.25rem 0.25rem 0 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.filter-panel[open] > .filter-summary::after {
  margin-top: 0.3rem;
  transform: rotate(-135deg);
}

.filter-summary-title {
  font-size: 1.25rem;
  font-stretch: 75%;
  font-weight: 800;
}

.filter-summary-count {
  margin-left: auto;
  color: var(--stein);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.filter-body {
  display: grid;
  gap: 1.25rem 2rem;
  padding: 0.25rem 0 1.5rem;
}

.filter-group {
  min-width: 0;
  margin: 0;
  padding: 1.25rem 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.filter-group:first-child {
  padding-top: 0.5rem;
  border-top: 0;
}

.filter-group > legend {
  float: left; /* legend sonst auf der Rahmenlinie */
  width: 100%;
  margin: 0 0 0.5rem;
  padding: 0;
  font-weight: 700;
}

.filter-group > legend + * {
  clear: left;
}

.filter-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.filter-field label,
.filter-sort label {
  display: block;
  color: var(--stein);
  font-size: 0.9375rem;
}

.filter-field input,
.filter-field select,
.filter-sort select {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--stein);
  border-radius: 2px;
  background: #ffffff;
  color: inherit;
  font: inherit;
  /* Mindestens 16 px, sonst zoomt iOS Safari beim Antippen ins Feld. */
  font-size: max(1rem, 16px);
  font-variant-numeric: tabular-nums;
}

.filter-options {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.filter-options label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  cursor: pointer;
}

.filter-options input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--wiese);
}

.option-count {
  margin-left: auto;
  color: var(--stein);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.filter-reset {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
  text-underline-offset: 0.2em;
}

/* ---------- Ergebnisleiste und Sortierung ---------- */

.vehicle-results {
  min-width: 0;
}

.results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.result-count {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.filter-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.filter-sort select {
  width: auto;
  min-width: 14rem;
}

.filter-sort-submit {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
}

/* ---------- Fahrzeugkarten ---------- */

.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  gap: 2.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vehicle-card {
  min-width: 0;
}

.vehicle-card-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.vehicle-card-media {
  order: -1; /* Bild oben, im Quelltext nach der Überschrift */
  margin-bottom: 1rem;
  background: var(--v-media);
}

.vehicle-card-media img,
.media-placeholder {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--v-media);
  color: var(--stein);
}

.vehicle-card-title {
  margin: 0 0 0.625rem;
  font-size: 1.375rem;
  line-height: 1.1;
  overflow-wrap: break-word;
}

.vehicle-card-title a {
  text-decoration: none;
}

/* Ganze Karte klickbar, ohne doppelte Links für Screenreader. */
.vehicle-card-title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.vehicle-card-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.125rem 1rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  color: var(--stein);
  font-size: 0.9375rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

/* Pkw-EnVKV-Zeilen sind lang: eine Spalte, gleiche Schriftgröße wie kW/PS. */
.vehicle-card-facts--lang {
  grid-template-columns: minmax(0, 1fr);
}

.vehicle-card-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.125rem 1rem;
  margin: auto 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.vehicle-card-price strong {
  font-size: 1.5rem;
  font-stretch: 75%;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.vat-note {
  color: var(--stein);
  font-size: 0.875rem;
}

@media (hover: hover) {
  .vehicle-card-inner:hover .vehicle-card-title a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
  }

  .vehicle-card-inner:hover .vehicle-card-price {
    border-top-color: var(--graphit);
  }
}

/* Tastatur: Rahmen um die ganze Karte statt nur um den Titel-Link */
.vehicle-card-inner:has(a:focus-visible) {
  outline: 3px solid var(--graphit);
  outline-offset: 6px;
}

@supports selector(:has(a)) {
  .vehicle-grid .vehicle-card-title a:focus-visible {
    outline: none;
  }
}

/* ---------- Hinweise ---------- */

.empty-state,
.notice {
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--graphit);
  background: var(--alu);
}

.notice {
  border-left-color: var(--abendlicht);
}

.empty-state > :first-child,
.notice > :first-child {
  margin-top: 0;
}

.empty-state > :last-child,
.notice > :last-child {
  margin-bottom: 0;
}

.empty-state p,
.notice p {
  max-width: 62ch;
}

.empty-state h2 {
  margin: 0 0 0.5rem;
}

/* ---------- Themen-Links, weitere Angebote, Themenseiten ---------- */

.theme-links,
.other-offers,
.theme-search {
  margin-top: clamp(3rem, 7vw, 5rem);
}

.theme-links h2,
.other-offers h2 {
  margin: 0 0 1.25rem;
}

.theme-links ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  column-gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--graphit);
}

.theme-links li {
  border-bottom: 1px solid var(--line);
}

.theme-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.25rem;
  padding: 0.5rem 0;
  font-weight: 700;
  text-decoration: none;
}

.theme-links a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.theme-link-count {
  color: var(--stein);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.theme-results > h2 {
  margin: 0 0 0.25rem;
}

.theme-results > .result-count {
  margin: 0 0 1.5rem;
  color: var(--stein);
  font-weight: 600;
}

.theme-search {
  max-width: 44rem;
  padding-top: 1.5rem;
  border-top: 3px solid var(--graphit);
}

.theme-search h2 {
  margin: 0 0 0.5rem;
}

/* ---------- Detailseite ---------- */

.vehicle-detail h1 {
  max-width: 28ch;
  margin: 0.5rem 0 1.25rem;
  font-size: clamp(1.875rem, 5vw, 3rem);
  overflow-wrap: break-word;
}

.sold-notice {
  margin: 0 0 2rem;
  padding: 1.25rem clamp(1rem, 3vw, 1.75rem) 1.5rem;
  border-left: 4px solid var(--abendlicht);
  background: var(--alu);
}

.sold-notice > h2 {
  margin: 0 0 0.5rem;
}

.sold-notice .vehicle-grid {
  margin: 1.5rem 0;
}

.sold-notice-links {
  margin-bottom: 0;
}

/* Galerie: großes Bild, Blättern-Knöpfe und Zähler darüber (per galerie.js), Vorschaubilder ab Tablet */
.gallery {
  min-width: 0;
}

/* Handy: Bild bis an den Bildschirmrand */
.vehicle-layout > .gallery {
  margin-inline: calc(var(--gutter) * -1);
}

.gallery-stage {
  position: relative;
  background: var(--v-media);
}

.gallery-track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}

/* Mit galerie.js gibt es Knöpfe: Bildlaufleiste unter dem Bild ausblenden */
[data-gallery-ready] .gallery-track {
  scrollbar-width: none;
}

[data-gallery-ready] .gallery-track::-webkit-scrollbar {
  display: none;
}

.gallery-slide {
  position: relative; /* hält den unsichtbaren Zusatztext im Bild, sonst scrollt die Seite seitlich */
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.gallery-slide a {
  display: block;
}

.gallery-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Fokus im Bild: dunkler Rahmen mit heller Innenkante, auf jedem Foto sichtbar */
.vehicle-detail .gallery-track:focus-visible,
.vehicle-detail .gallery-slide a:focus-visible {
  outline: 3px solid var(--graphit);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px #ffffff;
}

.gallery-count {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  margin: 0;
  padding: 0.25rem 0.625rem;
  border-radius: 2px;
  background: rgb(27 31 29 / 0.82);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.gallery-controls {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 0.75rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.gallery-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0 0.2rem;
  border: 0;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.92);
  color: var(--graphit);
  font: 700 2rem/1 var(--font);
  cursor: pointer;
  pointer-events: auto;
}

.gallery-controls button:hover {
  background: #ffffff;
}

.gallery-thumbs {
  display: none;
}

/* Preiskasten (Handy: unter der Galerie; Desktop: rechts, läuft mit) */
.vehicle-summary {
  min-width: 0;
}

.vehicle-box {
  padding-top: 1.5rem;
}

.vehicle-price {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0 0 1.25rem;
}

.vehicle-price strong {
  font-size: clamp(2.25rem, 7vw, 2.75rem);
  font-stretch: 75%;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.vehicle-price .vat-note {
  font-size: 0.9375rem;
}

.vehicle-meta {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  font-size: 0.9375rem;
}

.vehicle-meta > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1rem;
}

.vehicle-meta dt {
  color: var(--stein);
}

.vehicle-meta dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.contact-actions {
  display: grid;
  gap: 0.625rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.contact-actions .btn {
  width: 100%;
  text-align: center;
}

/* Handy: Kontakt über die feste Leiste unten */
.vehicle-box .contact-actions {
  display: none;
}

/* Eckdaten-Leiste: gleich große Werte, auch die Pkw-EnVKV-Angaben */
.vehicle-keyfacts {
  margin-top: 1.5rem;
  overflow: hidden; /* schneidet die Trennlinien am Zeilenanfang ab */
  background: var(--alu);
}

.key-facts {
  display: flex;
  flex-wrap: wrap;
  margin: -1px 0 0 -1px;
}

.key-facts > div {
  flex: 1 1 9.5rem;
  padding: 0.875rem 1rem;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.key-facts dt {
  color: var(--stein);
  font-size: 0.875rem;
  line-height: 1.3;
}

.key-facts dd {
  margin: 0.25rem 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Abschnitte */
.vehicle-content {
  min-width: 0;
}

.vehicle-section {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--graphit);
}

.vehicle-section > h2 {
  margin: 0 0 1.25rem;
}

.spec-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 2.5rem;
  margin: 0;
}

/* Begriffsspalte breit genug für lange deutsche Wörter („Hauptuntersuchung“, „Scheckheftgepflegt“) */
.spec-list > div {
  display: grid;
  grid-template-columns: minmax(7.5rem, 45fr) minmax(0, 55fr);
  gap: 1rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--line);
}

/* Noch längere Begriffe nach deutschen Regeln trennen (lang="de"), sonst notfalls umbrechen: nie in den Wert laufen */
.spec-list dt,
.key-facts dt,
.vehicle-meta dt {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.spec-list dt {
  min-width: 0;
  color: var(--stein);
}

.spec-list dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.badge-list,
.feature-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.badge-list li {
  max-width: 100%;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--graphit);
  border-radius: 2px;
  font-weight: 600;
  overflow-wrap: anywhere; /* Freitext aus dem Inserat, auch ohne Leerzeichen */
}

.feature-list {
  column-gap: 2.5rem;
}

.feature-list li {
  position: relative;
  padding: 0.3125rem 0 0.3125rem 1.125rem;
  overflow-wrap: break-word;
  break-inside: avoid;
}

.feature-list li::before {
  content: '';
  position: absolute;
  top: 0.9em;
  left: 0;
  width: 0.4375rem;
  height: 0.4375rem;
  background: var(--wiese);
}

.vehicle-description {
  max-width: 68ch;
  overflow-wrap: break-word;
}

.vehicle-description > :first-child {
  margin-top: 0;
}

/* Wie bei mobile.de: Listen stehen ohne Abstand direkt unter der vorigen Zeile. */
.vehicle-description ul {
  margin: 0;
  padding-left: 1.25em;
  list-style: disc;
}

.vehicle-description hr {
  margin: 0.75em 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.vehicle-inquiry {
  scroll-margin-top: 1rem;
}

.vehicle-inquiry .inquiry-form {
  max-width: 40rem;
  margin-top: 0;
}

.vehicle-inquiry > p {
  max-width: 62ch;
}

.vehicle-inquiry > .contact-actions {
  max-width: 40rem;
}

.contact-alt {
  margin: 2rem 0 0;
  font-weight: 700;
}

.contact-alt + .contact-actions {
  margin-top: 0.75rem;
}

/* ---------- Kontaktleiste (Handy) ----------
   Klebt am unteren Rand, solange der Inhalt der Seite läuft, und bleibt am Ende über der Fußzeile stehen:
   verdeckt die Fußzeile also nie. */
.contact-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: 0.5rem var(--gutter) max(0.5rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: #ffffff;
}

/* Anfragebereich im Bild (kontaktleiste.js): Leiste unsichtbar, Platz bleibt */
.contact-bar[data-verdeckt] {
  visibility: hidden;
}

.contact-bar-list {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 0.5rem;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.contact-bar-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 3.25rem;
  padding: 0.375rem 0.5rem;
  border: 2px solid var(--graphit);
  border-radius: 2px;
  color: var(--graphit);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

/* Nur „Anfrage“ gepflegt: ein breiter Knopf mit Symbol links */
.contact-bar-list > li:only-child .contact-bar-link {
  flex-direction: row;
  gap: 0.625rem;
  font-size: 1.0625rem;
}

.contact-bar-link svg {
  flex: none;
}

.contact-bar-primary {
  border-color: var(--wiese);
  background: var(--wiese);
  color: #ffffff;
}

@media (hover: hover) {
  .contact-bar-link:hover {
    background: var(--alu);
  }

  .contact-bar-primary:hover {
    border-color: var(--wiese-hell);
    background: var(--wiese-hell);
  }
}

.contact-bar-link:focus-visible {
  outline: 3px solid var(--graphit);
  outline-offset: 2px;
}

/* ---------- Vollbild ---------- */

.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 3.5rem 0 1rem;
  border: 0;
  background: var(--graphit);
  color: #ffffff;
  /* Waagerechtes Wischen gehört galerie.js: Sonst übernimmt der Browser die Geste und
     schickt pointercancel statt pointerup. Senkrechtes Scrollen und Zoomen bleiben erlaubt. */
  touch-action: pan-y pinch-zoom;
}

.lightbox::backdrop {
  background: rgb(27 31 29 / 0.94);
}

.lightbox figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
}

.lightbox img {
  max-width: 100%;
  max-height: calc(100% - 2.5rem);
  object-fit: contain;
}

.lightbox figcaption {
  margin-top: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.lightbox-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: 2px;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0 0.2rem;
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: 2px;
  background: rgb(27 31 29 / 0.6);
  color: #ffffff;
  font: 700 2rem/1 var(--font);
  cursor: pointer;
  transform: translateY(-50%);
}

.lightbox-prev {
  left: 0.5rem;
}

.lightbox-next {
  right: 0.5rem;
}

.lightbox button:focus-visible {
  outline: 3px solid var(--abendlicht);
  outline-offset: 2px;
}

/* ---------- Breitere Bildschirme ---------- */

@media (min-width: 40rem) {
  .filter-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-group:nth-child(2) {
    padding-top: 0.5rem;
    border-top: 0;
  }

  .filter-actions {
    grid-column: 1 / -1;
  }

  .vehicle-layout > .gallery {
    margin-inline: 0;
  }

  .vehicle-inquiry > .contact-actions {
    display: flex;
    flex-wrap: wrap;
  }

  .vehicle-inquiry > .contact-actions .btn {
    width: auto;
  }

  .feature-list {
    columns: 2;
  }
}

@media (min-width: 48rem) {
  .gallery-thumbs {
    position: relative; /* Bezug für offsetLeft in galerie.js */
    display: flex;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    padding: 0 0 0.25rem;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .gallery-thumbs li {
    flex: 0 0 calc((100% - 5 * 0.5rem) / 6);
  }

  .gallery-thumbs a {
    display: block;
    background: var(--v-media);
  }

  .gallery-thumbs img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    opacity: 0.72;
  }

  .gallery-thumbs a:hover img,
  .gallery-thumbs a[aria-current='true'] img {
    opacity: 1;
  }

  .gallery-thumbs a[aria-current='true'] {
    outline: 3px solid var(--graphit);
    outline-offset: -3px;
  }

  .vehicle-detail .gallery-thumbs a:focus-visible {
    outline: 3px solid var(--graphit);
    outline-offset: -3px;
    box-shadow: inset 0 0 0 6px #ffffff;
  }

  .spec-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Zwei Spalten nebeneinander: Begriff und Wert je halb, sonst wird die Begriffsspalte zu schmal */
  .spec-list > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .envkv-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .envkv-list > div {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

@media (min-width: 64rem) {
  /* Liste: Filter als Seitenleiste */
  .vehicle-filter {
    display: grid;
    grid-template-columns: 16.5rem minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(2rem, 3.5vw, 3rem);
  }

  .filter-side {
    margin-bottom: 0;
  }

  .filter-panel {
    border-bottom: 0;
  }

  .filter-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .filter-group:nth-child(2) {
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
  }

  .filter-actions {
    grid-column: auto;
  }

  /* Mit JavaScript wirkt der Filter sofort: kein „Ergebnisse anzeigen“ neben der Liste */
  [data-filter-live] [data-filter-show] {
    display: none;
  }

  .results-bar {
    min-height: 3.25rem;
    padding-top: 0;
  }

  /* Detail: Galerie und Inhalt links, Preiskasten rechts (läuft beim Scrollen mit) */
  .vehicle-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(19rem, 27vw, 22rem);
    grid-template-rows: auto auto 1fr;
    align-items: start;
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }

  .vehicle-layout > .gallery {
    grid-row: 1;
    grid-column: 1;
  }

  .vehicle-summary {
    grid-row: 1 / span 3;
    grid-column: 2;
    align-self: stretch;
  }

  .vehicle-keyfacts {
    grid-row: 2;
    grid-column: 1;
  }

  .vehicle-content {
    grid-row: 3;
    grid-column: 1;
  }

  .vehicle-box {
    position: sticky;
    top: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-top: 3px solid var(--graphit);
    background: #ffffff;
  }

  .vehicle-box .contact-actions {
    display: grid;
  }

  .contact-bar {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-track {
    scroll-behavior: auto;
  }
}

/* Kontaktleiste (Handy): Fokus und Sprungmarken lassen unten Platz, damit nichts verdeckt wird */
@media (max-width: 63.99rem) {
  html:has([data-contact-bar]) {
    scroll-padding-bottom: 5rem;
  }

  /* Am Seitenende ist die Leiste ausgeblendet, ihr Platz bleibt: kein zusätzlicher großer Abstand davor */
  .vehicle-detail-inner:has(+ [data-contact-bar]) {
    padding-bottom: 1rem;
  }
}

/* Sehr schmale Handys (unter 360 px): Begriff und Wert untereinander, im Preiskasten und in den Fahrzeugdaten.
   Nebeneinander würden lange Wörter und die FIN mitten im Wort umbrechen. */
@media (max-width: 22.49rem) {
  .vehicle-meta > div,
  .spec-list > div,
  .envkv-list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .vehicle-meta > div + div {
    margin-top: 0.25rem;
  }
}

/* Preiskasten (Desktop): Begriff und Wert untereinander, damit lange Werte wie die FIN nicht mitten umbrechen */
@media (min-width: 64rem) {
  .vehicle-box .vehicle-meta > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}