/* =========================================================
   R&G — EIN Stylesheet für die gesamte Site.
   Zusammengeführt am 14.08.2026 aus assets/fabia.css + assets/site.css.

   REIHENFOLGE IST BEDEUTUNGSTRAGEND: Der Fabia-/Epiq-Teil steht OBEN, der
   globale Shell-Teil darunter. Vorher lud fabia.css VOR site.css, damit die
   globale Shell bei gemeinsam genutzten Klassen gewinnt. Dreht man die
   Reihenfolge um, brechen Header, Footer und Buttons der beiden Landingpages.

   Beim Zusammenführen entfernt: der doppelte `:root`-Block (Tokens waren
   wertgleich) und die vier toten Regeln .container / .site-footer /
   .vertrauen / .vertrauen__header — sie wurden vollständig vom Shell-Teil
   überschrieben.
   BEWUSST BEHALTEN: .btn-primary und .btn-secondary (tragen je 1–2
   Eigenschaften, die der Shell-Teil NICHT setzt) sowie .hamburger (kommt
   zusätzlich in einer Media Query vor).
   ========================================================= */

/* ═════════════════ TEIL 1 · Fabia-/Epiq-Landingpages ═════════════════ */
/* =========================================================
   FABIA LP — page-specific components (extracted from inline <style>).
   Loaded BEFORE /assets/site.css so the global shell (tokens, topbar,
   footer, buttons, trust block) stays canonical and wins shared classes.
   ========================================================= */

/* =============================================
       CSS CUSTOM PROPERTIES (Brand Book)
       ============================================= */
    

    /* =============================================
       RESET & BASE
       ============================================= */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: var(--font-body); color: var(--color-text); background: var(--color-white); line-height: 1.6; }
    img  { max-width: 100%; height: auto; display: block; }
    a    { color: inherit; text-decoration: none; }
    button { cursor: pointer; font-family: var(--font-body); border: none; }

    /* =============================================
       UTILITIES
       ============================================= */
    

    .btn-primary {
      display: inline-block; background: var(--color-green); color: var(--color-dark);
      font-weight: 700; font-size: 15px; padding: 14px 28px;
      border-radius: var(--radius); cursor: pointer; white-space: nowrap;
      transition: opacity var(--transition);
    }
    .btn-primary:hover { opacity: 0.85; }

    .btn-secondary {
      display: inline-block; background: transparent; color: var(--color-dark);
      font-weight: 600; font-size: 15px; padding: 13px 24px;
      border-radius: var(--radius); border: 2px solid var(--color-dark); cursor: pointer;
      white-space: nowrap; transition: background var(--transition), color var(--transition);
    }
    .btn-secondary:hover { background: var(--color-dark); color: var(--color-white); }

    .btn-ghost {
      display: inline-block; background: transparent; color: var(--color-white);
      font-weight: 600; font-size: 15px; padding: 13px 24px;
      border-radius: var(--radius); border: 2px solid rgba(255,255,255,0.55); cursor: pointer;
      white-space: nowrap; transition: border-color var(--transition), background var(--transition);
    }
    .btn-ghost:hover { border-color: var(--color-white); background: rgba(255,255,255,0.08); }

    /* label: moved to assets/site.css (canonical) */

    h1, h2, h3 { font-family: var(--font-hl); font-weight: 800; line-height: 1.15; }
    h1 { font-size: clamp(36px, 5.5vw, 62px); }
    h2 { font-size: clamp(24px, 3.5vw, 40px); color: var(--color-dark); }
    h3 { font-size: clamp(17px, 2.5vw, 23px); color: var(--color-dark); }

    /* =============================================
       HEADER
       ============================================= */
    .site-header {
      position: sticky; top: 0; z-index: 100;
      background: var(--color-white); border-bottom: 1px solid var(--color-grey); padding: 14px 0;
    }
    .site-header__inner {
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
    }
    .site-header__logo img { height: 34px; width: auto; }
    .site-header__nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
    .site-header__nav a {
      font-size: 14px; font-weight: 500; color: var(--color-dark);
      padding: 8px 12px; border-radius: var(--radius); transition: background var(--transition);
    }
    .site-header__nav a:hover { background: var(--color-grey); }
    .site-header__cta .btn-primary { font-size: 14px; padding: 10px 20px; }
    .hamburger {
      display: none; flex-direction: column; gap: 5px;
      background: none; border: none; padding: 8px; cursor: pointer; flex-shrink: 0;
    }
    .hamburger span { display: block; width: 22px; height: 2px; background: var(--color-dark); border-radius: 2px; transition: opacity var(--transition); }
    @media (max-width: 768px) {
      .hamburger { display: flex; }
      .site-header__nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        background: var(--color-white); border-bottom: 1px solid var(--color-grey);
        flex-direction: column; padding: 12px 24px; z-index: 99;
      }
      #nav-toggle:checked ~ .site-header__nav { display: flex; }
      .site-header__nav a { padding: 12px 0; border-bottom: 1px solid var(--color-grey); }
      .site-header__nav a:last-child { border-bottom: none; }
    }

    /* =============================================
       STICKY CTA BAR
       ============================================= */
    /* sticky: moved to assets/site.css (canonical) */

    /* =============================================
       SECTION 1: HERO
       ============================================= */
    .hero { background: var(--color-dark); color: var(--color-white); overflow: hidden; padding: 40px 0 0; }
    .hero__inner {
      display: grid; grid-template-columns: 1fr; gap: 32px; align-items: end;
    }
    @media (min-width: 900px) {
      .hero__inner { grid-template-columns: 1fr 1.3fr; min-height: 440px; }
    }
    .hero__content { padding-bottom: 48px; }
    .hero__eyebrow {
      font-size: 12px; font-weight: 500; letter-spacing: 2px;
      text-transform: uppercase; color: var(--color-green); margin-bottom: 14px;
    }
    .hero__title { color: var(--color-white); margin-bottom: 18px; }
    .hero__subline {
      font-size: 17px; color: rgba(255,255,255,0.72);
      max-width: 460px; margin-bottom: 32px; line-height: 1.55;
    }
    .hero__ctas { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
    .hero__ctas__row { display: flex; flex-wrap: wrap; gap: 12px; }
    .hero__image { align-self: center; }
    /* Das Hero-Bild läuft seit 15.09.2026 durch dieselbe Slider-Komponente wie Angebotskarte
       und Angebots-Hero (dcSlider). Bei einem einzigen Bild rendert sie eine Folie ohne
       Pfeile, die Optik bleibt dadurch unverändert. */
    .hero__slider, .hero__slider .deal-card__slider-vp { border-radius: var(--radius); overflow: visible; }
    .hero__image img {
      width: 100%; max-height: 440px;
      object-fit: contain; object-position: center;
      border-radius: var(--radius);
      box-shadow: 0 24px 48px rgba(0,0,0,0.35);
    }
    @media (max-width: 899px) {
      .hero__image img { max-height: 320px; }
      .hero__content { padding-bottom: 0; }
      .hero { padding-bottom: 48px; }
    }
    .hero__bar { height: 4px; background: var(--gradient-brand); }

    /* trust: moved to assets/site.css (canonical) */

    /* =============================================
       SECTION 4: NEUWAGEN-ANGEBOTE
       ============================================= */
    /* dealcards: moved to assets/site.css (canonical) */

    /* =============================================
       SECTION 5: PRODUKT
       ============================================= */
    .produkt { padding: var(--space-section) 0; background: var(--color-dark); color: var(--color-white); }
    .produkt h2 { color: var(--color-white); margin-bottom: 40px; }

    /* hlgridtitle: moved to assets/site.css (canonical) */

    /* ── KENNZAHLEN ── */
    .kennzahlen-block { margin-bottom: 56px; }

    /* ── DER FABIA AUF EINEN BLICK ── */
    /* overview: moved to assets/site.css (canonical) */

    .fabia-overview__grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 12px;
    }
    .fabia-overview__item {
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--radius); padding: 16px 14px;
    }
    .fabia-overview__val {
      display: block; font-family: var(--font-hl); font-weight: 800; font-size: 26px; color: var(--color-green); margin-bottom: 4px;
    }
    .fabia-overview__lbl { font-size: 12px; color: rgba(255,255,255,0.6); line-height: 1.4; }

    /* lightbox: moved to assets/site.css (canonical) */

    /* Epiq: Antrieb/Reichweite/Laden Faktenraster (Ersatz für Abmessungs-Diagramm) */
    .epiq-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .epiq-fact {
      display: flex; flex-direction: column; gap: 2px;
      background: #f6f7f8; border: 1px solid #eaecee; border-radius: var(--radius); padding: 12px 14px;
    }
    .epiq-fact__k { font-size: 12px; color: #6a7178; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
    .epiq-fact__v { font-size: 16px; color: var(--color-dark); font-weight: 700; }
    @media (max-width: 720px) { .epiq-facts { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 420px) { .epiq-facts { grid-template-columns: 1fr; } }

    /* Abmessungen */
    .abmessungen-block { margin-bottom: 56px; }
    .abmessungen-block__card {
      background: var(--color-white); border-radius: var(--radius); padding: 28px 24px 20px;
    }
    .abmessungen-block__card img { border-radius: 4px; }
    .abmessungen-block__card p { color: rgba(24,24,24,0.45); }

    /* testimonials: moved to assets/site.css (canonical) */

    .produkt__cta { text-align: center; }

    /* kontakt: moved to assets/site.css (canonical) */

    /* =============================================
       SECTION 6: ZAHLUNGSOPTIONEN
       ============================================= */
    .zahlung { padding: var(--space-section) 0; background: var(--color-grey); }
    .zahlung__header { margin-bottom: 36px; }

    .tabs-nav {
      display: flex; gap: 4px; margin-bottom: 28px;
      background: #d8d8d8; padding: 4px; border-radius: var(--radius);
      width: fit-content; flex-wrap: wrap;
    }
    input[name="zahlung"] { display: none; }
    .tab-btn {
      padding: 10px 20px; border-radius: 6px; border: none; background: transparent;
      font-size: 14px; font-weight: 600; color: var(--color-text-muted); cursor: pointer; transition: all var(--transition);
      display: inline-block;
    }
    .tab-btn:hover { color: var(--color-dark); }
    #ztab-kauf:checked         ~ .tabs-nav label[for="ztab-kauf"],
    #ztab-leasing:checked      ~ .tabs-nav label[for="ztab-leasing"],
    #ztab-finanzierung:checked ~ .tabs-nav label[for="ztab-finanzierung"],
    #ztab-offen:checked        ~ .tabs-nav label[for="ztab-offen"] { background: var(--color-white); color: var(--color-dark); box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
    .tab-panel { display: none; }
    #ztab-kauf:checked         ~ .tab-panels #zpanel-kauf         { display: block; }
    #ztab-leasing:checked      ~ .tab-panels #zpanel-leasing      { display: block; }
    #ztab-finanzierung:checked ~ .tab-panels #zpanel-finanzierung { display: block; }
    #ztab-offen:checked        ~ .tab-panels #zpanel-offen        { display: block; }

    .tab-content { display: block; }
    .tab-ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

    /* Ein Stichpunkt pro Zeile, auf jeder Breite (Kundenentscheidung 15.09.2026). Die Liste
       bekommt eine eigene Maximalbreite, damit eine Häkchenzeile nicht über die volle
       Containerbreite läuft — nebeneinander gesetzt verlieren die drei Punkte ihre
       Aufzählungswirkung. */
    .bullets { list-style: none; margin-bottom: 24px; max-width: 620px; }
    .bullets li {
      padding: 10px 0; border-bottom: 1px solid #d0d0d0;
      font-size: 15px; display: flex; align-items: flex-start; gap: 10px;
    }
    .bullets li::before { content: '✓'; color: var(--color-dark); font-weight: 700; flex-shrink: 0; margin-top: 2px; }
    .deeplink { font-size: 14px; font-weight: 500; color: var(--color-dark); text-decoration: underline; margin-top: 10px; display: inline-block; }
    .tab-visual img { border-radius: var(--radius); width: 100%; height: 250px; object-fit: cover; }

    /* =============================================
       SECTION 7: GEBRAUCHTWAGEN
       ============================================= */
    .gebraucht { padding: var(--space-section) 0; background: var(--color-white); }
    .gebraucht__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
    @media (max-width: 768px) { .gebraucht__inner { grid-template-columns: 1fr; gap: 40px; } }

    .gebraucht__intro { font-size: 16px; color: var(--color-text-muted); margin-top: 14px; line-height: 1.6; }
    .gebraucht__ctas { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; align-items: flex-start; }

    .mini-faq h3 { font-family: var(--font-hl); font-weight: 700; font-size: 18px; color: var(--color-dark); margin-bottom: 18px; }
    .mini-faq__item { border-bottom: 1px solid var(--color-grey); padding: 14px 0; }
    .mini-faq__q { font-weight: 600; font-size: 14px; color: var(--color-dark); margin-bottom: 5px; }
    .mini-faq__a { font-size: 14px; color: var(--color-text-muted); line-height: 1.5; }

    /* =============================================
       SECTION 8: KONFIGURATOR
       ============================================= */
    .konfigurator { padding: 64px 0; background: var(--color-dark); text-align: center; }
    .konfigurator h2 { color: var(--color-white); margin-bottom: 8px; }
    .konfigurator__sub { font-size: 16px; color: rgba(255,255,255,0.62); margin-bottom: 30px; }

    /* =============================================
       SECTION 9: VERTRAUEN
       ============================================= */
    
    

    .awards { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 52px; }
    .award {
      background: var(--color-white); border-radius: var(--radius); padding: 20px 22px;
      display: flex; align-items: center; gap: 14px; flex: 1; min-width: 190px;
    }
    .award img { height: 50px; width: auto; object-fit: contain; flex-shrink: 0; }
    .award__title { font-weight: 700; font-size: 15px; color: var(--color-dark); }
    .award__text  { font-size: 13px; color: var(--color-text-muted); line-height: 1.4; margin-top: 2px; }
    .award__num   { font-family: var(--font-hl); font-weight: 800; font-size: 26px; color: var(--color-dark); flex-shrink: 0; }

    /* reviews: moved to assets/site.css (canonical) */

    /* sponsorings: moved to assets/site.css (canonical) */

    /* whyus: moved to assets/site.css (canonical) */

    /* =============================================
       SECTION 10: FAQ
       ============================================= */
    /* faq: moved to assets/site.css (canonical) */

    /* =============================================
       FOOTER
       ============================================= */
    
    .site-footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 36px; }
    @media (max-width: 768px) { .site-footer__inner { grid-template-columns: 1fr; } }

    .site-footer__logo img { height: 26px; margin-bottom: 14px; filter: brightness(0) invert(1); }
    .site-footer__tagline { font-size: 14px; margin-bottom: 16px; }
    .site-footer__addr { font-style: normal; font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.7; }
    .col-title { font-family: var(--font-hl); font-weight: 700; font-size: 14px; color: var(--color-white); margin-bottom: 12px; letter-spacing: 0.5px; }
    .col-links { list-style: none; }
    .col-links li { margin-bottom: 8px; }
    .col-links a { font-size: 14px; color: rgba(255,255,255,0.55); transition: color var(--transition); }
    .col-links a:hover { color: var(--color-white); }
    .site-footer__bottom {
      margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.1);
      font-size: 12px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    }
    .site-footer__bottom a { color: rgba(255,255,255,0.45); margin-left: 16px; }

    /* =============================================
       MODAL: KLICKSTRECKE
       ============================================= */
    .modal-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.62); z-index: 200;
      align-items: center; justify-content: center; padding: 16px;
    }
    .modal-overlay.open { display: flex; }

    .modal {
      background: var(--color-white); border-radius: 16px;
      width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto;
      position: relative;
    }
    .modal__header {
      background: var(--color-dark); padding: 26px 30px 22px; border-radius: 16px 16px 0 0;
    }
    .modal__tag { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--color-green); font-weight: 600; margin-bottom: 6px; }
    .modal__title { font-family: var(--font-hl); font-weight: 800; font-size: 26px; color: var(--color-white); }
    .modal__close {
      position: absolute; top: 18px; right: 18px;
      background: rgba(255,255,255,0.12); border: none; width: 34px; height: 34px;
      border-radius: 50%; cursor: pointer; color: var(--color-white); font-size: 17px;
      display: flex; align-items: center; justify-content: center; transition: background var(--transition);
    }
    .modal__close:hover { background: rgba(255,255,255,0.22); }
    .modal__body { padding: 28px 30px; }

    /* Progress */
    .progress { display: flex; gap: 6px; margin-bottom: 24px; }
    .progress__dot { height: 4px; flex: 1; border-radius: 2px; background: var(--color-grey); transition: background var(--transition); }
    .progress__dot.done   { background: var(--color-green); }
    .progress__dot.active { background: var(--color-dark); }

    /* Steps */
    .step { display: none; }
    .step.active { display: block; }
    .step__q { font-family: var(--font-hl); font-weight: 700; font-size: 20px; color: var(--color-dark); margin-bottom: 18px; }
    .step__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .step__opts--3 .opt-btn:last-child { grid-column: span 2; }
    .opt-btn {
      padding: 15px 10px; border: 2px solid var(--color-grey); border-radius: var(--radius);
      background: var(--color-white); font-size: 15px; font-weight: 600; color: var(--color-dark);
      cursor: pointer; text-align: center; transition: all var(--transition);
    }
    .opt-btn:hover { border-color: var(--color-dark); }
    .opt-btn:focus { border-color: var(--color-dark); outline: 3px solid var(--color-green); outline-offset: 2px; }
    .opt-btn.selected { border-color: var(--color-dark); background: var(--color-dark); color: var(--color-white); }

    /* Summary */
    .summary-box {
      background: var(--color-grey); border-radius: var(--radius);
      padding: 18px; margin-bottom: 20px; font-size: 14px; color: var(--color-dark);
    }
    .summary-box__title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-muted); font-weight: 600; margin-bottom: 10px; }
    .summary-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #d8d8d8; }
    .summary-row:last-child { border-bottom: none; }
    .summary-row__lbl { color: var(--color-text-muted); }
    .summary-row__val { font-weight: 600; color: var(--color-dark); }

    /* Calendly */
    /* Gruppenüberschrift innerhalb eines Schritts (Wunschtermin · Ihre Kontaktdaten) */
    .step__group { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-muted); font-weight: 700; margin: 22px 0 10px; }
    .step__group:first-of-type { margin-top: 0; }
    .form-hint { font-size: 12px; line-height: 1.55; color: var(--color-text-muted); margin: 0; }
    /* Die Formularfelder des Modals nutzen die Klassen der Lead-Formulare (.lead-form__grid,
       .field, .field--check, .radio-row) — dort sind Optik und Verhalten schon geklärt.
       Die frühere .form-group-Familie ist am 15.09.2026 entfallen; ihre Regel
       `.form-group input { width: 100% }` traf auch die Checkboxen und quetschte deren
       Beschriftung in eine schmale Spalte. */
    .modal .lead-form__grid + .step__group { margin-top: 26px; }
    .form-success {
      display: none; background: #e6faf1; border: 1px solid var(--color-green);
      border-radius: var(--radius); padding: 14px; text-align: center;
      color: var(--color-dark); font-weight: 600; font-size: 15px;
    }
    .form-success.show { display: block; }

