/* =========================================================
   AP-Automobile — Design System „Marke 2026"
   Kfz-Handel · Steinenbronn bei Stuttgart
   Petrol / Tinte / Sand — abgestimmt auf Logo & Visitenkarte.

   Aufbau der Datei:
     1. Design-Tokens (Farben, Schrift, Maße)
     2. Grundlagen (Reset, Typografie, Fokus)
     3. Layout-Bausteine
     4. Header & Navigation
     5. Hero & Seitenkopf
     6. Fahrzeuge (Filter, Karten)
     7. Inhaltsbausteine (Karten, Ablauf, Split, Bewertung)
     8. Kontakt & Formulare
     9. Footer
    10. Prosa (Impressum / Datenschutz)
    11. Bewegung & Hilfsklassen
    12. Druckansicht

   Farbprinzip: Papierweiß trägt die Seite, Signalorange setzt die Akzente.
   Getrennt wird mit Haarlinien, nicht mit Schatten.
   ========================================================= */

/* =========================================================
   1. DESIGN-TOKENS
   Hier zentral ändern — wirkt sich auf die ganze Seite aus.
   ========================================================= */
:root{
  /* === Markenwelt „Marke 2026" — Petrol/Tinte statt Orange ===
     Farben abgestimmt auf Logo & Visitenkarte (Straßen-Logo). */

  /* --- Tinte: dunkles Petrol-Anthrazit. Trägt Footer und dunkle Flächen. --- */
  --ink:            #16303A;   /* Grundton Tinte (Visitenkarten-Hintergrund) */
  --ink-2:          #1E3E49;   /* etwas heller, für Karten auf Tinte */
  --ink-3:          #2A5464;   /* Hover-Zustände auf Tinte */
  --ink-deep:       #0E2129;   /* dunkelste Stufe */

  /* --- Helle Flächen --- */
  --paper:          #FFFFFF;   /* Seitenhintergrund */
  --paper-2:        #F5F1EA;   /* Sand — leicht getönte Sektionen */
  --paper-3:        #E9E2D6;   /* Platzhalterflächen, z. B. hinter Fotos */

  /* --- Linien --- */
  --line:           #E6E0D5;   /* Standard-Haarlinie (sandgetönt) */
  --line-strong:    #CDC5B6;   /* betonte Linie, z. B. bei Hover */
  --line-dark:      rgba(255,255,255,.15);  /* Linie auf dunklem Grund */

  /* --- Text --- */
  --text:           #16303A;   /* Fließtext und Überschriften */
  --text-soft:      #5C6E72;   /* Nebentext, Beschriftungen */
  --text-invert:    #FFFFFF;   /* Text auf dunklem Grund */
  --text-invert-soft: rgba(255,255,255,.72);

  /* --- Akzente: Petrol --- */
  --accent:         #0E6B6B;   /* Petrol — das Signal der Marke (auf Hell) */
  --accent-hover:   #0A5757;   /* dunkler beim Überfahren */
  --accent-soft:    #5FD0C4;   /* Petrol hell — Akzent auf Dunkel */
  --accent-ink:     #FFFFFF;   /* Text auf Akzentflächen */
  --signal:         #0E6B6B;   /* Preistipp-Badge */
  --gold:           #E0A83A;   /* Bewertungssterne (warmes Gold) */

  /* --- Typografie: eine Familie, dafür kräftige Gewichte --- */
  --font:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* --- Maße --- */
  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 4px;
  --radius-lg: 6px;
  --shadow-sm: 0 1px 2px rgba(22,48,58,.06);
  --shadow-md: 0 2px 6px rgba(22,48,58,.08), 0 16px 34px -22px rgba(22,48,58,.34);
  --ease: cubic-bezier(.16,.84,.44,1);
}

/* =========================================================
   2. GRUNDLAGEN
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:90px;   /* Ankersprünge nicht unter den Header schieben */
}

body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.68;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

/* Sichtbarer Fokusrahmen für Tastaturbedienung.
   Wichtig für Barrierefreiheit — nur bei Tastatur, nicht bei Mausklick. */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:1px;
}
.section--dark :focus-visible,
.header :focus-visible,
.footer :focus-visible,
.hero__media :focus-visible{ outline-color:var(--accent-soft); }

/* Sprungmarke: erster Tab-Stopp der Seite, führt direkt zum Inhalt */
.skiplink{
  position:absolute; left:50%; top:0; transform:translate(-50%,-120%);
  z-index:200; background:var(--ink); color:#fff;
  padding:.85rem 1.5rem; border-radius:0 0 var(--radius) var(--radius);
  font-size:.85rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  transition:transform .25s var(--ease);
}
.skiplink:focus{ transform:translate(-50%,0); }

/* --- Überschriften --- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.12;
  margin:0;
  text-wrap:balance;      /* verhindert einzelne Wörter in der letzten Zeile */
}
h1{ font-size:clamp(2.5rem, 5.6vw, 4.3rem); line-height:1.06; }
h2{ font-size:clamp(1.9rem, 3.5vw, 2.9rem); }
h3{ font-size:clamp(1.15rem, 1.6vw, 1.4rem); line-height:1.25; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

/* Zahlen laufen in gleicher Breite — Preise und Kilometerstände
   stehen dadurch in Listen sauber untereinander. */
.hero__stat b,
.car__price b,
.car__specs,
.rating__score b,
.rating__facts b,
.split__badge b{ font-variant-numeric:tabular-nums; }

/* =========================================================
   3. LAYOUT-BAUSTEINE
   ========================================================= */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }

.section{ padding:clamp(76px, 9vw, 138px) 0; }
.section--tight{ padding:clamp(56px, 6vw, 88px) 0; }
.section--dark{ background:var(--ink); color:var(--text-invert); }
.section--paper2{ background:var(--paper-2); }

/* Kleine Vorzeile über Überschriften */
.eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--font);
  font-size:.71rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent);
  margin:0 0 1.2rem;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.7; }
.section--dark .eyebrow{ color:var(--accent-soft); }

.lead{ font-size:clamp(1.02rem,1.25vw,1.16rem); color:var(--text-soft); max-width:62ch; }
.section--dark .lead{ color:var(--text-invert-soft); }

