/* seiten-a.css — Painscheri Automobile (Autohaus 23) · Schritt 6 Lauf 2, Frischlauf A, 25.10.2026
   Seiten: fahrzeuge · wunschauto-finden · finanzierung · probefahrt · merkliste.
   Liest NUR Tokens aus tokens.css + Rollen aus site.css §0 (Navy + Messing, Inter Tight / Inter, Kante scharf, Motion „Die Flucht“).
   Grammatik „Das Datenblatt“: Hairlines, 7/5-Asymmetrie, große Zahlen, Radius 0 (Bauteile 2 px). Keine Schattenkarten außer Formular-Tafel.
   Unterseiten-Bühne (.unterkopf) steht seit 6d in site.css §4b — EINE Fassung für alle Unterseiten. */

/* ---------- 1 Gemeinsame Bauteile ---------- */
.abschnitt {
  margin-top: var(--abstand, 6rem);
}
.zwei {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: start;
}
.zwei > * {
  min-width: 0;
}
.zwei .lead {
  margin-top: 1rem;
}
.text-gross {
  font: 400 clamp(1.15rem, 1rem + 0.5vw, 1.4rem) / 1.55 var(--font-text);
  color: var(--text);
  max-width: 38rem;
  text-wrap: pretty;
}
.zeilen {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
}
.zeile {
  position: relative;
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 0 0.5rem;
  padding: 1.15rem 0;
}
.zeile.hl::before {
  background: var(--linie);
}
.zeile__nr {
  font: 700 1.35rem / 1.15 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}
.zeile__titel {
  font: 650 1.2rem / 1.25 var(--font-display);
  letter-spacing: -0.015em;
}
.zeile p {
  color: var(--text-leise);
  max-width: 32rem;
}
.zeile__titel + p {
  margin-top: 0.3rem;
}
/* Formular-Tafel (Schatten = Kontakt-Schatten an Bedienteilen, bau-brief §7) */
.tafel-form {
  background: var(--grund);
  border: 1px solid var(--linie);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  box-shadow:
    0 1px 2px color-mix(in oklch, var(--schatten) 6%, transparent),
    0 24px 50px -32px color-mix(in oklch, var(--schatten) 40%, transparent);
}
.tafel-form .form {
  max-width: none;
}
.form__titel {
  font: 700 clamp(1.35rem, 1.1rem + 0.6vw, 1.7rem) / 1.15 var(--font-display);
  letter-spacing: -0.02em;
  margin-bottom: 1.3rem;
}
.feld select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.6rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 1.15rem) 52%,
    calc(100% - 0.8rem) 52%;
  background-size:
    0.35rem 0.35rem,
    0.35rem 0.35rem;
  background-repeat: no-repeat;
  cursor: pointer;
}
.feld select:focus {
  border-color: var(--leit-text);
}
.feld__einheit {
  position: relative;
}
.feld__einheit input {
  padding-right: 2.4rem;
}
.feld__einheit span {
  position: absolute;
  right: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-leise);
  pointer-events: none;
}
.feld__hilfe {
  font-size: 0.8125rem;
  color: var(--text-leise);
}
/* Segment-Wahl (Laufzeit, Tage, Uhrzeiten): echte Radios, Label als Taste */
.segmente {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.segment {
  position: relative;
}
.segment input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.segment > span {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 4.4rem;
  min-height: 46px;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--linie);
  border-radius: 2px;
  background: var(--grund);
  color: var(--text);
  font: 600 0.92rem / 1.15 var(--font-text);
  text-align: center;
  transition:
    background-color 160ms var(--ease-ui),
    border-color 160ms var(--ease-ui),
    color 160ms var(--ease-ui),
    transform 160ms var(--ease-ui);
}
/* Manager-Hülle (data-mgr-huelle) im Chip erbt nur — nie selbst Chip (Fix s7/S3: „48“ verschwand im gewählten Chip) */
.segment > span span {
  display: inline;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
}
.segment small {
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--text-leise);
}
.segment input:checked + span {
  background: var(--text);
  border-color: var(--text);
  color: var(--grund);
}
.segment input:checked + span small {
  color: color-mix(in oklch, var(--grund) 78%, var(--text));
}
.segment input:focus-visible + span {
  outline: 2px solid var(--leit-text);
  outline-offset: 2px;
}
.segment input:disabled + span {
  opacity: 0.38;
  text-decoration: line-through;
  cursor: not-allowed;
}
.segment:active > span {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .segment input:not(:checked):not(:disabled):hover + span {
    border-color: var(--text);
  }
}
/* Zusammenfassung (Werte gehen sichtbar in die Anfrage) */
.zusammen {
  display: grid;
  margin: 0 0 1.2rem;
  border-top: 1px solid var(--linie);
}
.zusammen div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linie);
}
.zusammen dt {
  font: 600 0.75rem / 1.5 var(--font-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.zusammen dd {
  font-weight: 600;
  min-width: 0;
}
/* Fahrzeug-Vorschau (Auswahl aus dem Bestand) */
.vorschau {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: var(--flaeche);
  min-height: 7.6rem;
}
.vorschau[hidden] {
  display: none;
}
.vorschau img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--linie);
}
.vorschau__name {
  font: 650 1.05rem / 1.25 var(--font-display);
}
.vorschau__daten {
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  color: var(--text-leise);
}
.vorschau__preis {
  margin-top: 0.35rem;
  font: 700 1.3rem / 1 var(--font-display);
  letter-spacing: -0.02em;
}
.vorschau a {
  font-size: 0.85rem;
  font-weight: 600;
}

