/* =====================================================================
   seite-fahrzeuge.css — fahrzeuge.html + merkliste.html · Autohof Wentorf (Autohaus 18)
   WEB-CREW Schritt 6, Frischlauf 2A. Lädt NACH site.css + plakette.css.
   Nur Tokens aus site.css (Haut B „Die Visitenkarte“, bau-brief §4/§5/§11):
   Radius 4 px, keine Schatten, 1-px-Kanten --stahl, Ebenen über Ton und Kante.
   Keine automatischen Spalten-Raster — Card-Grid-Budget (GESETZ Kap. 2); der Bestand
   ist die erlaubte Liste und läuft in festen Spalten mit vollen Reihen (Kap. 10).
   ===================================================================== */

/* Anker (#spitze, #mitte, #einstieg, #bestand) landen unter Kopfleiste + Filterleiste */
html {
  scroll-padding-top: calc(var(--leiste) + 4.75rem);
}

/* Unterseiten-Kopf steht zentral in site.css (Schritt 6 Integrator). Hier folgt die
   Kontaktleiste bündig (GESETZ Kap. 5) → Kopf = Bildschirm − 80 − 64 */
.kopf--fahrzeuge {
  --kontaktleiste-h: var(--kontakt);
}

/* ---------- 1 Filterleiste — klebt unter der Kopfleiste ---------- */
.filter {
  position: sticky;
  top: var(--leiste);
  z-index: 30;
  background: var(--grund);
  border-bottom: 1px solid var(--kante);
}
html:not(.js) .filter {
  display: none;
}
.filter__innen {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 4.5rem;
  max-width: calc(var(--bahn) + 2 * var(--rand));
  margin-inline: auto;
  padding: 0.7rem var(--rand-r) 0.7rem var(--rand);
}
.filter__felder {
  display: flex;
  gap: 0.6rem;
  flex: 1 1 auto;
  min-width: 0;
}
.filter__feld {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 13.5rem;
}
.filter__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  font-size: 0;
}
.filter__feld select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0.5rem 2rem 0.5rem 0.8rem;
  font-size: 0.95rem;
  color: var(--tinte);
  background-color: var(--grund);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--meta) 50%),
    linear-gradient(135deg, var(--meta) 50%, transparent 50%);
  background-position:
    calc(100% - 17px) 52%,
    calc(100% - 12px) 52%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid var(--stahl);
  border-radius: var(--radius);
  cursor: pointer;
  text-overflow: ellipsis;
  transition: border-color 160ms ease;
}
.filter__feld select:focus-visible {
  outline: 2px solid var(--leit);
  outline-offset: 1px;
  border-color: var(--tinte);
}
/* gewählter Filter trägt die Tinte als Kante — Zustand ohne Farbe allein (Kante + Text) */
.filter__feld select:has(option:checked:not([value=""])) {
  border-color: var(--tinte);
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  .filter__feld select:hover {
    border-color: var(--tinte);
  }
}
.filter__ende {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
  flex: 0 0 auto;
}
.filter__ergebnis {
  color: var(--meta);
  font-size: 0.95rem;
  white-space: nowrap;
}
.filter__ergebnis b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--tinte);
  margin-right: 0.15rem;
  font-variant-numeric: proportional-nums;
}
.filter__zurueck,
.filter__schalter {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.95rem;
  border: 1px solid var(--stahl);
  border-radius: var(--radius);
  background: transparent;
  color: var(--tinte);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    transform 140ms var(--ease-ui);
}
.filter__zurueck:active,
.filter__schalter:active {
  transform: scale(0.97);
}
.filter__zurueck[hidden] {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .filter__zurueck:hover,
  .filter__schalter:hover {
    background: var(--flaeche);
  }
}
.filter__schalter {
  display: none;
}
.filter__schalter svg {
  width: 18px;
  height: 18px;
}
.filter__marke {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--magenta);
  color: var(--knopf-text);
  font-size: 0.75rem;
  display: inline-grid;
  place-items: center;
}
.filter__marke[hidden] {
  display: none;
}