.head{ max-width:840px; margin-bottom:clamp(40px,4.5vw,64px); }
/* Herkunfts-Badge: zeigt, dass die Bewertungen von mobile.de stammen */
.source-badge{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.15rem;
  padding:.5rem .95rem; border:1px solid var(--line); border-radius:100px;
  font-size:.8rem; font-weight:600; color:var(--text); background:var(--paper);
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.source-badge svg{ flex:none; }
.source-badge svg:first-child{ color:var(--gold); }
.source-badge:hover{ border-color:var(--accent); color:var(--accent); }
.section--dark .source-badge{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); color:#fff;
}
.section--dark .source-badge svg:first-child{ color:var(--accent-soft); }
.section--dark .source-badge:hover{ border-color:var(--accent-soft); color:#fff; }
.head--split{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,64px); align-items:end; max-width:none;
}
@media (max-width:860px){ .head--split{ grid-template-columns:1fr; align-items:start; } }

/* --- Schaltflächen --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1.02rem 1.9rem;
  font-size:.82rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid transparent; border-radius:var(--radius);
  cursor:pointer; transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:15px; height:15px; transition:transform .35s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }

.btn--primary{ background:var(--accent); color:var(--accent-ink); }
.btn--primary:hover{ background:var(--accent-hover); }

/* Sekundär auf hellem Grund: nur Kontur, füllt sich beim Überfahren */
.btn--ghost{ border-color:var(--line-strong); color:var(--text); background:transparent; }
.btn--ghost:hover{ border-color:var(--ink); background:var(--ink); color:#fff; }

.btn--dark{ background:var(--ink); color:var(--text-invert); }
.btn--dark:hover{ background:var(--ink-deep); }

.btn--line{ border-color:var(--line); color:var(--text); background:#fff; }
.btn--line:hover{ border-color:var(--ink); }

.btn--sm{ padding:.78rem 1.35rem; font-size:.74rem; }

/* Auf blauem Grund kehrt sich der Kontur-Button um */
.section--dark .btn--ghost,
.cta-band .btn--ghost{ border-color:rgba(255,255,255,.4); color:#fff; }
.section--dark .btn--ghost:hover,
.cta-band .btn--ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent);
  border-bottom:1px solid currentColor; padding-bottom:.32rem;
  transition:gap .3s var(--ease), color .3s var(--ease);
}
.link-arrow:hover{ gap:.95rem; color:var(--accent-hover); }
.section--dark .link-arrow{ color:var(--accent-soft); }
.section--dark .link-arrow:hover{ color:#fff; }

/* =========================================================
   4. HEADER & NAVIGATION
   Der Header liegt fest oben und wird beim Scrollen blau hinterlegt.
   ========================================================= */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:.9rem 0;
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

/* Zustand 1: über dem hellen Hero — blaue Schrift auf Weiß */
.header{ background:rgba(255,255,255,.9); backdrop-filter:saturate(150%) blur(12px); border-bottom-color:var(--line); }

/* Zustand 2: gescrollt oder Unterseite — kräftiger abgesetzt */
.header.is-solid,
.header.is-inner{
  background:rgba(255,255,255,.94);
  border-bottom-color:var(--line);
  padding:.6rem 0;
}
/* Unterseiten haben einen blauen Seitenkopf — dort steht der Header auf Blau */
.header.is-inner{
  background:rgba(22,48,58,.93);
  border-bottom-color:var(--line-dark);
}

/* --- Logo (Straßen-Zeichen: AP über Asphalt) --- */
.logo{ display:flex; align-items:center; gap:.75rem; color:var(--text); }
/* Das Zeichen nimmt über currentColor die Farbe der Umgebung an:
   Tinte auf hellem Grund, Weiß auf dunklem. Genau wie die beiden
   Logo-Fassungen auf der Visitenkarte. */
.logo__mark{
  width:40px; height:40px; flex:none;
  display:block; color:var(--text);
  transition:color .3s var(--ease);
}
.logo__mark svg{ width:100%; height:100%; display:block; }
.logo__text{ display:flex; flex-direction:column; line-height:1.06; }
.logo__name{
  font-family:var(--font-display); font-weight:700; font-size:1.06rem;
  letter-spacing:-.01em;
}
.logo__sub{
  font-family:var(--font);
  font-size:.6rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent);   /* „Steinenbronn" in Petrol, wie im Logo */
}

/* --- Navigation --- */
.nav{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.1rem); }
.nav a{
  position:relative; font-size:.86rem; font-weight:500; letter-spacing:.01em;
  color:var(--text); opacity:.72; transition:opacity .25s;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-7px; width:100%; height:1.5px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav a:hover{ opacity:1; }
.nav a:hover::after,
.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ opacity:1; font-weight:600; }

.header__cta{ display:flex; align-items:center; gap:1rem; }
.header__phone{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--text); font-size:.88rem; font-weight:600; letter-spacing:.01em;
}
.header__phone svg{ width:15px; height:15px; color:var(--accent); }

