/* ==========================================================================
   BM Autohandel GmbH - EINE Formatvorlage fuer die ganze Kundenwebseite
   ==========================================================================
   Zusammengezogen am 26.09.2026 aus css/bm.css, css/bm-sand.css und
   css/kundensicht.css. Vorher lagen zwei bis drei vollstaendige Vorlagen
   uebereinander: wer in bm.css eine Farbe aenderte, sah nichts, weil
   bm-sand.css sie mit !important ueberschrieb. Das ist jetzt vorbei -
   es gibt genau eine Datei, genau einen :root-Block und keine
   !important-Regel mehr (Ausnahmen stehen begruendet dabei).

   Aufbau der Datei:
     1. Token      - Farben, Schrift, Abstaende, Radien, Schatten, Ebenen
     2. Grundlage  - Reset, Typografie, Bauteile (frueher bm.css)
     3. Sandschicht- Hausfarben und Seitenbereiche (frueher bm-sand.css)
     4. Kundensicht- Handy-Anpassungen (frueher kundensicht.css)
     5. Schluss    - [hidden] gewinnt

   Reihenfolge NICHT umstellen: Abschnitt 3 und 4 verlassen sich darauf,
   dass sie nach Abschnitt 2 stehen. Wer eine Regel verschiebt, verschiebt
   das Aussehen.
   ========================================================================== */

/* ==========================================================================
   BM Autohandel — Neubau 08/2026
   Richtung: Hell-Premium mit Gold (siehe DESIGN-RICHTUNG.md)
   Kino-Effekt am Desktop, ruhig am Handy. Schriften self-hosted (DSGVO).
   ========================================================================== */

/* ---------- Schriften (lokal, kein CDN) ---------- */
@font-face{
  font-family:'Archivo Black'; src:url('../fonts/archivo-black-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter'; src:url('../fonts/inter-var.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono'; src:url('../fonts/jetbrains-mono-var.woff2') format('woff2-variations');
  font-weight:100 800; font-style:normal; font-display:swap;
}

/* ==========================================================================
   1. TOKEN - die einzige Quelle fuer Farben und Masse
   ==========================================================================
   Zwei Ebenen:
     Skala  (--gold-500, --sand-300, --raum-16 ...)  = der Vorrat.
     Rolle  (--gold, --linie, --papier ...)          = wofuer man ihn nimmt.
   Die Skala fuehrt seit dem 29.09.2026 nur noch Stufen, die irgendwo
   per var() benutzt werden - 18 nie benutzte Token sind entfernt.
   In den Regeln steht IMMER die Rolle, nie die Skala. Wer eine Hausfarbe
   aendern will, aendert sie hier einmal - und zwar wirksam.

   Alle Kontrastwerte in den Kommentaren sind nach WCAG 2.1 gerechnet
   (Alphakanal gegen den tatsaechlich darunterliegenden Grund aufgeloest).
   Soll: 4,5:1 fuer normale Schrift, 3:1 fuer grosse Schrift und fuer
   Bedienelemente/Fokus (Regel 1.4.11 und 2.4.11).
   ========================================================================== */
:root{

  /* Nur ein helles Kleid. Ohne diese Zeile zeichnet iOS auf dunkel
     gestellten Telefonen Auswahl-, Datums- und Uhrzeitfelder dunkel in
     die helle Flaeche (N6.11). */
  color-scheme:light;

  /* ---------- Skala: Gold (Marke, Handlungsaufruf) ----------
     500 ist das Logo-Gelb. 400 und 800 sind die bisherigen Hausfarben
     --gold-hell und --gold-tief, damit sich optisch nichts verschiebt. */

  --gold-400:#F5E85C; --gold-500:#ECD817; --gold-700:#9C8E0D; --gold-800:#6E6007;
  /* ---------- Skala: Bronze (Akzent, textfaehig) ----------
     600 und 700 sind die bisherigen --bronze-hell und --bronze. */

  --bronze-600:#B08A3E; --bronze-700:#7A5A22;
  /* ---------- Skala: Sand (Flaechen, Linien, Schrift) ----------
     Warme Neutrale statt Grau. Jeder bisherige Hauston hat hier seine
     Stufe: 50 Karte, 100 Papier, 200 Papier tief, 300 Linie,
     500 Bedienelement-Linie, 600/700 leise/weiche Schrift, 900 Tinte. */
  --sand-50:#FDFBF7;  --sand-100:#F8F5EE; --sand-200:#EFE9DC; --sand-300:#DED2BB;
  --sand-400:#B3A794; --sand-500:#8A7B62; --sand-600:#6F604A; --sand-700:#5C4E3A;
  --sand-800:#3A2F22; --sand-900:#241D14; --sand-950:#1E1810; --sand-990:#0C0C09;

  /* ---------- Skala: Schrift auf dunkler Flaeche ----------
     Fehlte bisher ganz; deshalb standen neun einzelne Hex-Werte in den
     Dateien. 700 ist die Untergrenze (4,73:1 auf --tinte). */
  --hell-50:#F2EFE6;  --hell-100:#EDE7D6; --hell-200:#E4DFD2; --hell-300:#D8D2C4;
  --hell-400:#C6C1B2; --hell-500:#B5AE9E; --hell-600:#9A968A; --hell-700:#8F8878;

  /* ---------- Rollen: Flaechen ---------- */
  --papier:var(--sand-100);        /* Grundflaeche */
  --papier-tief:var(--sand-200);   /* abgesetzter Abschnitt */
  --karte:var(--sand-50);          /* Karte, Feldgrund */
  --tinte:var(--sand-900);         /* dunkle Flaeche und Schriftfarbe */
  --tinte-tief:var(--sand-950);    /* Fusszeile, Chips, Preiskarte */
  --buehne:var(--sand-990);        /* Bildbuehne hinter dem Foto */
  --weiss:#fff;

  /* ---------- Rollen: Schrift auf heller Flaeche ---------- */
  /* --tinte           15,30:1  Ueberschrift, starke Schrift */
  --tinte-weich:var(--sand-700);   /*  7,40:1  Fliesstext */
  --tinte-leise:var(--sand-600);   /*  5,59:1  Untergrenze fuer Fliesstext */

  /* ---------- Rollen: Schrift auf dunkler Flaeche ---------- */
  --auf-dunkel:var(--hell-50);        /* 14,49:1 */
  --auf-dunkel-klar:var(--hell-100);
  --auf-dunkel-ruhig:var(--hell-200);
  --auf-dunkel-mild:var(--hell-300);
  --auf-dunkel-weich:var(--hell-400); /*  9,78:1 */
  --auf-dunkel-leise:var(--hell-500); /*  7,54:1 */
  --auf-dunkel-still:var(--hell-600);
  --auf-dunkel-rand:var(--hell-700);  /*  4,73:1 - Untergrenze */

  /* ---------- Rollen: Marke ---------- */
  --gold:var(--gold-500);
  --gold-hell:var(--gold-400);
  --gold-tief:var(--gold-800);
  --bronze:var(--bronze-700);
  --bronze-hell:var(--bronze-600);
  /* Drei Toene, die es nur an einer Stelle gibt - benannt, damit sie
     nicht unbemerkt zu einer vierten Farbwelt anwachsen. */
  --gold-vergleich:#F3EAD6;  /* Band der eigenen Spalte in der Vergleichstabelle */
  --schimmer:#F6F2E6;        /* Lichtstreifen im Ladegerippe */
  --stand-gut:#9CCBA6;       /* "Sofort verfuegbar" in der dunklen Preiskarte */

  /* Zweitgelb aus dem Exposé-Druckblatt. Steht noch an 11 Stellen der
     Fahrzeugseite. Es ist NICHT die Hausfarbe - siehe Doku, Punkt
     "offene Farb-Dublette". */
  --gold-expose:#F5D213;
  /* Die zwei Begleittoene dieses Druckblatts, ebenfalls nur auf der
     Fahrzeugseite: Schwarz fuer Schrift auf Gelb und die Kaufleiste, und
     der warme Weisston der Akte- und Beweis-Kaesten. */
  --schwarz:#111;
  --flaeche-expose:#fbfaf7;
  /* Dunkler Schleier unter Schrift, die frei auf dem Fahrzeugfoto steht
     (Bildzaehler, 360-Grad-Knopf). */
  --foto-schleier:rgba(17,17,17,.65);

  /* ---------- Rollen: Linien ---------- */
  --linie:var(--sand-300);              /* Zierlinie, 1,45:1 - NICHT fuer Bedienelemente */
  --linie-bedienelement:var(--sand-500);/* 3,26:1 auf Karte - Feldrahmen, Regel 1.4.11 */

  --dunst-12:rgba(0,0,0,.12);          /* Haarlinie um weisse Kaesten auf der Fahrzeugseite */

  /* ---------- Lichtstufen: Weiss mit Deckkraft auf dunklem Grund ----------
     Die Zahl ist die Deckkraft in Prozent. Bis zum 29.09.2026 standen diese
     zehn Stufen als rohe rgba()-Werte an 30 Stellen - dieselbe Stufe mal
     als .12, mal als .11 daneben. Jetzt ist jede Stufe benannt; eine neue
     Stufe kommt hierher, nicht in die Regel. */
  --licht-5:rgba(255,255,255,.05);   --licht-6:rgba(255,255,255,.06);
  --licht-7:rgba(255,255,255,.07);   --licht-11:rgba(255,255,255,.11);
  --licht-12:rgba(255,255,255,.12);  --licht-14:rgba(255,255,255,.14);
  --licht-16:rgba(255,255,255,.16);  --licht-18:rgba(255,255,255,.18);
  --licht-22:rgba(255,255,255,.22);  --licht-42:rgba(255,255,255,.42);
  /* Helle Schrift (--auf-dunkel) mit Deckkraft - fuer Nebenzeilen auf Tinte. */
  --auf-dunkel-72:rgba(242,239,230,.72);
  --auf-dunkel-78:rgba(242,239,230,.78);

  /* ---------- Rollen: Signale ---------- */
  --gut:#3F7245;      /* 5,21:1 auf Papier */
  --achtung:#A8501E;  /* 5,03:1 */
  /* --fehler und --hinweis sind in keiner Regel benutzt, bleiben aber:
     tests/lauf.php (D6/D7) prueft sie als Pflicht-Token samt Kontrast. */
  --fehler:#A32014;   /* 6,95:1 */
  --hinweis:#1F5C7A;  /* 6,72:1 */

  /* ---------- Fokus: sichtbar auf hell UND auf dunkel ----------
     Frueher ein Goldring: 1,34:1 auf Papier, also unsichtbar. Jetzt ein
     dunkler Kern (15,30:1 auf hell) mit goldenem Hof (11,42:1 auf dunkel).
     Einer der beiden Ringe steht immer im Kontrast. */
  --fokus-kern:var(--tinte);
  --fokus-hof:var(--gold);
  --fokus-breite:3px;
  --fokus-abstand:2px;

  /* ---------- Schrift: eine Leiter in Pixelschritten ----------
     Die Namen nennen die Groesse in Pixel bei 16-px-Grundschrift.
     Steht in einer Regel eine rohe rem-Zahl, ist das eine Ausnahme. */
  /* Unter 12 px gibt es keine Stufe mehr (29.09.2026). */
  --txt-12:.75rem;   --txt-13:.8125rem;
  --txt-14:.875rem;   --txt-15:.9375rem; --txt-16:1rem;     --txt-17:1.0625rem;
  --txt-18:1.125rem;  --txt-20:1.25rem;  --txt-22:1.375rem; --txt-26:1.625rem;
  --txt-27:1.6875rem; --txt-40:2.5rem;   --txt-46:2.875rem; --txt-48:3rem;
  --txt-54:3.375rem;

  /* Zwischenstufen: Groessen, die mehrfach vorkommen, aber zwischen zwei
     Sprossen liegen. Name = Pixel bei 16-px-Grundschrift, eine Stelle
     hinter dem Komma. Auf die naechste Sprosse runden waere eine
     Bildaenderung - deshalb stehen sie genau so da, wie sie gemessen sind. */
  --txt-12-5:.78rem;  --txt-12-8:.8rem;   --txt-13-1:.82rem;
  --txt-14-1:.88rem;  --txt-14-4:.9rem;   --txt-14-7:.92rem;  --txt-16-8:1.05rem;

  /* Fliessende Groessen fuer Ueberschriften (clamp): eine je Aufgabe. */
  --txt-h1:clamp(2.1rem, 6.4vw, 5.2rem);
  --txt-h2:clamp(1.7rem, 3.6vw, 3rem);
  --txt-h3:clamp(1.05rem, 1.5vw, 1.3rem);
  --txt-hero:clamp(1.9rem, 8.6vw, 3.1rem);
  --txt-vorspann:clamp(1rem, 1.3vw, 1.15rem);
  --txt-abschnitt:clamp(1.15rem, 1.9vw, 1.5rem);
  --txt-fahrzeug-h1:clamp(2.6rem, 6vw, 4.6rem);
  --txt-preis:clamp(2rem, 4vw, 2.8rem);
  --txt-zahl:clamp(2.4rem, 5vw, 4rem);
  --txt-recht-h1:clamp(1.9rem, 4vw, 3rem);
  --txt-recht-h2:clamp(1.15rem, 2vw, 1.5rem);
  --txt-saeule:clamp(1.4rem, 2vw, 1.7rem);
  --txt-fehler-h1:clamp(1.6rem, 3vw, 2.4rem);
  --txt-fokus-h2:clamp(1.9rem, 3.6vw, 3rem);

  --zeile-eng:1.15; --zeile-mittel:1.4; --zeile-weit:1.6;
  /* Weitere Zeilenhoehen, die mehrfach vorkommen. Name = Wert mal 100. */
  --zeile-100:1;    --zeile-110:1.1;  --zeile-120:1.2;  --zeile-130:1.3;
  --zeile-135:1.35; --zeile-145:1.45; --zeile-150:1.5;  --zeile-155:1.55;

  /* ---------- Sperrung (letter-spacing) ----------
     Name = Hundertstel em. Positiv fuer Etiketten in Grossbuchstaben,
     "minus" fuer grosse Zahlen und Ueberschriften, die enger laufen. */
  --sperr-1:.01em;  --sperr-2:.02em;  --sperr-5:.05em;  --sperr-6:.06em;
  --sperr-8:.08em;  --sperr-9:.09em;  --sperr-10:.1em;  --sperr-12:.12em;
  --sperr-14:.14em; --sperr-16:.16em;
  --sperr-minus-1:-.01em; --sperr-minus-1-5:-.015em; --sperr-minus-2:-.02em;

  /* ---------- Schriftfamilien ----------
     Die Rueckfallketten bleiben so, wie sie vorher an den Regeln standen:
     "plakat" hat Impact dazwischen, "system" system-ui. Wer sie
     vereinheitlicht, aendert, was ohne geladene Hausschrift zu sehen ist. */
  --schrift-titel:'Archivo Black',sans-serif;
  --schrift-plakat:'Archivo Black',Impact,sans-serif;
  --schrift-text:'Inter',sans-serif;
  --schrift-system:'Inter',system-ui,sans-serif;
  --schrift-zahl:'JetBrains Mono',monospace;

  /* ---------- Abstaende ----------
     Der Name nennt den Wert in Pixel.

     Bis zum 26.09.2026 stand hier "nur Vielfache von 4 bekommen ein
     Token, alles andere ist eine bewusste Ausnahme". Nachgezaehlt waren
     es dann 323 solcher Ausnahmen - eine Ausnahme, die haeufiger vorkommt
     als die Regel, ist keine Ausnahme mehr.

     Nachgemessen hat das Haus in Wahrheit ein 2er-Raster: JEDE
     Pixelangabe in dieser Datei ist gerade, die Halbschritte 6, 10, 14,
     18, 22 und 26 sind die haeufigsten Werte ueberhaupt. Diese Schritte
     heissen jetzt also, statt als namenlose Zahl dazustehen (N8.10).
     Die Werte selbst wurden NICHT verschoben - das Bild ist Pixel fuer
     Pixel dasselbe wie vorher.

     Hauptstufen (4er-Raster) - erste Wahl bei neuen Regeln: */
  --raum-4:4px;    --raum-8:8px;    --raum-12:12px;  --raum-16:16px;
  --raum-20:20px;  --raum-24:24px;  --raum-28:28px;  --raum-32:32px;
  --raum-36:36px;  --raum-40:40px;  --raum-44:44px;  --raum-48:48px;
  --raum-52:52px;  --raum-56:56px;  --raum-60:60px;  --raum-64:64px;
  --raum-68:68px;  --raum-88:88px;  --raum-104:104px; --raum-116:116px;

  /* Zwischenstufen (2er-Raster) - fuer enge Stellen, an denen ein ganzer
     4er-Schritt zu viel waere: Etiketten, Zeilenabstaende in Listen,
     Innenabstaende kleiner Knoepfe. */
  --raum-2:2px;    --raum-6:6px;    --raum-10:10px;  --raum-14:14px;
  --raum-18:18px;  --raum-22:22px;  --raum-26:26px;  --raum-30:30px;
  --raum-34:34px;  --raum-38:38px;  --raum-54:54px;  --raum-74:74px;
  --raum-90:90px;  --raum-110:110px;

  /* Abschnittsabstaende: fliessend, damit am Handy nicht 116 px Luft steht. */
  --raum-abschnitt:clamp(var(--raum-56), 8vw, var(--raum-116));
  --raum-abschnitt-klein:clamp(var(--raum-48), 7vw, var(--raum-104));
  --raum-abschnitt-eng:clamp(var(--raum-28), 4vw, var(--raum-56));

  /* ---------- Radien ---------- */
  --rad-2:2px;   --rad-4:4px;   --rad-6:6px;   --rad-8:8px;   --rad-10:10px;
  --rad-12:12px; --rad-14:14px; --rad-16:16px; --rad-18:18px; --rad-20:20px;
  --rad-22:22px; --rad-rund:999px; --rad-kreis:50%;
  --radius:var(--rad-14);        /* Karte, Kachel */
  --radius-gross:var(--rad-22);  /* grosser Block, Hero */

  /* ---------- Rahmenbreiten ---------- */
  --rahmen:1px; --rahmen-mittel:1.5px; --rahmen-stark:2px; --rahmen-kante:3px; --rahmen-breit:4px;

  /* ---------- Schatten: nach Aufgabe benannt ----------
     Die Werte sind unveraendert aus dem bisherigen Stand uebernommen.
     Sie auf fuenf Stufen zu kuerzen waere eine Gestaltungsaenderung und
     gehoert in eine eigene Runde (siehe Doku). */
  --schatten-flach:0 1px 3px rgba(60,42,16,.12);
  --schatten-weich:0 18px 34px -28px rgba(60,42,16,.34);
  --schatten-karte:0 1px 2px rgba(60,42,16,.06), 0 14px 28px -22px rgba(60,42,16,.5);
  --schatten-karte-hoch:0 2px 4px rgba(60,42,16,.08), 0 28px 46px -26px rgba(60,42,16,.62);
  --schatten-block:0 1px 2px rgba(60,42,16,.05), 0 16px 30px -24px rgba(60,42,16,.45);
  --schatten-dunkel:0 18px 34px -26px rgba(36,29,20,.75);
  --schatten-dunkel-hoch:0 34px 68px -36px rgba(36,29,20,.85);
  --schatten-bild:0 40px 70px -50px rgba(60,42,16,.55);
  --schatten-hero:0 30px 60px -34px rgba(20,20,15,.55);
  --schatten-marke:0 18px 36px -18px rgba(0,0,0,.6);
  --schatten-knopf:0 14px 28px -14px rgba(20,20,15,.5);
  --schatten-menue:0 10px 30px -12px rgba(20,20,15,.28);
  --schatten-menue-handy:0 18px 44px -18px rgba(20,20,15,.38);
  --schatten-leiste:0 -6px 24px rgba(0,0,0,.3);
  --schatten-band:0 2px 10px rgba(0,0,0,.2);
  --schatten-heben:0 8px 24px rgba(0,0,0,.12);
  --ring:inset 0 0 0 1px var(--licht-14);
  --ring-gold:inset 0 0 0 1px var(--gold);
  --ring-gold-stark:inset 0 0 0 2px var(--gold);
  --ring-gold-leise:inset 0 0 0 1px rgba(236,216,23,.45);

  /* ---------- Bewegung ---------- */
  --weich:cubic-bezier(.22,.61,.36,1);
  --dauer-xs:.14s;  /* Druckgefuehl auf Knoepfen */
  --dauer-sm:.18s;  /* Farb- und Randwechsel */
  --dauer-md:.25s;  /* Karten, Klappen */
  --dauer-lg:.4s;   /* Ein- und Ausblenden */
  --dauer-xl:.5s;   /* Bildzoom */
  --dauer-kino:.7s; /* Auftritt beim Scrollen */

  /* ---------- Trefferflaechen (WCAG 2.2, Regel 2.5.8) ---------- */
  --tipp:44px;      /* Zielgroesse fuer Finger */
  --tipp-min:24px;  /* harte Untergrenze, z. B. Einwilligungs-Haekchen (Pflicht-Token D6) */

  /* ---------- Breite ---------- */
  --spalte:1240px;
  --rand:clamp(18px, 5vw, 64px);

  /* ---------- Ebenen (z-index) ---------- */
  --ebene-unter:-1;   /* Zierrahmen hinter dem Bild */
  --ebene-grund:1;
  --ebene-ueber:2;    /* Fahne auf dem Foto */

  --ebene-kopf:80;    /* Kopfzeile */
  --ebene-menue:90;   /* Handy-Leiste und Handy-Menue */
  --ebene-dialog:200; /* Sprungmarke */
}

/* ---------- Breakpoints: vier Schwellen statt sechzehn ----------
   CSS-Variablen wirken in @media nicht, deshalb stehen sie als Regel hier:

     480 px   Handy quer        @media (max-width:479px) / (min-width:480px)
     768 px   Tablet            @media (max-width:767px) / (min-width:768px)
    1024 px   kleiner Schreibtisch
    1280 px   Schreibtisch

   Frueher lagen 18 Schwellen verstreut in drei Dateien, allein fuenf
   zwischen 780 und 900 px. Andere Zahlen kommen in dieser Datei nicht
   mehr vor. Eine einzige Ausnahme steht begruendet in Abschnitt 3
   (Bestandsraster, das ohne Schwelle auskommt).                          */

/* ---------- Tastaturfokus: zwei Ringe ----------
   Gemessen 26.09.2026: der alte Goldring lag auf Papier bei 1,34:1 und
   auf Karte bei 1,41:1 - Soll sind 3:1. Er war auf fast der ganzen Seite
   nicht zu sehen. Jetzt liegt ein dunkler Kern innen und ein goldener Hof
   aussen; auf heller Flaeche traegt der Kern (15,30:1), auf dunkler der
   Hof (11,42:1). */
/* Auf dunklem Grund ist die Tinten-Umrandung unsichtbar (1,0 bis 1,37:1,
   gemessen 29.09.2026) - dort wird der Kern gold, der Hof dunkel. */
.zahlen, .fuss, .dt-preisfeld, .dt-seitenrest, .handyleiste, .umzug-band{
  --fokus-kern:var(--gold); --fokus-hof:var(--tinte);
}
:focus-visible{
  outline:var(--fokus-breite) solid var(--fokus-kern);
  outline-offset:var(--fokus-abstand);
  box-shadow:0 0 0 calc(var(--fokus-abstand) + var(--fokus-breite) * 2) var(--fokus-hof);
  border-radius:var(--rad-4);
}

/* ==========================================================================
   2. GRUNDLAGE - Reset, Typografie, Bauteile
   (frueher css/bm.css ab "Farb- und Massystem")
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }

/* scroll-padding-top: die Kopfzeile klebt oben (69 px am Handy). Ohne diese
   Zeile landete jeder Sprung (#termin, #kontakt, #bestand) genau dahinter -
   gemessen am 27.09.2026: vom Terminformular waren 81 px sichtbar, der Rest
   lag unter der Leiste. 84 px = Kopfzeile plus etwas Luft. */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:84px; }
/* Am Handy liegt unten die feste Kontaktleiste (61 px plus sicherer
   Bereich). Ohne Gegenstueck unten landeten 5 von 70 Tabstopps ganz
   darunter - der Fokus war da, aber unsichtbar (Befund 27.09.2026). */
@media (max-width:767px){
  html{ scroll-padding-bottom:calc(var(--raum-64) + var(--raum-16) + env(safe-area-inset-bottom)); }
}
body{
  margin:0; background:var(--papier); color:var(--tinte);
  font-family:var(--schrift-system); font-size:var(--txt-17); line-height:var(--zeile-weit);
  font-feature-settings:'ss01','cv05'; overflow-x:hidden;
}

/* height:auto ist Pflicht - sonst gewinnt das HTML-height-Attribut gegen
   aspect-ratio und die Bilder werden viel zu hoch (Design-Review 16.08.). */
img{ max-width:100%; height:auto; display:block; }

/* Lange Woerter duerfen umbrechen, statt aus dem Bild zu laufen.
   Ueberschriften mit Silbentrennung (sonst steht "GEWAEHRLEISTUNGS FALL"
   mitten im Wort getrennt da), Fliesstext nur wenn das Wort allein nicht passt. */
/* ---------- Typografie ---------- */
h1, h2, h3{ overflow-wrap:break-word; hyphens:auto;
  font-family:var(--schrift-plakat); font-weight:400; letter-spacing:var(--sperr-minus-2); line-height:1.04; text-wrap:balance; margin:0; }
p, li, td, th{ overflow-wrap:break-word; }

/* mobile.de-Titel trennen mit Sternchen statt Leerzeichen ("Tiguan*Join*ACC") -
   dort findet der Browser sonst gar keine Umbruchstelle. */
.wagen-titel, .wagen-unter, #dtTitel, #dtUnter, #fokusTitel{ overflow-wrap:anywhere; }
a{ color:inherit; }

.spalte{ width:min(100% - var(--rand) * 2, var(--spalte)); margin-inline:auto; }

h1{ font-size:var(--txt-h1); text-transform:uppercase; }
h2{ font-size:var(--txt-h2); text-transform:uppercase; }
h3{ font-size:var(--txt-h3); }
p{ margin:0 0 1em; }
.blick{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--txt-12); letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-tief); font-weight:600;
}
.blick::before{ content:''; display:inline-block; width:26px; height:1px; background:var(--gold); vertical-align:middle; margin-right:var(--raum-12); }
.lese{ max-width:62ch; color:var(--tinte-weich); }

