/* =========================================================
   ReSoft – Interior Refinish System
   Farben stammen aus dem Logo-SVG und dem Flyer.
   ========================================================= */

:root {
  /* Marke */
  --rot:          #d41216;
  --rot-hell:     #e8272b;
  --rot-dunkel:   #a60d11;
  --anthrazit:    #2c2c2c;

  /* Flächen */
  --grund:        #202020;
  --grund-tief:   #161616;
  --flaeche:      #262626;
  --flaeche-hoch: #2f2f2f;
  --linie:        #3a3a3a;

  /* Schrift */
  --text:         #f2f3f4;
  --text-leise:   #a8acb0;
  --text-still:   #74797d;

  /* Silber aus dem Logobogen */
  --silber-hell:  #ededed;
  --silber:       #c1c0c2;
  --silber-tief:  #888a8c;

  /* Modusabhängige Sonderflächen */
  --text-stark:     #ffffff;
  --kopf-grund:     rgba(22, 22, 22, .93);
  --buehne-oben:    #242424;
  --buehne-glanz:   rgba(212, 18, 22, .16);
  --schatten-gross: rgba(0, 0, 0, .5);
  --kachel-oben:    #232527;
  --kachel-unten:   #1a1c1e;
  --ki-grund:       rgba(16, 17, 18, .78);
  --ki-rand:        rgba(237, 237, 237, .28);
  --ki-text:        #e6e7e8;
  --buehne-bild:    url("../bilder/fahrzeug-studio-hintergrund-dunkel.webp");   /* Studio hinter den Fahrzeugen */

  --radius:      10px;
  --radius-klein: 6px;
  --breite:       1240px;
  --uebergang:    .18s ease;

  --schrift: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  color-scheme: dark;
}

/* Heller Modus. Gesetzt über data-theme am <html>, siehe inc/kopf.php. */
:root[data-theme="hell"] {
  --rot-hell:     #b80f13;   /* dunkler als im Dunkelmodus, sonst zu wenig Kontrast auf Weiß */

  --grund:        #f5f5f4;
  --grund-tief:   #ebeced;
  --flaeche:      #ffffff;
  --flaeche-hoch: #fafafa;
  --linie:        #d9dbdd;

  --text:         #1c1e20;
  --text-leise:   #4d5358;
  --text-still:   #676d73;

  --text-stark:     #111213;
  --kopf-grund:     rgba(255, 255, 255, .92);
  --buehne-oben:    #ffffff;
  --buehne-glanz:   rgba(212, 18, 22, .08);
  --schatten-gross: rgba(0, 0, 0, .12);
  --kachel-oben:    #f4f5f6;
  --kachel-unten:   #e4e6e8;
  --ki-grund:       rgba(255, 255, 255, .85);
  --ki-rand:        rgba(28, 30, 32, .22);
  --ki-text:        #3a3f44;
  --buehne-bild:    url("../bilder/fahrzeug-studio-hintergrund-hell.webp");

  color-scheme: light;
}

/* ---------- Grundlagen ---------- */

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

/* Sanft scrollen nur bei Klicks innerhalb der Seite. Beim Laden mit Anker
   (/exclusive?…#teile, Rücksprung nach dem Merken) würde "smooth" den Sprung
   verhindern; dann hat noch nichts den Fokus, und die Seite springt sofort. */
html:focus-within { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 16px/1.65 var(--schrift);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.005em;
}

h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

ul.blank { list-style: none; margin: 0; padding: 0; }

.breite {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
}

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--rot); color: #fff; padding: .7rem 1.2rem; z-index: 100;
}
.skip:focus { left: 0; }

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

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-klein);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--uebergang), border-color var(--uebergang), color var(--uebergang);
}

.knopf--rot        { background: var(--rot); color: #fff; }
.knopf--rot:hover  { background: var(--rot-hell); }

.knopf--linie      { border-color: var(--linie); color: var(--text); background: transparent; }

/* <button> übernimmt Schrift nicht von selbst */
button.knopf { font-family: inherit; line-height: inherit; }
.knopf--linie:hover{ border-color: var(--silber-tief); background: var(--flaeche); }

.knopf--klein      { padding: .5rem 1rem; font-size: .85rem; }

/* ---------- Kopfbereich ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--kopf-grund);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}

.kopf__innen {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 78px;
}

.marke { flex-shrink: 0; }
.marke img { width: 130px; height: auto; }

.navi { margin-left: auto; }

.navi ul {
  list-style: none;
  display: flex;
  gap: 1.9rem;
  margin: 0;
  padding: 0;
}

.navi a {
  text-decoration: none;
  font-size: .93rem;
  font-weight: 500;
  color: var(--text-leise);
  padding: .4rem 0;
  position: relative;
  transition: color var(--uebergang);
}

.navi a:hover { color: var(--text); }

.navi a[aria-current="page"] { color: var(--text); }

.navi a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.15rem;
  height: 2px;
  background: var(--rot);
}

.sprachwahl { display: flex; gap: .15rem; font-size: .8rem; }

.sprachwahl a {
  text-decoration: none;
  color: var(--text-still);
  padding: .25rem .5rem;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: .04em;
}

.sprachwahl a:hover   { color: var(--text); }
.sprachwahl a.ist-aktiv { color: #fff; background: var(--rot); }

/* ---------- Hell/Dunkel ---------- */

.modus-schalter {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  padding: 0;
  background: none;
  border: 1px solid var(--linie);
  border-radius: 50%;
  color: var(--text-leise);
  cursor: pointer;
  transition: color var(--uebergang), border-color var(--uebergang), background var(--uebergang);
}

.modus-schalter:hover { color: var(--text); border-color: var(--silber-tief); }

.modus-schalter svg { width: 18px; height: 18px; }

/* Im Dunkelmodus zeigt der Schalter die Sonne (wechselt zu hell), sonst den Mond. */
.modus-schalter .symbol-mond { display: none; }
:root[data-theme="hell"] .modus-schalter .symbol-sonne { display: none; }
:root[data-theme="hell"] .modus-schalter .symbol-mond  { display: block; }

/* Logo mit hellem Schriftzug auf dunklem Grund und umgekehrt */
.logo-auf-hell { display: none; }
:root[data-theme="hell"] .logo-auf-dunkel { display: none; }
:root[data-theme="hell"] .logo-auf-hell   { display: block; }

/* Weicher Wechsel nur beim Umschalten, nicht beim ersten Laden */
.modus-wechsel,
.modus-wechsel *,
.modus-wechsel *::before,
.modus-wechsel *::after {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease !important;
}

.navi-schalter {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  cursor: pointer;
  position: relative;
}

.navi-schalter__balken,
.navi-schalter__balken::before,
.navi-schalter__balken::after {
  position: absolute;
  left: 50%; translate: -50% 0;
  width: 20px; height: 2px;
  background: var(--text);
  transition: var(--uebergang);
}
.navi-schalter__balken        { top: 50%; margin-top: -1px; }
.navi-schalter__balken::before{ content: ""; top: -6px; }
.navi-schalter__balken::after { content: ""; top: 6px; }

/* ---------- Bühne ---------- */

.buehne {
  position: relative;
  padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3.5rem, 7vw, 6rem);
  background:
    radial-gradient(1100px 520px at 68% 18%, var(--buehne-glanz), transparent 62%),
    linear-gradient(180deg, var(--buehne-oben) 0%, var(--grund) 55%, var(--grund-tief) 100%);
  overflow: hidden;
}

.buehne__innen {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.buehne__hut {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rot-hell);
  margin-bottom: 1rem;
}

.buehne h1 { margin-bottom: .5em; }

.buehne__lead {
  font-size: 1.1rem;
  color: var(--text-leise);
  max-width: 46ch;
  margin-bottom: 2rem;
}

.buehne__knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; }

.buehne__bild {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  box-shadow: 0 26px 60px var(--schatten-gross);
}

/* ---------- Abschnitte ---------- */

.block { padding: clamp(3.5rem, 7vw, 6rem) 0; }

.block--flaeche { background: var(--grund-tief); }

.block__kopf { max-width: 62ch; margin-bottom: 2.8rem; }

.block__hut {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rot-hell);
  margin-bottom: .8rem;
}

.block__lead { color: var(--text-leise); font-size: 1.05rem; }


/* ---------- Karten ---------- */

.raster {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 265px), 1fr));
}

.karte {
  display: flex;
  flex-direction: column;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--uebergang), background var(--uebergang), transform var(--uebergang);
}

a.karte:hover {
  border-color: var(--silber-tief);
  background: var(--flaeche-hoch);
  transform: translateY(-2px);
}

.karte__bild {
  aspect-ratio: 4 / 3;
  background: #fff;
  display: grid;
  place-items: center;
  padding: 1.1rem;
  overflow: hidden;
}

.karte__bild img {
  width: 100%; height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Eigene Fahrzeugsilhouetten liegen auf transparentem Grund und
   brauchen eine dunkle Fläche statt der weißen Produktbühne. */
.karte__bild--dunkel {
  background: linear-gradient(180deg, var(--kachel-oben) 0%, var(--kachel-unten) 100%);
  padding: 1.4rem 1rem;
}

.karte__bild--dunkel img {
  mix-blend-mode: normal;
}

/* Kennzeichnung KI-generierter Bilder */
.karte__bild { position: relative; }
.ki-marke {
  position: absolute;
  top: .5rem; right: .5rem;
  padding: .12rem .38rem;
  border-radius: 4px;
  border: 1px solid var(--ki-rand);
  background: var(--ki-grund);
  color: var(--ki-text);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}

.ki-marke--inline {
  position: static;
  display: inline-block;
  vertical-align: .1em;
  margin-right: .35rem;
}

/* Hinweis unter dem Inhalt, auf allen Seiten mit KI-Bildern */
.ki-seitenhinweis {
  padding-block: 1.4rem 2rem;
}
.ki-seitenhinweis p {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
  color: var(--text-still);
  font-size: .8rem;
  line-height: 1.55;
  max-width: 95ch;
}

.karte__text { padding: 1.05rem 1.15rem 1.25rem; display: flex; flex-direction: column; flex: 1; }

.karte__titel { font-size: 1rem; font-weight: 600; margin: 0 0 .25rem; }

.karte__unter { font-size: .82rem; color: var(--text-still); margin: 0 0 .9rem; }

.karte__fuss { margin-top: auto; }

/* ---------- Preis ---------- */

.preis { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }

/* Hauptpreis ist der Bruttopreis, darunter steht der Nettobetrag. */
.preis__haupt { font-size: 1.18rem; font-weight: 700; color: var(--text-stark); }

.preis__hinweis { font-size: .76rem; color: var(--text-still); }

.preis__zweit {
  display: block;
  font-size: .82rem;
  color: var(--text-leise);
  margin-top: .15rem;
}

.preis__ab { font-size: .72rem; color: var(--text-still); display: block; }

/* Wofür der Preis gilt (data/umfang.json) */
.preis__umfang {
  display: block;
  margin: .25rem 0 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-leise);
}
.karte .preis__umfang { font-size: .72rem; margin-top: .2rem; }