.burger{
  display:none; position:relative; z-index:3;
  width:44px; height:44px; border:1px solid var(--line);
  background:transparent; border-radius:var(--radius); cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.burger span{ display:block; width:18px; height:1.5px; background:var(--text); transition:.3s var(--ease); }
.burger.is-open span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* Auf Unterseiten steht der Header auf Blau — alles hell einfärben */
.header.is-inner .logo,
.header.is-inner .nav a,
.header.is-inner .header__phone{ color:var(--text-invert); }
.header.is-inner .logo__mark{ color:#fff; }
.header.is-inner .logo__sub{ color:var(--accent-soft); }
.header.is-inner .header__phone svg{ color:var(--accent-soft); }
.header.is-inner .nav a::after{ background:var(--accent-soft); }
.header.is-inner .burger{ border-color:var(--line-dark); }
.header.is-inner .burger span{ background:#fff; }

/* --- Mobiles Menü --- */
@media (max-width:1080px){
  /* Der Header-Weichzeichner (backdrop-filter) macht den Header zum
     Bezugsrahmen für das fixierte Menü und würde es sonst auf Header-Höhe
     einsperren. Auf dem Handy deshalb kein Blur, dafür deckender Grund. */
  .header,
  .header.is-solid{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--paper); }
  .header.is-inner{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--ink); }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(84vw,380px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:1.7rem;
    background:var(--ink); padding:2rem var(--gutter);
    transform:translateX(102%); transition:transform .45s var(--ease);
    border-left:1px solid var(--line-dark);
  }
  .nav.is-open{ transform:none; }
  .nav a,
  .header.is-inner .nav a{
    font-size:1.35rem; font-family:var(--font-display); font-weight:600;
    color:var(--text-invert); opacity:.85;
  }
  .nav a::after{ background:var(--accent-soft); }
  .burger{ display:flex; }
  .header__phone span{ display:none; }
  /* Menü offen: Bedienelemente hell, damit sie auf dem dunklen Panel sichtbar bleiben */
  .burger.is-open span{ background:#fff; }
  .header:has(.nav.is-open) .headtool{ color:#fff; border-color:rgba(255,255,255,.35); }
}

/* Enger Handy-Kopf: Telefon steckt schon im schwebenden Anruf-Knopf,
   deshalb hier ausblenden, damit Logo, Merkliste, Sprache und Menü passen. */
@media (max-width:640px){
  .logo__name{ white-space:nowrap; }
  .header__cta{ gap:.5rem; }
  .header__phone{ display:none; }
  .headtool--merk{ width:38px; height:38px; }
  .headtool--lang{ height:38px; }
}
@media (max-width:480px){
  .header__cta{ gap:.4rem; }
  .headtool--lang svg{ display:none; }        /* Globus weg, „EN"/„DE" genügt */
  .headtool--lang{ padding:0 .55rem; }
  .headtool--merk{ width:34px; }
  .logo__sub{ font-size:.55rem; }
}
@media (max-width:360px){
  .logo__name{ font-size:.98rem; }
}

/* =========================================================
   5. HERO & SEITENKOPF
   Der Hero ist hell: Text auf Weiß, Foto rechts angeschnitten.
   ========================================================= */
/* Neutraler Hero ohne Foto: ruhiger Sandton, ein dezenter, sehr
   zurückhaltender Farbakzent statt eines Bildes. */
.hero{
  position:relative;
  display:flex; flex-direction:column; justify-content:center;
  min-height:min(74vh,660px);
  padding-block:clamp(120px,14vw,168px) clamp(40px,5vw,60px);
  background:var(--paper-2); color:var(--text);
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
/* dezenter, neutraler Akzent oben rechts (kein Foto) */
.hero::after{
  content:""; position:absolute; right:-8%; top:-32%;
  width:48%; aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(14,107,107,.10) 0%, rgba(14,107,107,0) 66%);
}

.hero__inner{ position:relative; z-index:2; width:100%; }
.hero__content{ max-width:min(760px,100%); padding-bottom:clamp(36px,4.5vw,56px); }
.hero h1 span{ display:block; color:var(--accent); }
.hero__lead{ margin-top:1.5rem; font-size:clamp(1.02rem,1.35vw,1.16rem); color:var(--text-soft); max-width:56ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem; }

.hero__stats{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4,1fr);
  max-width:840px;
  border-top:1px solid var(--line-strong);
}
.hero__stat{ padding:1.3rem 1.4rem 1.4rem; border-left:1px solid var(--line); }
.hero__stat:first-child{ border-left:0; padding-left:0; }
.hero__stat b{
  display:block; font-family:var(--font-display);
  font-size:clamp(1.4rem,2.1vw,1.85rem); font-weight:700; letter-spacing:-.025em;
}
.hero__stat small{
  display:block; margin-top:.28rem;
  font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--text-soft);
}

@media (max-width:720px){
  .hero{ min-height:0; padding-block:clamp(104px,20vw,128px) clamp(24px,6vw,36px); }
  .hero__stats{ grid-template-columns:repeat(2,1fr); max-width:none; }
  .hero__stat{ border-left:1px solid var(--line); }
  .hero__stat:nth-child(odd){ border-left:0; padding-left:0; }
  .hero__stat:nth-child(n+3){ border-top:1px solid var(--line); }
}
@media (max-width:520px){
  .hero__stat{ padding:1.05rem .9rem; }
  .hero__stat:nth-child(odd){ padding-left:0; }
}

/* --- Seitenkopf der Unterseiten (blau) --- */
.pagehead{
  background:var(--ink); color:var(--text-invert);
  padding:clamp(146px,15vw,196px) 0 clamp(58px,7vw,86px);
  position:relative; overflow:hidden;
}
.pagehead::after{
  content:""; position:absolute; right:-8%; top:-40%; width:52%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(255,168,40,.20) 0%, transparent 68%);
}
.pagehead__inner{ position:relative; z-index:2; max-width:820px; }
.pagehead .lead{ margin-top:1.2rem; }
.crumb{
  font-size:.73rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-invert-soft); margin-bottom:1.1rem;
}
.crumb a:hover{ color:#fff; }

/* --- Markenband --- */
.brands{ background:var(--paper-2); border-bottom:1px solid var(--line); padding:1.5rem 0; }
.brands__inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.brands__label{
  font-size:.69rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-soft);
}
.brands__list{ display:flex; align-items:center; gap:clamp(1.4rem,4vw,3.4rem); flex-wrap:wrap; }
.brands__list span{
  font-family:var(--font); font-weight:600; font-size:clamp(.82rem,1.2vw,.95rem);
  letter-spacing:.16em; color:var(--text-soft); transition:color .3s;
}
.brands__list span:hover{ color:var(--ink); }

/* =========================================================
   6. FAHRZEUGE
   ========================================================= */
.filterbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem;
  margin-bottom:2.6rem;
  border-top:1px solid var(--line);
  padding-top:1.7rem;
}
.chip{
  padding:.58rem 1.1rem; border:1px solid var(--line); background:transparent;
  border-radius:var(--radius);
  font-size:.8rem; font-weight:500; color:var(--text-soft); cursor:pointer;
  transition:border-color .25s, color .25s, background .25s;
}
.chip:hover{ border-color:var(--line-strong); color:var(--text); }
.chip.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.chip b{ font-weight:600; opacity:.55; margin-left:.4rem; font-size:.74rem; }
.filterbar__spacer{ flex:1 1 auto; }

.select{
  appearance:none; padding:.6rem 2.4rem .6rem 1rem; border:1px solid var(--line);
  background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C736C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center/14px;
  border-radius:var(--radius); font-size:.8rem; color:var(--text); cursor:pointer;
}
.result-count{
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-soft);
}

.grid-cars{
  display:grid; gap:clamp(20px,2.2vw,30px);
  grid-template-columns:repeat(auto-fill, minmax(330px,1fr));
}
@media (max-width:720px){ .grid-cars{ grid-template-columns:1fr; } }