/* ---------- Knöpfe ---------- */
.knopf{
  --bg:var(--tinte); --fg:var(--weiss);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--raum-10);
  min-height:52px; padding:0 var(--raum-26); border:1px solid transparent; border-radius:var(--rad-10);
  background:var(--bg); color:var(--fg); cursor:pointer;
  font:600 var(--txt-15)/1 var(--schrift-text); text-decoration:none;
  transition:transform var(--dauer-sm) var(--weich), box-shadow var(--dauer-sm) var(--weich), background var(--dauer-sm) var(--weich);
}
.knopf:hover{ transform:translateY(-2px); box-shadow:var(--schatten-knopf); }
.knopf:active{ transform:translateY(0); }
.knopf--gold{ --bg:var(--gold); --fg:var(--tinte); }
.knopf--klar{ --bg:transparent; --fg:var(--tinte); border-color:var(--tinte); }
.knopf--klar:hover{ background:var(--tinte); color:var(--weiss); }
.knopf--hell{ --bg:var(--licht-12); --fg:var(--weiss); border-color:rgba(255,255,255,.4); backdrop-filter:blur(6px); }
/* Eine Reihe Knoepfe, die am Handy umbricht - die Hausklasse dafuer.
   Bis zum 27.09.2026 hatten 404.html und 500.html je eine eigene, wortgleiche
   Regel (.fehler-wege) in einem eigenen <style>-Block, und status.html half
   sich mit einem blossen <p>: dort standen die Knoepfe ohne festen Abstand
   nebeneinander und rutschten beim Umbruch zusammen. Drei Seiten, drei
   Loesungen fuer dieselbe Reihe. */
.knopfreihe{ display:flex; flex-wrap:wrap; gap:var(--raum-12); }

/* ---------- Kopfzeile ---------- */
.kopf{
  position:sticky; top:0; z-index:var(--ebene-kopf);
  background:color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid transparent;
  transition:border-color var(--dauer-md) var(--weich), background var(--dauer-md) var(--weich);
}
.kopf.geklebt{ border-bottom-color:var(--linie); background:color-mix(in srgb, var(--papier) 96%, transparent); }
.kopf-reihe{ display:flex; align-items:center; justify-content:space-between; gap:var(--raum-14); padding:var(--raum-12) 0; }
/* Kein Seitwaertsscrollen (V-24, 20.09.2026, Befund B124): auf 390 px
   Handybreite wurde der rechte Block (Telefon + Knopf, nowrap) gestaucht und
   der Knopf ragte 6-20 px ueber den Rand - scrollWidth 396/406/410 statt
   390. Jetzt darf nur das Logo schrumpfen; der rechte Block behaelt seine
   Breite. Die Handy-Leiste unten bekommt dieselbe Sicherung. */
.marke{ flex:1 1 auto; min-width:0; }
.marke img{ height:clamp(34px, 5vw, 46px); width:auto; max-width:100%; object-fit:contain; object-position:left center; }
.kopf-rechts{ display:flex; align-items:center; gap:var(--raum-10); flex:0 0 auto; min-width:0; }
.kopf-tel{
  display:inline-flex; align-items:center; gap:var(--raum-8); min-height:44px; padding:0 var(--raum-14);
  border:1px solid var(--linie-bedienelement); border-radius:var(--rad-10); background:var(--karte);
  font:600 var(--txt-14)/1 var(--schrift-text); text-decoration:none; white-space:nowrap;
}
.kopf-tel:hover{ border-color:var(--gold); }
/* Sprachumschalter DE/EN (02.10.2026, js/sprache.js) - so hoch und so
   umrandet wie Telefon- und Menueknopf daneben. */
.sprache-knopf{
  min-width:var(--tipp); height:44px; padding:0 var(--raum-10);
  border:1px solid var(--linie-bedienelement); border-radius:var(--rad-10); background:var(--karte);
  font:700 var(--txt-13)/1 var(--schrift-text); letter-spacing:var(--sperr-8); color:var(--tinte); cursor:pointer;
}
.sprache-knopf:hover{ border-color:var(--gold); }
/* Unter 1024 px (dort tritt der Burger an) steht der Umschalter im
   Handymenue - in der Kopfleiste drueckte er bei 360 px das Logo auf 18 px. */
@media (max-width:1023px){ .sprache-knopf--kopf{ display:none; } }
@media (min-width:1024px){ .sprache-knopf--menue{ display:none; } }
.sprache-knopf--menue{ width:100%; margin-top:var(--raum-8); }

/* Schmale Handys: Logo + Telefon + Termin muessen in 375px passen.
   Telefonnummer wird zum reinen Icon-Knopf, Termin-Knopf kompakt.
   (Regel 4 der DESIGN-RICHTUNG: nie horizontal scrollen.) */
@media (max-width:479px){
  .kopf-reihe{ gap:var(--raum-8); }
  .marke img{ height:32px; }
  .kopf-tel{ padding:0; width:44px; justify-content:center; }
  .kopf-tel span{ display:none; }
  .kopf-rechts .knopf{ min-height:44px; padding:0 var(--raum-14); font-size:var(--txt-13); }
}

/* ---------- Hero ---------- */
.hero{ position:relative; padding:clamp(var(--raum-40),7vw,var(--raum-88)) 0 clamp(var(--raum-56),8vw,var(--raum-110)); overflow:clip; }
.hero-raster{ display:grid; gap:var(--raum-abschnitt-eng); grid-template-columns:1fr; align-items:center; }
@media (min-width:1024px){ .hero-raster{ grid-template-columns:1.05fr .95fr; } }

.hero h1 .zeile{ display:block; }
.hero h1 .gold{ color:var(--gold-tief); }
.hero-lede{ font-size:var(--txt-vorspann); margin-top:var(--raum-22); }
.hero-tasten{ display:flex; flex-wrap:wrap; gap:var(--raum-12); margin-top:var(--raum-30); }

/* Versprechen-Zeile: die zwei Inklusiv-Leistungen als Kernbotschaft */
.versprechen{ display:grid; gap:var(--raum-12); margin-top:var(--raum-34); grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.versprechen-teil{
  display:flex; gap:var(--raum-12); align-items:flex-start;
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
  padding:var(--raum-14) var(--raum-16);
}
.versprechen-teil svg{ flex-shrink:0; width:22px; height:22px; color:var(--gold-tief); }
.versprechen-teil b{ display:block; font-size:var(--txt-15); }
.versprechen-teil span{ font-size:var(--txt-13); color:var(--tinte-leise); }

/* Hero-Bild: die Inhaber im Hochformat (wieder seit 02.10.2026, Wunsch
   Inhaber; vom 29.09. bis 02.10. stand hier das Autohaus - es hat jetzt
   den eigenen Abschnitt .haus-neu). Gold-Rahmenlinie und leichter
   Parallax. Der Rahmen haengt am Bildkasten, nicht an der ganzen figure -
   sonst liefe die Linie um die Bildunterschrift herum. */
.hero-bild{ position:relative; margin:0; }
.hero-bild-rahmen{ position:relative; }
.hero-bild-rahmen > img{
  width:100%; height:auto; aspect-ratio:4/4.6; object-fit:cover; object-position:center 20%;
  border-radius:var(--radius-gross); box-shadow:var(--schatten-hero);
}
.hero-bild-rahmen::after{
  content:''; position:absolute; inset:var(--raum-14) -14px -14px var(--raum-14); z-index:var(--ebene-unter);
  border:1.5px solid var(--gold); border-radius:var(--radius-gross);
}
.hero-marke{
  position:absolute; left:-12px; bottom:26px;
  display:flex; align-items:center; gap:var(--raum-12);
  background:var(--tinte); color:var(--weiss); padding:var(--raum-10) var(--raum-18) var(--raum-10) var(--raum-10); border-radius:var(--rad-12);
  font:600 var(--txt-13)/1.4 var(--schrift-text); box-shadow:var(--schatten-marke);
}
.hero-bild-unter{ margin:var(--raum-12) 0 0; font-size:var(--txt-13); line-height:var(--zeile-145); color:var(--tinte-weich); }
.hero-haus-link{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.hero-haus-link:hover{ color:var(--tinte); }

/* Neues Autohaus (eigener Abschnitt seit 02.10.2026): Foto links, Text
   rechts; am Handy das Foto zuerst. */
.haus-neu-raster{ display:grid; gap:var(--raum-abschnitt-eng); grid-template-columns:1fr; align-items:center; }
@media (min-width:1024px){ .haus-neu-raster{ grid-template-columns:1.1fr .9fr; } }
.haus-neu-bild{ margin:0; }
.haus-neu-bild img{
  display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; object-position:center 40%;
  border-radius:var(--radius-gross); box-shadow:var(--schatten-hero);
}
.haus-neu-hinweis{ margin-top:var(--raum-8); font-size:var(--txt-12); color:var(--tinte-leise); }
.haus-neu-text .knopf{ margin-top:var(--raum-20); }
.hero-marke b{ display:block; font-family:var(--schrift-titel); font-size:var(--txt-16); letter-spacing:var(--sperr-1); }

/* Handy: Hero straffen, damit das Foto der Inhaber frueh im Scroll auftaucht -
   Versprechen nebeneinander, Bild flacher, Knoepfe volle Breite. */
@media (max-width:767px){
  .hero{ padding-top:var(--raum-26); }
  .versprechen{ grid-template-columns:1fr 1fr; gap:var(--raum-8); margin-top:var(--raum-24); }
  .versprechen-teil{ flex-direction:column; gap:var(--raum-6); padding:var(--raum-12) var(--raum-12) var(--raum-12); }
  .versprechen-teil svg{ width:19px; height:19px; }
  .versprechen-teil b{ font-size:var(--txt-14); line-height:var(--zeile-120); }
  .versprechen-teil span{ font-size:var(--txt-12); }
  .hero-tasten{ margin-top:var(--raum-22); }
  .hero-tasten .knopf{ flex:1 1 100%; }
  /* Das Haus steht am Handy GANZ OBEN (Wunsch Inhaber, 29.09.2026) - vor
     Ueberschrift und Knopf. Flach im 16:9-Ausschnitt, damit der Hauptknopf
     trotzdem im ersten Bildschirm bleibt. */
  /* Flach genug, dass Ueberschrift, Knopf UND die Auto-Kachel mit Preis
     im ersten Bildschirm bleiben (gemessen 29.09.2026: mit 16:9 rutschte
     die Kachel auf y 821, unter die feste Leiste). */
  .hero-bild{ order:-1; }
  /* Hochformat der Inhaber als flacher Streifen: der Ausschnitt sitzt auf
     den Gesichtern, das Namensschild unten auf den Schultern (bei 338 px
     Breite Fenster y 92-222 von 507, Gesichter 99-198). 2,6:1 statt 3:1 -
     die 17 px holt die einzeilige Zeile darunter wieder herein. */
  .hero-bild-rahmen > img{ aspect-ratio:2.6/1; object-position:center 24%; }
  /* Der zweite Knopf steht am Handy nicht: "Wie wir pruefen" folgt weiter
     unten ohnehin, und Anrufen/WhatsApp/Termin liegen in der festen Leiste.
     So bleibt die Auto-Kachel mit Preis im ersten Bildschirm. */
  .hero-knopf-zweit{ display:none; }
  .hero-bild-rahmen::after{ inset:var(--raum-8) -8px -8px var(--raum-8); }
  /* Namensschild klein und in der Ecke - vorher deckte es 324 von 338 px
     Fotobreite ab. Die zweite Zeile ("Inhaber · Kfz-Meister") steht am
     Handy nicht; die Namen und das Gesicht reichen. */
  .hero-marke{ left:var(--raum-6); bottom:var(--raum-6); padding:var(--raum-4) var(--raum-10); font-size:var(--txt-12); gap:var(--raum-6); border-radius:var(--rad-rund); }
  .hero-marke-rolle{ display:none; }
  .hero-bild-unter{ margin-top:var(--raum-8); font-size:var(--txt-12); line-height:var(--zeile-130); }
  .hero-marke b{ font-size:var(--txt-12); display:inline; }
}

/* Zahlenband unter dem Hero */
.zahlen{ border-block:1px solid var(--linie); background:var(--papier-tief); }
.zahlen-raster{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
/* Herkunftshinweis zu den Sternen (§ 5b Abs. 3 UWG) - leise, aber lesbar
   und direkt unter der Zahl, nicht in der Fusszeile. */
.zahlen-quelle{ margin:var(--raum-14) 0 0; font-size:var(--txt-12); line-height:var(--zeile-150); color:var(--tinte-leise); }
.zahl{ padding:var(--raum-26) var(--raum-10); text-align:center; border-right:1px solid var(--linie); }
.zahl:last-child{ border-right:0; }
.zahl b{ display:block; font-family:var(--schrift-titel); font-size:var(--txt-fehler-h1); color:var(--gold-tief); }
.zahl span{ font-size:var(--txt-12); letter-spacing:var(--sperr-10); text-transform:uppercase; color:var(--tinte-leise); }

/* ---------- Abschnitte ---------- */
.block{ padding:var(--raum-abschnitt) 0; }
.block--tief{ background:var(--papier-tief); }
.block--tinte{ background:var(--tinte); color:var(--auf-dunkel); }
.block--tinte .lese{ color:var(--auf-dunkel-weich); }
.block--tinte .blick{ color:var(--gold-hell); }
.block-kopf{ max-width:66ch; margin-bottom:clamp(var(--raum-28),4vw,var(--raum-48)); }
.block-kopf h2{ margin-top:var(--raum-12); }

/* ---------- Beweis-Sektion ---------- */
.beweise{ display:grid; gap:var(--raum-18); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.beweis{
  position:relative; background:var(--karte); border:1px solid var(--linie);
  border-radius:var(--radius-gross); padding:var(--raum-26) var(--raum-24) var(--raum-24); overflow:hidden;
}
.beweis::before{ content:''; position:absolute; inset:0 auto 0 0; width:3px; background:linear-gradient(var(--gold),var(--gold-tief)); }
.beweis-nr{ font-family:var(--schrift-zahl); font-size:var(--txt-12); color:var(--tinte-leise); letter-spacing:var(--sperr-16); }
.beweis h3{ margin:var(--raum-10) 0 var(--raum-8); }
.beweis p{ font-size:var(--txt-15); color:var(--tinte-weich); margin:0; }
.beweis-mehr{ display:inline-block; margin-top:var(--raum-14); font-size:var(--txt-13); font-weight:600; color:var(--gold-tief); text-decoration:none; border-bottom:1px solid currentColor; }

/* ---------- Fahrzeug im Fokus (dunkle Kino-Sektion) ---------- */
.fokus{ background:var(--tinte); color:var(--auf-dunkel); padding:var(--raum-abschnitt-klein) 0; }
.fokus[hidden]{ display:none; }
.fokus .blick{ color:var(--gold-hell); }
.fokus h2{ margin-top:var(--raum-12); }
.fokus-kopf{ margin-bottom:clamp(var(--raum-24),3vw,var(--raum-40)); }

.fokus-buehne{
  position:relative; border-radius:var(--radius-gross); overflow:hidden;
  background:var(--buehne); isolation:isolate;
}
.fokus-buehne img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }
.fokus-buehne::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,12,9,0) 55%, rgba(12,12,9,.55) 100%);
}