/* ---------- 2 Bestand: drei Preisklassen, jede mit klebender Randspalte ---------- */
.bestand {
  padding-top: clamp(1rem, 2vw, 1.5rem);
}
.klasse {
  display: grid;
  grid-template-columns: minmax(0, 16.5rem) minmax(0, 1fr);
  gap: clamp(2rem, 3.6vw, 3.75rem);
  padding-block: clamp(2.5rem, 4vw, 4rem) clamp(3rem, 5vw, 5rem);
  border-top: 1px solid var(--stahl);
}
.klasse:first-child {
  border-top: 0;
}
.klasse[hidden] {
  display: none;
}
.klasse__rail {
  min-width: 0;
}
.klasse__rail-innen {
  position: sticky;
  top: calc(var(--leiste) + 4.5rem + 1.75rem);
}
.klasse__titel {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.klasse__zahl {
  margin-top: 0.75rem;
  color: var(--meta);
  font-size: 0.98rem;
}
.klasse__zahl [data-zahl] {
  font-family: var(--display);
  font-weight: 600;
  color: var(--tinte);
}
.klasse__hinweis {
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--leit);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--tinte);
  max-width: 22rem;
}

/* Raster: 6 Teilspalten → Reihen aus 3 normalen (je 2) oder 2 großen (je 3) Kacheln.
   Die Anzahl der Großen pro Klasse rechnet tools/fahrzeuge-liste-bauen.mjs so, dass jede Reihe voll ist. */
.klasse__raster {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(2rem, 2.6vw, 2.6rem) clamp(1.1rem, 1.7vw, 1.6rem);
  align-items: stretch;
  min-width: 0;
}
.kachel {
  grid-column: span 2;
}
.kachel--g3 {
  grid-column: span 3;
}
/* Gefiltert: keine Großen mehr, sonst entstehen halbe Reihen mit gemischten Formaten */
[data-gefiltert="ja"] .kachel--g3 {
  grid-column: span 2;
}
.kachel[hidden] {
  display: none;
}

/* ---------- Kachel (Karte & Stahl) — ganzflächig klickbar über den Titel-Link ---------- */
.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kachel__bild {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--stahl);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--flaeche);
  transition: border-color 160ms ease;
}
.kachel__bild > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kachel__info {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 1rem;
}
.kachel__titel {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.22rem;
  line-height: 1.22;
}
.bestand:not([data-gefiltert="ja"]) .kachel--g3 .kachel__titel {
  font-size: var(--fs-h3);
}
.kachel__link {
  color: var(--tinte);
  text-decoration: none;
  transition: color 160ms ease;
}
.kachel__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius);
}
.kachel__link:focus-visible {
  outline: none;
}
.kachel__link:focus-visible::after {
  outline: 2px solid var(--leit);
  outline-offset: 6px;
}
.kachel__variante {
  margin-top: 0.2rem;
  color: var(--meta);
  font-size: 0.86rem;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  /* Inseratszeilen wie „TÜV=06/2026+Klima+…“ haben keine Leerstelle → dürfen umbrechen (390) */
  overflow-wrap: break-word;
  word-break: break-word;
}
.kachel__daten {
  margin-top: 0.55rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--tinte);
}
/* Unten bündig in jeder Reihe: HU-Zeile (feste Höhe 56 px = Plakette) + Preiszeile */
.kachel__unten {
  margin-top: auto;
  padding-top: 1rem;
}
.kachel__hu {
  min-height: 56px;
  display: flex;
  align-items: center;
}
.kachel__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--kante);
}
.kachel__preis {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-preis);
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  font-variant-numeric: proportional-nums;
}
.bestand:not([data-gefiltert="ja"]) .kachel--g3 .kachel__preis {
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem);
}
.kachel__pfeil {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  color: var(--magenta-text);
  transition: transform 180ms var(--ease-ui);
}
.kachel__pfeil svg {
  width: 20px;
  height: 20px;
}
/* Plakette in der Kachel: Scheibe links, Text rechts; bei „fällig“ der Chip unter dem Text.
   Höhe bleibt 56 px — keine Reihe springt, egal welcher Zustand. Chip liegt über dem Kachel-Link. */