/* ═════════════════ TEIL 2 · Globale Shell (kanonisch) ═════════════════ */

/* =====================================================================
   R&G GLOBAL SITE SHELL  ·  assets/site.css
   Self-contained: Brand-Tokens + Reset + globale Top-Bar +
   No-JS Hamburger-Mega-Menü + Footer + Wireframe-Stile.
   Wird von allen NEUEN Seiten geladen (Skeleton-Phase).
   Marken-Tokens spiegeln index.html / style.css.
   ===================================================================== */

:root {
  --color-dark:       #0A404E;
  --color-green:      #78FAAE;
  --color-blue:       #8BE6FE;
  --color-white:      #FFFFFF;
  --color-grey:       #EDEDED;
  --color-text:       #181818;
  --gradient-brand:   linear-gradient(135deg, #8BE6FE, #78FAAE);
  /* 0.55 ergab nur 3,95:1 auf Weiß bzw. 3,78:1 auf --color-grey und lag damit site-weit
     unter WCAG AA (4,5:1) — betroffen war jeder Sekundärtext inkl. der Pflichtangaben.
     0.62 → 4,97:1 auf Weiß, 4,69:1 auf Grau. (Design-Review 11.08.2026) */
  --color-text-muted: rgba(24,24,24,0.62);
  --font-hl:          'Barlow Condensed', sans-serif;
  --font-body:        'Inter', sans-serif;
  --container-max:    1200px;
  --space-section:    80px;
  --radius:           8px;
  --transition:       0.2s ease;
  --topbar-h:         68px;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body); color: var(--color-text);
  background: var(--color-white); line-height: 1.6;
  padding-top: var(--topbar-h);
}
/* Seiten ohne Topbar — Kiosk und Wegweiser setzen `kiosk: true` und lassen die Leiste weg —
   brauchen den dafür reservierten Platz nicht. Sonst steht über dem dunklen Kopf ein weißer
   Streifen in Höhe einer Navigation, die es auf diesen Seiten gar nicht gibt. */
body:has(> main.kiosk), body:has(> main.weg) { padding-top: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font-body); border: none; }
h1, h2, h3 { font-family: var(--font-hl); font-weight: 800; line-height: 1.1; }
/* Einheitliche Größe für alle Sektions-/Block-Überschriften (Advisor, Trust, FAQ, Angebote …).
   Spezifischere Regeln (z. B. .lp-cta h2) überschreiben dies bei Bedarf. */
h2 { font-size: clamp(26px, 3.5vw, 36px); }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }

/* anchor offset so #targets don't hide under the fixed bar */
:target { scroll-margin-top: calc(var(--topbar-h) + 16px); }

/* ---------- Buttons ---------- */
.btn-primary {
  display: inline-block; background: var(--color-green); color: var(--color-dark);
  font-weight: 700; font-size: 15px; padding: 14px 28px;
  border-radius: var(--radius); white-space: nowrap; transition: opacity var(--transition);
}
.btn-primary:hover { opacity: .85; }
/* Sichtbarer Fokus auf allen interaktiven Elementen — bewusst `:focus` statt
   `:focus-visible`, damit der Mint-Rahmen bei JEDER Interaktion erscheint, also auch
   nach einem Mausklick (Entscheidung 10.08.2026). */
.btn-primary:focus, .btn-secondary:focus,
a:focus, button:focus, summary:focus,
input:focus, select:focus, textarea:focus { outline: 3px solid var(--color-green); outline-offset: 2px; }
.btn-secondary {
  display: inline-block; background: transparent; color: var(--color-dark);
  font-weight: 600; font-size: 15px; padding: 13px 24px;
  border-radius: var(--radius); border: 2px solid var(--color-dark); transition: var(--transition);
}
.btn-secondary:hover { background: var(--color-dark); color: var(--color-white); }

/* =====================================================================
   GLOBAL TOP BAR (fixed)
   ===================================================================== */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--topbar-h); background: var(--color-white);
  border-bottom: 1px solid var(--color-grey);
}
.topbar__inner {
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.topbar__logo img { height: 38px; width: auto; }
.topbar__actions { display: flex; align-items: center; gap: 8px; }
.topbar__contact {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14px; color: var(--color-dark);
  padding: 9px 16px; border-radius: var(--radius); border: 1px solid var(--color-grey);
}
.topbar__contact:hover { border-color: var(--color-dark); }
.topbar__contact svg { width: 18px; height: 18px; }
.topbar__cta {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--font-hl); font-weight: 700; font-size: 13px;
  padding: 9px 15px; border-radius: var(--radius); border: 1px solid var(--color-grey);
  color: var(--color-dark); transition: var(--transition);
}
.topbar__cta:hover { border-color: var(--color-dark); }
.topbar__cta--primary { background: var(--color-green); border-color: var(--color-green); }
.topbar__cta--primary:hover { background: var(--color-dark); border-color: var(--color-dark); color: #fff; }
@media (max-width: 760px) { .topbar__cta--service { display: none; } }

/* ---------- Hamburger toggle ---------- */
.nav-toggle { position: absolute; left: -9999px; }
.hamburger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 44px; padding: 0 11px; cursor: pointer;
  border-radius: var(--radius); border: 1px solid var(--color-grey); background: var(--color-white);
}
.hamburger span { display: block; height: 2px; background: var(--color-dark); border-radius: 2px; transition: var(--transition); }

/* =====================================================================
   MEGA NAV  (no-JS: #nav-toggle:checked ~ .mega-*)
   #nav-toggle, .hamburger, .mega-backdrop, .mega-nav  MÜSSEN Geschwister sein
   ===================================================================== */
.mega-backdrop {
  position: fixed; inset: 0; z-index: 1001;
  background: rgba(10,64,78,.45); opacity: 0; visibility: hidden;
  transition: opacity var(--transition);
}
.mega-nav {
  position: fixed; top: 0; right: 0; z-index: 1002;
  width: min(420px, 92vw); height: 100vh; overflow-y: auto;
  background: var(--color-dark); color: var(--color-white);
  transform: translateX(100%); transition: transform .25s ease;
  padding-bottom: 40px;
}
.nav-toggle:checked ~ .mega-backdrop { opacity: 1; visibility: visible; }
.nav-toggle:checked ~ .mega-nav { transform: translateX(0); }

.mega-nav__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,.12);
  position: sticky; top: 0; background: var(--color-dark); z-index: 1;
}
.mega-nav__head span { font-family: var(--font-hl); font-weight: 700; font-size: 20px; letter-spacing: .5px; }
.mega-close {
  width: 40px; height: 40px; border-radius: var(--radius);
  background: rgba(255,255,255,.08); color: var(--color-white);
  font-size: 22px; line-height: 1; display: grid; place-items: center;
}
.mega-close:hover { background: rgba(255,255,255,.16); }

.mega-group { border-bottom: 1px solid rgba(255,255,255,.10); }
.mega-group > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; font-family: var(--font-hl); font-weight: 700;
  font-size: 19px; letter-spacing: .4px;
}
.mega-group > summary::-webkit-details-marker { display: none; }
.mega-group > summary::after {
  content: "+"; font-size: 22px; color: var(--color-green); transition: var(--transition);
}
.mega-group[open] > summary::after { content: "–"; }
.mega-group__body { padding: 4px 22px 18px; }

.mega-link {
  display: block; padding: 9px 0; font-size: 15px; font-weight: 500;
  color: var(--color-white);
}
.mega-link:hover { opacity: .7; }
.mega-link--lead { font-weight: 700; color: var(--color-white); }

/* divider to set the two Service location dropdowns apart from the rest */
.mega-divider { border: 0; border-top: 1px solid rgba(255,255,255,.18); margin: 12px 0; }

.mega-sub { margin: 2px 0 6px; }
.mega-sub > summary {
  list-style: none; cursor: pointer; padding: 9px 0;
  font-size: 15px; font-weight: 700; color: var(--color-white);
  display: flex; align-items: center; justify-content: space-between;
}
.mega-sub > summary::-webkit-details-marker { display: none; }
.mega-sub > summary::after { content: "›"; color: var(--color-green); transition: var(--transition); }
.mega-sub[open] > summary::after { transform: rotate(90deg); }
.mega-sub__body { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.14); margin-left: 2px; }
.mega-sub__body .mega-link { padding: 7px 0; font-size: 14px; }
.mega-eyebrow {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--color-green); font-weight: 700; margin: 10px 0 2px;
}
/* Sub-Label im Mega-Menü (z. B. "Service-Termin buchen") – Schrift wie die übrigen Navi-Elemente, nur grün */
.mega-sublabel { display: block; padding: 9px 0 2px; font-size: 15px; font-weight: 700; color: var(--color-green); }

.mega-foot { display: flex; gap: 10px; padding: 22px; flex-wrap: wrap; }
.mega-foot a {
  flex: 1; min-width: 110px; text-align: center;
  padding: 11px 10px; border-radius: var(--radius);
  background: rgba(255,255,255,.08); font-weight: 600; font-size: 14px;
}
.mega-foot a:hover { background: var(--color-green); color: var(--color-dark); }

/* =====================================================================
   PAGE HERO / BREADCRUMB  (Wireframe banner)
   ===================================================================== */
.page-hero {
  background: var(--color-dark); color: var(--color-white);
  padding: 56px 0 60px;
}
.breadcrumb { font-size: 13px; color: rgba(255,255,255,.65); margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--color-green); }
.breadcrumb span { color: var(--color-green); }
.page-hero__eyebrow {
  display: none; font-family: var(--font-hl); font-weight: 700;
  font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--color-dark); background: var(--color-green);
  padding: 5px 12px; border-radius: 4px; margin-bottom: 16px;
}
.page-hero h1 { font-size: clamp(30px, 5vw, 50px); margin-bottom: 14px; }
.page-hero__sub { font-size: 18px; max-width: 640px; color: rgba(255,255,255,.82); }
.page-hero__url {
  margin-top: 18px; font-family: monospace; font-size: 13px;
  color: var(--color-blue); opacity: .9;
}

/* =====================================================================
   WIREFRAME SECTIONS
   ===================================================================== */
.wf-section { padding: var(--space-section) 0; }
.wf-section:nth-of-type(even) { background: var(--color-grey); }
.wf-section__title { font-size: 28px; margin-bottom: 6px; }
.wf-section__lead { color: var(--color-text-muted); margin-bottom: 28px; max-width: 680px; }

.wf-block {
  border: 2px dashed rgba(10,64,78,.30); border-radius: var(--radius);
  background: rgba(10,64,78,.03); padding: 28px 24px; min-height: 96px;
  display: flex; flex-direction: column; gap: 6px; justify-content: center;
}
.wf-block__tag {
  align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--color-dark);
  background: var(--color-green); padding: 3px 9px; border-radius: 4px;
}
.wf-block__note { color: var(--color-text-muted); font-size: 14px; }

.wf-grid { display: grid; gap: 20px; }
.wf-grid--2 { grid-template-columns: repeat(2, 1fr); }
.wf-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wf-grid--4 { grid-template-columns: repeat(4, 1fr); }

.wf-card {
  border: 1px solid var(--color-grey); border-radius: var(--radius);
  padding: 22px; background: var(--color-white); position: relative;
}
.wf-card__media {
  height: 140px; border-radius: 6px; margin-bottom: 14px;
  background: var(--gradient-brand); opacity: .35;
}
.wf-card__badge {
  position: absolute; top: 32px; left: 32px; z-index: 1;
  font-family: var(--font-hl); font-weight: 700; font-size: 11px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--color-dark); background: var(--color-green); padding: 4px 10px; border-radius: 4px;
}
/* real image media (model cards on /skoda) */
.wf-card__media--img {
  opacity: 1; background-color: #f2f3f4;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.wf-card h3 { font-size: 20px; margin-bottom: 6px; }
.wf-card p { color: var(--color-text-muted); font-size: 14px; margin-bottom: 14px; }

/* anchor target chips (so nav #anchors land somewhere visible) */
.wf-anchor { scroll-margin-top: calc(var(--topbar-h) + 16px); }
.wf-anchor__label {
  display: inline-block; font-family: var(--font-hl); font-weight: 700;
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--color-dark); background: var(--color-green);
  padding: 4px 10px; border-radius: 4px; margin-bottom: 14px;
}

/* CTA band */
.wf-cta {
  background: var(--gradient-brand); color: var(--color-dark);
  padding: 54px 0; text-align: center;
}
.wf-cta h2 { font-size: 30px; margin-bottom: 10px; }
.wf-cta p { margin-bottom: 22px; font-weight: 500; }

/* =====================================================================
   LANDING-PAGE COMPONENTS  (real, styled — reused across content pages)
   ===================================================================== */

/* ---- LP hero ---- */
.lp-hero { background: var(--color-dark); color: var(--color-white); padding: 54px 0 64px; }
.lp-hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.lp-hero__eyebrow {
  display: none; font-family: var(--font-hl); font-weight: 700;
  font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--color-dark); background: var(--color-green);
  padding: 5px 12px; border-radius: 4px; margin-bottom: 16px;
}
.lp-hero h1 { font-size: clamp(34px, 5.5vw, 56px); margin-bottom: 16px; }
.lp-hero__sub { font-size: 19px; color: rgba(255,255,255,.85); max-width: 560px; margin-bottom: 26px; }
.lp-hero__note { font-size: 15px; color: rgba(255,255,255,.7); max-width: 560px; margin: -14px 0 26px; }
.lp-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.lp-hero__visual {
  aspect-ratio: 4 / 3; border-radius: var(--radius);
  background: var(--gradient-brand); position: relative; overflow: hidden;
}
.lp-hero__visual span {
  position: absolute; left: 18px; bottom: 16px; font-family: var(--font-hl);
  font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(10,64,78,.65);
}
/* real hero photo (overrides the gradient placeholder) */
.lp-hero__visual--img { background-size: cover; background-position: center; background-repeat: no-repeat; }
/* image-less centered hero (e.g. /service/termin/) */
.lp-hero--center { padding: 56px 0 60px; }
.lp-hero--center .container { text-align: center; }
.lp-hero--center .breadcrumb { justify-content: center; }
.lp-hero--center h1 { margin-left: auto; margin-right: auto; max-width: 14ch; }
.lp-hero--center .lp-hero__sub { margin-left: auto; margin-right: auto; }
.lp-hero--center .lp-hero__ctas { justify-content: center; }
/* button on dark hero: outlined → white */
.lp-hero .btn-secondary { color: var(--color-white); border-color: rgba(255,255,255,.55); }
.lp-hero .btn-secondary:hover { background: var(--color-white); color: var(--color-dark); border-color: var(--color-white); }

/* ---- LP hero: transactional offers variant (compact band + quick-request form) ---- */
.lp-hero--offers { padding: 44px 0 50px; }
.lp-hero--offers .lp-hero__grid { grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.lp-hero--offers .lp-hero__sub { margin-bottom: 22px; }
.lp-hero__altlink { margin-top: 14px; font-size: 14px; color: rgba(255,255,255,.8); }
.lp-hero__altlink a { color: var(--color-green); font-weight: 600; }
.lp-hero__altlink a:hover { text-decoration: underline; }
.hero-quickform { background: var(--color-white); border-radius: var(--radius); padding: 26px; box-shadow: 0 18px 44px rgba(0,0,0,.30); color: var(--color-text); }
.quickform { display: flex; flex-direction: column; gap: 13px; }
.quickform__title { font-family: var(--font-hl); font-weight: 700; font-size: 21px; color: var(--color-dark); }
.quickform__sub { font-size: 13px; color: var(--color-text-muted); margin: -8px 0 2px; line-height: 1.5; }
.quickform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quickform .btn-primary { width: 100%; justify-content: center; margin-top: 2px; }
.quickform__note { font-size: 12px; color: var(--color-text-muted); text-align: center; margin-top: -2px; }
@media (max-width: 560px) { .quickform__row { grid-template-columns: 1fr; } }

/* ---- trust strip (BADGES: logo/portrait + caption) — reusable block ---- */
.trust { background: var(--color-white); padding: 28px 0; border-top: 2px solid var(--color-grey); border-bottom: 2px solid var(--color-grey); }
.trust__inner { display: flex; align-items: center; justify-content: center; gap: 36px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 12px; }
.trust-item__img { height: 64px; width: auto; object-fit: contain; }
.trust-item__img--round { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.trust-item__text { font-size: 13px; color: var(--color-dark); font-weight: 500; line-height: 1.4; }
.trust__tagline { text-align: center; margin-top: 16px; font-size: 13px; font-weight: 600; }

/* ---- eyebrow label (shared, used by extracted blocks) ---- */
/* Eyebrow-Kicker über Überschriften global ausgeblendet (Design-Entscheidung). */
.label { display: none; font-family: var(--font-hl); font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; }
.label--color-green { color: var(--color-green); }
.label--color-dark  { color: var(--color-dark); }

/* ---- sticky CTA bar (reusable block B.stickyCta) — dark, fixed bottom ---- */
.sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: var(--color-dark); padding: 12px 24px; display: flex; align-items: center; justify-content: center; gap: 14px; box-shadow: 0 -2px 16px rgba(0,0,0,0.18); }
.sticky-cta__text { color: rgba(255,255,255,0.7); font-size: 13px; display: none; }
@media (min-width: 600px) { .sticky-cta__text { display: block; } }

/* ---- testimonials (reusable block B.testimonials) — DARK theme (place on dark bg) ---- */
.testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; margin-bottom: 40px; }
.testi-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); padding: 26px; }
.testi-card__quote { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.82); font-style: italic; margin-bottom: 18px; }
.testi-card__author { display: flex; align-items: center; gap: 12px; }
.testi-card__author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-green); }
.testi-card__name { font-weight: 600; font-size: 14px; color: var(--color-white); }
.testi-card__role { font-size: 12px; color: rgba(255,255,255,0.62); }