/* Punkt auf dem Bild - Puls nur am Desktop, nie bei reduzierter Bewegung. */
/* Prüfschritte unter dem Bild. Vorher lagen sie als Punkte auf dem Motiv -
   feste Prozentwerte, wechselndes Fahrzeug, also trafen sie nie. */
.fokus-pruefung{
  display:grid; gap:var(--raum-20); margin-top:var(--raum-26);
  grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
}
.fokus-pruefung > *{ min-width:0; }
.fokus-schritt{ border-top:2px solid rgba(236,216,23,.42); padding-top:var(--raum-14); }
.fokus-schritt-nr{
  font-family:var(--schrift-zahl); font-size:var(--txt-12); letter-spacing:var(--sperr-16);
  color:var(--gold); margin:0 0 var(--raum-8);
}
.fokus-schritt h3{ font-size:var(--txt-16); margin:0 0 var(--raum-6); color:var(--weiss); }
.fokus-schritt p{ margin:0; font-size:var(--txt-14); line-height:var(--zeile-weit); color:var(--auf-dunkel-weich); }

.fokus-fuss{ display:flex; flex-wrap:wrap; gap:var(--raum-18); align-items:center; justify-content:space-between; margin-top:var(--raum-26); }
.fokus-daten{ display:flex; flex-wrap:wrap; gap:var(--raum-10) var(--raum-26); font-size:var(--txt-14); color:var(--auf-dunkel-weich); }
.fokus-daten b{ display:block; color:var(--weiss); font-family:var(--schrift-zahl); font-size:var(--txt-16); }
.fokus-daten span{ font-size:var(--txt-12); letter-spacing:var(--sperr-10); text-transform:uppercase; color:var(--auf-dunkel-rand); }

/* Pill-CTA mit Pfeil - schlanker als der Hauptknopf, fuer Sekundärwege. */
.pille{
  display:inline-flex; align-items:center; gap:var(--raum-10); min-height:48px; padding:0 var(--raum-22);
  border:1px solid var(--licht-42); border-radius:var(--rad-rund);
  color:var(--weiss); text-decoration:none; font:600 var(--txt-14)/1 var(--schrift-text);
  transition:background var(--dauer-sm) var(--weich), border-color var(--dauer-sm) var(--weich), transform var(--dauer-sm) var(--weich);
}
.pille:hover{ background:var(--gold); color:var(--tinte); border-color:var(--gold); transform:translateY(-2px); }

@media (max-width:767px){
  .fokus-buehne img{ aspect-ratio:4/3; }
  .fokus-pruefung{ gap:var(--raum-16); }
}

/* ---------- Vergleich: wir / anderer Händler / privat ---------- */
.vgl-tabelle-huelle{ overflow-x:auto; border:1px solid var(--linie); border-radius:var(--radius-gross); background:var(--karte); }
.vgl-tabelle{ width:100%; min-width:760px; border-collapse:collapse; font-size:var(--txt-14); }
.vgl-tabelle th, .vgl-tabelle td{ padding:var(--raum-16) var(--raum-18); text-align:left; vertical-align:top; border-bottom:1px solid var(--linie); }
.vgl-tabelle tbody tr:last-child th, .vgl-tabelle tbody tr:last-child td{ border-bottom:0; }
.vgl-tabelle thead th{
  font-family:var(--schrift-zahl); font-size:var(--txt-12); letter-spacing:var(--sperr-14); text-transform:uppercase;
  color:var(--tinte-leise); font-weight:600; background:var(--papier-tief); border-bottom:1px solid var(--linie);
  position:sticky; top:0;
}
.vgl-tabelle tbody th{ font-family:var(--schrift-text); font-weight:700; color:var(--tinte); width:190px; }
/* Unsere Spalte hebt sich als durchgehendes Band ab - Gold nur hier. */
.vgl-tabelle .vgl-wir{ background:color-mix(in srgb, var(--gold) 9%, var(--karte)); }
.vgl-tabelle thead .vgl-wir{
  background:var(--gold); color:var(--tinte); font-weight:800;
  border-radius:var(--rad-12) var(--rad-12) 0 0;
}
.vgl-ja, .vgl-teils, .vgl-nein{ display:inline-block; font-weight:600; }
/* Nie nur Farbe als Bedeutungsträger: jedes Feld trägt zusätzlich ein Zeichen. */
.vgl-ja{ color:var(--gut); }
.vgl-ja::before{ content:'✔ '; }
.vgl-teils{ color:var(--tinte-weich); }
.vgl-teils::before{ content:'○ '; }
.vgl-nein{ color:var(--achtung); }
.vgl-nein::before{ content:'✕ '; }

.vgl-karten{ display:none; gap:var(--raum-14); }
.vgl-karte{ background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius-gross); padding:var(--raum-20); }
.vgl-karte h3{ margin-bottom:var(--raum-12); }
.vgl-zeile{ margin:0 0 var(--raum-10); font-size:var(--txt-14); color:var(--tinte-weich); padding-left:var(--raum-12); border-left:2px solid var(--linie); }
.vgl-zeile:last-child{ margin-bottom:0; }
.vgl-zeile b{ display:block; font-size:var(--txt-12); letter-spacing:var(--sperr-12); text-transform:uppercase; color:var(--tinte-leise); font-family:var(--schrift-zahl); margin-bottom:var(--raum-2); }
.vgl-zeile--wir{ border-left-color:var(--gold); color:var(--tinte); font-weight:500; }
.vgl-zeile--wir b{ color:var(--gold-tief); }

.vgl-fussnote{ margin-top:var(--raum-18); font-size:var(--txt-12); color:var(--tinte-leise); max-width:78ch; }

@media (max-width:767px){
  .vgl-tabelle-huelle{ display:none; }
  .vgl-karten{ display:grid; }
}

/* ---------- Fahrzeugbestand ---------- */
.werkzeugleiste{ display:flex; flex-wrap:wrap; gap:var(--raum-10); margin-bottom:var(--raum-26); }
.werkzeugleiste select{
  min-height:46px; padding:0 var(--raum-34) 0 var(--raum-14); border:1px solid var(--linie-bedienelement); border-radius:var(--rad-10);
  background:var(--karte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C7869' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/16px;
  font:500 var(--txt-14)/1 var(--schrift-text); color:var(--tinte); appearance:none; cursor:pointer;
}
.werkzeugleiste select:hover{ border-color:var(--gold); }

.raster{ display:grid; gap:var(--raum-20); grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); }
.wagen{
  position:relative; display:flex; flex-direction:column;
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius-gross);
  overflow:hidden; text-decoration:none; color:inherit;
  transition:transform var(--dauer-md) var(--weich), box-shadow var(--dauer-md) var(--weich), border-color var(--dauer-md) var(--weich);
}
.wagen:hover{ transform:translateY(-4px); box-shadow:0 26px 44px -28px rgba(20,20,15,.5); border-color:var(--gold); }
.wagen-bild{ position:relative; aspect-ratio:4/3; background:var(--papier-tief); overflow:hidden; }
.wagen-bild img{ width:100%; height:100%; object-fit:cover; transition:transform var(--dauer-xl) var(--weich); }
.wagen:hover .wagen-bild img{ transform:scale(1.04); }
/* 12 statt 11 px (Runde 10): auf den Bestandskarten steht keine Schrift
   unter 12 px mehr. */
.wagen-fahne{
  position:absolute; top:12px; right:12px; z-index:var(--ebene-ueber);
  padding:var(--raum-6) var(--raum-12); border-radius:var(--rad-20); font:700 var(--txt-12)/1 var(--schrift-text); letter-spacing:var(--sperr-5);
}
.fahne--aktion{ background:var(--achtung); color:var(--weiss); }
.fahne--beliebt{ background:var(--gold); color:var(--tinte); }
.fahne--zaehler{ background:rgba(20,20,15,.78); color:var(--auf-dunkel-klar); }
.wagen-koerper{ padding:var(--raum-18) var(--raum-20) var(--raum-20); display:flex; flex-direction:column; flex:1; }
.wagen-titel{ font-family:var(--schrift-titel); font-size:var(--txt-16); line-height:var(--zeile-120); }
.wagen-unter{ font-size:var(--txt-13); color:var(--tinte-leise); margin:var(--raum-4) 0 var(--raum-14); min-height:2.4em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.wagen-daten{ display:grid; grid-template-columns:1fr 1fr; gap:var(--raum-6) var(--raum-14); padding-top:var(--raum-14); border-top:1px solid var(--linie); font-size:var(--txt-12); color:var(--tinte-leise); }
.wagen-daten b{ display:block; color:var(--tinte); font-family:var(--schrift-zahl); font-size:var(--txt-14); font-weight:600; }
.wagen-fuss{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--raum-12); margin-top:var(--raum-16); padding-top:var(--raum-14); border-top:1px solid var(--linie); }
.wagen-preis{ font-family:var(--schrift-titel); font-size:var(--txt-22); }
.wagen-zins{ font-size:var(--txt-12); color:var(--tinte-leise); margin-top:var(--raum-2); }
.wagen-alt{ font-size:var(--txt-12); font-weight:700; color:var(--gut); }
.wagen-pfeil{ font-size:var(--txt-13); font-weight:700; color:var(--gold-tief); white-space:nowrap; }

.gerippe{ border:1px solid var(--linie); border-radius:var(--radius-gross); overflow:hidden; background:var(--karte); }
.gerippe-bild{ aspect-ratio:4/3; background:linear-gradient(100deg,var(--papier-tief) 30%,var(--schimmer) 50%,var(--papier-tief) 70%); background-size:200% 100%; animation:schimmer 1.4s infinite; }
.gerippe-zeile{ height:12px; margin:var(--raum-16) var(--raum-20); border-radius:var(--rad-6); background:var(--papier-tief); }
.gerippe-zeile.kurz{ width:55%; }
@keyframes schimmer{ to{ background-position:-200% 0; } }

.zustand{ grid-column:1/-1; padding:var(--raum-44); text-align:center; border:1px dashed var(--linie); border-radius:var(--radius-gross); color:var(--tinte-leise); }

/* ---------- Ankauf ---------- */
.ankauf-raster{ display:grid; gap:clamp(var(--raum-26),4vw,var(--raum-54)); grid-template-columns:1fr; align-items:start; }
@media (min-width:1024px){ .ankauf-raster{ grid-template-columns:1fr 1fr; } }
.ankauf-punkte{ list-style:none; margin:var(--raum-26) 0 0; padding:0; display:grid; gap:var(--raum-14); }
.ankauf-punkte li{ display:flex; gap:var(--raum-12); align-items:flex-start; font-size:var(--txt-15); }
.ankauf-punkte svg{ flex-shrink:0; width:20px; height:20px; color:var(--gold-hell); margin-top:var(--raum-2); }

.formular{ background:var(--karte); border-radius:var(--radius-gross); padding:clamp(var(--raum-22),3vw,var(--raum-34)); color:var(--tinte); }
.feld-raster{ display:grid; gap:var(--raum-14); grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.feld-raster[hidden]{ display:none; }  /* [hidden] verliert sonst gegen display:grid */
.feld{ display:flex; flex-direction:column; gap:var(--raum-6); }
.feld--breit{ grid-column:1/-1; }
/* Mindestens 12 px auch in Grossbuchstaben (29.09.2026, vorher 11 px). */
.feld label{ font-family:var(--schrift-zahl); font-size:var(--txt-12); letter-spacing:var(--sperr-12); text-transform:uppercase; color:var(--tinte-leise); }
.feld input, .feld select, .feld textarea{
  min-height:48px; padding:var(--raum-12) var(--raum-14); border:1px solid var(--linie-bedienelement); border-radius:var(--rad-10);
  background:var(--papier); font:400 var(--txt-15)/1.4 var(--schrift-text); color:var(--tinte);
}
.feld textarea{ min-height:96px; resize:vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus{ border-color:var(--gold); background:var(--karte); }
.feld-hilfe{ font-size:var(--txt-12); color:var(--tinte-leise); }
/* Dateiauswahl: der Systemknopf laesst sich nicht gestalten, das Feld darum
   herum schon - so passt es zu den uebrigen Eingaben. */
.feld input[type="file"]{ padding:var(--raum-10) var(--raum-12); font-size:var(--txt-14); cursor:pointer; }
.foto-liste{ display:flex; flex-wrap:wrap; gap:var(--raum-8); margin-top:var(--raum-10); }
.foto-liste[hidden]{ display:none; }
.foto-marke{
  display:inline-flex; align-items:center; gap:var(--raum-6);
  background:var(--papier-tief); border:1px solid var(--linie); border-radius:var(--rad-rund);
  padding:var(--raum-6) var(--raum-12); font-size:var(--txt-12); color:var(--tinte-weich);
}
.foto-marke--gross{ border-color:var(--achtung); color:var(--achtung); }
.zustimmung{ grid-column:1/-1; display:flex; gap:var(--raum-10); align-items:flex-start; font-size:var(--txt-12); color:var(--tinte-leise); }
.zustimmung input{ min-height:auto; width:18px; height:18px; margin-top:var(--raum-2); flex-shrink:0; }
/* [hidden] verliert gegen display:flex - ohne diese Zeile stand die
   Finanzierungs-Checkbox im Anfrageformular immer offen, obwohl sie nur
   erscheinen soll, wenn eine Rate gezeigt wurde. */
.zustimmung[hidden]{ display:none; }
.formular-danke{ display:none; padding:var(--raum-20); border-radius:var(--rad-12); background:color-mix(in srgb, var(--gut) 12%, transparent); color:var(--gut); font-weight:600; }
.formular-danke.sichtbar{ display:block;
  /* 1. Erfolgsmeldung nach einer Anfrage.
   Der einzige Ort auf der Seite, an dem etwas Waerme erlaubt ist: er
   kommt einmal pro Anfrage vor, nicht dutzendfach am Tag. Vorher
   sprang der Kasten per display-Wechsel ins Bild. */
  animation:danke-auf .34s var(--weich) both; }

/* ---------- Fahrzeug-Detailseite ---------- */
.dt-seite{ padding:var(--raum-abschnitt-eng) 0 clamp(var(--raum-48),7vw,var(--raum-90)); }
.dt-laden, .dt-fehler{ padding:var(--raum-60) 0; color:var(--tinte-leise); }
.dt-fehler h1{ font-size:var(--txt-fehler-h1); margin-bottom:var(--raum-12); }
.dt-fehler .knopf{ margin-top:var(--raum-20); }

.dt-kopf{ margin-bottom:clamp(var(--raum-22),3vw,var(--raum-34)); }
.dt-kopf h1{ margin-top:var(--raum-10); }
.dt-kopf .lese{ margin-top:var(--raum-8); }

.dt-raster{ display:grid; gap:clamp(var(--raum-24),3vw,var(--raum-44)); grid-template-columns:1fr; align-items:start; }
/* Ohne min-width:0 waechst die Spalte mit dem Bilderstreifen mit und
   sprengt die Seite (Grid-Standard ist min-width:auto). */
.dt-raster > *{ min-width:0; }

.dt-galerie{ margin:0; border-radius:var(--radius-gross); overflow:hidden; background:var(--papier-tief); }
.dt-galerie img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }

/* --- 360-Grad-Umrundung ----------------------------------------------------
   Der Wagen laesst sich ziehen. Nur aktiv, wenn der Server genug
   Aussenansichten gefunden hat (siehe php/runde.php). */
.dt-galerie.dt-drehbar{ position:relative; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.dt-galerie.dt-drehbar.zieht{ cursor:grabbing; }
/* Beim Drehen darf das Bild nicht mitgezogen werden - sonst startet der
   Browser sein eigenes Bild-Ziehen und der Zug bricht ab. */
.dt-galerie.dt-drehbar img{ pointer-events:none; }

.dt-dreh-hinweis{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  padding:var(--raum-8) var(--raum-14); border-radius:var(--rad-rund);
  background:rgba(0,0,0,.62); color:var(--weiss);
  font-size:var(--txt-13); letter-spacing:var(--sperr-2); white-space:nowrap;
  pointer-events:none; transition:opacity var(--dauer-lg) ease;
}
/* Weg, sobald jemand verstanden hat, dass man ziehen kann. */
.dt-dreh-hinweis.weg{ opacity:0; }

@media (prefers-reduced-motion: reduce){ .dt-dreh-hinweis{ transition:none; } }

.dt-streifen{ display:flex; gap:var(--raum-10); margin-top:var(--raum-12); overflow-x:auto; padding-bottom:var(--raum-6); scrollbar-width:thin; }
.dt-vorschau{
  flex:0 0 92px; padding:0; border:2px solid transparent; border-radius:var(--rad-10);
  background:none; cursor:pointer; overflow:hidden; line-height:0;
  transition:border-color var(--dauer-sm) var(--weich), opacity var(--dauer-sm) var(--weich);
  opacity:.72;
}
.dt-vorschau img{ width:92px; height:69px; object-fit:cover; }
.dt-vorschau:hover{ opacity:1; }
.dt-vorschau.aktiv{ border-color:var(--gold); opacity:1; }

.dt-daten{ display:grid; gap:var(--raum-12); grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); margin-top:var(--raum-28); }
.dt-akte-hinweis{ margin:var(--raum-12) 0 0; font-size:var(--txt-13); color:var(--tinte-leise); }
#dtAkte[hidden]{ display:none; }
.dt-kachel{ background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius); padding:var(--raum-14) var(--raum-16); }
.dt-kachel span{ display:block; font-family:var(--schrift-zahl); font-size:var(--txt-12); letter-spacing:var(--sperr-12); text-transform:uppercase; color:var(--tinte-leise); }
.dt-kachel b{ display:block; margin-top:var(--raum-4); font-size:var(--txt-16); }

.dt-ueberschrift{ font-family:var(--schrift-titel); font-size:var(--txt-18); text-transform:uppercase; letter-spacing:var(--sperr-minus-1); margin:var(--raum-32) 0 var(--raum-14); }
.dt-anzahl{ font-family:var(--schrift-text); font-size:var(--txt-13); font-weight:600; color:var(--tinte-leise); }
.dt-chips{ display:flex; flex-wrap:wrap; gap:var(--raum-8); }
.dt-chip{ background:var(--tinte); color:var(--auf-dunkel); border-radius:var(--rad-8); padding:var(--raum-8) var(--raum-12); font-size:var(--txt-13); font-weight:600; }
.dt-liste{ list-style:none; margin:0; padding:0; columns:2; column-gap:var(--raum-32); font-size:var(--txt-14); color:var(--tinte-weich); }
.dt-liste li{ break-inside:avoid; padding:var(--raum-4) 0 var(--raum-4) var(--raum-20); position:relative; }
.dt-liste li::before{ content:'✓'; position:absolute; left:0; color:var(--gold-tief); font-weight:700; }
@media (max-width:479px){ .dt-liste{ columns:1; } }

.dt-beweise{ display:grid; gap:var(--raum-12); grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin-top:var(--raum-34); }
.dt-beweis{ background:var(--papier-tief); border-radius:var(--radius); padding:var(--raum-16) var(--raum-18); border-left:3px solid var(--gold); }
.dt-beweis b{ display:block; font-size:var(--txt-15); }
.dt-beweis span{ font-size:var(--txt-13); color:var(--tinte-leise); }

.dt-fussnote{ margin-top:var(--raum-26); font-size:var(--txt-12); line-height:1.7; color:var(--tinte-leise); max-width:80ch; }

.dt-seitenspalte{ display:grid; gap:var(--raum-16); }

.dt-preisfeld{ background:var(--tinte); color:var(--auf-dunkel); border-radius:var(--radius-gross); padding:var(--raum-24); }
.dt-siegel{
  display:inline-block; margin:0 0 var(--raum-14); padding:var(--raum-4) var(--raum-12); border-radius:var(--rad-20);
  background:linear-gradient(90deg,var(--gold-hell),var(--gold)); color:var(--tinte);
  font-size:var(--txt-12); font-weight:800; letter-spacing:var(--sperr-8); text-transform:uppercase;
}
.dt-preis{ font-family:var(--schrift-titel); font-size:var(--txt-preis); color:var(--gold-hell); margin:0; line-height:var(--zeile-100); }
.dt-zins{ margin:var(--raum-8) 0 0; font-size:var(--txt-14); color:var(--auf-dunkel-weich); }
.dt-stand{ margin:var(--raum-6) 0 0; font-size:var(--txt-12); }
.dt-wege{ display:grid; gap:var(--raum-10); margin-top:var(--raum-20); }
/* Der helle Umriss gehoert zur DUNKLEN Preiskarte, nicht zu jedem
   .dt-wege-Block: auf wir-suchen.html steht derselbe Block auf hellem
   Grund und der Knopf war dort weiss auf Sand. Die dunkle Fassung
   steht jetzt nur noch bei .dt-preisfeld und .dt-seitenrest. */