.kachel .plakette-anzeige {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 0.7rem;
  row-gap: 0.3rem;
  align-items: center;
}
.kachel .plakette-anzeige--faellig > .plakette {
  grid-row: span 2;
}
.kachel .plakette-anzeige--faellig .plakette-anzeige__text {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.3rem;
  align-items: baseline;
  align-self: end;
}
.kachel .plakette-anzeige--faellig .plakette-chip {
  align-self: start;
  justify-self: start;
  min-height: 28px;
  padding: 0.2rem 0.55rem;
  font-size: 0.76rem;
  white-space: normal;
  line-height: 1.2;
}
.kachel .plakette-anzeige--keine {
  z-index: 0;
  display: flex;
}
.kachel .plakette-anzeige--keine .plakette-anzeige__text b {
  font-weight: 500;
}

/* Merken — Text-Knopf auf dem Bild (copy-seiten: „Tippen Sie bei einem Fahrzeug auf ‚Merken‘“) */
.kachel__merk {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 0.85rem;
  border: 1px solid var(--stahl);
  border-radius: var(--radius);
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 140ms var(--ease-ui);
}
.kachel__merk:active {
  transform: scale(0.97);
}
.kachel__merk svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.kachel__merk-an {
  display: none;
}
.kachel__merk[aria-pressed="true"] {
  border-color: var(--magenta);
  color: var(--magenta-text);
}
.kachel__merk[aria-pressed="true"] svg {
  fill: currentColor;
}
.kachel__merk[aria-pressed="true"] .kachel__merk-aus {
  display: none;
}
.kachel__merk[aria-pressed="true"] .kachel__merk-an {
  display: inline;
}
.kachel__merk:focus-visible {
  outline: 2px solid var(--leit);
  outline-offset: 2px;
}

/* Ohne Foto: gestaltete Tafel, Rang bleibt (GESETZ Kap. 10) — Device-Echo „Die Tafel“, themenfest */
.kachel__tafel {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.75rem;
  padding: 1.25rem;
  background: var(--tafel);
  color: var(--kalk-fest);
  text-align: center;
}
.kachel__tafel-logo {
  width: min(9.5rem, 52%);
  height: auto;
}
.kachel__tafel-zeile {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kalk-fest);
}
.kachel__tafel-strich {
  width: 3.25rem;
  height: 3px;
  background: var(--leit);
}

@media (hover: hover) and (pointer: fine) {
  .kachel:hover .kachel__link {
    color: var(--magenta-text);
  }
  .kachel:hover .kachel__bild {
    border-color: var(--tinte);
  }
  .kachel:hover .kachel__pfeil {
    transform: translateX(3px);
  }
  .kachel__merk:hover {
    background: var(--flaeche);
  }
}

/* Ablegen gestaffelt nach Spalte (statt nach Index — 27 Kacheln dürfen nicht 1,6 s warten) */
.klasse__raster > .kachel:nth-child(3n + 2) {
  --staffel: 1;
}
.klasse__raster > .kachel:nth-child(3n + 3) {
  --staffel: 2;
}

/* Leerer Filter */
.bestand__leer {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  padding: clamp(3rem, 6vw, 5rem) 1rem;
  text-align: center;
  border-top: 1px solid var(--stahl);
}
.bestand__leer[hidden] {
  display: none;
}
.bestand__leer-satz {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-h3);
}
.bestand__leer-knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* ---------- 3 Suchauftrag (nutzt .anfrage/.form aus site.css) ---------- */
.suche {
  margin-top: 0;
}
.suche__lead {
  margin-top: 1rem;
  max-width: 26rem;
}
.suche .anfrage__kopf .h2 {
  max-width: 20rem;
}

