/* ==========================================================================
   VOWEGA — SITE (alle Sektionen unterhalb des Heros + alle Unterseiten)
   Setzt auf hero.css auf (Tokens, Fonts, Nav, FABs, .roll-Maske bleiben dort).
   Motion: „Rollen statt Springen" — --ease cubic-bezier(.34,.06,.12,1)
   Geschmack-Skill: design-taste-frontend — klar, seriös, ehrlich, kein Luxus-Pomp.
   ========================================================================== */

/* ---------- Token-Erweiterung (bau-brief §2.2, hero.css nicht anfassen) --- */
:root {
  --display-s: clamp(2.4rem, 5.6vw, 5.25rem);
  --h2: clamp(2rem, 3.4vw, 3.25rem);
  --h3: clamp(1.375rem, 1.8vw, 1.75rem);
  --body-gross: clamp(1.25rem, 1.4vw, 1.4375rem);
  --datenwert: clamp(1.5rem, 2.2vw, 2.25rem);
}

/* ==========================================================================
   KORREKTUR #1 (KRITISCH) — Nav-Kontrast auf hellen Unterseiten-Köpfen
   marken.html + ueber-uns.html liefen bislang mit .kopf--kreide (helle
   Bühne), aber die Nav-Farben aus hero.css sind fuer die DUNKLE Video-Buehne
   gebaut (--kreide-Text + text-shadow) — auf Kreide-Grund war das 1.00:1.
   .kopf--hell ergaenzt dieselbe Bühne um lesbare Nav-Farben, gemessen:
   --petrol-tief auf --kreide ≈ 12,5:1 (WCAG AAA), weit ueber dem 4.5:1-Soll.
   ========================================================================== */
.kopf--hell .nav__links a {
  color: var(--petrol-tief);
  text-shadow: none;
}
.kopf--hell .nav__links a::after {
  background: var(--petrol);
}
.kopf--hell .nav__schalter {
  color: var(--petrol-tief);
  text-shadow: none;
}
.kopf--hell .nav__balken,
.kopf--hell .nav__balken::before,
.kopf--hell .nav__balken::after {
  background: var(--petrol-tief);
}

/* ==========================================================================
   KORREKTUR #13 — Logo-Träger als gestaltete Tafel/Plakette statt nacktem
   weißem Kasten (Nav + Footer). Logo selbst bleibt unveraendert (§0e-24).
   ========================================================================== */
.nav__marke {
  border: 1px solid var(--linie-1);
  border-bottom: 2px solid var(--petrol);
  padding: 10px 18px 8px;
}
.fusszeile__marke-tafel {
  display: inline-block;
  background: var(--papier);
  padding: 14px 20px 12px;
  border: 1px solid rgba(242, 240, 233, 0.18);
  border-bottom: 2px solid var(--gruen);
  margin-bottom: 1.25rem;
}
.fusszeile__marke-tafel img {
  display: block;
  height: auto;
  width: 180px;
}

/* ==========================================================================
   KORREKTUR #14 — 171 Inline-styles mit echten Layout-Entscheidungen
   (min-height, background, padding, font-size, max-height) → Klassen.
   ========================================================================== */
.fusszeile--flush {
  margin-top: 0;
}
.fusszeile--luft {
  margin-top: 4rem;
}
/* Sitewide-Utilities für die häufigsten wiederkehrenden Inline-Muster
   (Links in Fließtext auf --petrol-tief, gedämpfte Meta-Zeilen, Abstände) */
.u-petrol {
  color: var(--petrol-tief);
}
.u-still {
  color: var(--ink-still);
}
.u-mt-1 {
  margin-top: 1rem;
}
.u-mt-1-5 {
  margin-top: 1.5rem;
}
/* S5 „größtes Bild des Builds" (86vh) */
.buehne--xl {
  min-height: 86vh;
}
.buehne--xl .buehne__inner {
  min-height: 70vh;
}
.buehne__ware--podest img {
  max-height: 52vh;
}
/* Tempo--statisch (No-JS/reduced-motion-Fallback): Farben waren 22×
   inline gesetzt statt über die statisch gescopte Klasse. */
.tempo--statisch .tempo__stufe--eintrag,
.tempo--statisch .tempo__titel {
  color: var(--ink);
}
.tempo--statisch .tempo__zahl {
  color: var(--petrol-tief);
}
.tempo--statisch .tempo__zahl small {
  color: var(--petrol);
}
.tempo--statisch .tempo__richtwert {
  color: var(--ink-still);
}
.tempo--statisch .tempo__richtwert .buehne__link {
  color: var(--petrol-tief);
}
/* Kundenstimmen-Kopfzeile: Sterne-SVG-Wrapper */
.stimmen__sterne {
  display: inline-flex;
  width: 118px;
  color: var(--petrol);
}
/* Rhythmus-Karte als Klassen statt 100+ individueller margin-top-Inlines —
   die Werte selbst kommen unveraendert aus bau-brief §2.3/§4. */
.mt-2 {
  margin-top: 2rem;
}
.mt-3 {
  margin-top: 3rem;
}
.mt-4 {
  margin-top: 4rem;
}
.mt-5 {
  margin-top: 5rem;
}
.mt-6 {
  margin-top: 6rem;
}
.mt-9 {
  margin-top: 9rem;
}
.mt-10 {
  margin-top: 10rem;
}
.mt-11 {
  margin-top: 11rem;
}
.mt-12 {
  margin-top: 12rem;
}
.mt-13 {
  margin-top: 13rem;
}
.mt-14 {
  margin-top: 14rem;
}
.mt-16 {
  margin-top: 16rem;
}
.mt-17 {
  margin-top: 17rem;
}
/* Sektions-Varianten, die bisher inline zusammengesetzt wurden */
.kapitel--papier {
  background: var(--papier);
}
.kapitel--hairline {
  border-top: 1px solid var(--linie-1);
  border-bottom: 1px solid var(--linie-1);
}
.buehne__ware--h40 img {
  max-height: 40vh;
}
.buehne__ware--h42 img {
  max-height: 42vh;
}
.testurteil-zeile--kompakt {
  font-size: 1.0625rem;
  margin-top: 1.25rem;
}
.buehne__link--block {
  display: inline-flex;
  margin-top: 1rem;
}
.marken__hinweis {
  margin-top: clamp(28px, 4vh, 40px);
  padding-bottom: clamp(48px, 8vh, 84px);
  max-width: 60ch;
  color: var(--ink-still);
}
/* Abschluss-Band (beratung.html + kontakt.html) */
.abschluss-band {
  background: var(--petrol-nacht);
  color: var(--kreide);
  padding-block: clamp(48px, 7vh, 84px);
}
.abschluss-band__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.abschluss-band__titel {
  margin: 0;
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: var(--h2);
  max-width: 20ch;
}

/* ==========================================================================
   KORREKTUR #12 — FAB-Stapel (fixed, unten rechts) kollidiert mit Inhalt:
   Direktdraht-Band, Skalen-Label „80–120 KM/H", Footer-Metazeile.
   Rechten Schutzabstand reservieren, dort wo die FABs wirklich schweben.
   ========================================================================== */
@media (min-width: 901px) {
  .direktdraht__inner {
    padding-right: 104px;
  }
  .tempo__nav {
    right: max(var(--rand), 104px);
  }
  .fusszeile__unten {
    padding-right: 104px;
  }
}

/* ---------- Utilities --------------------------------------------------- */
.wrap {
  max-width: var(--inhalt);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.kilometerstein {
  display: inline-block;
  flex: 0 0 auto;
  width: 3px;
  height: 22px;
  background: var(--petrol);
}
.kilometerstein--hell {
  background: var(--kreide);
}
main {
  display: block;
  overflow-x: clip;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Buttons — :active-Feedback sitewide (emil-design-eng: nie ohne Press-State) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 14px 30px;
  font: inherit;
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    transform 0.16s var(--ease),
    background-color 0.18s var(--ease),
    border-color 0.18s var(--ease);
}
.btn:active {
  transform: scale(0.97);
}
.btn--primaer {
  background: var(--gruen);
  color: var(--ink);
}
.btn--primaer:hover,
.btn--primaer:focus-visible {
  background: var(--gruen-tief);
}
.btn--ghost {
  background: transparent;
  color: var(--petrol-tief);
  border-color: var(--linie-2);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--petrol);
  background: rgba(21, 119, 155, 0.06);
}
.btn--hell {
  background: transparent;
  color: var(--kreide);
  border-color: var(--linie-nacht-2);
}
.btn--hell:hover,
.btn--hell:focus-visible {
  border-color: var(--petrol-licht);
  background: rgba(46, 147, 184, 0.14);
}

/* ==========================================================================
   REVEAL-SYSTEM — „Rollen statt Springen", sitewide (emil: transform/opacity)
   .einrollen nutzt dieselbe --roll-Maske wie der Hero (hero.css @property --roll)
   ========================================================================== */
.einrollen {
  --roll: -8%;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0,
    #000 var(--roll),
    transparent calc(var(--roll) + 40px)
  );
  mask-image: linear-gradient(
    90deg,
    #000 0,
    #000 var(--roll),
    transparent calc(var(--roll) + 40px)
  );
  transform: translateX(-24px);
  opacity: 0.001;
  transition:
    transform 0.72s var(--ease),
    opacity 0.5s var(--ease);
}
.einrollen.ist-sichtbar {
  --roll: 112%;
  transform: translateX(0);
  opacity: 1;
  transition:
    transform 0.72s var(--ease),
    opacity 0.5s var(--ease),
    -webkit-mask-image 0.72s var(--ease);
}
.stagger > * {
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* Sanfteres Auftauchen (kein gerichteter Zug) für Fließtext-Blöcke */
.auftauchen {
  opacity: 0.001;
  transform: translateY(14px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
}
.auftauchen.ist-sichtbar {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .einrollen,
  .auftauchen {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

/* ==========================================================================
   S1 · TRUST-LEISTE „Seit 2013"
   ========================================================================== */
.trust-leiste {
  position: relative;
  z-index: 1;
  margin-top: 3rem;
  padding-block: 2.4rem;
  border-top: 1px solid var(--linie-1);
  border-bottom: 1px solid var(--linie-1);
}
.trust-leiste__reihe {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.trust-leiste__item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex: 1 1 200px;
}
.trust-leiste__wert {
  font-size: var(--datenwert);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--petrol-tief);
  white-space: nowrap;
}
.trust-leiste__label {
  font-size: 0.9375rem;
  color: var(--ink-still);
  line-height: 1.3;
}

/* ==========================================================================
   ⭐ S2 · TEMPO-SKALA (Signature, Choreo A: Scrub-Sequenz)
   220vh-Container, sticky 100vh-Bühne, 5 Geschwindigkeitsklassen.
   Bedienbar: Scroll + Klick + Tastatur (BFSG). Regelbasierter Kaufberater.
   ========================================================================== */
.tempo {
  position: relative;
  margin-top: 15rem;
  height: 620vh; /* 5 Stufen × ~124vh Verweildauer je Stufe + Bühne */
}
.tempo__frage {
  position: relative;
  z-index: 2;
  padding-inline: var(--rand);
  max-width: var(--inhalt);
  margin-inline: auto;
  margin-bottom: 2.5rem;
}
/* KORREKTUR #10a — Layout-Bruch 1: Freisteller ragt −6rem in die
   Trust-Leiste hinein (Blueprint S1/S2). Rein dekorativ, kein Einfluss auf
   die Scrub-Hoehenmathematik in site.js (position:absolute). */
.tempo__bruch {
  position: absolute;
  top: -6rem;
  right: clamp(20px, 6vw, 100px);
  z-index: 3;
  width: clamp(120px, 13vw, 210px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 20px 26px rgba(10, 37, 48, 0.3));
}
@media (max-width: 900px) {
  .tempo__bruch {
    display: none;
  }
}
.tempo__frage h2 {
  margin: 0;
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--display-s);
  line-height: 0.98;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.tempo__buehne {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  background: var(--petrol-nacht);
  display: flex;
  align-items: center;
}
.tempo__licht {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 70% at 18% 30%,
    rgba(46, 147, 184, 0.28),
    transparent 60%
  );
  pointer-events: none;
}
.tempo__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--inhalt);
  margin-inline: auto;
  padding-inline: var(--rand);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
}
.tempo__stufen {
  position: relative;
  min-height: clamp(360px, 46vh, 480px);
}
.tempo__stufe {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(28px);
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease);
  pointer-events: none;
}
.tempo__stufe.ist-aktiv {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.tempo__zahl {
  display: block;
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(4rem, 9vw, 7.5rem);
  line-height: 0.86;
  letter-spacing: -0.03em;
  color: var(--kreide);
  font-variant-numeric: tabular-nums;
}
.tempo__zahl small {
  font-size: 0.28em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--petrol-licht);
  margin-left: 0.25em;
}
.tempo__titel {
  margin: 0.5rem 0 1.25rem;
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--h3);
  color: var(--kreide);
}
.tempo__werte {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.tempo__werte li {
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
  border-top: 1px solid var(--linie-nacht-1);
  padding-top: 0.65rem;
  font-size: 1.0625rem;
  color: rgba(242, 240, 233, 0.92);
}
.tempo__werte strong {
  flex: 0 0 auto;
  min-width: 9.5rem;
  font-weight: 600;
  color: var(--kreide);
  letter-spacing: 0.01em;
}
.tempo__werte span {
  color: rgba(242, 240, 233, 0.72);
}
.tempo__richtwert {
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
  color: rgba(242, 240, 233, 0.58);
}
.tempo__bild {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(320px, 44vh, 460px);
}
.tempo__bild img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 92%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.94) translateY(10px);
  transition:
    opacity 0.55s var(--ease),
    transform 0.55s var(--ease);
}
.tempo__bild img.ist-aktiv {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.tempo__bild::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 6%;
  height: 6%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 42% 50%,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.18) 45%,
    transparent 72%
  );
  filter: blur(8px);
}
.tempo__nav {
  position: absolute;
  z-index: 3;
  left: var(--rand);
  right: var(--rand);
  bottom: clamp(18px, 4vh, 40px);
  max-width: var(--inhalt);
  margin-inline: auto;
  display: flex;
  gap: 8px;
}
.tempo__dot {
  flex: 1 1 0;
  min-height: 46px;
  padding: 8px 4px;
  background: transparent;
  border: 0;
  border-top: 3px solid var(--linie-nacht-2);
  color: rgba(242, 240, 233, 0.6);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.18s var(--ease),
    color 0.18s var(--ease);
}
.tempo__dot:hover,
.tempo__dot:focus-visible {
  color: var(--kreide);
}
.tempo__dot.ist-aktiv {
  border-top-color: var(--gruen);
  color: var(--kreide);
}
.tempo__cta {
  margin-top: 0.25rem;
}