/* Trefferflaeche 44 px (Befund 20, 27.09.2026): gemessen waren 290 x 26 px.
   Das sind echte Bedienelemente ("Exposé ansehen & drucken", "Auf mobile.de
   ansehen", "Diese Rate anfragen") - die WCAG-Ausnahme fuer Textlinks im
   Fliesstext greift hier nicht. Die Schrift bleibt unveraendert, nur die
   Flaeche waechst; der Text steht darin mittig. */
.dt-nebenlink{
  background:none; border:0; padding:var(--raum-4) 0; cursor:pointer; text-align:left;
  color:var(--auf-dunkel-weich); font:600 var(--txt-13)/1.4 var(--schrift-text); text-decoration:none;
  min-height:44px; display:inline-flex; align-items:center;
}
.dt-nebenlink:hover{ color:var(--gold-hell); }

.dt-formular{ border:1px solid var(--linie); }
.dt-formular-hinweis{ font-size:var(--txt-13); color:var(--tinte-leise); margin:-6px 0 var(--raum-18); }

/* ---------- Rechts- und Textseiten ---------- */
.recht{ padding:clamp(var(--raum-34),5vw,var(--raum-68)) 0 clamp(var(--raum-48),7vw,var(--raum-90)); }
.recht .spalte{ max-width:860px; }
.recht h1{ font-size:var(--txt-recht-h1); margin:var(--raum-10) 0 var(--raum-26); }
.recht h2{ font-size:var(--txt-recht-h2); margin:var(--raum-38) 0 var(--raum-12); }
.recht h3{
  font-family:var(--schrift-text); font-weight:800; font-size:var(--txt-16);
  letter-spacing:0; margin:var(--raum-30) 0 var(--raum-8);
}
.recht p, .recht li{ color:var(--tinte-weich); font-size:var(--txt-15); line-height:1.75; max-width:70ch; }
.recht ul, .recht ol{ padding-left:var(--raum-22); }
.recht li{ margin-bottom:var(--raum-6); }
.recht a:not(.knopf):not(.btn){ color:var(--gold-tief); }
.recht strong, .recht b{ color:var(--tinte); }
.recht table{ width:100%; border-collapse:collapse; margin:var(--raum-18) 0; font-size:var(--txt-14); }
.recht th, .recht td{ border:1px solid var(--linie); padding:var(--raum-10) var(--raum-12); text-align:left; vertical-align:top; }
.recht th{ background:var(--papier-tief); font-weight:700; }
/* Formulare auf Serviceseiten (z. B. Gewaehrleistung melden) */
.recht .btn, .recht .btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--raum-10);
  min-height:52px; padding:0 var(--raum-26); border-radius:var(--rad-10); text-decoration:none;
  background:var(--gold); color:var(--tinte); font:600 var(--txt-15)/1 var(--schrift-text);
}

/* ---------- Auto-des-Monats-Archiv ---------- */
.adm-liste{ display:grid; gap:var(--raum-12); margin-top:var(--raum-28); }
.adm-zeile{
  display:flex; flex-wrap:wrap; gap:var(--raum-14); align-items:center; justify-content:space-between;
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius-gross);
  padding:var(--raum-16) var(--raum-20);
}
.adm-monat{ font-family:var(--schrift-zahl); font-size:var(--txt-12); letter-spacing:var(--sperr-14); text-transform:uppercase; color:var(--gold-tief); margin:0; }
.adm-label{ font-family:var(--schrift-titel); font-size:var(--txt-17); margin:var(--raum-4) 0 0; }
.adm-weg{ font-size:var(--txt-13); color:var(--tinte-leise); }

/* ---------- Fußzeile ---------- */
.fuss{ background:var(--tinte); color:var(--auf-dunkel-weich); padding:clamp(var(--raum-44),6vw,var(--raum-74)) 0 var(--raum-26); }
.fuss-raster{ display:grid; gap:var(--raum-32); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.fuss h4{ font-family:var(--schrift-titel); font-size:var(--txt-14); color:var(--weiss); margin:0 0 var(--raum-14); letter-spacing:var(--sperr-2); }
.fuss a{ color:var(--auf-dunkel-weich); text-decoration:none; display:inline-block; padding:var(--raum-4) 0; }
.fuss a:hover{ color:var(--gold-hell); }
.fuss-unten{ margin-top:var(--raum-38); padding-top:var(--raum-20); border-top:1px solid var(--licht-12); display:flex; flex-wrap:wrap; gap:var(--raum-12); justify-content:space-between; font-size:var(--txt-12); }

/* ---------- Handy-Aktionsleiste ---------- */
.handyleiste{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--ebene-menue);
  width:100%; box-sizing:border-box;
  display:none; grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--tinte); border-top:1px solid var(--licht-14);
  padding-bottom:env(safe-area-inset-bottom);
}
.handyleiste a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--raum-4);
  min-width:0; flex:1 1 0; box-sizing:border-box; overflow:hidden;
  min-height:60px; color:var(--auf-dunkel-klar); text-decoration:none; font-size:var(--txt-12); font-weight:600;
}
.handyleiste a:last-child{ background:var(--gold); color:var(--tinte); }
.handyleiste svg{ width:20px; height:20px; }
@media (max-width:767px){
  .handyleiste{ display:grid; }
  body{ padding-bottom:var(--raum-64); }
}

/* ---------- Kino-Effekt (nur Desktop) ---------- */
.auftritt{ opacity:0; transform:translateY(26px); }
@media (min-width:768px){
  .auftritt{ transition:opacity var(--dauer-kino) var(--weich), transform var(--dauer-kino) var(--weich); }
  .auftritt.da{ opacity:1; transform:none; }
  .auftritt--spaet{ transition-delay:.12s; }
  .auftritt--spaeter{ transition-delay:.24s; }
}
/* Handy: ruhig - Inhalte sind sofort da, keine Scroll-Choreografie */
@media (max-width:767px){
  .auftritt{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .auftritt{ opacity:1 !important; transform:none !important; }
}

/* ---------- Kleinigkeiten ---------- */
.nurlesen{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.sprungmarke{
  position:absolute; left:-9999px; top:0; z-index:var(--ebene-dialog);
  background:var(--tinte); color:var(--weiss); padding:var(--raum-12) var(--raum-18); border-radius:0 0 var(--rad-10) 0;
}
.sprungmarke:focus{ left:0; }

/* ==================================================================
   Rechner und Pakete (29.08.2026)
   ------------------------------------------------------------------
   Fuer die Seiten finanzierung.html und garantie.html. Der Kunde soll
   selbst schieben duerfen: wer die Rate mit eigenen Zahlen entstehen
   sieht, glaubt ihr mehr als einer fertig hingeschriebenen "ab 199 EUR".
   Bausteine folgen dem Haus-System (Tokens, Zeichen statt nur Farbe).
   ================================================================== */

.rechner{
  background:var(--karte); border:1px solid var(--linie);
  border-radius:var(--radius-gross); padding:var(--raum-26) var(--raum-24);
}
@media (min-width:768px){
  .rechner{ display:grid; grid-template-columns:1fr 300px; gap:var(--raum-34); align-items:start; }
}

.regler-satz{ margin:0 0 var(--raum-22); }
.regler-satz:last-child{ margin-bottom:0; }
.regler-kopf{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--raum-12); margin-bottom:var(--raum-8);
}
/* Die Beschriftung stand 192 x 24 px - ein Tipp daneben traf nichts. Volle
   Fingerhoehe, ohne dass sich die Zeile sichtbar veraendert (Runde 10). */
.regler-kopf label{
  font-weight:700; font-size:var(--txt-15);
  display:inline-flex; align-items:center; min-height:var(--tipp);
}
.regler-wert{
  font-family:var(--schrift-zahl); font-weight:600; font-size:var(--txt-17);
  font-variant-numeric:tabular-nums; color:var(--tinte);
}
/* Die sichtbare Bahn bleibt schmal, die Bedienflaeche nicht: gemessen
   waren es 6 px Hoehe gegen das Mindestmass 24 px (WCAG 2.5.8). Der
   durchsichtige Rahmen zaehlt zur Trefferflaeche, ohne dass die Bahn
   dicker aussieht (Befund 27.09.2026). Seit Runde 10 volle Fingerhoehe:
   6 px Bahn + 2 x 18 px durchsichtiger Rand + 2 px Rahmen = 44 px
   (vorher 290 x 28). */
.regler{
  -webkit-appearance:none; appearance:none; width:100%; height:6px;
  box-sizing:content-box; padding-block:var(--raum-18);
  background:var(--papier-tief); background-clip:content-box;
  border-radius:var(--rad-rund);
  border:1px solid var(--linie); border-block-color:transparent; outline:none;
}
.regler::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:26px; height:26px;
  border-radius:var(--rad-kreis); background:var(--gold); border:2px solid var(--tinte);
  cursor:pointer;
}
.regler::-moz-range-thumb{
  width:26px; height:26px; border-radius:var(--rad-kreis);
  background:var(--gold); border:2px solid var(--tinte); cursor:pointer;
}
.regler:focus-visible{
  outline:var(--fokus-breite) solid var(--fokus-kern); outline-offset:var(--fokus-abstand);
  box-shadow:0 0 0 calc(var(--fokus-abstand) + var(--fokus-breite) * 2) var(--fokus-hof);
}
.regler-skala{
  display:flex; justify-content:space-between; margin-top:var(--raum-6);
  font-family:var(--schrift-zahl); font-size:var(--txt-12);
  letter-spacing:var(--sperr-6); color:var(--tinte-leise);
}

/* Ergebnisfeld - die Rate ist die einzige grosse Zahl der Seite. */
.rate-feld{
  background:var(--tinte); color:var(--fg);
  border-radius:var(--radius-gross); padding:var(--raum-24) var(--raum-22); text-align:center;
}
.rate-feld .rate-label{
  font-family:var(--schrift-zahl); font-size:var(--txt-12); letter-spacing:var(--sperr-14);
  text-transform:uppercase; color:color-mix(in srgb, var(--fg) 62%, transparent);
  margin:0 0 var(--raum-8);
}
.rate-feld .rate-zahl{
  font-family:var(--schrift-plakat); font-size:var(--txt-46); line-height:var(--zeile-100);
  color:var(--gold-hell); font-variant-numeric:tabular-nums; margin:0;
}
.rate-feld .rate-zusatz{
  font-size:var(--txt-13); line-height:var(--zeile-150); margin:var(--raum-12) 0 0;
  color:color-mix(in srgb, var(--fg) 76%, transparent);
}
.rate-feld .rate-zusatz b{ color:var(--fg); }
.rate-feld--leer .rate-zahl{ font-size:var(--txt-18); font-family:var(--schrift-text); color:var(--fg); }

/* Pflichtangaben nach PAngV - bewusst nuechtern, nicht versteckt. */
.pflichttext{
  margin-top:var(--raum-18); padding:var(--raum-16) var(--raum-18);
  background:var(--papier-tief); border:1px solid var(--linie);
  border-radius:var(--radius-gross);
  font-size:var(--txt-13); line-height:1.65; color:var(--tinte-weich);
}
.pflichttext b{ color:var(--tinte); }

/* Paketkarten (Garantie) */
.pakete{ display:grid; gap:var(--raum-16); }
@media (min-width:768px){ .pakete{ grid-template-columns:repeat(3,1fr); } }
.paket{
  background:var(--karte); border:1px solid var(--linie);
  border-radius:var(--radius-gross); padding:var(--raum-24) var(--raum-22);
  display:flex; flex-direction:column;
  /* Raster- und Flexkinder bekommen von sich aus min-width:auto und koennen
     damit nicht unter ihre Mindestbreite schrumpfen. Auf garantie.html hat
     das die ganze Seite bei 320 px um 4 px quer geschoben (gemessen: Karte
     306 px in einer 284-px-Spalte). */
  min-width:0;
}
.paket--haupt{ border:2px solid var(--gold); position:relative; }
.paket-fahne{
  position:absolute; top:-11px; left:22px;
  background:var(--gold); color:var(--tinte);
  font-family:var(--schrift-zahl); font-size:var(--txt-12); font-weight:700;
  letter-spacing:var(--sperr-12); text-transform:uppercase; padding:var(--raum-4) var(--raum-10); border-radius:var(--rad-rund);
}
.paket h3{ margin:0 0 var(--raum-4); font-size:var(--txt-18); }
.paket-dauer{
  font-family:var(--schrift-zahl); font-size:var(--txt-12); letter-spacing:var(--sperr-8);
  text-transform:uppercase; color:var(--tinte-leise); margin:0 0 var(--raum-16);
}
.paket-preis{
  font-family:var(--schrift-plakat); font-size:var(--txt-26);
  margin:0 0 var(--raum-4); line-height:var(--zeile-110);
}
.paket-preis small{ font-family:var(--schrift-text); font-size:var(--txt-12); font-weight:400; color:var(--tinte-leise); }

/* --- Rate-Varianten auf der Fahrzeugseite (29.08.2026) ------------------
   Drei schmale Zeilen im dunklen Preisfeld, nicht drei Karten: die
   Seitenspalte ist rund 400 px breit, Karten wuerden dort zu Streifen
   zerquetscht. Die empfohlene Variante traegt einen goldenen Rand -
   dieselbe Sprache wie das hervorgehobene Garantiepaket. */
.rr-art{ display:grid; grid-template-columns:1fr 1fr; gap:var(--raum-6); margin:var(--raum-2) 0 var(--raum-12); }
.rr-art[hidden]{ display:none; }
.rr-art-knopf{
  cursor:pointer; font:inherit; font-size:var(--txt-12); font-weight:600; padding:var(--raum-8) var(--raum-6);
  background:var(--licht-5); border:1px solid var(--licht-16);
  border-radius:var(--rad-10); color:var(--auf-dunkel-78);
  /* 146 x 37 px gemessen (Befund 18) - sieben Pixel fehlten auf 44. */
  min-height:44px;
}
.rr-art-knopf:hover{ border-color:rgba(236,216,23,.5); }
.rr-art-knopf[aria-pressed="true"]{ background:var(--gold); border-color:var(--gold); color:var(--tinte); }
.rr-pakete{ margin-top:var(--raum-14); display:grid; gap:var(--raum-8); }
.rr-pakete[hidden]{ display:none; }   /* [hidden] verliert sonst gegen display:grid */
.rr-paket{
  text-align:left; width:100%; cursor:pointer;
  background:var(--licht-5); border:1px solid var(--licht-16);
  border-radius:var(--rad-12); padding:var(--raum-12) var(--raum-12); color:inherit; font:inherit;
}
.rr-paket:hover{ border-color:rgba(255,255,255,.34); }
.rr-paket[aria-pressed="true"]{ border-color:var(--gold); background:rgba(236,216,23,.12); }
/* Die Empfehlung traegt als einzige Karte Gold - der Hover-Zustand der
   anderen darf ihr deshalb nicht aehnlich sehen. */
.rr-paket--tipp{ border-color:var(--gold); }
.rr-paket--tipp:hover{ border-color:var(--gold); }
.rr-paket-kopf{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--raum-10); }
.rr-paket-name{ font-size:var(--txt-13); font-weight:600; letter-spacing:var(--sperr-2); }
.rr-paket-rate{ font-size:var(--txt-17); font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rr-paket-liste{ margin:var(--raum-6) 0 0; padding:0; list-style:none; }
.rr-paket-liste li{
  font-size:var(--txt-12); line-height:var(--zeile-150); color:var(--auf-dunkel-72);
  padding-left:var(--raum-12); position:relative;
}
.rr-paket-liste li::before{ content:"·"; position:absolute; left:3px; color:var(--gold-tief); font-weight:700; }
.rr-paket-marke{
  display:inline-block; margin-top:var(--raum-4); padding:var(--raum-2) var(--raum-8); border-radius:var(--rad-20);
  background:var(--gold); color:var(--tinte); font-size:var(--txt-12); font-weight:800;
  letter-spacing:var(--sperr-8); text-transform:uppercase;
}
.rr-paket-hinweis{ margin:var(--raum-8) 0 0; font-size:var(--txt-12); line-height:var(--zeile-150); color:rgba(242,239,230,.6); }

/* --- Versicherungsrechner (29.08.2026) ---------------------------------
   Zwei Regler ueber drei Karten. Die Rechnung steht IN der Karte, damit
   Leistung und Produkt zusammenbleiben - eine Tabelle daneben wuerde die
   Zuordnung wieder aufloesen. */
.vers-rechner{
  margin-top:var(--raum-24); padding:var(--raum-22) var(--raum-24);
  background:var(--papier-tief); border:1px solid var(--linie);
  border-radius:var(--radius-gross);
}
.paket-unter{
  margin:0 0 var(--raum-12); font-size:var(--txt-12); line-height:var(--zeile-150); color:var(--tinte-leise);
}
.paket-unter em{ font-style:normal; opacity:.85; }
.paket-mtl{ font-family:var(--schrift-text); font-size:var(--txt-13); font-weight:500; color:var(--tinte-leise); }
.vers-rechnung{ margin-top:auto; padding-top:var(--raum-14); border-top:1px solid var(--linie); }
.vers-zeile{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--raum-14);
  margin:0 0 var(--raum-8); font-size:var(--txt-14); line-height:var(--zeile-145);
}
/* Die Beschriftung darf schrumpfen und lange Woerter umbrechen. Ohne das
   haelt das laengste Wort der Zeile ("Wiederbeschaffungswert", 180 px) die
   ganze Karte auf 306 px auf - bei 320 px Fensterbreite scrollt dann die
   komplette Seite 4 px zur Seite. Der Betrag rechts bleibt unzertrennt
   (white-space:nowrap eine Zeile weiter). */