/* ---- advisor card (reusable block B.advisorCard) — LIGHT section ---- */
.kontakt-section { padding: var(--space-section) 0; background: var(--color-white); border-top: 1px solid #e4e4e4; }
.kontakt-card { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: start; background: var(--color-grey); border-radius: var(--radius); padding: 36px 40px; }
.kontakt-card__photo { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; object-position: top; border: 3px solid var(--color-green); flex-shrink: 0; }
.kontakt-card__photo--ph { display: flex; align-items: center; justify-content: center; background: var(--gradient-brand); }
.kontakt-card__photo--ph span { font-family: var(--font-hl); font-weight: 700; font-size: 40px; color: rgba(10,64,78,.72); }

/* Standort-Luftbild (Drohnenfoto): liegt INNERHALB des Heros auf der Hero-Hintergrundfarbe
   (optisch Teil des Heros) + Karten-Kopfbild (Startseite/Autohaus/Kontakt). */
.lp-hero--standort { padding-bottom: 52px; }
.standort-photo { margin-top: 34px; }
.standort-photo img { width: 100%; height: 430px; object-fit: cover; border-radius: var(--radius); display: block; box-shadow: 0 18px 42px rgba(0,0,0,.35); }
.duo__card--photo { overflow: hidden; }
.duo__card-photo { width: calc(100% + 60px); max-width: none; margin: -30px -30px 20px; height: 220px; object-fit: cover; display: block; }
@media (max-width: 700px) {
  .lp-hero--standort { padding-bottom: 36px; }
  .standort-photo { margin-top: 22px; }
  .standort-photo img { height: 230px; }
}

/* /service/ — Leistungs-Katalog (Kategorie-Karten mit Services + Preisen) */
.svc-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: start; }
.svc-cat { border: 1px solid var(--color-grey); border-radius: var(--radius); background: var(--color-white); padding: 24px 26px; display: flex; flex-direction: column; }
.svc-cat__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.svc-cat__head h3 { font-size: 20px; color: var(--color-dark); margin: 0; }
.svc-cat__detail { font-size: 14px; font-weight: 600; color: var(--color-dark); white-space: nowrap; }
.svc-cat__items { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.svc-item { border-top: 1px solid var(--color-grey); padding-top: 12px; }
.svc-item:first-child { border-top: 0; padding-top: 0; }
.svc-item__row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.svc-item__name { font-weight: 700; color: var(--color-dark); font-size: 15px; }
.svc-item__price { font-weight: 700; color: var(--color-dark); font-size: 15px; text-align: right; flex: 0 0 auto; }
.svc-item__desc { color: var(--color-text-muted); font-size: 14px; margin: 4px 0 0; }
.svc-item__list { margin: 8px 0 0; padding-left: 20px; color: var(--color-text-muted); font-size: 14px; }
.svc-item__list li { margin: 2px 0; }
.svc-item__note { color: var(--color-text-muted); font-size: 12.5px; margin: 6px 0 0; font-style: italic; }
.svc-cat__cta { align-self: flex-start; margin-top: auto; }
@media (max-width: 760px) { .svc-cats { grid-template-columns: 1fr; } }
.svc-teaser__price { font-family: var(--font-hl); font-weight: 700; font-size: 28px; color: var(--color-dark); margin: 6px 0 10px; }
.kontakt-card__body { display: flex; flex-direction: column; gap: 14px; }
/* Mint war hier Textfarbe auf hellem Grund (.kontakt-card hat --color-grey) → 1,12:1, faktisch
   unsichtbar. Mint bleibt Akzent-/CTA-Farbe auf dunklem Grund; als Fließtextfarbe auf Hell
   ist sie unbrauchbar. (Kontrast-Audit 11.08.2026) */
.kontakt-card__role { font-family: var(--font-hl); font-weight: 700; font-size: 11px; letter-spacing: 2px; color: var(--color-dark); text-transform: uppercase; }
.kontakt-card__name { font-family: var(--font-hl); font-weight: 800; font-size: clamp(22px, 3vw, 30px); color: var(--color-dark); line-height: 1.1; margin: 0; }
.kontakt-card__message { font-size: 15px; color: var(--color-dark); line-height: 1.6; border-left: 3px solid var(--color-green); padding-left: 14px; font-style: italic; }
.kontakt-card__contact { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.kontakt-card__contact a { font-size: 14px; color: var(--color-dark); text-decoration: none; display: flex; align-items: center; gap: 6px; }
.kontakt-card__contact a:hover { color: var(--color-dark); text-decoration: underline; }
.kontakt-card__caveat { font-size: 12px; color: var(--color-text-muted); line-height: 1.5; }
.kontakt-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kontakt-review { margin-top: 20px; background: var(--color-white); border: 1px solid #e4e4e4; border-radius: var(--radius); padding: 24px 28px; position: relative; }
.kontakt-review__stars { color: var(--color-dark); font-size: 18px; margin-bottom: 10px; letter-spacing: 2px; }
.kontakt-review__text { font-size: 14px; color: rgba(24,24,24,0.78); line-height: 1.7; font-style: italic; margin-bottom: 12px; }
.kontakt-review__author { font-size: 13px; font-weight: 600; color: var(--color-dark); }
@media (max-width: 600px) { .kontakt-card { grid-template-columns: 1fr; gap: 20px; padding: 24px 20px; } .kontakt-card__photo { width: 100px; height: 100px; } }

/* Advisor-Slider (mehrere Ansprechpartner) */
.adv-slider { position: relative; }
.adv-slider__viewport { overflow: hidden; }
.adv-slider__track { display: flex; transition: transform .5s cubic-bezier(.25,0,.25,1); align-items: stretch; }
.adv-slider__slide { flex: 0 0 100%; min-width: 100%; }
.adv-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--color-grey); background: var(--color-white); color: var(--color-dark); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; box-shadow: 0 3px 12px rgba(0,0,0,.12); }
.adv-slider__nav:hover { border-color: var(--color-green); color: var(--color-green); }
.adv-slider__nav--prev { left: -14px; }
.adv-slider__nav--next { right: -14px; }
.adv-slider__dots { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.adv-slider__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(10,64,78,.2); cursor: pointer; transition: background .2s, width .2s; }
.adv-slider__dot[aria-current="true"] { background: var(--color-green); width: 22px; border-radius: 5px; }
@media (max-width: 640px) { .adv-slider__nav { display: none; } }

/* ---- FAQ accordion (reusable block B.faqList) — light section ---- */
.faq { padding: var(--space-section) 0; background: var(--color-white); }
.faq__header { margin-bottom: 36px; }
/* Zwischenüberschrift der FAQ-Blöcke (Modellseiten: modellspezifisch, dann allgemein).
   Der erste Block schließt direkt an den Header an und braucht deshalb keinen Abstand oben. */
.faq__group { margin: 44px 0 18px; font-size: 1.05rem; font-weight: 700; color: var(--color-dark); }
.faq__group:first-of-type { margin-top: 0; }
.accordion details { border-bottom: 1px solid var(--color-grey); }
.accordion summary { width: 100%; text-align: left; padding: 18px 0; font-size: 16px; font-weight: 600; color: var(--color-dark); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion-icon { flex-shrink: 0; width: 24px; height: 24px; border: 2px solid var(--color-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: transform var(--transition); }
.accordion details[open] .accordion-icon { transform: rotate(45deg); }
.accordion-content { padding: 0 0 18px; font-size: 15px; color: var(--color-text-muted); line-height: 1.6; }
.faq-cta { margin-top: 12px; }
.faq-cta__link {
  display: inline-flex; align-items: center; gap: 4px; padding: 0;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--color-dark);
  border-bottom: 2px solid var(--color-green); line-height: 1.5; transition: opacity var(--transition);
}
.faq-cta__link:hover { opacity: .7; }
.faq-cta__link span { color: var(--color-green); }

/* ---- generic LP section ---- */
.lp-section { padding: var(--space-section) 0; }
.lp-section--alt { background: var(--color-grey); }
.lp-section--dark { background: var(--color-dark); color: var(--color-white); }
.lp-section__head { max-width: 760px; margin-bottom: 36px; }
.lp-section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.lp-section h2 { font-size: clamp(26px, 3.5vw, 36px); margin-bottom: 14px; }
.lp-section__intro { font-size: 17px; color: var(--color-text-muted); }
.lp-section--dark .lp-section__intro { color: rgba(255,255,255,.8); }

/* prose with brand bullets */
.prose { max-width: 760px; font-size: 16px; }
.prose p { margin-bottom: 14px; }
.prose ul { list-style: none; margin: 0 0 14px; }
.prose li { position: relative; padding-left: 26px; margin-bottom: 9px; }
.prose li::before { content: "✓"; position: absolute; left: 0; top: 1px; color: var(--color-green); font-weight: 800; }
/* nummerierte Prose-Liste (z. B. Bestellstatus-Phasen) – echte Ziffern statt ✓ */
.prose ol { list-style: decimal; margin: 0 0 14px; padding-left: 24px; }
.prose ol li { padding-left: 6px; margin-bottom: 9px; }
.prose ol li::before { content: none; }
/* Inline-Code (z. B. Kommissionsnummer/Modellcode-Beispiele) */
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; background: var(--color-grey); padding: 1px 6px; border-radius: 4px; }
/* Kontaktzeilen (Telefon/E-Mail) ohne ✓-Bullets */
.contact-lines { line-height: 1.9; margin: 4px 0 16px; }
/* Tool-Einbindungs-Platzhalter (z. B. Fahrzeugbewertung / AutoUncle) – Modul-Card mit grünem Akzent */
.tool-embed { max-width: 820px; background: var(--color-grey); border-left: 4px solid var(--color-green); border-radius: var(--radius); padding: 28px 26px; }
.tool-embed__label { font-family: var(--font-hl); font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 10px; }
.tool-embed__note { font-size: 15px; color: var(--color-dark); line-height: 1.6; margin: 0 0 18px; }
.tool-embed__actions { margin: 0 0 16px; }
.tool-embed__fallback { font-size: 13px; color: var(--color-text-muted); margin: 0; }

/* ---- feature grid (benefit tiles) ---- */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.feature-grid--3 { grid-template-columns: repeat(3, 1fr); }
/* Kacheln der Modellseite: dieselbe .feature-Optik, aber auf dunklem Grund und mit
   optionalem Bild darüber. Das Bild sitzt ÜBER dem Text, nicht dahinter — weiße Schrift auf
   einem Foto ist nicht zuverlässig lesbar, sobald die Redaktion eigene Bilder einstellt. */
.feature-grid--tiles { margin-bottom: 56px; }
.feature-grid--tiles .feature { border-color: transparent; }
/* Der umgebende Abschnitt .produkt setzt color:white — ohne diese Zeile erbt die
   Kachelüberschrift Weiß und steht unsichtbar auf der weißen Karte. */
.feature-grid--tiles .feature h3, .feature-grid--tiles .feature h4 { color: var(--color-dark); }
.feature--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.feature__media { margin: 0; }
.feature__media img { width: 100%; height: clamp(180px, 20vw, 240px); object-fit: cover; display: block; }
.feature--media h3, .feature--media h4 { margin: 18px 22px 6px; }
.feature--media p { margin: 0 22px 22px; }
@media (max-width: 860px) { .feature-grid--tiles { grid-template-columns: 1fr; } }

/* Auto-fit-Variante (z. B. 5 Vorteile fließen ausgewogen, statt 4+1) */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.feature {
  background: var(--color-white); border: 1px solid var(--color-grey);
  border-radius: var(--radius); padding: 22px;
}
.lp-section--alt .feature { background: var(--color-white); }
.feature__icon { width: 38px; height: 38px; border-radius: 9px; background: var(--gradient-brand); display: grid; place-items: center; margin-bottom: 14px; color: var(--color-dark); font-weight: 800; }
.feature h3, .feature h4 { font-family: var(--font-hl); font-weight: 800; font-size: 18px; line-height: 1.1; margin-bottom: 6px; }
.feature p { font-size: 14px; color: var(--color-text-muted); }
/* Callout-/Hinweisbox (z. B. Compliance-Hinweise) – ruhig, mit grünem Akzentrand; --warn = dezent rötlich */
.lp-note { margin-top: 22px; padding: 14px 18px; background: var(--color-white); border: 1px solid var(--color-grey); border-left: 4px solid var(--color-green); border-radius: var(--radius); font-size: 14px; line-height: 1.55; color: var(--color-dark); }
.lp-section--alt .lp-note { background: var(--color-light, #f5f6f7); }
.lp-note--warn { border-left-color: #c0392b; }
/* Referenz-/Logo-Platzhalter (Gewerbe) — Kundenlogos folgen mit Freigabe */
.ref-logos { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.ref-logos__item { flex: 1 1 160px; min-height: 84px; display: flex; align-items: center; justify-content: center; padding: 14px; background: var(--color-white); border: 1px dashed var(--color-grey); border-radius: var(--radius); color: #9aa0a6; font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.lp-section--alt .ref-logos__item { background: var(--color-light, #f5f6f7); }
/* Karriere: Stellen-Filter (statischer Platzhalter) + Stellenkarten-Meta */
.filter-group { margin-bottom: 16px; }
.filter-group__label { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin-bottom: 8px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip { display: inline-block; padding: 7px 14px; border: 1px solid var(--color-grey); border-radius: 999px; background: var(--color-white); font-size: 13px; font-weight: 600; color: var(--color-dark); }
.job-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.job-meta__item { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--color-light, #f5f6f7); color: var(--color-dark); }
/* Regionales Engagement: Logo-Raster (Sport / Soziales) */
.engagement-cat + .engagement-cat { margin-top: 34px; }
.engagement-cat__label { font-family: var(--font-hl); font-weight: 700; font-size: 22px; color: var(--color-dark); margin: 0 0 16px; }
.engagement-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.engagement-logo { background: #fff; border: 1px solid var(--color-grey); border-radius: var(--radius); height: 128px; display: flex; align-items: center; justify-content: center; padding: 20px; }
.engagement-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
@media (max-width: 820px) { .engagement-logos { grid-template-columns: repeat(2, 1fr); } }
/* Bild-Banner in Sektionen (Karriere-Ausbildung, Reifen-Werkstatt u.a.) */
.media-banner { width: 100%; border-radius: var(--radius); overflow: hidden; margin: 24px 0 8px; }
.media-banner img { width: 100%; height: clamp(240px, 34vw, 420px); object-fit: cover; object-position: center 28%; display: block; }
/* Startseite: bildstarker Full-Bleed-Hero (Autohaus-Foto + weißes Logo + Fokus auf 2 CTAs) */
/* Startseiten-Hero: Branding links + Angebots-Slider rechts, ruhiges Markendunkel */
.home-hero { background: var(--color-dark); color: #fff; padding: 54px 0 58px; }
.home-hero__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 48px; align-items: center; }
.home-hero__grid > * { min-width: 0; } /* erlaubt der Slider-Spalte, unter ihre Min-Content-Breite zu schrumpfen (kein Mobile-Overflow) */
.home-hero__logo { width: min(320px, 70%); height: auto; display: block; margin: 0 0 24px; }
.home-hero__title { color: #fff; font-size: clamp(30px, 4.2vw, 48px); line-height: 1.08; margin: 0 0 16px; }
.home-hero__sub { color: rgba(255,255,255,.86); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; max-width: 520px; margin: 0 0 22px; }
.home-hero__link { font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--color-green); text-decoration: none; }
.home-hero__link:hover { text-decoration: underline; }
.home-hero__trust { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin: 28px 0 0; padding: 16px 24px; background: #fff; border-radius: var(--radius); width: fit-content; }
.home-hero__trust-item { display: flex; align-items: center; gap: 12px; }
.home-hero__trust-img { height: 42px; width: auto; object-fit: contain; }
.home-hero__trust-item span { font-size: 12.5px; line-height: 1.35; color: var(--color-dark); font-weight: 600; text-align: left; }
/* Der Hero trägt EIN Angebot (kein Karussell mehr, 15.09.2026). Die Breitenbegrenzung
   saß zuvor am .hero-slider und muss deshalb hierher wandern, sonst zieht die Karte
   die volle Spaltenbreite. */
.home-hero__offers > .deal-card { max-width: min(100%, 400px); margin: 0 auto; }
@media (max-width: 860px) {
  .home-hero__grid { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .home-hero__logo { margin-left: auto; margin-right: auto; }
  .home-hero__sub { margin-left: auto; margin-right: auto; }
  .home-hero__trust { justify-content: center; margin-left: auto; margin-right: auto; }
}

/* Fahrzeugsuche-Band (Startseite, unter dem Hero) */
.fzsuche { background: var(--color-dark); color: #fff; padding: 28px 0 34px; border-top: 1px solid rgba(255,255,255,.12); }
.fzsuche__title { font-family: var(--font-hl); font-weight: 700; color: #fff; font-size: clamp(20px, 2.4vw, 28px); margin: 0 0 18px; }
.fzsuche__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fzsuche select {
  width: 100%; padding: 13px 15px; border: 1px solid var(--color-grey); border-radius: var(--radius);
  background: var(--color-white); color: var(--color-dark); font-family: var(--font-body); font-size: 15px; cursor: pointer;
}
.fzsuche select:required:invalid { color: #6a7178; }
.fzsuche__actions { display: flex; align-items: center; justify-content: flex-end; gap: 22px; margin-top: 16px; }
.fzsuche__detail { color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 15px; text-decoration: none; }
.fzsuche__detail:hover { color: var(--color-green); }
.fzsuche__actions .btn-primary { padding: 13px 30px; }
@media (max-width: 900px) { .fzsuche__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .fzsuche__grid { grid-template-columns: 1fr; } .fzsuche__actions { flex-direction: column-reverse; align-items: stretch; gap: 14px; } .fzsuche__actions .btn-primary { width: 100%; } .fzsuche__detail { text-align: center; } }

/* Bild-Navigationskacheln (Startseite) */
.nav-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nav-tile { position: relative; display: flex; align-items: center; justify-content: center; min-height: 220px; border-radius: var(--radius); overflow: hidden; background-size: cover; background-position: center; text-decoration: none; }
.nav-tile__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,64,78,.22) 0%, rgba(10,64,78,.5) 100%); transition: var(--transition); }
.nav-tile:hover .nav-tile__overlay { background: linear-gradient(180deg, rgba(10,64,78,.35) 0%, rgba(10,64,78,.62) 100%); }
.nav-tile__label { position: relative; z-index: 1; max-width: 86%; background: var(--color-green); color: var(--color-dark); font-family: var(--font-hl); font-weight: 800; font-size: clamp(15px, 1.7vw, 20px); text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; text-align: center; padding: 12px 22px; border-radius: 4px; box-shadow: 0 8px 20px rgba(0,0,0,.28); transition: var(--transition); }
.nav-tile:hover .nav-tile__label { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.34); }
@media (max-width: 860px) { .nav-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .nav-tiles { grid-template-columns: 1fr; } .nav-tile { min-height: 170px; } }

/* Google-Bewertungs-Karten (/autohaus/) */
.rating-num { font-family: var(--font-hl); font-weight: 800; font-size: 40px; line-height: 1; color: var(--color-dark); margin: 4px 0 2px; }
.rating-num span { font-size: 15px; font-weight: 600; color: var(--color-text-muted); }
.rating-stars { color: #f5a623; font-size: 20px; letter-spacing: 3px; margin: 4px 0; }
.rating-count { font-size: 14px; color: var(--color-text-muted); }
/* Öffnungszeiten-Tabelle (Standortseiten) */
.hours-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.hours-table th, .hours-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--color-grey); font-size: 15px; }
/* Tabellenkopf der Öffnungszeiten: Mint auf Weiß ergab 1,31:1 — ein Spaltenkopf muss lesbar
   sein. (Kontrast-Audit 11.08.2026) */
.hours-table thead th { font-family: var(--font-hl); color: var(--color-dark); font-weight: 700; }
.hours-table tbody td:first-child { font-weight: 700; }
.hours-table tbody tr:last-child td { border-bottom: none; }
/* Ansprechpartner-Karte (Gewerbe) — Foto füllt die volle Kartenbreite randlos, Text eingerückt */
.berater-card { padding: 0; overflow: hidden; }
.berater-card__photo { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: top center; display: block; }
.berater-card__body { padding: 20px 22px 24px; }
/* Standalone Spec-/Bedingungsliste (dt links, dd rechts) */
.spec-list { margin: 0; max-width: 760px; }
.spec-list > div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--color-grey); }
.spec-list dt { color: var(--color-text-muted); font-size: 15px; flex: none; }
.spec-list dd { margin: 0; font-weight: 600; color: var(--color-dark); text-align: right; }
/* Hero-Seitenpanel (dunkler Hero) – rahmt die USP-Liste, wenn kein Bild vorhanden ist */
.lp-hero__aside { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); padding: 26px 28px; }
.lp-hero__aside-title { font-family: var(--font-hl); font-weight: 700; font-size: 16px; color: var(--color-white); margin: 0 0 14px; }
.lp-hero__aside .hero-usp { margin: 0; }

/* ---- duo: two comparison cards ---- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.duo__card { border: 1px solid var(--color-grey); border-radius: var(--radius); padding: 30px; background: var(--color-white); display: flex; flex-direction: column; }
.duo__card h3 { font-size: 22px; margin-bottom: 16px; }
.duo__card .prose { flex: 1; }
/* image fills the whole card (cover, centered) – e.g. Reifengarantie-Visual */
.duo__card--image { padding: 0; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 260px; }
/* Reifengarantie-Ausnahmen als dezente, aufklappbare Fußnote */
.garantie-note { margin-top: 20px; max-width: 760px; }
.garantie-note > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--color-text-muted); list-style-position: inside; padding: 4px 0; }
.garantie-note > summary::marker { color: var(--color-green); }
.garantie-note > summary:hover { color: var(--color-dark); }
.garantie-note__body { padding-top: 8px; font-size: 13px; color: var(--color-text-muted); line-height: 1.6; }
.garantie-note__body p { margin: 0 0 6px; }
.garantie-note__body ul { margin: 0; padding-left: 18px; }
.garantie-note__body li { margin: 2px 0; }
.duo__card .btn-primary, .duo__card .btn-secondary { margin-top: 18px; align-self: flex-start; }

/* ---- steps (numbered process) — .lp-step(s) to avoid collision with Fabia modal .step ---- */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
.lp-step { position: relative; padding: 26px 22px 22px; border: 1px solid var(--color-grey); border-radius: var(--radius); background: var(--color-white); }
.lp-step::before { counter-increment: step; content: counter(step); position: absolute; top: -16px; left: 22px; width: 36px; height: 36px; border-radius: 50%; background: var(--color-dark); color: var(--color-green); font-family: var(--font-hl); font-weight: 800; font-size: 18px; display: grid; place-items: center; }
.lp-step h3 { font-size: 18px; margin: 8px 0 6px; }
.lp-step p { font-size: 14px; color: var(--color-text-muted); }

/* ---- factors (chip list) ---- */
.factors { display: flex; flex-wrap: wrap; gap: 10px; }
.factors li { list-style: none; background: var(--color-white); border: 1px solid var(--color-grey); border-radius: 999px; padding: 9px 18px; font-size: 14px; font-weight: 600; }
.lp-section--dark .factors li { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: var(--color-white); }

/* ---- clickable factor tabs (no-JS: radio + :checked sibling) ---- */
.factor-tabs > input { position: absolute; left: -9999px; }
.factor-tabs__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.factor-btn { cursor: pointer; background: var(--color-white); border: 1px solid var(--color-grey); border-radius: 999px; padding: 9px 18px; font-size: 14px; font-weight: 600; color: var(--color-dark); transition: var(--transition); }
.factor-btn:hover { border-color: var(--color-dark); }
.factor-tabs__panels { margin-top: 22px; }
.factor-panel { display: none; }
.factor-panel p { max-width: 760px; font-size: 16px; color: var(--color-text); line-height: 1.6; }
/* show the panel matching the checked tab */
#rf-0:checked ~ .factor-tabs__panels #fp-0,
#rf-1:checked ~ .factor-tabs__panels #fp-1,
#rf-2:checked ~ .factor-tabs__panels #fp-2,
#rf-3:checked ~ .factor-tabs__panels #fp-3,
#rf-4:checked ~ .factor-tabs__panels #fp-4,
#rf-5:checked ~ .factor-tabs__panels #fp-5,
#rf-6:checked ~ .factor-tabs__panels #fp-6,
#rf-7:checked ~ .factor-tabs__panels #fp-7,
#rf-8:checked ~ .factor-tabs__panels #fp-8,
#rf-9:checked ~ .factor-tabs__panels #fp-9,
#rf-10:checked ~ .factor-tabs__panels #fp-10,
#rf-11:checked ~ .factor-tabs__panels #fp-11,
#rf-12:checked ~ .factor-tabs__panels #fp-12,
#rf-13:checked ~ .factor-tabs__panels #fp-13,
#rf-14:checked ~ .factor-tabs__panels #fp-14,
#rf-15:checked ~ .factor-tabs__panels #fp-15 { display: block; }
/* highlight the active button */
#rf-0:checked ~ .factor-tabs__btns label[for="rf-0"],
#rf-1:checked ~ .factor-tabs__btns label[for="rf-1"],
#rf-2:checked ~ .factor-tabs__btns label[for="rf-2"],
#rf-3:checked ~ .factor-tabs__btns label[for="rf-3"],
#rf-4:checked ~ .factor-tabs__btns label[for="rf-4"],
#rf-5:checked ~ .factor-tabs__btns label[for="rf-5"],
#rf-6:checked ~ .factor-tabs__btns label[for="rf-6"],
#rf-7:checked ~ .factor-tabs__btns label[for="rf-7"],
#rf-8:checked ~ .factor-tabs__btns label[for="rf-8"],
#rf-9:checked ~ .factor-tabs__btns label[for="rf-9"],
#rf-10:checked ~ .factor-tabs__btns label[for="rf-10"],
#rf-11:checked ~ .factor-tabs__btns label[for="rf-11"],
#rf-12:checked ~ .factor-tabs__btns label[for="rf-12"],
#rf-13:checked ~ .factor-tabs__btns label[for="rf-13"],
#rf-14:checked ~ .factor-tabs__btns label[for="rf-14"],
#rf-15:checked ~ .factor-tabs__btns label[for="rf-15"] { background: var(--color-dark); color: var(--color-white); border-color: var(--color-dark); }

/* ---- callout band ---- */
.callout { background: var(--gradient-brand); color: var(--color-dark); border-radius: var(--radius); padding: 40px; text-align: center; }
.callout h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 10px; }
.callout p { max-width: 620px; margin: 0 auto 22px; font-weight: 500; }
.callout__ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.callout .btn-secondary { border-color: var(--color-dark); }

/* ---- internal link grid ---- */
.linkgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.linkcard { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--color-grey); border-radius: var(--radius); padding: 18px 20px; background: var(--color-white); font-weight: 700; transition: var(--transition); }
.linkcard:hover { border-color: var(--color-dark); transform: translateY(-2px); }
.linkcard::after { content: "›"; color: var(--color-green); font-size: 22px; font-weight: 800; }


/* ---- LP CTA band (real) ---- */
.lp-cta { background: var(--color-dark); color: var(--color-white); padding: 56px 0; text-align: center; }
.lp-cta h2 { font-size: clamp(26px, 3.5vw, 34px); margin-bottom: 12px; }
.lp-cta p { color: rgba(255,255,255,.82); max-width: 600px; margin: 0 auto 22px; }
.lp-cta .btn-secondary { color: var(--color-white); border-color: rgba(255,255,255,.55); }
.lp-cta .btn-secondary:hover { background: var(--color-white); color: var(--color-dark); }

/* ---- LP responsive ---- */
@media (max-width: 900px) {
  .lp-hero__grid { grid-template-columns: 1fr; gap: 30px; }
  .lp-hero__visual, .lp-hero__slider { order: -1; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-steps, .linkgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .feature-grid, .lp-steps, .duo, .linkgrid { grid-template-columns: 1fr; }
}

/* =====================================================================
   EXTRACTED FABIA BLOCKS — round 2
   (deal cards, photo gallery + lightbox, why-us, reviews, sponsorings)
   ===================================================================== */

/* deal cards (B.dealCards) — light section */
.angebote { padding: var(--space-section) 0; }
.angebote__header { margin-bottom: 40px; }
.deal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 28px; }
.deal-card { border: 1px solid var(--color-grey); border-radius: 12px; overflow: hidden; background: var(--color-white); transition: box-shadow var(--transition); }
.deal-card:hover { box-shadow: 0 8px 32px rgba(10,64,78,0.13); }
/* Angebotsart als volle Leiste über dem Bild-Slider */
.deal-card__toplabel { background: var(--color-green); color: var(--color-dark); font-family: var(--font-hl); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 16px; text-align: center; border-bottom: 1px solid rgba(10,64,78,0.12); }
.deal-card__body { padding: 22px; }
.deal-card__title { font-family: var(--font-hl); font-weight: 700; font-size: 22px; color: var(--color-dark); margin-bottom: 6px; }
.deal-card__subline { font-size: 14px; font-weight: 600; color: var(--color-dark); margin-bottom: 14px; line-height: 1.5; }
.deal-card__energy { font-size: 12px; color: var(--color-text-muted); line-height: 1.5; margin-bottom: 12px; }
.deal-card__rate { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.deal-card__rate-val { font-family: var(--font-hl); font-weight: 800; font-size: 26px; color: var(--color-dark); white-space: nowrap; }

/* Deal-Card Bild-Slider (mehrere Fahrzeugbilder je Angebot) */
.deal-card__slider { position: relative; overflow: hidden; background: var(--color-white); }
.deal-card__slider-vp { overflow: hidden; }
.deal-card__slider-track { display: flex; transition: transform .4s cubic-bezier(.25,0,.25,1); }
.deal-card__slide { flex: 0 0 100%; min-width: 100%; }
.deal-card__slide img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.deal-card__slider-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.88); color: var(--color-dark); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 2px 10px rgba(0,0,0,.22); }
.deal-card__slider-nav:hover { background: #fff; }
.deal-card__slider-nav--prev { left: 10px; }
.deal-card__slider-nav--next { right: 10px; }
.deal-card__slider-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; gap: 6px; justify-content: center; z-index: 2; }
.deal-card__slider-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.65); box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer; transition: width .2s, background .2s; }
.deal-card__slider-dot[aria-current="true"] { background: #fff; width: 20px; border-radius: 4px; }

/* ===== Deal-Card v3 (global) ===== */
.deal-card--v3 { display: flex; flex-direction: column; }
.deal-card--v3 .deal-card__body { flex: 1; display: flex; flex-direction: column; }
/* enger Abstand Subline↔Verbrauch (keine reservierte Leerzeile) */
.deal-card--v3 .deal-card__subline { margin-bottom: 8px; }
/* Pflichtangaben stehen unter dem CTA — siehe B.dealCard. */
.deal-card--v3 .deal-card__energy { margin: 14px 0 0; }
/* Einheitliche Höhen: Preisbereich füllt den Restplatz, CTAs dadurch auf einer Linie */
.deal-card--v3 .deal-card__body > .dc-toggle { flex: 1; }
/* Leasing- und Kauf-Panel im selben Grid-Feld überlagern → Box = Höhe des größeren Panels,
   kein Höhensprung beim Umschalten (auch bei allein stehenden Karten). */
.deal-card--v3 .dc-toggle { display: grid; grid-template-rows: auto 1fr; }
.deal-card--v3 .dc-toggle__tabs { grid-row: 1; }
.deal-card--v3 .dc-panel { grid-row: 2; grid-column: 1; display: flex; flex-direction: column; }
/* CTA immer unten (auch bei minimalen Teaser-Karten ohne Preisbox) */
.deal-card--v3 .deal-card__cta { margin-top: auto; }
.deal-card--v3 .dc-panel .dc-uvp-line { margin-top: 10px; }
.dc-foerder { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(10,64,78,0.20); }
.dc-foerder__lbl { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.dc-foerder__val { font-family: var(--font-hl); font-weight: 800; font-size: 18px; color: var(--color-dark); white-space: nowrap; }
.dc-foerder__val .dc-fn { font-size: 0.5em; color: inherit; vertical-align: baseline; position: relative; top: -1.2em; }
.deal-card--v3 .deal-card__prices { background: #f4f5f6; border: 1px solid rgba(10,64,78,.1); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.deal-card--v3 .deal-card__rate-val { font-size: 28px; }
/* selektiver Fettdruck der Anker-Labels (Monatliche Rate / Unser Preis) */
.dc-lbl-strong { font-family: var(--font-hl); font-weight: 700; font-size: 14px; color: var(--color-dark); }
/* Kauf-Ansicht: Listenpreis (UVP, durchgestrichen) unter „Unser Preis" */
.dc-uvp-line { font-size: 12px; color: var(--color-text-muted); margin-top: 8px; }
.dc-uvp-line s { text-decoration: line-through; }
/* Fußnoten-Hochzahl in der Karte + Kleingedrucktes unter den Karten */
.dc-fn { font-size: 0.6em; font-weight: 600; vertical-align: super; line-height: 0; color: var(--color-text-muted); }
/* ² und ³ sitzen am Preis → kleiner, gleiche Farbe, echte Hochstellung oben rechts am € */
.deal-card__rate-val .dc-fn { font-size: 0.4em; color: inherit; vertical-align: baseline; position: relative; top: -1.15em; }
.deal-fineprint { margin-top: 20px; max-width: 920px; font-size: 11px; line-height: 1.6; color: var(--color-text-muted); }
.deal-fineprint p { margin: 0 0 5px; }
.deal-fineprint p:last-child { margin-bottom: 0; }
.deal-fineprint sup { font-weight: 600; }
.deal-fineprint a { color: inherit; text-decoration: underline; }

/* Pflichtangaben-Register der Angebotsdetailseiten (¹–⁵ am Wert, Auflösung unter der
   Konditionstabelle, Energie-/EnVKV-Block am Seitenende). Siehe
   VORLAGE-Pflichtangaben-Angebote.md */
/* Marker erbt immer die Textfarbe (funktioniert so auf hellem UND dunklem Grund — im Hero
   liegt die Verbrauchszeile auf Dunkeltürkis) und wird nur über die Deckkraft zurückgenommen. */
.od-fn { font-size: 0.55em; font-weight: 400; vertical-align: super; line-height: 0; color: inherit; opacity: 0.75; }
/* An Preisen: bewusst unauffällig — sehr klein, kein Fettdruck, echte Hochstellung oben
   rechts am €. `top` ist relativ zur eigenen Schriftgröße, muss beim Verkleinern also
   mitwachsen, damit die Zahl auf Höhe der Oberkante bleibt. */
.offer-prices__val .od-fn { font-size: 0.36em; font-weight: 400; opacity: 1; vertical-align: baseline; position: relative; top: -1.55em; }
.offer-prices__uvpline .od-fn { font-size: 0.85em; opacity: 1; }
/* In der Konditionstabelle abgesetzte Graustufe statt Dunkeltürkis, damit der Wert führt —
   die Größe darf dadurch kräftiger sein, ohne mit dem Preis zu konkurrieren. */
.spec-row__v .od-fn { font-size: 0.5em; font-weight: 400; color: rgba(24,24,24,0.7); opacity: 1; vertical-align: baseline; position: relative; top: -0.95em; }
/* Fahrzeugdetails als EIN integrierter Bereich: Überschrift, Pflichtangaben und die
   aufklappbaren Zeilen liegen in einer gemeinsamen Box. */
.vd-box { border: 1px solid rgba(10,64,78,0.14); border-radius: var(--radius); background: var(--color-white); overflow: hidden; }
.vd-box__head { padding: 28px 28px 0; }
.vd-box__head h2 { margin-bottom: 10px; }
.vd-box__head .lp-section__intro { margin-bottom: 0; }

/* Pflichtangaben nach Pkw-EnVKV — DAUERHAFT SICHTBAR, nie im geschlossenen Akkordeon.
   Schriftgröße mindestens wie die Fahrzeugdaten (15px), CO₂-Klasse hervorgehoben. */
/* Typografie bewusst identisch zur Fahrzeugdaten-Tabelle (.spec-row: 15px, Label grau,
   Wert 600/dunkel) — der Block soll sich ins Gesamtbild fügen und nicht herausstechen.
   Damit bleibt er zugleich **gleich stark** wie die Motorisierungsangaben, was die
   Pkw-EnVKV verlangt („nicht weniger hervorgehoben"). */
.energy-key { margin: 24px 28px 0; padding: 16px 20px; background: var(--color-grey); border-left: 3px solid var(--color-green); border-radius: var(--radius); }
.energy-key__title { font-family: var(--font-hl); font-weight: 700; font-size: 15px; color: var(--color-dark); margin-bottom: 10px; }
.energy-key__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 28px; margin: 0; }
.energy-key__row { display: flex; flex-direction: column; gap: 1px; }
.energy-key__row dt { font-size: 15px; color: var(--color-text-muted); }
.energy-key__row dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-dark); }
@media (max-width: 720px) { .energy-key__list { grid-template-columns: 1fr; } }