/* Statische Ersatzliste ohne Motion (prefers-reduced-motion + JS-frei) */
.tempo--statisch {
  height: auto;
}
.tempo--statisch .tempo__buehne {
  position: static;
  height: auto;
  display: block;
  padding-block: clamp(32px, 6vh, 64px) clamp(48px, 8vh, 88px);
}
.tempo--statisch .tempo__inner {
  display: block;
}
.tempo--statisch .tempo__stufen {
  min-height: 0;
}
.tempo--statisch .tempo__stufe {
  position: static;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  padding-block: 2.25rem;
  border-top: 1px solid var(--linie-nacht-1);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
}
.tempo--statisch .tempo__bild {
  display: none;
}
.tempo__stufe--eintrag {
  min-height: 0;
}
.js .tempo--statisch {
  display: none;
}
.tempo--js-nur {
  display: none;
}
.js .tempo--js-nur {
  display: block;
  /* Der sticky Bühne-Kind braucht einen Elternhöhen-Kontext über die volle
     620vh-Scrub-Strecke, sonst "entstickt" er nach der eigenen Höhe (100vh). */
  height: 100%;
}
/* KORREKTUR #10b — Layout-Bruch 2: die ⭐-Skala läuft randabfallend über
   beide Seitenränder, statt wie jede andere Sektion an --inhalt (1360px)
   zu enden. Nur die JS-Bühne bricht das Raster; die reduced-motion/No-JS-
   Fallback-Liste (.tempo--statisch, kombiniert mit .wrap) bleibt im
   normalen, sicheren Grid. */
.tempo--js-nur .tempo__inner {
  max-width: none;
  padding-inline: clamp(28px, 5vw, 100px);
}
@media (max-width: 900px) {
  .js .tempo--js-nur {
    height: auto;
  }
}

@media (max-width: 900px) {
  .tempo {
    height: auto;
  }
  .tempo__buehne {
    position: static;
    height: auto;
    padding-block: clamp(32px, 6vh, 56px) clamp(56px, 10vh, 96px);
  }
  .tempo__inner {
    grid-template-columns: 1fr;
  }
  .tempo__stufen {
    position: static;
    min-height: 0;
  }
  .tempo__stufe {
    position: static;
    opacity: 1;
    transform: none;
    display: none;
    pointer-events: auto;
  }
  .tempo__stufe.ist-aktiv {
    display: block;
  }
  .tempo__bild {
    order: -1;
    min-height: 260px;
    margin-bottom: 1rem;
  }
  .tempo__bild img {
    position: static;
    max-width: 78%;
    opacity: 1;
    transform: none;
  }
  .tempo__nav {
    position: static;
    margin-top: 1.25rem;
  }
}

/* ==========================================================================
   SCHAUFENSTER-BAHN — System für index S3–S5 UND sortiment.html-Kapitel
   Choreo B: gerichteter clip-path-Roll-Reveal (.einrollen)
   Choreo C: gegenläufiger Parallax (.buehne__ware / .buehne__grund)
   ========================================================================== */
.buehne {
  position: relative;
  overflow: clip;
  background: var(--kreide);
  padding-block: clamp(56px, 8vh, 96px);
}
.buehne--petrol {
  background: var(--petrol-nacht);
  color: var(--kreide);
  border-top: 2px solid var(--petrol-licht);
}
.buehne__boden {
  position: absolute;
  inset: auto 0 0 0;
  height: 16%;
  background: url("../textur/asphaltband-2000.webp") center/cover;
  mix-blend-mode: multiply;
  opacity: 0.55;
  pointer-events: none;
}
.buehne--petrol .buehne__boden {
  display: none;
}
.buehne__inner {
  position: relative;
  z-index: 1;
  max-width: var(--inhalt);
  margin-inline: auto;
  padding-inline: var(--rand);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  min-height: clamp(320px, 44vh, 560px);
}
.buehne--rechts .buehne__inner {
  grid-template-columns: 0.85fr 1.15fr;
}
.buehne--rechts .buehne__ware {
  order: 2;
}
.buehne--rechts .buehne__text {
  order: 1;
}
.buehne__ware {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(260px, 38vh, 460px);
  will-change: transform;
}
.buehne__ware img {
  max-width: 100%;
  max-height: 46vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.buehne__ware::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 2%;
  height: 4.5%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 42% 50%,
    rgba(12, 46, 60, 0.34) 0%,
    rgba(12, 46, 60, 0.16) 45%,
    transparent 72%
  );
  filter: blur(6px);
}
.buehne--petrol .buehne__ware::after {
  background: radial-gradient(
    ellipse at 42% 50%,
    rgba(0, 0, 0, 0.42) 0%,
    rgba(0, 0, 0, 0.2) 45%,
    transparent 72%
  );
}
/* Podest für sehr helle Fahrzeuge auf Kreide (Kontur-Fix statt Petrol-Zwang) */
.buehne__ware--podest::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 4%;
  height: 62%;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(10, 37, 48, 0.16) 0%,
    transparent 70%
  );
}
.buehne__marke {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-still);
}
.buehne--petrol .buehne__marke {
  color: rgba(242, 240, 233, 0.62);
}
.buehne__zahl-auftakt {
  display: block;
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 6.5vw, 5.25rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin: 0 0 0.35em;
}
.buehne__zahl-auftakt small {
  font-size: 0.32em;
  font-weight: 600;
  margin-left: 0.2em;
  color: var(--petrol-licht);
}
.buehne__titel {
  margin: 0 0 0.9rem;
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--h2);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.buehne--petrol .buehne__titel {
  color: var(--kreide);
}
.buehne__lead {
  margin: 0 0 1.5rem;
  font-size: var(--body-gross);
  max-width: 42ch;
  color: var(--ink-still);
}
.buehne--petrol .buehne__lead {
  color: rgba(242, 240, 233, 0.82);
}
.buehne__werte {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
}
.buehne__werte li {
  border-top: 1px solid var(--linie-1);
  padding-top: 0.6rem;
}
.buehne--petrol .buehne__werte li {
  border-top-color: var(--linie-nacht-1);
}
.buehne__werte strong {
  display: block;
  font-size: var(--datenwert);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.buehne__werte span {
  font-size: 0.875rem;
  color: var(--ink-still);
}
.buehne--petrol .buehne__werte span {
  color: rgba(242, 240, 233, 0.62);
}
.buehne__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  color: var(--petrol-tief);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.buehne--petrol .buehne__link,
.tempo__stufe .buehne__link {
  color: var(--kreide);
}

@media (max-width: 900px) {
  .buehne__inner,
  .buehne--rechts .buehne__inner {
    grid-template-columns: 1fr;
  }
  .buehne--rechts .buehne__ware,
  .buehne--rechts .buehne__text {
    order: initial;
  }
  .buehne__werte {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   S6 · „Beratung ist der Unterschied" (Display-Statement, Layout-Bruch 3,
   Choreo D: SplitText-Zeilenreveal — .zeile-reveal .line stagger)
   ========================================================================== */
.statement {
  position: relative;
  margin-top: 6rem;
  padding-top: clamp(48px, 8vh, 88px);
}
/* KORREKTUR #10c — Layout-Bruch 3: das Display-Statement wird von der
   Petrol-Kante buchstaeblich HALBIERT. Statt eines unzuverlaessigen
   Prozent-Inset (46% der ganzen Sektion, driftet mit jedem Copy-Aenderung)
   sitzt die Kante exakt auf der Grundlinie zwischen Zeile 1 und Zeile 2 des
   2-zeiligen Statements — Zeile 1 "Beratung ist" bleibt auf Kreide, Zeile 2
   "der Unterschied." faellt auf die Petrol-Flaeche (Zeilenfarbe unten). */
.statement__flaeche {
  position: absolute;
  inset: auto 0 0 0;
  top: calc(clamp(48px, 8vh, 88px) + (var(--display-s) * 0.98));
  background: var(--petrol-nacht);
  z-index: 0;
}
.statement__inner {
  position: relative;
  z-index: 1;
  max-width: var(--inhalt);
  margin-inline: auto;
  padding-inline: var(--rand);
}
/* SplitText-Zeilenreveal: .zeile-reveal .line rollt gestaffelt ein (stagger) */
.zeile-reveal {
  margin: 0 0 clamp(28px, 5vh, 48px);
  max-width: 100%;
}
.zeile-reveal .line {
  display: block;
  overflow: clip;
  white-space: nowrap;
}
.zeile-reveal .line span {
  display: block;
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--display-s);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink);
  transform: translateY(100%);
  transition: transform 0.72s var(--ease);
  transition-delay: calc(var(--zi, 0) * 90ms);
}
.zeile-reveal.ist-sichtbar .line span {
  transform: translateY(0);
}
/* Zeile 2 faellt auf die Petrol-Flaeche (s.o.) — braucht helle Schrift,
   sonst dunkler Ink auf dunklem Petrol = unlesbar. */
.statement__inner .zeile-reveal .line:nth-child(2) span {
  color: var(--kreide);
}