.vers-zeile span{ color:var(--tinte-weich); min-width:0; overflow-wrap:anywhere; }
.vers-zeile b{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.vers-zeile--summe{
  margin-top:var(--raum-10); padding-top:var(--raum-8); border-top:1px solid var(--linie);
  font-size:var(--txt-15);
}
.vers-zeile--summe b{ color:var(--gold-tief); font-size:var(--txt-17); }
.vers-fuss{ margin:var(--raum-12) 0 0; font-size:var(--txt-12); line-height:var(--zeile-155); color:var(--tinte-leise); }
.paket ul{ list-style:none; padding:0; margin:var(--raum-16) 0 0; font-size:var(--txt-14); }
.paket li{ padding:var(--raum-8) 0 var(--raum-8) var(--raum-24); position:relative; border-top:1px solid var(--linie); }
.paket li:first-child{ border-top:0; }
.paket li::before{ content:'✔'; position:absolute; left:0; color:var(--gut); font-weight:700; }
.paket li.ohne{ color:var(--tinte-leise); }
.paket li.ohne::before{ content:'✕'; color:var(--achtung); }

/* Vergleichstabellen ohne Kartenfassung (29.08.2026).
   Die Haus-Tabellen blenden sich unter 780px aus und zeigen stattdessen
   .vgl-karten. Wo es diese Karten nicht gibt - Finanzierung, Garantie -
   waere die Tabelle auf dem Handy schlicht verschwunden. Sie bleibt
   deshalb sichtbar und wird wischbar; der Hinweis sagt das auch, sonst
   sieht niemand, dass rechts noch etwas steht. */
@media (max-width:767px){
  .vgl-tabelle-huelle--wisch{ display:block; }
  .vgl-tabelle-huelle--wisch::after{
    content:'→ seitlich wischen für alle Spalten';
    display:block; padding:var(--raum-8) var(--raum-14);
    font-family:var(--schrift-zahl); font-size:var(--txt-12);
    letter-spacing:var(--sperr-8); color:var(--tinte-leise);
    border-top:1px solid var(--linie); background:var(--papier-tief);
  }
  .vgl-tabelle-huelle--wisch .vgl-tabelle{ min-width:640px; }
}

/* ---------- Druck: nichts Farbiges aufs Papier ----------
   Auf Papier zaehlt Lesbarkeit, nicht Hausfarbe. Das gelbe Zeichen wird
   auf jedem Schwarz-Weiss-Drucker zu einem blassen Grau - deshalb geht
   die einfarbige Fassung des Logos in den Druck. */
@media print {
  .marke img[src$="logo-bm.svg"]{ content: url("../images/logo-bm-sw.svg"); }
  .marke img[src$="logo-bm-invers.svg"]{ content: url("../images/logo-bm-sw.svg"); }
}

/* ---------- Sprungnavigation im Kopf ----------
   Die Seite ist lang; ohne Wegweiser oben muss man scrollen und raten.
   Der aktive Punkt wird beim Scrollen gesetzt (siehe js/bm.js). */
.kopf-navi{ display:flex; align-items:center; gap:var(--raum-4); margin-left:auto; margin-right:var(--raum-8); }
.kopf-navi a{
  position:relative; padding:var(--raum-8) var(--raum-12); border-radius:var(--rad-8);
  font:600 var(--txt-14)/1 var(--schrift-text); color:var(--tinte); text-decoration:none;
  white-space:nowrap; opacity:.72; transition:opacity var(--dauer-sm) var(--weich), background var(--dauer-sm) var(--weich);
}
.kopf-navi a:hover{ opacity:1; background:color-mix(in srgb, var(--tinte) 6%, transparent); }
.kopf-navi a.hier{ opacity:1; }
.kopf-navi a.hier::after{
  content:''; position:absolute; left:13px; right:13px; bottom:3px;
  height:2px; border-radius:var(--rad-2); background:var(--gold);
}

/* Aufklapp-Reiter im Kopf ("Team" -> Offene Stellen, 20.09.2026):
   oeffnet bei Maus, Tastatur (focus-within) und Klick (Klasse .offen). */
.navi-gruppe{ position:relative; }
.navi-reiter{
  display:inline-flex; align-items:center; gap:var(--raum-4); padding:var(--raum-8) var(--raum-12); border:0; border-radius:var(--rad-8);
  background:transparent; font:600 var(--txt-14)/1 var(--schrift-text); color:var(--tinte); cursor:pointer;
  white-space:nowrap; opacity:.72; transition:opacity var(--dauer-sm) var(--weich), background var(--dauer-sm) var(--weich);
}
.navi-reiter svg{ transition:transform var(--dauer-sm) var(--weich); }
.navi-gruppe:hover .navi-reiter, .navi-gruppe:focus-within .navi-reiter, .navi-gruppe.offen .navi-reiter{
  opacity:1; background:color-mix(in srgb, var(--tinte) 6%, transparent);
}
.navi-gruppe:hover .navi-reiter svg, .navi-gruppe:focus-within .navi-reiter svg, .navi-gruppe.offen .navi-reiter svg{ transform:rotate(180deg); }
.navi-menue{
  position:absolute; left:0; top:calc(100% + 6px); min-width:190px; padding:var(--raum-6);
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--rad-10);
  box-shadow:var(--schatten-menue);
  opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity var(--dauer-sm) var(--weich), transform var(--dauer-sm) var(--weich);
}
.navi-gruppe:hover .navi-menue, .navi-gruppe:focus-within .navi-menue, .navi-gruppe.offen .navi-menue{
  opacity:1; transform:none; pointer-events:auto;
}
.kopf-navi .navi-menue a{ display:block; opacity:1; padding:var(--raum-8) var(--raum-12); }
@media (prefers-reduced-motion:reduce){ .navi-reiter svg, .navi-menue{ transition:none; } }

/* Ab hier wird es eng: Telefonnummer weicht, die Wege bleiben. */
@media (max-width:1279px){
  .kopf-tel span{ display:none; }
  .kopf-tel{ padding:0 var(--raum-12); }
}
@media (max-width:1023px){
  .kopf-navi{ display:none; }
}

/* ---------- Nachbesserungen zur Sprungnavigation ---------- */

/* Die Navigation nimmt Platz; ohne das hier bricht "Termin anfragen"
   auf drei Zeilen und der Knopf sieht aus wie ein Unfall. */
.kopf .knopf{ white-space:nowrap; }

/* =========================================================================
   BEWEGUNG - Nachtrag
   Sechs Stellen, an denen bisher etwas sprang. Alles unter 300 ms ausser
   dem Erfolgsmoment; nur transform und opacity, damit die Grafikkarte
   arbeitet und nicht das Layout.
   ========================================================================= */

@keyframes danke-auf{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}

/* 2. Aufklappende Fragen auf den Garantie- und Finanzierungsseiten.
   Schnappten bisher auf. Der neue Weg braucht keine Hoehenrechnerei per
   JavaScript - der Browser kann das inzwischen selbst. Wo er es noch
   nicht kann, bleibt es wie vorher: es klappt auf, nur ohne Uebergang. */
details{ interpolate-size:allow-keywords; }
details::details-content{
  block-size:0; overflow:clip;
  transition:block-size var(--dauer-md) var(--weich), content-visibility var(--dauer-md) allow-discrete;
  transition-behavior:allow-discrete;
}
details[open]::details-content{ block-size:auto; }
details > summary{ transition:color var(--dauer-sm) var(--weich); }

/* 3. Druckgefuehl auf Knoepfen.
   Der bisherige :active-Zustand setzte nur den Hover zurueck. Das hier
   ist bewusst winzig - bei einem Knopf, den man taeglich mehrfach
   drueckt, soll man die Bewegung spueren und nicht sehen. */
.knopf:active{ transform:scale(.978); }
.knopf{ transition:transform var(--dauer-xs) var(--weich), box-shadow var(--dauer-sm) var(--weich),
        background var(--dauer-sm) var(--weich), border-color var(--dauer-sm) var(--weich); }
.pille:active, .rr-paket:active, .dt-vorschau:active, .kopf-navi a:active{
  transform:scale(.985);
}

/* 5. Fahrzeugliste beim Filtern.
   Beim ersten Aufbau der Seite darf das Einblenden Zeit lassen - da
   schaut man. Beim Filtern wartet man auf ein Ergebnis; dieselbe
   Dauer fuehlt sich dort traege an. */
@media (min-width:768px){
  #bestandRaster.filtert .auftritt{
    transition-duration:.25s;
    transition-delay:calc(var(--nr, 0) * 40ms);
  }
}

/* ---------- Terminanfrage (Startseite #termin, 20.09.2026) ----------
   Nur neue Klassen; Formularfelder nutzen .formular/.feld wie der Ankauf. */
.termin-raster{ display:grid; gap:clamp(var(--raum-26),4vw,var(--raum-54)); grid-template-columns:1fr; align-items:start; }
@media (min-width:1024px){ .termin-raster{ grid-template-columns:1fr 1fr; } }
.termin-raster .ankauf-punkte svg{ color:var(--gold); }
.wahl-gruppe{ border:0; margin:0; padding:0; min-width:0; }
.wahl-gruppe legend{
  font-family:var(--schrift-zahl); font-size:var(--txt-12); letter-spacing:var(--sperr-12);
  text-transform:uppercase; color:var(--tinte-leise); padding:0; margin-bottom:var(--raum-6);
}
.wahl-chips{ display:flex; flex-wrap:wrap; gap:var(--raum-8); }
.wahl-chip{ position:relative; cursor:pointer; }
.wahl-chip input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.wahl-chip span{
  display:inline-flex; align-items:center; min-height:44px; padding:var(--raum-10) var(--raum-16);
  border:1px solid var(--linie); border-radius:var(--rad-rund); background:var(--papier);
  font-size:var(--txt-14); font-weight:600; color:var(--tinte); transition:background var(--dauer-xs), color var(--dauer-xs), border-color var(--dauer-xs);
}
.wahl-chip:hover span{ border-color:var(--tinte); }
.wahl-chip input:checked + span{ background:var(--tinte); color:var(--auf-dunkel); border-color:var(--tinte); }
.wahl-chip input:focus-visible + span{
  outline:var(--fokus-breite) solid var(--fokus-kern); outline-offset:var(--fokus-abstand);
  box-shadow:0 0 0 calc(var(--fokus-abstand) + var(--fokus-breite) * 2) var(--fokus-hof);
}
.termin-hinweis{ margin:0; font-size:var(--txt-13); color:var(--tinte-weich); }

/* ==========================================================================
   3. SANDSCHICHT - Hausfarben, Fahrzeugseite, Bestand, Vergleich
   (frueher css/bm-sand.css - steht bewusst NACH Abschnitt 2)
   ========================================================================== */
/* =========================================================================
   SANDSCHICHT - waermere Palette fuer die Kundenwebseite
   =========================================================================
   Auftrag: mehr Farbe, Richtung Braun, Bronze, Sand.

   Ausgangslage: die Seite lief auf kuehlem Papier mit genau einer Farbe,
   dem Logo-Gelb. Das ist sauber, aber karg - alles ausser dem Gelb war
   grau. Hier kommt eine zweite Familie dazu: Sand als Grund, Bronze als
   Begleiter. Das Gelb bleibt, was es ist - das Signal, das nur dort steht,
   wo etwas passieren soll.

   Warum Bronze und nicht ein zweiter bunter Akzent: Bronze liegt im selben
   Farbwinkel wie das Gelb, nur tiefer und ruhiger. Es wirkt wie derselbe
   Ton bei weniger Licht, nicht wie eine Fremdfarbe daneben.
   ========================================================================= */

body{ background:var(--papier); }

/* ---------- Bronze uebernimmt, wo bisher gedaempftes Gelb stand ----------
   Die abgedunkelte Gelbfassung war ein Kompromiss: Gelb, das auf hellem
   Grund lesbar sein musste, und dabei olivfarben wurde. Bronze macht
   denselben Dienst, sieht aber wie eine gewollte Farbe aus. */
/* ".recht a" traf bis zum 26.09.2026 auch die Goldknoepfe auf sieben
   Unterseiten: die Beschriftung wurde bronze statt dunkel und fiel damit
   von 11,42:1 auf 4,35:1. Knoepfe sind keine Textlinks - sie sind hier
   ausgenommen. */
.blick, .beweis-nr, .adm-monat, .vgl-zeile--wir b, .wagen-pfeil,
.dt-liste li::before, .recht a:not(.knopf):not(.btn), .beweis-mehr, .versprechen-teil svg,
.hero h1 .gold, .zahl b{
  color:var(--bronze);
}
.beweis::before{ background:linear-gradient(180deg, var(--bronze-hell), transparent); }

/* ---------- Flaechen bekommen einen warmen Rand ---------- */
.wagen, .karte, .beweis, .formular, .versprechen-teil, .zahl, .vgl-tabelle-huelle{
  border-color:var(--linie);
  box-shadow:var(--schatten-weich);
}
.wagen:hover{
  border-color:var(--bronze-hell);
  box-shadow:0 26px 46px -26px rgba(60,42,16,.46);
}

/* ---------- Tabelle: die eigene Spalte in Sand, nicht in Gelb ----------
   Der gelbe Schleier ueber der ganzen Spalte nahm dem Kopf die Wirkung.
   Jetzt traegt nur der Kopf das Gelb, die Spalte einen ruhigen Sandton. */
.vgl-wir{ background:var(--gold-vergleich); }
thead .vgl-wir{ background:var(--gold); color:var(--tinte); }
.vgl-tabelle th, .vgl-tabelle td{ border-color:var(--linie); }

/* ---------- Formulare ---------- */
.feld input, .feld select, .feld textarea, .werkzeugleiste select{
  background:var(--karte); border-color:var(--linie-bedienelement); color:var(--tinte);
}
.feld input:focus, .feld select:focus, .feld textarea:focus{
  border-color:var(--bronze-hell); background:var(--weiss);
}

/* ---------- Kopf und Wege ---------- */
.kopf{ background:color-mix(in srgb, var(--papier) 88%, transparent); }
.kopf.geklebt{ background:color-mix(in srgb, var(--papier) 96%, transparent); }
.kopf-navi a.hier::after{ background:var(--bronze); }
.kopf-tel:hover{ border-color:var(--bronze-hell); }

/* ---------- Dunkle Abschnitte: Espresso statt Russ ----------
   Das fast-schwarze Braun haelt die Verbindung zur Schriftfarbe und
   wirkt neben Sand waermer als ein neutrales Dunkelgrau. */
.block--tinte, .fokus, .fuss, .handyleiste, .dt-preisfeld, .rate-feld,
.hero-marke, .dt-chip{
  background:var(--tinte-tief);
}
.fuss a:hover{ color:var(--gold); }

/* =========================================================================
   FAHRZEUGSEITE - Preis und Rate als zwei Zahlen, Prüfungen auf einen Blick
   =========================================================================
   Vorbild ist die Anordnung guter Fahrzeugbörsen: der Kaufpreis ist die
   größte Zahl, die Monatsrate steht als eigene Fläche darunter statt als
   Kleingedrucktes daneben. Viele Käufer rechnen in Raten - dann ist die
   Rate der zweite Preis und kein Fußnotentext.
   ========================================================================= */

.dt-ratenfeld{
  display:grid; gap:var(--raum-2); width:100%; margin:var(--raum-14) 0 var(--raum-4);
  padding:var(--raum-14) var(--raum-16) var(--raum-12); text-align:left; cursor:pointer;
  background:var(--licht-7);
  border:1px solid var(--licht-16); border-radius:var(--rad-14);
  color:var(--auf-dunkel); font-family:inherit;
  transition:background var(--dauer-sm) var(--weich), border-color var(--dauer-sm) var(--weich), transform var(--dauer-xs) var(--weich);
}
.dt-ratenfeld:active{ transform:scale(.99); }
/* Sichtbarer Tastaturfokus (Befund 28.09.2026: 1,00:1 - der Knopf war mit
   der Tastatur erreichbar, aber nicht zu sehen). */
.dt-ratenfeld:focus-visible{ outline:var(--rahmen-kante) solid var(--gold); outline-offset:var(--raum-2); }
.dt-ratenfeld-label{
  font-size:var(--txt-12); letter-spacing:var(--sperr-9); text-transform:uppercase;
  color:rgba(242,239,230,.62);
}
.dt-ratenfeld-wert{
  font-family:var(--schrift-titel); font-size:var(--txt-27); line-height:var(--zeile-110);
  color:var(--gold); font-variant-numeric:tabular-nums;
}
/* Schlussrate direkt unter der Ab-Rate (Inhaber Q9 a, 29.09.2026): gleiche
   helle Schrift wie das Feld, nicht kleingedruckt - sie gehoert zur Aussage
   der Rate, nicht in die Fussnote. */
.dt-ratenfeld-schluss{
  font-size:var(--txt-14); font-weight:600; color:var(--auf-dunkel);
  font-variant-numeric:tabular-nums;
}
.dt-ratenfeld-mehr{
  font-size:var(--txt-13); font-weight:600; color:var(--auf-dunkel-78);
}
.dt-ratenfeld-mehr::after{ content:' →'; }

/* Prüfungen: zwei Spalten, Haken statt Aufzählungspunkte. Sie standen
   bisher an drei Stellen der Seite verteilt. */
/* Zulaufwagen: die Pruefliste ist eine Zusage. Der Vorspann sagt das in
   Worten, statt des Hakens steht ein leerer Kreis - sichtbar anders als
   bei einem Auto, das der Kfz-Meister schon gesehen hat (Auflage
   27.09.2026). Doppelte Klasse, weil .dt-geprueft li::before weiter unten
   noch einmal gesetzt wird. */
.dt-geprueft-zulauf{ margin:0 0 var(--raum-8); font-size:var(--txt-14); font-weight:600; color:var(--tinte); }
/* Der Vorspann steht in der dunklen Seitenspalte - mit Tinte war er Tinte
   auf Tinte (1,00:1, auf 8 von 8 Zulaufseiten unsichtbar, 28.09.2026). */
.dt-seitenrest .dt-geprueft-zulauf{ color:var(--auf-dunkel); }
.dt-geprueft.dt-geprueft--zusage li::before{ content:'○'; color:var(--gold-700); }
.dt-geprueft{
  list-style:none; margin:var(--raum-16) 0 0; padding:var(--raum-14) 0 0;
  border-top:1px solid var(--licht-12);
  display:grid; grid-template-columns:1fr 1fr; gap:var(--raum-8) var(--raum-16);
}
.dt-geprueft li{
  position:relative; padding-left:var(--raum-20);
  font-size:var(--txt-13); line-height:var(--zeile-135); color:rgba(242,239,230,.82);
}
.dt-geprueft li::before{
  content:'✓'; position:absolute; left:0; top:0;
  color:var(--gold); font-weight:700;
  color:var(--gold);
}
@media (max-width:479px){
  .dt-geprueft{ grid-template-columns:1fr; }
}

/* =========================================================================
   FAHRZEUGSEITE - Buehne statt Kastensammlung
   =========================================================================
   Gemessen: 55 umrandete Elemente auf einer Seite. Jeder Rahmen ist eine
   Linie, die das Auge stoppt - bei 55 Stueck wirkt die Seite zerhackt,
   egal wie gut der Inhalt ist. Rahmen bleiben nur dort, wo sie wirklich
   zwei Dinge trennen; sonst arbeiten Flaeche und Abstand.
   ========================================================================= */

/* --- Der Name des Wagens ist die Ansage, nicht der Preis ---
   Beide standen bei 52 und 45 Pixeln fast gleich gross da. Wer auf die
   Seite kommt, will erst wissen WAS, dann WAS ES KOSTET. */
.dt-seite h1{
  font-size:var(--txt-fahrzeug-h1); line-height:.94;
  letter-spacing:-.035em; margin:0 0 var(--raum-6); text-wrap:balance;
}
.dt-untertitel{ font-size:var(--txt-16); color:var(--tinte-weich); margin:0 0 var(--raum-26); }

/* --- Das Foto bekommt Buehne ---
   Es ist das Einzige auf der Seite, das man nicht lesen muss. Statt
   53 Prozent Breite laeuft es bis an den Rand der Inhaltsspalte und
   darueber hinaus, mit tiefem, warmem Schatten statt Rahmen. */
.dt-galerie{
  border:0; border-radius:var(--rad-20); overflow:hidden;
  box-shadow:var(--schatten-bild);
}
.dt-galerie img{ border-radius:0; }

/* --- Datenleiste ohne Gitter ---
   Die technischen Werte standen in einem Kasten mit Trennlinien in beide
   Richtungen. Jetzt reine Flaeche, Werte durch Abstand getrennt. */
.dt-daten{
  border:0; border-radius:var(--rad-16); background:var(--papier-tief);
  padding:var(--raum-22) var(--raum-24);
}
.dt-daten > div{ border:0; }
.dt-daten dt, .dt-daten .dt-label{
  font-size:var(--txt-12); letter-spacing:var(--sperr-10); text-transform:uppercase;
  color:var(--tinte-leise);
}
.dt-daten dd, .dt-daten .dt-wert{
  font-family:var(--schrift-titel); font-size:var(--txt-16);
  letter-spacing:var(--sperr-minus-1-5); margin:var(--raum-2) 0 0;
}

/* --- Ausstattung: Haken ohne Kasten --- */
.dt-liste li{ border:0; }
.dt-block{ border:0; }

/* --- Ueberschriften mit gelbem Marker, aber ruhiger --- */
.dt-ueberschrift{
  font-size:var(--txt-abschnitt); letter-spacing:var(--sperr-minus-2);
  margin:0 0 var(--raum-14);
}

/* --- Mehr Buehne fuer das Foto ---
   Die Galerie nutzte 53 Prozent der Fensterbreite, die Preisspalte den
   Rest. Auf einer Fahrzeugseite ist das Auto aber das Argument: es
   bekommt Platz, die Spalte daneben wird so schmal, wie ihr Inhalt
   braucht (Preis, Rate, Knoepfe passen in 320 px). */

/* =========================================================================
   FAHRZEUGKARTE - Titel und Preis oben, Auto in der Mitte, Werte unten
   =========================================================================
   Vorbild ist die Bestandsuebersicht aus dem gezeigten Beispiel: der
   Kunde liest zuerst was es ist und was es kostet, sieht dann das Auto,
   und findet darunter die drei Zahlen, nach denen er ohnehin fragt.
   Vorher standen neun Angaben gleich laut untereinander, das Bild bekam
   ein Drittel der Kachel.
   ========================================================================= */
.wagen{
  display:flex; flex-direction:column; gap:0;
  border:0; border-radius:var(--rad-18); overflow:hidden;
  background:var(--karte);
  box-shadow:var(--schatten-karte);
  transition:transform var(--dauer-md) var(--weich), box-shadow var(--dauer-md) var(--weich);
}
.wagen:hover{
  transform:translateY(-3px);
  box-shadow:var(--schatten-karte-hoch);
}