/* Aufklappbare Zeilen (native <details>, kein JS). Erste Zeile ist offen. */
.vd-accordion { margin-top: 24px; }
.vd-box .vd-accordion { margin-top: 24px; border-top: 1px solid rgba(10,64,78,0.14); }
.vd-item + .vd-item { border-top: 1px solid rgba(10,64,78,0.14); }
.vd-item > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 18px 54px 18px 24px; position: relative; cursor: pointer; list-style: none; transition: background var(--transition); }
.vd-item > summary::-webkit-details-marker { display: none; }
.vd-item > summary:hover { background: rgba(10,64,78,0.035); }
.vd-item > summary:focus { outline: 3px solid var(--color-green); outline-offset: -3px; }
.vd-item__title { font-family: var(--font-hl); font-weight: 700; font-size: 20px; color: var(--color-dark); }
.vd-item__hint { font-size: 13px; color: var(--color-text-muted); }
/* Chevron rechts, dreht beim Aufklappen */
/* „+"/„−" statt Chevron: Ein Pfeil nach unten liest sich auch als „weiter unten mehr dazu";
   Plus und Minus sagen eindeutig, dass sich etwas öffnet und schließt. */
.vd-item > summary::after { content: "+"; position: absolute; right: 24px; top: 50%; translate: 0 -50%; font-family: var(--font-hl); font-weight: 700; font-size: 26px; line-height: 1; color: var(--color-dark); opacity: .75; }
.vd-item[open] > summary::after { content: "\2212"; }
.vd-item[open] > summary { background: rgba(10,64,78,0.035); }
.vd-item__body { padding: 4px 24px 26px; }
.vd-item__body .spec-row:last-child { border-bottom: none; }
/* Freitext Sonderausstattung (WYSIWYG-Inhalt) */
.vd-prose { font-size: 15px; line-height: 1.65; color: var(--color-dark); max-width: 900px; }
.vd-prose p { margin: 0 0 12px; }
.vd-prose ul { list-style: none; margin: 0; padding: 0; }
.vd-prose li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.vd-prose li::before { content: "✓"; position: absolute; left: 0; color: var(--color-dark); font-weight: 700; }
.vd-prose strong { font-weight: 700; }
@media (max-width: 640px) {
  .vd-item > summary { padding: 16px 46px 16px 18px; }
  .vd-item__title { font-size: 18px; }
  .vd-item__body { padding: 4px 18px 22px; }
}