/* KORREKTUR #8 — „Beratung ist der Unterschied": drei GLEICH breite Spalten
   mit drei IDENTISCHEN Ghost-Buttons waren das verbotene Drei-Karten-Muster
   (§0b). Jetzt Hairline-Zeilen wie im Brief vorgesehen: eine Reihe pro Weg,
   Label · Text · CTA nebeneinander, durch Haarlinien getrennt statt Karten. */
.statement__wege {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(48px, 8vh, 88px);
  border-top: 1px solid var(--linie-nacht-1);
}
.statement__weg {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr auto;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding-block: clamp(22px, 3.4vh, 34px);
  border-bottom: 1px solid var(--linie-nacht-1);
  color: var(--kreide);
}
.statement__weg h3 {
  margin: 0;
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: var(--h3);
  font-weight: 700;
}
.statement__weg p {
  margin: 0;
  font-size: 1rem;
  max-width: 46ch;
  color: rgba(242, 240, 233, 0.76);
}
@media (max-width: 780px) {
  .statement__weg {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .statement__weg .btn {
    justify-self: start;
    margin-top: 0.25rem;
  }
}

/* ==========================================================================
   S7 · MARKEN-REGISTER (§0e-24 Logos unverändert)
   ========================================================================== */
.marken {
  margin-top: 17rem;
  padding-block: clamp(48px, 7vh, 80px);
}
.marken__kopf {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-bottom: clamp(28px, 4vh, 44px);
}
.marken__kopf h2 {
  margin: 0;
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--h2);
}
/* KORREKTUR #4 + #5 — festes Grid (kein flex-wrap), sechs Marken passend
   zur „Sechs Marken"-Aussage sitewide (Vmoto + Super Soco laufen als
   Klartext unter Hammer International statt als Logo-Waisen), gleiche
   Trägerbox je Logo, Klartextzeile je Marke. Explizite Spalten, kein
   auto-fit (§0b Nr. 1 bleibt bei genau 1× auf sortiment.html). */
.marken-register {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vh, 44px) clamp(24px, 3vw, 48px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.marken-register__item {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  border-top: 1px solid var(--linie-1);
  padding-top: 1.25rem;
}
.buehne--petrol .marken-register__item {
  border-top-color: var(--linie-nacht-1);
}
.marken-register__logo {
  display: flex;
  align-items: center;
  height: 56px;
}
.marken-register__logo img {
  max-height: 52px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.marken-register__klartext {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-still);
}
@media (max-width: 900px) {
  .marken-register {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .marken-register {
    grid-template-columns: 1fr;
  }
}
.testurteil-zeile {
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
  margin: clamp(28px, 4vh, 40px) 0 0;
  font-size: 1.1875rem;
  color: var(--ink-still);
  max-width: 60ch;
}
.testurteil-zeile strong {
  color: var(--ink);
}

/* ==========================================================================
   S8 · KUNDENSTIMMEN (Trustedshops, editoriale Zeilen)
   ========================================================================== */
.stimmen {
  margin-top: 4rem;
  padding-block: clamp(48px, 7vh, 80px);
  background: var(--papier);
  border-top: 1px solid var(--linie-1);
  border-bottom: 1px solid var(--linie-1);
}
.stimmen__quelle {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-still);
  margin: 0 0 clamp(24px, 3.5vh, 36px);
}
.stimmen__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.stimmen__item {
  padding-block: clamp(20px, 3vh, 30px);
  border-top: 1px solid var(--linie-1);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 2rem;
  align-items: start;
}
.stimmen__item:last-child {
  border-bottom: 1px solid var(--linie-1);
}
.stimmen__text {
  margin: 0;
  font-size: 1.3125rem;
  line-height: 1.5;
  max-width: 62ch;
}
.stimmen__meta {
  white-space: nowrap;
  font-size: 0.875rem;
  color: var(--ink-still);
  text-align: right;
}
@media (max-width: 700px) {
  .stimmen__item {
    grid-template-columns: 1fr;
  }
  .stimmen__meta {
    text-align: left;
  }
}

/* ==========================================================================
   S9 · „SICHER KAUFEN" (Hairline-Register + sachlicher Fakeshop-Hinweis)
   ========================================================================== */
.sicher {
  margin-top: 9rem;
  padding-block: clamp(40px, 6vh, 64px);
}
.sicher__reihe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  background: var(--linie-1);
  margin-bottom: clamp(24px, 3.5vh, 36px);
}
.sicher__zelle {
  background: var(--kreide);
  padding: 1.25rem 0.25rem 0 0;
  min-height: 96px;
}
.sicher__zelle h3 {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  margin: 0 0 0.4rem;
  font-size: 1rem;
  font-weight: 600;
}
.sicher__zelle p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink-still);
}
.hinweis-sachlich {
  display: flex;
  gap: 1rem;
  border: 1px solid var(--petrol);
  padding: 1.25rem 1.5rem;
  max-width: 70ch;
}
.hinweis-sachlich p {
  margin: 0;
  font-size: 1rem;
}
@media (max-width: 700px) {
  .sicher__reihe {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   FOOTER (S10)
   ========================================================================== */
.fusszeile {
  margin-top: 3rem;
  background: var(--petrol-nacht);
  color: var(--kreide);
  padding-block: clamp(56px, 8vh, 88px) clamp(28px, 4vh, 44px);
}
.fusszeile__grid {
  max-width: var(--inhalt);
  margin-inline: auto;
  padding-inline: var(--rand);
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(28px, 4vh, 44px);
  border-bottom: 1px solid var(--linie-nacht-1);
}
.fusszeile__marke img {
  background: var(--papier);
  padding: 12px 18px;
  height: auto;
  width: 180px;
  margin-bottom: 1.25rem;
}
.fusszeile__marke p {
  max-width: 34ch;
  color: rgba(242, 240, 233, 0.7);
  font-size: 0.9375rem;
}
.fusszeile__hotline {
  display: block;
  margin: 1rem 0;
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 2.25rem;
  letter-spacing: -0.01em;
  color: var(--kreide);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.fusszeile h3 {
  margin: 0 0 1.1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 240, 233, 0.62);
}
.fusszeile ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.fusszeile a {
  color: var(--kreide);
  text-decoration: none;
  font-size: 0.9375rem;
}
.fusszeile a:hover {
  color: var(--petrol-licht);
}
.fusszeile__unten {
  max-width: var(--inhalt);
  margin-inline: auto;
  padding-inline: var(--rand);
  padding-top: clamp(20px, 3vh, 30px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8125rem;
  color: rgba(242, 240, 233, 0.5);
  padding-bottom: 132px; /* FAB-Freiraum, §0e-12 */
}
@media (max-width: 900px) {
  .fusszeile__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .fusszeile__grid {
    grid-template-columns: 1fr;
  }
  .fusszeile__hotline {
    font-size: 1.75rem;
  }
}

/* ==========================================================================
   UNTERSEITEN-KOPF (.kopf) — ersetzt bei Subpages den Video-Hero
   Strukturell identisch zum Hero-Muster: <video> unsichtbar bis Datei existiert,
   sichtbar ist die echte Produkt-Bühne (Schaufenster-Bahn-Grammatik).
   ========================================================================== */
.kopf {
  position: relative;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: clip;
  background: var(--kreide);
  isolation: isolate;
}
.kopf--petrol {
  background: var(--petrol-nacht);
}
.kopf__buehne {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
}
.kopf__boden {
  position: absolute;
  inset: auto 0 0 0;
  height: 20%;
  background: url("../textur/asphaltband-2000.webp") center/cover;
  mix-blend-mode: multiply;
  opacity: 0.5;
}
.kopf--petrol .kopf__boden {
  display: none;
}
.kopf__licht {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 55% 60% at 82% 30%,
    rgba(46, 147, 184, 0.22),
    transparent 62%
  );
  pointer-events: none;
}
.kopf--kreide .kopf__licht {
  background: radial-gradient(
    ellipse 55% 60% at 82% 25%,
    rgba(21, 119, 155, 0.1),
    transparent 62%
  );
}
.kopf__ware {
  position: absolute;
  right: clamp(0px, 4vw, 60px);
  bottom: 8%;
  width: min(52%, 640px);
  display: grid;
  place-items: end center;
}
.kopf__ware img {
  max-width: 100%;
  max-height: 58vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.kopf__ware::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0%;
  height: 6%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 42% 50%,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.16) 45%,
    transparent 72%
  );
  filter: blur(8px);
}
.kopf__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.kopf__video.is-spielt {
  opacity: 1;
}
.kopf__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(10, 37, 48, 0.2) 0%,
    rgba(10, 37, 48, 0) 46%
  );
}
.kopf--kreide .kopf__scrim {
  background: linear-gradient(
    to right,
    rgba(242, 240, 233, 0.35) 0%,
    rgba(242, 240, 233, 0) 44%
  );
}
.kopf__body {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--inhalt);
  margin-inline: auto;
  padding-inline: var(--rand);
  padding-bottom: clamp(40px, 7vh, 84px);
  max-width: min(var(--inhalt), 100%);
}
.kopf__body-inner {
  max-width: min(46%, 30rem);
}
@media (min-width: 1400px) {
  .kopf__body-inner {
    max-width: min(50%, 34rem);
  }
}
.kopf__marke {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 240, 233, 0.7);
}
.kopf--kreide .kopf__marke {
  color: var(--ink-still);
}
.kopf__h1 {
  margin: 0;
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.75rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: var(--kreide);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
.kopf--kreide .kopf__h1 {
  color: var(--ink);
}
.kopf__lead {
  margin: 1.1rem 0 0;
  max-width: 46ch;
  font-size: var(--lead);
  color: rgba(242, 240, 233, 0.86);
}
.kopf--kreide .kopf__lead {
  color: var(--ink-still);
}
.kopf__cta {
  margin-top: 1.75rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
@media (max-width: 900px) {
  .kopf {
    min-height: 92vh;
  }
  .kopf__ware {
    width: 78%;
    right: 50%;
    transform: translateX(50%);
    bottom: 36%;
  }
  .kopf__body-inner {
    max-width: 100%;
  }
  .kopf__scrim,
  .kopf--kreide .kopf__scrim {
    background: linear-gradient(
      to top,
      rgba(10, 37, 48, 0.86) 0%,
      rgba(10, 37, 48, 0.2) 40%,
      rgba(10, 37, 48, 0) 60%
    );
  }
  .kopf--kreide .kopf__scrim {
    background: linear-gradient(
      to top,
      rgba(242, 240, 233, 0.94) 0%,
      rgba(242, 240, 233, 0.35) 40%,
      rgba(242, 240, 233, 0) 60%
    );
  }
}

/* ==========================================================================
   KORREKTUR #9 — Unterseiten-Köpfe: 5× identische Komposition
   (Kilometerstein+Eyebrow, H1 links, Lead, Bild rechts, 78vh) war das
   Skelett-Symptom. Jede Seite bekommt jetzt spürbar andere Bildposition,
   Kopfhöhe und Bildgröße. Nur ab 901px aktiv — die Mobil-Komposition aus
   hero.css (zentriert, 92vh) bleibt sitewide einheitlich und unangetastet.
   ========================================================================== */
@media (min-width: 901px) {
  /* sortiment.html — größte Bühne des Sortiments, Bild rechts, groß */
  .kopf--sortiment {
    min-height: 86vh;
  }
  .kopf--sortiment .kopf__ware {
    width: min(58%, 700px);
  }

  /* marken.html — Bild LINKS, kompakter Kopf (kürzeste Bühne im Satz) */
  .kopf--marken {
    min-height: 70vh;
  }
  .kopf--marken .kopf__ware {
    left: clamp(0px, 4vw, 60px);
    right: auto;
    width: min(44%, 480px);
  }
  .kopf--marken .kopf__body-inner {
    margin-left: auto;
    margin-right: 0;
  }
  .kopf--marken .kopf__scrim {
    background: linear-gradient(
      to left,
      rgba(242, 240, 233, 0.4) 0%,
      rgba(242, 240, 233, 0) 46%
    );
  }

  /* beratung.html — Bild MITTIG-unten, Text rückt nach OBEN (statt unten) */
  .kopf--beratung {
    min-height: 80vh;
    justify-content: flex-start;
  }
  .kopf--beratung .kopf__body {
    padding-top: clamp(112px, 15vh, 168px);
    padding-bottom: 0;
  }
  .kopf--beratung .kopf__ware {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 0;
    width: min(50%, 560px);
  }
  .kopf--beratung .kopf__scrim {
    background:
      linear-gradient(
        to top,
        rgba(10, 37, 48, 0.9) 0%,
        rgba(10, 37, 48, 0.5) 22%,
        rgba(10, 37, 48, 0) 46%
      ),
      linear-gradient(
        to bottom,
        rgba(10, 37, 48, 0.7) 0%,
        rgba(10, 37, 48, 0) 30%
      );
  }

  /* ueber-uns.html — kürzester, ruhigster Kopf, kleines Bild */
  .kopf--ueber-uns {
    min-height: 66vh;
  }
  .kopf--ueber-uns .kopf__ware {
    width: min(38%, 420px);
  }

  /* kontakt.html — Bild LINKS, mittelgroß */
  .kopf--kontakt {
    min-height: 74vh;
  }
  .kopf--kontakt .kopf__ware {
    left: clamp(0px, 4vw, 60px);
    right: auto;
    width: min(50%, 560px);
  }
  .kopf--kontakt .kopf__body-inner {
    margin-left: auto;
    margin-right: 0;
  }
  .kopf--kontakt .kopf__scrim {
    background: linear-gradient(
      to left,
      rgba(10, 37, 48, 0.74) 0%,
      rgba(10, 37, 48, 0.34) 32%,
      rgba(10, 37, 48, 0) 62%
    );
  }
}

/* ==========================================================================
   KORREKTUR #11 — Leerzonen (250–350px), die auch nach den Layout-Brüchen
   noch leer wirkten: sanfte Brücken statt totem Weißraum.
   ========================================================================== */
/* beratung.html: Zeitachse → Kaufberater (16rem Rhythmus-Bruch ist laut
   Brief gewollt, §4-Tabelle) — die Wegstrecken-Linie läuft aus, statt hart
   abzureißen (passt zum Kilometerstein-Vokabular der Seite). */
.zeitachse {
  position: relative;
}
.zeitachse::after {
  content: "";
  position: absolute;
  left: -2px;
  bottom: 0;
  width: 2px;
  height: 140px;
  transform: translateY(100%);
  background: linear-gradient(to bottom, var(--linie-2), transparent);
}
/* Footer-FAB-Freiraum etwas gestrafft (war 132px reine Leere) — 96px
   reicht für den 64px-FAB + 20px-Abstand + Puffer, wirkt weniger leer. */
.fusszeile__unten {
  padding-bottom: 96px;
}

/* ==========================================================================
   NATIVE SCROLL-DRIVEN WEGSTRECKEN-HAIRLINE (Choreo, sitewide dünn genutzt)
   ========================================================================== */
.strecke {
  position: relative;
  height: 3px;
  background: var(--linie-1);
  margin-block: 0;
}
.strecke__balken {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--petrol);
}
@supports (animation-timeline: scroll()) {
  .strecke__balken {
    animation: strecke-wachsen linear;
    animation-timeline: scroll(root block);
  }
}
@keyframes strecke-wachsen {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ==========================================================================
   KAPITEL-KOPF für Unterseiten-Sektionen (statt Eyebrow→H2→Lead-Wiederholung)
   ========================================================================== */
.kapitel {
  padding-block: clamp(48px, 7vh, 84px);
}
.kapitel__marginalie {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-still);
}
.kapitel__titel {
  margin: 0 0 1.25rem;
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--h2);
  line-height: 1.06;
  letter-spacing: -0.015em;
  max-width: 22ch;
}
.kapitel__lead {
  margin: 0;
  font-size: var(--body-gross);
  max-width: 58ch;
  color: var(--ink-still);
}