/* ---------- 2 Kontakt-Band (vor dem Fuß, full-bleed, Hairlines — wie die Fakten-Leiste) ---------- */
.kontaktband {
  margin-top: var(--abstand, 6rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--linie);
}
.kontaktband__zelle {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  min-width: 0;
  padding: clamp(1.6rem, 2.6vw, 2.4rem) var(--rand-leiste);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--t-ui) var(--ease-ui);
}
.kontaktband__zelle + .kontaktband__zelle {
  border-left: 1px solid var(--linie);
}
.kontaktband__label {
  font: 600 0.75rem / 1.3 var(--font-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.kontaktband__wert {
  font: 700 clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem) / 1.05 var(--font-display);
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.kontaktband__fein {
  font-size: 0.875rem;
  color: var(--text-leise);
}
@media (hover: hover) and (pointer: fine) {
  a.kontaktband__zelle:hover {
    background: var(--flaeche);
  }
}
a.kontaktband__zelle:active .kontaktband__wert {
  transform: scale(0.98);
}
a.kontaktband__zelle:focus-visible {
  outline-offset: -3px;
}

/* ---------- 3 Anfrage-Block (fahrzeuge · wunschauto · merkliste): links Ansprechpartner, rechts Formular-Tafel ---------- */
.anfrage-block {
  scroll-margin-top: calc(var(--leiste-h) + 1rem);
}
.anfrage-block .person {
  margin: 1.8rem 0 0;
}
.anfrage-block .fakten-mini {
  margin-top: 1.8rem;
}
.fakten-mini {
  display: grid;
  border-top: 1px solid var(--linie);
}
.fakten-mini div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--linie);
}
.fakten-mini dt {
  color: var(--text-leise);
}
.fakten-mini dd {
  font-weight: 600;
  text-align: right;
}
.fakten-mini a {
  color: var(--text);
}

/* ---------- 4 fahrzeuge.html ---------- */
.klassen {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--linie);
}
.klassen__gesamt,
.klassen__link {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  min-width: 0;
  padding: clamp(1.5rem, 2.4vw, 2.2rem) var(--rand-leiste);
}
.klassen__link {
  border-left: 1px solid var(--linie);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--t-ui) var(--ease-ui);
}
.klassen__zahl {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font: 700 clamp(2.5rem, 1.4rem + 2.6vw, 4rem) / 1 var(--font-display);
  letter-spacing: -0.035em;
}
.klassen__titel {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.klassen__titel::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-ui) var(--ease-ui);
}
.klassen__gesamt p {
  color: var(--text-leise);
  font-size: 0.9rem;
}
@media (hover: hover) and (pointer: fine) {
  .klassen__link:hover {
    background: var(--flaeche);
  }
  .klassen__link:hover .klassen__titel::after {
    transform: translateY(1px) rotate(45deg);
  }
}
.klassen__link:active {
  background: var(--flaeche);
}
/* Auswahl aus „Plus für Plus“ (?plus=…&bis=…) */
.fz-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 2.5rem;
  padding: 1.1rem 1.3rem;
  background: var(--flaeche);
  border-left: 2px solid var(--text);
}
.fz-filter__text {
  font-weight: 600;
}
.fz-filter__text b {
  font: 700 1.35rem / 1 var(--font-display);
  letter-spacing: -0.02em;
}
.fz-filter__plus {
  color: var(--text-leise);
  font-weight: 500;
}
.fz-filter__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  align-items: center;
}
.fz-leer {
  margin-top: 2.5rem;
  max-width: 40rem;
  padding-top: 1.4rem;
  border-top: 2px solid var(--text);
}
.fz-leer p {
  font: 650 clamp(1.3rem, 1rem + 1vw, 1.75rem) / 1.3 var(--font-display);
  letter-spacing: -0.015em;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}