.wagen-kopf{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--raum-14);
  padding:var(--raum-16) var(--raum-18) var(--raum-12);
}
.wagen-kopf-text{ min-width:0; }
.wagen-titel{
  font-family:var(--schrift-titel); font-size:var(--txt-16); letter-spacing:var(--sperr-minus-1-5);
  margin:0 0 var(--raum-4); line-height:var(--zeile-120);
}
.wagen-unter{
  font-size:var(--txt-12); color:var(--tinte-leise); margin:0; line-height:var(--zeile-135);
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.wagen-kopf-preis{ text-align:right; flex:0 0 auto; }
.wagen-preis{
  font-family:var(--schrift-titel); font-size:var(--txt-18); letter-spacing:var(--sperr-minus-2);
  line-height:var(--zeile-110); font-variant-numeric:tabular-nums;
}
.wagen-mtl{ font-size:var(--txt-12); color:var(--bronze); margin-top:var(--raum-2); white-space:nowrap; }

.wagen-bild{ position:relative; margin:0 var(--raum-12); border-radius:var(--rad-12); overflow:hidden;
  background:var(--papier-tief); }
.wagen-bild img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }

/* Die drei Zahlen, nach denen jeder als Erstes fragt. Wert oben, Bezeichnung
   klein darunter - beim Ueberfliegen zaehlt die Zahl, nicht das Wort. */
.wagen-werte{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--raum-8);
  padding:var(--raum-14) var(--raum-18) var(--raum-16);
}
.wagen-werte div{ min-width:0; }
.wagen-werte b{
  display:block; font-size:var(--txt-14); font-weight:700; letter-spacing:var(--sperr-minus-1);
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Runde 10: 13 px in normaler Schreibung statt 10 px in Versalien. Die
   Kennwerte stehen zwei mal zwei - bei 320 px ist eine Spalte 123 px breit,
   "ERSTZULASSUNG" in Versalien mit Sperrung passt dort bei 13 px nicht
   mehr, in normaler Schreibung schon. Zeilenhoehe 1.3 statt der geerbten
   1.6: sonst waechst jede Kennwert-Zeile um 5 px und die Karte um 10 px. */
.wagen-werte span{
  display:block; font-size:var(--txt-13); line-height:var(--zeile-130); letter-spacing:0; text-transform:none;
  color:var(--tinte-leise); margin-top:var(--raum-2);
}
/* Pflichthinweis zum 30-Tage-Tiefstpreis: 12 px (vorher 11), damit er bei
   320 px nicht auf eine weitere Zeile rutscht und die Karte streckt. */
.wagen-senkung{
  margin:0; padding:0 var(--raum-18) var(--raum-16); font-size:var(--txt-12); color:var(--tinte-leise); line-height:var(--zeile-145);
}

/* =========================================================================
   BESTAND - Filter links, Ergebnis rechts
   =========================================================================
   Die Filterleiste stand oben und verschwand beim Scrollen. Wer nach zehn
   Autos nachfiltern wollte, musste zurueckrollen. Links stehend bleibt sie
   im Blick, und man sieht Filter und Ergebnis gleichzeitig.
   ========================================================================= */
@media (min-width:1024px){
  #bestand .spalte{
    display:grid; gap:0 clamp(var(--raum-24),3vw,var(--raum-44));
    grid-template-columns:236px minmax(0,1fr);
    grid-template-areas:
      "kopf   kopf"
      "filter raster"
      "filter mehr";
    align-items:start;
  }
  #bestand .block-kopf{ grid-area:kopf; }
  #bestand .werkzeugleiste{
    grid-area:filter; position:sticky; top:96px;
    display:grid; gap:var(--raum-8); margin:0;
    padding:var(--raum-18); border-radius:var(--rad-16); background:var(--karte);
    border:1px solid var(--linie);
  }
  #bestand .werkzeugleiste select{ width:100%; }
  #bestand #bestandRaster{ grid-area:raster; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); }
  #bestand .mehr-huelle, #bestand .zentriert{ grid-area:mehr; }
}

/* Die Grundflaeche eine Spur heller: die Autos sollen das Einzige sein,
   was auf der Seite Farbe hat. */

/* =========================================================================
   FAHRZEUGSEITE - eine Sprache statt zwei
   =========================================================================
   Die Seite hatte einen hellen und einen dunklen Teil nebeneinander:
   Galerie, Daten und Ausstattung auf Papier, direkt daneben Preisfeld,
   Rechner, Pakete und Formular in Dunkelbraun. Das liest sich wie zwei
   Entwuerfe uebereinander. Jetzt alles hell, mit denselben Mitteln wie
   die Fahrzeugkarten: weiche Kacheln, kein Rahmen, Gelb nur als Signal.
   ========================================================================= */

.formular, .dt-block,
#dtZubehoerBlock, .dt-daten{
  background:var(--karte); color:var(--tinte);
  border:0; border-radius:var(--rad-18);
  box-shadow:var(--schatten-block);
}

/* [hidden] steht als letzte Regel der Datei, siehe Abschnitt 5. */

/* =========================================================================
   DIE PREISKARTE BLEIBT DUNKEL
   =========================================================================
   Alles andere auf dieser Seite ist hell. Genau deshalb funktioniert die
   eine dunkle Flaeche: sie ist der Ort, an dem die Entscheidung faellt -
   Preis, Rate, was geprueft wurde, wie man uns erreicht. Waere sie wie
   die Nachbarn beige, muesste das Auge sie erst suchen.

   Auf dem dunklen Braun kann das Gelb voll auftreten. Auf Sand musste es
   sich zu Bronze abdunkeln, um lesbar zu sein - hier nicht.
   ========================================================================= */
.dt-preisfeld{
  background:var(--tinte);
  color:var(--auf-dunkel);
  border:0; border-radius:var(--rad-18);
  box-shadow:var(--schatten-dunkel);
}
.dt-preisfeld .dt-siegel{ color:var(--tinte); }

/* Preis in Gelb: 11,7:1 auf dem dunklen Grund.
   Der Kasten faerbt mit ".dt-preisfeld p" alle Absaetze leise - diese
   Regel muss deshalb genauso genau sein, sonst verliert sie. Frueher
   hat das ein !important erledigt. */
.dt-preisfeld .dt-preis{ color:var(--gold-hell); }
.dt-preisfeld .dt-alt, .dt-preisfeld .dt-tief30,
.dt-preisfeld .dt-blicke, .dt-preisfeld .dt-mwst{ color:var(--auf-dunkel-leise); }
.dt-alt s{ color:var(--auf-dunkel-leise); }
.dt-gesenkt{ background:var(--gold); color:var(--tinte); padding:var(--raum-2) var(--raum-8); border-radius:var(--rad-4); }

/* Die Rate ist der zweite Preis - eine leicht erhellte Flaeche in der
   Karte, nicht noch ein Kasten daneben. */
.dt-ratenfeld{
  background:var(--licht-6); border:0;
  box-shadow:var(--ring);
}
.dt-ratenfeld:hover{
  background:var(--licht-11); border-color:var(--gold);
  background:var(--licht-11);
  box-shadow:var(--ring-gold);
}
.dt-ratenfeld-label{ color:var(--auf-dunkel-leise); }
.dt-ratenfeld-wert{ color:var(--gold-hell); }
.dt-ratenfeld-mehr{ color:var(--auf-dunkel-mild); }
.dt-preisfeld .dt-stand{ color:var(--stand-gut); }

/* Pruefliste: Haken in Gelb, Text hell. */
.dt-geprueft{ border-top-color:var(--licht-16); }
.dt-geprueft li{ color:var(--auf-dunkel-mild); }

/* Wege: heller Umriss statt dunkler, sonst verschwindet der Knopf. */
.dt-preisfeld .knopf--klar{
  --fg:var(--auf-dunkel); border-color:var(--licht-42); background:none;
}
.dt-preisfeld .knopf--klar:hover{ background:var(--auf-dunkel); color:var(--tinte); }
.dt-nebenlink{ color:var(--auf-dunkel-weich); }
.dt-nebenlink:hover{ color:var(--gold-hell); }

/* Rechner */
/* =========================================================================
   DER RATENRECHNER BLEIBT DUNKEL
   =========================================================================
   Wie die Preiskarte, aus demselben Grund: hier wird gerechnet und
   entschieden. Auf Sand stand Creme auf Creme - die Rate, die groesste
   Zahl der Seite, hatte keinen Grund, gegen den sie sich absetzt.

   Die rr-Regeln in bm.css waren ohnehin fuer eine dunkle Flaeche
   geschrieben (rgba(255,255,255,.34) als Rahmen, rgba(242,239,230,.6)
   als Hinweistext). Die Sandschicht hatte sie uebermalt. */

/* Der Rechner traegt seine eigene Flaeche - der Rahmen drumherum faellt
   weg, sonst steht eine dunkle Karte in einer hellen Karte. */
.dt-block--rechnen{
  background:none; border:0;
  box-shadow:none; padding:0;
}
.dt-rechner{
  background:var(--tinte); color:var(--auf-dunkel);
  border:0; border-radius:var(--rad-18); padding:clamp(var(--raum-20),3vw,var(--raum-30));
  box-shadow:var(--schatten-dunkel);
}
.dt-rechner h3,
.dt-rechner .dt-ueberschrift,
.rr-zeile b{ color:var(--auf-dunkel); }
.rr-zeile span, .rr-rate span{ color:var(--auf-dunkel-leise); }

/* Schieberegler: Bahn dunkel, Griff gelb. accent-color deckt beide
   Browserfamilien ab, ohne den Regler selbst nachzubauen. */
.dt-rechner input[type="range"], .rr-regler{
  accent-color:var(--gold);
  background:transparent;
  /* N8.18 (26.09.2026): gemessen waren die drei Regler 298 x 16 px - der
     schwerste Handy-Befund der Pruefung davor. WCAG 2.2 (2.5.8) verlangt
     24 px. Die Bahn zeichnet der Browser selbst und mittig in der Flaeche:
     eine hoehere, durchsichtige Flaeche vergroessert also nur die
     Trefferflaeche, das Bild bleibt gleich. Der Befund stand als
     "vertagt", weil der Rechner mangels Zinssatz ausgeblendet ist - er
     ist damit behoben, BEVOR der Rechner wieder auftaucht. */
  /* 27.09.2026: 24 px erfuellten WCAG 2.5.8 (AA), die Pruefung misst aber
     gegen 44 px (2.5.5). Auch hier wird nur die durchsichtige Flaeche
     hoeher - die Bahn zeichnet der Browser weiterhin mittig und gleich. */
  min-height:44px;
}

.rr-art-knopf{
  background:var(--licht-6); border-color:var(--licht-18);
  color:var(--auf-dunkel);
}
.rr-art-knopf:hover{ background:var(--licht-11); }
.rr-art-knopf[aria-pressed="true"]{ background:var(--gold); border-color:var(--gold); color:var(--tinte); }
.rr-gemeinsam{ background:var(--licht-6); color:var(--auf-dunkel-weich);
  /* "In jedem Paket" ist die Vorbemerkung zu allen dreien - sie laeuft ueber
   die volle Breite, sonst frisst sie eine Rasterspalte und das dritte
   Paket rutscht allein in die naechste Zeile. */
  grid-column:1 / -1; }
.rr-gemeinsam b{ color:var(--auf-dunkel); }
.rr-paket{
  background:var(--licht-5);
  box-shadow:var(--ring);
}
.rr-paket-name, .rr-paket-rate{ color:var(--auf-dunkel); }
.rr-paket-liste li{ color:var(--auf-dunkel-weich); }
.rr-paket-liste li::before{ color:var(--gold); }
.dt-rechner .dt-nebenlink{ color:var(--auf-dunkel-weich); }
.dt-rechner .dt-nebenlink:hover{ color:var(--gold-hell); }
/* GEWAEHLT und EMPFOHLEN sind zwei verschiedene Aussagen und muessen
   verschieden aussehen. Vorher trugen beide Goldring plus Gelbfuellung -
   der Kaufpreisschutz sah damit dauerhaft angeklickt aus, obwohl nur
   die Empfehlungsmarke gemeint war (gemeldet 30.08.2026).

   Gewaehlt:  Ring + Fuellung. Die Antwort auf einen Klick.
   Empfohlen: nur das Etikett "Unsere Empfehlung" und eine duenne Kante.
              Ein Hinweis, kein Zustand. */
.rr-paket[aria-pressed="true"]{
  box-shadow:var(--ring-gold-stark);
  background:rgba(236,216,23,.13);
}
.rr-paket--tipp:not([aria-pressed="true"]){
  box-shadow:var(--ring-gold-leise);
  background:var(--licht-5);
}

/* Zubehoer */
.konfi-zeile{ background:var(--papier-tief); }
.konfi-zeile:has(input:checked){ background:color-mix(in srgb, var(--gold) 15%, var(--karte)); }
.konfi-name{ color:var(--tinte-weich); }
.konfi-name::before{ border-color:var(--linie); }
.konfi-kachel:has(input:checked) .konfi-name,
.konfi-zeile:has(input:checked) .konfi-name{ color:var(--tinte); }
.konfi-preis{ color:var(--tinte); }
.konfi-zeile:has(input:checked) .konfi-preis{ color:var(--bronze); }

/* Formular */
.formular label, .formular .feld span{ color:var(--tinte-weich); }
.formular h3{ color:var(--tinte); }

/* Die Chips ueber dem Bild bleiben dunkel: sie liegen auf dem Foto und
   brauchen den Kontrast. */
.dt-chip, .hero-marke{ background:var(--tinte-tief); color:var(--auf-dunkel); }

/* =========================================================================
   FAHRZEUGSEITE - neuer Aufbau
   =========================================================================
   Vorher trug die rechte Saeule Preis, Rechner, Verbrauchstext und
   Formular gleichzeitig: ueber 3000 px Inhalt in 343 px Breite, waehrend
   der Hauptbereich daneben leer auslief.

   Jetzt: oben Galerie und Entscheidung nebeneinander, alles andere
   darunter ueber die volle Breite.
   ========================================================================= */
@media (min-width:1024px){
  .dt-seite .dt-raster{ grid-template-columns:minmax(0,1.62fr) minmax(320px,.7fr); align-items:start; }
  .dt-seitenspalte{ position:sticky; top:96px; }
}
.dt-seite .dt-daten{ margin-top:var(--raum-34); }

/* Reiter */
.dt-reiter{
  display:flex; gap:var(--raum-2); margin:var(--raum-38) 0 0; padding:var(--raum-4);
  background:var(--papier-tief); border-radius:var(--rad-12); width:fit-content; max-width:100%;
}
.dt-reiter button{
  padding:var(--raum-10) var(--raum-20); cursor:pointer; background:none; border:0; border-radius:var(--rad-8);
  font:600 var(--txt-14)/1 var(--schrift-text); color:var(--tinte-weich);
  transition:background var(--dauer-sm) var(--weich), color var(--dauer-sm) var(--weich);
}
.dt-reiter button:hover{ color:var(--tinte); }
.dt-reiter button[aria-selected="true"]{
  background:var(--karte); color:var(--tinte); box-shadow:var(--schatten-flach);
}
#dtAusstattung, #dtEnvkvHuelle{ padding-top:var(--raum-24); }

/* Der Rechner hat jetzt Breite: Regler nebeneinander, Pakete in einer Reihe */
.dt-block--rechnen{ margin-top:var(--raum-38); }
@media (min-width:768px){
  #dtRechner .rr-regler-raster{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--raum-26); align-items:start; }
  /* :not([hidden]) statt !important - sonst gewinnt die ID-Regel gegen
     die Schlussregel "body [hidden]" und ein geschlossener Block stuende offen. */
  #dtRechner .rr-pakete:not([hidden]){ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--raum-12); align-items:stretch; }
  #dtRechner .rr-paket{ display:flex; flex-direction:column; }
  #dtRechner .rr-paket-liste{ flex:1 1 auto; }
  #dtRechner .rr-rate{ display:flex; align-items:baseline; justify-content:space-between; }
  #dtRechner .rr-rate b{ font-size:var(--txt-48); }
  .dt-formular .feld-raster{ grid-template-columns:repeat(2,1fr); }
}

/* --- Rueckruf-Feld in der dunklen Preiskarte ----------------------------
   Klappt auf Klick in der Karte auf. Weisse Felder auf dem dunklen Braun
   waeren drei grelle Loecher - also dieselbe erhellte Flaeche wie beim
   Ratenfeld daneben. */
.dt-preisfeld input,
.dt-preisfeld select,
.dt-preisfeld textarea{
  background:var(--licht-7); border:1px solid var(--licht-18);
  color:var(--auf-dunkel); border-radius:var(--rad-10);
}
.dt-preisfeld input::placeholder{ color:var(--auf-dunkel-rand); }
.dt-preisfeld input:focus,
.dt-preisfeld select:focus,
.dt-preisfeld textarea:focus{
  border-color:var(--gold); background:var(--licht-11); outline:none;
}
.dt-preisfeld label,
.dt-preisfeld .feld > span,
.dt-preisfeld p{ color:var(--auf-dunkel-weich); }
.dt-preisfeld a{ color:var(--gold-hell); }

/* --- Rueckruf-Feld: Gestaltung kam bis 30.08.2026 als Inline-Stil aus
   fahrzeug.js. Hier gehoert sie hin - sonst folgt sie der Preiskarte
   nicht, und das inline gesetzte display:grid schlaegt jedes hidden. --- */
.rk-feld{
  display:grid; gap:var(--raum-10); margin-top:var(--raum-12); padding:var(--raum-14);
  border:1px solid var(--licht-22); border-radius:var(--rad-12);
}
.rk-label{
  font-size:var(--txt-12); letter-spacing:var(--sperr-10); text-transform:uppercase;
  color:var(--auf-dunkel-leise);
}
.rk-eingabe{
  min-height:46px; padding:var(--raum-12) var(--raum-12); border-radius:var(--rad-10);
  /* 16 px: darunter zoomt iOS beim Antippen in die Seite. */
  font:400 var(--txt-16)/1.4 var(--schrift-text);
  background:var(--licht-7); border:1px solid var(--licht-22);
  color:var(--auf-dunkel);
}
.rk-eingabe::placeholder{ color:var(--auf-dunkel-rand); }
.rk-eingabe:focus{
  border-color:var(--gold); background:var(--licht-12); outline:none;
}
/* Klappliste: die Auswahl selbst zeichnet das Betriebssystem hell. */
select.rk-eingabe option{ background:var(--tinte); color:var(--auf-dunkel); }

/* --- Reglergruppen -------------------------------------------------------
   Beschriftung und Regler gehoeren zusammen in eine Gruppe; das Raster
   verteilt nur noch die Gruppen. Vorher lag alles als flache Liste darin
   und die drei Spalten rissen die Paare auseinander. */
.rr-gruppe{ display:grid; gap:var(--raum-10); align-content:start; }
.rr-gruppe .rr-zeile{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--raum-10); margin:0; }

/* Hinweiszeile unter einem Gruppentitel im Zubehoer ("Fuer den Barkauf ...") */
.konfi-gruppen-hinweis{
  margin:-4px 0 var(--raum-10); font-size:var(--txt-12); line-height:var(--zeile-150);
  color:var(--tinte-leise);
}

/* Sternchen-Fussnoten laufen ueber die volle Breite - bei 80ch stapelten
   sie sich zu einem hohen Textblock (30.08.2026). */
.dt-seite .dt-fussnote{ max-width:none; }

/* Mehr Luft zwischen den Highlight-Chips und der Ausstattungsliste -
   die beiden klebten aneinander (30.08.2026). */
#dtAusstattung .dt-chips{ margin-bottom: var(--raum-40); }

/* Der fruehere Verbrauchs-Reiter steht jetzt als Block vor den Fussnoten.
   Seine zwei Knoepfe stammen aus einer schmalen Spalte - ueber die volle
   Breite gestreckt waeren es zwei 1150-px-Balken. */
#dtEnvkvHuelle{ margin-top:var(--raum-26); }
#dtEnvkvHuelle .dt-wege{ display:flex; flex-wrap:wrap; gap:var(--raum-10); }
#dtEnvkvHuelle .dt-bewertung{ margin-top:var(--raum-16); }

/* Der WhatsApp-Knopf erbte weisse Schrift aus der dunklen Preiskarte
   (.dt-wege .knopf--klar) - auf dem hellen Grund war er unsichtbar. */
#dtEnvkvHuelle .knopf--klar{
  --fg:var(--tinte);
  border-color:var(--tinte);
}
#dtEnvkvHuelle .knopf--klar:hover{
  background:var(--tinte); color:var(--auf-dunkel);
}

/* =========================================================================
   MUTIGER-PASS 30.08.2026 - EyeCatcher in der bestehenden Welt
   =========================================================================
   Auftrag: "sieht langweilig aus, sagt nix aus, keine EyeCatchers".
   Antwort: die Mittel, die die Seite schon besitzt, auf volle Staerke -
   grosse Beweiszahlen, dunkle Kontrastflaechen, eine Bewegung. Keine
   neue Farbwelt, kein neues Material. */