/* ==========================================================================
   ZEITACHSE (beratung.html) — Kilometerstein-Achse, ungleiche Blöcke
   ========================================================================== */
.zeitachse {
  position: relative;
  padding-left: clamp(24px, 4vw, 46px);
  border-left: 2px solid var(--linie-2);
}
.zeitachse__schritt {
  position: relative;
  padding-block: clamp(20px, 3vh, 32px);
}
.zeitachse__schritt::before {
  content: "";
  position: absolute;
  left: clamp(-27px, -4.4vw, -49px);
  top: clamp(24px, 3.5vh, 36px);
  width: 3px;
  height: 22px;
  background: var(--petrol);
}
.zeitachse__schritt h3 {
  margin: 0 0 0.5rem;
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: var(--h3);
  font-weight: 700;
}
.zeitachse__schritt p {
  margin: 0;
  max-width: 56ch;
  color: var(--ink-still);
  font-size: var(--body-gross);
}
.zeitachse__schritt--gross {
  padding-block: clamp(32px, 5vh, 52px);
}
.zeitachse__schritt--gross h3 {
  font-size: var(--h2);
}

/* ==========================================================================
   FAQ-ACCORDION (Hairline-Frageregister) — origin-aware, keine Sprünge
   ========================================================================== */
.faq {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linie-1);
}
.faq__item {
  border-bottom: 1px solid var(--linie-1);
}
.faq__frage {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
  padding-block: 1.1rem;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: var(--h3);
  font-weight: 600;
  color: var(--ink);
}
.faq__plus {
  flex: 0 0 auto;
  position: relative;
  width: 22px;
  height: 22px;
}
.faq__plus::before,
.faq__plus::after {
  content: "";
  position: absolute;
  background: var(--petrol);
  transition: transform 0.22s var(--ease);
}
.faq__plus::before {
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}
.faq__plus::after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}
.faq__item[data-offen] .faq__plus::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}
.faq__antwort {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease);
}
.faq__antwort-inner {
  overflow: hidden;
}
.faq__antwort-inner p {
  margin: 0 0 1.5rem;
  max-width: 62ch;
  font-size: var(--body-gross);
  color: var(--ink-still);
}
.faq__item[data-offen] .faq__antwort {
  grid-template-rows: 1fr;
}

/* ==========================================================================
   KAUFBERATER — echter regelbasierter Kaufberater (kein Fake-KI-Chat)
   4 Fragen → 1–2 Kategorien + Kontaktweg. Andockpunkt für späteren KI-Chat.
   ========================================================================== */
.berater {
  background: var(--papier);
  border: 1px solid var(--linie-2);
  padding: clamp(24px, 4vw, 44px);
}
.berater__label {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-still);
}
.berater__frage {
  margin-bottom: clamp(20px, 3vh, 32px);
}
.berater__frage-titel {
  display: block;
  margin: 0 0 0.9rem;
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
}
.berater__optionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.berater__option {
  min-height: 56px;
  padding: 10px 20px;
  background: var(--kreide);
  border: 1px solid var(--linie-2);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.16s var(--ease),
    background-color 0.18s var(--ease),
    border-color 0.18s var(--ease);
}
.berater__option:active {
  transform: scale(0.97);
}
.berater__option[aria-pressed="true"] {
  background: var(--gruen);
  border-color: var(--gruen);
  color: var(--ink);
}
.berater__ergebnis {
  margin-top: clamp(20px, 3vh, 32px);
  padding-top: clamp(20px, 3vh, 32px);
  border-top: 1px solid var(--linie-2);
  display: none;
}
.berater__ergebnis[data-sichtbar] {
  display: block;
}
.berater__ergebnis h3 {
  margin: 0 0 0.6rem;
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: var(--h3);
}
.berater__ergebnis p {
  margin: 0 0 1.25rem;
  color: var(--ink-still);
  max-width: 56ch;
}
.berater__ergebnis-wege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.berater__hinweis {
  margin: 1.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--ink-still);
}

/* ==========================================================================
   FORMULARE (Rückruf / Probefahrt) — 5-Felder-Maximum, Label sichtbar
   ========================================================================== */
.formular {
  display: grid;
  gap: 1.25rem;
  max-width: 640px;
}
.formular__feld {
  display: grid;
  gap: 0.4rem;
}
.formular__feld label {
  font-size: 0.9375rem;
  font-weight: 600;
}
.formular__feld input,
.formular__feld select,
.formular__feld textarea {
  min-height: 56px;
  padding: 12px 16px;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--papier);
  border: 1px solid var(--linie-2);
  border-radius: 0;
}
.formular__feld textarea {
  min-height: 120px;
  resize: vertical;
}
.formular__feld input:focus-visible,
.formular__feld select:focus-visible,
.formular__feld textarea:focus-visible {
  outline: 3px solid var(--gruen);
  outline-offset: 1px;
}
.formular__hinweis {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-still);
}
.formular__einwilligung {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: var(--ink-still);
}
.formular__einwilligung input {
  margin-top: 0.3rem;
}
.formular__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.formular__status {
  min-height: 1.2em;
  font-size: 0.9375rem;
  font-weight: 600;
}
.formular__status[data-ok] {
  color: var(--gruen-tief);
}
.formular__status[data-fehler] {
  color: var(--petrol-tief);
}

/* ==========================================================================
   ANFAHRT-SVG (kontakt.html) — statt Maps-iframe (DSGVO + Stil)
   ========================================================================== */
.anfahrt {
  position: relative;
  background: var(--petrol-nacht);
  aspect-ratio: 16/9;
  overflow: clip;
}
.anfahrt svg {
  width: 100%;
  height: 100%;
  display: block;
}
.anfahrt__route {
  fill: none;
  stroke: var(--petrol-licht);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  transition: stroke-dashoffset 1.8s var(--ease);
}
.anfahrt.ist-sichtbar .anfahrt__route {
  stroke-dashoffset: 0;
}
.anfahrt__punkt {
  fill: var(--gruen);
}
.anfahrt__label {
  font-family: "Source Sans 3", sans-serif;
  font-size: 13px;
  font-weight: 600;
  fill: var(--kreide);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   RECHTSKOPF — schmale dunkle Nav-Leiste ohne Video (§4 bau-brief: bewusst
   ohne Video, aber im Design; Nav bleibt hell-auf-dunkel wie überall sonst)
   ========================================================================== */
.rechtskopf {
  position: relative;
  height: var(--nav-h);
  background: var(--petrol-nacht);
}
.rechtskopf .nav {
  position: static;
}

/* ==========================================================================
   RECHTS-/SERVICE-SEITEN — ruhige Lesetypo
   ========================================================================== */
.rechtstext {
  max-width: 74ch;
  margin: 0 auto;
  padding-block: clamp(56px, 9vh, 108px) clamp(80px, 12vh, 160px);
  padding-inline: var(--rand);
}
.rechtstext h1 {
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
}
.rechtstext__stand {
  margin: 0 0 3rem;
  font-size: 0.9375rem;
  color: var(--ink-still);
}
.rechtstext h2 {
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.625rem;
  margin: 2.75rem 0 1rem;
}
.rechtstext h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  margin: 1.75rem 0 0.6rem;
}
.rechtstext p,
.rechtstext li {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
}
.rechtstext p {
  margin: 0 0 1.1rem;
}
.rechtstext ul {
  margin: 0 0 1.1rem;
  padding-left: 1.4rem;
}
.rechtstext a {
  color: var(--petrol-tief);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rechtstext__kopf {
  background: var(--kreide);
  padding-block: clamp(28px, 6vh, 40px) 0;
  padding-inline: var(--rand);
}
.rechtstext__nav {
  padding-inline: var(--rand);
  max-width: 74ch;
  margin: 0 auto;
  padding-top: clamp(96px, 14vh, 140px);
}
.rechtstext__nav a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-still);
  text-decoration: none;
}
.rechtstext__nav a:hover {
  color: var(--petrol-tief);
}

/* ==========================================================================
   MOBIL-KORREKTUREN 390px (§0e-19)
   ========================================================================== */