/* Fahrzeugkarte — bewusst ruhig: Linie statt Schatten */
.car{
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.car:hover{ border-color:var(--line-strong); box-shadow:var(--shadow-md); }
.car__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-3); }
.car__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.car:hover .car__media img{ transform:scale(1.04); }
.car__tag{
  position:absolute; top:12px; left:12px;
  background:rgba(22,48,58,.88); color:#fff; backdrop-filter:blur(6px);
  padding:.38rem .68rem; border-radius:var(--radius);
  font-size:.65rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.car__tag--accent{ background:var(--signal); }

.car__body{ padding:1.4rem 1.45rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.car__brand{
  font-family:var(--font);
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-soft); font-weight:600;
}
.car__title{
  margin:.5rem 0 .95rem; font-size:1.1rem; line-height:1.3;
  font-family:var(--font-display); font-weight:700; letter-spacing:-.015em;
}
.car__specs{
  display:grid; grid-template-columns:1fr 1fr; gap:.5rem .9rem;
  padding:.9rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-size:.82rem; color:var(--text-soft);
}
.car__specs div{ display:flex; align-items:center; gap:.5rem; }
.car__specs svg{ width:14px; height:14px; flex:none; color:var(--text-soft); opacity:.75; }
.car__usp{ margin-top:.85rem; font-size:.78rem; color:var(--accent); font-weight:500; }
.car__foot{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  margin-top:1.15rem;
}
.car__price b{
  display:block; font-family:var(--font-display);
  font-size:1.55rem; font-weight:700; letter-spacing:-.025em;
}
.car__price small{ font-size:.71rem; color:var(--text-soft); }
.car__cta{
  display:inline-flex; align-items:center; gap:.45rem; padding:.64rem 1rem;
  border:1px solid var(--line); border-radius:var(--radius);
  font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.car__cta:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
/* Das kleine Symbol zeigt an, dass der Link mobile.de in einem neuen Tab öffnet. */
.car__cta svg{ width:13px; height:13px; flex:none; opacity:.75; }
/* Direkter Link zum Inserat auf mobile.de */
.car__mobile{
  display:inline-flex; align-items:center; gap:.4rem; align-self:flex-start;
  margin-top:.9rem; font-size:.76rem; font-weight:600; color:var(--accent);
}
.car__mobile svg{ width:13px; height:13px; flex:none; opacity:.8; }
.car__mobile:hover{ color:var(--ink); text-decoration:underline; }

.empty{
  padding:4rem 0; text-align:center; color:var(--text-soft);
  grid-column:1 / -1;   /* füllt das ganze Raster, statt links zu kleben */
}

/* =========================================================
   7. INHALTSBAUSTEINE
   ========================================================= */
.grid-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(18px,2vw,26px); }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.7rem,2.4vw,2.3rem);
  transition:border-color .3s var(--ease);
}
.card:hover{ border-color:var(--line-strong); }
.card__ico{
  width:44px; height:44px; display:grid; place-items:center; margin-bottom:1.3rem;
  border:1px solid var(--line); border-radius:var(--radius); color:var(--accent);
}
.card__ico svg{ width:20px; height:20px; }
.card h3{ margin-bottom:.6rem; }
.card p{ color:var(--text-soft); font-size:.94rem; }
.section--paper2 .card{ background:var(--paper); }
.section--dark .card{ background:var(--ink-2); border-color:var(--line-dark); }
.section--dark .card:hover{ border-color:rgba(255,255,255,.3); }
.section--dark .card p{ color:var(--text-invert-soft); }
.section--dark .card__ico{ border-color:var(--line-dark); color:var(--accent-soft); }

/* Nummerierte Ablaufliste */
.steps{
  counter-reset:s; margin:0; padding:0;
  display:grid; gap:1px; background:var(--line-dark);
  border-block:1px solid var(--line-dark);
}
.steps li{
  list-style:none; display:grid; grid-template-columns:auto 1fr; gap:1.7rem;
  padding:1.9rem 0; background:var(--ink); align-items:start;
}
.steps li::before{
  counter-increment:s; content:"0" counter(s);
  font-family:var(--font-display); font-size:1.5rem; font-weight:600; color:var(--accent-soft);
  font-variant-numeric:tabular-nums;
}
.steps h3{ margin-bottom:.45rem; }
.steps p{ color:var(--text-invert-soft); font-size:.95rem; max-width:60ch; }
@media (max-width:560px){
  .steps li{ gap:1rem; }
}

/* Bild + Text nebeneinander */
.split{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:clamp(30px,5vw,72px); align-items:center;
}
.split__media{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:5/4; background:var(--paper-3);
}
.split__media img{ width:100%; height:100%; object-fit:cover; }
.split__badge{
  position:absolute; left:0; bottom:0; background:var(--ink); color:#fff;
  padding:1.1rem 1.4rem; max-width:70%;
}
.split__badge b{ display:block; font-family:var(--font-display); font-size:1.8rem; font-weight:600; line-height:1; }
.split__badge small{ font-size:.71rem; letter-spacing:.14em; text-transform:uppercase; opacity:.85; }

/* Häkchenliste */
.ticks{ list-style:none; padding:0; margin:1.9rem 0 0; display:grid; gap:.85rem; }
.ticks li{
  display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start;
  font-size:.97rem;
}
.ticks svg{ width:18px; height:18px; margin-top:.28rem; color:var(--accent); flex:none; }
.section--dark .ticks svg{ color:var(--accent-soft); }

/* Bewertungsblock */
.rating{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1.6rem,4vw,3.4rem); align-items:center;
  padding:clamp(1.9rem,3vw,2.8rem);
  border:1px solid var(--line-dark); border-radius:var(--radius-lg);
  background:linear-gradient(135deg, var(--ink-2), var(--ink));
}
@media (max-width:760px){ .rating{ grid-template-columns:1fr; text-align:left; } }
.rating__score{ text-align:center; }
.rating__score b{
  display:block; font-family:var(--font-display);
  font-size:clamp(3rem,7vw,4.4rem); font-weight:600; line-height:1; letter-spacing:-.025em;
}
.rating__stars{ color:var(--gold); letter-spacing:.18em; font-size:1.05rem; margin-top:.5rem; }
.rating__score small{
  display:block; margin-top:.5rem;
  font-size:.73rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-invert-soft);
}
.rating__facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1.4rem; margin-bottom:1.6rem;
}
.rating__facts b{ display:block; font-family:var(--font-display); font-size:1.6rem; font-weight:600; }
.rating__facts small{
  font-size:.73rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-invert-soft);
}

/* Aufforderungsband */
.cta-band{ background:var(--ink); color:#fff; padding:clamp(58px,7vw,92px) 0; }
.cta-band__inner{
  display:grid; grid-template-columns:1fr auto; gap:clamp(1.6rem,4vw,3rem); align-items:center;
}
@media (max-width:860px){ .cta-band__inner{ grid-template-columns:1fr; } }
.cta-band h2{ font-size:clamp(1.75rem,3.2vw,2.7rem); }
.cta-band p{ margin-top:.95rem; color:var(--text-invert-soft); max-width:56ch; }
.cta-band .btn--dark{ background:#fff; color:var(--ink); }
.cta-band .btn--dark:hover{ background:var(--accent-soft); color:var(--ink); }

/* =========================================================
   8. KONTAKT & FORMULARE
   ========================================================= */
.contact-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(32px,5vw,70px);
}
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

.infolist{ display:grid; gap:1.7rem; margin-top:2rem; }
.infolist__row{ display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start; }
.infolist__ico{
  width:40px; height:40px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:var(--radius); color:var(--accent); flex:none;
}
.section--dark .infolist__ico{ border-color:var(--line-dark); color:var(--accent-soft); }
.infolist__ico svg{ width:17px; height:17px; }
.infolist dt{
  font-size:.71rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-soft); margin-bottom:.25rem;
}
.section--dark .infolist dt{ color:var(--text-invert-soft); }
.infolist dd{ margin:0; font-size:1.02rem; font-weight:500; }
.infolist dd a:hover{ color:var(--accent); text-decoration:underline; }
.section--dark .infolist dd a:hover{ color:var(--accent-soft); }