/* --- Hero-Schrift eine Stufe groesser, Zeilen enger ---------------------- */
/* Beide Grenzen kommen vom Wort "transparenteste" (15 Zeichen Archivo,
   unbrechbar): die Untergrenze passt auf 375 px, die Obergrenze in die
   Textspalte des Zweispalters. Ohne Deckel erzwang das Wort die
   Mindestbreite der Spalte und quetschte das Teamfoto auf 275 px. */
.hero h1{
  /* Automatische Silbentrennung gehoert nicht in eine Ueberschrift:
   "SOR-GENFREI" ueber zwei Zeilen liest sich wie ein Druckfehler.
   Stattdessen an Wortgrenzen brechen und die Groesse so waehlen, dass
   das laengste Wort in die Spalte passt. */
  hyphens:manual; -webkit-hyphens:manual; font-size:var(--txt-hero); line-height:.98; }
.hero-raster > *{ min-width:0; }
.hero h1 em{ font-style:normal; }

/* Laufband entfernt (04.09.2026, Wunsch Inhaber). */

/* --- Zahlenband: dunkel und doppelt so gross -----------------------------
   Die Zahlen sind das staerkste Argument der Seite und standen bisher
   grau auf beige. Jetzt: dunkle Flaeche, Ziffern in Gelb, Archivo auf
   voller Groesse - der Kontrastpeak direkt nach dem Hero. */
.zahlen{
  background:var(--tinte); border-block:0;
  padding-block:clamp(var(--raum-10),2vw,var(--raum-22));
}
.zahl{ background:none; box-shadow:none; border-right:var(--rahmen) solid var(--licht-14); padding:var(--raum-30) var(--raum-12); }
.zahl:last-child{ border-right:0; }
.zahl b{
  color:var(--gold-hell);
  font-size:var(--txt-zahl);
  letter-spacing:-.03em;
}
.zahl span{ color:var(--auf-dunkel-leise); }
.zahlen-quelle{ color:var(--auf-dunkel-rand); }

/* --- Fahrzeugfotos ohne Wasserzeichen-Banner -----------------------------
   Der eingebrannte Werbebalken sitzt im oberen Teil jedes Fotos. Der
   Rahmen ist etwas breiter als 4:3 und das Bild haengt unten - damit
   faellt der Balken aus dem Ausschnitt. Die Originaldateien bleiben
   unberuehrt (Freigabe 30.08.2026, vorher galt: Bilder nicht anfassen). */
.foto-beschnitt{ aspect-ratio:100/61; overflow:hidden; }  /* schneidet oben ~18% */
.foto-beschnitt img{
  width:100%; height:100%; object-fit:cover; object-position:50% 100%;
  aspect-ratio:auto;
}
/* Werbebild eines Zulaufwagens (02.10.2026): mittig statt unten - der Text
   der Tafel steht in der Mitte, Kopf- und Fusszeile duerfen weg. */
.foto-beschnitt img.wagen-werbebild{ object-position:50% 50%; }

/* Die Sonderregel fuer Werbekacheln in der Galerie ist am 27.09.2026
   entfallen (Befund 1): der Server liefert die Bildstrecke werbefrei, in
   der Galerie stehen nur noch eigene Fahrzeugfotos. */

/* --- Fahrzeug des Monats: Bild und Entscheidung nebeneinander -----------
   Vorher: Bildwand, darunter eine Fusszeile mit Daten und Pillenlink.
   Jetzt traegt die rechte Spalte Titel, Fakten und Knopf - dieselbe
   Logik wie auf der Fahrzeugseite (30.08.2026). */
.fokus-haupt{ display:grid; gap:clamp(var(--raum-22),3vw,var(--raum-40)); grid-template-columns:1fr; align-items:center; }
@media (min-width:1024px){ .fokus-haupt{ grid-template-columns:1.45fr 1fr; } }
.fokus-seite h2{
  font-size:var(--txt-fokus-h2); line-height:var(--zeile-100); margin:0 0 var(--raum-18);
}
.fokus-seite .fokus-daten{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--raum-14) var(--raum-20);
  margin-bottom:var(--raum-24);
}
.fokus-seite .knopf{ justify-self:start; }

/* --- Hero-Bild: mehr Flaeche --------------------------------------------
   "Bild von uns zu klein" (30.08.2026): Spalten fast gleich schwer.
   Das Inhaberfoto steht im Hochformat 4:4,6 (siehe .hero-bild-rahmen). */
@media (min-width:1024px){
  .hero-raster{ grid-template-columns:1fr .92fr; }
}

/* =========================================================================
   VERGLEICH ALS DREI SAEULEN (30.08.2026)
   =========================================================================
   Ersetzt die Tabelle. Die BM-Saeule steht dunkel und leicht erhoeht in
   der Mitte - das Urteil ist auf einen Blick lesbar, die Details danach.
   Auf schmalen Fenstern stapeln die Saeulen, BM zuerst. */
.vgl-saeulen{
  display:grid; gap:var(--raum-16); grid-template-columns:1fr; align-items:center;
}
@media (min-width:1024px){
  .vgl-saeulen{ grid-template-columns:1fr 1.12fr 1fr; gap:0; }
}
.vgl-saeule{
  background:var(--karte); border:1px solid var(--linie);
  border-radius:var(--rad-18); padding:var(--raum-26) var(--raum-24);
}
.vgl-saeule header h3{ font-size:var(--txt-18); margin:0; }
.vgl-saeule header p{
  margin:var(--raum-4) 0 0; font-size:var(--txt-13); color:var(--tinte-leise);
}
.vgl-saeule ul{
  list-style:none; margin:var(--raum-18) 0 0; padding:var(--raum-16) 0 0;
  border-top:1px solid var(--linie);
  display:grid; gap:var(--raum-12);
}
.vgl-saeule li{
  position:relative; padding-left:var(--raum-26);
  font-size:var(--txt-14); line-height:var(--zeile-150); color:var(--tinte-weich);
}
/* Kreis: gibt es, aber eingeschraenkt. Kreuz: gibt es nicht. */
.vgl-s-teils::before{
  content:''; position:absolute; left:2px; top:.42em;
  width:9px; height:9px; border-radius:var(--rad-kreis);
  border:2px solid var(--tinte-leise);
}
.vgl-s-nein::before{
  content:'\00d7'; position:absolute; left:2px; top:0;
  color:var(--achtung); font-weight:700; font-size:var(--txt-17); line-height:var(--zeile-mittel);
}

/* --- die BM-Saeule ------------------------------------------------------ */
.vgl-saeule--bm{
  background:var(--tinte); color:var(--auf-dunkel); border:0;
  padding:var(--raum-32) var(--raum-28);
  box-shadow:var(--schatten-dunkel-hoch);
}
@media (min-width:1024px){
  /* leicht erhoeht: ragt oben und unten ueber die Nachbarn hinaus */
  .vgl-saeule--bm{ margin-block:-22px; border-radius:var(--rad-22); z-index:var(--ebene-grund); }
  .vgl-saeulen .vgl-saeule:first-child{ border-radius:var(--rad-18) 0 0 var(--rad-18); border-right:0; }
  .vgl-saeulen .vgl-saeule:last-child{ border-radius:0 var(--rad-18) var(--rad-18) 0; border-left:0; }
}
@media (max-width:1023px){
  /* Handy: das Urteil zuerst */
  .vgl-saeule--bm{ order:-1; }
}
/* Nur fuer die Farbe: ohne den Kopf im Selektor gewinnt
   ".vgl-saeule header p" und faerbt das Abzeichen leise - gemessen
   4,18:1 auf Gold statt 11,42:1. Alles andere bleibt, wo es war. */
.vgl-saeule header p.vgl-s-marke{ color:var(--tinte); }
.vgl-s-marke{
  display:inline-block; margin:0 0 var(--raum-10); padding:var(--raum-4) var(--raum-12); border-radius:var(--rad-6);
  background:var(--gold); color:var(--tinte);
  font-size:var(--txt-12); font-weight:800; letter-spacing:var(--sperr-10); text-transform:uppercase;
}
.vgl-saeule--bm header h3{ font-size:var(--txt-saeule); line-height:var(--zeile-110); }
.vgl-saeule--bm ul{ border-top-color:var(--licht-16); }
.vgl-saeule--bm li{ color:var(--auf-dunkel-ruhig); }
.vgl-saeule--bm li::before{
  content:''; position:absolute; left:0; top:.4em;
  width:11px; height:6px;
  border:2px solid var(--gold); border-top:0; border-right:0;
  transform:rotate(-45deg);
}
.vgl-saeule--bm .knopf{ margin-top:var(--raum-22); width:100%; }

/* Die erhoehte BM-Saeule ragt 22px nach unten - die Fussnote braucht
   entsprechend Abstand, sonst verschwindet ihre erste Zeile darunter. */
@media (min-width:1024px){
  .vgl-fussnote{ margin-top:var(--raum-52); }
}

/* ==========================================================================
   4. KUNDENSICHT - Handy-Navigation, erster Bildschirm, Formularfelder
   (frueher css/kundensicht.css - steht bewusst als letzter Abschnitt)
   ========================================================================== */
/* ==========================================================================
   kundensicht.css — Kundensicht am Handy (Bauleiter C, 26.09.2026)
   --------------------------------------------------------------------------
   Eigene Datei, KEINE Aenderung an css/bm.css oder css/bm-sand.css: dort
   laeuft gerade der Zusammenzug der beiden Formatvorlagen (N7 "Struktur").
   Jede Regel hier traegt die Befundnummer aus scratchpad/web/PLAN-NACHTRAG.md.
   Sie gehoert beim Zusammenzug in die eine Vorlage und diese Datei danach weg.

   Grundsatz: keine neuen Farben (nur bestehende Token), keine neue Anordnung
   am Schreibtisch. Umgestellt wird ausschliesslich unter 820 px.

   Laedt IMMER als letztes Stilblatt, nach bm.css und bm-sand.css.
   ========================================================================== */

/* N6.11 / N7-Design 8 — auf dunkel gestellten Telefonen zeichnete iOS die
   Auswahl-, Datums- und Uhrzeitfelder dunkel in die helle Flaeche. Die Seite
   hat nur ein helles Kleid, also sagen wir das auch.
   (Setzt Bauleiter D die Zeile in bm.css, kann sie hier ersatzlos weg.) */

/* ==========================================================================
   1 — Handy-Navigation (N6.2, Livegang-Punkt 13)
   --------------------------------------------------------------------------
   css/bm.css:856 blendet .kopf-navi unter 980 px aus, ohne Ersatz. Wer ueber
   Google auf einer Unterseite landete, kam von dort nicht zu den Fahrzeugen.

   Gebaut aus <details>/<summary>, nicht aus JavaScript: damit oeffnet und
   schliesst das Menue auch ohne Skript, laesst sich mit Tabulator anspringen
   und mit Enter oder Leertaste bedienen, und der Browser meldet den Zustand
   von selbst an die Vorlesehilfe. Genau deshalb kann derselbe Kopfzeilen-
   Block auf JEDER Seite stehen, auch auf denen ohne eigenes Skript.
   ========================================================================== */
.handymenue { position: relative; display: none; }
.handymenue > summary {
  display: flex; align-items: center; justify-content: center;
  width: 46px; min-width: 46px; height: 44px;
  border: 1px solid var(--linie-bedienelement); border-radius: var(--rad-10);
  background: var(--karte); color: var(--tinte); cursor: pointer;
  list-style: none;
}
.handymenue > summary::-webkit-details-marker { display: none; }
.handymenue > summary::marker { content: ''; }
.handymenue > summary:hover { border-color: var(--gold); }
.handymenue .burger-zu { display: none; }
.handymenue[open] > summary { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.handymenue[open] .burger-auf { display: none; }
.handymenue[open] .burger-zu { display: block; }
.handymenue svg { width: 22px; height: 22px; display: block; }

.handynavi {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: var(--ebene-menue);
  width: min(300px, 86vw); padding: var(--raum-6);
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rad-12);
  box-shadow: var(--schatten-menue-handy);
}
.handynavi ul { list-style: none; margin: 0; padding: 0; }
.handynavi a {
  display: flex; align-items: center;
  min-height: 52px; padding: 0 var(--raum-12);
  font: 700 var(--txt-16)/1.3 var(--schrift-text);
  color: var(--tinte); text-decoration: none;
  border-bottom: 1px solid var(--linie);
}
.handynavi li:last-child a { border-bottom: 0; }
.handynavi a:active { background: color-mix(in srgb, var(--tinte) 6%, transparent); }

/* Unter 980 px faellt .kopf-navi weg (bm.css:856) - genau dort tritt der
   Burger an. Darueber bleibt die Kopfzeile unveraendert. */
@media screen and (max-width: 1023px) {
  .handymenue { display: block; }
}

/* ==========================================================================
   2 — Erster Bildschirm der Startseite (N6.3, Livegang-Punkt 6)
   --------------------------------------------------------------------------
   Gemessen bei 375x812: der Knopf "Fahrzeuge ansehen" lag bei 761-813 px und
   damit vollstaendig hinter der festen Aktionsleiste (ab 751 px); das erste
   Auto kam nach 5.129 px. Am Schreibtisch bleibt die Reihenfolge unberuehrt -
   umgestellt wird nur unter 820 px, und zwar per order, nicht im Quelltext.
   ========================================================================== */
@media screen and (max-width: 767px) {
  .hero-text { display: flex; flex-direction: column; }
  .hero-text h1        { order: 1; }
  .hero-lede           { order: 2; }
  .hero-tasten         { order: 3; margin-top: var(--raum-18); }
  .hero-bestand        { order: 4; }
  .versprechen         { order: 5; }
  /* Die Einleitung auf zwei Zeilen: der dritte Satz steht am Schreibtisch
     weiter, am Handy kostet er den halben ersten Bildschirm. */
  .nur-breit { display: none; }
}

.hero-bestand {
  margin: var(--raum-14) 0 0;
  font-size: var(--txt-15); font-weight: 600;
}
.hero-bestand a {
  display: inline-flex; align-items: center; gap: var(--raum-8);
  min-height: 44px;
  color: var(--tinte); text-decoration: none;
  border-bottom: 2px solid var(--gold);
}
.hero-bestand b { font-variant-numeric: tabular-nums; }

/* Der Hauptknopf darf nicht hinter der festen Aktionsleiste liegen:
   bm.css setzt body{padding-bottom:64px}, die Leiste ist aber
   60 px hoch PLUS der sichere Bereich des iPhones. */
@media screen and (max-width: 767px) {
  body { padding-bottom: calc(var(--raum-64) + env(safe-area-inset-bottom)); }
}

/* Sterne-Zeile (N6.10 / Q11 a): eine Angabe, eine Quelle, ein Link.
   Keine neue Farbe - dieselben Vorlagen-Farben wie der Rest des
   Zahlenbandes. Die Zeile steht im dunklen Abschnitt .zahlen (:1828),
   erbte vorher --tinte und war damit Tinte auf Tinte (Kontrast 1,00).
   Jetzt: 14,49:1 fuer die Zeile, 4,73:1 fuer die Quelle (N1, 27.09.2026). */
/* Im Raster und mittig unter den vier Zahlen (02.10.2026, Inhaber: "Sterne
   verrutscht"): beide Zeilen stehen ausserhalb von .spalte und klebten bei
   x = 0 am linken Rand - am Handy wie am Schreibtisch. */
.sterne-zeile { width: min(100% - var(--rand) * 2, var(--spalte)); margin: var(--raum-14) auto 0; text-align: center; font-size: var(--txt-15); font-weight: 600; color: var(--auf-dunkel); }
.sterne-zeile a { color: inherit; }
.sterne-quelle { width: min(100% - var(--rand) * 2, var(--spalte)); margin: var(--raum-4) auto 0; text-align: center; font-size: var(--txt-12); color: var(--auf-dunkel-rand); }
/* Wechselnde Bewertungen (02.10.2026, js/stimmen.js): alle fuenf in einer
   Rasterzelle uebereinander, sichtbar nur die aktive - der Block ist so hoch
   wie die laengste und die Seite springt beim Wechsel nicht. */
.stimmen { padding-bottom: var(--raum-26); }
.stimmen-buehne { display: grid; max-width: 64ch; margin: var(--raum-18) auto 0; text-align: center; }
.stimme { grid-area: 1 / 1; align-self: center; margin: 0; opacity: 0; visibility: hidden; transition: opacity .45s var(--weich), visibility 0s linear .45s; }
.stimme.aktiv { opacity: 1; visibility: visible; transition: opacity .45s var(--weich), visibility 0s; }
.stimme blockquote { margin: 0; }
.stimme blockquote p { margin: 0; font-size: var(--txt-17); line-height: var(--zeile-150); color: var(--auf-dunkel); }
.stimme figcaption { margin-top: var(--raum-10); font-size: var(--txt-13); color: var(--auf-dunkel-weich); }
.stimme figcaption b { color: var(--auf-dunkel); }
.stimme-sterne { color: var(--gold); letter-spacing: var(--sperr-8); }
.stimmen-punkte { display: flex; justify-content: center; gap: var(--raum-4); margin-top: var(--raum-8); }
.stimmen-punkt { position: relative; width: var(--tipp); height: var(--tipp); padding: 0; border: 0; background: none; cursor: pointer; }
.stimmen-punkt::before { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: var(--rad-kreis); background: var(--auf-dunkel-rand); transition: background-color .2s var(--weich); }
.stimmen-punkt[aria-current="true"]::before { background: var(--gold); }
.stimmen-hinweis { max-width: 78ch; margin: var(--raum-6) auto 0; text-align: center; font-size: var(--txt-12); line-height: var(--zeile-145); color: var(--auf-dunkel-rand); }
@media (prefers-reduced-motion: reduce) { .stimme, .stimme.aktiv { transition: none; } }
/* 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. Gegenstueck
   auf der Fahrzeugseite: .dt-bewertung-quelle a in css/fahrzeug.css. */
.sterne-quelle a {
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
  display: inline-flex; align-items: center; min-height: var(--tipp);
}

/* ==========================================================================
   3 — Fahrzeugkarten (N6.1, N6.12, Livegang-Punkt 2)
   ========================================================================== */
/* Kraftstoff bekommt eine eigene Kachel statt als Beschriftung unter dem
   Getriebe zu stehen (js/bm.js:258 zeigte "Automatik / Diesel"). Vier Werte
   in einer Zeile werden auf 360 px zu schmal, deshalb zwei mal zwei. */
.wagen-werte { grid-template-columns: repeat(2, 1fr); }

/* Verkaufsargument auf jeder Karte: die Karte war sonst inhaltsgleich mit
   einer mobile.de-Kachel. */
.wagen-argument {
  margin: 0; padding: 0 var(--raum-18) var(--raum-16);
  font-size: var(--txt-12); font-weight: 600; line-height: var(--zeile-145);
  color: var(--tinte-weich);
}
/* Karte ohne eigenes Foto: der Platzhalter sagt, was Sache ist, und
   bittet trotzdem um die Anfrage. */
.wagen-ohnefoto {
  margin: 0; padding: 0 var(--raum-18) var(--raum-16);
  font-size: var(--txt-12); font-weight: 700; line-height: var(--zeile-145);
  color: var(--tinte);
}

/* ==========================================================================
   4 — Fahrzeugseite (N6.8, N6.12, N5.2)
   ========================================================================== */
/* Die Seitenspalte bleibt optisch EIN dunkles Feld. .dt-seitenrest ist nur
   eine Huelle, damit die Reihenfolge am Handy umsortiert werden kann; sie
   traegt deshalb denselben Grund wie .dt-preisfeld und sitzt am Schreibtisch
   nahtlos darunter. Werte 1:1 aus css/bm.css:489 und css/bm-sand.css:356/391
   uebernommen - keine neue Farbe, kein neuer Radius, kein neuer Abstand. */
.dt-seitenspalte { gap: 0; }
.dt-preisfeld {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  padding-bottom: 0;
}
.dt-seitenrest {
  background: var(--tinte); color: var(--auf-dunkel);
  border-radius: 0 0 var(--rad-18) var(--rad-18);
  padding: 0 var(--raum-24) var(--raum-24);
  box-shadow: var(--schatten-dunkel);
}
/* Die Regeln fuer die Knoepfe hingen an .dt-preisfeld (bm-sand.css:391) -
   ohne diese Zeilen verlieren sie beim Umzug in die Huelle ihren hellen
   Umriss und verschwinden auf dem dunklen Grund. */
.dt-seitenrest .knopf--klar {
  --fg: var(--auf-dunkel); border-color: var(--licht-42); background: none;
}
.dt-seitenrest .knopf--klar:hover { background: var(--auf-dunkel); color: var(--tinte); }