@media (max-width: 640px) {
  .buehne__zahl-auftakt,
  .tempo__zahl {
    font-size: clamp(2.75rem, 13vw, 4rem);
  }
  .zeile-reveal .line {
    white-space: normal;
  }
  .zeile-reveal .line span {
    font-size: clamp(1.75rem, 7.4vw, 2.75rem);
  }
  .kapitel__titel {
    max-width: 100%;
  }
  .kopf__body-inner {
    max-width: 100%;
  }
}

/* ==========================================================================
   PREMIUM-AUFWERTUNG — Hamada-Korrektur 06.08.2026
   Befund: "die Bilder sieht man dass die geschnitten wurden, die Seite sieht
   schlecht aus". Ursachen: (a) Freisteller mit Studio-Schattenresten
   [in den Assets behoben], (b) Ware schwebt ohne Bühne, (c) weißer Logo-Kasten
   im Kopf, (d) grelle Signalflächen, (e) zu viel Leere zwischen den Szenen.
   ========================================================================== */

/* --- 1 · Wortmarke statt weißem Logo-Kasten ------------------------------- */
.nav__marke {
  display: grid;
  gap: 2px;
  background: none;
  padding: 0;
  box-shadow: none;
  text-decoration: none;
  line-height: 1;
}
.nav__wort {
  font-family: var(--display, "Familjen Grotesk"), system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  letter-spacing: -0.015em;
  color: var(--kreide);
  text-transform: none;
}
.nav__tld {
  color: var(--gruen);
  font-weight: 600;
}
.nav__sub {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242, 240, 233, 0.62);
}
.kopf--kreide .nav__wort,
.rechtskopf .nav__wort {
  color: var(--ink);
}
.kopf--kreide .nav__sub,
.rechtskopf .nav__sub {
  color: var(--ink-still);
}
.nav__marke:hover .nav__tld {
  color: var(--kreide);
}
.kopf--kreide .nav__marke:hover .nav__tld,
.rechtskopf .nav__marke:hover .nav__tld {
  color: var(--petrol);
}

/* --- 2 · Signalflächen entschärfen ---------------------------------------- */
:root {
  --gruen-flaeche: #3c8b2c; /* Logo-Grün, aber flächentauglich (nicht grell) */
  --buehne-schatten: rgba(4, 20, 27, 0.5);
}
.fab {
  background: rgba(242, 240, 233, 0.94);
  color: var(--petrol-tief);
  box-shadow:
    0 10px 30px rgba(4, 20, 27, 0.42),
    inset 0 0 0 1px rgba(10, 37, 48, 0.1);
  backdrop-filter: blur(6px);
}
.fab:hover {
  background: var(--gruen);
  color: var(--ink);
}
.fab--stumm {
  background: rgba(242, 240, 233, 0.8);
}

/* --- 3 · Bühne: Ware steht, statt zu schweben ----------------------------- */
.buehne__inner {
  align-items: end;
  padding-block: clamp(56px, 7vw, 104px);
  min-height: clamp(420px, 56vh, 660px);
}
.buehne__text {
  align-self: center;
}
.buehne__ware {
  align-self: end;
  min-height: clamp(300px, 44vh, 520px);
  align-items: end;
}
.buehne__ware img {
  max-height: 52vh;
  filter: drop-shadow(0 26px 42px rgba(4, 20, 27, 0.34));
  -webkit-box-reflect: below 0
    linear-gradient(transparent 68%, rgba(255, 255, 255, 0.13));
}
.buehne--petrol .buehne__ware img,
.buehne--nacht .buehne__ware img {
  filter: drop-shadow(0 30px 46px rgba(0, 0, 0, 0.6));
}
/* Kontaktschatten: breite, sehr weiche Ellipse direkt unter der Ware */
.buehne__ware::after {
  left: 4%;
  right: 4%;
  bottom: -1.5%;
  height: 9%;
  filter: blur(17px);
  background: radial-gradient(
    ellipse at 50% 50%,
    var(--buehne-schatten) 0%,
    rgba(4, 20, 27, 0.22) 42%,
    transparent 74%
  );
}
.buehne--petrol .buehne__ware::after {
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.26) 44%,
    transparent 74%
  );
}
/* Lichtkegel hinter der Ware — gibt der Bühne Tiefe statt flacher Fläche */
.buehne__ware::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 92%;
  aspect-ratio: 1.35;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at 50% 62%,
    rgba(46, 147, 184, 0.17) 0%,
    rgba(46, 147, 184, 0.06) 38%,
    transparent 68%
  );
  pointer-events: none;
  z-index: -1;
}
.buehne--kreide .buehne__ware::before,
.buehne--hell .buehne__ware::before {
  background: radial-gradient(
    ellipse at 50% 62%,
    rgba(10, 37, 48, 0.09) 0%,
    transparent 66%
  );
}

/* --- 4 · Helle Bühne für helle Ware (Kabinenroller, weißer Studiogrund) ---
   Der weiße Kabinenroller lässt sich nicht sauber freistellen (Karosserie =
   Hintergrundfarbe). Statt eines zerfetzten Ausschnitts läuft das Bild hier
   weich in die helle Sektionsfläche aus. */
.ware--verlauf img {
  -webkit-box-reflect: none;
  filter: none;
  -webkit-mask-image: radial-gradient(
    ellipse 76% 74% at 50% 46%,
    #000 58%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 76% 74% at 50% 46%,
    #000 58%,
    transparent 100%
  );
}
.ware--verlauf::after,
.ware--verlauf::before {
  display: none;
}

/* --- 5 · Studio-Tafel: weißes Herstellerfoto als bewusstes Element --------
   Auf dunklem Grund wird aus dem nicht freistellbaren Studio-Foto eine
   Datenblatt-Tafel — ehrlich statt vorgetäuschter Freisteller. */
.ware--tafel {
  padding: clamp(18px, 2.4vw, 34px);
  background: var(--papier);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(10, 37, 48, 0.16);
}
.ware--tafel img {
  filter: none;
  -webkit-box-reflect: none;
  mix-blend-mode: multiply;
}
.ware--tafel::after,
.ware--tafel::before {
  display: none;
}

/* --- 6 · Hero-Feinschliff ------------------------------------------------- */
/* Der Direktdraht war eine grelle Signalfläche über die halbe Breite. Grün
   bleibt der Akzent, wird aber flächentauglich gedeckt und schmaler. */
.weg--primaer {
  background: var(--gruen-flaeche);
  color: var(--kreide);
}
.weg--primaer .weg__label {
  color: rgba(242, 240, 233, 0.78);
}
.weg--primaer:hover,
.weg--primaer:focus-visible {
  background: var(--gruen);
  color: var(--ink);
}
/* Headline darf die Ware nicht überfahren: Textspalte begrenzen + Verlauf,
   der die linke Bildhälfte beruhigt (Lesbarkeit statt Matsch). */
.hero__body-inner,
.hero__body > * {
  max-width: min(58ch, 62%);
}
.hero__scrim {
  background:
    linear-gradient(
      100deg,
      rgba(6, 26, 34, 0.9) 0%,
      rgba(6, 26, 34, 0.72) 34%,
      rgba(6, 26, 34, 0.18) 62%,
      rgba(6, 26, 34, 0.34) 100%
    ),
    linear-gradient(
      to top,
      rgba(6, 26, 34, 0.82) 0%,
      transparent 42%
    );
}
@media (max-width: 900px) {
  .hero__body-inner,
  .hero__body > * {
    max-width: 100%;
  }
}
/* Ware nach rechts rücken, damit die Headline freie Fläche hat */
.hero__video,
.hero__poster {
  object-position: 68% center;
}
@media (max-width: 900px) {
  /* Hochformat schneidet ein 16:9-Video hart — Bildausschnitt so setzen,
     dass das Fahrzeug ganz im Bild steht statt angeschnitten zu wirken. */
  .hero__video,
  .hero__poster {
    object-position: center 64%;
    transform: none;
  }
}

/* --- 7 · Tempo-Skala straffen --------------------------------------------
   620vh Scroll für 5 Stufen ließen die Seite leer wirken (Hamada 06.08.:
   "die Seite sieht schlecht aus") — 5580px von 13332px Gesamthöhe hingen an
   einer einzigen gepinnten Szene. 5 × 78vh trägt dieselbe Dramaturgie in
   knapp der halben Strecke. */
.tempo {
  margin-top: clamp(6rem, 10vw, 9rem);
  height: 400vh;
}

/* --- 8 · Markenregister vereinheitlichen ---------------------------------
   Sechs Herstellerlogos in sechs Qualitäten, Farbwelten und optischen Größen
   ließen das Register unaufgeräumt wirken. Graustufig + gleiche optische Höhe
   macht daraus EINE Reihe; die Farbe kommt beim Hover zurück. */
.marken-register__logo {
  height: 46px;
}
.marken-register__logo img {
  max-height: 34px;
  filter: grayscale(1) contrast(1.08) opacity(0.66);
  transition:
    filter 0.24s var(--ease),
    transform 0.24s var(--ease);
}
.marken-register__item:hover .marken-register__logo img {
  filter: grayscale(0) contrast(1) opacity(1);
  transform: translateY(-2px);
}
/* Logos mit eigener Hintergrundfläche (Futura orange) optisch angleichen */
.marken-register__logo img[src*="futura"],
.marken-register__logo img[src*="hammer"] {
  max-height: 30px;
}

/* --- 9 · Kundenstimmen: Leitzitat + zweispaltiger Satz --------------------
   Vorher eine nüchterne Zeilenliste mit leerer rechter Hälfte ("dezent heißt
   nicht nackt"). Jetzt trägt das erste Zitat als Display-Moment, die übrigen
   laufen zweispaltig — dieselbe Substanz, echte Präsenz. */
@media (min-width: 901px) {
  .stimmen__liste {
    columns: 2;
    column-gap: clamp(40px, 4.5vw, 78px);
  }
  .stimmen__item {
    break-inside: avoid;
    display: block;
    padding-block: clamp(18px, 2.4vh, 26px);
  }
  .stimmen__item:first-child {
    column-span: all;
    border-top: 0;
    padding-block: 0 clamp(30px, 4vh, 48px);
    margin-bottom: clamp(24px, 3vh, 36px);
    border-bottom: 1px solid var(--linie-1);
  }
  .stimmen__item:first-child .stimmen__text {
    font-size: clamp(1.75rem, 2.9vw, 2.6rem);
    line-height: 1.24;
    letter-spacing: -0.015em;
    max-width: 24ch;
    font-weight: 500;
  }
  .stimmen__item:first-child .stimmen__meta {
    text-align: left;
    margin-top: 1.1rem;
  }
  .stimmen__item:last-child {
    border-bottom: 0;
  }
  .stimmen__meta {
    text-align: left;
    margin-top: 0.75rem;
    white-space: normal;
  }
  .stimmen__text {
    font-size: 1.125rem;
    max-width: 100%;
  }
}

/* --- 10 · Alte Logo-Tafel abräumen + Kopfboden entschärfen ---------------
   Die "Plakette" um das Logo war der weiße Kasten in neuer Form. Mit der
   Wortmarke braucht es keinen Träger mehr.
   Der Asphaltstreifen lief als hartkantiges graues Band quer durch die
   Kopfbilder und schnitt die Fahrzeuge auf Radhöhe ab. */
.nav .nav__marke,
.rechtskopf .nav__marke {
  border: 0;
  padding: 0;
  background: none;
}
.kopf__boden {
  height: 34%;
  opacity: 0.34;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.35) 58%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.35) 58%, transparent 100%);
}
.buehne__boden {
  height: 26%;
  opacity: 0.34;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.3) 62%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.3) 62%, transparent 100%);
}