.form{ display:grid; gap:1.15rem; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }
@media (max-width:560px){ .form__row{ grid-template-columns:1fr; } }
.field{ display:grid; gap:.45rem; }
/* Ausgeblendetes Feld (z. B. das Freitextfeld im Ankauf) wirklich verbergen —
   das display:grid oben würde das hidden-Attribut sonst überstimmen. */
.field[hidden]{ display:none; }
/* Gesperrtes Auswahlfeld (Modell, bevor eine Marke gewählt ist) */
.field select:disabled{ opacity:.5; cursor:not-allowed; background:var(--paper-2); }
.field label{
  font-size:.71rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-soft); font-weight:600;
}
.field input,.field textarea,.field select{
  font:inherit; font-size:.95rem; padding:.85rem 1rem;
  border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; color:var(--text);
  transition:border-color .25s, box-shadow .25s;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(14,107,107,.18);
}
/* Pflichtfelder kennzeichnen, sobald der Browser sie als leer meldet */
/* Rot erst, wenn der Besucher das Feld tatsächlich falsch ausgefüllt oder
   übersprungen hat – nicht schon beim Laden der leeren Seite. */
.field input:user-invalid,
.field textarea:user-invalid{ border-color:var(--signal); }

.form__note{ font-size:.78rem; color:var(--text-soft); line-height:1.55; }
.form__note a{ text-decoration:underline; }
/* Rückmeldung nach dem Absenden */
.form__note.is-ok{ color:var(--accent); font-weight:600; }
.form__note.is-error{ color:var(--signal); font-weight:600; }
/* Verstecktes Spam-Feld („Honeypot") — für Menschen unsichtbar, für Bots ein Köder */
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }

/* Danke-Seite: Knopfreihe */
.dank-actions{ display:flex; flex-wrap:wrap; gap:.8rem; }
.check{
  display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start;
  font-size:.83rem; color:var(--text-soft);
}
.check input{ margin-top:.28rem; accent-color:var(--accent); width:16px; height:16px; }

.map{ border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/10; }
.map iframe{ width:100%; height:100%; border:0; filter:grayscale(.45) contrast(1.04); }

/* =========================================================
   9. FOOTER
   ========================================================= */