/* CTA-Zeile zwischen zwei Sektionen — eigener Abstand, damit der Button nicht am Bild klebt. */
.offer-cta-row { padding-block: 26px 30px; }
/* Advisor-Strip auf den Angebotsseiten grau, damit der Weiß-Grau-Wechsel durchläuft. */
.offer-section--wide + .kontakt-section { background: var(--color-grey); border-top: none; }
/* Beraterblock und Gewerbe-Vorteile bilden ein durchgehendes graues Band. An ihrer Naht
   stoßen zwei volle Sektionspaddings aufeinander (80px + 80px = 160px) — das reißt das Band
   optisch auseinander. Beide Seiten der Naht auf die Hälfte, ergibt 80px Gesamtabstand wie
   zwischen zwei normalen Sektionen. */
.kontakt-section:has(+ #vorteile-gewerbekunden) { padding-bottom: calc(var(--space-section) / 2); }
#vorteile-gewerbekunden { padding-top: calc(var(--space-section) / 2); }
.offer-cta-row--wide { padding-block: 0 44px; }

/* Engagement-Block mit Begründungstexten (nur /autohaus/) */
.engagement-detail__cat { font-family: var(--font-hl); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-dark); margin: 30px 0 14px; }
.engagement-detail__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.engagement-card { display: flex; flex-direction: column; padding: 20px; background: var(--color-white); border-radius: var(--radius); }
.engagement-card__logo { height: 64px; margin-bottom: 14px; background-size: contain; background-position: left center; background-repeat: no-repeat; }
.engagement-card h4 { font-family: var(--font-hl); font-weight: 700; font-size: 17px; color: var(--color-dark); margin-bottom: 6px; }
.engagement-card p { font-size: 14px; line-height: 1.6; color: var(--color-text-muted); margin: 0; }
@media (max-width: 1000px) { .engagement-detail__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .engagement-detail__grid { grid-template-columns: 1fr; } }

/* --- Angebotskonditionen: Quick-Facts · Bestandteile · Optionen --- */
/* Quick-Facts: die vier Kernkonditionen auf einen Blick, vor der Tabelle. */
/* auto-fit statt fester 4 Spalten: Kaufangebote mit Finanzierung tragen eine fünfte Kachel
   („Überführungskosten — inklusive"). Bei 920px Breite passen fünf Kacheln à 174px in eine
   Zeile, vier à 221px ebenso — ohne verwaiste Einzelkachel in einer zweiten Reihe. */
.offer-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; max-width: 920px; margin-bottom: 24px; }
/* Fläche statt Linie: Die Sektion steht auf Weiß (`.lp-section` hat keinen eigenen
   Hintergrund, `body` ist weiß), weiße Kacheln mit 1px-Rahmen erreichten dort nur 1,29:1 und
   waren damit exakt so kräftig wie die Trennlinien der Tabelle darunter — beide Blöcke
   verschwammen. Grau gefüllt und rahmenlos trägt die Kachel ihre Definition selbst und hebt
   sich bewusst von der rahmenlosen Tabelle ab. Die Sektion selbst kann NICHT grau werden:
   `.offer-section--wide + .kontakt-section` färbt bereits die Folgesektion grau. */
.offer-fact { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; background: var(--color-grey); border-radius: var(--radius); }
.offer-fact__k { font-size: 13px; color: var(--color-text-muted); }
/* tabular-nums: gleich breite Ziffern, damit die Beträge untereinander nicht zickzacken. */
.offer-fact__v { font-family: var(--font-hl); font-weight: 800; font-size: 21px; color: var(--color-dark); line-height: 1.15; font-variant-numeric: tabular-nums; }
/* Zusatzzeile in der Kachel (Sollzins, Laufleistung): gehört zum Wert, darf ihn aber nicht
   überlagern — deshalb klein und in der gedämpften Textfarbe. */
.offer-fact__sub { margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--color-text-muted); }
@media (max-width: 720px) { .offer-facts { grid-template-columns: 1fr 1fr; } }

/* Vorspann über der Tabelle: Angebotsart + Leasinggeber — ersetzt die beiden früheren
   Tabellenzeilen, die dort nur Platz gekostet haben. */
.offer-table__lead { max-width: 920px; margin: 0 0 12px; font-size: 13px; color: var(--color-text-muted); }
.offer-table__note { max-width: 920px; margin: 10px 0 0; font-size: 13px; color: var(--color-text-muted); }
/* Hervorgehobene Zeile (monatliche Rate bzw. Kaufpreis) */
.spec-row--lead .spec-row__k { color: var(--color-dark); font-weight: 600; }
.spec-row--lead .spec-row__v { font-family: var(--font-hl); font-weight: 800; font-size: 19px; }
/* Zwischenüberschrift der Konditionsgruppen („Ihre Kosten" / „Rahmenbedingungen").
   Keine eigene Zeile im Tabellensinn — sie trägt keinen Wert und deshalb auch keinen
   Trennstrich; die Grundlinie darunter gehört zur ersten Datenzeile der Gruppe. */
/* opacity .8 statt .6 — .6 ergab nur 3,59:1 (AA verfehlt), .8 ergibt 6,30:1.
   `margin: 0`, weil das Element jetzt ein <h3> ist (Semantik statt reiner Optik). */
.offer-table__cap { font-family: var(--font-hl); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-dark); opacity: .8; margin: 0; padding: 18px 0 6px; }

/* Zusätze wie „(Rate × Laufzeit)" oder „(einmalig)" als Zweitzeile statt inline: vier
   Klammern in fünf Zeilen haben die Labelspalte unruhig gemacht. Die Werte richten sich
   über `baseline` weiterhin an der ERSTEN Zeile des Labels aus. */
.offer-table .spec-row { align-items: baseline; }
.offer-table .spec-row__k span { display: block; }
.offer-table .spec-row__k span,
.offer-table .spec-row__v span { font-size: 13px; color: var(--color-text-muted); font-weight: 400; }
.offer-table .spec-row__v { font-variant-numeric: tabular-nums; }

/* Angebotsoptionen: bewusst als Karten statt Tabellenzeilen — sie sind KEINE Konditionen,
   sondern Zusatzleistungen. Die optische Trennung soll verhindern, dass Kunden sie für
   Bestandteile des Angebots halten. */
.offer-options { max-width: 920px; margin-top: 30px; }
.offer-options__title { font-family: var(--font-hl); font-weight: 800; font-size: 20px; color: var(--color-dark); margin-bottom: 4px; }
.offer-options__intro { font-size: 14px; color: var(--color-text-muted); margin: 0 0 18px; }
/* Vier Optionen passen auf Desktop in eine Zeile; darunter gestuft. */
.offer-options__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1100px) { .offer-options__grid { grid-template-columns: repeat(2, 1fr); } }
/* Balken bewusst NICHT mint: Mint ist laut Brand Book die CTA-/Akzentfarbe. Mit vier
   Optionskarten plus Wunsch-Block trugen zuvor sechs Elemente im Abschnitt Mint, wodurch der
   Primary-CTA seine Dominanz verlor. Der Preis liegt jetzt außerdem eine Stufe unter den
   Konditionswerten (16px/700 statt 18px/800) — Zusatzleistung schlägt nicht Angebot. */
/* Flex-Spalte, damit der Preis über `margin-top:auto` am Kachelboden sitzt: Die Nutzentexte
   sind unterschiedlich lang, ohne diese Bindung stünden die Preise auf vier verschiedenen
   Höhen und die Zeile wirkte unruhig. Die Grid-Zellen sind ohnehin gleich hoch (stretch). */
.offer-option { display: flex; flex-direction: column; padding: 16px 17px; background: var(--color-white); border: 1px solid var(--color-grey); border-left: 3px solid rgba(10,64,78,0.25); border-radius: var(--radius); }
.offer-option__k { display: block; font-family: var(--font-hl); font-weight: 700; font-size: 16px; color: var(--color-dark); }
/* Reihenfolge in der Kachel: Bezeichnung → Nutzentext → Preis (Kundenentscheidung 02.09.2026).
   Der Preis steht zuletzt, weil er bei zwei der vier Leistungen keine Zahl ist, sondern
   „Individuell berechnet" — als zweite Zeile hätte das wie ein fehlender Wert gewirkt. */
.offer-option__t { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--color-text-muted); }
.offer-option__v { display: block; margin-top: auto; padding-top: 14px; font-family: var(--font-hl); font-weight: 700; font-size: 16px; color: var(--color-dark); }
/* Erst bei 520px einspaltig: bei 720px standen sonst vier Karten (~600px Scrollstrecke)
   zwischen Konditionen und dem nächsten Inhalt. */
@media (max-width: 520px) { .offer-options__grid { grid-template-columns: 1fr; } }

/* Kompakter Hinweisblock unter der Angebotskonditionen-Tabelle: Wunschkonfiguration.
   Gleiche Breite wie die Tabelle (.spec-grid--single, max-width 720px), damit der Abschnitt
   eine durchgehende Kante hat. */
.offer-wunsch { margin-top: 26px; padding: 20px 24px; background: var(--color-white); border: 1px solid var(--color-grey); border-left: 4px solid var(--color-green); border-radius: var(--radius); }
/* Pflichtangaben-Pilot: Tabelle, Hinweisblock und Pflichtangaben-Zeilen laufen auf einer
   gemeinsamen Breite (920px), damit der Abschnitt eine durchgehende Kante hat.
   Ohne die Modifier-Klasse bleibt die globale 720px-Breite der Tabelle unangetastet. */
/* Im v2-Modus entfällt der Intro-Absatz, der Kopf trägt dann nur noch die H2 — die 36px
   Standardabstand lassen die große Condensed-Headline zu dicht auf den Kacheln sitzen.
   Bewusst auf diese Sektion beschränkt statt global auf jeden Kopf ohne Intro. */
.offer-section--wide .lp-section__head:not(:has(.lp-section__intro)) { margin-bottom: 46px; }
.offer-section--wide .offer-table.spec-grid--single,
.offer-section--wide .offer-wunsch { max-width: 920px; }
/* Zeilentrenner sichtbar machen: .spec-row nutzt global --color-grey — exakt die
   Hintergrundfarbe von .lp-section--alt, dadurch waren die Linien hier unsichtbar. */
.offer-section--wide .offer-table { border-top: 1px solid rgba(10,64,78,0.28); }
.offer-section--wide .offer-table .spec-row { border-bottom-color: rgba(10,64,78,0.28); }
.offer-wunsch h3 { font-family: var(--font-hl); font-weight: 800; font-size: 20px; color: var(--color-dark); margin-bottom: 6px; }
.offer-wunsch p { font-size: 14px; line-height: 1.6; color: var(--color-text-muted); margin: 0; }

.od-legal { margin-top: 20px; max-width: 920px; font-size: 11px; line-height: 1.6; color: var(--color-text-muted); }
.od-legal p { margin: 0 0 6px; }
.od-legal p:last-child { margin-bottom: 0; }
.od-legal sup { font-weight: 600; }
.od-energy { margin-bottom: 26px; }
.od-envkv { max-width: 920px; font-size: 11px; line-height: 1.6; color: var(--color-text-muted); }
.od-envkv p { margin: 0 0 8px; }
.od-envkv p:last-child { margin-bottom: 0; }
.od-envkv a { color: inherit; text-decoration: underline; }
/* Interne Marker 1⁾/2⁾ der EnVKV-Erläuterungen — bewusst NICHT hochgestellt, damit sie sich
   vom Fußnoten-Register ¹–⁷ der Angebotskonditionen unterscheiden. */
.od-envkv__mk { font-weight: 700; margin-right: 3px; }
/* Abbildungshinweis direkt unter der Galerie (Pflichthinweis, muss ohne Klick sichtbar sein) */
.od-abbildung { max-width: 920px; margin: 14px 0 0; font-size: 12px; color: var(--color-text-muted); }
/* Unbedingter Unverbindlichkeitsvorbehalt — leicht abgesetzt vom Fußnoten-Register darüber */
.od-legal__vorbehalt { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--color-grey); }

/* Mini-Icons vor den Konditionen */
.dc-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.dc-fact { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--color-text-muted); }
.dc-fact svg { color: var(--color-dark); opacity: .5; flex: 0 0 auto; }
/* Leasing/Kauf-Toggle (CSS-only, No-JS) */
.dc-toggle__radio { position: absolute; opacity: 0; width: 0; height: 0; }
.dc-toggle__tabs { display: flex; gap: 4px; background: #e7e9ea; border-radius: 999px; padding: 3px; margin-bottom: 12px; }
.dc-tab { flex: 1; text-align: center; font-family: var(--font-hl); font-weight: 700; font-size: 13px; color: var(--color-text-muted); padding: 7px 10px; border-radius: 999px; cursor: pointer; transition: var(--transition); }
.dc-toggle__radio--leasing:checked ~ .dc-toggle__tabs .dc-tab--leasing,
.dc-toggle__radio--kauf:checked ~ .dc-toggle__tabs .dc-tab--kauf,
.dc-tab--active { background: var(--color-white); color: var(--color-dark); box-shadow: 0 1px 3px rgba(0,0,0,.12); cursor: default; }
/* Umschalten über Sichtbarkeit (beide Panels bleiben im Grid-Feld → konstante Höhe) */
.dc-panel--kauf { visibility: hidden; }
.dc-toggle__radio--kauf:checked ~ .dc-panel--kauf { visibility: visible; }
.dc-toggle__radio--kauf:checked ~ .dc-panel--leasing { visibility: hidden; }
.deal-card--v3 .dc-toggle--single .dc-panel { visibility: visible; }
.dc-toggle__radio:focus ~ .dc-toggle__tabs { outline: 3px solid var(--color-green); outline-offset: 2px; }
/* dezentere Slider-Pfeile (Einblenden bei Hover) */
.deal-card--v3 .deal-card__slider-nav { width: 30px; height: 30px; font-size: 17px; background: rgba(255,255,255,.55); color: var(--color-dark); box-shadow: none; opacity: 0; transition: opacity .2s, background .2s; }
.deal-card--v3 .deal-card__slider:hover .deal-card__slider-nav { opacity: 1; }
.deal-card--v3 .deal-card__slider-nav:hover { background: rgba(255,255,255,.92); }
.deal-card__cta { width: 100%; text-align: center; }

/* ---- Angebots-Detailseite (T.privatangebot) ---- */
.offer-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.offer-tag { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: #fff; }
.offer-price { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 4px; }
.offer-price__lbl { font-size: 14px; color: rgba(255,255,255,.82); }
.offer-price__val { font-family: var(--font-hl); font-weight: 800; font-size: 40px; color: var(--color-green); }
.offer-price__hint { font-size: 13px; color: rgba(255,255,255,.78); margin-bottom: 20px; }
.offer-energy { font-size: 11px; color: rgba(255,255,255,.85); line-height: 1.5; margin-top: 16px; max-width: 540px; }
/* Pflichtangaben-Variante: größer und kontrastreicher — die Werte dürfen nicht schwächer
   auftreten als die Werbebotschaft (Pkw-EnVKV). */
.offer-energy--legal { font-size: 14px; color: rgba(255,255,255,.92); max-width: 720px; }
/* Angebots-Hero: mehrzeiliger Preisblock (Leasingrate · Kaufpreis · UVP) — Struktur wie Deal-Card */
.offer-prices { display: flex; flex-direction: column; margin: 12px 0 22px; max-width: 380px; }
.offer-prices__group { display: flex; flex-direction: column; }
.offer-prices__group--sep { border-top: 1px solid rgba(255,255,255,.16); padding-top: 12px; margin-top: 12px; }
.offer-prices__row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.offer-prices__lbl { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.82); }
.offer-prices__val { font-family: var(--font-hl); font-weight: 800; font-size: 30px; line-height: 1.1; color: var(--color-green); }
.offer-prices__uvpline { font-size: 13px; color: rgba(255,255,255,.8); margin: 6px 0 0; }
/* Angebots-Hero (Pflichtangaben-Pilot): rechte Spalte trägt die Konditionen statt des
   Bild-Sliders — die Fahrzeugbilder stehen als Galerie direkt unter dem Hero. */
.offer-prices-panel { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); padding: 28px 30px; }
.offer-prices-panel .offer-prices { max-width: none; margin: 0; }
/* Pflichtangaben sitzen im Panel direkt unter dem Preis, durch eine Trennlinie abgesetzt. */
.offer-prices-panel .offer-energy { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.16); max-width: none; }
/* Galerie unter dem Hero: kompakter als eine normale Sektion — sie ist ein Bildband,
   kein eigener Inhaltsabschnitt. */
#galerie { padding: 24px 0 0; }
/* Der folgende Abschnitt bringt sonst zusätzlich 80px Sektionsabstand mit — zusammen
   entstünde eine große Lücke unter dem Bildband. */
