/* ==========================================================================
   css/fahrzeug.css - nur fuer fahrzeug.html
   --------------------------------------------------------------------------
   Diese Regeln (heute 472 Zeilen samt Druckblock) standen
   bis zum 26.09.2026 als <style>-Block IM
   Quelltext von fahrzeug.html (Befund N8.11). Das hatte drei Nachteile:

     1. 19 KB Formatangaben gingen bei JEDEM der 47 Fahrzeugaufrufe neu
        ueber die Leitung - eine eigene Datei liegt nach dem ersten Auto
        im Zwischenspeicher des Browsers und wird kein zweites Mal geholt.
     2. Der Block liess sich nicht mit den anderen Formatvorlagen
        vergleichen; der kritische Layoutfehler vom 26.09. (Hauptfoto am
        Handy 2.846 px breit) sass genau an dieser Naht.
     3. Ohne eigene Datei gibt es keine Versionsnummer aus dem Dateidatum -
        eine Aenderung haette erst nach dem naechsten HTML-Abruf gewirkt.

   Reihenfolge NICHT veraendern: Die Datei wird an genau der Stelle
   eingebunden, an der frueher der <style>-Block stand - also NACH
   css/bm.css und css/umzug.css. Damit gilt dieselbe Rangfolge wie vorher,
   Regel fuer Regel.

   Zu den 37 "!important": alle 37 stehen im @media print-Block ganz unten.
   Dort sind sie richtig - ein Druckblatt muss die Bildschirmregeln
   ueberschreiben, und einen spaeteren Rang als @media print gibt es nicht.
   Ausserhalb des Druckblocks steht kein einziges !important.

   @layer waere der naechste Schritt (dann koennte diese Datei ohne
   Rangtricks ueber bm.css liegen). Bewusst NICHT gemacht: kennt ein
   Browser @layer nicht, ueberspringt er den GANZEN Block - die Seite
   staende dann voellig ohne Formatierung da. Das ist beim Livegang am
   01.11.2026 das falsche Risiko.
   ========================================================================== */

/* Ausnahmeliste zu den Abstands-Token (N8.10, 26.09.2026)
   --------------------------------------------------------------------------
   Alle geraden Pixelangaben dieser Datei laufen jetzt ueber die Token aus
   css/bm.css. Uebrig bleiben genau diese UNGERADEN Werte - sie sitzen an
   kleinen Etiketten und Knoepfen, wo ein Schritt von 2 px sichtbar waere:

     gap:1px           Fugen zwischen den Eckdaten-Kacheln (Trennlinie)
     padding:3px ...   Zaehler "1 / 28" ueber dem Foto
     padding:5px 0     Zeile im EnVKV-Kasten
     margin:9px 0 0    Abstand ueber der Zubehoer-Liste
     padding:9px ...   Zubehoer-Knopf
     padding:11px 0    Zeile in der Fahrzeugakte
     gap:11px          Abstand in der mobilen Kaufleiste
     padding:13px 15px Kaufleisten-Knopf

   Acht Ausnahmen mit Begruendung statt 323 namenloser Zahlen - das war
   der Sinn der Uebung. Wer eine davon anfasst, prueft sie im Browser
   nach; eine Rundung auf 2 px waere eine Bildaenderung, keine Aufraeumung.

   Dasselbe gilt seit dem 29.09.2026 fuer Schriftgroesse, Farbe und Radius:
   alles, was es in css/bm.css als Token gibt oder mehrfach vorkommt, laeuft
   ueber ein Token. Roh stehen nur noch Einzelwerte ohne passendes Token:
     font-size  .64rem .69rem .72rem .84rem 1.1rem 1.12rem
     Farbe      #d23b2f (rotes Band), #EFC75E (fehlender EnVKV-Wert),
                #f2f2f2 (Bildgrund Aehnliche), rgba(17,17,17,.55/.85/.9)
                (Galerie-Knoepfe), rgba(242,239,230,.66/.8), rgba(0,0,0,
                .02/.03/.14), rgba(255,255,255,.045)
     Radius     5px (Auswahlkaestchen), 9px (Paket-Vorbemerkung)
   Der Druckblock ganz unten bleibt bewusst roh: Punkt-Masse und reines
   Schwarz gehoeren zum Papier, nicht zum Hausraster.
*/