.footer{ background:var(--ink); color:var(--text-invert); padding:clamp(58px,6vw,88px) 0 0; }
.footer__grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(24px,3.5vw,48px);
  padding-bottom:clamp(38px,4vw,56px);
}
@media (max-width:900px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .footer__grid{ grid-template-columns:1fr; } }
.footer .logo{ color:var(--text-invert); }
.footer .logo__mark{ color:#fff; }
.footer .logo__sub{ color:var(--accent-soft); }
/* Spaltenüberschriften im Footer. Bewusst h2 im Markup, damit die
   Überschriftenfolge der Seite nicht von h2 auf h4 springt — optisch
   bleiben sie klein. */
.footer__title{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-invert-soft); margin-bottom:1.15rem;
  font-family:var(--font); font-weight:600; line-height:1.4;
}
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.footer a{ color:rgba(255,255,255,.8); font-size:.93rem; transition:color .25s; }
.footer a:hover{ color:#fff; text-decoration:underline; }
.footer__about p{ color:var(--text-invert-soft); font-size:.93rem; margin-top:1.25rem; max-width:34ch; }
.footer__bar{
  border-top:1px solid var(--line-dark); padding:1.4rem 0 1.8rem;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-size:.78rem; color:var(--text-invert-soft);
}
.footer__bar a{ font-size:.78rem; }
.legal-note{
  font-size:.72rem; color:rgba(255,255,255,.5); line-height:1.65;
  padding-bottom:1.6rem; max-width:90ch;
}

/* =========================================================
   10. PROSA (Impressum / Datenschutz)
   ========================================================= */
.prose{ max-width:74ch; }
.prose h2{ font-size:clamp(1.35rem,2.1vw,1.8rem); margin:2.8rem 0 .9rem; }
.prose h3{ font-size:1.05rem; margin:1.9rem 0 .5rem; }
.prose p,.prose li{ color:var(--text-soft); font-size:.97rem; }
.prose ul{ padding-left:1.1rem; display:grid; gap:.4rem; }
.prose a{ color:var(--accent); text-decoration:underline; }
.prose a:hover{ color:var(--accent-hover); }
/* Hinweiskasten für noch offene Angaben — vor dem Livegang entfernen */
.todo{
  background:#FFF8EC; border:1px solid #EFD9AE; border-left:3px solid var(--signal);
  padding:1rem 1.2rem; border-radius:var(--radius);
  font-size:.9rem; color:#6B4A22; margin:1rem 0;
}

/* =========================================================
   11. BEWEGUNG & HILFSKLASSEN
   ========================================================= */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt keine */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* Nur für Screenreader sichtbar */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* =========================================================
   11b. FEATURES: Sprachumschalter, Merkliste, Schnellansicht,
        Finanzierungsrechner, erweiterte Filter, schwebende Buttons
   ========================================================= */

/* --- Werkzeuge in der Kopfzeile (Sprache, Merkliste) --- */
.headtool{
  position:relative; display:inline-flex; align-items:center; gap:.4rem;
  height:40px; padding:0 .7rem;
  border:1px solid var(--line); border-radius:var(--radius);
  background:transparent; color:var(--text); cursor:pointer;
  font:inherit; font-size:.8rem; font-weight:600; letter-spacing:.04em;
  transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.headtool svg{ width:16px; height:16px; }
.headtool:hover{ border-color:var(--line-strong); }
.headtool--merk{ width:40px; padding:0; justify-content:center; }
.headtool--merk.has-items,
.headtool--merk:hover{ color:var(--accent); }
.headtool__badge{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px;
  display:grid; place-items:center; border-radius:100px;
  background:var(--accent); color:#fff; font-size:.68rem; font-weight:700; line-height:1;
}
.headtool__badge[hidden]{ display:none; }
.header.is-inner .headtool{ color:var(--text-invert); border-color:var(--line-dark); }
.header.is-inner .headtool:hover{ border-color:rgba(255,255,255,.4); }
@media (max-width:1080px){
  .headtool--lang span{ display:inline; }
}
@media (max-width:520px){
  .headtool--lang{ padding:0 .55rem; }
}

/* --- Herz & Schnellansicht auf der Fahrzeugkarte --- */
.car__media{ position:relative; }
.car__fav{
  position:absolute; top:12px; right:12px; z-index:2;
  width:40px; height:40px; display:grid; place-items:center;
  border:0; border-radius:100px; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--text);
  box-shadow:var(--shadow-sm); transition:transform .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.car__fav svg{ width:19px; height:19px; }
.car__fav:hover{ transform:scale(1.08); }
.car__fav.is-on{ color:#fff; background:var(--accent); }
.car__fav.is-on svg{ fill:currentColor; }

.car__quick{
  position:absolute; left:12px; bottom:12px; z-index:2;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem .85rem; border:0; border-radius:var(--radius); cursor:pointer;
  background:rgba(22,48,58,.86); color:#fff; backdrop-filter:blur(4px);
  font:inherit; font-size:.74rem; font-weight:600; letter-spacing:.03em;
  opacity:0; transform:translateY(6px); transition:opacity .3s var(--ease), transform .3s var(--ease), background .2s;
}
.car__quick svg{ width:15px; height:15px; }
.car:hover .car__quick,
.car__quick:focus-visible{ opacity:1; transform:none; }
.car__quick:hover{ background:var(--accent); }
@media (hover:none){ .car__quick{ opacity:1; transform:none; } }

.car__titlebtn{
  font:inherit; color:inherit; background:none; border:0; padding:0; margin:0;
  text-align:left; cursor:pointer;
}
.car__titlebtn:hover{ color:var(--accent); }
.car__cta{ border:0; background:none; cursor:pointer; font:inherit; }

/* --- Erweiterte Filterleiste (zweite Zeile) --- */
.filter2{
  flex:1 1 100%; order:5;
  display:flex; flex-wrap:wrap; gap:.55rem; align-items:center;
  margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line);
}
.filter2__search{
  position:relative; flex:1 1 220px; min-width:180px; display:flex; align-items:center;
}
.filter2__search svg{ position:absolute; left:.85rem; width:16px; height:16px; color:var(--text-soft); pointer-events:none; }
.filter2__search input{
  width:100%; padding:.6rem .9rem .6rem 2.4rem;
  border:1px solid var(--line); border-radius:var(--radius); background:#fff;
  font:inherit; font-size:.85rem; color:var(--text);
}
.filter2__preis{
  width:110px; padding:.6rem .8rem; border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; font:inherit; font-size:.85rem; color:var(--text);
}
.filter2 .select{ min-width:150px; }
.filter2 [data-merk-chip]{ display:inline-flex; align-items:center; gap:.4rem; }
.filter2 [data-merk-chip] svg{ width:15px; height:15px; }
.filter2 [data-merk-chip].is-active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.filter2 [data-merk-chip].is-active svg{ fill:currentColor; }
.filter2__reset{
  margin-left:auto; padding:.55rem .9rem; border:0; background:none; cursor:pointer;
  font:inherit; font-size:.78rem; font-weight:600; color:var(--text-soft);
  text-decoration:underline; text-underline-offset:3px;
}
.filter2__reset:hover{ color:var(--accent); }
.filter2__search input:focus,
.filter2__preis:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(14,107,107,.12); }

/* Umschalter für die Detailfilter — nur auf dem Handy sichtbar.
   Am Desktop bleiben die Filter dauerhaft offen. */
.filter2__toggle{ display:none; }
@media (max-width:720px){
  .filter2__toggle{
    order:4; flex:1 1 100%; margin-top:1rem;
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.75rem 1rem; border:1px solid var(--line); border-radius:var(--radius);
    background:#fff; cursor:pointer; font:inherit; font-size:.85rem; font-weight:600; color:var(--text);
  }
  .filter2__toggle svg{ width:16px; height:16px; }
  .filter2__toggle.is-open{ border-color:var(--accent); color:var(--accent); }
  .filter2{ display:none; margin-top:.7rem; padding-top:0; border-top:0; }
  .filter2.is-open{ display:flex; }
  .filter2__search{ flex:1 1 100%; }
  .filter2 .select{ flex:1 1 100%; }
  .filter2__preis{ flex:1 1 calc(50% - .3rem); width:auto; }
  .filter2 [data-merk-chip],
  .filter2__cmp{ flex:1 1 calc(50% - .3rem); justify-content:center; }
  .filter2__reset{ flex:1 1 100%; margin-left:0; text-align:center; padding:.6rem; }
}

/* --- Schnellansicht (Modal) --- */
.qv{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:clamp(12px,3vw,32px); }
.qv[hidden]{ display:none; }
.qv__backdrop{ position:absolute; inset:0; background:rgba(26,22,19,.6); opacity:0; transition:opacity .26s var(--ease); }
.qv.is-open .qv__backdrop{ opacity:1; }
.qv__box{
  position:relative; z-index:1; width:min(920px,100%); max-height:92vh; overflow:auto;
  background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  transform:translateY(14px) scale(.98); opacity:0;
  transition:transform .26s var(--ease), opacity .26s var(--ease);
}
.qv.is-open .qv__box{ transform:none; opacity:1; }
.qv__close{
  position:absolute; top:12px; right:12px; z-index:3;
  width:40px; height:40px; display:grid; place-items:center;
  border:0; border-radius:100px; cursor:pointer;
  background:rgba(255,255,255,.9); color:var(--text); box-shadow:var(--shadow-sm);
}
.qv__close svg{ width:18px; height:18px; }
.qv__close:hover{ background:#fff; color:var(--accent); }
.qv__inner{ display:grid; grid-template-columns:1.05fr 1fr; align-items:start; }
@media (max-width:720px){ .qv__inner{ grid-template-columns:1fr; } }
.qv__media{ position:relative; background:var(--paper-3); aspect-ratio:16/10; }
.qv__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.qv__fav{ top:12px; left:12px; right:auto; }
.qv__content{ padding:clamp(1.4rem,3vw,2.2rem); }
.qv__content h3{ margin:.5rem 0 1rem; font-size:clamp(1.3rem,2.4vw,1.7rem); }
.qv__specs{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1rem; padding:1rem 0; border-block:1px solid var(--line); }
.qv__specs div{ display:flex; align-items:center; gap:.55rem; font-size:.9rem; color:var(--text-soft); }
.qv__specs i{ display:inline-flex; color:var(--accent); }
.qv__specs svg{ width:17px; height:17px; }
.qv__usp{ margin:1rem 0 0; color:var(--accent); font-weight:600; font-size:.9rem; }
.qv__price{ display:flex; align-items:baseline; gap:.7rem; margin:1rem 0 1.4rem; }
.qv__price b{ font-size:1.9rem; font-weight:800; letter-spacing:-.02em; }
.qv__price small{ font-size:.78rem; color:var(--text-soft); }
.qv__actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.5rem; }
.qv__actions .btn{ flex:1 1 auto; }

/* --- Finanzierungsrechner --- */
.fin{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.2rem; }
.fin__head{ display:flex; align-items:center; gap:.5rem; margin-bottom:.9rem; }
.fin__head svg{ width:18px; height:18px; color:var(--accent); }
.fin__head strong{ font-size:.86rem; letter-spacing:.02em; }
.fin__teaser{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.fin__teaser span{ font-size:.85rem; color:var(--text-soft); }
.fin__teaser b{ font-size:1.6rem; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; }
.fin__teaser b small{ font-size:.85rem; font-weight:600; color:var(--text-soft); }
.fin__partner{ margin:.5rem 0 .9rem; font-size:.78rem; line-height:1.5; color:var(--text-soft); }
.fin__cta{ width:100%; justify-content:center; }
.fin__note{ margin:.8rem 0 0; font-size:.7rem; line-height:1.5; color:var(--text-soft); }

/* --- Schwebende Buttons (WhatsApp, Anruf, nach oben) --- */
.fab{ position:fixed; right:clamp(14px,3vw,26px); bottom:clamp(14px,3vw,26px); z-index:250;
  display:flex; flex-direction:column; gap:.6rem; }
.fab__btn{
  width:52px; height:52px; display:grid; place-items:center; border:0; cursor:pointer;
  border-radius:100px; color:#fff; box-shadow:var(--shadow-md);
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.fab__btn svg{ width:24px; height:24px; }
.fab__btn:hover{ transform:translateY(-2px); }
.fab__btn--wa{ background:#25D366; }
.fab__btn--call{ background:var(--accent); }
.fab__btn--call svg{ width:20px; height:20px; }
.fab__btn--top{ background:var(--ink); }
.fab__btn--top[hidden]{ display:none; }
/* Am Desktop genügt der Sprach-/Kontaktweg oben — Anruf-Knopf v. a. mobil */
@media (min-width:721px){ .fab__btn--call{ display:none; } }

/* --- Kundenstimmen --- */
.testi{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px);
  margin-top:clamp(32px,4vw,48px);
}
@media (max-width:820px){ .testi{ grid-template-columns:1fr; } }
.testi__card{
  margin:0; padding:1.6rem 1.5rem; display:flex; flex-direction:column; gap:.9rem;
  background:var(--ink-2); border:1px solid var(--line-dark); border-radius:var(--radius-lg);
}
.testi__stars{ color:var(--gold); letter-spacing:.14em; }
.testi__card blockquote{ margin:0; font-size:1rem; line-height:1.6; color:var(--text-invert); }
.testi__card figcaption{ margin-top:auto; display:flex; flex-direction:column; gap:.1rem; }
.testi__card figcaption b{ font-weight:600; }
.testi__card figcaption span{ font-size:.8rem; color:var(--text-invert-soft); }
.testi__note{ margin-top:1.6rem; font-size:.8rem; color:var(--text-invert-soft); }

/* --- FAQ (Aufklappen) --- */
.faq{ max-width:820px; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{
  cursor:pointer; list-style:none; position:relative;
  padding:1.25rem 2.6rem 1.25rem 0;
  font-family:var(--font-display); font-weight:600; font-size:clamp(1.02rem,1.4vw,1.18rem); color:var(--text);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:""; position:absolute; right:.5rem; top:50%; width:11px; height:11px; margin-top:-8px;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
.faq__item[open] summary::after{ transform:rotate(-135deg); }
.faq__item summary:hover{ color:var(--accent); }
.faq__a{ padding:0 2.6rem 1.4rem 0; }
.faq__a p{ margin:0; color:var(--text-soft); font-size:.98rem; line-height:1.7; }

/* --- Teilen/Drucken in der Schnellansicht --- */
.qv__mini{ display:flex; gap:1.4rem; margin-top:1rem; }
.qv__mini button{
  display:inline-flex; align-items:center; gap:.45rem; padding:.3rem 0;
  border:0; background:none; cursor:pointer; font:inherit; font-size:.8rem; font-weight:600; color:var(--text-soft);
}
.qv__mini svg{ width:16px; height:16px; }
.qv__mini button:hover{ color:var(--accent); }

/* --- Vergleichs-Knopf in der Filterleiste --- */
.filter2__cmp{ display:inline-flex; align-items:center; gap:.4rem; }
.filter2__cmp svg{ width:15px; height:15px; }
.filter2__cmp b{ font-weight:700; opacity:.55; font-size:.74rem; }
.filter2__cmp.is-off{ opacity:.4; pointer-events:none; }

/* --- Vergleichs-Fenster --- */
.qv__box--wide{ width:min(1000px,100%); }
.cmp{ padding:clamp(1.4rem,3vw,2.2rem); }
.cmp__title{ font-size:clamp(1.3rem,2.4vw,1.7rem); margin:0 0 1.2rem; }
.cmp__hint{ color:var(--text-soft); }
.cmp__scroll{ overflow-x:auto; }
.cmp__table{ width:100%; border-collapse:collapse; min-width:520px; }
.cmp__table th,.cmp__table td{ text-align:left; padding:.7rem .8rem; border-bottom:1px solid var(--line); vertical-align:top; font-size:.9rem; }
.cmp__table thead th{ border-bottom:2px solid var(--line-strong); vertical-align:bottom; }
.cmp__table tbody th{ color:var(--text-soft); font-weight:600; width:132px; }
.cmp__table td b{ font-size:1.05rem; }
.cmp__veh img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); margin-bottom:.5rem; }
.cmp__veh b{ display:block; font-size:.92rem; line-height:1.3; }
.cmp__rm{ margin-top:.4rem; display:inline-flex; align-items:center; gap:.25rem; padding:0; border:0; background:none; cursor:pointer; font:inherit; font-size:.72rem; color:var(--text-soft); }
.cmp__rm svg{ width:12px; height:12px; }
.cmp__rm:hover{ color:var(--signal); }
.cmp__link{ display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:600; color:var(--accent); }
.cmp__link svg{ width:13px; height:13px; }

/* --- Zuletzt angesehen --- */
.recent__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; }
.recent__head h2{ font-size:clamp(1.1rem,1.8vw,1.4rem); }
.recent__clear{ border:0; background:none; cursor:pointer; font:inherit; font-size:.8rem; font-weight:600; color:var(--text-soft); text-decoration:underline; text-underline-offset:3px; }
.recent__clear:hover{ color:var(--accent); }
.recent__row{ display:flex; gap:14px; overflow-x:auto; padding-bottom:.5rem; scroll-snap-type:x mandatory; }
.recent__card{ flex:0 0 200px; scroll-snap-align:start; text-align:left; padding:0; overflow:hidden; cursor:pointer; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); transition:border-color .25s, box-shadow .25s; }
.recent__card:hover{ border-color:var(--line-strong); box-shadow:var(--shadow-sm); }
.recent__card img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }
.recent__t{ padding:.7rem .8rem 0; font-size:.85rem; font-weight:600; line-height:1.3; color:var(--text); }
.recent__p{ padding:.2rem .8rem .8rem; font-size:.85rem; color:var(--accent); font-weight:700; }