/* ---------- Etiketten ---------- */

.etikett {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .22rem .55rem;
  border-radius: 4px;
  border: 1px solid var(--linie);
  color: var(--text-leise);
}

.etikett--neu { border-color: rgba(212, 18, 22, .55); color: var(--rot-hell); }

/* ---------- Brotkrumen ---------- */

.krumen {
  font-size: .82rem;
  color: var(--text-still);
  padding: 1.6rem 0 0;
}

.krumen a { color: var(--text-leise); text-decoration: none; }
.krumen a:hover { color: var(--text); }
.krumen span { margin: 0 .45rem; opacity: .5; }

/* ---------- Filter ---------- */

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  align-items: center;
  padding: 1.1rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  margin-bottom: 2rem;
}

.feld {
  background: var(--grund-tief);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  color: var(--text);
  padding: .68rem .85rem;
  font: inherit;
  font-size: .92rem;
  min-width: 0;
}

.feld:focus { border-color: var(--silber-tief); outline: none; }

.feld--breit { flex: 1 1 240px; }

.filter__zahl { margin-left: auto; font-size: .85rem; color: var(--text-still); }

/* ---------- Verfahren ---------- */

.schritte { counter-reset: schritt; display: grid; gap: 1.2rem; }

.schritt {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: start;
  padding: 1.4rem 1.5rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--rot);
  border-radius: var(--radius);
}

.schritt::before {
  content: counter(schritt, decimal-leading-zero);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--rot);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.schritt p { margin: 0; color: var(--text-leise); }

/* ---------- Liste mit Kreuzen (wie im Flyer) ---------- */

.kreuzliste { list-style: none; margin: 0 0 1.5rem; padding: 0; }

.kreuzliste li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: .55rem;
  color: var(--text-leise);
}

.kreuzliste li::before {
  content: "\00d7";
  position: absolute;
  left: 0;
  top: -.05em;
  color: var(--rot);
  font-weight: 700;
  font-size: 1.15em;
}

.hakenliste { list-style: none; margin: 0 0 1.5rem; padding: 0; }

.hakenliste li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: .55rem;
  color: var(--text-leise);
}

.hakenliste li::before {
  content: "";
  position: absolute;
  left: .15rem; top: .5em;
  width: 8px; height: 8px;
  background: var(--rot);
  rotate: 45deg;
}

/* ---------- Zwei Spalten ---------- */

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
}

/* ---------- Vorher / Nachher ---------- */

.vergleich {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}

.vergleich figure { margin: 0; position: relative; background: #fff; }

.vergleich img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.vergleich figcaption {
  position: absolute;
  top: .7rem; left: .7rem;
  background: rgba(22, 22, 22, .85);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .28rem .6rem;
  border-radius: 4px;
}

.vergleich figure:last-child figcaption { background: var(--rot); }

/* Galerie: alle Paare in einem Raster, passend für einen Bildschirm */
.galerie.block { padding-top: clamp(1.6rem, 3vw, 2.4rem); }
.galerie__kopf { margin-bottom: 1.4rem; }
.galerie__kopf h1 { margin-bottom: .3rem; }
.galerie__kopf .block__lead { margin: 0; }

.galerie__raster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem 1.6rem;
}

/* Bildhöhe am Bildschirm ausrichten: zwei Reihen plus Kopf passen hinein */
.galerie .vergleich img {
  aspect-ratio: auto;
  height: clamp(150px, calc((100vh - 430px) / 2), 280px);
}

.galerie__text { margin-top: .55rem; }
.galerie__text h2 { font-size: .98rem; font-weight: 600; margin: 0 0 .1rem; }
.galerie__text h2 span { color: var(--text-still); font-weight: 400; font-size: .85rem; margin-left: .35rem; }
.galerie__text p { margin: 0; color: var(--text-leise); font-size: .86rem; line-height: 1.45; }

/* ---------- Teildetail ---------- */

.detail { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.8rem, 4vw, 3.5rem); align-items: start; }

.detail__bild {
  background: #fff;
  border-radius: var(--radius);
  padding: 2rem;
  border: 1px solid var(--linie);
}

.datenblatt { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .93rem; }

.datenblatt th,
.datenblatt td { text-align: left; padding: .7rem .2rem; border-bottom: 1px solid var(--linie); }

.datenblatt th { color: var(--text-still); font-weight: 500; width: 45%; }

.datenblatt td { color: var(--text); }

.datenblatt tr:last-child th,
.datenblatt tr:last-child td { border-bottom: 0; }

/* ---------- Formular ---------- */

.formular { display: grid; gap: 1rem; max-width: 620px; }

.formular label { display: block; font-size: .88rem; color: var(--text-leise); margin-bottom: .35rem; }

.formular .feld { width: 100%; }

.formular textarea { resize: vertical; min-height: 150px; }

.paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.meldung {
  padding: 1rem 1.2rem;
  border-radius: var(--radius-klein);
  border: 1px solid var(--linie);
  margin-bottom: 1.5rem;
}

.meldung--gut  { border-color: rgba(90, 180, 110, .5); background: rgba(90, 180, 110, .1); }
.meldung--fehler { border-color: rgba(212, 18, 22, .5); background: rgba(212, 18, 22, .1); }

.feldfehler { color: var(--rot-hell); font-size: .8rem; margin-top: .3rem; }

/* Falle für automatisierte Einträge */
.honig { position: absolute; left: -9999px; }

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

.fuss {
  background: var(--grund-tief);
  border-top: 1px solid var(--linie);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}

.fuss__innen {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2.5rem;
}

.fuss h2 {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-still);
  margin-bottom: 1rem;
}

.fuss a { color: var(--text-leise); text-decoration: none; }
.fuss a:hover { color: var(--text); }

.fuss li { margin-bottom: .35rem; }

.fuss__marke img { width: 140px; }

.fuss__betrieb { color: var(--text-still); font-size: .88rem; margin-top: 1rem; }

.fuss__land { color: var(--text-leise); font-size: .88rem; }


.fuss__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.2rem 0;
  border-top: 1px solid var(--linie);
  font-size: .82rem;
  color: var(--text-still);
}

.fuss__zeile p { margin: 0; }

.fuss__zeile a { margin-left: 1.2rem; }

/* ---------- Merkzettel: Kopf ---------- */

.merk-link {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--linie);
  border-radius: 50%;
  color: var(--text-leise);
  text-decoration: none;
  transition: color var(--uebergang), border-color var(--uebergang);
}

.merk-link:hover,
.merk-link[aria-current="page"] { color: var(--text); border-color: var(--silber-tief); }

.merk-link__zahl {
  position: absolute;
  top: -5px; right: -6px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--rot);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}

/* ---------- Merkzettel: Rückmeldung ---------- */

.hinweis-leiste {
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche);
  font-size: .9rem;
}

.hinweis-leiste--gut    { box-shadow: inset 3px 0 0 #3fa35a; }
.hinweis-leiste--fehler { box-shadow: inset 3px 0 0 var(--rot); }

.hinweis-leiste__innen {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 0;
}

.hinweis-leiste a { color: var(--rot-hell); font-weight: 600; text-decoration: none; }
.hinweis-leiste a:hover { text-decoration: underline; }

/* ---------- Merkzettel: Karten ---------- */

.karte-huelle { position: relative; display: flex; scroll-margin-top: 150px; }
.karte-huelle > .karte { flex: 1; min-width: 0; }

.karte-huelle:hover > a.karte {
  border-color: var(--silber-tief);
  background: var(--flaeche-hoch);
  transform: translateY(-2px);
}

.karte__merken {
  position: absolute;
  top: .7rem; right: .7rem;
  margin: 0;
}

.merk-knopf {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #3a3d40;
  fill: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  transition: color var(--uebergang), background var(--uebergang), transform var(--uebergang);
}

.merk-knopf svg { fill: inherit; }
.merk-knopf:hover { color: var(--rot); transform: scale(1.06); }
.merk-knopf.ist-gemerkt { background: var(--rot); border-color: var(--rot); color: #fff; fill: currentColor; }
.merk-knopf.ist-gemerkt:hover { background: var(--rot-dunkel); color: #fff; }

/* ---------- Merkzettel: Teileseite ---------- */

.detail__merken {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  margin-top: .5rem;
}

.feld--menge {
  width: 5.2rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.detail__gemerkt { margin: .8rem 0 0; font-size: .88rem; color: var(--text-leise); }
.detail__gemerkt a { color: var(--rot-hell); }

.passt {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linie);
}

.passt__titel {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-still);
  margin-bottom: .8rem;
}

.passt__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.passt__liste li {
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: .3rem .8rem;
  font-size: .84rem;
}

.passt__liste a { color: var(--text); text-decoration: none; font-weight: 500; }
.passt__liste a:hover { color: var(--rot-hell); }
.passt__liste span { color: var(--text-still); margin-left: .35rem; font-size: .78rem; }
.passt__liste li.ist-hier { border-color: var(--rot); }

/* ---------- Merkzettel: Seite ---------- */

.merk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 2rem;
  align-items: start;
}

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

.merk__tabelle { width: 100%; border-collapse: collapse; font-size: .93rem; }

.merk__tabelle th {
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-still);
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--linie);
}

.merk__tabelle td {
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--linie);
  vertical-align: middle;
}

.merk__tabelle tbody tr:last-child td { border-bottom: 0; }

.merk__tabelle .zahl  { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.merk__tabelle .menge { text-align: center; }

.merk__bild { width: 88px; padding-right: 0 !important; }

.merk__bild img {
  width: 72px; height: 72px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: 4px;
}

.merk__name a { color: var(--text); font-weight: 600; text-decoration: none; }
.merk__name a:hover { text-decoration: underline; }
.merk__unter { display: block; font-size: .8rem; color: var(--text-still); margin-top: .15rem; }

.merk__zeilensumme { font-weight: 700; color: var(--text-stark); }

.merk__weg { width: 44px; text-align: right; }

.knopf-symbol {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  color: var(--text-still);
  cursor: pointer;
}

.knopf-symbol:hover { color: var(--rot-hell); border-color: var(--linie); }

.merk__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  margin-top: 1rem;
}

.merk__weiter { margin-left: auto; font-size: .9rem; color: var(--text-leise); }
.merk__weiter:hover { color: var(--text); }

.merk__summe {
  position: sticky;
  top: 96px;
  padding: 1.4rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}

.merk__summe h2 { font-size: 1.1rem; margin: 0 0 .2rem; }

.merk__stueck { font-size: .85rem; color: var(--text-still); margin: 0 0 1.1rem; }

.merk__werte { margin: 0 0 1.1rem; }

.merk__werte > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem 0;
  font-size: .92rem;
  color: var(--text-leise);
}

.merk__werte dt, .merk__werte dd { margin: 0; }
.merk__werte dd { font-variant-numeric: tabular-nums; white-space: nowrap; }