#galerie + .lp-section { padding-top: 34px; }
#galerie .fabia-overview { margin-bottom: 0; }
#galerie .overview-photos { margin-bottom: 0; grid-template-rows: 180px 180px; }
@media (max-width: 640px) { #galerie .overview-photos { grid-template-rows: 130px 130px 130px; } }

/* Leasing-Konditionen bei der Rate (Icons wie Deal-Card, hell auf dunklem Hero) */
.offer-prices__facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.offer-prices__facts .dc-fact { color: rgba(255,255,255,.82); font-size: 13px; }
.offer-prices__facts .dc-fact svg { color: var(--color-white); opacity: .55; }
/* Angebots-Hero: Bild-Slider (gleiche Komponente wie Deal-Card) statt statischem Foto */
.lp-hero__slider { border-radius: var(--radius); overflow: hidden; }
.lp-hero__slider .deal-card__slide img { aspect-ratio: 4 / 3; }
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 44px; }
.spec-grid--single { grid-template-columns: 1fr; max-width: 720px; }
.spec-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--color-grey); font-size: 15px; }
.spec-row__k { color: var(--color-text-muted); }
.spec-row__v { font-weight: 600; color: var(--color-dark); text-align: right; }
.offer-cond { font-size: 12px; color: var(--color-text-muted); line-height: 1.6; margin-top: 18px; max-width: 760px; }
.offer-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.offer-tags li { list-style: none; font-size: 14px; font-weight: 600; color: var(--color-dark); background: var(--color-grey); border-radius: 999px; padding: 7px 14px; }
/* Ausstattungsgruppen (Angebotsdetail) */
.equip-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 44px; margin-top: 6px; }
.equip-group h4 { font-family: var(--font-hl); font-weight: 700; font-size: 15px; margin: 0 0 8px; }
@media (max-width: 720px) { .equip-groups { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .spec-grid { grid-template-columns: 1fr; } }

/* photo gallery + lightbox (B.photoGallery) — DARK theme (place on a dark section) */
/* Seit 15.09.2026 ein <h3> statt <p> (Gliederung für Suchmaschinen und Screenreader).
   Die Größe bleibt bewusst wie gehabt — die Regel überschreibt die h3-Defaults. */
.hl-grid-title { font-family: var(--font-hl); font-weight: 800; font-size: clamp(26px, 3.5vw, 36px); line-height: 1.1; color: var(--color-white); margin-bottom: 20px; }
.fabia-overview { margin-bottom: 56px; }
/* Galerie-Raster nach Bildanzahl — das Template vergibt die Modifier-Klasse.
   Ein Layout, das nur bei genau 5 Bildern aufgeht, erzeugt sonst Lücken. */
.overview-photos { display: grid; gap: 10px; margin-bottom: 28px; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; }
.overview-photos--1 { grid-template-columns: 1fr; grid-template-rows: 420px; }
.overview-photos--2 { grid-template-columns: 1fr 1fr; grid-template-rows: 340px; }
/* 3 Bilder: großes links über beide Zeilen, zwei gestapelt rechts */
.overview-photos--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 175px 175px; }
.overview-photos--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 240px; }
/* 5 Bilder: das ursprüngliche Mosaik */
.overview-photos--5 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; }
/* 6 Bilder: großes Bild über 2×2, zwei rechts, drei unten */
.overview-photos--6 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 165px 165px 165px; }
.overview-photos--6 .overview-photo:first-child { grid-column: span 2; grid-row: span 2; }
.overview-photo { overflow: hidden; border-radius: var(--radius); cursor: zoom-in; position: relative; }
.overview-photos--3 .overview-photo:first-child,
.overview-photos--5 .overview-photo:first-child { grid-row: span 2; }
.overview-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; display: block; }
.overview-photo__more { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: rgba(10,64,78,.62); color: var(--color-white); font-family: var(--font-hl); font-weight: 800; font-size: 28px; letter-spacing: .02em; }
.overview-photo:hover .overview-photo__more { background: rgba(10,64,78,.72); }
.overview-photo:hover img { transform: scale(1.05); }
.overview-photo__hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10,64,78,0); transition: background var(--transition); pointer-events: none; }
.overview-photo:hover .overview-photo__hint { background: rgba(10,64,78,0.35); }
.overview-photo__hint::after { content: '⊕'; font-size: 36px; color: transparent; transition: color var(--transition); }
.overview-photo:hover .overview-photo__hint::after { color: rgba(255,255,255,0.9); }
@media (max-width: 640px) {
  .overview-photos, .overview-photos--3, .overview-photos--4, .overview-photos--5, .overview-photos--6 { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 130px; }
  .overview-photos--1 { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  /* Mobil alle Kacheln gleich groß: 6 Bilder ergeben so drei volle Zeilen. Ein gespanntes
     erstes Bild hinterließe bei gerader Kachelzahl eine halbe Restzeile — ausgerechnet dort,
     wo das Overlay sitzt. Bei 3 und 5 Kacheln geht die Rechnung auf, dort bleibt es groß. */
  .overview-photos--3 .overview-photo:first-child,
  .overview-photos--5 .overview-photo:first-child { grid-column: span 2; grid-row: span 2; }
}
.sonderausstattung-hint { font-size: 11px; color: rgba(255,255,255,0.4); text-align: center; margin-top: 10px; }
.lightbox { display: none; position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.92); align-items: center; justify-content: center; padding: 16px; }
.lightbox:target { display: flex; }
.lightbox__backdrop { position: absolute; inset: 0; display: block; z-index: 0; }
.lightbox__img, .lightbox__close, .lightbox__nav { position: relative; z-index: 1; }
.lightbox__img { max-width: min(90vw, 1100px); max-height: 85vh; object-fit: contain; border-radius: 4px; user-select: none; display: block; }
.lightbox__close { position: absolute; top: 16px; right: 20px; background: rgba(255,255,255,0.1); border: none; color: var(--color-white); width: 40px; height: 40px; border-radius: 50%; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition); }
.lightbox__close:hover { background: rgba(255,255,255,0.25); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: var(--color-white); width: 52px; height: 52px; border-radius: 50%; font-size: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition); line-height: 1; }
.lightbox__nav:hover { background: rgba(255,255,255,0.25); }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }
@media (max-width: 600px) { .lightbox__nav--prev { left: 6px; } .lightbox__nav--next { right: 6px; } }

/* why-us USP grid (B.whyUs) — light */
/* ── Globaler Trust-Block (B.trustSection) ── */
.vertrauen { padding: var(--space-section) 0; background: var(--color-grey); }
.vertrauen__header { margin-bottom: 44px; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 44px; }
.trust-grid .trust-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.trust-stat { text-align: center; padding: 20px 12px; background: var(--color-white); border-radius: var(--radius); }
.trust-stat__num { display: block; font-family: var(--font-hl); font-weight: 800; font-size: clamp(30px, 4.6vw, 46px); line-height: 1; color: var(--color-dark); }
.trust-stat__lbl { display: block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--color-text-muted); }
.trust-faces { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0 4px; }
.trust-face { width: 54px; height: 54px; border-radius: 50%; background-size: cover; background-position: center 28%; border: 3px solid var(--color-white); box-shadow: 0 2px 8px rgba(10,64,78,.14); }
.trust-engagement { margin-top: 48px; padding-top: 40px; border-top: 1px solid rgba(10,64,78,.12); }
.trust-engagement__title { font-family: var(--font-hl); font-weight: 800; font-size: clamp(26px, 3.5vw, 36px); color: var(--color-text); margin: 0 0 8px; }
@media (max-width: 860px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .trust-grid { grid-template-columns: 1fr; } }

.service-vorteile { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.service-vorteil { background: var(--color-white); border-radius: var(--radius); padding: 24px 22px; border: 1px solid var(--color-grey); transition: box-shadow var(--transition); }
.service-vorteil:hover { box-shadow: 0 4px 20px rgba(10,64,78,0.1); }
.service-vorteil__icon { line-height: 0; margin-bottom: 10px; color: var(--color-dark); }
.service-vorteil__title { font-family: var(--font-hl); font-weight: 700; font-size: 17px; color: var(--color-dark); margin-bottom: 6px; }
.service-vorteil__text { font-size: 14px; color: var(--color-text-muted); line-height: 1.55; }

/* google reviews (B.googleReviews) — light */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-bottom: 44px; }
.review-card { background: var(--color-white); border-radius: var(--radius); padding: 22px; }
.review-card__stars { color: var(--color-dark); font-size: 17px; margin-bottom: 10px; }
.review-card__text  { font-size: 14px; color: var(--color-text-muted); line-height: 1.5; margin-bottom: 12px; font-style: italic; }
.review-card__name  { font-size: 13px; font-weight: 600; color: var(--color-dark); }

/* ── Kundenstimmen-Slider (B.googleReviews) ── */
.tst { margin-bottom: 44px; }
.tst__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.tst__title { font-family: var(--font-hl); font-weight: 800; font-size: clamp(26px, 3.5vw, 36px); color: var(--color-text); margin: 0; }
.tst__badge { display: inline-flex; align-items: center; gap: 9px; background: var(--color-white); border: 1px solid var(--color-grey); border-radius: 999px; padding: 8px 15px; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.tst__badge:hover { border-color: var(--color-green); }
.tst__badge-stars { color: #f5a623; font-size: 15px; letter-spacing: 1px; }
.tst__badge-txt { font-size: 13px; color: var(--color-dark); font-weight: 500; }
.tst__badge-txt strong { font-weight: 800; }
.tst-slider { position: relative; }
.tst-slider__viewport { overflow: hidden; border-radius: var(--radius); }
.tst-slider__track { display: flex; transition: transform .5s cubic-bezier(.25,0,.25,1); }
.tst-card { flex: 0 0 100%; min-width: 100%; margin: 0; box-sizing: border-box; background: var(--color-white); border: 1px solid var(--color-grey); border-radius: var(--radius); padding: 34px 40px; display: flex; flex-direction: column; gap: 14px; min-height: 220px; }
.tst-card__stars { color: #f5a623; font-size: 20px; letter-spacing: 2px; }
.tst-card__text { font-family: var(--font-hl); font-weight: 500; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.5; color: var(--color-dark); margin: 0; }
.tst-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: auto; }
.tst-card__name { font-weight: 700; font-size: 15px; color: var(--color-dark); }
.tst-card__src { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--color-text-muted); }
.tst-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--color-grey); background: var(--color-white); color: var(--color-dark); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 3px 12px rgba(0,0,0,.12); }
.tst-slider__nav:hover { border-color: var(--color-green); color: var(--color-green); }
.tst-slider__nav--prev { left: -14px; }
.tst-slider__nav--next { right: -14px; }
.tst-slider__dots { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.tst-slider__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(10,64,78,.2); cursor: pointer; transition: background .2s, width .2s; }
.tst-slider__dot[aria-current="true"] { background: var(--color-green); width: 22px; border-radius: 5px; }
@media (max-width: 640px) {
  .tst-card { padding: 26px 22px; }
  .tst-slider__nav { display: none; }
}

/* sponsorings (B.sponsorings) — light */
.partner-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 44px; }
.partner-badge { background: var(--color-white); border-radius: var(--radius); padding: 14px 20px; display: flex; align-items: center; gap: 12px; }
.partner-badge img { height: 36px; width: auto; object-fit: contain; }
.partner-badge__lbl { font-size: 13px; font-weight: 500; color: var(--color-dark); }
.partner-badge__logos { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* =====================================================================
   INFO CARDS (misconceptions / scenarios / model teasers) + LEAD FORM
   ===================================================================== */
.info-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.info-cards--2 { grid-template-columns: repeat(2, 1fr); }
.info-cards--3 { grid-template-columns: repeat(3, 1fr); }
.info-cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .info-cards--4 { grid-template-columns: repeat(2, 1fr); } }
.info-card { background: var(--color-white); border: 1px solid var(--color-grey); border-radius: var(--radius); padding: 24px 22px; display: flex; flex-direction: column; }
.lp-section--alt .info-card { background: var(--color-white); }
.info-card__label { align-self: flex-start; font-family: var(--font-hl); font-weight: 700; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--color-dark); background: var(--color-green); padding: 3px 9px; border-radius: 4px; margin-bottom: 12px; }
.info-card h3 { font-size: 18px; margin-bottom: 8px; }
.info-card h3 a { color: var(--color-dark); }
.info-card h3 a:hover { text-decoration: underline; }
.info-card p { font-size: 14px; color: var(--color-text-muted); line-height: 1.6; }
.info-card__cta { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* CTA global als Button (statt unterstrichenem Text) – schneller sichtbar, hoher Kontrast: Mint-Fläche + dunkler Text */
.info-card__cta a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--color-dark); background: var(--color-green); padding: 10px 18px; border-radius: var(--radius); transition: var(--transition); }
.info-card__cta a:hover { background: var(--color-dark); color: var(--color-white); }
.info-card__cta a:hover span { color: var(--color-white); }
.info-card__cta span { color: var(--color-dark); }
/* zusätzlicher CTA direkt unter der Kartenüberschrift (Winterkompletträder) */
.info-card__cta--top { margin-top: 0; padding-top: 0; margin-bottom: 16px; }
/* product/offer card with flush image at the top + Aktionspreis line */
/* Škoda-Produktbilder sind alle 962×370 → Box exakt auf dieses Format + cover = bündig ohne Letterbox/Beschnitt */
.info-card__media { aspect-ratio: 962 / 370; margin: -24px -22px 18px; background-color: #eef0ee; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: var(--radius) var(--radius) 0 0; border-bottom: 1px solid var(--color-grey); }
/* quadratisches Bildfeld (Winterkompletträder/Radzierblenden – ganzes Produktbild sichtbar, kein Beschnitt) */
.info-card__media--sq { aspect-ratio: 1 / 1; background-size: contain; background-color: var(--color-white); }
.info-card__media--contain { aspect-ratio: 16 / 9; background-size: contain; background-color: #f2f3f4; }
/* Modellfilter über :target (No-JS) — geteilt von /service/reifen/sommerreifen/ und
   /service/reifen/winterkomplettraeder/. Ein Klick filtert die Liste UND springt zu ihr;
   die Auswahl steht in der URL und ist damit verlinkbar. Regeln je Modell erzeugt das Template. */
.model-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 24px; padding: 14px 16px; background: var(--color-grey); border-left: 4px solid var(--color-green); border-radius: var(--radius); }
.model-filter__label { font-family: var(--font-hl); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-dark); }
.model-filter__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.model-filter__chips a { display: inline-flex; align-items: center; justify-content: center; padding: 8px 15px; font-family: var(--font-hl); font-weight: 700; font-size: 14px; color: var(--color-dark); background: var(--color-white); border: 1px solid var(--color-grey); border-radius: 999px; text-decoration: none; transition: background var(--transition), border-color var(--transition); }
.model-filter__chips a:hover { background: var(--color-green); border-color: var(--color-green); }

/* Schnellzugänge auf /service/reifen/: schmales Bildband, Motiv füllt das Feld.
   Einheitliche Höhe, damit Überschriften und CTAs über alle Kacheln auf einer Linie liegen. */