/* Detailseiten-Umbau (24.08.2026): Galerie-Pfeile, aufklappbares Zubehör,
   hervorgehobene Fahrzeugakte, "Das koennte auch passen", mobile Kaufleiste. */
.gal-pfeil { position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: var(--rad-kreis); border: none; cursor: pointer;
  background: rgba(17,17,17,.55); color: var(--weiss); font-size: var(--txt-26); line-height: var(--zeile-100);
  display: flex; align-items: center; justify-content: center; transition: background .15s; }
.gal-pfeil:hover { background: rgba(17,17,17,.85); }
.gal-zurueck { left: 12px; } .gal-vor { right: 12px; }
.gal-zaehler { position: absolute; right: 12px; bottom: 12px; background: var(--foto-schleier);
  color: var(--weiss); font-size: var(--txt-12-5); font-weight: 600; padding: 3px var(--raum-10); border-radius: var(--rad-rund); }
.dt-galerie { position: relative; }
/* Zulaufwagen zeigen das Werbebild ihres Inserats (02.10.2026). Es ist eine
   Tafel mit Text, kein Fahrzeugfoto: ganz zeigen statt oben beschneiden -
   der Beschnitt gilt dem Werbebalken der echten Fotos. */
.dt-galerie--werbung.foto-beschnitt img { object-fit: contain; object-position: 50% 50%; background: var(--tinte-tief); }
/* Trefferflaeche 44 px (Befund 20, 27.09.2026): gemessen 119 x 32 px. Der
   Knopf liegt frei ueber dem Foto - er waechst nach oben, das Layout
   darunter bleibt unberuehrt. */
.gal-360 { position: absolute; left: 12px; bottom: 12px; z-index: 2; border: none; cursor: pointer;
  background: var(--foto-schleier); color: var(--weiss); font-weight: 700; font-size: var(--txt-13-1);
  padding: var(--raum-8) var(--raum-14); border-radius: var(--rad-rund); transition: background .15s;
  min-height: 44px; display: inline-flex; align-items: center; }
.gal-360:hover { background: rgba(17,17,17,.9); }
.gal-360.aktiv { background: var(--gold-expose); color: var(--schwarz); }
/* Unter 768 px liegt die feste Kontaktleiste (bei 375 x 812: y 751-812) ueber
   dem unteren Fotorand. Unten links sass der 360-Grad-Knopf genau unter
   "Anrufen" - ein Tipp auf den vermuteten Knopf rief an (Runde 10,
   29.09.2026). Oben im Foto ist er zu sehen, sobald ueberhaupt etwas vom
   Foto zu sehen ist. Ohne Leiste (ab 768 px) bleibt er, wo er war. */
@media (max-width: 767px) {
  .dt-galerie .gal-360 { top: var(--raum-12); right: var(--raum-12); bottom: auto; left: auto; }
}
/* js/fahrzeug.js (leisteFreihalten) setzt die Klasse, solange ein Knopf ueber
   dem Foto nicht ganz ueber der Leiste liegt: ein halb abgeschnittener Knopf
   sieht bedienbar aus, der Tipp landet aber auf der Leiste. */
.gal-verdeckt { visibility: hidden; }
.gal-band { position: absolute; left: 0; top: 14px; z-index: 2; background: var(--gold-expose); color: var(--schwarz);
  font-weight: 800; font-size: var(--txt-12-8); letter-spacing: var(--sperr-5); text-transform: uppercase;
  padding: var(--raum-6) var(--raum-14) var(--raum-6) var(--raum-12); border-radius: 0 var(--rad-rund) var(--rad-rund) 0; box-shadow: var(--schatten-band); }