.merk__gesamt {
  margin-top: .4rem;
  padding-top: .8rem !important;
  border-top: 1px solid var(--linie);
  color: var(--text) !important;
}

.merk__gesamt dt { font-weight: 600; }
.merk__gesamt dd { font-size: 1.35rem; font-weight: 700; color: var(--text-stark); }

.merk__hinweis {
  font-size: .8rem;
  color: var(--text-leise);
  border-left: 2px solid var(--rot);
  padding-left: .7rem;
  margin: 0 0 1.1rem;
}

.merk__anfragen { width: 100%; justify-content: center; }

.merk__klein { font-size: .78rem; color: var(--text-still); margin: .7rem 0 0; text-align: center; }

.merk-leer {
  padding: 2.5rem;
  text-align: center;
  background: var(--flaeche);
  border: 1px dashed var(--linie);
  border-radius: var(--radius);
}

.merk-leer p { color: var(--text-leise); max-width: 46ch; margin: 0 auto 1.4rem; }

/* =========================================================
   Startseite
   Aufbau wie bei Herstellerseiten: Vollbildbühne, Kapitel mit
   großen Bildern, Marken-Slider. Bildsprache und Texte aus dem Flyer.
   Bühne und Technik-Band bleiben in beiden Modi dunkel (Fotos).
   ========================================================= */

.seite-start { --kopf-hoehe: 78px; --rot-auf-foto: #f0383c; }

/* Kopf liegt transparent über der Bühne und wird beim Scrollen fest */
.seite-start .kopf {
  position: fixed;
  left: 0; right: 0;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}

.seite-start .kopf.ist-gerollt,
.seite-start .kopf.menue-offen {
  background: var(--kopf-grund);
  border-bottom-color: var(--linie);
  backdrop-filter: blur(10px);
}

.seite-start .kopf:not(.ist-gerollt):not(.menue-offen) {
  --text:       #ffffff;
  --text-leise: rgba(255, 255, 255, .84);
  --text-still: rgba(255, 255, 255, .72);
  --linie:      rgba(255, 255, 255, .34);
  --silber-tief: rgba(255, 255, 255, .7);
}
/* Ohne dunklen Verlauf: Schrift über dem Foto per Schatten lesbar halten */
.seite-start .kopf:not(.ist-gerollt):not(.menue-offen) .navi a,
.seite-start .kopf:not(.ist-gerollt):not(.menue-offen) .sprachwahl a {
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}
.seite-start .kopf:not(.ist-gerollt):not(.menue-offen) .logo-auf-dunkel { display: block; }
.seite-start .kopf:not(.ist-gerollt):not(.menue-offen) .logo-auf-hell   { display: none; }

.seite-start .hinweis-leiste {
  position: fixed;
  top: var(--kopf-hoehe);
  left: 0; right: 0;
  z-index: 49;
}

/* Gemeinsame Bausteine */
.hut {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rot-hell);
  margin-bottom: 1.1rem;
}

.gross {
  font-size: clamp(1.9rem, 4.1vw, 3.5rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  /* Keine automatische Silbentrennung. Nur als Notbehelf auf sehr schmalen
     Bildschirmen umbrechen, damit nichts aus dem Rahmen läuft. */
  overflow-wrap: break-word;
}

/* In den halbbreiten Kapiteln kleiner, damit lange Wörter wie
   PREMIUMFAHRZEUGE ungetrennt in die Spalte passen */
.kapitel .gross { font-size: clamp(1.7rem, 2.7vw, 2.6rem); }

.leise   { color: var(--text-leise); font-size: 1.06rem; }
.rot     { color: var(--rot); }
.block-zeile { display: block; }
.marken-wort { text-transform: none; font-weight: 600; }

.betont {
  font-weight: 600;
  font-size: 1.12rem;
  border-left: 3px solid var(--rot);
  padding-left: 1rem;
  margin: 0;
}

.knopf--gross {
  padding: 1rem 1.8rem;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 3px;
}

/* Rahmen als Innenschatten statt border: Bei krummer Knopfhöhe und aktivem
   backdrop-filter verschluckt der Browser sonst die untere 1-Pixel-Linie. */
.knopf--glas {
  color: #fff;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--uebergang), box-shadow var(--uebergang), color var(--uebergang);
}
.knopf--glas:hover { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px #fff; }

.pfeil-link {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--rot);
  white-space: nowrap;
}
.pfeil-link::after { content: "→"; font-size: 1rem; letter-spacing: 0; transition: transform var(--uebergang); }
a.pfeil-link:hover::after,
a:hover .pfeil-link::after { transform: translateX(5px); }

.flagge {
  display: inline-block;
  width: 1.5em; height: 1em;
  border-radius: 2px;
  background: linear-gradient(#000 0 33.34%, #dd0000 0 66.67%, #ffce00 0);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}

/* 1  Bühne */
.sb {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: #0e0f10;
  overflow: hidden;
  isolation: isolate;
}

.sb__bild { position: absolute; inset: 0; z-index: -1; }

.sb__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  animation: sb-zoom 16s cubic-bezier(.2, .6, .2, 1) both;
}

.sb__bild::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 15, 16, .94) 0%, rgba(14, 15, 16, .7) 38%, rgba(14, 15, 16, .12) 72%, rgba(14, 15, 16, .25) 100%),
    linear-gradient(0deg, rgba(14, 15, 16, .96) 0%, rgba(14, 15, 16, 0) 42%);
}

@keyframes sb-zoom {
  from { transform: scale(1.14); }
  to   { transform: scale(1); }
}

.sb__innen {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 3rem;
  padding: calc(var(--kopf-hoehe) + 4rem) 0 clamp(6rem, 12vh, 8.5rem);
}

.sb .hut { color: var(--rot-auf-foto); }

.sb__hut {
  font-size: clamp(1rem, 1.7vw, 1.4rem);
  font-weight: 300;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .86);
  margin-bottom: .6rem;
}

.sb__titel {
  font-size: clamp(2.6rem, 7.2vw, 6.4rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: .005em;
  text-transform: uppercase;
  max-width: 11ch;
  margin: 0;
}

.sb__linie {
  border: 0;
  height: 1px;
  width: min(560px, 100%);
  margin: 1.8rem 0 1.4rem;
  background: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));
}

.sb__lead {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: rgba(255, 255, 255, .8);
  max-width: 46ch;
  margin-bottom: 2.2rem;
}

.sb__knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; }

.sb__merkmale {
  list-style: none;
  margin: 0;
  padding: 0 0 .4rem 1.3rem;
  border-left: 1px solid rgba(255, 255, 255, .35);
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.9;
  color: rgba(255, 255, 255, .9);
}

/* 2  Kennzahlen */
.zahlen {
  background: var(--grund-tief);
  border-bottom: 1px solid var(--linie);
  scroll-margin-top: var(--kopf-hoehe);
}

.zahlen__raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.zahl {
  display: grid;
  gap: .3rem;
  padding: clamp(2rem, 4vw, 3.2rem) 1.4rem;
  border-left: 1px solid var(--linie);
}
.zahl:first-child { border-left: 0; padding-left: 0; }

.zahl strong {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  font-weight: 200;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-stark);
}

.zahl span {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-still);
}

.zahl .flagge { font-size: .62em; }

/* 3 + 8  Kapitel: Bild und Text nebeneinander, randlos */
.kapitel {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: min(92vh, 900px);
  background: var(--grund);
}

.kapitel__bild { position: relative; overflow: hidden; min-height: 420px; }

.kapitel__bild img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.kapitel__text {
  align-self: center;
  max-width: 640px;
  padding: clamp(3rem, 7vw, 7rem) clamp(1.25rem, 6vw, 6rem);
}

.kapitel__text .kreuzliste { margin: 1.8rem 0 2rem; }

.kapitel--gedreht { grid-template-columns: 1fr 1.1fr; background: var(--grund-tief); }
.kapitel--gedreht .kapitel__bild { order: 2; }
.kapitel--gedreht .kapitel__text { justify-self: end; }

.vorteile {
  list-style: none;
  counter-reset: vorteil;
  margin: 2rem 0 0;
  padding: 0;
}

.vorteile li {
  counter-increment: vorteil;
  display: flex;
  gap: 1.3rem;
  align-items: baseline;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: 1.12rem;
}
.vorteile li:first-child { border-top: 1px solid var(--linie); }

.vorteile li::before {
  content: counter(vorteil, decimal-leading-zero);
  min-width: 2rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--rot-hell);
}

/* 4  Band über dem Motorraum */
.band {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: #0e0f10;
  overflow: hidden;
  isolation: isolate;
}

.band__bild {
  position: absolute;
  inset: -12% 0;
  z-index: -1;
  transform: translate3d(0, var(--versatz, 0px), 0);
  will-change: transform;
}

.band__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.8);
}

.band::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgba(10, 10, 11, .96) 0%, rgba(10, 10, 11, .72) 45%, rgba(10, 10, 11, .25) 100%);
}

.band__innen { padding: 10rem 0 clamp(4rem, 9vh, 7rem); }

/* Heller Modus: Die Flyer-Fotos sind sehr dunkel aufgenommen und wirken auf
   hellem Grund wie Löcher. Deshalb aufhellen und die Verläufe dort abschwächen,
   wo keine Schrift steht. Hinter der weißen Schrift bleibt es dunkel genug. */
:root[data-theme="hell"] .flyer-foto { filter: brightness(1.32) contrast(.94); }
:root[data-theme="hell"] .band__bild img.flyer-foto { filter: saturate(.85) brightness(1.32) contrast(.94); }

:root[data-theme="hell"] .sb__bild::after {
  background:
    linear-gradient(90deg, rgba(14, 15, 16, .9) 0%, rgba(14, 15, 16, .62) 38%, rgba(14, 15, 16, .04) 72%, rgba(14, 15, 16, .1) 100%),
    linear-gradient(0deg, rgba(14, 15, 16, .9) 0%, rgba(14, 15, 16, 0) 36%);
}

:root[data-theme="hell"] .band::after {
  background:
    linear-gradient(0deg, rgba(10, 10, 11, .92) 0%, rgba(10, 10, 11, .6) 42%, rgba(10, 10, 11, .08) 100%);
}
.band .hut { color: var(--rot-auf-foto); }
.band .gross { max-width: 20ch; }

.band__spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 3rem;
  max-width: 920px;
  font-size: 1.08rem;
  color: rgba(255, 255, 255, .82);
}
.band__spalten p { margin: 0; }

/* 5  Ablauf */
.ablauf { padding: clamp(4.5rem, 10vw, 8rem) 0; background: var(--grund); }

.ablauf__kopf,
.parade__kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 3rem;
}
.ablauf__kopf .gross,
.parade__kopf .gross { margin-bottom: 0; }

.ablauf__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.6rem;
}

.ablauf__liste li {
  position: relative;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linie);
}

