/* ============================================================
   Chiptuner.de — Stylesheet
   Farben und Typografie sind in DESIGN.md dokumentiert.

   Aufbau in Layern, damit die Reihenfolge der Regeln über die
   Layer gesteuert wird und nicht über Spezifität. Wer später
   etwas überschreiben will, schreibt in den passenden Layer.
   ============================================================ */

@layer grundlage, komponenten, konfigurator, hilfsklassen;

/* ------------------------------------------------------------
   Grundlage
   ------------------------------------------------------------ */

@layer grundlage {

  :root {
    /* Signalfarbe ist das Orange der Schwestermarke Xhaust.de. Beide
       Betriebe gehören zusammen, das soll man sehen. Sie heißt --signal
       und nicht nach der Farbe: Sie hat schon zweimal gewechselt
       (Logo-Blau, dann Rot wie 2022), Farbnamen im Code veralten. */
    --signal: #F07316;
    --signal-tief: #C25A0F;
    --signal-hell: #FF9048;

    /* Dunkle Flächen für Kopf, Fuß und Bildbereiche */
    --schwarz: #121212;
    --schwarz-2: #1C1C1C;
    --schwarz-3: #2A2A2A;

    --eco: #0F7A67;
    --whatsapp: #25D366;

    /* Neutraltöne mit einem Hauch Wärme, damit sie zum Orange gehören */
    --grund: #F5F4F3;
    --flaeche: #FFFFFF;
    --flaeche-2: #EEECEB;
    --linie: #DCD8D6;
    --text: #16130F;
    --text-leise: #6B6560;

    --schrift-titel: "Avenir Next Condensed", "Helvetica Neue", system-ui, sans-serif;
    --schrift-text: system-ui, -apple-system, "Segoe UI", sans-serif;
    --schrift-zahl: ui-monospace, "SF Mono", Menlo, monospace;

    /* Kantiger als zuvor — weiche Ecken wirken im Automotive-Umfeld
       zahm. Die Schaltflächen bleiben ganz ohne Rundung. */
    --radius: 4px;
    --radius-klein: 2px;
    --schatten: 0 1px 2px rgb(0 0 0 / .05), 0 10px 30px -14px rgb(0 0 0 / .28);
    --breite: 1180px;

    color-scheme: light;
    accent-color: var(--signal);
  }

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

  body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font-family: var(--schrift-text);
    font-size: 17px;
    line-height: 1.62;
    text-size-adjust: 100%;
  }

  h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--schrift-titel);
    font-weight: 700;
    letter-spacing: -.012em;
    text-wrap: balance;
  }

  h1 { font-size: clamp(31px, 5.5vw, 48px); line-height: 1.08; }
  h2 { font-size: clamp(24px, 3.6vw, 33px); line-height: 1.16; }
  h3 { font-size: 20px; line-height: 1.28; }

  p {
    margin: 0;
    max-width: 65ch;
    text-wrap: pretty;
  }

  a {
    color: var(--signal);

    &:focus-visible {
      outline: 3px solid var(--signal-hell);
      outline-offset: 2px;
      border-radius: 3px;
    }
  }

  :target { scroll-margin-block-start: 80px; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ------------------------------------------------------------
   Komponenten
   ------------------------------------------------------------ */

@layer komponenten {

  .inhalt {
    max-width: var(--breite);
    margin-inline: auto;
    padding-inline: 20px;
  }

  .beschriftung {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--signal);
  }

  /* Für alle Messwerte: gleiche Ziffernbreite, damit Zahlen fluchten. */
  .wert {
    font-family: var(--schrift-zahl);
    font-variant-numeric: tabular-nums;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border: 1px solid transparent;
    border-radius: 9999px;
    font-family: var(--schrift-titel);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, transform .1s ease;

    &:active { transform: translateY(1px); }

    &:focus-visible {
      outline: 3px solid var(--signal-hell);
      outline-offset: 2px;
    }
  }

  /* color-mix statt filter: dunkelt gezielt ab, statt die ganze
     Fläche samt Text aufzuhellen. */
  .btn-primaer {
    background: var(--signal);
    color: #fff;

    &:hover { background: color-mix(in oklab, var(--signal) 88%, black); }
  }

  .btn-whatsapp {
    background: var(--whatsapp);
    color: #06301A;

    &:hover { background: color-mix(in oklab, var(--whatsapp) 88%, black); }
  }

  .btn-eco {
    background: var(--eco);
    color: #fff;

    &:hover { background: color-mix(in oklab, var(--eco) 88%, black); }
  }

  .btn-sekundaer {
    background: transparent;
    border-color: var(--linie);
    color: var(--text);

    &:hover { background: var(--flaeche-2); }
  }

  .karte {
    padding: 24px;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
  }

  /* --- Sprungmarke --- */

  .sprungmarke:focus {
    position: fixed;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    z-index: 100;
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 20px;
    clip-path: none;
    background: var(--signal);
    color: #fff;
    border-radius: var(--radius-klein);
  }

  /* --- Kopf --- */

  .kopf {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: var(--schwarz);
    border-block-end: 1px solid var(--schwarz-3);
  }

  .kopf-reihe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 92px;
  }

  /* Das Logo trägt seine Unterzeile mit — unter 40px wird die unleserlich.
     Als Vektor kostet die größere Darstellung nichts an Schärfe. */
  .kopf-marke img { display: block; height: 58px; width: auto; }

  .kopf-navigation {
    display: none;
    gap: 4px;

    & a {
      padding: 10px 14px;
      color: #E8E4E2;
      text-decoration: none;
      font-family: var(--schrift-titel);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      transition: background-color .15s ease, color .15s ease;

      &:hover { background: var(--schwarz-3); color: #fff; }

      /* Die aktive Seite bekommt die Signalfarbe als Fläche — so war es
         auch auf der Fassung von 2022. */
      &[aria-current="page"] { background: var(--signal); color: #fff; }

      &:focus-visible {
        outline: 3px solid var(--signal-hell);
        outline-offset: -3px;
      }
    }

    &.offen {
      display: flex;
      position: absolute;
      inset-inline: 0;
      inset-block-start: 100%;
      flex-direction: column;
      gap: 0;
      padding: 8px 20px 20px;
      background: var(--schwarz);
      border-block-end: 3px solid var(--signal);
      box-shadow: 0 20px 40px -20px rgb(0 0 0 / .8);

      & a { padding-block: 14px; border-block-start: 1px solid var(--schwarz-3); }
    }
  }

  .kopf-schalter {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--schwarz-3);
    border-radius: var(--radius-klein);
    background: transparent;
    cursor: pointer;

    &:focus-visible { outline: 3px solid var(--signal-hell); outline-offset: 2px; }
  }

  .kopf-striche { position: relative; }

  .kopf-striche,
  .kopf-striche::before,
  .kopf-striche::after {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    content: "";
  }

  .kopf-striche::before { position: absolute; inset-block-start: -6px; }
  .kopf-striche::after { position: absolute; inset-block-start: 6px; }

  @media (min-width: 900px) {
    .kopf-schalter { display: none; }
    .kopf-navigation { display: flex; }
  }

  /* --- Fuß --- */

  .fuss {
    margin-block-start: 0;
    padding-block: 52px 20px;
    background: var(--schwarz);
    color: #A9A29D;
    font-size: 15px;
    border-block-start: 3px solid var(--signal);

    & a { color: #A9A29D; text-decoration: none; }
    & a:hover { color: #fff; }

    & a:focus-visible {
      outline: 3px solid var(--signal-hell);
      outline-offset: 2px;
    }
  }

  /* Vier Spalten, die Markenspalte doppelt so breit — sie trägt rund
     dreißig Einträge. Mit auto-fit rutschte die Region in eine eigene
     Zeile, weil die Markenspalte zwei Rasterplätze belegt. */
  .fuss-raster {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr;

    @media (min-width: 620px) {
      grid-template-columns: 1fr 1fr;
    }

    @media (min-width: 1000px) {
      grid-template-columns: 1.1fr 1fr 2fr 1.1fr;
    }
  }

  .fuss-titel {
    margin-block-end: 10px;
    color: #fff;
    font-family: var(--schrift-titel);
    font-size: 17px;
    font-weight: 700;
  }

  .fuss-liste {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.9;
  }

  /* Die Markenliste hat rund 30 Einträge. Einspaltig würde sie den Fuß
     dreimal so hoch machen wie alle anderen Spalten zusammen. */
  .fuss-liste-lang {
    columns: 2;
    column-gap: 24px;

    & li { break-inside: avoid; }
  }

  @media (min-width: 620px) and (max-width: 999px) {
    .fuss-raster > .fuss-marken { grid-column: span 2; }
  }

  .fuss-zeile {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-block-start: 34px;
    padding-block-start: 18px;
    border-block-start: 1px solid rgb(255 255 255 / .16);
    font-size: 14px;
  }

  /* --- Schwebender Kontaktbereich --- */

  /* Runde Pillen mit farbigem Schatten — wie auf Xhaust.de.
     Sie erscheinen erst, wenn der Besucher zu scrollen beginnt: Ganz
     oben stünden sie sonst über dem Leistungsrechner. */
  .schwebend {
    position: fixed;
    inset-block-end: 14px;
    inset-inline-end: 14px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: opacity .3s ease, transform .3s ease;

    /* Sichtbar ist der Grundzustand — ohne JavaScript bleiben die
       Kontaktwege damit erreichbar. Das Skript blendet sie nur aus,
       solange der Besucher ganz oben steht. */
    &.oben {
      opacity: 0;
      transform: translateY(12px);
      pointer-events: none;
    }

    & .btn {
      padding: 15px 28px;
      font-size: 15px;
    }

    & .btn-primaer {
      box-shadow: 0 10px 24px rgb(240 115 22 / .42);
    }

    & .btn-whatsapp {
      box-shadow: 0 10px 24px rgb(37 211 102 / .38);
    }
  }

  @media (max-width: 520px) {
    .schwebend {
      inset-inline: 12px;
      flex-direction: row;

      & .btn { flex: 1; padding-inline: 14px; }
    }
  }
}

/* ------------------------------------------------------------
   Konfigurator

   Container-Abfragen statt Fensterbreite: Der Konfigurator steht
   mal über die volle Seitenbreite, mal in einer schmalen Spalte.
   Er soll sich an seinen Platz anpassen, nicht an das Fenster.
   ------------------------------------------------------------ */

@layer konfigurator {

  .kf {
    container: konfigurator / inline-size;
    padding: 26px 24px;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
  }

  .kf-feld {
    width: 100%;
    margin-block-start: 6px;
    padding: 15px 17px;
    border: 2px solid var(--signal);
    border-radius: var(--radius-klein);
    background: var(--flaeche);
    color: var(--text);
    font-family: var(--schrift-text);
    font-size: 17px;

    &:focus-visible {
      outline: 3px solid var(--signal-hell);
      outline-offset: 1px;
    }
  }

  .kf-liste {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    background: var(--flaeche);
    overflow: hidden;

    &:empty { display: none; }

    & li:first-child .kf-treffer { border-block-start: 0; }
  }

  .kf-treffer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-block-start: 1px solid var(--linie);
    background: transparent;
    color: var(--text);
    font-family: var(--schrift-text);
    font-size: 15px;
    text-align: start;
    cursor: pointer;

    &:hover, &:focus-visible { background: var(--flaeche-2); }

    & .kf-plus {
      flex: none;
      color: var(--signal);
      font-family: var(--schrift-zahl);
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      white-space: nowrap;
    }
  }

  /* --- Kaskade als Rückfallweg --- */

  .kf-kaskade {
    margin-block-start: 22px;
    padding-block-start: 20px;
    border-block-start: 1px solid var(--linie);

    & summary {
      cursor: pointer;
      font-weight: 600;
      color: var(--signal);

      &:focus-visible {
        outline: 3px solid var(--signal-hell);
        outline-offset: 2px;
        border-radius: 3px;
      }
    }
  }

  .kf-reihe {
    display: grid;
    gap: 12px;
    margin-block-start: 16px;

    @container konfigurator (inline-size > 620px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .kf-auswahl {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    background: var(--flaeche);
    color: var(--text);
    font-family: var(--schrift-text);
    font-size: 16px;

    &:disabled { background: var(--flaeche-2); color: var(--text-leise); }
  }

  /* --- Ergebnis --- */

  .kf-ergebnis {
    margin-block-start: 26px;
    padding-block-start: 24px;
    border-block-start: 1px solid var(--linie);

    &[hidden] { display: none; }
  }

  .kf-umschalter {
    display: flex;
    gap: 4px;
    margin-block-end: 20px;
    padding: 4px;
    background: var(--flaeche-2);
    border-radius: var(--radius-klein);

    & button {
      flex: 1;
      padding: 11px 8px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: var(--text-leise);
      font-family: var(--schrift-text);
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;

      &[aria-pressed="true"] { background: var(--signal); color: #fff; }

      &[data-stufe="eco"][aria-pressed="true"] { background: var(--eco); }

      &:focus-visible {
        outline: 3px solid var(--signal-hell);
        outline-offset: 2px;
      }
    }
  }

  /* Schmal: Werte über der Kurve. Breit: nebeneinander — sonst bliebe
     neben der Grafik die halbe Fläche leer. */
  .kf-haupt {
    display: grid;
    gap: 18px 32px;
    align-items: center;

    /* Die Kurve wird bei 640px gedeckelt: Ihre Beschriftung sitzt im SVG
       und würde sonst mitskalieren. Der Rest geht an die Werte-Spalte. */
    @container konfigurator (inline-size > 660px) {
      grid-template-columns: minmax(160px, auto) minmax(0, 640px);
      justify-content: space-between;
    }
  }

  .kf-werte {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;

    @container konfigurator (inline-size > 660px) {
      flex-direction: column;
      gap: 20px;
    }
  }

  /* --- Vergleich Serie / Optimierung --- */

  .kf-vergleich {
    display: grid;
    gap: 12px;
    margin-block-end: 24px;

    @container konfigurator (inline-size > 620px) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    }
  }

  .kf-karte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    border-radius: var(--radius);
  }

  .kf-karte-serie {
    background: var(--flaeche-2);
    border: 1px solid var(--linie);
  }

  .kf-karte-tuning {
    background: var(--signal);
    color: #fff;
  }

  .kf-karte-titel {
    margin-block-end: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .85;
  }

  .kf-karte-wert {
    font-family: var(--schrift-zahl);
    font-variant-numeric: tabular-nums;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
  }

  .kf-karte-nm { font-size: 20px; opacity: .9; }

  .kf-differenz {
    display: grid;
    gap: 2px;
    text-align: end;

    & span {
      font-family: var(--schrift-titel);
      font-size: clamp(26px, 4.4vw, 38px);
      font-weight: 700;
      font-style: italic;
      line-height: 1.05;
      white-space: nowrap;
    }
  }

  /* --- Diagramm mit zwei Achsen --- */

  .kf-diagramm {
    margin: 0;

    & svg { display: block; width: 100%; height: auto; }
  }

  .kf-achse {
    fill: var(--text-leise);
    font-family: var(--schrift-text);
    font-size: 13px;
  }

  .kf-achse-titel { font-weight: 700; fill: var(--text); }

  .kf-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-block-start: 10px;
    color: var(--text-leise);
    font-size: 13.5px;
  }

  .kf-legende-punkt {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    & i {
      display: block;
      width: 20px;
      height: 3px;
      border-radius: 2px;
    }

    & i.gestrichelt {
      height: 0;
      border-block-start: 3px dashed currentColor;
      background: none !important;
      color: var(--text-leise);
    }
  }

  .kf-zahl {
    color: var(--signal);
    font-family: var(--schrift-zahl);
    font-variant-numeric: tabular-nums;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
  }

  .kf-zahl-klein { font-size: 27px; color: var(--text); }

  /* Einheiten kleiner, in der Textschrift und mit schmalem Abstand —
     ein Leerzeichen der Festbreitenschrift wäre so breit wie eine Ziffer. */
  .kf-einheit {
    margin-inline-start: .18em;
    font-family: var(--schrift-text);
    font-size: .58em;
    font-weight: 600;
    letter-spacing: 0;
  }

  .kf-vorher {
    margin-block-start: 3px;
    color: var(--text-leise);
    font-size: 14px;
  }

  /* Zeile unter dem Rechner: ordnet ein, was der Rechner leisten kann
     und was darüber hinaus geht. */
  .rechner-fuss {
    margin-block-start: 16px;
    max-width: 78ch;
    color: var(--text-leise);
    font-size: 15px;
  }

  .kf-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-block-start: 18px;
    padding-block-start: 18px;
    border-block-start: 1px solid var(--linie);
  }

  .kf-preis {
    font-family: var(--schrift-zahl);
    font-variant-numeric: tabular-nums;
    font-size: 27px;
    font-weight: 700;
  }

  .kf-hinweis {
    margin-block-start: 14px;
    color: var(--text-leise);
    font-size: 13px;
  }

  /* Auffangnetz, wenn die Suche nichts findet */
  .kf-leer {
    margin-block-start: 18px;
    padding: 18px;
    background: var(--flaeche-2);
    border-radius: var(--radius-klein);

    &[hidden] { display: none; }
  }
}