/* ---------- merkliste.html: heller Textkopf + Vergleich (Baustein 5) ---------- */
.textkopf {
  padding-top: clamp(3rem, 6vw, 5.5rem);
  padding-bottom: clamp(2rem, 3.5vw, 3rem);
  border-bottom: 1px solid var(--stahl);
}
.textkopf__h1 {
  margin-top: 0.7rem;
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.textkopf__lead {
  margin-top: 0.9rem;
  max-width: 38rem;
}
.merkseite {
  padding-top: clamp(2rem, 3.5vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  /* Fuß startet unter dem ersten Bildschirm, solange der Vergleich nachlädt → kein Layout-Sprung im Sichtfeld */
  min-height: max(24rem, calc(100svh - 18rem));
}
/* Leere Merkliste: kein Platzhalter-Hoehe — sonst 540 px ohne Inhalt bis zum Fuss (qa-layout LEER, 768) */
.merkseite:has([data-merk-leer]:not([hidden])) {
  min-height: 0;
}
.merkseite__hinweis {
  padding: 0.75rem 1rem;
  border: 1px solid var(--stahl);
  border-radius: var(--radius);
  background: var(--flaeche);
  font-size: 0.92rem;
  color: var(--tinte);
  margin-bottom: 1.5rem;
}
.merkseite [hidden] {
  display: none !important;
}
.merkseite__leer {
  display: grid;
  justify-items: center;
  gap: 1.2rem;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1rem;
  text-align: center;
  border: 1px solid var(--stahl);
  border-radius: var(--radius);
  background: var(--flaeche);
}
.merkseite__herz {
  width: 4.5rem;
  height: 4.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--stahl);
  border-radius: 50%;
  background: var(--grund);
  color: var(--magenta-text);
}
.merkseite__herz svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.merkseite__leer-satz {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.3;
  max-width: 28rem;
  color: var(--tinte);
}
.merkseite__teilen {
  margin-top: 2.5rem;
  padding: clamp(1.2rem, 2.5vw, 1.6rem);
  border: 1px solid var(--stahl);
  border-radius: var(--radius);
  background: var(--flaeche);
}
.merkseite__teilen-label {
  font-size: var(--fs-cap);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--meta);
}
.merkseite__teilen-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0.7rem 0 0.5rem;
}
.merkseite__teilen-reihe input {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 18rem;
  min-width: 0;
  min-height: 48px;
  padding: 0.6rem 0.75rem;
  font-size: 0.95rem;
  color: var(--tinte);
  background: var(--grund);
  border: 1px solid var(--stahl);
  border-radius: var(--radius);
}
.merkseite__teilen-hilfe {
  font-size: 0.88rem;
  color: var(--meta);
}
.textkopf__weiter {
  margin-top: 1.2rem;
}

/* Vergleichstabelle — Markup kommt aus merkliste.js (.verg …) */
.verg {
  --spalten: 3;
  overflow-x: auto;
}
.verg__kopf,
.verg__zeile {
  display: grid;
  grid-template-columns:
    minmax(9rem, 0.8fr)
    repeat(var(--spalten), minmax(11rem, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
}
.verg__kopf {
  padding-bottom: 1.4rem;
}
.verg__zeile {
  padding: 0.9rem 0;
  border-top: 1px solid var(--kante);
  align-items: center;
}
.verg__zeile:last-child {
  border-bottom: 1px solid var(--kante);
}
.verg__karte {
  min-width: 0;
}
.verg__karte img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--stahl);
  border-radius: var(--radius);
  background: var(--flaeche);
}
.verg__tafel {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--stahl);
  border-radius: var(--radius);
  background: var(--tafel);
  color: var(--kalk-fest);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.verg__tafel span {
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--leit);
}
.verg__titel {
  display: block;
  margin-top: 0.75rem;
  color: var(--tinte);
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.3;
  text-decoration: none;
  overflow-wrap: break-word;
  hyphens: auto;
}
.verg__weg {
  -webkit-appearance: none;
  appearance: none;
  margin-top: 0.4rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--meta);
  font: inherit;
  font-size: 0.88rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.verg__label {
  font-size: var(--fs-cap);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--meta);
}
.verg__wert {
  color: var(--tinte);
  font-weight: 600;
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
.verg__tafel span {
  text-align: center;
}
.verg__kopf + .verg__zeile .verg__wert {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-preis);
  line-height: 1.1;
}
@media (hover: hover) and (pointer: fine) {
  .verg__titel:hover,
  .verg__weg:hover {
    color: var(--magenta-text);
  }
}