.gal-band.rot { background: #d23b2f; color: var(--weiss); }
/* Nur das Titelbild da (Detailabruf gescheitert, 11.10.2026): leise sagen,
   dass es mehr Fotos gibt - sonst sieht das Auto nach einem Foto aus. */
.dt-bilder-hinweis { margin: var(--raum-8) 0 0; font-size: var(--txt-13); color: var(--tinte-leise); }

.dt-preisfeld { border-top: var(--rahmen-breit) solid var(--gold-expose); }
/* Achtung beim Aendern: .dt-preisfeld hat einen DUNKLEN Grund (--tinte mit
   heller Schrift, siehe css/bm.css). Alles hier drin braucht helle Farben -
   die frueheren Grautoene (#6b6b6b) waren auf Schwarz kaum zu lesen, und
   Pflichtangaben muessen lesbar sein. */
.dt-alt { margin: 0 0 -6px; font-size: var(--txt-15); }
/* Keine eigene Farbe: css/bm.css macht "Preis gesenkt" zum goldenen Schild
   mit Tinte. Das Gruen #6FCF7F hier lag auf diesem Gold (1,32:1, Befund
   28.09.2026). */
.dt-alt .dt-gesenkt { font-weight: 700; font-size: var(--txt-13); margin-left: var(--raum-6); }
/* Pflichtangabe nach § 11 PAngV - steht direkt unter dem Preis und ist
   bewusst normal lesbar, nicht kleingedruckt. */
.dt-tief30 { margin: var(--raum-4) 0 0; font-size: var(--txt-13); }
.dt-blicke { margin: var(--raum-2) 0 0; font-size: var(--txt-13); }

/* Pflichtangaben nach PKW-EnVKV. Sitzen im Preisfeld, damit sie zusammen
   mit dem Preis wahrgenommen werden. */
/* 12 statt 11 px (Runde 10): wie ueberall auf der Seite mindestens 12 px. */
.dt-bewertung-quelle { margin: var(--raum-4) 0 0; font-size: var(--txt-12); line-height: var(--zeile-145); }
/* Der Quellensatz fuehrt selbst auf die Bewertungsseite (Runde 10). Er bleibt
   so leise wie vorher - nur unterstrichen, damit man sieht, dass er
   antippbar ist. Er steht allein in seiner Zeile, ist also kein Link im Satz
   (gemessen 14-15 px hoch) und bekommt die volle Tippflaeche. */
.dt-bewertung-quelle a { color: inherit; text-decoration: underline; text-underline-offset: 2px;
  display: inline-flex; align-items: center; min-height: var(--tipp); }

.dt-envkv { margin: var(--raum-14) 0 var(--raum-4); padding: var(--raum-12) var(--raum-14); border: 1px solid var(--licht-22);
  border-radius: var(--rad-10); background: rgba(255,255,255,.045); }
.dt-envkv h3 { margin: 0 0 var(--raum-8); font-size: var(--txt-12); letter-spacing: var(--sperr-10);
  text-transform: uppercase; color: var(--auf-dunkel-72); }
.dt-envkv .envkv-zeile { display: flex; justify-content: space-between; gap: var(--raum-12);
  align-items: baseline; padding: 5px 0; border-top: 1px solid var(--licht-12); }
.dt-envkv .envkv-zeile:first-child { border-top: 0; }
.dt-envkv .envkv-zeile span { font-size: .84rem; color: rgba(242,239,230,.8); }
/* Der Wert bleibt in einer Zeile, umbrechen darf die Bezeichnung links. */
.dt-envkv .envkv-zeile b { font-size: var(--txt-14-4); font-weight: 700; text-align: right;
  white-space: nowrap; }
/* Fehlender Pflichtwert: sichtbar und als fehlend erkennbar - darf umbrechen. */
.dt-envkv .envkv-fehlt { font-weight: 600; font-style: italic; color: #EFC75E;
  white-space: normal; font-size: var(--txt-13-1); }
.dt-envkv .envkv-hinweis { margin: 9px 0 0; font-size: .69rem; line-height: var(--zeile-150);
  color: rgba(242,239,230,.66); }
.dt-envkv .envkv-hinweis a { color: inherit; }
.dt-bewertung { margin: var(--raum-8) 0 0; font-size: var(--txt-13); font-weight: 600; text-align: center; }

.dt-zubehoer { margin-top: var(--raum-12); border: 1px solid rgba(0,0,0,.14); border-radius: var(--rad-10);
  padding: 0 var(--raum-14); background: rgba(0,0,0,.02); }
.dt-zubehoer summary { cursor: pointer; font-weight: 700; font-size: var(--txt-14-7);
  padding: 11px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.dt-zubehoer summary::-webkit-details-marker { display: none; }
.dt-zubehoer summary span { font-weight: 800; font-size: 1.1rem; transition: transform .15s; }
.dt-zubehoer[open] summary span { transform: rotate(45deg); }
.dt-zubehoer > div { padding-bottom: var(--raum-12); }

.dt-akte-kasten { border: 1px solid var(--dunst-12); border-left: 4px solid var(--gold-expose);
  border-radius: var(--rad-10); padding: var(--raum-14) var(--raum-16); margin-top: var(--raum-16); background: var(--flaeche-expose); }

/* Ratenrechner (26.08.2026): zwei Schieberegler im dunklen Preisfeld.
   Das Pflichtbeispiel nach § 17 PAngV steht direkt darunter und rechnet
   bei jedem Zug mit - kleiner gesetzt, aber immer sichtbar. */
.dt-rechner { margin-top: var(--raum-14); border-radius: var(--rad-10); }
.dt-rechner h3 { margin: 0 0 var(--raum-6); font-size: var(--txt-12-5); font-weight: 800;
  letter-spacing: var(--sperr-10); text-transform: uppercase; color: var(--auf-dunkel); }
/* Werte stehen ueber ihrem Regler, nicht daneben: kleines Label, grosse
   Zahl. Wer schiebt, schaut auf den Wert und nicht auf die Beschriftung -
   also gehoert die Zahl dorthin, wo der Blick ohnehin liegt. */
.rr-zeile { display: grid; gap: 1px; margin-top: var(--raum-18); }
.rr-zeile span { font-size: var(--txt-12); letter-spacing: var(--sperr-9); text-transform: uppercase; }
.rr-zeile b { color: var(--auf-dunkel); font-size: 1.12rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: var(--sperr-minus-1); }
/* [hidden] verliert sonst gegen display:grid - dann bliebe die Schlussraten-
   Zeile stehen, obwohl "Gleichbleibend" gewaehlt ist. */
.rr-zeile[hidden] { display: none; }
/* min-height siehe css/bm.css (Befund 18): nur die Trefferflaeche, die
   Bahn zeichnet der Browser mittig darin. */
/* accent-color stand hier bis zum 27.09.2026 als rohes #F5D213 - ein
   zweiter Gelbton neben dem Hausgold #ECD817. Gewirkt hat er nie: die
   Regler stehen in .dt-rechner, und ".dt-rechner input[type=range]" in
   css/bm.css ist genauer. Gemessen vor und nach dem Entfernen: der
   Regler zeigt beide Male rgb(236, 216, 23). Die Farbe kommt jetzt
   sichtbar nur noch aus css/bm.css. */
.rr-regler { width: 100%; margin: var(--raum-8) 0 0; cursor: pointer; min-height: 44px; }


/* Das Ergebnis steht frei, nicht in einer Zeile mit seiner Beschriftung.
   Es ist die Zahl, auf die der ganze Rechner zulaeuft. */
.rr-rate { display: grid; gap: var(--raum-2); margin: var(--raum-22) 0 0; padding-top: var(--raum-18);
  border-top: var(--rahmen) solid var(--licht-16); }
.rr-rate span { font-size: var(--txt-12); letter-spacing: var(--sperr-9); text-transform: uppercase; }
.rr-rate b { font-family: var(--schrift-titel); font-size: var(--txt-40); line-height: 1.05;
  font-weight: 400; color: var(--gold-hell); font-variant-numeric: tabular-nums;
  letter-spacing: -.025em; }
/* Sieben Dutzend Ausstattungsmerkmale am Stueck liest niemand. Die ersten
   zwoelf stehen da, der Rest kommt auf Knopfdruck - wer sucht, findet ihn,
   wer ueberfliegt, wird nicht erschlagen. */
.dt-liste--gekuerzt li:nth-child(n+13) { display: none; }
.dt-mehr-liste {
  margin: var(--raum-14) 0 0; padding: 9px var(--raum-16); cursor: pointer;
  background: none; border: 1px solid var(--linie); border-radius: var(--rad-rund);
  font: 600 var(--txt-13-1)/1 var(--schrift-text); color: var(--tinte);
  transition: border-color .18s var(--weich), background .18s var(--weich), transform .14s var(--weich);
  /* 206 x 33 px gemessen (Befund 20, 27.09.2026). */
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
.dt-mehr-liste:hover { border-color: var(--bronze-hell); background: rgba(0,0,0,.03); }
.dt-mehr-liste:active { transform: scale(.985); }
/* Zubehoer im Hauptbereich: drei Gruppen, je Zeile Name links, Preise
   rechts. Der monatliche Betrag steht vorn und gross, der Einmalpreis
   klein daneben - in dieser Reihenfolge, weil ein grosser Teil dieser
   Kunden in Raten rechnet und "+12 € mtl." eine andere Entscheidung ist
   als "+899 €". Der Gesamtpreis bleibt sichtbar, er steht in der Summe
   darunter und im Pflichtbeispiel. */
.dt-zubehoer-satz { margin: 0 0 var(--raum-20); color: var(--tinte-weich); font-size: var(--txt-14-7); }
/* EIN grosser Kasten (30.08.2026): aussen ein Rahmen, innen die Gruppen
   als Abschnitte mit Kopfzeile und die Optionen als Zeilen, nur durch
   Haarlinien getrennt. Vorher war jede Option ein eigenes Kaestchen -
   sechs Rahmen uebereinander lasen sich wie sechs Entscheidungen. */
#dtKonfiOptionen {
  display: grid; gap: 0;
  border: 1px solid var(--linie); border-radius: var(--rad-14);
  background: var(--karte); overflow: hidden;
}
.konfi-gruppe + .konfi-gruppe { border-top: 1px solid var(--linie); }
.konfi-gruppe h3 {
  margin: 0; padding: var(--raum-12) var(--raum-16) var(--raum-10);
  font-size: .72rem; letter-spacing: var(--sperr-10); text-transform: uppercase;
  color: var(--tinte-leise); font-weight: 700;
  background: var(--papier-tief);
}
.konfi-gruppen-hinweis { padding: var(--raum-8) var(--raum-16) 0; margin: 0; }
/* Garantie-Gruppe bei gesetztem Finanzieren-Haken: die drei Zeilen
   verschwinden, uebrig bleibt ein gruenes Inklusive-Feld mit Haken.
   Drei ausgegraute Optionen sagen "gesperrt" - das Feld sagt
   "schon erledigt", und genau das ist die Botschaft. */
.konfi-gruppe--gesperrt .konfi-zeile { display: none; }
.konfi-gruppe--gesperrt .konfi-gruppen-hinweis {
  display: flex; align-items: center; gap: 11px;
  margin: var(--raum-12) var(--raum-16) var(--raum-16); padding: 13px 15px; border-radius: var(--rad-10);
  background: color-mix(in srgb, var(--gut) 10%, var(--karte));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gut) 35%, transparent);
  color: var(--gut); font-weight: 600; font-size: var(--txt-14-1);
}
.konfi-gruppe--gesperrt .konfi-gruppen-hinweis::before {
  content: ''; flex: 0 0 auto; width: 14px; height: 8px; margin-top: -4px;
  border: 2.5px solid var(--gut); border-top: 0; border-right: 0;
  transform: rotate(-45deg);
}
.konfi-zeile {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: var(--raum-14); cursor: pointer; padding: 13px var(--raum-16);
  border-top: 1px solid var(--linie);
  transition: background .16s var(--weich);
}
.konfi-gruppe h3 + .konfi-zeile,
.konfi-gruppen-hinweis + .konfi-zeile { border-top: 0; }
.konfi-zeile:hover { background: var(--papier-tief); }
.konfi-zeile:active { transform: scale(.998); }
.konfi-zeile input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.konfi-zeile:has(input:focus-visible) { outline: 2px solid var(--bronze); outline-offset: -2px; }
.konfi-zeile:has(input:checked) {
  background: color-mix(in srgb, var(--gold) 13%, var(--karte));
}
.konfi-name {
  display: flex; align-items: center; gap: var(--raum-10);
  font-size: var(--txt-14-4); line-height: var(--zeile-130); color: var(--tinte);
}
/* Kreis fuer Mehrfachauswahl, in der Garantiegruppe ein Punkt: die
   Laufzeit ist eine Entweder-oder-Wahl, das muss man sehen. */