/* --- 11 · Unterseiten-Köpfe: echte Bewegung ohne Video --------------------
   Die fünf Nav-Unterseiten hatten <video>-Tags auf Dateien, die nie erzeugt
   wurden (404 bei jedem Aufruf, Kopf stand still). Bis eigene Kopf-Clips da
   sind, bewegt sich der Kopf per Code: wandernder Lichtkegel + minimaler
   Ware-Drift. Kein Ken-Burns-Zoom (Anti-Push-in-Gesetz). */
.kopf__licht {
  animation: kopf-licht 17s var(--ease) infinite alternate;
}
@keyframes kopf-licht {
  from {
    transform: translate3d(-3.5%, 0, 0) scale(1.02);
    opacity: 0.82;
  }
  to {
    transform: translate3d(3.5%, -1.5%, 0) scale(1.06);
    opacity: 1;
  }
}
.kopf__ware {
  animation: kopf-ware 11s var(--ease) infinite alternate;
}
@keyframes kopf-ware {
  from {
    transform: translate3d(0, 0.9%, 0);
  }
  to {
    transform: translate3d(0, -0.9%, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .kopf__licht,
  .kopf__ware {
    animation: none;
  }
}

/* --- 12 · Helle Köpfe tragen jetzt ein dunkles Video ----------------------
   marken.html und ueber-uns.html waren auf Kreide gebaut (dunkle Schrift auf
   heller Fläche). Seit die Köpfe echte, nächtliche Clips zeigen, muss die
   Typo hell laufen — sonst steht dunkler Text auf dunklem Bild. */
.kopf--kreide:has(.kopf__video) {
  color: var(--kreide);
  background: var(--petrol-nacht);
}
.kopf--kreide:has(.kopf__video) .kopf__h1,
.kopf--kreide:has(.kopf__video) .kopf__lead,
.kopf--kreide:has(.kopf__video) .kopf__marke,
.kopf--kreide:has(.kopf__video) .nav__links a,
.kopf--kreide:has(.kopf__video) .nav__schalter,
.kopf--kreide:has(.kopf__video) .nav__wort {
  color: var(--kreide);
}
.kopf--kreide:has(.kopf__video) .kopf__lead {
  color: rgba(242, 240, 233, 0.86);
}
.kopf--kreide:has(.kopf__video) .nav__sub {
  color: rgba(242, 240, 233, 0.62);
}
.kopf--kreide:has(.kopf__video) .nav__marke:hover .nav__tld {
  color: var(--kreide);
}
.kopf--kreide:has(.kopf__video) .kopf__scrim {
  background:
    linear-gradient(
      100deg,
      rgba(6, 26, 34, 0.88) 0%,
      rgba(6, 26, 34, 0.66) 38%,
      rgba(6, 26, 34, 0.16) 68%
    ),
    linear-gradient(to top, rgba(6, 26, 34, 0.7) 0%, transparent 46%);
}
/* Das Produkt-Standbild im Kopf tritt hinter das Video zurück */
.kopf__buehne:has(.kopf__video.is-spielt) .kopf__ware {
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}

/* --- 13 · Signature-Szene (Tempo-Skala) inszenieren -----------------------
   Die Ware stand in der Szene ohne Bodenkontakt und ohne Lichtführung — auf der
   großen dunklen Fläche wirkte das leer statt teuer. Gleiche Grammatik wie auf
   den Bühnen: weicher Kontaktschatten, Spiegelung, Lichtkegel dahinter. */
.tempo__bild img {
  filter: drop-shadow(0 28px 44px rgba(0, 0, 0, 0.55));
  -webkit-box-reflect: below 0
    linear-gradient(transparent 70%, rgba(255, 255, 255, 0.1));
}
.tempo__bild::after {
  left: 6%;
  right: 6%;
  bottom: 3%;
  height: 8%;
  filter: blur(16px);
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.24) 44%,
    transparent 74%
  );
}
.tempo__bild::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 88%;
  aspect-ratio: 1.4;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at 50% 62%,
    rgba(46, 147, 184, 0.2) 0%,
    rgba(46, 147, 184, 0.07) 38%,
    transparent 68%
  );
  pointer-events: none;
}

/* --- 14 · Footer-Marke ohne Papier-Tafel ---------------------------------
   Die weiße Tafel im dunklen Footer war derselbe aufgeklebte Kasten wie oben
   im Kopf. Die helle Logovariante steht frei auf dem Petrol. */
.fusszeile__marke-frei {
  display: inline-block;
  margin-bottom: 1.25rem;
}
.fusszeile__marke .fusszeile__marke-frei img {
  display: block;
  background: none;
  padding: 0;
  height: 74px;
  width: auto;
}
@media (max-width: 640px) {
  .fusszeile__marke-frei img {
    height: 60px;
  }
}

/* --- 15 · Bühnen straffen, Bodenband zurücknehmen ------------------------
   Unter den Bühnen stand bis zu einer halben Bildschirmhöhe Leerfläche, und
   das Asphaltband setzte sich als sichtbare Kante quer über die Räder. */
.buehne__inner {
  min-height: clamp(380px, 48vh, 560px);
  padding-block: clamp(44px, 5.5vw, 84px);
}
.buehne__boden {
  height: 22%;
  opacity: 0.22;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.22) 52%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.22) 52%, transparent 100%);
}

/* --- 16 · Preistafel: die ungerade Zelle trägt jetzt den Ruf -------------
   Bei ungerader Anzahl blieb rechts unten ein leeres graues Feld stehen —
   sah nach Fehler aus. Jetzt steht dort der Anruf-Hinweis. */
.preis-tafel__ruf {
  display: grid;
  align-content: center;
  gap: 0.5rem;
  padding: clamp(18px, 2.4vw, 30px);
  background: var(--petrol-tief);
  color: var(--kreide);
}
.preis-tafel__ruf strong {
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: 1.0625rem;
}
.preis-tafel__ruf span {
  font-size: 0.9375rem;
  color: rgba(242, 240, 233, 0.78);
  max-width: 34ch;
}
.preis-tafel__ruf .buehne__link {
  color: var(--kreide);
  justify-self: start;
}

/* --- 17 · Kontrast-Korrekturen (Lighthouse/axe) ---------------------------
   Die grüne Direktdraht-Kachel kam auf 2,9:1, die Tempo-Schalter auf 1,05:1. */
:root {
  --gruen-flaeche: #2f7023;
}
.weg--primaer .weg__label {
  color: rgba(255, 255, 255, 0.92);
}
.weg--primaer .weg__wert {
  color: #fff;
}
.tempo__dot {
  color: rgba(242, 240, 233, 0.82);
}
.tempo__dot[aria-current="false"] {
  color: rgba(242, 240, 233, 0.78);
}
/* Die Tempo-Schalter sitzen je nach Scroll-Zustand über heller oder dunkler
   Fläche — sie bringen ihren eigenen dunklen Träger mit, damit der Kontrast
   in beiden Fällen stimmt. */
.tempo__nav {
  background: rgba(8, 30, 39, 0.82);
  backdrop-filter: blur(4px);
  padding-inline: clamp(10px, 1.6vw, 22px);
}
.tempo__dot,
.tempo__dot[aria-current="false"] {
  color: rgba(242, 240, 233, 0.86);
}
.tempo__dot[aria-current="true"] {
  color: #fff;
}

/* --- 18 · Kundenlogo zurück in die Navigation (§0e-24) -------------------
   Die Typo-Wortmarke war ein Eigenweg am Kundenlogo — §0e-24 verlangt das
   Original auf einem hellen Träger. Der Träger ist jetzt eine gestaltete
   Plakette (Papier, feine Kante, grüne Fußlinie), kein nackter weißer Kasten,
   und trägt das Logo in der geforderten Größe. */
.nav .nav__marke,
.rechtskopf .nav__marke {
  display: inline-block;
  background: var(--papier);
  padding: 9px 16px 7px;
  border: 1px solid rgba(10, 37, 48, 0.1);
  border-bottom: 2px solid var(--gruen);
  box-shadow: 0 6px 18px rgba(4, 20, 27, 0.24);
}
.nav .nav__marke img,
.rechtskopf .nav__marke img {
  display: block;
  height: 46px;
  width: auto;
}
@media (min-width: 901px) {
  .nav .nav__marke img,
  .rechtskopf .nav__marke img {
    height: 60px;
  }
}
.kopf--kreide:has(.kopf__video) .nav__marke,
.rechtskopf .nav__marke {
  box-shadow: 0 4px 14px rgba(4, 20, 27, 0.12);
}

/* --- 19 · Mobil: Tempo-Schalter, Datenraster, FAB-Rinne (§0e-19) ---------
   Bei 390 px lagen drei der fünf Geschwindigkeitsklassen außerhalb des
   Bildschirms, das Datenraster stand dreispaltig und der FAB-Stapel lag auf
   dem Text. */
@media (max-width: 720px) {
  .tempo__nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    right: var(--rand);
    padding: 8px 10px;
  }
  .tempo__dot {
    min-height: 40px;
    padding: 6px 2px;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
  }
  .tempo__inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .tempo__bild {
    min-height: 34vh;
  }
  .tempo__stufe {
    padding-bottom: 108px; /* Rinne für die Schalter-Leiste */
  }
  /* Datenraster einspaltig statt drei schmale Wortkolonnen */
  .daten-raster,
  .tempo__werte,
  .kapitel__raster {
    grid-template-columns: 1fr !important;
  }
  /* FAB-Rinne: der Stapel darf keinen Text überdecken */
  main {
    padding-bottom: 0;
  }
  .fusszeile__unten,
  .direktdraht__inner {
    padding-right: 84px;
  }
}

/* --- 20 · Rechte Rinne + Markenlogos lesbar ------------------------------
   Die drei Kontakt-Buttons endeten exakt am Viewport-Rand (rechte Rahmenlinie
   weggeschnitten). Die Herstellerlogos waren im Ruhezustand fast unsichtbar —
   §0e-23: was nur im Hover erscheint, zählt als nicht vorhanden. */
.statement__wege {
  padding-inline: var(--rand);
  max-width: var(--inhalt);
  margin-inline: auto;
}
.marken-register__logo img {
  filter: grayscale(0.55) contrast(1.02) opacity(0.95);
}
.marken-register__item:hover .marken-register__logo img {
  filter: none;
}

/* --- 21 · Preisbeispiele (§0e-29: veröffentlichte Preise gehören auf die Seite) */
.preisliste {
  list-style: none;
  margin: clamp(30px, 5vh, 54px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
}
.preisliste__karte {
  display: grid;
  gap: 0.35rem;
  padding-bottom: clamp(18px, 2.4vh, 26px);
  border-bottom: 2px solid var(--linie-2);
}
.preisliste__bild {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: clamp(200px, 26vh, 300px);
  margin-bottom: 0.9rem;
}
.preisliste__bild img {
  max-height: clamp(190px, 25vh, 290px);
  width: auto;
  filter: drop-shadow(0 20px 30px rgba(4, 20, 27, 0.22));
}
.preisliste__bild::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -2%;
  height: 12%;
  border-radius: 50%;
  filter: blur(14px);
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(10, 37, 48, 0.3) 0%,
    transparent 72%
  );
}
.preisliste__marke {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-still);
}
.preisliste__karte h3 {
  margin: 0;
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 700;
}
.preisliste__wert {
  margin: 0.35rem 0 0;
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--petrol-tief);
}
.preisliste__zusatz {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink-still);
}
@media (max-width: 900px) {
  .preisliste {
    grid-template-columns: 1fr;
  }
}

/* --- 22 · „Alle Marken im Überblick" — kaputtes Raster repariert ----------
   Die Liste auf marken.html nutzt blanke <li><img>, nicht die __item/__logo-
   Struktur der Startseite. Ohne Zellhöhe und Bildbegrenzung standen sechs
   Herstellerlogos in sechs Originalgrößen übereinander und überlappten
   (Hamada 06.08.: „komplett falsch positioniert"). */