.liste {
  margin-top: 3rem;
}
.fz-reihe2,
.fz-raster {
  display: grid;
  gap: 2.75rem 1.5rem;
}
.fz-reihe2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fz-raster {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 3.25rem;
}
.fz {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  scroll-margin-top: calc(var(--leiste-h) + 1.5rem);
}
.fz__link::after {
  /* ganzflächig klickbar (GESETZ Kap. 10) — der Merken-Knopf liegt darüber */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.fz__link:focus-visible {
  outline: none;
}
.fz__link:focus-visible::after {
  outline: 2px solid var(--leit-text);
  outline-offset: 4px;
}
.fz .kachel__bild {
  position: relative;
  aspect-ratio: 3 / 2;
}
.fz .kachel__plus {
  min-height: 1.1em;
}
.fz-raster .kachel__kopf {
  flex-direction: column;
  gap: 0.35rem;
}
.fz__klasse {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0.4rem 0.6rem;
  background: color-mix(in oklch, var(--dunkel-fest) 82%, transparent);
  color: var(--kalk-fest);
  font: 600 0.68rem / 1.2 var(--font-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fz__fuss {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--linie);
}
.fz .kachel__plus {
  margin-bottom: 0.85rem;
}
.fz__daten {
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--text-leise);
}
.fz__merk {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  min-height: 40px;
  padding: 0 0.15rem 0 0.4rem;
  border: 0;
  background: transparent;
  color: var(--text-leise);
  font: 600 0.82rem / 1 var(--font-text);
  cursor: pointer;
  transition:
    color 160ms var(--ease-ui),
    transform 160ms var(--ease-ui);
}
.fz__merk svg,
.merk-knopf svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  transition: fill 160ms var(--ease-ui);
}
.fz__merk[aria-pressed="true"] {
  color: var(--akzent-text);
}
.fz__merk[aria-pressed="true"] svg {
  fill: currentColor;
}
.fz__merk:active {
  transform: scale(0.95);
}
@media (hover: hover) and (pointer: fine) {
  .fz__merk:hover {
    color: var(--text);
  }
}
/* Tafeln füllen die letzte Reihe (nie Waisen-Karte) */
.fz-tafel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  min-height: 18rem;
  padding: clamp(1.5rem, 2.4vw, 2.2rem);
}
.fz-tafel[hidden] {
  display: none;
}
.fz-tafel__text {
  font: 700 clamp(1.45rem, 1.1rem + 1vw, 2rem) / 1.12 var(--font-display);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.fz-tafel--such {
  background: var(--leit);
  color: var(--auf-leit);
}
.fz-tafel--plus {
  background: var(--flaeche);
  border: 1px solid var(--linie);
}
.fz-tafel__plus {
  margin-bottom: -0.5rem;
}
/* Intro + Marken (Datenblatt) */
.marken {
  margin: 0;
  display: grid;
  border-top: 2px solid var(--text);
}
.marken__zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--linie);
}
.marken__zeile dt {
  font-weight: 500;
}
.marken__zeile dd {
  font: 700 1.15rem / 1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.fein {
  margin-top: 1.1rem;
  font-size: 0.8125rem;
  color: var(--text-leise);
}

/* ---------- 5 wunschauto-finden.html ---------- */
.seite-wunschauto .werkzeug {
  margin-top: 0;
  padding: clamp(3.5rem, 6vw, 5.5rem) 0 4rem;
}
.seite-wunschauto .wz__treffer {
  min-height: 19rem;
}
/* Abgleich: Inserat-Beispiel läuft über die LINKE Viewport-Kante (Layout-Bruch), drei Zeilen rechts */
.abgleich {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: center;
  padding-right: max(var(--rand), calc((100% - var(--max)) / 2 + var(--rand)));
}
.abgleich__bild {
  position: relative;
  margin: 0;
  background: var(--dunkel-fest);
}
.abgleich__bild img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.abgleich__titel {
  display: grid;
  gap: 0.35rem;
  padding: 1.1rem max(var(--rand), calc((100vw - var(--max)) / 2 + var(--rand)))
    1.2rem 1.5rem;
  padding-left: max(var(--rand), calc((100vw - var(--max)) / 2 + var(--rand)));
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
}
.abgleich__quelle {
  font: 600 0.72rem / 1.3 var(--font-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.abgleich__inserat {
  font: 650 clamp(1rem, 0.9rem + 0.4vw, 1.2rem) / 1.35 var(--font-display);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.abgleich__inserat mark {
  background: none;
  color: inherit;
  padding: 0 0.05em;
  box-shadow: inset 0 -0.42em 0
    color-mix(in oklch, var(--akzent) 34%, transparent);
}
.abgleich__inserat i {
  font-style: normal;
  color: var(--akzent-text);
}

/* ---------- 6 finanzierung.html ---------- */
.fin__werkzeug {
  margin-top: 2rem;
  display: grid;
  gap: 1.3rem;
}
.fin__hinweis {
  padding-left: 1rem;
  border-left: 2px solid var(--akzent);
  color: var(--text-leise);
  font-size: 0.92rem;
  max-width: 34rem;
}
.fin__knopf {
  justify-self: start;
}
@media (min-width: 901px) {
  .fin .tafel-form {
    position: sticky;
    top: calc(var(--leiste-h) + 1.5rem);
  }
}
/* Ablauf 01–03 als Datenblatt-Leiste */
.ablauf3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.ablauf3__schritt {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  padding: 2rem 2rem 2.2rem 0;
}
.ablauf3__schritt + .ablauf3__schritt {
  padding-left: 2rem;
  border-left: 1px solid var(--linie);
}
.ablauf3__nr {
  font: 700 clamp(2.5rem, 1.4rem + 2.6vw, 4rem) / 1 var(--font-display);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.ablauf3__text {
  color: var(--text-leise);
  max-width: 22rem;
}
.ablauf3__text b {
  display: block;
  color: var(--text);
  font: 650 1.15rem / 1.25 var(--font-display);
  margin-bottom: 0.25rem;
}
/* „Ihr jetziges Auto“ — die EINE dunkle Sektion der Seite (Hell-Deckel bau-brief §2) */
.ihr-auto {
  --text: var(--kalk-fest);
  --text-leise: var(--meta-fest);
  --linie: color-mix(in oklch, var(--kalk-fest) 18%, transparent);
  --leit-text: var(--kalk-fest);
  scroll-margin-top: var(--leiste-h);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background: var(--leit);
  color: var(--kalk-fest);
}
[data-theme="dark"] .ihr-auto {
  background: var(--buehne-tief);
  border-block: 1px solid color-mix(in oklch, var(--kalk-fest) 12%, transparent);
}
.ihr-auto .h2 {
  color: var(--kalk-fest);
}
.ihr-auto p {
  color: var(--meta-fest);
}
.ihr-auto .text-gross {
  color: var(--kalk-fest);
}
.ihr-auto__form {
  display: grid;
  gap: 0.95rem;
}
.ihr-auto .feld label,
.ihr-auto .feld legend {
  color: var(--kalk-fest);
}
.ihr-auto .feld input,
.ihr-auto .feld textarea {
  background: var(--hell-fest);
  color: var(--dunkel-fest);
  border-color: transparent;
}
.ihr-auto .feld input:focus,
.ihr-auto .feld textarea:focus {
  border-color: var(--akzent-buehne);
}
.ihr-auto .einwilligung,
.ihr-auto .einwilligung a {
  color: var(--meta-fest);
}
.ihr-auto .einwilligung a {
  color: var(--kalk-fest);
}
.ihr-auto .form__meldung[data-art="ok"] {
  color: var(--kalk-fest);
}
.ihr-auto .form__meldung[data-art="fehler"] {
  color: var(--kalk-fest);
}
.schritt3 {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.3rem 0.4rem;
  padding: 1rem 0;
  border-top: 1px solid var(--linie);
}
.schritt3__nr {
  font: 700 1.2rem / 1.1 var(--font-display);
  color: var(--akzent-buehne);
  font-variant-numeric: tabular-nums;
  padding-top: 0.15rem;
}
.ihr-auto .zusammen {
  border-top-color: var(--linie);
}
.ihr-auto .zusammen div {
  border-bottom-color: var(--linie);
}
.ihr-auto .zusammen dt {
  color: var(--meta-fest);
}
.ihr-auto .zusammen dd {
  color: var(--kalk-fest);
}
.ihr-auto .knopf--akzent {
  background: var(--akzent-buehne);
  border-color: var(--akzent-buehne);
  color: var(--dunkel-fest);
}
@media (hover: hover) and (pointer: fine) {
  .ihr-auto .knopf--akzent:hover {
    background: var(--kalk-fest);
    border-color: var(--kalk-fest);
  }
}
/* FAQ-Kapitel */
.fragen {
  border-top: 2px solid var(--text);
}
.frage {
  border-bottom: 1px solid var(--linie);
}
.frage summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  min-height: 3.6rem;
  padding: 1rem 0;
  font: 650 clamp(1.1rem, 1rem + 0.35vw, 1.3rem) / 1.3 var(--font-display);
  letter-spacing: -0.012em;
  cursor: pointer;
  list-style: none;
}
.frage summary::-webkit-details-marker {
  display: none;
}
.frage summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.6px 100% no-repeat;
  transition: transform var(--t-ui) var(--ease-ui);
}
.frage[open] summary::after {
  transform: rotate(45deg);
}
.frage p {
  padding: 0 3rem 1.3rem 0;
  color: var(--text-leise);
  max-width: 40rem;
}
.hinweis-zeile {
  margin-top: 1.6rem;
  padding: 1rem 0 0;
  border-top: 1px solid var(--linie);
  font-size: 0.875rem;
  color: var(--text-leise);
  max-width: 30rem;
}

/* ---------- 7 probefahrt.html ---------- */
.termin__schritt {
  padding: 1.15rem 0;
  border-top: 1px solid var(--linie);
}
.termin__schritt:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.termin__legende {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
  padding: 0;
  font: 650 1.05rem / 1.25 var(--font-display);
}
.termin__legende b {
  font: 700 0.85rem / 1 var(--font-text);
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}
.tage {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.4rem;
}
.tage .segment > span {
  min-width: 0;
  width: 100%;
  padding: 0.55rem 0.3rem;
}
.zeiten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
  gap: 0.4rem;
}
.zeiten .segment > span {
  min-width: 0;
  width: 100%;
}
.termin__gewaehlt {
  font-weight: 600;
  min-height: 1.6em;
}
.termin__gewaehlt:empty::before {
  content: "\2014";
  color: var(--text-leise);
}
.termin__rueckfall .form__zeile {
  margin-top: 0.2rem;
}
.mitbringen {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  border-top: 2px solid var(--text);
}
.mitbringen li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linie);
}
.mitbringen b {
  font: 700 0.95rem / 1.5 var(--font-display);
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}
.h-3.abstand-oben {
  margin-top: 3rem;
}
.anfahrt {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  border-top: 1px solid var(--linie);
}
.anfahrt__text {
  padding: 3.25rem clamp(1.5rem, 4vw, 4rem) 3.5rem;
  padding-left: max(var(--rand), calc((100vw - var(--max)) / 2 + var(--rand)));
}
.anfahrt .karte {
  min-height: 560px;
}