.konfi-name::before {
  content: ''; flex: 0 0 17px; width: 17px; height: 17px; border-radius: 5px;
  border: 1.5px solid var(--linie);
  transition: background .16s var(--weich), border-color .16s var(--weich);
}
.konfi-gruppe--eine .konfi-name::before { border-radius: var(--rad-kreis); }
.konfi-zeile:has(input:checked) .konfi-name::before {
  background: var(--gold); border-color: var(--gold);
  box-shadow: inset 0 0 0 3px var(--karte);
}
.konfi-werte { flex: 0 0 auto; display: grid; justify-items: end; gap: 1px; }
.konfi-mtl {
  font-family: var(--schrift-titel); font-size: var(--txt-16); letter-spacing: var(--sperr-minus-1-5);
  color: var(--bronze); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.konfi-zeile:has(input:checked) .konfi-mtl { color: var(--tinte); }
.konfi-einmal { font-size: var(--txt-12); color: var(--tinte-leise); white-space: nowrap; }
#dtKonfiSumme { margin: var(--raum-22) 0 var(--raum-14); font-size: var(--txt-16-8); font-weight: 700; }
/* Pflichtbeispiel zur Konfigurator-Rate: steht unmittelbar unter der Rate,
   die es erklaert (§ 17 PAngV) - normal lesbar, nicht versteckt. */
.dt-konfi-beispiel { margin: 0 0 var(--raum-14); font-size: var(--txt-13); line-height: var(--zeile-150); color: var(--tinte-weich); }
/* Was in allen drei Paketen steckt, steht einmal darueber. In den
   Paketen bleibt nur, was sie unterscheidet - danach sucht der Kunde. */
.rr-gemeinsam {
  margin: 0 0 var(--raum-12); padding: var(--raum-10) var(--raum-12); border-radius: 9px;
  background: var(--licht-5); font-size: var(--txt-12-8); line-height: var(--zeile-145);
  color: var(--auf-dunkel-weich);
}
.rr-gemeinsam b { color: var(--auf-dunkel); }
/* Pflichtangabe nach § 17 PAngV: lesbar, nicht versteckt - vorher 10,24 px. */
.rr-beispiel { margin: var(--raum-10) 0 0; font-size: var(--txt-12); line-height: var(--zeile-155); color: var(--auf-dunkel-still); }
@media (prefers-reduced-motion: reduce) { .rr-regler { transition: none; } }

/* Exposé-Designsprache auf der ganzen Seite (24.08.2026):
   gelber Block-Marker vor Ueberschriften, EINE ruhige Datenleiste statt
   loser Kacheln, gelbe Kanten auf den Vertrauens-Kaesten. */
h2.dt-ueberschrift { display: flex; align-items: center; gap: var(--raum-10); }
h2.dt-ueberschrift::before { content: ""; width: 18px; height: 12px;
  background: var(--gold-expose); flex: none; }

.dt-daten { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0; border-radius: var(--rad-12); overflow: hidden; }
.dt-daten > * { background: var(--weiss); border-radius: 0;
  box-shadow: none; padding: var(--raum-12) var(--raum-14); }

.dt-liste { columns: 3; column-gap: var(--raum-26); }
@media (max-width: 1023px) { .dt-liste { columns: 2; } }
@media (max-width: 479px) { .dt-liste { columns: 1; } }
.dt-liste li { break-inside: avoid; }

.dt-beweis { border-top: var(--rahmen-kante) solid var(--gold-expose); background: var(--flaeche-expose); }

.dt-vorschau.aktiv { outline: 2.5px solid var(--gold-expose); outline-offset: -2.5px; }
.dt-vorschau { transition: opacity .15s; }
.dt-vorschau:hover { opacity: .85; }
@media (prefers-reduced-motion: reduce) { .dt-vorschau, .gal-360, .gal-pfeil { transition: none; } }

.ae-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--raum-14); }
.ae-karte { display: block; text-decoration: none; color: inherit; border: 1px solid var(--dunst-12);
  border-radius: var(--rad-12); overflow: hidden; background: var(--weiss); transition: transform .15s, box-shadow .15s; }