.marken-register > li {
  display: grid;
  place-items: center;
  min-height: clamp(88px, 10vw, 118px);
  padding: clamp(14px, 1.8vw, 24px);
  border: 1px solid var(--linie-1);
  background: var(--papier);
}
.marken-register > li > img {
  max-width: min(100%, 190px);
  max-height: 46px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(0.5) contrast(1.02);
  transition: filter 0.24s var(--ease);
}
.marken-register > li:hover > img {
  filter: none;
}
/* Hochformat-Logos (Rolektro) dürfen die Zelle nicht sprengen */
.marken-register > li[data-hoch] > img {
  max-height: 62px;
  max-width: 130px;
}
@media (max-width: 900px) {
  .marken-register {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .marken-register {
    grid-template-columns: 1fr;
  }
}

/* --- 23 · Fahrzeugbestand: alle Modelle auf der Seite --------------------
   Hamada 06.08.2026: „die Auflistung der Produkte … die sollen alle in den
   Unterseiten aufgelistet werden." 111 Fahrzeuge aus dem Shop, gruppiert. */
.bestand__gruppe {
  margin-top: clamp(48px, 7vh, 92px);
}
.bestand__kopf {
  display: grid;
  gap: 0.4rem;
  padding-bottom: clamp(16px, 2vh, 24px);
  border-bottom: 2px solid var(--linie-2);
  margin-bottom: clamp(24px, 3.4vh, 40px);
}
.bestand__kopf h3 {
  margin: 0;
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.bestand__kopf p {
  margin: 0;
  color: var(--ink-still);
  max-width: 52ch;
}
.bestand__zahl {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--petrol);
}
.bestand__raster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 34px);
}
.bestand__karte {
  display: block;
}
.bestand__link {
  display: grid;
  gap: 0.3rem;
  text-decoration: none;
  color: inherit;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--linie-1);
  transition: border-color 0.2s var(--ease);
}
.bestand__link:hover {
  border-bottom-color: var(--petrol);
}
.bestand__bild {
  display: grid;
  place-items: center;
  min-height: clamp(130px, 15vw, 190px);
  margin-bottom: 0.7rem;
  background: var(--papier);
  overflow: hidden;
}
.bestand__bild img {
  max-width: 100%;
  max-height: clamp(120px, 14vw, 178px);
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.3s var(--ease);
}
.bestand__link:hover .bestand__bild img {
  transform: scale(1.04);
}
.bestand__name {
  font-size: 0.9375rem;
  line-height: 1.35;
  font-weight: 600;
}
.bestand__preis {
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--petrol-tief);
}
.bestand__hinweis {
  font-size: 0.8125rem;
  color: var(--ink-still);
}
@media (max-width: 1100px) {
  .bestand__raster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .bestand__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

/* --- 24 · Ersatzteil-Register (306 Positionen, aufklappbar) --------------- */
.teile__gruppe {
  border-bottom: 1px solid var(--linie-1);
}
.teile__gruppe > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(16px, 2.2vh, 24px) 0;
  cursor: pointer;
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  font-weight: 700;
  list-style: none;
}
.teile__gruppe > summary::-webkit-details-marker {
  display: none;
}
.teile__gruppe > summary::after {
  content: "+";
  font-weight: 400;
  color: var(--petrol);
  font-size: 1.5em;
  line-height: 1;
}
.teile__gruppe[open] > summary::after {
  content: "–";
}
.teile__zahl {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-still);
  margin-left: auto;
  margin-right: 0.75rem;
}
.teile__liste {
  list-style: none;
  margin: 0 0 clamp(20px, 3vh, 34px);
  padding: 0;
  columns: 2;
  column-gap: clamp(28px, 4vw, 64px);
}
.teile__liste li {
  break-inside: avoid;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--linie-1);
  font-size: 0.9375rem;
}
.teile__liste a {
  color: inherit;
  text-decoration: none;
}
.teile__liste a:hover {
  color: var(--petrol);
  text-decoration: underline;
}
.teile__liste span {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink-still);
}
@media (max-width: 760px) {
  .teile__liste {
    columns: 1;
  }
}

/* --- 25 · Navigation bleibt über hellen Kopfbildern lesbar ---------------
   Auf hellen Stellen der Kopf-Clips (Regal, Werkstatt) verschwanden einzelne
   Nav-Punkte. Ein dezenter Verlauf oben trägt die Leiste, ohne den Kopf
   abzudunkeln. */
.kopf::before,
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(96px, 13vh, 168px);
  z-index: 25;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(6, 26, 34, 0.62) 0%,
    rgba(6, 26, 34, 0.28) 52%,
    transparent 100%
  );
}
.rechtskopf {
  position: relative;
}

/* --- 26 · Kein Vorschaltbild mehr im Unterseiten-Kopf --------------------
   Hamada 06.08.2026: „kommt als erstes für 1 Sek immer ein Bild und dann fängt
   das Video an — nur das Video abspielen." Das Produkt-Standbild lag als
   Platzhalter unter dem Video und blendete erst beim Abspielen aus. Es ist
   jetzt ganz weg; die erste Sekunde trägt der Poster-Frame des Videos, der
   identisch mit dem ersten Bild des Clips ist. */
.kopf__buehne .kopf__ware {
  display: none;
}
.kopf__video {
  opacity: 1;
}
.kopf__video.is-spielt {
  opacity: 1;
}

/* ==========================================================================
   27 · KEINE FREISTELLER MEHR — Hamada 06.08.2026, vierte Ansage
   „Wieso willst du auf Krampf die 3D-Bilder nutzen? Mach die alle weg und leg
   die ganz normal mit Hintergrund."
   Die Fahrzeuge standen als freigestellte Objekte auf der Fläche (Kontakt-
   schatten, Spiegelung, Lichtkegel). Jetzt liegen sie als normale Produktbilder
   mit ihrem eigenen Studio-Hintergrund in einer sauberen Bildfläche.
   ========================================================================== */
.buehne__ware,
.tempo__bild,
.kopf__ware {
  background: none;
}
.buehne__ware img,
.tempo__bild img,
.ware--tafel img,
.ware--verlauf img {
  /* 06.08.2026: background/border/mix-blend-mode hier entfernt — der Block
     überschrieb den Greige-Umbau und zwang weiße Kästen mit Hairline zurück
     (Härtetest-Blocker 2). Die Fläche trägt jetzt der Container. */
  filter: none !important;
  -webkit-box-reflect: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  object-fit: contain;
}
/* Kontaktschatten, Spiegelung und Lichtkegel der Freisteller-Bühne abräumen */
.buehne__ware::after,
.buehne__ware::before,
.tempo__bild::after,
.tempo__bild::before,
.ware--tafel::after,
.ware--tafel::before,
.ware--verlauf::after,
.ware--verlauf::before {
  content: none !important;
  display: none !important;
}
.ware--tafel {
  padding: 0;
  background: none;
  box-shadow: none;
}
.buehne__ware {
  align-self: center;
}
/* Auf dunklen Bühnen bekommt die weiße Bildfläche eine ruhige Fassung */
.buehne--petrol .buehne__ware img,
.buehne--nacht .buehne__ware img,
.tempo__bild img {
  border-color: rgba(242, 240, 233, 0.14);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.34);
}

/* --- 28 · Hero-Ausschnitt auf die Action ---------------------------------
   Der neue Clip hat den vorbeifahrenden Roller links im Bild; mit dem alten
   Ausschnitt (68 %) lag genau dieser Teil außerhalb. */
.hero__video,
.hero__poster {
  object-position: center center;
}
@media (max-width: 900px) {
  .hero__video,
  .hero__poster {
    object-position: center 58%;
  }
}

/* --- 29 · Handy: Telefonnummer wird nicht mehr abgeschnitten -------------
   Die drei Kontaktwege standen bei 390 px als gleich breite Spalten (75 px)
   nebeneinander — „01515 813 79 61" brauchte 100 px und verlor die letzten
   beiden Ziffern. Wer die Nummer abliest statt antippt, wählte falsch.
   Unter 620 px stapeln sich die Wege jetzt untereinander. */
@media (max-width: 620px) {
  .wege {
    flex-direction: column;
    width: 100%;
  }
  .weg {
    flex: 0 0 auto;
    width: 100%;
    min-height: 58px;
    border-left: 0;
    border-top: 1px solid rgba(242, 240, 233, 0.16);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-inline: var(--rand);
  }
  .weg__wert {
    font-size: 1.0625rem;
    white-space: nowrap;
  }
  .weg--primaer {
    order: -1;
    border-top: 0;
  }
}

/* --- 30 · Die drei Schaltflächen dürfen keinen Text mehr verdecken -------
   Freiraum war nur unter der Fußzeile reserviert; auf ueber-uns lag der Stapel
   über dem Link „Ladehinweise für Akkus". Jetzt hält der Seiteninhalt selbst
   Abstand, und der unterste Button sitzt bündig im Bild. */
@media (max-width: 900px) {
  main > *:last-child,
  main section:last-of-type {
    padding-bottom: clamp(96px, 15vh, 132px);
  }
  .fabs {
    right: 14px;
    bottom: 14px;
    gap: 10px;
  }
  .fab {
    width: 56px;
    height: 56px;
  }
}
/* Die Reihe lag bei 390 px 4 px außerhalb des Bildes — rechter Rand angeglichen */
@media (max-width: 1000px) {
  .fabs {
    right: var(--rand);
    left: auto;
    max-width: calc(100vw - 2 * var(--rand));
    justify-content: flex-end;
  }
}

/* --- 31 · Pflichtangabe zu Preisen (PAngV) ------------------------------- */
.preis-hinweis {
  margin: clamp(20px, 3vh, 32px) 0 0;
  font-size: 0.875rem;
  color: var(--ink-still);
  max-width: 68ch;
}
.preis-hinweis a {
  color: inherit;
}
.teile .preis-hinweis,
.bestand .preis-hinweis {
  border-top: 1px solid var(--linie-1);
  padding-top: clamp(14px, 2vh, 20px);
}

/* ==========================================================================
   32 · PREMIUM-AUFWERTUNG II — gemessen gegen `referenzen/industrie--coffee-tech`
   Befund im Direktvergleich: unsere Kacheln sind zu klein, zu eng, reinweiß und
   hartkantig; die Referenz arbeitet mit großen, ruhigen Flächen in warmem
   Greige, weichen Ecken, großzügiger Typo und viel Luft.
   ========================================================================== */
:root {
  --flaeche: #e9e6df; /* warmes Greige für Produktflächen (Referenz-Ton) */
  --flaeche-tief: #dfdcd4;
}

/* --- Produktflächen: groß, warm, weich statt weiß und hart --------------- */
.buehne__ware img,
.tempo__bild img,
.ware--tafel img,
.ware--verlauf img,
.bestand__bild,
.preisliste__bild {
  background: var(--flaeche);
  border: 0;
  border-radius: 14px;
}
.buehne__ware img,
.tempo__bild img {
  padding: clamp(18px, 2.4vw, 40px);
  box-shadow: 0 30px 60px rgba(10, 37, 48, 0.1);
}
.buehne--petrol .buehne__ware img,
.buehne--nacht .buehne__ware img,
.tempo__bild img {
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.42);
}