#schnellzugaenge .info-card__media { aspect-ratio: 10 / 3; background-size: cover; }
.info-card__foot { margin-top: auto; padding-top: 14px; }
.offer-price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; }
.offer-price__label { font-family: var(--font-hl); font-weight: 700; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-muted); }
.offer-price__value { font-family: var(--font-hl); font-weight: 700; font-size: 20px; color: var(--color-dark); }
.offer-price__label--plain { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 400; font-size: 13px; }
.info-card__foot .info-card__cta { margin-top: 0; padding-top: 0; }
.offer-note { margin: 0 0 10px; font-family: var(--font-hl); font-weight: 700; font-size: 15px; color: var(--color-text-muted); }
/* tire cards + EU-Reifenlabel nested <details> (EU 2020/740) */
.tire-card__name { font-family: var(--font-hl); font-weight: 700; font-size: 18px; color: var(--color-dark); margin-bottom: 4px; }
.tire-card__meta { font-size: 14px; color: var(--color-text-muted); line-height: 1.5; }
.tire-label { margin: 4px 0 12px; }
.tire-label > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--color-dark); padding: 4px 0; list-style-position: inside; }
.tire-label > summary::marker { color: var(--color-green); }
.tire-label > summary:hover { color: var(--color-green); }
.tire-label__body { padding: 12px 0 4px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tire-label__body img { width: 168px; height: auto; border: 1px solid var(--color-grey); border-radius: 6px; background: var(--color-white); }
.tire-label__body a { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--color-dark); border-bottom: 2px solid var(--color-green); }
.tire-label__body a:hover { opacity: .7; }
/* Winterkompletträder: Modellgruppen im Produktlisting */
/* jede Modellgruppe als eigene graue Zone (weiße Produktkarten heben sich ab → klare Modellzuordnung) */
.wkr-model { scroll-margin-top: 90px; margin-top: 22px; padding: 26px 24px; border-radius: var(--radius); background: var(--color-grey); }
.wkr-model:first-of-type { margin-top: 10px; }
.wkr-model > h3 { font-size: 22px; margin-bottom: 12px; }
/* Ausführungen je Modell (Generation/Baujahr/RDKS) unter der Überschrift */
/* Ausführungs-Filter als auffällige Karte (weiß auf grauer Modellzone) mit grünem Akzent – sichtbar als "Filter" */
.wkr-variants { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 22px; padding: 14px 16px; background: var(--color-white); border: 1px solid var(--color-grey); border-left: 4px solid var(--color-green); border-radius: 12px; }
.wkr-variants__label { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-hl); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-dark); margin-right: 4px; }
.wkr-variants__label svg { color: var(--color-dark); flex: none; }
.wkr-variants__chip { display: inline-flex; align-items: center; font-size: 14px; font-weight: 700; color: var(--color-dark); background: var(--color-white); border: 1.5px solid var(--color-grey); border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: var(--transition); }
.wkr-variants__chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.wkr-variants__chip:hover { border-color: var(--color-dark); }
.wkr-variants__chip:has(input:checked) { background: var(--color-green); border-color: var(--color-green); }
/* Aufmerksamkeit beim Anspringen per Anker (Hero-Picker → #model-<slug>): der Filter pulsiert kurz auf (No-JS via :target) */
@keyframes wkrFilterAttention {
  0%, 100% { box-shadow: 0 0 0 0 rgba(120, 250, 174, 0); }
  25%      { box-shadow: 0 0 0 5px rgba(120, 250, 174, .6); }
}
.wkr-model:target .wkr-variants { animation: wkrFilterAttention 1.5s ease-out .2s 2; }
.wkr-model:target > h3 { color: var(--color-dark); }
@media (prefers-reduced-motion: reduce) { .wkr-model:target .wkr-variants { animation: none; } }
/* transaktionaler Hero: USP-Liste + Modell-Chips */
.hero-usp { list-style: none; margin: 4px 0 24px; padding: 0; display: grid; gap: 9px; }
.hero-usp li { position: relative; padding-left: 26px; color: rgba(255,255,255,.9); font-size: 15px; line-height: 1.45; }
.hero-usp li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--color-green); font-weight: 700; }
/* Hero-Modell-Picker (klarer CTA statt Bild) */
.hero-picker { background: var(--color-white); border-radius: var(--radius); padding: 26px 24px; align-self: center; }
.hero-picker__label { font-family: var(--font-hl); font-weight: 700; font-size: 17px; color: var(--color-dark); margin: 0 0 16px; }
.hero-picker__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hero-picker__grid a { text-align: center; font-family: var(--font-hl); font-weight: 700; font-size: 14px; color: var(--color-dark); background: var(--color-grey); border: 1px solid var(--color-grey); border-radius: var(--radius); padding: 13px 10px; transition: var(--transition); }
.hero-picker__grid a:hover { background: var(--color-green); border-color: var(--color-green); }
.hero-picker__group + .hero-picker__group { margin-top: 16px; }
.hero-picker__grouplabel { font-family: var(--font-hl); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-dark); margin: 0 0 8px; }
/* E-Modell-Picker (auf /e-mobilitaet/ – Modelle auswählbar, vergleichbar zum Winterkompletträder-Picker) */
.emodell-picker { background: var(--color-white); border-radius: var(--radius); padding: 26px 24px; }
.emodell-picker__label { font-family: var(--font-hl); font-weight: 700; font-size: 17px; color: var(--color-dark); margin: 0 0 16px; }
.emodell-picker__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.emodell-picker__grid a { display: flex; flex-direction: column; overflow: hidden; color: var(--color-dark); background: var(--color-grey); border: 1px solid var(--color-grey); border-radius: var(--radius); transition: var(--transition); }
/* quadratisches Modellbild oben, ganzes Fahrzeug zentriert (contain, weißer Grund) */
.emodell-picker__img { aspect-ratio: 1 / 1; background-color: var(--color-white); background-size: contain; background-repeat: no-repeat; background-position: center; border-bottom: 1px solid var(--color-grey); }
.emodell-picker__name { font-family: var(--font-hl); font-weight: 700; font-size: 17px; padding: 14px 16px 0; }
.emodell-picker__grid a small { font-family: var(--font-body); font-weight: 400; font-size: 13px; line-height: 1.45; color: var(--color-text-muted); padding: 6px 16px 16px; }
.emodell-picker__grid a:hover { background: var(--color-green); border-color: var(--color-green); }
.emodell-picker__grid a:hover small { color: var(--color-dark); }
/* kompakte Produktkarten-Specs (Winterkompletträder) */
.wkr-spec { margin: 0 0 12px; }
.wkr-spec > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--color-grey); font-size: 13px; }
.wkr-spec dt { color: var(--color-text-muted); flex: none; }
.wkr-spec dd { margin: 0; font-weight: 600; text-align: right; color: var(--color-dark); }
/* "Passend für" als erste, betonte Spec-Zeile (Modellzuordnung, analog zu den Filtern) */
.wkr-spec__fit dt { color: var(--color-dark); font-weight: 700; }
.wkr-spec__fit dd { font-weight: 700; }
.wkr-garantie { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--color-dark); }
.wkr-garantie::before { content: "✓ "; color: var(--color-green); }
.wkr-bemerkung { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--color-dark); background: #fff7ec; border-left: 3px solid #e0a800; border-radius: 4px; padding: 8px 11px; }
/* UPE (durchgestrichen) + Aktionspreis (hervorgehoben) */
.wkr-price { margin: 0 0 4px; }
.wkr-price__upe { margin: 0; font-size: 13px; color: var(--color-text-muted); }
.wkr-price__upe span { text-decoration: line-through; font-weight: 700; }
.wkr-price__aktion { margin: 2px 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wkr-price__aktion > span { font-family: var(--font-hl); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-muted); }
.wkr-price__aktion strong { font-family: var(--font-hl); font-size: 21px; color: #c0392b; }
.wkr-price__single { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wkr-price__single > span { font-family: var(--font-hl); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-muted); }
.wkr-price__single strong { font-family: var(--font-hl); font-size: 20px; color: var(--color-dark); }

/* lead form (Leasing-Wunschformular) */
.lead-form { background: var(--color-grey); border-radius: var(--radius); padding: 32px; max-width: 860px; }
.lead-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field > label { font-size: 13px; font-weight: 600; color: var(--color-dark); }
.field input, .field select, .field textarea { font-family: var(--font-body); font-size: 15px; padding: 11px 14px; border: 1px solid #d4d4d4; border-radius: var(--radius); background: var(--color-white); color: var(--color-text); width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--color-green); outline-offset: 1px; border-color: var(--color-dark); }
.field textarea { resize: vertical; min-height: 92px; }
.radio-row { display: flex; gap: 18px; padding-top: 4px; }
.radio-row label { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 500; }
.field--check { flex-direction: row; align-items: flex-start; gap: 10px; }
.field--check input { width: auto; margin-top: 3px; }
.field--check label { font-size: 13px; font-weight: 400; color: var(--color-text-muted); line-height: 1.5; }
.field--check a { color: var(--color-dark); text-decoration: underline; }
.lead-form__subhead { grid-column: 1 / -1; margin: 8px 0 -4px; font-family: var(--font-hl); font-weight: 700; font-size: 14px; color: var(--color-dark); }
.lead-form__subhead span { font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--color-text-muted); }
/* Erläuterung unter einem Feld (z. B. wo die FIN zu finden ist) */
.lead-form__hint { grid-column: 1 / -1; margin: -6px 0 2px; font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }
.lead-form__submit { margin-top: 18px; }
.lead-form__note { font-size: 12px; color: var(--color-text-muted); line-height: 1.5; margin-top: 14px; }

/* anchor navigation (jump links on hub/support pages) */
.anchor-nav { background: var(--color-grey); border-bottom: 1px solid #e0e0e0; padding: 14px 0; }
.anchor-nav__row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.anchor-nav a { font-size: 13px; font-weight: 600; color: var(--color-dark); background: var(--color-white); border: 1px solid var(--color-grey); border-radius: 999px; padding: 7px 14px; transition: var(--transition); }
.anchor-nav a:hover { border-color: var(--color-dark); }
@media (max-width: 720px) { .info-cards, .info-cards--2, .info-cards--3, .info-cards--4 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .lead-form__grid { grid-template-columns: 1fr; } .lead-form { padding: 24px 20px; } }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer { background: var(--color-dark); color: var(--color-white); padding: 56px 0 28px; }
.site-footer a { transition: color var(--transition), background var(--transition), border-color var(--transition); }

/* Top: Logo links, Social-/Marktplatz-Buttons rechts */
.footer-top {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;
  padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 38px;
}
.footer-logo img { height: 46px; width: auto; }
.footer-socials { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.footer-social {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08);
  display: grid; place-items: center; color: var(--color-white);
}
.footer-social:hover { background: var(--color-green); color: var(--color-dark); }

/* Standorte mit Adresse, Hotline-Button und Aktions-Buttons */
.footer-standorte { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 40px; }
.footer-loc { background: rgba(255,255,255,.05); border-radius: var(--radius); padding: 24px 26px; }
.footer-loc__name { font-family: var(--font-hl); font-weight: 800; font-size: 20px; color: var(--color-white); margin: 0 0 8px; }
.footer-loc__addr { font-size: 14px; color: rgba(255,255,255,.78); line-height: 1.5; margin: 0 0 16px; }
.footer-hotline {
  display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center;
  background: var(--color-white); color: var(--color-dark); border-radius: 999px;
  padding: 11px 18px; font-family: var(--font-hl); font-weight: 700; font-size: 16px; margin-bottom: 14px;
}
.footer-hotline:hover { background: var(--color-green); }
.footer-loc__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-loc__btns a {
  flex: 1 1 auto; text-align: center; border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
  padding: 8px 14px; font-family: var(--font-hl); font-weight: 700; font-size: 13px; letter-spacing: .03em;
  text-transform: uppercase; color: rgba(255,255,255,.9);
}
.footer-loc__btns a:hover { background: var(--color-green); color: var(--color-dark); border-color: var(--color-green); }

/* Zentrale Škoda-Notfallnummer (für beide Standorte) */
.footer-notfall {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
  background: rgba(255,255,255,.05); border-radius: var(--radius); padding: 20px 26px; margin-bottom: 40px;
}
.footer-notfall__label { font-family: var(--font-hl); font-weight: 800; font-size: 20px; color: var(--color-white); }
.footer-notfall__tel { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-hl); font-weight: 700; font-size: 18px; color: var(--color-green); }
.footer-notfall__tel:hover { color: var(--color-white); }

/* Pflichttext / Rechtshinweise */
.footer-compliance {
  padding-top: 34px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12.5px; line-height: 1.7; color: rgba(255,255,255,.6); max-width: 1000px;
}
.footer-compliance p { margin: 0 0 14px; }
.footer-compliance p:last-child { margin-bottom: 0; }
.footer-compliance a { color: rgba(255,255,255,.8); text-decoration: underline; }
.footer-compliance a:hover { color: var(--color-green); }

/* Copyright + Rechtslinks */
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between;
  margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
}
.footer-copy { font-size: 13px; color: rgba(255,255,255,.6); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-links a { font-size: 13px; color: rgba(255,255,255,.7); }
.footer-links a:hover { color: var(--color-green); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 860px) {
  .wf-grid--3, .wf-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer-standorte { grid-template-columns: 1fr; }
  .footer-top { justify-content: center; text-align: center; }
  .footer-socials { justify-content: center; }
}
@media (max-width: 560px) {
  .wf-grid--2, .wf-grid--3, .wf-grid--4 { grid-template-columns: 1fr; }
  .footer-bottom { justify-content: flex-start; }
  .topbar__contact span { display: none; }
  .topbar__cta { display: none; }
}

/* ---------------------------------------------------------------------
   /ansprechpartner/ — Team-Filterseite (Standort × Bereich)
   --------------------------------------------------------------------- */
.ap-filter { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 30px; }
.ap-filter__group { display: flex; flex-direction: column; gap: 10px; }
.ap-filter__label { font-family: var(--font-hl); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.ap-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-chip { font-family: var(--font-body); font-weight: 600; font-size: 14px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid #d5d9dd; background: #fff; color: var(--color-dark); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.ap-chip:hover { border-color: var(--color-dark); }
.ap-chip.is-active { background: var(--color-dark); border-color: var(--color-dark); color: #fff; }
.ap-empty { color: var(--color-text-muted); font-style: italic; padding: 18px 0; }
.ap-standort[hidden], .ap-group[hidden] { display: none; }
.ap-standort > h2 { margin: 40px 0 4px; }
.ap-group { margin: 24px 0 8px; }
.ap-group__head h3 { font-size: 20px; color: var(--color-dark); margin: 0 0 4px; }
.ap-group__head p { color: var(--color-text-muted); font-size: 15px; margin: 0 0 18px; max-width: 780px; }
.ap-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.ap-card { display: flex; gap: 14px; background: #fff; border: 1px solid #e7e9ec; border-radius: var(--radius); padding: 16px; }
.ap-card__photo { flex: 0 0 54px; width: 54px; height: 54px; border-radius: 50%; background: var(--gradient-brand); display: flex; align-items: center; justify-content: center; }
.ap-card__photo span { font-family: var(--font-hl); font-weight: 700; font-size: 17px; color: rgba(10,64,78,.7); }
.ap-card__body { flex: 1 1 auto; min-width: 0; }
.ap-card__name { font-size: 16px; color: var(--color-dark); margin: 0 0 2px; }
.ap-card__role { font-size: 14px; color: var(--color-text-muted); margin: 0 0 12px; }
.ap-card__ctas { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-card__cta { font-size: 13px; padding: 8px 14px; }
.ap-linkbtn { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--color-dark); }
.ap-linkbtn:hover { text-decoration: underline; }
@media (max-width: 520px) { .ap-cards { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   Škoda-Konfigurator-CTA (Modellseiten) — B.konfiguratorCta
   --------------------------------------------------------------------- */
.konfig-cta { background: var(--color-dark); color: #fff; padding: 56px 0; }
.konfig-cta__inner { display: grid; grid-template-columns: 1.25fr 1fr; gap: 44px; align-items: center; }
.konfig-cta__eyebrow { font-family: var(--font-hl); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-green); }
.konfig-cta h2 { color: #fff; margin: 12px 0 14px; }
.konfig-cta p { color: rgba(255,255,255,.85); margin: 0 0 18px; }
.konfig-cta__list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 9px; }
.konfig-cta__list li { position: relative; padding-left: 28px; color: rgba(255,255,255,.92); font-size: 15px; }
.konfig-cta__list li::before { content: "\2713"; position: absolute; left: 0; top: -1px; color: var(--color-green); font-weight: 700; }
.konfig-cta__visual { aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--gradient-brand); position: relative; overflow: hidden; }
.konfig-cta__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) { .konfig-cta__inner { grid-template-columns: 1fr; gap: 28px; } .konfig-cta__visual { order: -1; } }

/* --- E-Auto-Förderrechner (Angebotsdetail, nur Privat + Elektro/Hybrid) ---
   No-JS: Radios + `:has()` blenden genau ein Ergebnis ein; die Zuordnungsregeln erzeugt der
   Generator als scoped <style> je Seite. Die Radios selbst sind visuell versteckt, das Label
   ist der Klickbereich (gleiche Technik wie die Winterräder-Varianten-Chips). */
.foerder-rechner { max-width: 920px; background: var(--color-grey); border-radius: var(--radius); padding: 24px 26px; }
.fr-group { border: 0; padding: 0; margin: 0 0 20px; }
.fr-group legend { font-family: var(--font-hl); font-weight: 700; font-size: 15px; color: var(--color-dark); padding: 0; margin-bottom: 10px; }
.fr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fr-chips input { position: absolute; opacity: 0; pointer-events: none; }
.fr-chips label { cursor: pointer; padding: 10px 16px; border: 1px solid rgba(10,64,78,0.25); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--color-dark); background: var(--color-white); }
.fr-result { background: var(--color-white); border-radius: var(--radius); padding: 18px 20px; border-top: 0; margin-top: 4px; }
.fr-chips input:checked + label { background: var(--color-dark); color: var(--color-white); border-color: var(--color-dark); }
.fr-chips input:focus-visible + label { outline: 3px solid var(--color-green); outline-offset: 2px; }
.fr-hint { margin: 8px 0 0; font-size: 12px; color: var(--color-text-muted); }
.fr-result { border-top: 1px solid var(--color-grey); padding-top: 18px; }
.fr-res__lbl { display: block; font-size: 14px; color: var(--color-text-muted); }
.fr-res__val { display: block; font-family: var(--font-hl); font-weight: 800; font-size: 34px; line-height: 1.1; color: var(--color-dark); margin-top: 2px; font-variant-numeric: tabular-nums; }
.fr-res__sub { display: block; margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--color-text-muted); max-width: 60ch; }
/* CTA im Hero-Preispanel → springt zum Förderrechner. Sitzt zwischen Preisblock und
   Verbrauchszeile, damit die Pflichtangabe weiterhin direkt unter der Werbebotschaft steht. */
.offer-foerder-teaser { margin-top: 16px; padding: 12px 14px; border-radius: var(--radius); background: rgba(120,250,174,0.10); border: 1px solid rgba(120,250,174,0.38); }
.offer-foerder-teaser__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.offer-foerder-teaser__row + .offer-foerder-teaser__row { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(120,250,174,0.22); }
.offer-foerder-teaser__lbl { font-size: 13px; font-weight: 700; color: var(--color-green); }
.offer-foerder-teaser__val { font-family: var(--font-hl); font-weight: 800; font-size: 24px; line-height: 1.1; color: var(--color-white); white-space: nowrap; }
.offer-foerder-teaser__val .od-fn { font-size: 0.42em; font-weight: 400; vertical-align: baseline; position: relative; top: -1.5em; }
.offer-foerder-cta { display: block; text-align: center; margin: 12px 0 4px; }
/* „Keine Förderung" sitzt in derselben Radio-Gruppe wie die Einkommensstufen, ist aber keine
   Stufe — die Umrandung hält es optisch getrennt, solange es nicht gewählt ist. */
.fr-chips .fr-chip--none { border-style: dashed; color: var(--color-text-muted); }
.fr-chips input:checked + .fr-chip--none { color: var(--color-white); border-style: solid; }
/* Hinweis zum Rechner-Hintergrund: Die Sektion steht auf WEISSEM Grund (sie gehört zu den
   Konditionen), deshalb ist die Rechner-Karte grau gefüllt — weiß auf weiß hätte keine Kante.
   Gleiche Entscheidung wie bei .offer-fact. */

/* Übergang Förderrechner → Angebotskonditionen: Beide Sektionen stehen auf Weiß und flossen
   ohne Kante ineinander. Weniger Abstand plus ein Trennstrich macht die Zäsur sichtbar. */
#foerderung { padding-bottom: 40px; }
#foerderung + .lp-section { border-top: 1px solid rgba(10,64,78,0.28); padding-top: 40px; }
/* Förderabhängige Werte in der Konditionstabelle (siehe frSel im Generator): genau einer der
   zwölf Spans ist sichtbar, gesteuert von der Auswahl im Rechner. */
.spec-row__v .kf { display: none; }

/* Förderabhängige Zeilen hervorheben: Sie tragen die Zahlen, auf die der Rechner hinarbeitet,
   und sollen aus der Tabelle herausstechen. Größerer Wert + Mint-Unterstreichung statt Farbe —
   Mint bleibt so der Akzent, ohne dass die Zeile mit dem CTA konkurriert. */
.spec-row--foerder .spec-row__k { color: var(--color-dark); font-weight: 600; }
.spec-row--foerder .spec-row__v { font-family: var(--font-hl); font-weight: 800; font-size: 20px; }
/* Die .kf-Spans müssen die 13px/grau-Regel für Spans in der Wertspalte überstimmen — sie sind
   hier der Wert selbst, nicht ein Zusatz. Mint als Textmarker (Verlauf statt box-shadow, weil
   das auf Inline-Elementen zuverlässig sitzt). */
.spec-row--foerder .spec-row__v .kf { font-size: inherit; font-weight: inherit; color: inherit;
  background: linear-gradient(transparent 62%, var(--color-green) 62%); padding: 0 2px; }

/* Preisgegenüberstellung zur Hersteller-UVP — bewusst OHNE Durchstreichung und ohne
   „Sie sparen": Beides sind Gestaltungselemente, an denen eine Preisermäßigungswerbung
   festgemacht wird. Die Differenz steht als neutrale Feststellung, nicht als Vorteilsversprechen. */
.dc-uvp-diff { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--color-dark); }
.offer-prices__uvpdiff { margin-top: 2px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); }

/* Ergebniszeilen der Konditions-Rechenkette (= Unser Preis, = Gesamtbetrag): Label in Dunkel
   und halbfett, damit die Summen aus der Kette heraustreten. Bewusst OHNE Mint-Unterlegung —
   die kennzeichnet die Werte, die auf eine Eingabe im Förderrechner reagieren. */
.spec-row--sum .spec-row__k { color: var(--color-dark); font-weight: 600; }
.spec-row--sum .spec-row__v { font-weight: 700; }


/* Angebotskarte mit zwei Erwerbswegen: EIN Button („Angebot ansehen"), der dem Umschalter
   folgt — sichtbar ist der Link zu dem Erwerbsweg, der gerade gewählt ist. Beide Links liegen
   im Markup, die Auswahl macht CSS über den Radio-Zustand; ohne JavaScript. */
.deal-card__ctas { display: flex; flex-direction: column; }
.deal-card__ctas .deal-card__cta { width: 100%; text-align: center; }
.deal-card--v3 .deal-card__ctas { margin-top: auto; }
.deal-card--v3:has(.dc-toggle__radio--kauf:checked) .deal-card__cta--lease,
.deal-card--v3:has(.dc-toggle__radio--leasing:checked) .deal-card__cta--buy { display: none; }

/* Gleiche Innenzeilen über alle Karten einer Reihe (Titel · Subline · Pflichtangaben ·
   Umschalter · Preisbox · CTA). Ohne das verschieben unterschiedlich lange Verbrauchsangaben
   — ein Plug-in-Hybrid braucht vier Zeilen, ein Benziner zwei — alle Blöcke darunter
   gegeneinander. Subgrid übernimmt die Zeilenhöhen des Kartenrasters; Karte und Body setzen
   ihren eigenen row-gap auf 0, damit der Rasterabstand nur zwischen den Karten wirkt.
   Ohne Subgrid-Unterstützung bleibt es beim bisherigen Flex-Layout. */
@supports (grid-template-rows: subgrid) {
  .deal-cards--aligned > .deal-card--v3 {
    display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0;
  }
  .deal-cards--aligned > .deal-card--v3 > .deal-card__body {
    display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0;
  }
  .deal-cards--aligned .deal-card__subline:empty,
  .deal-cards--aligned .deal-card__energy:empty { margin: 0; }
}


/* =====================================================================
   KIOSK — /angebot-in-24-stunden/ (iPad im Showroom Hemmingen)
   Bedient wird im Stehen, mit dem Finger, von einem Gast, der die Seite zum ersten Mal
   sieht. Deshalb: große Flächen (Mindestziel 56 px), viel Abstand, und ein Zustand
   „ausgewählt", der aus zwei Metern erkennbar ist. Hover ist auf einem iPad wirkungslos.
   ===================================================================== */
.kiosk { background: var(--color-white); }
.kiosk-head { background: var(--color-dark); padding: 18px 0; }
.kiosk-head__logo { height: 34px; width: auto; display: block; }
/* Mehrfachauswahl: Der Hinweis steht direkt an der Frage, sonst rechnet niemand damit. */
.kiosk-step__hint { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--color-text-muted); margin-left: 10px; white-space: nowrap; }
.kiosk-hero { background: var(--color-dark); color: var(--color-white); padding: 10px 0 56px; }
.kiosk-hero h1 { color: var(--color-white); font-size: clamp(30px, 4.4vw, 46px); margin-bottom: 14px; }
.kiosk-hero__sub { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.85); max-width: 62ch; }
.kiosk-hero__points { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; }
.kiosk-hero__points li { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 9px; }
.kiosk-hero__points li::before { content: '✓'; color: var(--color-green); font-weight: 800; }