/* Gelber Knopf in der klebenden Seitenspalte am Schreibtisch (N6.12):
   die Spalte trug bisher nur Telefonnummer und zwei Textlinks - kein
   Handlungsaufruf in der Flaeche, die dauerhaft mitlaeuft. */
.dt-probefahrt { width: 100%; }

/* N5.2 — der Pflichthinweis zur Bewertungsquelle stand mit heller Schrift
   auf hellem Grund (gemessen 1,03:1). Die helle Fassung gilt jetzt nur noch
   im dunklen Preisfeld; ausserhalb erbt der Hinweis die normale Textfarbe. */
.dt-bewertung-quelle { color: var(--tinte-leise); }
.dt-preisfeld .dt-bewertung-quelle,
.dt-seitenrest .dt-bewertung-quelle { color: var(--auf-dunkel-72); }
.dt-bewertung { color: var(--tinte); }

/* Am Handy vor die Galerie (N6.8)
   --------------------------------------------------------------------------
   Gemessen: der Preis stand bei 680 px, also an oder unter der Kante eines
   iPhone-Bildschirms. Unter 960 px loest display:contents die Seitenspalte
   auf, danach stehen Preisfeld, Galerie und der Rest als drei Geschwister
   in derselben Spalte und lassen sich mit order sortieren. Kann ein Browser
   display:contents nicht, bleibt die bisherige Reihenfolge stehen - dann
   sieht es aus wie vorher, nichts bricht. */
@media screen and (max-width: 1023px) {
  /* align-items:start aus der Grundregel (Zeile 658) wirkt im Raster auf die
     Hoehenachse, im spaltenweisen Flex-Kasten aber auf die BREITE. Dadurch
     nahm .dt-haupt die Inhaltsbreite des Vorschaustreifens an (28 Bilder =
     2.846 px) und das Hauptfoto war am Handy zu 87 % abgeschnitten.
     stretch stellt die Dehnung auf die Spaltenbreite wieder her (N8.1). */
  .dt-raster { display: flex; flex-direction: column; align-items: stretch; }
  .dt-seitenspalte { display: contents; }
  .dt-preisfeld  { order: -1; border-radius: var(--rad-18); padding-bottom: var(--raum-24); }
  .dt-haupt      { order: 0; margin: var(--raum-16) 0; }
  .dt-seitenrest { order: 1; border-radius: var(--rad-18); padding-top: var(--raum-24); }

  /* Ueberschrift am Handy auf rund 26 px: "MERCEDES-BENZ C 220 d T-Modell"
     nahm sonst vier Zeilen ueber dem Preis. */
  .dt-kopf h1 { font-size: var(--txt-26); line-height: var(--zeile-eng); }
}

/* ==========================================================================
   5 — Formulare am Handy (N5.7, N7-Technik 3, N7-Design 7)
   --------------------------------------------------------------------------
   Unter 16 px zoomt iOS bei jedem Feld hinein; danach steht die Seite
   verschoben. Das Einwilligungs-Haekchen ist das letzte Element vor dem
   Absenden und war mit 18 px kleiner als die 24 px aus WCAG 2.2 (2.5.8).
   ========================================================================== */
.feld input, .feld select, .feld textarea,
.feld input[type="file"],
.werkzeugleiste select,
input[type="text"], input[type="tel"], input[type="email"],
input[type="date"], input[type="time"], input[type="file"],
select, textarea {
  font-size: var(--txt-16);
}
.zustimmung input[type="checkbox"] {
  width: 24px; height: 24px; min-width: 24px; margin-top: 0;
  accent-color: var(--gold-tief);
}
.zustimmung { align-items: center;
  /* Das Kaestchen bleibt 24 px gross - groesser saehe im Formular falsch aus.
   Angetippt werden darf eine 44x44-Flaeche drumherum: sie gehoert zur
   <label>, ein Tipp darauf schaltet also das Kaestchen. Die Flaeche endet
   genau dort, wo der Text beginnt, damit sie keinen Link verdeckt. */
  position:relative; }

/* Meldung im Formular statt Systemfenster (js/haus.js). Ohne eigene Regel
   sah sie aus wie normaler Fliesstext. Stand bis zum 26.09.2026 doppelt:
   einmal hier, einmal in css/umzug.css - mit anderen Farben. Jetzt einmal. */
.form-meldung {
  grid-column: 1 / -1;
  margin: var(--raum-14) 0 0; padding: var(--raum-12) var(--raum-14);
  border: 1px solid var(--achtung); border-left-width: 4px; border-radius: var(--rad-10);
  background: color-mix(in srgb, var(--achtung) 8%, transparent);
  color: var(--achtung); font-size: var(--txt-14); font-weight: 600; line-height: var(--zeile-150);
}
.form-meldung[hidden] { display: none; }
.form-meldung:focus {
  outline: var(--fokus-breite) solid var(--fokus-kern); outline-offset: var(--fokus-abstand);
}

/* Hinweis nach der Umleitung aus dem Kundenportal (php/status.php).
   Gleiches Bauteil wie die Formularmeldung, also auch gleiche Mittel. */
.portal-hinweis {
  max-width: 1240px;
  margin: var(--raum-14) auto 0; padding: var(--raum-12) var(--raum-16);
  border-left: 4px solid var(--achtung); border-radius: var(--rad-8);
  background: color-mix(in srgb, var(--achtung) 8%, transparent);
  color: var(--achtung); font-size: var(--txt-15); font-weight: 600;
}
.portal-hinweis a { color: inherit; }

/* ==========================================================================
   6 — Ohne JavaScript (N6.6)
   --------------------------------------------------------------------------
   bm.css laesst ab 820 px alle .auftritt-Bloecke unsichtbar starten; ohne
   Skript blieb die Seite am Schreibtisch leer. Die Gegenregel steht als
   <noscript><style> in jeder Seite - nur dort greift sie ausschliesslich
   dann, wenn wirklich kein Skript laeuft. Hier waere sie immer aktiv und
   wuerde den Auftritt-Effekt abschalten.
   ========================================================================== */

/* ==========================================================================
   4b. HILFSKLASSEN - Ersatz fuer die 143 style="..."-Attribute
   ==========================================================================
   Bis zum 26.09.2026 standen in den Seiten 143 style-Attribute. Sie sind
   das staerkste Mittel im ganzen Stilsystem (sie schlagen jede Regel) und
   umgehen damit jedes Token: wer eine Hausfarbe aendert, erwischt sie nicht.

   Jede Klasse hier steht ZWEIMAL im Selektor (".leise.leise"). Das ist kein
   Tippfehler: Bereichsregeln wie ".recht p" sind genauer als eine einzelne
   Klasse und wuerden sonst gewinnen - genau das koennen style-Attribute
   nicht passieren. Der doppelte Name hebt die Hilfsklasse auf dieselbe
   Stufe; am Aussehen aendert er nichts.

   Werte: Vielfache von 4 kommen aus den Raum-Token. Die uebrigen (10, 14,
   18, 22, 26, 30, 34, 36) sind die bewussten Ausnahmen aus der Doku - sie
   liegen 2 px neben dem Raster und wurden deshalb NICHT gerundet.
   ========================================================================== */

/* --- Kein Aussenabstand (steht VOR den Abstandsklassen, damit
       ".ohne-abstand oben-10" auch wirklich 10 px oben ergibt) --- */
.ohne-abstand.ohne-abstand { margin:0; }

/* --- Schriftgroessen aus der Leiter --- */
.schrift-13.schrift-13 { font-size:var(--txt-13); }
.schrift-14.schrift-14 { font-size:var(--txt-14); }
.schrift-15.schrift-15 { font-size:var(--txt-15); }

/* --- Farben --- */
.leise.leise                     { color:var(--tinte-leise); }
.akzent.akzent                   { color:var(--gold-tief); }
.leise-auf-dunkel.leise-auf-dunkel { color:var(--auf-dunkel-rand); }
.gedaempft.gedaempft             { opacity:.7; }
.erbt-farbe.erbt-farbe           { color:inherit; }

/* --- Schrift und Ausrichtung --- */
.unterstrichen.unterstrichen { text-decoration:underline; }
.mittig-text.mittig-text     { text-align:center; }
.mittig.mittig               { margin-inline:auto; }
.reihe-mittig.reihe-mittig   { display:flex; justify-content:center; }
.voll-breit.voll-breit       { width:100%; }
.lese-schmal.lese-schmal     { max-width:70ch; }

/* --- Wiederkehrende Bauteile, die bisher als Inline-Stil im Quelltext standen --- */

/* Anschriftsblock in Impressum, AGB und Widerruf: die Zeilen stehen
   untereinander und brauchen mehr Luft als Fliesstext. */
.anschrift-block.anschrift-block { margin:0; line-height:1.9; }

/* Zeile in der Fusszeile (Anschrift, Oeffnungszeiten, Rechtliches). */
.fuss-zeile.fuss-zeile         { margin:0; font-size:var(--txt-14); }
.fuss-zeile--klein.fuss-zeile--klein { font-size:var(--txt-13); }
/* Die Bezeichnung "Öffnungszeiten:" steht vor den Zeiten, damit die Zeile
   auch ohne eigene Ueberschrift als Oeffnungszeiten erkennbar ist (Runde 10). */
.fuss-zeile .fuss-titel { font-weight:700; }

/* Aufklappbare Frage (<summary>) auf den Service-Seiten. Gemessen stand sie
   338 x 27 px; 2 x 9 px Innenabstand heben sie ueber die 44 px (Runde 10).
   9 px liegen zwischen den Stufen des Rasters - die halbe Zwischenstufe 18
   statt einer rohen Zahl (N8.10); --raum-10 ergaebe 47 statt 45 px. */
.frage.frage { cursor:pointer; font-weight:700; padding-block:calc(var(--raum-18) / 2); }

/* Kleiner Knopf, wo der normale zu wuchtig waere. */
.knopf--klein.knopf--klein { min-height:var(--tipp); padding:0 var(--raum-18); font-size:var(--txt-14); }

/* Schlichter Kasten um einen Hinweis. */
.kasten-schlicht.kasten-schlicht {
  border:var(--rahmen) solid var(--linie); border-radius:var(--rad-12);
  padding:var(--raum-12) var(--raum-14);
}

/* Honigtopf: das unsichtbare Feld, in das nur Maschinen schreiben.
   Nicht display:none - manche Maschinen erkennen das und lassen es aus. */
.honigtopf.honigtopf { position:absolute; left:-9999px; top:-9999px; }

/* --- Abstandsklassen stehen ZULETZT: sie sollen gegen jede
       Bauteilregel gewinnen, die margin zuruecksetzt. --- */
/* --- Abstand nach oben --- */
.oben-0.oben-0    { margin-top:0; }
.oben-8.oben-8    { margin-top:var(--raum-8); }
.oben-10.oben-10  { margin-top:var(--raum-10); }   /* Ausnahme, 2 px neben dem Raster */
.oben-12.oben-12  { margin-top:var(--raum-12); }
.oben-14.oben-14  { margin-top:var(--raum-14); }   /* Ausnahme */
.oben-18.oben-18  { margin-top:var(--raum-18); }   /* Ausnahme */
.oben-20.oben-20  { margin-top:var(--raum-20); }
.oben-22.oben-22  { margin-top:var(--raum-22); }   /* Ausnahme */
.oben-24.oben-24  { margin-top:var(--raum-24); }
.oben-26.oben-26  { margin-top:var(--raum-26); }   /* Ausnahme */
.oben-30.oben-30  { margin-top:var(--raum-30); }   /* Ausnahme */
.oben-32.oben-32  { margin-top:var(--raum-32); }
.oben-34.oben-34  { margin-top:var(--raum-34); }   /* Ausnahme */
.oben-36.oben-36  { margin-top:var(--raum-36); }   /* Ausnahme */
.oben-40.oben-40  { margin-top:var(--raum-40); }
.oben-44.oben-44  { margin-top:var(--raum-44); }
.oben-56.oben-56  { margin-top:var(--raum-56); }

/* --- Abstand nach unten --- */
.unten-6.unten-6   { margin-bottom:var(--raum-6); }   /* Ausnahme */
.unten-8.unten-8   { margin-bottom:var(--raum-8); }
.unten-10.unten-10 { margin-bottom:var(--raum-10); }  /* Ausnahme */
.unten-18.unten-18 { margin-bottom:var(--raum-18); }  /* Ausnahme */
.unten-20.unten-20 { margin-bottom:var(--raum-20); }

/* ==========================================================================
   4c. ZUSTAENDE - stehen bewusst ganz zum Schluss
   ==========================================================================
   Ein gesperrtes Feld muss gesperrt aussehen, egal welche Bauteil- oder
   Hilfsklasse sonst noch daran haengt. Deshalb steht dieser Block nach
   allem anderen.
   ========================================================================== */
/* ---------- Gesperrte Bedienelemente ----------
   Gemessen 26.09.2026: die Uhrzeit-Auswahl im Terminformular sah gesperrt
   genauso aus wie frei - gleicher Grund, gleiche Schrift, gleicher Rahmen,
   gleicher Mauszeiger. 29 disabled-Setzungen in sechs Dateien hatten gar
   keinen sichtbaren Zustand. Nicht ueber Deckkraft, sonst faellt der
   Kontrast unter das Soll. */
.knopf:disabled, .knopf[aria-disabled="true"],
button:disabled,
.feld input:disabled, .feld select:disabled, .feld textarea:disabled,
.werkzeugleiste select:disabled{
  background:var(--sand-200);
  color:var(--sand-600);          /* 4,45:1 auf sand-200 */
  border-color:var(--sand-400);
  box-shadow:none;
  cursor:not-allowed;
  opacity:1;
}

/* ==========================================================================
   4d. LIVEGANG 27.09.2026 - Gewerk A (Kundensicht)
   ==========================================================================
   Vier Befunde der Kundenpruefung vom 27.09.2026, in der Reihenfolge ihrer
   Wirkung: Zulaufwagen benennen statt verstecken, ein echtes Auto in den
   ersten Bildschirm, den Weg zum ganzen Bestand oeffnen, Tippziele auf
   44 px. Keine neuen Farben, keine neuen Schwellenwerte.
   ========================================================================== */

/* ---------- Zulaufwagen (Befund 1) ----------
   Elf der 47 Inserate sind gekauft, stehen aber noch nicht auf dem Hof;
   fotografiert wird erst dort. Bis zum 27.09.2026 zeigte die Fahrzeugseite
   dieser Autos vier Werbekacheln, die bei drei verschiedenen Fahrzeugen
   identisch waren. Jetzt ein eigener, benannter Zustand: kein fremdes Bild,
   dafuer die Einladung, frueh zu fragen. */
.fahne--zulauf{ background:var(--gold-tief); color:var(--weiss); }
.wagen-zulauf{
  margin:0; padding:0 var(--raum-18) var(--raum-16);
  font-size:var(--txt-12); line-height:var(--zeile-145); color:var(--tinte);
}
.wagen-zulauf b{ display:block; font-size:var(--txt-13); }

/* Ueberschrift der zweiten Gruppe im Bestandsraster. Sie laeuft ueber die
   ganze Breite des Rasters, damit die Zulaufwagen als eigenes Angebot
   gelesen werden und nicht als kaputte Karten zwischen den anderen. */
.raster-gruppe{
  grid-column:1/-1;
  margin:var(--raum-18) 0 0;
  padding-top:var(--raum-18);
  border-top:1px solid var(--linie);
}
.raster-gruppe b{ display:block; font-size:var(--txt-18); }
.raster-gruppe span{ font-size:var(--txt-14); color:var(--tinte-leise); }
/* Der Anruf-Satz ist ein Verweis im Fliesstext - als solcher erkennbar,
   aber in der Tinte des Hauses statt in Linkblau. */
.raster-gruppe span a{ color:var(--tinte); font-weight:600; text-decoration:underline; text-underline-offset:.15em; }

/* ---------- Ein echtes Auto im ersten Bildschirm (Befund 3) ----------
   Gemessen bei 375x812: null Fahrzeugbilder, null Preise, einziges Bild war
   das Logo. Die Kachel steht direkt unter den Knoepfen und traegt Foto,
   Preis, Kilometer und Erstzulassung. Feste Kastenmasse (Bild 96x72,
   Kachel mindestens 96 px hoch), damit beim Nachladen des Fotos nichts
   springt. */
.hero-wagen{
  display:flex; align-items:center; gap:var(--raum-12);
  margin-top:var(--raum-18); padding:var(--raum-10) var(--raum-14) var(--raum-10) var(--raum-10);
  min-height:96px;
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
  box-shadow:var(--schatten-marke);
  color:var(--tinte); text-decoration:none;
}
.hero-wagen:hover{ border-color:var(--gold); }
.hero-wagen img{
  width:96px; height:72px; flex-shrink:0;
  object-fit:cover; border-radius:var(--rad-10); background:var(--sand-200);
}
.hero-wagen-text{ display:flex; flex-direction:column; gap:var(--raum-2); min-width:0; flex:1 1 auto; }
.hero-wagen-oben{ font-size:var(--txt-12); font-weight:700; color:var(--gold-tief); text-transform:uppercase; letter-spacing:var(--sperr-6); }
.hero-wagen-titel{ font-size:var(--txt-15); line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hero-wagen-werte{ font-size:var(--txt-12); color:var(--tinte-leise); }
.hero-wagen-preis{
  flex-shrink:0; font-family:var(--schrift-titel); font-size:var(--txt-18);
  font-variant-numeric:tabular-nums;
}

/* Am Handy steht die Kachel direkt hinter den Knoepfen - vor dem
   Versprechen-Block und vor der Bestandszeile. Nur so liegt sie im ersten
   Bildschirm. Umgestellt wird per order, der Quelltext bleibt in seiner
   Lesereihenfolge. */
@media screen and (max-width: 767px){
  .hero-wagen{ order:4; }
  .hero-bestand{ order:5; }
  .versprechen{ order:6; }
  .hero-wagen-preis{ font-size:var(--txt-16); }
}

/* ---------- Weg zum ganzen Bestand (Befund 6) ---------- */
.bestand-tasten{ display:flex; flex-wrap:wrap; gap:var(--raum-12); justify-content:center; }

/* ---------- Sprung auf "Termin" zeigt das Formular (Befund 7) ----------
   Gemessen bei 375x812: nach dem Sprung lag das erste Eingabefeld bei
   y=777 - ausserhalb des Bildschirms und hinter der Aktionsleiste. Am
   Handy stehen deshalb Ueberschrift, dann Formular, dann Erklaertext. Am
   Schreibtisch (ab 1024 px) liegen Text und Formular ohnehin nebeneinander;
   dort aendert sich nichts. */
@media screen and (max-width: 1023px){
  .termin-raster{ display:flex; flex-direction:column; }
  .termin-raster .formular{ order:2; }
  .termin-hinweise{ order:3; }
}

/* ---------- Tippziele auf 44 px (Befund 9, WCAG 2.5.5) ----------
   Gemessen bei 375 px: Logo-Link 86x32, Fusszeilenlinks 35 px hoch,
   Datenschutz-Kaestchen 24x24. Textlinks mitten im Satz bleiben
   ausgenommen (WCAG 2.5.8). */
.marke{ display:inline-flex; align-items:center; min-height:44px; }
.fuss a{ min-height:44px; min-width:44px; display:inline-flex; align-items:center; }
/* Ein Link mitten im Satz darf kein 44-px-Block werden - er wuerde die
   Zeile auseinanderziehen. WCAG 2.5.8 nimmt ihn ausdruecklich aus. */
.fuss p a.erbt-farbe{ display:inline; min-height:0; min-width:0; }
/* Ausnahme von der Ausnahme: "Route planen" steht allein in seiner Zeile
   hinter einem Zeilenumbruch, nicht mitten im Satz - gemessen 103 x 25 px.
   Deshalb doch die volle Fingerhoehe (Runde 10). */
.fuss p a.erbt-farbe[data-firma="karteLink"]{ display:inline-flex; align-items:center; min-height:var(--tipp); }

.zustimmung::before{
  content:''; position:absolute;
  left:-10px; top:50%; transform:translateY(-50%);
  width:44px; height:44px;
}

/* ==========================================================================
   5. SCHLUSS - [hidden] gewinnt
   ==========================================================================
   Wiederkehrender Fehler in diesem Projekt: gibt irgendeine Regel einem
   Element display:grid oder flex, verliert das hidden-Attribut dagegen -
   der Block steht sichtbar da, obwohl das Skript ihn geschlossen hat.
   Frueher stand hier [hidden]{display:none !important}. Das !important ist
   weg: "body [hidden]" ist um eine Stufe genauer als jede Klassenregel und
   steht als letzte Regel der Datei. Regeln mit einer ID im Selektor sind
   staerker - die tragen deshalb :not([hidden]).
   ========================================================================== */
body [hidden]{ display:none; }