.ae-karte:hover { transform: translateY(-2px); box-shadow: var(--schatten-heben); }
.ae-karte img { width: 100%; height: 140px; object-fit: cover; display: block; background: #f2f2f2; }
.ae-karte div { padding: var(--raum-10) var(--raum-12) var(--raum-12); }
.ae-karte b { display: block; font-size: var(--txt-14-7); line-height: var(--zeile-130); }
.ae-karte .ae-preis { font-weight: 800; font-size: var(--txt-16-8); margin-top: var(--raum-4); }
.ae-karte .ae-rate { font-size: var(--txt-12); color: var(--tinte-leise); }

.klebe-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; gap: var(--raum-10); padding: var(--raum-10) var(--raum-14);
  padding-bottom: calc(var(--raum-10) + env(safe-area-inset-bottom));
  background: var(--schwarz); box-shadow: var(--schatten-leiste);
  transform: translateY(110%); transition: transform .25s ease; }
.klebe-leiste.da { transform: translateY(0); }
.klebe-leiste .kl-preis { color: var(--gold-expose); font-weight: 800; font-size: var(--txt-16-8);
  margin-right: auto; font-variant-numeric: tabular-nums; }
.klebe-leiste .knopf { padding: var(--raum-10) var(--raum-16); font-size: var(--txt-14-4); }
@media (max-width: 767px) { .klebe-leiste { display: flex; } }
@media (prefers-reduced-motion: reduce) { .klebe-leiste { transition: none; } }