.kiosk-form { padding: 40px 0 70px; }
.kiosk-step { font-family: var(--font-hl); font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); color: var(--color-dark); margin: 38px 0 16px; }
.kiosk-step:first-of-type { margin-top: 0; }

/* Modellauswahl: Bildkacheln, Radios unsichtbar darunter — kein JavaScript nötig. */
.kiosk-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.kiosk-model input { position: absolute; opacity: 0; pointer-events: none; }
.kiosk-model__box { display: block; position: relative; border: 3px solid var(--color-grey); border-radius: var(--radius); padding: 12px 12px 14px; background: var(--color-white); cursor: pointer; transition: border-color var(--transition), background var(--transition); }
/* Förder-Label sitzt auf der Kachel, nicht darunter — es soll beim Überfliegen auffallen. */
.kiosk-model__badge { position: absolute; top: 10px; left: 10px; z-index: 1; background: var(--color-green); color: var(--color-dark); font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; line-height: 1; }
.kiosk-hint { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--color-text-muted); max-width: 80ch; }
.kiosk-model__box img { width: 100%; height: 104px; object-fit: contain; display: block; margin-bottom: 8px; }
.kiosk-model__name { display: block; font-family: var(--font-hl); font-weight: 800; font-size: 17px; color: var(--color-dark); }
.kiosk-model__sub { display: block; font-size: 13px; color: var(--color-text-muted); line-height: 1.4; margin-top: 2px; }
.kiosk-model input:checked + .kiosk-model__box { border-color: var(--color-dark); background: var(--color-grey); }
.kiosk-model input:focus-visible + .kiosk-model__box { outline: 3px solid var(--color-green); outline-offset: 2px; }

/* Antwortflächen der drei Auswahlfragen */
.kiosk-choice { display: flex; flex-wrap: wrap; gap: 12px; }
.kiosk-choice input { position: absolute; opacity: 0; pointer-events: none; }
.kiosk-choice label { flex: 1 1 200px; }
.kiosk-choice span { min-height: 56px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px 22px; border: 3px solid var(--color-grey); border-radius: var(--radius); font-size: 17px; font-weight: 700; color: var(--color-dark); background: var(--color-white); cursor: pointer; transition: all var(--transition); }
.kiosk-choice input:checked + span { border-color: var(--color-dark); background: var(--color-dark); color: var(--color-white); }
.kiosk-choice input:focus-visible + span { outline: 3px solid var(--color-green); outline-offset: 2px; }

/* Eingabefelder größer als auf den übrigen Seiten — Fingerbedienung im Stehen. */
.kiosk .field input, .kiosk .field textarea { font-size: 17px; padding: 15px 16px; }
.kiosk .field > label { font-size: 15px; }
.kiosk .field--check label { font-size: 14px; }
.kiosk-submit { margin-top: 30px; }
.kiosk-submit .btn-primary { width: 100%; font-size: 19px; padding: 20px 28px; }
/* Honigtopf gegen Bots: für Menschen unsichtbar, für Screenreader ausgeblendet. Nicht
   `display:none` allein — manche Bots ignorieren das; die Kombination reicht hier aber, weil
   Netlify die Einsendung schon verwirft, sobald das Feld gefüllt ist. */
.kiosk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kiosk-fehler { margin-top: 20px; padding: 16px 20px; background: #fdecec; border-left: 4px solid #c0392b; border-radius: var(--radius); font-size: 15px; line-height: 1.6; color: var(--color-dark); }
.kiosk-fehler[hidden] { display: none; }
.kiosk-note { margin-top: 16px; font-size: 13px; line-height: 1.6; color: var(--color-text-muted); }

/* Bestätigung nach dem Absenden */
.kiosk-done { display: none; text-align: center; padding: 40px 0 20px; }
.kiosk-done.show { display: block; }
.kiosk-done__icon { width: 74px; height: 74px; margin: 0 auto 22px; border-radius: 50%; background: var(--color-green); color: var(--color-dark); font-size: 40px; font-weight: 800; line-height: 74px; }
.kiosk-done h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 14px; }
.kiosk-done p { font-size: 17px; line-height: 1.65; max-width: 60ch; margin: 0 auto 12px; }
.kiosk-done__hint { color: var(--color-text-muted); margin-bottom: 28px; }
.kiosk-done__reset { font-size: 14px; color: var(--color-text-muted); }
.kiosk-link { background: none; border: 0; padding: 0; font: inherit; color: var(--color-dark); text-decoration: underline; cursor: pointer; }

/* Bedingte Folgefragen (Leasingkonditionen bzw. Finanzierungshinweis). Sichtbarkeit steuert
   JavaScript über das hidden-Attribut — die Regel stellt nur sicher, dass eine spätere
   display-Regel es nicht überstimmt. */
.kiosk-cond[hidden] { display: none; }
.kiosk-cond { margin-top: 20px; }
.kiosk-step--sub { font-size: clamp(17px, 1.9vw, 20px); margin: 0 0 14px; color: var(--color-text-muted); }
.kiosk .lead-form__hint { font-size: 13px; color: var(--color-text-muted); margin-top: 6px; line-height: 1.5; }
.kiosk-hinweis { background: var(--color-grey); border-left: 4px solid var(--color-green); border-radius: var(--radius); padding: 20px 24px; }
.kiosk-hinweis p { margin: 0 0 8px; font-size: 16px; line-height: 1.6; }
.kiosk-hinweis p:last-child { margin-bottom: 0; }
.kiosk .field select { font-size: 17px; padding: 15px 16px; }

@media (max-width: 600px) {
  .kiosk-models { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .kiosk-choice label { flex: 1 1 100%; }
}

/* =====================================================================
   R&G WEGWEISER  (/weg/…)
   Gelesen wird das auf einem Handy, oft im Stehen, manchmal im Gehen. Deshalb große
   Schrift, hoher Kontrast, breite Tippziele — und keine Animation, die Zeit kostet. */
.weg { background: var(--color-white); }
.weg-head { background: var(--color-dark); padding: 16px 0; }
/* Logo und Wegweiser-Marke stehen nebeneinander, getrennt durch einen Strich — die Zeile
   liest sich dadurch als ein Absender mit Zusatz, nicht als zwei konkurrierende Logos. */
.weg-head .container { display: flex; align-items: center; gap: 14px; }
.weg-head__logo { height: 30px; width: auto; display: block; flex: none; }
/* Das Logo führt zurück zur Auswahl. Dezenter Hinweis darauf, dass es anklickbar ist —
   auf einem Gerät ohne Mauszeiger hilft nur die Fläche, deshalb etwas Luft drumherum. */
.weg-head__home { display: block; flex: none; padding: 4px; margin: -4px; border-radius: 6px; }
.weg-head__home:hover { background: rgba(255,255,255,.1); }
.weg-head__marke { color: var(--color-white); font-weight: 700; font-size: 16px; line-height: 1.2;
  padding-left: 14px; border-left: 1px solid rgba(255,255,255,.3); }

.weg-intro { background: var(--color-dark); color: var(--color-white); padding: 6px 0 36px; }
.weg-von { font-size: 14px; color: rgba(255,255,255,.72); margin-bottom: 10px; }
.weg-von strong { color: var(--color-white); }
.weg-intro h1 { color: var(--color-white); font-size: clamp(27px, 5.6vw, 40px); margin-bottom: 12px; }
.weg-ziel { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.9); }
.weg-ziel span { color: rgba(255,255,255,.65); font-size: 14px; }

.weg-wahl { padding: 30px 0 10px; }
.weg-tabs input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.weg-tabs__leiste { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 24px; }
.weg-tabs__leiste label { display: block; text-align: center; padding: 12px 8px; border-radius: 10px; cursor: pointer;
  border: 2px solid var(--color-grey); background: var(--color-white); font-weight: 700; font-size: 16px; line-height: 1.25; }
.weg-tabs__leiste label span { display: block; font-weight: 400; font-size: 13px; color: var(--color-text-muted); margin-top: 3px; }
#weg-r-fuss:checked ~ .weg-tabs__leiste label[for="weg-r-fuss"],
#weg-r-auto:checked ~ .weg-tabs__leiste label[for="weg-r-auto"] { border-color: var(--color-dark); background: var(--color-dark); color: var(--color-white); }
#weg-r-fuss:checked ~ .weg-tabs__leiste label[for="weg-r-fuss"] span,
#weg-r-auto:checked ~ .weg-tabs__leiste label[for="weg-r-auto"] span { color: rgba(255,255,255,.75); }
.weg-tabs #weg-fuss, .weg-tabs #weg-auto { display: none; }
#weg-r-fuss:checked ~ #weg-fuss, #weg-r-auto:checked ~ #weg-auto { display: block; }

.weg-fakten { font-size: 16px; color: var(--color-text-muted); margin-bottom: 16px; }
.weg-fakten strong { color: var(--color-dark); font-size: 19px; }
/* Nummerierte Schritte statt Fließtext: Wer unterwegs nachschaut, muss die Stelle
   wiederfinden, an der er aufgehört hat zu lesen. */
.weg-schritte { list-style: none; counter-reset: weg; margin: 0 0 24px; padding: 0; }
.weg-schritte li { counter-increment: weg; position: relative; padding: 0 0 18px 44px; font-size: 17px; line-height: 1.5; }
.weg-schritte li::before { content: counter(weg); position: absolute; left: 0; top: -1px; width: 30px; height: 30px;
  border-radius: 50%; background: var(--color-dark); color: var(--color-white); font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.weg-schritte li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 32px; bottom: 6px; width: 2px; background: var(--color-grey); }

/* Grid statt Flexbox: In einer Spalten-Flexbox legt `flex-basis` die HÖHE fest — auf dem Handy
   wurde aus dem Knopf dadurch ein 200 px hoher Klotz. Grid lässt ihn seine natürliche Höhe
   behalten und über die volle Breite laufen. */
.weg-karten { display: grid; gap: 10px; margin-bottom: 16px; }
.weg-karte { display: block; text-align: center; padding: 14px 16px; border-radius: 10px; border: 2px solid var(--color-dark);
  color: var(--color-dark); font-weight: 700; font-size: 16px; text-decoration: none; }
.weg-karte:hover { background: var(--color-dark); color: var(--color-white); }
.weg-hinweis { font-size: 14px; line-height: 1.55; color: var(--color-text-muted); padding: 12px 14px;
  background: var(--color-light); border-radius: 8px; }

.weg-ziel-bild { padding: 34px 0 54px; background: var(--color-light); }
.weg-ziel-bild h2 { font-size: clamp(20px, 3.4vw, 26px); margin-bottom: 16px; }
.weg-ziel-bild img { width: 100%; height: auto; border-radius: 12px; display: block; }
.weg-adresse { margin-top: 16px; font-size: 16px; line-height: 1.5; font-weight: 600; }
.weg-tel { margin-top: 10px; font-size: 15px; color: var(--color-text-muted); }
.weg-tel a { color: var(--color-dark); font-weight: 700; }

@media (max-width: 480px) {
  .weg-head__marke { font-size: 13px; }
  .weg-schritte li { font-size: 16px; padding-left: 40px; }
}

/* Startseite des Wegweisers: zwei Kacheln mit Gebäudefoto. Das Bild trägt die Entscheidung —
   wer im Haus steht, erkennt es wieder, bevor er die Überschrift gelesen hat. */
.weg-wahl-karten { display: grid; gap: 16px; }
.weg-wahl-karte { display: grid; grid-template-columns: 38% 1fr; align-items: stretch;
  border: 1px solid var(--color-grey); border-radius: 14px; overflow: hidden; text-decoration: none;
  background: var(--color-white); transition: border-color .15s, box-shadow .15s, transform .15s; }
.weg-wahl-karte:hover { border-color: var(--color-dark); box-shadow: 0 10px 26px rgba(10,64,78,.13); transform: translateY(-2px); }
.weg-wahl-karte img { width: 100%; height: 100%; min-height: 148px; object-fit: cover; display: block; }
.weg-wahl-karte__text { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 20px 22px; }
.weg-wahl-karte__text strong { font-size: 19px; line-height: 1.25; color: var(--color-dark); }
.weg-wahl-karte__adr { font-size: 14px; color: var(--color-text-muted); }
.weg-wahl-karte__ziel { margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--color-green); }
.weg-wahl-karte__ziel span { display: inline-block; transition: transform .15s; }
.weg-wahl-karte:hover .weg-wahl-karte__ziel span { transform: translateX(4px); }
@media (max-width: 560px) {
  .weg-wahl-karte { grid-template-columns: 1fr; }
  .weg-wahl-karte img { min-height: 132px; max-height: 168px; }
  .weg-wahl-karte__text { padding: 16px 18px; }
}

/* Angebotsabschnitt der Modellseite ohne laufendes Angebot. Bewusst kurz: Er hält die
   Sprungmarke #angebote am Leben und bietet zwei Wege weiter, statt den Kunden ins Nichts
   laufen zu lassen. */
.angebote-leer { padding: var(--space-section) 0; background: var(--color-light); }
.angebote-leer h2 { margin: 10px 0 14px; }
.angebote-leer__text { max-width: 62ch; font-size: 17px; line-height: 1.6; color: var(--color-text-muted); }
.angebote-leer__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Teaser ohne Kartenrahmen: Text links, Bild rechts. Der frühere weiße Kasten um Preis und
   Knopf wirkte bei so wenig Inhalt wie ein unfertiger Platzhalter. */
.duo--offen { align-items: center; }
.duo__text { display: flex; flex-direction: column; justify-content: center; }
.duo__text h2 { margin-bottom: 12px; }
.duo__text .lp-section__intro { margin-bottom: 18px; }
.duo__text .offer-price { margin-bottom: 18px; }
.duo__text .btn-primary { align-self: flex-start; }
@media (max-width: 760px) { .duo--offen { gap: 18px; } }

/* =====================================================================
   REIFEN-AUSWAHL — Overlay über :target, ohne JavaScript.
   Geschlossen ist der Normalzustand: `display:none`, bis die Adresse auf #reifen-waehlen
   zeigt. Dadurch gibt es keinen Moment, in dem das Overlay beim Laden aufblitzt. */
.rw-overlay { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; padding: 20px; }
.rw-overlay:target { display: flex; }
.rw-overlay__bg { position: absolute; inset: 0; background: rgba(10, 64, 78, .72); backdrop-filter: blur(3px); }
.rw-dialog { position: relative; width: min(760px, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--color-dark); color: var(--color-white); border-radius: 18px; padding: 34px 32px 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35); text-align: center; }
.rw-close { position: absolute; top: 12px; right: 16px; font-size: 30px; line-height: 1; color: rgba(255,255,255,.65); text-decoration: none; }
.rw-close:hover { color: var(--color-white); }
.rw-logo { height: 26px; width: auto; margin: 0 auto 18px; display: block; }
.rw-dialog h2 { color: var(--color-white); font-size: clamp(23px, 3.6vw, 30px); margin-bottom: 8px; }
.rw-sub { color: rgba(255,255,255,.75); font-size: 15px; line-height: 1.55; max-width: 48ch; margin: 0 auto 26px; }
.rw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left; }
.rw-karte { display: flex; flex-direction: column; gap: 6px; padding: 20px 18px 16px; border-radius: 12px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); text-decoration: none; color: var(--color-white);
  transition: background .15s, border-color .15s, transform .15s; }
.rw-karte:hover { background: rgba(255,255,255,.14); border-color: var(--color-green); transform: translateY(-2px); }
.rw-karte__titel { font-weight: 700; font-size: 18px; }
.rw-karte__text { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.72); flex: 1; }
.rw-karte__pfeil { color: var(--color-green); font-weight: 700; font-size: 17px; }
.rw-fuss { margin-top: 22px; font-size: 14px; color: rgba(255,255,255,.65); }
.rw-fuss a { color: var(--color-green); font-weight: 600; text-decoration: underline; }
@media (max-width: 680px) {
  .rw-grid { grid-template-columns: 1fr; }
  .rw-dialog { padding: 28px 20px 22px; }
  .rw-karte { padding: 16px; }
}