/* ---------- 8 merkliste.html ---------- */
.merk__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem 3rem;
  padding-bottom: 1.6rem;
  border-bottom: 2px solid var(--text);
}
.merk__zahl {
  font: 700 clamp(2.1rem, 1rem + 2.6vw, 3.25rem) / 1.05 var(--font-display);
  letter-spacing: -0.025em;
}
.merk__hinzu {
  width: min(26rem, 100%);
}
.merk__leer {
  max-width: 44rem;
  padding: 2.4rem 0 0.5rem;
}
.merk__leer p {
  font: 650 clamp(1.35rem, 1rem + 1.1vw, 1.9rem) / 1.3 var(--font-display);
  letter-spacing: -0.015em;
  margin-bottom: 1.6rem;
  text-wrap: balance;
}
.vgl {
  --n: 2;
  margin-top: 2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.vgl__raster {
  display: grid;
  grid-template-columns: 11rem repeat(var(--n), minmax(15rem, 1fr));
  min-width: min-content;
}
.vgl__label,
.vgl__wert {
  padding: 0.85rem 1.25rem 0.85rem 0;
  border-bottom: 1px solid var(--linie);
  min-width: 0;
}
.vgl__wert {
  padding-left: 1.25rem;
  border-left: 1px solid var(--linie);
}
.vgl__label {
  font: 600 0.75rem / 1.5 var(--font-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
  padding-top: 1.05rem;
}
.vgl__kopf {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}
.vgl__kopf img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--flaeche);
}
.vgl__name {
  font: 650 1.15rem / 1.25 var(--font-display);
  letter-spacing: -0.012em;
}
.vgl__name a {
  text-decoration: none;
  border-bottom: 1px solid var(--linie);
}
.vgl__preis {
  font: 700 clamp(1.4rem, 1.1rem + 0.8vw, 1.9rem) / 1 var(--font-display);
  letter-spacing: -0.02em;
}
.vgl__plus {
  font: 600 0.75rem / 1.6 var(--font-text);
  letter-spacing: 0.05em;
  color: var(--text-leise);
}
.vgl__plus i {
  font-style: normal;
  font-weight: 700;
  color: var(--akzent-text);
  padding: 0 0.2em;
}
.vgl__weg {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-leise);
  font: 600 0.82rem / 1.4 var(--font-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  min-height: 32px;
}
@media (hover: hover) and (pointer: fine) {
  .vgl__weg:hover {
    color: var(--text);
  }
}
.vgl__bester {
  display: inline-block;
  margin-left: 0.4rem;
  font: 600 0.68rem / 1 var(--font-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--akzent-text);
  vertical-align: 0.15em;
}
.merk__aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 1.8rem;
}