/* roter Fortschrittsstrich, wächst beim Einblenden */
.ablauf__liste li::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  height: 2px;
  width: 100%;
  background: var(--rot);
  transform-origin: left;
  transition: transform 1s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 120ms + 200ms);
}
.js .ablauf__liste li:not(.ist-sichtbar)::before { transform: scaleX(0); }

.ablauf__nr {
  display: block;
  font-size: 2.6rem;
  font-weight: 200;
  line-height: 1;
  color: var(--text-still);
  margin-bottom: 1rem;
}

.ablauf__liste p { margin: 0; color: var(--text-leise); }

/* 6  Marken: alle sechs auf einen Blick */
.parade {
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  background:
    radial-gradient(900px 380px at 50% 100%, var(--buehne-glanz), transparent 70%),
    var(--grund-tief);
  border-block: 1px solid var(--linie);
}

.parade__kopf { margin-bottom: 2.2rem; }

.kachelraster {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.7rem, 1.4vw, 1.1rem);
}

.auftritt {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9.5;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  /* Studio größer ziehen und verschieben: die Mitte des hellen Bodenflecks
     (72 % der Bildhöhe) liegt bei 62 % der Kachel, knapp über der Radlinie
     (67 %). So überdeckt das Auto den hellen Boden leicht.
     Formel: Position = (0,72 × 1,35 − 0,62) / 0,35 */
  background: var(--buehne-bild) center 100% / auto 135% no-repeat, var(--kachel-unten);
  color: inherit;
  text-decoration: none;
  isolation: isolate;
  transition: border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.2, .7, .2, 1);
}

/* feine rote Linie, die beim Überfahren von links einläuft */
.auftritt::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--rot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.auftritt:hover,
.auftritt:focus-visible {
  border-color: var(--silber-tief);
  box-shadow: 0 18px 40px var(--schatten-gross);
  transform: translateY(-3px);
}
.auftritt:hover::after,
.auftritt:focus-visible::after { transform: scaleX(1); }

.auftritt__nr {
  position: absolute;
  top: .95rem; left: 1.1rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--text-still);
}

.auftritt__bild {
  position: absolute;
  inset: 17% 15% 31%;
  display: grid;
  place-items: center;
}

.auftritt__bild img {
  width: 100%; height: 100%;
  object-fit: contain;
  /* Räder aller Fahrzeuge auf derselben Bodenlinie, egal wie flach das Auto ist */
  object-position: center bottom;
  transform-origin: center bottom;
  /* enger Kontaktschatten statt eines weit versetzten, der das Auto abheben lässt */
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45));
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

/* Bodenschatten unter den Rädern */
.auftritt__bild::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%;
  bottom: 1%;
  height: 12%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent);
  z-index: -1;
  pointer-events: none;
}
.auftritt--foto .auftritt__bild::after { display: none; }
.auftritt:hover .auftritt__bild img,
.auftritt:focus-visible .auftritt__bild img { transform: scale(1.05) translateX(-3%); }

.auftritt .ki-marke { top: .75rem; right: .8rem; }

.auftritt__fuss {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: .8rem;
  padding: .9rem 1.1rem 1rem;
}

.auftritt__fuss strong {
  display: block;
  font-size: clamp(.86rem, 1.2vw, 1rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.25;
}
.auftritt__fuss small { color: var(--text-still); font-size: .78rem; }

.auftritt__pfeil {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--linie);
  color: var(--text);
  transition: background .35s ease, border-color .35s ease, color .35s ease;
}
.auftritt__pfeil svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .35s ease;
}
.auftritt:hover .auftritt__pfeil { background: var(--rot); border-color: var(--rot); color: #fff; }
.auftritt:hover .auftritt__pfeil svg { transform: translateX(2px); }

/* 7  Ergebnisse */
.ergebnis { padding: clamp(4.5rem, 10vw, 8rem) 0; background: var(--grund); }

.ergebnis__raster {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}

.ergebnis__text { align-self: center; padding-right: 1rem; }

.ergebnis__bild { position: relative; margin: 0; }
.ergebnis__bild--vorher  { margin-top: 5rem; }
.ergebnis__bild--nachher { margin-bottom: 5rem; }

.ergebnis__bild img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}

.ergebnis__bild figcaption {
  position: absolute;
  top: 1rem; left: 1rem;
  padding: .35rem .75rem;
  border-radius: 3px;
  background: rgba(14, 15, 16, .78);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ergebnis__bild--nachher figcaption { background: var(--rot); }

/* KI-Bilder aus der Verfahrensseite sind 3:2 quer. Quadratisch und leicht nach
   links versetzt bleibt das ganze Bauteil im Bild. KI-Etikett unten rechts,
   oben links steht schon Vorher/Nachher. */
.ergebnis__bild--ki img { aspect-ratio: 1 / 1; object-position: 45% 50%; }
.ergebnis__bild--ki .ki-marke { top: auto; bottom: .75rem; right: .75rem; }

/* 9  Kontakt */
.schluss {
  padding: clamp(4.5rem, 10vw, 8rem) 0;
  background:
    radial-gradient(900px 420px at 88% 0%, var(--buehne-glanz), transparent 62%),
    var(--grund-tief);
  border-top: 1px solid var(--linie);
}

.schluss__innen {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.schluss__daten { display: grid; gap: 1.1rem; }

.schluss__daten a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--linie);
  font-size: clamp(1.2rem, 2.3vw, 1.8rem);
  font-weight: 300;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: border-color var(--uebergang);
}
.schluss__daten a:hover { border-color: var(--rot); }
.schluss__daten small { color: var(--rot-hell); font-size: .9rem; font-weight: 700; min-width: 1.2rem; }

.made-in {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  width: fit-content;
  margin-top: .8rem;
  padding: .85rem 1.4rem;
  background: var(--flaeche-hoch);
  border: 1px solid var(--linie);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.made-in .flagge { font-size: 2rem; }

/* Einblenden beim Scrollen */
.js .zeige {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js .zeige--bild {
  transform: none;
  clip-path: inset(6% 4% 6% 4%);
  transition: opacity 1s ease, clip-path 1.2s cubic-bezier(.2, .7, .2, 1);
}
.js .zeige.ist-sichtbar { opacity: 1; transform: none; clip-path: inset(0); }

.sb__text .zeige:nth-child(2) { --i: 1; }
.sb__text .zeige:nth-child(3) { --i: 2; }
.sb__text .zeige:nth-child(4) { --i: 3; }
.sb__text .zeige:nth-child(5) { --i: 4; }
.sb__text .zeige:nth-child(6) { --i: 5; }
.sb__text .zeige:nth-child(7) { --i: 6; }
.sb__merkmale.zeige { --i: 7; }

@media (prefers-reduced-motion: reduce) {
  .sb__bild img { animation: none; }
  .band__bild { transform: none; }
  .js .zeige, .js .zeige--bild { opacity: 1; transform: none; clip-path: none; transition: none; }
  .ablauf__liste li::before { transition: none; }
  .js .ablauf__liste li:not(.ist-sichtbar)::before { transform: none; }
  html:focus-within { scroll-behavior: auto; }
}

@media (max-width: 960px) {
  .sb__innen { grid-template-columns: 1fr; gap: 2rem; }
  .sb__merkmale { display: none; }

  .zahlen__raster { grid-template-columns: 1fr 1fr; }
  .zahl:nth-child(3) { border-left: 0; padding-left: 0; }
  .zahl:nth-child(n+3) { border-top: 1px solid var(--linie); }

  .kapitel,
  .kapitel--gedreht { grid-template-columns: 1fr; min-height: 0; }
  .kapitel__bild { aspect-ratio: 4 / 3; min-height: 0; }
  .kapitel--gedreht .kapitel__bild { order: 0; }
  .kapitel--gedreht .kapitel__text { justify-self: start; }
  .kapitel__text { padding: 3.5rem 1.25rem 4rem; max-width: 720px; }

  .band { min-height: 85vh; }
  .band::after {
    background: linear-gradient(0deg, rgba(10, 10, 11, .96) 0%, rgba(10, 10, 11, .86) 60%, rgba(10, 10, 11, .4) 100%);
  }
  .band__spalten { grid-template-columns: 1fr; }

  .ablauf__liste { grid-template-columns: 1fr 1fr; row-gap: 2.4rem; }

  .auftritt { aspect-ratio: 16 / 11; }

  .ergebnis__raster { grid-template-columns: 1fr 1fr; }
  .ergebnis__text { grid-column: 1 / -1; padding-right: 0; }
  .ergebnis__bild--vorher { margin-top: 3rem; }
  .ergebnis__bild--nachher { margin-bottom: 3rem; }

  .schluss__innen { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .seite-start { --kopf-hoehe: 64px; }
  .seite-start .kopf__innen { min-height: var(--kopf-hoehe); }
  .ablauf__kopf, .parade__kopf { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .kachelraster { grid-template-columns: repeat(2, 1fr); }
  .auftritt { aspect-ratio: 1 / .86; }
  .auftritt__bild { inset: 20% 10% 41%; }
  /* Radlinie hier bei 57 %, Fleck bei 52 %: (0,72 × 1,5 − 0,52) / 0,5 */
  .auftritt { background-size: auto 150%; background-position: center 112%; }
  .auftritt__nr { top: .7rem; left: .8rem; }
  .auftritt .ki-marke { top: .55rem; right: .55rem; }
  .auftritt__fuss { padding: .7rem .8rem .8rem; }
  .auftritt__fuss strong { font-size: .78rem; letter-spacing: .08em; }
  .auftritt__fuss small { font-size: .72rem; }
  .auftritt__pfeil { width: 28px; height: 28px; }
  .auftritt:hover { transform: none; }
}

@media (max-width: 520px) {
  .sb__titel { font-size: clamp(2.3rem, 11vw, 3rem); }
  .knopf--gross { width: 100%; justify-content: center; }
  .ablauf__liste { grid-template-columns: 1fr; }
  .ergebnis__bild--vorher, .ergebnis__bild--nachher { margin: 0; }
  .zahl { padding-inline: .8rem 0; }
}

/* =========================================================
   Teilekatalog
   Gleiche Kacheln wie auf der Startseite (inc/fahrzeugkachel.php),
   dazu ein Kopf mit Fahrzeugbild und eine schwebende Suchleiste.
   ========================================================= */

.kat-kopf {
  position: relative;
  overflow: hidden;
  padding: 0 0 5.5rem;
  background:
    radial-gradient(900px 420px at 78% 70%, var(--buehne-glanz), transparent 65%),
    linear-gradient(180deg, var(--buehne-oben) 0%, var(--grund-tief) 100%);
  border-bottom: 1px solid var(--linie);
}

.kat-kopf__innen {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: 2rem;
}
.kat-kopf--mit-bild .kat-kopf__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }

/* Mit Fahrzeug: Studio-Hintergrund, Horizont hinter dem Auto */
.kat-kopf--mit-bild {
  background: var(--buehne-bild) center 62% / cover no-repeat, var(--grund-tief);
}

/* Ohne Suchleiste braucht der Kopf unten keinen Platz für die schwebende Leiste */
.kat-kopf--ohne-suche { padding-bottom: 3rem; }

.kat-kopf .krumen { padding: 1.6rem 0 2.6rem; }
.kat-kopf .krumen [aria-current] { color: var(--text); margin: 0; opacity: 1; }


.kat-kopf__titel {
  font-size: clamp(2.2rem, 5.2vw, 4.4rem);
  font-weight: 300;
  margin-bottom: .8rem;
}

.kat-kopf .leise { max-width: 46ch; margin-bottom: 0; }

.kat-kopf__bild {
  position: relative;
  align-self: end;
  margin-bottom: -1.5rem;
  animation: kat-einfahrt 1.1s cubic-bezier(.2, .7, .2, 1) both;
}

.kat-kopf__bild img {
  width: 100%;
  max-height: 340px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 24px 22px rgba(0, 0, 0, .35));
}

.kat-kopf__bild .ki-marke { top: 0; right: 0; }

@keyframes kat-einfahrt {
  from { opacity: 0; transform: translate3d(6%, 0, 0); }
  to   { opacity: 1; transform: none; }
}

/* Suchleiste schwebt auf der Kante zwischen Kopf und Inhalt */
.suchleiste {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  gap: .5rem;
  margin: -2.1rem 0 0;
  padding: .5rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 18px 40px var(--schatten-gross);
}

.suchleiste__feld,
.suchleiste__wahl {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--grund-tief);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: border-color var(--uebergang);
}
.suchleiste__feld:focus-within,
.suchleiste__wahl:focus-within { border-color: var(--silber-tief); }

.suchleiste__feld { flex: 1 1 auto; min-width: 0; }

.suchleiste__feld svg {
  position: absolute;
  left: 1rem;
  width: 18px; height: 18px;
  fill: none; stroke: var(--text-still); stroke-width: 1.8; stroke-linecap: round;
  pointer-events: none;
}

.suchleiste input,
.suchleiste select {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 50px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .95rem;
  outline: none;
}

.suchleiste input { padding: 0 1rem 0 2.8rem; }
.suchleiste input::placeholder { color: var(--text-still); }

.suchleiste__wahl { flex: 0 0 210px; }
.suchleiste select { padding: 0 1rem; cursor: pointer; }
.suchleiste select option { background: var(--flaeche); color: var(--text); }

.suchleiste .knopf { flex: 0 0 auto; border-radius: var(--radius); }

.kat-inhalt { padding: 2.6rem 0 clamp(4rem, 8vw, 6rem); }

.kat-leiste {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.2rem;
  margin-bottom: 1.8rem;
  border-bottom: 1px solid var(--linie);
}
.kat-leiste p { margin: 0; color: var(--text-leise); }
.kat-leiste strong { color: var(--text-stark); font-size: 1.15rem; }

.pfeil-link--zurueck::after { content: "×"; }

.kat-leer {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-leise);
  border: 1px dashed var(--linie);
  border-radius: var(--radius);
}