/* Zulaufwagen (Befund 1, 27.09.2026): Das Fahrzeug ist gekauft, steht aber
   noch nicht auf dem Hof - fotografiert wird erst dort. Bis hierher zeigte
   die Galerie dieser Inserate vier Werbekacheln, die bei drei verschiedenen
   Autos identisch waren. Jetzt steht an der Stelle der Galerie dieser
   benannte Zustand. Der Kasten nimmt ungefaehr die Hoehe ein, die das Bild
   gehabt haette, damit die Seite nicht in sich zusammenfaellt. */
.dt-zulauf {
  margin: 0; padding: var(--raum-22) var(--raum-22) var(--raum-26);
  border: 1px solid var(--linie); border-left: 4px solid var(--gold);
  border-radius: var(--radius-gross); background: var(--karte);
  font-size: var(--txt-15); line-height: var(--zeile-155); color: var(--tinte-weich);
}
.dt-zulauf b {
  display: block; margin-bottom: var(--raum-6);
  font-family: var(--schrift-titel); font-size: var(--txt-20);
  color: var(--tinte);
}

/* Druck-Exposé (24.08.2026): der "Exposé drucken"-Knopf soll ein sauberes
   Schwarz-Weiß-Dokument liefern statt der dunklen Webseite. Bildschirm-
   Darstellung bleibt unberührt. */