/* ---------- 9 Responsive ---------- */
@media (max-width: 1100px) {
  .tage {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .zwei,
  .abgleich,
  .anfahrt {
    grid-template-columns: minmax(0, 1fr);
  }
  .abgleich {
    padding-inline: 0;
    gap: 2rem;
  }
  .abgleich__text {
    padding-inline: var(--rand);
  }
  .abgleich__titel {
    padding: 1rem var(--rand);
  }
  .klassen {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .klassen__gesamt {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--linie);
  }
  .klassen__link:nth-child(2) {
    border-left: 0;
  }
  .anfahrt__text {
    padding: 2.5rem var(--rand) 2.5rem;
  }
  .anfahrt .karte {
    min-height: 420px;
  }
  .ablauf3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .ablauf3__schritt,
  .ablauf3__schritt + .ablauf3__schritt {
    grid-template-columns: 4.2rem minmax(0, 1fr);
    display: grid;
    padding: 1.4rem 0;
    border-left: 0;
  }
  .ablauf3__schritt + .ablauf3__schritt {
    border-top: 1px solid var(--linie);
  }
  .ablauf3__nr {
    font-size: 2.2rem;
  }
}
@media (max-width: 760px) {
  .abschnitt {
    margin-top: var(--abstand-mobil, 3.5rem);
  }
  .klassen {
    grid-template-columns: minmax(0, 1fr);
  }
  .klassen__link {
    border-left: 0;
    border-top: 1px solid var(--linie);
    grid-template-columns: 4.2rem minmax(0, 1fr);
    align-items: center;
    padding-block: 1rem;
  }
  .klassen__link:nth-child(2) {
    border-top: 0;
  }
  .klassen__zahl {
    font-size: 2.2rem;
  }
  .klassen__gesamt {
    padding-block: 1.3rem;
  }
  .fz-reihe2,
  .fz-raster {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.4rem;
  }
  .fz-raster {
    margin-top: 2.4rem;
  }
  .fz-raster .kachel__kopf {
    flex-direction: row;
  }
  .fz .kachel__bild {
    aspect-ratio: 4 / 3;
  }
  .fz-tafel {
    min-height: 13rem;
  }
  .kontaktband {
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--abstand-mobil, 3.5rem);
  }
  .kontaktband__zelle + .kontaktband__zelle {
    border-left: 0;
    border-top: 1px solid var(--linie);
  }
  .kontaktband__zelle {
    padding-block: 1.25rem;
  }
  .kontaktband__wert {
    font-size: 1.6rem;
  }
  .vorschau {
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 0.8rem;
  }
  .tage {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .vgl__raster {
    grid-template-columns: repeat(var(--n), minmax(11.5rem, 1fr));
  }
  .vgl__label {
    grid-column: 1 / -1;
    padding: 1rem 0 0.2rem;
    border-bottom: 0;
  }
  .vgl__wert {
    padding: 0.35rem 1rem 0.85rem 0;
    border-left: 0;
  }
  .vgl__wert + .vgl__wert {
    padding-left: 1rem;
    border-left: 1px solid var(--linie);
  }
  .vgl__label[data-kopf] {
    display: none;
  }
  .zusammen div {
    grid-template-columns: 6.2rem minmax(0, 1fr);
  }
  .frage p {
    padding-right: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .segment > span,
  .fz__merk,
  .frage summary::after {
    transition: none;
  }
}

/* ---------- 10 Rhythmus-Stufen (Abstand oben, Desktop → Handy) + Seiten-Raster ---------- */
.ab-3 { --abstand: 3rem; --abstand-mobil: 2rem; }
.ab-5 { --abstand: 5rem; --abstand-mobil: 3rem; }
.ab-6 { --abstand: 6rem; --abstand-mobil: 3.5rem; }
.ab-7 { --abstand: 7rem; --abstand-mobil: 4rem; }
.ab-8 { --abstand: 8rem; --abstand-mobil: 4.5rem; }
.zwei--weit {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.zwei--text {
  align-items: start;
}
.text-gross a {
  color: var(--text);
  text-underline-offset: 0.2em;
}
.fin__intro {
  margin-top: 1.2rem;
}
.wz__anfragen {
  align-self: center;
}
.abgleich__text .zeilen {
  margin-top: 1.4rem;
}
.abgleich__tel {
  margin-top: 1.4rem;
}
.termin {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas:
    "intro form"
    "mit form";
  grid-template-rows: auto 1fr;
  gap: 0 clamp(2.5rem, 5vw, 5.5rem);
  align-items: start;
}
.termin__intro {
  grid-area: intro;
  min-width: 0;
}
.termin__intro .text-gross {
  margin-top: 1.2rem;
}
.termin__mit {
  grid-area: mit;
  min-width: 0;
  margin-top: 3rem;
}
.termin__tafel {
  grid-area: form;
  min-width: 0;
}
.anfahrt__adresse {
  margin-top: 1.2rem;
  font-weight: 600;
}
.anfahrt .fakten-mini {
  margin-top: 1.6rem;
  max-width: 26rem;
}
.anfahrt__route {
  margin-top: 1.6rem;
}
@media (max-width: 900px) {
  .zwei--weit {
    grid-template-columns: minmax(0, 1fr);
  }
  .termin {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "form" "mit";
    gap: 2rem;
  }
  .termin__mit {
    margin-top: 0.5rem;
  }
  .kontaktband {
    grid-template-columns: minmax(0, 1fr);
  }
  .kontaktband__zelle + .kontaktband__zelle {
    border-left: 0;
    border-top: 1px solid var(--linie);
  }
}

/* Sehen-Loop R1 (1440): Tafel-Inhalt oben, Link unten · BP-Tafel → site.css §14 */
.fz-tafel {
  justify-content: flex-start;
}
.fz-tafel > a {
  margin-top: auto;
}
.fz-tafel__plus {
  margin-bottom: 0.2rem;
}
[data-theme="dark"] .fz-tafel--such {
  background: color-mix(in oklch, var(--leit) 24%, var(--grund));
  color: var(--text);
}

/* Sehen-Loop R1 (1440, alle Seiten): Listen-/Fieldset-Reset, Vergleichszeilen als echtes Raster, Laufzeit in einer Reihe */
.vgl__zeile {
  display: contents;
}
ol.ablauf3 {
  list-style: none;
  margin: 0;
  padding: 0;
}
fieldset.termin__schritt {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--linie);
  padding: 1.15rem 0;
  min-width: 0;
}
.termin__form > .termin__schritt:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.termin__gewaehlt:empty {
  display: none;
}
.termin__gewaehlt:empty::before {
  content: none;
}
.ihr-auto .text-gross {
  margin-top: 1.2rem;
}
.fin__werkzeug .form__zeile {
  grid-template-columns: minmax(9rem, 0.8fr) auto;
  gap: 1rem 1.5rem;
  align-items: start;
}
.fin__werkzeug .segment > span {
  min-width: 3.9rem;
}
.abgleich__titel {
  padding: 1.1rem 1.5rem 1.2rem max(var(--rand), calc((100vw - var(--max)) / 2 + var(--rand)));
}
@media (max-width: 900px) {
  .abgleich__titel {
    padding: 1rem var(--rand);
  }
}
@media (max-width: 760px) {
  .fin__werkzeug .form__zeile {
    grid-template-columns: minmax(0, 1fr);
  }
}
fieldset.termin__schritt {
  border-top: 0;
  box-shadow: inset 0 1px 0 var(--linie);
}
.termin__form > fieldset.termin__schritt:first-of-type {
  box-shadow: none;
}
fieldset > .termin__legende {
  float: left;
  width: 100%;
}
fieldset > .termin__legende + * {
  clear: both;
}
.zeiten__hinweis {
  color: var(--text-leise);
  font-size: 0.92rem;
}
.zeiten__hinweis {
  grid-column: 1 / -1;
}
[data-theme="dark"] .ihr-auto {
  background: color-mix(in oklch, var(--leit) 16%, var(--grund));
}

/* qa-layout R1: kein transparenter Klick-Deckel über dem Text — die Datenzeile gehört zum Link, der Merken-Knopf liegt in einer freigehaltenen Ecke */
.fz__link {
  flex: 1;
}
.fz__link::after {
  content: none;
}
.fz__link:focus-visible {
  outline: 2px solid var(--leit-text);
  outline-offset: 4px;
}
.fz .fz__daten {
  display: block;
  margin-top: auto;
  padding: 0.75rem 6.4rem 0.2rem 0;
  border-top: 1px solid var(--linie);
  min-height: 2.9rem;
}
.fz__merk {
  position: absolute;
  right: 0;
  bottom: 0;
  min-height: 2.75rem;
}
@media (max-width: 1100px) and (min-width: 761px) {
  .fz__merk span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    font-size: 0;
  }
  .fz .fz__daten {
    padding-right: 2.8rem;
  }
}
.fz-filter {
  margin-bottom: 3rem;
}

/* ---------- Fix-Runde s7 (25.10.2026): Finanzierung — Beweis-Zitat unter dem Ablauf + „Passend dazu“ ---------- */
.fin-beleg {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: end;
  margin-top: clamp(2.2rem, 3.4vw, 3rem); /* die Haarlinie darüber trägt schon der Ablauf */
}
.fin-beleg__bild {
  display: block;
  color: var(--text-leise);
  text-decoration: none;
}
.fin-beleg__bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 260ms var(--ease-ui);
}
.fin-beleg__bild:active img {
  transform: scale(0.99);
}
.fin-beleg__unter {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.8125rem;
}
.fin-beweis {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding-bottom: 0.4rem;
}
.fin-beweis__text {
  margin: 0;
}
.fin-beweis__text p {
  font: 600 clamp(1.2rem, 0.9rem + 0.9vw, 1.55rem) / 1.4 var(--font-display);
  letter-spacing: -0.012em;
  word-spacing: 0.04em;
  color: var(--text);
}
.fin-beweis__quelle {
  font-size: 0.8125rem;
  color: var(--text-leise);
}
.fin-beweis__quelle a {
  color: inherit;
}
.verwandt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.6rem;
  margin-top: 1.8rem;
}
.verwandt__titel {
  flex-basis: 100%;
  margin: 0;
  font: 600 var(--t-z1) / 1.3 var(--font-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-leise);
}
@media (max-width: 760px) {
  .fin-beleg {
    grid-template-columns: minmax(0, 1fr);
  }
}