.weitere-teile { margin: 4.5rem 0 1.8rem; padding-top: 3rem; border-top: 1px solid var(--linie); }
.weitere-teile .gross { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: .6rem; }

/* Modelle: vier nebeneinander */
.kachelraster--modelle { grid-template-columns: repeat(4, 1fr); }

/* Kachel ohne eigenes Fahrzeugbild: Produktfoto auf hellem Feld */
.auftritt--foto .auftritt__bild {
  inset: 14% 24% 32%;
  padding: .5rem;
  background: #fff;
  border-radius: var(--radius-klein);
}
.auftritt--foto .auftritt__bild img { filter: none; mix-blend-mode: multiply; object-position: center; }

/* Teilekarten schärfen: gleiche Bewegung wie die Fahrzeugkacheln */
.raster--teile { gap: clamp(.8rem, 1.5vw, 1.2rem); }

.karte-huelle .karte {
  position: relative;
  height: 100%;
  transition: border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.2, .7, .2, 1);
}

.karte-huelle .karte::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--rot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.karte-huelle a.karte:hover {
  background: var(--flaeche);
  border-color: var(--silber-tief);
  box-shadow: 0 18px 40px var(--schatten-gross);
  transform: translateY(-3px);
}
.karte-huelle a.karte:hover::after { transform: scaleX(1); }

.karte-huelle .karte__bild img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.karte-huelle a.karte:hover .karte__bild img { transform: scale(1.05); }

.karte-huelle .karte__titel { font-size: .98rem; line-height: 1.35; }
.karte-huelle .karte__unter { letter-spacing: .01em; }

@media (max-width: 1100px) {
  .kachelraster--modelle { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
  .kat-kopf--mit-bild .kat-kopf__innen { grid-template-columns: 1fr; gap: 0; }
  .kat-kopf__bild { margin: 1.4rem auto -1rem; width: min(100%, 520px); }
  .kat-kopf__bild img { max-height: 220px; }
}

@media (max-width: 760px) {
  .kat-kopf { padding-bottom: 4.2rem; }
  .kat-kopf--ohne-suche { padding-bottom: 2.2rem; }
  .kat-kopf .krumen { padding: 1rem 0 1.2rem; font-size: .76rem; }
  .kat-kopf .hut { margin-bottom: .5rem; }
  .kat-kopf__titel { font-size: clamp(1.9rem, 9vw, 2.5rem); margin-bottom: .3rem; }
  .kat-kopf .leise { font-size: .95rem; }
  .kat-kopf__bild { margin: .6rem auto -1.4rem; width: min(78%, 360px); }
  .kat-kopf__bild img { max-height: 130px; }
  .suchleiste input, .suchleiste select { min-height: 44px; }
  .kat-inhalt { padding-top: 1.6rem; }
  .kachelraster--modelle { grid-template-columns: repeat(2, 1fr); }

  .suchleiste { flex-wrap: wrap; }
  .suchleiste__feld { flex: 1 1 100%; }
  .suchleiste__wahl { flex: 1 1 0; }
  .suchleiste .knopf { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .kat-kopf__bild { animation: none; }
}

/* ---------- Kleine Bildschirme ---------- */

@media (max-width: 960px) {
  .buehne__innen,
  .duo,
  .detail { grid-template-columns: 1fr; }

  .buehne__bild { order: -1; }

  .fuss__innen { grid-template-columns: 1fr 1fr; }

  .merk { grid-template-columns: 1fr; }
  .merk__summe { position: static; }
}

/* Mittlere Breiten: Navigation passt sonst nicht neben Logo und Knöpfe */
@media (max-width: 1100px) {
  .kopf__innen { gap: 1rem; }
  .navi ul { gap: 1.2rem; }
  .navi a { white-space: nowrap; }
  .kopf__cta { display: none; }
}

/* Ab hier aufklappbares Menü; daneben passen die Punkte nicht mehr in eine Zeile */
@media (max-width: 960px) {
  .navi-schalter { display: block; }

  .navi {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--grund-tief);
    border-bottom: 1px solid var(--linie);
    padding: 1rem 1.25rem 1.4rem;
  }

  .kopf__innen { position: relative; flex-wrap: wrap; gap: .6rem; }
  .marke { margin-right: auto; }
  .navi-schalter { margin-left: 0; }

  .navi.ist-offen { display: block; }
  .navi ul { flex-direction: column; gap: .2rem; }
  .navi a { display: block; padding: .7rem 0; }
  .navi a[aria-current="page"]::after { display: none; }
}

@media (max-width: 760px) {
  /* Logo, Menü, Merkzettel, Modus und Sprache müssen auf eine Zeile passen */
  .kopf__innen { gap: .45rem; }
  .marke img { width: 100px; }
  .merk-link, .modus-schalter { width: 36px; height: 36px; }
  .sprachwahl a { padding: .25rem .4rem; }

  /* Merkzettel-Tabelle als gestapelte Zeilen */
  .merk__tabelle thead { display: none; }
  .merk__tabelle,
  .merk__tabelle tbody { display: block; }
  .merk__tabelle tr {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: .3rem .9rem;
    padding: 1rem;
    border-bottom: 1px solid var(--linie);
  }
  .merk__tabelle tbody tr:last-child { border-bottom: 0; }
  .merk__tabelle td { display: block; padding: 0; border: 0; }
  .merk__bild { grid-row: 1 / span 3; width: auto; }
  .merk__bild img { width: 64px; height: 64px; }
  .merk__name { grid-column: 2; }
  .merk__weg { grid-column: 3; grid-row: 1; width: auto; }
  .merk__tabelle td.zahl,
  .merk__tabelle td.menge {
    grid-column: 2 / span 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right;
  }
  .merk__tabelle td.zahl::before,
  .merk__tabelle td.menge::before {
    content: attr(data-titel);
    font-size: .78rem;
    color: var(--text-still);
  }
  .merk__weiter { margin-left: 0; width: 100%; }

  .paar { grid-template-columns: 1fr; }

  .vergleich { grid-template-columns: 1fr; }
  .galerie__raster { grid-template-columns: 1fr; }
  /* Paare bleiben nebeneinander, sonst wird die Seite zu lang */
  .galerie .vergleich { grid-template-columns: 1fr 1fr; }
  .galerie .vergleich img { height: auto; aspect-ratio: 1; }
}

@media (max-width: 520px) {
  .fuss__innen { grid-template-columns: 1fr; }
  .filter__zahl { margin-left: 0; width: 100%; }
}

/* ---------- Druck ---------- */

/* Mit JavaScript werden Mengen sofort übernommen, der Knopf entfällt. */
.js .merk__uebernehmen { display: none; }

@media print {
  .kopf, .fuss, .filter, .buehne__knoepfe,
  .hinweis-leiste, .karte__merken, .merk__aktionen, .merk__weg,
  .merk__anfragen, .merk__klein { display: none !important; }
  body { background: #fff; color: #000; }
  .merk { grid-template-columns: 1fr; }
  .merk__summe { position: static; }
  .feld--menge { border: 0; background: none; }
}

/* =========================================================
   Verfahrensseite
   Gleiche Bildsprache wie die Startseite: Bühne, Kennzahlen,
   fünf Schritte im Wechsel, Vorher/Nachher nebeneinander, Vorteile.
   ========================================================= */

.sb--kurz { min-height: 88vh; min-height: 88svh; }
.sb__titel--breit { max-width: 13ch; font-size: clamp(2.4rem, 5.8vw, 5.2rem); }

.sb__ki { position: absolute; top: calc(var(--kopf-hoehe) + 1rem); right: 1.2rem; }
.sb__ki .ki-marke { position: static; }

.sb__merkmale--schritte { padding-left: 1.5rem; line-height: 1; }
.sb__merkmale--schritte li + li { margin-top: .95rem; }
.sb__merkmale--schritte a {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  color: inherit;
  text-decoration: none;
  transition: color var(--uebergang), transform var(--uebergang);
}
.sb__merkmale--schritte a:hover { color: #fff; transform: translateX(4px); }
.sb__merkmale--schritte span {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--rot-auf-foto);
}

/* Fünf Schritte */
.schrittfolge { padding: clamp(4.5rem, 10vw, 8rem) 0; background: var(--grund); }
.schrittfolge__kopf { max-width: 760px; margin-bottom: clamp(3rem, 7vw, 5.5rem); }
.schrittfolge__kopf .leise { margin: 0; }

.schrittfolge__liste {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(3.5rem, 8vw, 7rem);
}

/* Mittellinie, an der die Schritte hängen */
.schrittfolge__liste::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--linie) 8%, var(--rot) 50%, var(--linie) 92%, transparent);
}