/* ------------------------------------------------------------
   Seitenabschnitte
   ------------------------------------------------------------ */

@layer komponenten {

  .abschnitt { padding-block: 56px; }

  .abschnitt-kopfbereich {
    padding-block: 40px 44px;
    background: linear-gradient(180deg, var(--flaeche-2), var(--grund));
    border-block-end: 1px solid var(--linie);
  }

  /* ---------- Bildbereich der Startseite ----------

     Das Foto liegt als Hintergrund, damit es jede Fensterbreite füllt,
     ohne verzerrt zu werden. Darüber zwei Verläufe: einer von links für
     die Lesbarkeit der Schrift, einer von unten — der verdeckt zugleich
     die beiden Herbstblätter, die im Ausgangsbild unten stehen. */

  /* Zwei Spalten: Text links auf Schwarz, Foto rechts in voller Höhe.
     Als Hintergrundbild hinter dem Text wäre das Auto unter dem
     nötigen Verlauf kaum zu erkennen — es ist eine Nahaufnahme, keine
     weite Szene, die Verdeckung verträgt. */
  .buehne {
    position: relative;
    display: grid;
    background: var(--schwarz);
    color: #fff;
    overflow: clip;

    @media (min-width: 920px) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
      align-items: stretch;
    }
  }

  /* Der Verlauf liegt als erster Hintergrund-Layer über dem Foto —
     so blendet die Textfläche ins Bild, ohne harte Kante. */
  .buehne-bild {
    position: relative;
    min-height: 240px;
    background-image:
      linear-gradient(0deg, rgb(0 0 0 / .58) 0%, rgb(0 0 0 / 0) 26%),
      linear-gradient(90deg, var(--schwarz) 0%, rgb(18 18 18 / 0) 14%),
      image-set(url("images/hero-steuergeraet-klein.webp") type("image/webp"),
                url("images/hero-steuergeraet-klein.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: 24% center;
    order: -1;

    @media (min-width: 920px) {
      order: 0;
      min-height: clamp(460px, 60vh, 600px);
      background-image:
        linear-gradient(0deg, rgb(0 0 0 / .58) 0%, rgb(0 0 0 / 0) 26%),
        linear-gradient(90deg, var(--schwarz) 0%, rgb(18 18 18 / 0) 16%),
        image-set(url("images/hero-steuergeraet.webp") type("image/webp"),
                  url("images/hero-steuergeraet.jpg") type("image/jpeg"));
    }
  }

  /* Das Signet sitzt über dem Foto, nicht darin — so bleibt es in jeder
     Fensterbreite vollständig sichtbar. block-size: auto ist Pflicht,
     sonst zieht das height-Attribut das Logo in die Länge. */
  .buehne-signet {
    position: absolute;
    inset-block-end: clamp(16px, 3.5vw, 30px);
    inset-inline-end: clamp(16px, 3.5vw, 30px);
    inline-size: clamp(150px, 30%, 250px);
    block-size: auto;
    filter: drop-shadow(0 2px 12px rgb(0 0 0 / .55));
  }

  .buehne-inhalt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 44px;

    @media (min-width: 920px) {
      max-width: calc(var(--breite) / 2);
      margin-inline-start: auto;
      padding-inline: 20px 44px;
      padding-block: 56px;
    }
  }

  .buehne h1 {
    font-size: clamp(34px, 6.4vw, 62px);
    line-height: 1.02;
    color: #fff;
    text-shadow: 0 2px 20px rgb(0 0 0 / .5);
  }

  .buehne .beschriftung { color: var(--signal-hell); }

  .buehne-text {
    max-width: 46ch;
    margin-block-start: 16px;
    color: #DDD8D5;
    font-size: clamp(16px, 2.1vw, 19px);
  }

  /* Kennzahlen unter der Überschrift — greifbar statt Behauptung */
  .buehne-zahlen {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-block-start: 26px;
    padding-block-start: 22px;
    border-block-start: 1px solid rgb(255 255 255 / .18);
  }

  .buehne-zahl {
    & b {
      display: block;
      color: #fff;
      font-family: var(--schrift-zahl);
      font-variant-numeric: tabular-nums;
      font-size: 27px;
      font-weight: 700;
      line-height: 1.1;
    }

    & span {
      font-size: 13px;
      color: #A9A29D;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
  }

  /* ---------- Aufforderungsleiste unter der Bühne ----------
     Wie auf der Fassung von 2022: eine durchgehende Zeile, die den
     Rechner ankündigt. */

  .leiste-band {
    background: var(--flaeche-2);
    border-block-end: 1px solid var(--linie);
  }

  .leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-block: 22px;

    & p {
      margin: 0;
      max-width: none;
      font-family: var(--schrift-titel);
      font-size: clamp(18px, 2.6vw, 25px);
      font-weight: 700;
      letter-spacing: -.01em;
    }
  }

  .abschnitt-vertrauen { padding-block: 44px; }

  .abschnitt-ablauf { background: var(--flaeche); }

  .abschnitt-abschluss {
    background: var(--flaeche);
    border-block-start: 1px solid var(--linie);
  }

  .abschnitt-kopf { margin-block-end: 26px; }

  .einleitung {
    margin-block-start: 12px;
    color: var(--text-leise);
    font-size: 19px;
  }

  .kopf-rechner { margin-block-start: 26px; }

  .karten-raster {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));

    & h3 { margin-block-end: 8px; }
    & p { color: var(--text-leise); font-size: 15.5px; }
  }

  /* Signalkante oben statt bunter Fläche: Die Karte bleibt ruhig,
     zeigt aber, dass sie zur Marke gehört. */
  .karte {
    position: relative;
    border-block-start: 3px solid var(--signal);
  }

  .karte-verweis {
    color: inherit;
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;

    &:hover {
      box-shadow: 0 14px 34px -18px rgb(0 0 0 / .45);
      transform: translateY(-2px);
    }

    & h3 { color: var(--signal); }

    &::after {
      display: block;
      margin-block-start: 12px;
      color: var(--signal);
      font-family: var(--schrift-titel);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      content: "Mehr erfahren →";
    }

    &:focus-visible { outline: 3px solid var(--signal-hell); outline-offset: 2px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .karte-verweis:hover { transform: none; }
  }

  .schritte {
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: schritt;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));

    & li {
      counter-increment: schritt;
      padding-block-start: 42px;
      position: relative;
    }

    & li::before {
      position: absolute;
      inset-block-start: 0;
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--signal);
      color: #fff;
      font-family: var(--schrift-zahl);
      font-size: 15px;
      font-weight: 700;
      content: counter(schritt);
    }

    & h3 { margin-block-end: 6px; font-size: 18px; }
    & p { color: var(--text-leise); font-size: 15.5px; }
  }

  .wolke {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;

    & a {
      display: block;
      padding: 9px 15px;
      border: 1px solid var(--linie);
      border-radius: 100px;
      background: var(--flaeche);
      color: var(--text);
      text-decoration: none;
      font-size: 15px;

      &:hover { border-color: var(--signal); color: var(--signal); }

      &:focus-visible { outline: 3px solid var(--signal-hell); outline-offset: 2px; }
    }
  }

  .orte {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));

    & li {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 15px;
      border: 1px solid var(--linie);
      border-radius: var(--radius-klein);
      background: var(--flaeche);
    }

    & a { text-decoration: none; font-weight: 600; }
    & a:hover { text-decoration: underline; }
    & .wert { color: var(--text-leise); font-size: 14px; }
  }

  .knopf-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-block-start: 22px;
  }

  /* Kontaktwege */

  .kontaktwege {
    display: grid;
    gap: 12px;
    margin-block-start: 24px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .kontaktweg {
    display: grid;
    gap: 3px;
    padding: 18px 20px;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--flaeche);
    color: inherit;
    text-decoration: none;

    &:hover { border-color: var(--signal); }

    &:focus-visible { outline: 3px solid var(--signal-hell); outline-offset: 2px; }
  }

  .kontaktweg-art {
    color: var(--signal);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  .kontaktweg-wert {
    font-family: var(--schrift-zahl);
    font-variant-numeric: tabular-nums;
    font-size: 17px;
    font-weight: 700;
  }

  .kontaktweg-zusatz { color: var(--text-leise); font-size: 14px; }

  .kontaktweg-termin { border-color: var(--signal); }

  /* Fragenliste */

  .fragen {
    display: grid;
    gap: 10px;
    max-width: 76ch;
  }

  .frage {
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    background: var(--flaeche);

    & summary {
      padding: 15px 18px;
      cursor: pointer;
      font-weight: 600;
      list-style-position: inside;

      &:hover { color: var(--signal); }

      &:focus-visible {
        outline: 3px solid var(--signal-hell);
        outline-offset: -1px;
        border-radius: var(--radius-klein);
      }
    }

    &[open] summary { border-block-end: 1px solid var(--linie); }
  }

  .frage-text {
    padding: 15px 18px;

    & p { color: var(--text-leise); }
  }

  /* Tabelle — auf schmalen Schirmen scrollt sie in sich, nicht die Seite */

  .tabelle-rahmen {
    overflow-x: auto;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--flaeche);
  }

  .tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 15.5px;

    & th, & td {
      padding: 12px 16px;
      text-align: start;
      border-block-end: 1px solid var(--linie);
    }

    & th {
      background: var(--flaeche-2);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--text-leise);
      white-space: nowrap;
    }

    & td.wert { text-align: end; white-space: nowrap; }
    & tbody tr:last-child td { border-block-end: 0; }
    & tbody tr:hover { background: var(--flaeche-2); }
  }

  /* Beispielfahrzeuge auf den Markenseiten */

  .beispiele {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .beispiel {
    display: grid;
    gap: 6px;
    padding: 18px 20px;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--flaeche);
  }

  .beispiel-name { color: var(--text-leise); font-size: 14px; }

  .beispiel-werte {
    display: flex;
    align-items: baseline;
    gap: 9px;
  }

  .beispiel-vorher {
    color: var(--text-leise);
    font-size: 17px;
    text-decoration: line-through;
  }

  .beispiel-pfeil { color: var(--text-leise); }

  .beispiel-nachher {
    color: var(--signal);
    font-size: 26px;
    font-weight: 700;
  }

  .beispiel-preis { color: var(--text); font-size: 17px; font-weight: 700; }

  /* Pflichtangabe nach Preisangabenverordnung, überall wo Beträge stehen */
  .hinweis-leise {
    color: var(--text-leise);
    font-size: 13px;
    margin-block-start: 12px;
  }

  /* Formular */

  .formular {
    max-width: 760px;
    margin-block-start: 24px;
  }

  .formular-raster {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .feld {
    display: grid;
    gap: 5px;
    margin: 0;
    max-width: none;

    & label { font-size: 14px; font-weight: 600; }
    & label span { color: var(--signal); }

    & input, & textarea {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid var(--linie);
      border-radius: var(--radius-klein);
      background: var(--flaeche);
      color: var(--text);
      font-family: var(--schrift-text);
      font-size: 16px;
    }

    & textarea { resize: vertical; }

    & input:focus-visible, & textarea:focus-visible {
      outline: 3px solid var(--signal-hell);
      outline-offset: 1px;
      border-color: var(--signal);
    }

    & input:user-invalid { border-color: #B3261E; }
  }

  .formular > .feld { margin-block-start: 14px; }

  .formular-hinweis {
    margin-block: 16px;
    color: var(--text-leise);
    font-size: 14px;
  }

  .formular-alternative {
    margin-block-start: 20px;
    color: var(--text-leise);
  }

  /* Verweis auf die Schwestermarke — mit Logo, damit er als Angebot
     erkennbar ist und nicht als beiläufiger Link im Text untergeht.
     Seit die Seite dasselbe Orange trägt wie Xhaust, kann der Kasten
     sich nicht mehr über die Farbe abheben. Deshalb steht er als helle
     Fläche auf dunklem Grund. */
  .abschnitt-partner {
    padding-block: 48px;
    background: var(--schwarz);
  }

  .partner {
    display: grid;
    gap: 22px;
    align-items: center;
    padding: 26px 28px;
    border-radius: var(--radius);
    background: var(--flaeche);
    box-shadow: 0 18px 44px -20px rgb(0 0 0 / .7);

    @media (min-width: 760px) {
      grid-template-columns: auto minmax(0, 1fr);
      gap: 32px;
      padding: 30px 34px;
    }
  }

  .partner-logo {
    display: block;
    width: auto;
    height: 74px;
    justify-self: start;

    @media (min-width: 760px) { height: 92px; }
  }

  .partner-text {
    & h3 { margin-block-end: 8px; }

    & p {
      margin-block-end: 18px;
      color: var(--text-leise);
      font-size: 15.5px;
    }
  }

  /* Beide Marken tragen jetzt dasselbe Orange — der Knopf braucht keine
     Sonderfarbe mehr und nutzt die Signalfarbe wie überall sonst. */
  .btn-partner {
    background: var(--signal);
    color: #fff;

    &:hover { background: var(--signal-tief); }
  }

  .hinweis-kasten {
    padding: 16px 18px;
    border: 1px solid var(--linie);
    border-inline-start: 3px solid var(--signal);
    border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
    background: var(--flaeche-2);
    font-size: 15px;
  }

  /* Fließtext-Abschnitte der Inhaltsseiten */
  .fliesstext {
    display: grid;
    gap: 18px;
    max-width: 68ch;

    & h2 { margin-block-start: 16px; }
    & h3 { margin-block-start: 10px; }

    & ul, & ol { margin: 0; padding-inline-start: 22px; line-height: 1.85; }
    & li { max-width: 62ch; }
  }

  /* Fotos im Fließtext. Der Textblock ist auf 68ch begrenzt, das Bild darf
     etwas darüber hinaus — sonst wirkt es im Verhältnis zur Überschrift
     zu klein. Die Breite wird vom Elternelement gedeckelt. */
  .foto {
    margin: 10px 0 6px;
    max-width: min(100%, 780px);

    & picture { display: block; }

    & img {
      display: block;
      inline-size: 100%;
      block-size: auto;
      border-radius: var(--radius);
      background: var(--flaeche-2);
    }

    & figcaption {
      margin-block-start: 10px;
      color: var(--text-leise);
      font-size: 14.5px;
      line-height: 1.55;
      max-width: 60ch;
    }
  }

  /* Für Aussagen, die der Besucher nicht überlesen darf — etwa dass
     ohne Termin kein Fahrzeug angenommen wird. Kein Warnrot: Es ist
     eine Regel, keine Störung. */
  .hinweis-stark {
    padding: 14px 18px;
    border-inline-start: 3px solid var(--signal);
    background: var(--flaeche-2);
    border-radius: var(--radius-klein);
  }

  /* Hochformate: in voller Textbreite würden sie den Absatz erschlagen. */
  .foto-schmal { max-width: min(100%, 400px); }
}

/* ------------------------------------------------------------
   Hilfsklassen
   ------------------------------------------------------------ */

@layer hilfsklassen {

  /* Für Screenreader sichtbar, visuell ausgeblendet. */
  .nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}