/* ---------- Responsiv ---------- */
@media (max-width: 1199px) {
  /* Randspalte wird Klassenkopf über dem Raster */
  .klasse {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
  }
  .klasse__rail-innen {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1.5rem;
  }
  .klasse__zahl {
    margin-top: 0;
  }
  .klasse__hinweis {
    flex-basis: 100%;
    margin-top: 0.4rem;
    max-width: 40rem;
  }
}
@media (max-width: 1100px) {
  .filter__feld select {
    font-size: 0.9rem;
    padding-left: 0.65rem;
  }
}
@media (max-width: 899px) {
  /* Filter einklappbar: Schalter + Ergebnis in einer Zeile, Felder darunter im 2er-Raster */
  .filter__innen {
    flex-wrap: wrap;
    min-height: 0;
    padding-block: 0.6rem;
  }
  .filter__schalter {
    display: inline-flex;
  }
  .filter__felder {
    order: 3;
    flex-basis: 100%;
    display: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0.35rem 0 0.25rem;
  }
  .filter[data-offen="ja"] .filter__felder {
    display: grid;
  }
  .filter__feld {
    max-width: none;
  }
  .filter__feld:first-child {
    grid-column: 1 / -1;
  }
  .filter__ende {
    gap: 0.6rem;
  }
  html {
    scroll-padding-top: calc(var(--leiste) + 4.25rem);
  }
  .klasse__rail-innen {
    top: auto;
  }
  /* 2 Spalten: große Kachel = ganze Zeile */
  .klasse__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kachel,
  .kachel--g3,
  [data-gefiltert="ja"] .kachel--g3 {
    grid-column: span 1;
  }
  .kachel--g2 {
    grid-column: 1 / -1;
  }
  [data-gefiltert="ja"] .kachel--g2 {
    grid-column: span 1;
  }
  .bestand:not([data-gefiltert="ja"]) .kachel--g2 .kachel__bild {
    aspect-ratio: 16 / 9;
  }
  .bestand:not([data-gefiltert="ja"]) .kachel--g2 .kachel__titel {
    font-size: var(--fs-h3);
  }
  .klasse__raster > .kachel:nth-child(n) {
    --staffel: 0;
  }
  .klasse__raster > .kachel:nth-child(2n) {
    --staffel: 1;
  }
  .verg__kopf,
  .verg__zeile {
    grid-template-columns:
      minmax(7rem, 0.7fr)
      repeat(var(--spalten), minmax(9rem, 1fr));
  }
}
@media (max-width: 699px) {
  /* Vergleich: Label über die Werte, Fahrzeuge teilen sich die Breite (Baustein 5, kein Wischen) */
  .verg {
    overflow-x: visible;
  }
  .verg__kopf,
  .verg__zeile {
    grid-template-columns: repeat(var(--spalten), minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
  }
  .verg__ecke {
    display: none;
  }
  .verg__label {
    grid-column: 1 / -1;
  }
  .verg__titel {
    font-size: 0.84rem;
    line-height: 1.3;
  }
  .verg__wert {
    font-size: 0.9rem;
  }
  .verg__tafel {
    font-size: 0.66rem;
    letter-spacing: 0.05em;
  }
  .verg__tafel span {
    padding-bottom: 0.3rem;
    border-bottom-width: 2px;
  }
}
@media (max-width: 599px) {
  /* Liste: normale Kachel = Zeile (Bild links), große Kachel = Karte (Bild oben) */
  .klasse__raster {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .kachel,
  .kachel--g2,
  [data-gefiltert="ja"] .kachel--g2 {
    grid-column: 1 / -1;
  }
  .kachel {
    display: grid;
    grid-template-columns: minmax(0, 41%) minmax(0, 1fr);
    column-gap: 0.95rem;
    align-items: start;
    padding-block: 1.1rem;
    border-bottom: 1px solid var(--kante);
  }
  .kachel--g2 {
    display: flex;
    flex-direction: column;
    padding-top: 0.4rem;
    padding-bottom: 1.6rem;
  }
  [data-gefiltert="ja"] .kachel--g2 {
    display: grid;
    padding-block: 1.1rem;
  }
  .kachel__info {
    padding-top: 0;
  }
  .kachel--g2 .kachel__info {
    padding-top: 0.95rem;
  }
  .kachel__titel {
    font-size: 1.06rem;
  }
  .kachel__daten {
    font-size: 0.84rem;
    margin-top: 0.35rem;
    margin-bottom: 0.6rem;
  }
  .kachel--g2 .kachel__daten {
    font-size: 0.92rem;
  }
  .kachel__unten {
    padding-top: 0.55rem;
  }
  .kachel__fuss {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
  }
  .kachel:not(.kachel--g2) .kachel__fuss,
  [data-gefiltert="ja"] .kachel--g2 .kachel__fuss {
    border-top: 0;
    padding-top: 0;
  }
  .kachel:not(.kachel--g2) .kachel__preis,
  [data-gefiltert="ja"] .kachel--g2 .kachel__preis {
    font-size: 1.35rem;
  }
  .kachel:not(.kachel--g2) .kachel__pfeil {
    display: none;
  }
  .kachel .plakette-anzeige__text {
    font-size: 0.8rem;
  }
  /* Zeile: Chip unter Scheibe + Text über die ganze Infobreite */
  .kachel:not(.kachel--g2) .plakette-anzeige--faellig > .plakette,
  [data-gefiltert="ja"] .kachel--g2 .plakette-anzeige--faellig > .plakette {
    grid-row: auto;
  }
  .kachel:not(.kachel--g2) .plakette-anzeige--faellig .plakette-anzeige__text,
  [data-gefiltert="ja"] .kachel--g2 .plakette-anzeige--faellig .plakette-anzeige__text {
    align-self: center;
  }
  .kachel:not(.kachel--g2) .plakette-anzeige--faellig .plakette-chip,
  [data-gefiltert="ja"] .kachel--g2 .plakette-anzeige--faellig .plakette-chip {
    grid-column: 1 / -1;
  }
  .kachel .plakette-anzeige__text b {
    font-size: 0.92rem;
  }
  /* Merken in der Zeile: nur Symbol, Ziel 40 px */
  .kachel:not(.kachel--g2) .kachel__merk,
  [data-gefiltert="ja"] .kachel--g2 .kachel__merk {
    top: 0.35rem;
    right: 0.35rem;
    min-height: 40px;
    width: 40px;
    padding: 0;
    justify-content: center;
  }
  .kachel:not(.kachel--g2) .kachel__merk span,
  [data-gefiltert="ja"] .kachel--g2 .kachel__merk span {
    display: none !important;
  }
  .kachel:not(.kachel--g2) .kachel__tafel,
  [data-gefiltert="ja"] .kachel--g2 .kachel__tafel {
    gap: 0.45rem;
    padding: 0.6rem;
  }
  .kachel:not(.kachel--g2) .kachel__tafel-zeile {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
  }
  .kachel:not(.kachel--g2) .kachel__tafel-strich {
    width: 2rem;
  }
  .kachel__link::after {
    border-radius: 0;
  }
  .klasse {
    padding-block: 2rem 2.5rem;
    gap: 0.6rem;
  }
  .klasse__raster > .kachel:nth-child(n) {
    --staffel: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kachel__merk,
  .filter__zurueck,
  .filter__schalter {
    transition-duration: 0ms;
  }
}

/* Mobil: offene Filterleiste steht im Fluss (klebend würde sie den halben Bildschirm decken) */
@media (max-width: 899px) {
  .filter[data-offen="ja"] {
    position: relative;
    top: auto;
  }
}
@media (max-width: 599px) {
  .filter__innen {
    gap: 0.5rem;
  }
  .filter__schalter,
  .filter__zurueck {
    padding: 0 0.7rem;
    font-size: 0.88rem;
  }
  .filter__ende {
    gap: 0.5rem;
  }
  .filter__ergebnis {
    font-size: 0.85rem;
  }
  .filter__ergebnis b {
    font-size: 1.1rem;
  }
}

/* Augen-Tor 05.10.2026: leere Merkliste zeigt drei echte Fahrzeuge zum Einstieg (merkliste.js vorschlaege()). */
.merkseite__vorschlag-box {
  width: 100%;
  margin-top: clamp(1.2rem, 3vw, 2rem);
  padding-top: clamp(1.2rem, 3vw, 2rem);
  border-top: 1px solid var(--kante);
  text-align: left;
}
.merkseite__vorschlag-kopf {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 1rem;
}
.merkseite__vorschlag-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.8rem, 2vw, 1.4rem);
}
.merkseite__vorschlag {
  display: grid;
  gap: 0.35rem;
  color: var(--tinte);
  text-decoration: none;
}
.merkseite__vorschlag img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.merkseite__vorschlag-titel {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.25;
}
.merkseite__vorschlag-daten {
  color: var(--meta);
  font-size: 0.92rem;
}
.merkseite__vorschlag:hover .merkseite__vorschlag-titel,
.merkseite__vorschlag:focus-visible .merkseite__vorschlag-titel {
  color: var(--magenta-text);
}
@media (max-width: 760px) {
  .merkseite__vorschlag-liste {
    grid-template-columns: minmax(0, 1fr);
  }
}