.schritt-reihe {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 9vw, 8rem);
  align-items: center;
  scroll-margin-top: calc(var(--kopf-hoehe) + 2rem);
}

.schritt-reihe::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--grund);
  border: 2px solid var(--rot);
  box-shadow: 0 0 0 6px var(--grund);
  transform: translate(-50%, -50%);
}

.schritt-reihe--gedreht .schritt-reihe__bild { order: 2; }
.schritt-reihe--gedreht .schritt-reihe__text { justify-self: end; }

.schritt-reihe__bild {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--grund-tief);
  box-shadow: 0 24px 50px var(--schatten-gross);
}
.schritt-reihe__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.schritt-reihe:hover .schritt-reihe__bild img { transform: scale(1.04); }
.schritt-reihe__bild .ki-marke { top: .8rem; right: .8rem; }

/* Feste Breite, sonst beginnen kurze Texte in den gespiegelten Reihen weiter rechts */
.schritt-reihe__text { width: 100%; max-width: 440px; }

.schritt-reihe__nr {
  display: block;
  margin-bottom: .5rem;
  font-size: clamp(4.2rem, 9vw, 7.5rem);
  font-weight: 200;
  line-height: .9;
  font-variant-numeric: tabular-nums;
  color: transparent;
  -webkit-text-stroke: 1px var(--silber-tief);
}

.schritt-reihe__text h3 {
  margin: 0 0 1rem;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 300;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.schritt-reihe__text h3::after {
  content: "";
  display: block;
  width: 48px; height: 2px;
  margin-top: 1rem;
  background: var(--rot);
}
.schritt-reihe__text p { margin: 0; font-size: 1.1rem; color: var(--text-leise); }

/* Preishinweis unter einem Schritt (z. B. Schritt 2: Aufpreis bei starken Schäden) */
.schritt-reihe__text .schritt-reihe__hinweis {
  margin-top: 1rem;
  padding: .7rem .9rem;
  border-left: 3px solid var(--rot);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--grund-tief);
  font-size: .92rem;
  color: var(--text);
}

/* Vorher/Nachher: erster und letzter Schritt nebeneinander */
.vergleichsband {
  padding: clamp(4.5rem, 10vw, 8rem) 0;
  background: var(--grund-tief);
  border-block: 1px solid var(--linie);
}

.vergleichsband__kopf { max-width: 640px; margin-bottom: clamp(2rem, 4vw, 3rem); }

.vergleichsband__bilder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.vergleichsband__bild { position: relative; margin: 0; }

.vergleichsband__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 30px 60px var(--schatten-gross);
}

.vergleichsband__bild figcaption {
  position: absolute;
  top: 1rem; left: 1rem;
  padding: .35rem .75rem;
  border-radius: 3px;
  background: rgba(14, 15, 16, .78);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  pointer-events: none;
}
.vergleichsband__bild--nachher figcaption { background: var(--rot); }

/* KI-Kennzeichnung unten rechts, oben links steht schon Vorher/Nachher */
.vergleichsband__bild .ki-marke { top: auto; bottom: .9rem; right: .9rem; }

@media (max-width: 760px) {
  .vergleichsband__bilder { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .schrittfolge__liste::before,
  .schritt-reihe::before { display: none; }
  .schritt-reihe { grid-template-columns: 1fr; gap: 1.6rem; }
  .schritt-reihe--gedreht .schritt-reihe__bild { order: 0; }
  .schritt-reihe--gedreht .schritt-reihe__text { justify-self: start; }
  .schritt-reihe__text { display: grid; grid-template-columns: auto 1fr; column-gap: 1.2rem; align-items: start; max-width: none; }
  .schritt-reihe__nr { grid-row: span 2; font-size: 3.6rem; margin: 0; }
}

/* =========================================================
   Bildlupe: Bilder mit [data-lupe] öffnen sich groß (assets/js/seite.js).
   Ohne JavaScript öffnet der Link einfach das Bild.
   ========================================================= */

.lupe-ausloeser {
  position: relative;
  display: block;
  cursor: zoom-in;
}
.lupe-ausloeser::after {
  content: "";
  position: absolute;
  right: .7rem; bottom: .7rem;
  width: 38px; height: 38px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 18px no-repeat,
    rgba(14, 15, 16, .72);
  opacity: 0;
  transform: scale(.85);
  transition: opacity var(--uebergang), transform var(--uebergang);
  pointer-events: none;
}
.lupe-ausloeser:hover::after,
.lupe-ausloeser:focus-visible::after { opacity: 1; transform: none; }
@media (hover: none) {
  .lupe-ausloeser::after { opacity: .9; transform: none; width: 32px; height: 32px; }
}

.lupe {
  width: 100vw; height: 100vh;
  max-width: none; max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  overflow: hidden;
}
.lupe::backdrop { background: rgba(8, 8, 9, .93); backdrop-filter: blur(4px); }
.lupe[open] { animation: lupe-auf .25s ease both; }
@keyframes lupe-auf { from { opacity: 0; } to { opacity: 1; } }

.lupe__rahmen {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  padding: 4rem 5rem 4.5rem;
}

.lupe__bild {
  max-width: 100%;
  max-height: calc(100vh - 8.5rem);
  object-fit: contain;
  border-radius: var(--radius-klein);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  cursor: zoom-out;
}

.lupe__text {
  position: absolute;
  left: 1rem; right: 1rem; bottom: 1.2rem;
  margin: 0;
  text-align: center;
  font-size: .92rem;
  color: rgba(255, 255, 255, .85);
}
.lupe__text small { display: block; margin-top: .2rem; color: rgba(255, 255, 255, .55); font-size: .78rem; }

.lupe__knopf {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(22, 22, 24, .7);
  color: #fff;
  cursor: pointer;
  transition: background var(--uebergang), border-color var(--uebergang);
}
.lupe__knopf:hover { background: var(--rot); border-color: var(--rot); }
.lupe__knopf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lupe__zu      { top: 1rem; right: 1rem; }
.lupe__zurueck { left: 1rem;  top: 50%; transform: translateY(-50%); }
.lupe__weiter  { right: 1rem; top: 50%; transform: translateY(-50%); }
.lupe__knopf[hidden] { display: none; }

@media (max-width: 760px) {
  .lupe__rahmen { padding: 3.8rem .6rem 5rem; }
  .lupe__zurueck, .lupe__weiter { top: auto; bottom: 3.4rem; transform: none; }
  .lupe__text { bottom: .8rem; }
}

/* =========================================================
   Merkzettel im Hintergrund (assets/js/seite.js)
   ========================================================= */

/* Kurze Rückmeldung unten, statt die Seite neu zu laden */
.merk-toast {
  position: fixed;
  left: 50%; bottom: 1.4rem;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem 1rem;
  max-width: min(560px, calc(100vw - 2rem));
  padding: .8rem 1.1rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  font-size: .9rem;
  box-shadow: 0 16px 40px var(--schatten-gross);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.merk-toast.ist-sichtbar { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.merk-toast--gut    { box-shadow: inset 3px 0 0 #3fa35a, 0 16px 40px var(--schatten-gross); }
.merk-toast--fehler { box-shadow: inset 3px 0 0 var(--rot), 0 16px 40px var(--schatten-gross); }
.merk-toast a { color: var(--rot-hell); font-weight: 600; text-decoration: none; white-space: nowrap; }
.merk-toast a:hover { text-decoration: underline; }

/* Zähler am Lesezeichen leuchtet kurz auf */
.merk-link__zahl.ist-neu { animation: merk-puls .5s ease; }
@keyframes merk-puls {
  40% { transform: scale(1.35); }
}

/* Zeile, die gerade gespeichert wird */
.merk__tabelle tr { transition: opacity .2s ease; }
.merk__tabelle tr.ist-am-speichern { opacity: .55; }

.detail__gemerkt[hidden],
.merk__hinweis[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .merk-toast { transition: none; }
  .merk-link__zahl.ist-neu { animation: none; }
}

/* Mengenwahl: große −/+ Knöpfe (inc/merkzettel.php, mengenwahl()) */
.mengenwahl {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--grund-tief);
  overflow: hidden;
}
.mengenwahl:focus-within { border-color: var(--silber-tief); }

.mengenwahl .feld--menge {
  width: 3.4rem;
  min-height: 46px;
  padding: 0 .2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 1.05rem;
  font-weight: 600;
  -moz-appearance: textfield;
          appearance: textfield;
}
.mengenwahl .feld--menge::-webkit-outer-spin-button,
.mengenwahl .feld--menge::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mengenwahl .feld--menge:focus { outline: none; }

.mengenwahl__knopf {
  display: grid;
  place-items: center;
  width: 46px;
  min-height: 46px;
  padding: 0;
  border: 0;
  background: var(--flaeche);
  color: var(--text);
  cursor: pointer;
  transition: background var(--uebergang), color var(--uebergang);
}
.mengenwahl__knopf svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
}
.mengenwahl__knopf:hover { background: var(--rot); color: #fff; }
.mengenwahl__knopf:active { transform: scale(.94); }
.mengenwahl__knopf:focus-visible { outline: 2px solid var(--rot); outline-offset: -2px; }

/* Ohne JavaScript bleibt nur das Zahlenfeld mit den Pfeilen des Browsers */
html:not(.js) .mengenwahl__knopf { display: none; }
html:not(.js) .mengenwahl .feld--menge { -moz-appearance: auto; appearance: auto; width: 5.2rem; }

.merk__tabelle .mengenwahl { vertical-align: middle; }

@media print {
  .mengenwahl { border: 0; background: none; }
  .mengenwahl__knopf { display: none; }
}

/* Preis, Menge und Summe in einer Zeile auf gleicher Höhe */
.merk__tabelle tbody td { vertical-align: middle; }

/* Die Preiszellen heißen wie die Kennzahlen der Startseite (.zahl) und
   erbten deren Raster und Trennstrich. In der Tabelle wieder normale Zellen. */
@media (min-width: 761px) {
  .merk__tabelle td.zahl { display: table-cell; border-left: 0; }
}

/* =========================================================
   Teilebilder: KI-Symbolbild je Teileart (inc/start.php, produkt_bild)
   ========================================================= */

.karte__bild .ki-marke,
.detail__bild .ki-marke { top: .6rem; left: .6rem; right: auto; }

/* Noch kein Bild: neutraler Platzhalter mit "Foto folgt" */
.ki-marke--folgt { border-style: dashed; }
.karte__bild--platzhalter img,
.detail__bild--platzhalter img { mix-blend-mode: normal; opacity: .9; }

.detail__bild { position: relative; margin: 0; }
.detail__bild img { width: 100%; height: auto; }
.detail__symbolhinweis {
  margin: 1rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid #e3e5e7;
  color: #5d6368;
  font-size: .8rem;
  line-height: 1.5;
}

/* Produktblatt (eigene KI-Darstellung des Teils, 3:2 auf dunklem Grund).
   Ganz gezeigt, die Ränder oben und unten gehen in den dunklen Grund über. */
.karte__bild--blatt { background: #0d0e0f; padding: 0; }
.karte__bild--blatt img { object-fit: contain; mix-blend-mode: normal; }
.raster--liste .karte__bild--blatt { padding: 0; }

.detail__bild--blatt {
  padding: 0;
  background: #0d0e0f;
  border-color: transparent;
  overflow: hidden;
}
.detail__bild--blatt a { display: block; cursor: zoom-in; }
.detail__bild--blatt img { display: block; }
.detail__bild--blatt .detail__symbolhinweis {
  margin: 0;
  padding: .8rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .62);
}

/* Heller Modus: helle Fassung der Blätter (assets/js/seite.js tauscht das Bild),
   Grund in der Randfarbe der hellen Bühne, damit beides nahtlos ineinander übergeht. */
:root[data-theme="hell"] .karte__bild--blatt,
:root[data-theme="hell"] .detail__bild--blatt { background: #f5f5f4; }
:root[data-theme="hell"] .detail__bild--blatt { border-color: var(--linie); }
:root[data-theme="hell"] .detail__bild--blatt .detail__symbolhinweis {
  border-top-color: var(--linie);
  color: var(--text-leise);
}

.blaetter__anzahl { margin: .6rem 0 1.4rem; font-size: .9rem; color: var(--text-still); }

/* =========================================================
   Ausführungen eines Modells (katalog.php), z. B. 360 Modena / Spider
   ========================================================= */

.ausfuehrungen { margin: 0 0 2rem; }
.ausfuehrungen .hut { margin-bottom: .8rem; }

.ausfuehrungen__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: .7rem;
}

.ausfuehrung {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--buehne-bild) center 100% / auto 135% no-repeat, var(--kachel-unten);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--uebergang), transform .3s ease, box-shadow .3s ease;
}
.ausfuehrung:hover { border-color: var(--silber-tief); transform: translateY(-2px); box-shadow: 0 10px 24px var(--schatten-gross); }
.ausfuehrung.ist-aktiv { border-color: var(--rot); box-shadow: inset 0 -3px 0 var(--rot); }

.ausfuehrung__bild {
  display: block;
  aspect-ratio: 16 / 7;
  padding: .7rem .8rem 0;
}
.ausfuehrung__bild img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45));
}