/* --- Kurzmeldung („Link kopiert") --- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); z-index:400;
  background:var(--ink); color:#fff; padding:.8rem 1.3rem; border-radius:100px;
  font-size:.85rem; font-weight:600; box-shadow:var(--shadow-md);
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* Nur im Druck sichtbar (Fahrzeug-Exposé) */
.printonly{ display:none; }

/* =========================================================
   12. DRUCKANSICHT
   Damit Impressum, Kontaktdaten und Fahrzeuglisten sauber
   auf Papier kommen — ohne Navigation und Farbflächen.
   ========================================================= */
@media print{
  .header,.burger,.footer__grid,.cta-band,.map,.skiplink,.filterbar{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .section,.section--tight{ padding:1.2rem 0; }
  .section--dark,.pagehead,.footer{ background:#fff !important; color:#000 !important; }
  .hero{ min-height:0; padding:1rem 0; border:0; }
  .hero__media{ display:none; }
  .car{ break-inside:avoid; border:1px solid #999; }
  .reveal{ opacity:1 !important; transform:none !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; }
}

/* Fahrzeug-Exposé aus der Schnellansicht drucken.
   Nur wenn ein .printonly-Block existiert, wird der Rest ausgeblendet —
   normales Drucken (Impressum usw.) bleibt davon unberührt. */
@media print{
  body:has(.printonly) > *:not(.printonly){ display:none !important; }
  .printonly{ display:block !important; }
  .pexpose{ color:#000; }
  .pexpose__head{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; border-bottom:2px solid #000; padding-bottom:.5rem; margin-bottom:1rem; font-size:9.5pt; }
  .pexpose__head b{ font-size:15pt; }
  .pexpose img{ width:100%; max-height:9cm; object-fit:cover; margin-bottom:1rem; }
  .pexpose h1{ font-size:20pt; margin:0 0 .15rem; }
  .pexpose__brand{ color:#555; margin:0 0 1rem; font-size:11pt; }
  .pexpose table{ width:100%; border-collapse:collapse; margin:.6rem 0 1rem; }
  .pexpose th,.pexpose td{ text-align:left; padding:.45rem .7rem; border:1px solid #999; font-size:11pt; }
  .pexpose th{ background:#f2f2f2; width:22%; }
  .pexpose__usp{ font-size:11pt; margin:.4rem 0; }
  .pexpose__price{ font-size:19pt; font-weight:700; margin:1rem 0 .3rem; }
  .pexpose__url{ font-size:9pt; color:#555; }
}

/* =========================================================
   Direkt anfragen — Service-Kacheln + Formular-Dialoge
   (token-basiert; folgt automatisch Hell- und Dark-Theme)
   ========================================================= */
.svc{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.7vw,24px); }
@media(max-width:820px){ .svc{ grid-template-columns:1fr; } }
.svc-tile{
  font:inherit; color:inherit; text-align:left; cursor:pointer;
  padding:1.7rem 1.7rem 1.5rem; background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--radius-lg); display:flex; flex-direction:column; gap:.5rem;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.svc-tile:hover{ border-color:var(--accent); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.svc-ico{ font-size:1.7rem; line-height:1; }
.svc-tile h3{ font-family:var(--font-display); font-size:1.18rem; font-weight:700; letter-spacing:-.015em; }
.svc-tile p{ font-size:.9rem; color:var(--text-soft); margin:0; flex:1; }
.svc-cta{ margin-top:.5rem; font-weight:700; font-size:.86rem; color:var(--accent); }

.fmodal{ position:fixed; inset:0; z-index:320; display:flex; align-items:center; justify-content:center; padding:16px; }
.fmodal[hidden]{ display:none; }
.fmodal__bg{ position:absolute; inset:0; background:rgba(8,14,17,.62); backdrop-filter:blur(2px); }
.fmodal__box{
  position:relative; z-index:1; width:min(560px,100%); max-height:92vh; overflow:auto;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.9rem 2rem 2rem; box-shadow:var(--shadow-md);
}
.fmodal__box .eyebrow{ margin-bottom:.5rem; }
.fmodal__box h3{ font-family:var(--font-display); font-size:1.5rem; font-weight:700; letter-spacing:-.02em; margin:0 0 .5rem; }
.fmodal__sub{ color:var(--text-soft); font-size:.92rem; line-height:1.55; margin:0 0 1.4rem; }
.fmodal__x{
  position:absolute; top:12px; right:12px; width:38px; height:38px; display:grid; place-items:center;
  border:0; border-radius:100px; cursor:pointer; background:var(--paper-2); color:var(--text);
}
.fmodal__x svg{ width:18px; height:18px; }
.fmodal__x:hover{ background:var(--accent); color:var(--accent-ink); }
.fmodal .form{ margin-top:0; }

/* Nettopreis — wichtigstes Argument für Gewerbekunden (02.09.2026) */
.car__netto{
  display:inline-block;
  margin:.15rem 0 .1rem;
  padding:.12rem .5rem;
  border-radius:100px;
  background:var(--sand-2, rgba(14,107,107,.10));
  color:var(--accent, #0E6B6B);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:-.01em;
}
.qv__netto{
  padding:.2rem .65rem;
  border-radius:100px;
  background:var(--sand-2, rgba(14,107,107,.10));
  color:var(--accent, #0E6B6B);
  font-size:.95rem;
  font-weight:800;
}
.cmp-netto{ color:var(--accent, #0E6B6B); font-weight:700; font-size:.85rem; }