/* --- Bestandsliste im Referenz-Maß: 3 Spalten, große ruhige Kacheln ------ */
.bestand__raster {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 56px) clamp(24px, 3vw, 44px);
}
.bestand__bild {
  min-height: clamp(200px, 22vw, 300px);
  padding: clamp(20px, 2.4vw, 36px);
  margin-bottom: 1.1rem;
}
.bestand__bild img {
  max-height: clamp(170px, 19vw, 260px);
  mix-blend-mode: multiply;
}
.bestand__link {
  gap: 0.45rem;
  padding-bottom: 0;
  border-bottom: 0;
}
.bestand__name {
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.bestand__preis {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-still);
}
.bestand__hinweis {
  justify-self: start;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-still);
  border: 1px solid var(--linie-2);
  border-radius: 999px;
  padding: 3px 10px;
}
.bestand__gruppe {
  margin-top: clamp(72px, 10vh, 130px);
}
.bestand__kopf {
  border-bottom: 0;
  margin-bottom: clamp(34px, 4.4vh, 56px);
}
.bestand__kopf h3 {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  letter-spacing: -0.02em;
}
@media (max-width: 1100px) {
  .bestand__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .bestand__raster {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* --- Preisbeispiele in derselben Sprache -------------------------------- */
.preisliste__bild {
  min-height: clamp(220px, 26vw, 330px);
  padding: clamp(22px, 2.6vw, 40px);
}
.preisliste__bild img {
  max-height: clamp(180px, 22vw, 280px);
  filter: none;
  mix-blend-mode: multiply;
}
.preisliste__bild::after {
  display: none;
}
.preisliste__karte {
  border-bottom: 0;
}
/* Der weiße Bildgrund muss mit der Greige-Fläche verschmelzen, sonst steht ein
   weißer Kasten im warmen Kasten (Doppelrahmen). */
.buehne__ware img,
.tempo__bild img,
.ware--tafel img,
.ware--verlauf img {
  mix-blend-mode: multiply;
}
.buehne__ware img {
  max-height: 58vh;
  width: 100%;
  object-fit: contain;
}
.tempo__bild img {
  max-width: 100%;
  max-height: 100%;
}
/* Auf dunklen Flächen kann multiply nicht wirken — dort trägt die Greige-Fläche
   das Bild und bekommt selbst den Schatten. */
.buehne--petrol .buehne__ware img,
.buehne--nacht .buehne__ware img,
.tempo__bild img {
  mix-blend-mode: multiply;
  background: var(--flaeche);
}
/* multiply rechnet gegen den ELTERN-Hintergrund — also trägt der Container die
   Greige-Fläche, nicht das Bild selbst. Sonst bleibt auf dunklen Sektionen ein
   weißer Kasten im warmen Kasten stehen. */
.tempo__bild,
.buehne__ware {
  background: var(--flaeche);
  border-radius: 14px;
  padding: clamp(18px, 2.4vw, 40px);
  box-shadow: 0 30px 60px rgba(4, 20, 27, 0.28);
  isolation: isolate;
}
.buehne--petrol .buehne__ware,
.buehne--nacht .buehne__ware,
.tempo__bild {
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.45);
}
.tempo__bild img,
.buehne__ware img,
.ware--tafel img,
.ware--verlauf img {
  background: none !important;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  mix-blend-mode: multiply;
}
.ware--tafel,
.ware--verlauf {
  background: var(--flaeche);
  border-radius: 14px;
  padding: clamp(18px, 2.4vw, 40px);
}
/* Block 27 hatte mix-blend-mode: normal !important gesetzt — das schlug die
   Verschmelzung wieder tot. Hier gewinnt multiply endgültig. */
.tempo__bild img,
.buehne__ware img,
.ware--tafel img,
.ware--verlauf img,
.bestand__bild img,
.preisliste__bild img {
  mix-blend-mode: multiply !important;
  border: 0 !important;
}

/* ==========================================================================
   33 · HÄRTETEST-BLOCKER 1 + 3 + 4 (06.08.2026)
   „Die Unterseiten sind typografisch degradierte Startseiten" — jede Seite
   bekommt ihren eigenen Display-Moment (§0b-4, ≥8rem gilt PRO Seite, nicht
   pro Build). Dazu: mobiler Erstkontakt aufgeräumt, Datentabellen brechen um.
   ========================================================================== */
.kopf__h1 {
  font-size: clamp(3rem, 9vw, 8.5rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  max-width: 14ch;
}
.kopf__body-inner {
  max-width: min(72ch, 78%);
}
@media (max-width: 900px) {
  .kopf__h1 {
    font-size: clamp(2.75rem, 13vw, 4.5rem);
    max-width: 100%;
  }
  .kopf__body-inner {
    max-width: 100%;
  }
}

/* --- Mobiler Erstkontakt: der Head bekommt die Bühne zurück -------------- */
@media (max-width: 900px) {
  .hero,
  .kopf {
    min-height: 86dvh;
  }
  /* Die drei Kontaktwege wiederholen exakt die drei schwebenden Buttons —
     auf dem Handy bleibt nur der eine wichtige, kompakt in einer Zeile. */
  .direktdraht .status {
    display: none;
  }
  .weg:not(.weg--primaer) {
    display: none;
  }
  .weg--primaer {
    min-height: 52px;
    padding-block: 10px;
  }
  .weg--primaer .weg__label {
    font-size: 0.6875rem;
  }
}

/* --- Datenlisten brechen um, statt Wortsäulen zu bilden ------------------ */
@media (max-width: 768px) {
  .buehne__werte,
  .tempo__werte,
  .daten-raster,
  .kopf__werte {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .buehne__werte li,
  .tempo__stufe__werte li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
  }
  .tempo__stufe table td,
  .tempo__stufe dd {
    white-space: normal;
    word-break: normal;
    hyphens: auto;
  }
}

/* --- 34 · Logo steht frei, kein Träger (Härtetest 7) --------------------- */
.nav .nav__marke,
.rechtskopf .nav__marke {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.nav .nav__marke img,
.rechtskopf .nav__marke img {
  height: 58px;
}
@media (min-width: 901px) {
  .nav .nav__marke img,
  .rechtskopf .nav__marke img {
    height: 66px;
  }
}
/* Auf hellen Rechtsseiten trägt die helle Variante nicht — dort das Original */
.rechtskopf {
  background: var(--petrol-nacht);
}
.rechtskopf .nav__links a,
.rechtskopf .nav__schalter {
  color: var(--kreide);
}

/* --- 35 · Asphaltband raus (Härtetest 13) --------------------------------
   Der Streifen las sich als Render-Fehler, nicht als Material. */
.buehne__boden,
.kopf__boden {
  display: none;
}
/* Die große Setzung braucht Luft zur Navigation und darf nie hinter ihr liegen */
.kopf__body {
  padding-top: clamp(96px, 13vh, 168px);
}
.kopf__h1 {
  max-width: 18ch;
  text-wrap: balance;
}
.kopf__h1 br {
  display: inline;
}
@media (max-width: 900px) {
  .kopf__body {
    padding-top: clamp(84px, 12vh, 120px);
  }
}

/* ==========================================================================
   36 · EIN Akzent statt zwei (Härtetest 9, §0e-5)
   Grün und Cyan/Petrol konkurrierten als gleichrangige Akzente. Ab jetzt:
   Petrol führt die Fläche, das Logo-Grün bleibt der Marke vorbehalten.
   ========================================================================== */
.weg--primaer {
  background: var(--petrol-tief);
}
.weg--primaer:hover,
.weg--primaer:focus-visible {
  background: var(--petrol);
  color: var(--kreide);
}
.status.is-offen .status__punkt {
  background: var(--petrol-licht);
}
.tempo__dot[aria-current="true"] {
  border-top-color: var(--petrol-licht);
}
.fab:hover {
  background: var(--petrol);
  color: var(--kreide);
}
:where(a, button, [tabindex]):focus-visible {
  outline-color: var(--petrol-licht);
}
.kilometerstein {
  background: var(--petrol);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after,
.menue__liste a[aria-current="page"]::before,
.menue__liste a:hover::before {
  background: var(--petrol-licht);
}
.preis-tafel__ruf {
  background: var(--petrol-tief);
}

/* --- 37 · Buttons überdecken keinen Text mehr (Härtetest 14) ------------- */
@media (max-width: 900px) {
  main section,
  main > div {
    scroll-margin-bottom: 90px;
  }
  .kapitel:last-of-type,
  .teile,
  .bestand {
    padding-bottom: clamp(96px, 14vh, 130px);
  }
}

/* ==========================================================================
   38 · FARBWELT AUF DIE MARKE ZURÜCKGEDREHT — Hamada 07.08.2026
   „Wie kommst du drauf, dass der Kunde die Webseite in Blau will, wenn sein
   Logo grün ist und einfach alles grün ist?"
   Richtig — §0e-14b: das Kunden-Logo FÜHRT die Palette. Das Logo-Grün ist
   #59BB44 (Median aus 33.966 Pixeln der Wortmarke). Petrol/Cyan war meine
   Erfindung und ist ab hier nur noch das dunkle Neutral, nie der Akzent.
   ========================================================================== */
:root {
  /* Marken-Grün führt */
  --gruen: #59bb44;
  --gruen-hell: #7ad066;
  --gruen-tief: #3e8f2e;
  --gruen-flaeche: #2f7a24;
  --gruen-nacht: #0e2b12; /* dunkles Tannengrün statt Petrol-Nacht */
  --gruen-tiefnacht: #0a2010;

  /* Petrol bleibt nur als kühles Neutral für Linien und Schatten */
  --petrol: #3e8f2e;
  --petrol-licht: #7ad066;
  --petrol-tief: #123a17;
  --petrol-nacht: #0e2b12;
}

/* Dunkle Flächen: Tannengrün statt Petrolblau */
.buehne--petrol,
.kopf--petrol,
.fusszeile,
.statement,
.tempo,
.hero {
  background-color: var(--gruen-nacht);
}
.tempo__buehne,
.tempo__licht {
  background-image: radial-gradient(
    ellipse at 50% 40%,
    rgba(89, 187, 68, 0.12) 0%,
    transparent 62%
  );
}

/* Akzente: alles, was vorher Cyan/Petrol war, trägt jetzt das Marken-Grün */
.kilometerstein,
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after,
.menue__liste a[aria-current="page"]::before,
.menue__liste a:hover::before {
  background: var(--gruen);
}
.tempo__dot[aria-current="true"] {
  border-top-color: var(--gruen);
  color: #fff;
}
.status.is-offen .status__punkt {
  background: var(--gruen-hell);
}
:where(a, button, [tabindex]):focus-visible {
  outline-color: var(--gruen);
}
.weg--primaer {
  background: var(--gruen-flaeche);
  color: #fff;
}
.weg--primaer:hover,
.weg--primaer:focus-visible {
  background: var(--gruen-tief);
  color: #fff;
}
.fab:hover {
  background: var(--gruen);
  color: var(--ink);
}
.preis-tafel__ruf {
  background: var(--gruen-nacht);
}
.bestand__zahl,
.kapitel__marginalie,
.buehne__marke,
.kopf__marke {
  color: var(--gruen-tief);
}
.buehne--petrol .buehne__marke,
.kopf--petrol .kopf__marke,
.tempo .kapitel__marginalie {
  color: var(--gruen-hell);
}
.bestand__preis,
.preisliste__wert,
.tempo__zahl,
.buehne__zahl-auftakt {
  color: var(--gruen-tief);
}
.buehne--petrol .buehne__zahl-auftakt,
.tempo .tempo__zahl {
  color: var(--gruen-hell);
}
.buehne__link:hover,
.teile__liste a:hover,
.bestand__link:hover {
  color: var(--gruen-tief);
}
.teile__gruppe > summary::after {
  color: var(--gruen);
}
.bestand__link:hover {
  border-bottom-color: var(--gruen);
}

/* --- 39 · beratung.html: Produkt-Bühne statt falschem Video --------------
   Der Kopf-Clip zeigte Golfcarts statt Elektromobile — beim Fachhändler das
   falsche Produkt und damit nicht zeigbar (Hamada/Fable 07.08.2026). Bis ein
   echter Clip da ist, trägt der Kopf ein ruhiges Produkt-Bühnenbild in der
   Schaufenster-Grammatik der anderen Köpfe, mit Code-Motion (Lichtwanderung). */
.kopf__buehne .kopf__ware--buehne {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  z-index: 1;
}
.kopf__ware--buehne img {
  max-height: min(58vh, 520px);
  width: auto;
  background: var(--flaeche);
  border-radius: 14px;
  padding: clamp(18px, 2.4vw, 40px);
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.45);
  mix-blend-mode: normal;
}
@media (max-width: 900px) {
  .kopf__ware--buehne img {
    max-height: 38vh;
  }
}