.ausfuehrung__text {
  display: grid;
  gap: .1rem;
  padding: .5rem .8rem .7rem;
}
.ausfuehrung__text strong { font-size: .86rem; font-weight: 700; letter-spacing: .04em; line-height: 1.25; }
.ausfuehrung__text small { color: var(--text-still); font-size: .74rem; }

.ausfuehrung .ki-marke { top: .4rem; right: .4rem; font-size: .56rem; padding: .05rem .3rem; }

@media (max-width: 520px) {
  .ausfuehrungen__liste { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   Teileliste: Kachel- oder Listenansicht (katalog.php, seite.js)
   ========================================================= */

.kat-leiste__rechts { display: flex; align-items: center; gap: 1.2rem; }

.ansicht-wahl {
  display: flex;
  gap: .25rem;
  padding: .2rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
}

.ansicht-wahl__knopf {
  display: grid;
  place-items: center;
  width: 34px; height: 30px;
  border-radius: 4px;
  color: var(--text-still);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--uebergang), color var(--uebergang);
}
.ansicht-wahl__knopf svg { width: 17px; height: 17px; fill: currentColor; }
.ansicht-wahl__knopf:hover { color: var(--text); background: var(--grund-tief); }
.ansicht-wahl__knopf.ist-aktiv { background: var(--rot); color: #fff; }

/* Listenansicht: aus jeder Kachel wird eine Zeile */
.raster--liste { grid-template-columns: 1fr; gap: .5rem; }

.raster--liste .karte { flex-direction: row; align-items: stretch; }

.raster--liste .karte__bild {
  flex: 0 0 clamp(96px, 16vw, 140px);
  aspect-ratio: 1;
  padding: .5rem;
}

.raster--liste .karte__text {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.4rem;
  padding: .9rem 4rem .9rem 1.2rem;
}
.raster--liste .karte__titel { flex: 1 1 15rem; margin: 0; }
.raster--liste .karte__unter { flex: 1 1 11rem; margin: 0; }
.raster--liste .karte__fuss {
  margin: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.raster--liste .karte__fuss .preis { margin-top: 0 !important; }
.raster--liste .preis__zweit,
.raster--liste .preis__ab { margin: 0; }

/* Merkknopf mittig an den rechten Rand der Zeile */
.raster--liste .karte__merken { top: 50%; transform: translateY(-50%); right: .8rem; }

/* Rote Linie beim Überfahren passt in der Zeile nicht, Rahmen genügt */
.raster--liste .karte-huelle .karte::after { display: none; }
.raster--liste .karte-huelle:hover > a.karte { transform: none; }

@media (max-width: 760px) {
  .kat-leiste__rechts { width: 100%; justify-content: space-between; }
  .raster--liste .karte__text { padding: .7rem 3.2rem .7rem .9rem; gap: .3rem .9rem; }
  .raster--liste .karte__titel { flex: 1 1 100%; font-size: .94rem; }
  .raster--liste .karte__unter { flex: 1 1 100%; font-size: .78rem; }
  .raster--liste .karte__fuss { gap: .8rem; }
  .raster--liste .etikett { display: none; }
}

/* Listenansicht: kleines Bildfeld, darum kompaktes Etikett */
.raster--liste .ki-marke {
  top: .3rem; left: .3rem; right: auto;
  font-size: .5rem;
  letter-spacing: .02em;
  padding: .05rem .25rem;
  max-width: calc(100% - .6rem);
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 760px) {
  /* Listenansicht auf dem Handy: Preis in eine eigene Zeile, nichts abschneiden */
  .raster--liste .karte__fuss { flex: 1 1 100%; flex-wrap: wrap; gap: .2rem .8rem; }
  .raster--liste .preis { flex-wrap: wrap; }
  .raster--liste .preis__zweit { font-size: .74rem; }
}

/* =========================================================
   Exclusive (exclusive.php). Der Aufbau nutzt die Klassen der
   Verfahrensseite (.sb, .schrittfolge, .schritt-reihe).
   ========================================================= */

.exclusive-teile__anzahl { margin: .6rem 0 1.4rem; font-size: .9rem; color: var(--text-still); }

/* Neuteile eines Modells: Brotkrume zurück zur Modellübersicht */
.exclusive-teile .krumen { padding: 0 0 1.2rem; }
.exclusive-teile .krumen [aria-current] { color: var(--text); margin: 0; opacity: 1; }
.exclusive-teile__zurueck { margin-top: 2.4rem; }

/* Platzhalter, solange für einen Schritt noch kein Bild existiert */
.schritt-reihe__platzhalter {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1px dashed var(--linie);
  border-radius: var(--radius);
  background: var(--grund-tief);
  color: var(--text-still);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}


/* ==========================================================================
   Startseite nach Kundenentwurf (26.10.2026, index.php, Klassen b2 · v2 · d2 · leistung · band2;
   die Teilesuche nutzt die vorhandenen Fahrzeugkacheln .parade/.kachelraster)
   Bühne und Abschlussband bleiben immer dunkel, die Abschnitte dazwischen folgen dem Modus.
   Serifenschrift nur für große Überschriften. Solange keine eigene Schrift unter assets/schrift/
   liegt, wird Georgia genommen (keine Google Fonts, Datenschutz).
   ========================================================================== */
:root { --schrift-serif: Georgia, "Times New Roman", serif; }

/* 1  Bühne */
.b2 {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 92vh; min-height: 92svh;
  display: flex; align-items: center;
  background: #0d0e0f; color: #fff;
}
.b2__bild { position: absolute; inset: 0; z-index: -1; }
.b2__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.b2__bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,11,12,.94) 0%, rgba(10,11,12,.78) 38%, rgba(10,11,12,.18) 70%, rgba(10,11,12,0) 100%);
}
.b2__ki { position: absolute; right: 1rem; bottom: 1rem; }
.b2__ki .ki-marke { position: static; }
.b2__innen { padding-block: calc(var(--kopf-hoehe, 78px) + 4rem) 4rem; }
.b2__hut { font-size: .78rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--rot-auf-foto, #f0383c); margin: 0 0 1.2rem; }
.b2__titel {
  font-family: var(--schrift-serif); font-weight: 700;
  font-size: clamp(2.2rem, 5.4vw, 4.6rem); line-height: 1.06; margin: 0 0 1.3rem; max-width: 22ch;
  text-transform: none; letter-spacing: -.01em;
}
.b2__titel em { font-style: normal; color: var(--rot-auf-foto, #f0383c); }
.b2__lead { max-width: 40ch; color: rgba(255,255,255,.84); font-size: 1.15rem; line-height: 1.5; margin: 0 0 2rem; }
.b2__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.8rem; }
.b2__link { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.45); padding-bottom: .2rem; }
.b2__link:hover, .b2__link:focus-visible { border-color: #fff; }
.b2__marke {
  display: flex; align-items: center; gap: .9rem; margin: 4.5rem 0 0;
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.62);
}
.b2__marke strong { color: #fff; letter-spacing: .3em; }
.b2__marke span { border-left: 1px solid rgba(255,255,255,.3); padding-left: .9rem; }
.b2__marke::after { content: ""; width: 5rem; height: 1px; background: rgba(255,255,255,.3); }

@media (max-width: 760px) {
  .b2 { align-items: flex-start; min-height: 100svh; }
  .b2__bild img { object-position: 62% 100%; }
  .b2__bild::after { background: linear-gradient(180deg, rgba(10,11,12,.95) 0%, rgba(10,11,12,.82) 48%, rgba(10,11,12,.12) 78%); }
  .b2__innen { padding-block: calc(var(--kopf-hoehe, 64px) + 2.5rem) 2rem; }
  .b2__marke { margin-top: 2.5rem; letter-spacing: .2em; }
  .b2__marke span { white-space: nowrap; }
  .b2__marke::after { display: none; }
}

/* Abschnitte zwischen Bühne und Band liegen gemeinsam in .start-mitte: ein durchgehender
   dunkler Grund mit weichen roten Lichtern im Wechsel links / Mitte / rechts, ohne Kanten
   an den Abschnittsgrenzen (im hellen Modus nur ein Hauch Rot, --start-glut) */
.seite-start--neu { --start-glut: rgba(212, 18, 22, .24); }
:root[data-theme="hell"] .seite-start--neu { --start-glut: rgba(212, 18, 22, .09); }
.start-mitte {
  background:
    linear-gradient(180deg, var(--grund-tief) 0, transparent 260px),          /* oben und unten ohne Rot, */
    linear-gradient(0deg,   var(--grund-tief) 0, transparent 260px),          /* damit Bühne und Band nahtlos anschließen */
    radial-gradient(1100px 900px at -8% 14%,  var(--start-glut), transparent 70%),
    radial-gradient(1300px 700px at 50% 38%,  var(--start-glut), transparent 70%),
    radial-gradient(1100px 900px at 108% 60%, var(--start-glut), transparent 70%),
    radial-gradient(1100px 900px at -8% 84%,  var(--start-glut), transparent 70%),
    var(--grund-tief);
}
.start-mitte > section { background: none; border-block: 0; }

/* Weiche Übergänge: Bühne läuft unten in den Grund aus, das Band beginnt oben aus ihm */
.b2::after, .band2::before {
  content: ""; position: absolute; left: 0; right: 0; height: clamp(80px, 12vw, 160px);
  pointer-events: none; z-index: 0;
}
.b2::after     { bottom: 0; background: linear-gradient(180deg, transparent, var(--grund-tief)); }
.band2::before { top: 0;    background: linear-gradient(0deg, transparent, var(--grund-tief)); }
.b2__innen, .band2__innen { position: relative; z-index: 1; }
.b2__ki { z-index: 1; }

/* 4  Exclusive: Text links, Bild rechts */
.ex2__innen { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.ex2__text .knopf { margin-top: 1.6rem; }
.ex2__schritte { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.ex2__schritte li {
  display: flex; align-items: center; gap: .5rem; padding: .45rem .8rem;
  border: 1px solid var(--linie); border-radius: 999px; font-size: .9rem; color: var(--text);
}
.ex2__schritte span { font-size: .75rem; letter-spacing: .12em; color: var(--rot-hell); }
.ex2__anzahl { margin: 1.2rem 0 0; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); }
.ex2__bild { position: relative; margin: 0; border-radius: 14px; overflow: hidden; }
.ex2__bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.ex2__bild .ki-marke { top: auto; left: auto; right: .7rem; bottom: .7rem; }
@media (max-width: 960px) {
  .ex2__innen { grid-template-columns: 1fr; }
}

/* Vorher/Nachher mit Softlack-Problem: Text unter den Bildern, links Probleme, rechts Lösung */
.v2__lead { max-width: 60ch; }
.v2__unter { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 3px; margin-top: 1.6rem; align-items: start; }
/* Probleme sachlich als Punkte, ohne rote Kreuze (Wunsch Nutzer: wirkt sonst zu negativ) */
.v2__punkte { list-style: none; margin: 0; padding: 0 0 0 1rem; display: grid; gap: .55rem; color: var(--text-leise); }
.v2__punkte li { position: relative; padding-left: 1.1rem; }
.v2__punkte li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%;
  background: var(--silber-tief);
}
.v2__unter .betont { margin: 0 0 0 1rem; }
@media (max-width: 560px) {
  .v2__unter { grid-template-columns: 1fr; }
  .v2__unter .betont { margin-left: 0; }
}

/* Überschriften der neuen Startseite: Serifenschrift, normale Schreibweise */
.seite-start--neu .gross {
  font-family: var(--schrift-serif); font-weight: 700; text-transform: none; letter-spacing: -.01em;
  font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.12;
}

/* 2  Vorher/Nachher */
.v2__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-top: 2rem; border-radius: 14px; overflow: hidden; background: var(--linie); }
.v2__bild { position: relative; margin: 0; }
.v2__bild img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.v2__marke {
  position: absolute; top: 1rem; padding: .35rem .8rem; border-radius: 6px;
  font-size: .9rem; color: #fff; background: rgba(28,30,32,.86);
}
.v2__bild--vorher  .v2__marke { left: 1rem; }
.v2__bild--nachher .v2__marke { right: 1rem; background: var(--rot); }
.v2__bild .ki-marke { top: auto; left: auto; right: .7rem; bottom: .7rem; }
@media (max-width: 560px) { .v2__paar { grid-template-columns: 1fr; } }

/* 4  Präzision bis ins Detail */
.d2__lead { max-width: 52ch; }
.d2__liste { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 2.5rem; }
.leistung { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; max-width: 64rem; }
.leistung__bild { position: relative; margin: 0; border-radius: 10px; overflow: hidden; }
.leistung__bild img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.leistung__bild .ki-marke { top: auto; left: auto; right: .7rem; bottom: .7rem; }
.leistung__nr { display: flex; align-items: center; gap: .8rem; font-size: .85rem; letter-spacing: .2em; color: var(--rot); }
.leistung__nr::after { content: ""; flex: 1; max-width: 16rem; height: 1px; background: var(--linie); }
.leistung__symbol { display: block; width: 36px; height: 36px; margin: 1rem 0 .5rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.leistung h3 { font-size: 1.45rem; margin: .2rem 0 .6rem; }
@media (max-width: 760px) {
  .leistung { grid-template-columns: 1fr; gap: 1.2rem; }
}

/* 5  Abschlussband */
.band2 { position: relative; isolation: isolate; overflow: hidden; background: #0d0e0f; color: #fff; }
.band2__bild { position: absolute; inset: 0; z-index: -1; }
.band2__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.band2__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,9,10,.9) 0%, rgba(8,9,10,.6) 55%, rgba(8,9,10,.25) 100%); }
.band2__innen { padding-block: clamp(4rem, 8vw, 6.5rem); display: grid; justify-items: start; gap: 1.6rem; }
.band2__titel { font-family: var(--schrift-serif); font-weight: 700; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.12; margin: 0; max-width: 18ch; color: #fff; }


/* ---------- Komplettaufbereitung (Kasten auf der Modellseite, inc/komplett.php) ---------- */
.komplett {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem 3rem; align-items: center;
  margin: 0 0 2.2rem; padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--linie); border-radius: 14px;
  background: radial-gradient(90% 140% at 100% 100%, var(--buehne-glanz), transparent 70%), var(--flaeche);
}
.komplett .hut { margin-bottom: .6rem; }
.komplett__titel { font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.2; margin: 0 0 .6rem; color: var(--text-stark); }
.komplett__text .leise { margin: 0; max-width: 52ch; }
.komplett__preis { display: grid; gap: .35rem; justify-items: start; }
.komplett__preis p { margin: 0; }
.komplett__anzahl { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); }
.komplett__summe { font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 700; color: var(--text-stark); line-height: 1.1; }
.komplett__summe small { font-size: .8rem; font-weight: 400; color: var(--text-leise); }
.komplett__netto { font-size: .9rem; color: var(--text-leise); }
.komplett__preis form { margin-top: .8rem; }
.komplett__klein { font-size: .8rem; color: var(--text-still); max-width: 42ch; margin-top: .4rem !important; }