/* Layoutsprung beim Laden (Befund 27.09.2026, CLS 0,465 bis 0,535): beim
   ersten Zeichnen stand nur "Fahrzeug wird geladen ..." da, die Fusszeile
   direkt darunter im Bild - und rutschte beim Laden tausende Pixel nach
   unten. Mit einer Bildschirmhoehe Reserve startet die Fusszeile ausserhalb
   des sichtbaren Bereichs; was dort wandert, zaehlt nicht als Sprung.
   js/fahrzeug.js nimmt die Klasse weg, sobald der Inhalt steht; ohne
   JavaScript hebt der noscript-Block im Kopf die Reserve auf. */
.dt-seite--laedt{ min-height:100vh; min-height:100svh; }

@media print {
  @page { margin: 14mm; }
  * { background: #fff !important; color: #111 !important; box-shadow: none !important; }
  body { font-size: 10.5pt; line-height: 1.45; }

  /* Weg mit allem, was am Papier nichts verloren hat. */
  .sprungmarke, #kopf, .fuss, .dt-wege, .dt-formular, #anfrageForm,
  #dtWhatsappLeiste, .dt-streifen, #dtKonfigurator, #dtRateAnfragen, #dtRechner,
  .dt-nebenlink, .zustimmung, #dtStand, #dtLaden,
  .dt-dreh-hinweis, .knopf, .dt-zubehoer, .klebe-leiste, .gal-pfeil,
  .gal-zaehler, .gal-360, #aehnlich { display: none !important; }

  /* Einspaltig, Preisfeld nach oben direkt unter den Titel. */
  .dt-raster { display: flex !important; flex-direction: column; gap: 0 !important; }
  .dt-seitenspalte { order: -1; position: static !important; width: auto !important; }
  .dt-preisfeld {
    border: 2pt solid #111 !important; border-radius: 0 !important;
    padding: 8pt 12pt !important; margin: 6pt 0 10pt;
    display: flex; align-items: baseline; gap: 14pt; flex-wrap: wrap;
  }
  /* Die Huelle .dt-seitenrest traegt am Bildschirm den dunklen Grund der
     Preiskarte (css/bm.css, Abschnitt 4). Auf Papier waere das weisse Schrift
     auf weissem Grund - hier also zurueck auf normalen Text. */
  .dt-seitenrest { background: none !important; box-shadow: none !important;
    padding: 0 !important; color: #111 !important; border-radius: 0 !important; }
  .dt-seitenrest .dt-geprueft li { color: #111 !important; }
  .dt-seitenrest .dt-geprueft-zulauf { color: #111 !important; }
  .dt-preisfeld .dt-siegel { font-size: 9pt; letter-spacing: .02em; margin: 0; }
  #dtPreis { font-size: 26pt; font-weight: 800; margin: 0; }
  #dtZins { font-size: 10pt; margin: 0; }

  /* Pflichtangaben bleiben auf dem Papier: EnVKV und § 11 PAngV gelten fuer
     gedruckte Werbung genauso. Beide brechen aus der Preiszeile aus und
     bekommen die volle Breite. */
  #dtTief30 { flex-basis: 100%; font-size: 9pt; margin: 2pt 0 0; }
  .dt-envkv { flex-basis: 100%; border: 0.5pt solid #111 !important;
    border-radius: 0 !important; padding: 5pt 7pt !important; margin: 6pt 0 0; }
  .dt-envkv h3 { font-size: 8pt; margin: 0 0 3pt; }
  .dt-envkv .envkv-zeile { padding: 2pt 0; font-size: 9pt; }
  .dt-envkv .envkv-hinweis { font-size: 6.5pt; }

  .dt-kopf { margin: 0 0 4pt; }
  .dt-kopf h1 { font-size: 20pt; margin: 2pt 0; }
  .blick { font-size: 8.5pt; text-transform: uppercase; letter-spacing: .08em; }
  .lese { font-size: 10pt; max-width: none; }

  /* Hauptbild kompakt, Rahmen statt Deko. */
  .dt-galerie { margin: 0 0 8pt; }
  .dt-galerie img { max-height: 85mm; width: auto !important; max-width: 100%;
    border: 0.5pt solid #999; display: block; }

  /* Eckdaten-Kacheln als sauberes Raster. */
  .dt-daten { display: grid !important; grid-template-columns: repeat(4, 1fr);
    gap: 4pt !important; margin: 0 0 8pt; }
  .dt-daten > * { border: 0.5pt solid #bbb !important; border-radius: 0 !important;
    padding: 4pt 6pt !important; font-size: 8.5pt; }

  .dt-ueberschrift { font-size: 12pt; border-bottom: 1pt solid #111;
    padding-bottom: 2pt; margin: 10pt 0 5pt; }

  /* Highlights als umrandete Etiketten, Ausstattung dreispaltig. */
  .dt-chips { margin: 0 0 6pt; }
  .dt-chip { border: 0.5pt solid #111 !important; border-radius: 0 !important;
    padding: 1pt 5pt !important; font-size: 8pt; margin: 0 3pt 3pt 0; display: inline-block; }
  .dt-liste { column-count: 3; column-gap: 14pt; font-size: 8.5pt;
    margin: 0; padding-left: 12pt; }
  .dt-liste li { break-inside: avoid; }

  .dt-beweise { display: grid !important; grid-template-columns: 1fr 1fr;
    gap: 4pt !important; margin: 8pt 0; }
  .dt-beweis { border: 0.5pt solid #bbb !important; border-radius: 0 !important;
    border-left: 2pt solid #111 !important; padding: 4pt 7pt !important; font-size: 8.5pt; }

  .dt-akte-hinweis, .dt-fussnote { font-size: 7.5pt; color: #555 !important; }

  /* Feste Fusszeile mit Kontakt - die Bildschirm-Fusszeile ist versteckt.
     Die Anschrift kommt aus EINER Quelle (W3, 26.09.2026): js/haus.js setzt
     --druck-fuss auf den Stand, der am Drucktag gilt. Ohne JavaScript
     greift der Vorgabetext hier - der nennt beide Anschriften mit Datum,
     ist also in jeder Phase richtig. */
  main.dt-seite::after {
    content: var(--druck-fuss, "BM Autohandel GmbH · Metzer Str. 51 · 66740 Saarlouis (bis 30.11.2026) · ab 01.12.2026: St. Nazairer Allee 1A · 66740 Saarlouis · Tel. 06893 8491408 · info@bmautohandel.de · www.bmautohandel.de — Zwischenverkauf vorbehalten, Angaben ohne Gewähr.");
    display: block; margin-top: 10pt; padding-top: 5pt;
    border-top: 1pt solid #111; font-size: 8pt; color: #333 !important;
  }
}