.komplett__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.komplett__liste a {
  display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: baseline;
  padding: .75rem 1rem; border: 1px solid var(--linie); border-radius: 10px;
  color: var(--text); text-decoration: none; background: var(--grund);
  transition: border-color var(--uebergang);
}
.komplett__liste a:hover, .komplett__liste a:focus-visible { border-color: var(--rot); }
.komplett__liste span { color: var(--text-leise); font-size: .9rem; }
.komplett__liste .komplett__liste-preis { color: var(--text-stark); font-weight: 700; }

@media (max-width: 760px) {
  .komplett { grid-template-columns: 1fr; }
  .komplett__preis form, .komplett__preis .knopf { width: 100%; justify-content: center; }
  .komplett__liste a { grid-template-columns: 1fr auto; }
  .komplett__liste a span:not(.komplett__liste-preis) { grid-column: 1; grid-row: 2; }
}


/* Fenster „Welche Ausführung?“ der Komplettaufbereitung */
.komplett-wahl {
  width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto;
  padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--linie); border-radius: 14px;
  background: var(--flaeche); color: var(--text); box-shadow: 0 24px 60px var(--schatten-gross);
}
.komplett-wahl::backdrop { background: rgba(0, 0, 0, .6); }
.komplett-wahl__titel { font-size: 1.4rem; margin: 0 0 .5rem; color: var(--text-stark); }
.komplett-wahl .leise { margin: 0 0 1.2rem; font-size: .95rem; }
.komplett-wahl__gruppe { border: 0; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .5rem; }
.komplett-wahl__gruppe legend { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rot-hell); margin-bottom: .5rem; }
.komplett-wahl__option {
  display: grid; grid-template-columns: auto 72px 1fr auto; gap: .9rem; align-items: center;
  padding: .6rem .9rem; border: 1px solid var(--linie); border-radius: 10px; cursor: pointer;
  background: var(--grund); transition: border-color var(--uebergang);
}
.komplett-wahl__option:hover { border-color: var(--text-leise); }
.komplett-wahl__option:has(input:checked) { border-color: var(--rot); box-shadow: inset 0 0 0 1px var(--rot); }
.komplett-wahl__option input { accent-color: var(--rot); width: 1.1rem; height: 1.1rem; }
.komplett-wahl__bild { width: 72px; aspect-ratio: 3 / 2; border-radius: 6px; overflow: hidden; background: var(--grund-tief); }
.komplett-wahl__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.komplett-wahl__name { display: grid; gap: .15rem; }
.komplett-wahl__name small { color: var(--text-leise); font-size: .78rem; }
.komplett-wahl__preis { font-weight: 700; color: var(--text-stark); white-space: nowrap; }
.komplett-wahl__knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .4rem; }
@media (max-width: 560px) {
  .komplett-wahl__option { grid-template-columns: auto 56px 1fr; }
  .komplett-wahl__bild { width: 56px; }
  .komplett-wahl__preis { grid-column: 3; }
}


/* Merkzettel: Knopf „Liste kopieren“ unter „Liste anfragen“ */
.merk__kopierzeile { display: flex; gap: .6rem; margin-top: .6rem; }
.merk__kopieren { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: .6rem; }
.merk-geteilt {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1.4rem;
  padding: 1rem 1.2rem; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche);
}
.merk-geteilt p { flex: 1 1 100%; margin: 0 0 .2rem; }
@media print { .merk__kopieren, .merk-geteilt { display: none !important; } }
.merk-kopie {
  width: min(44rem, calc(100vw - 2rem)); padding: 1.2rem; border: 1px solid var(--linie); border-radius: 12px;
  background: var(--flaeche); color: var(--text); display: grid; gap: .8rem;
}
.merk-kopie::backdrop { background: rgba(0, 0, 0, .6); }
.merk-kopie textarea {
  width: 100%; min-height: 16rem; resize: vertical; font: .85rem/1.5 ui-monospace, Consolas, monospace;
  color: var(--text); background: var(--grund); border: 1px solid var(--linie); border-radius: 8px; padding: .8rem;
}
.merk-kopie .knopf { justify-self: end; }