/* ============================================================
   widetrack4x4.de — Zentrales Stylesheet
   ------------------------------------------------------------
   AUFBAU DIESER DATEI:
   1. Design-Einstellungen (Farben, Schriften, Abstände)
      → Hier änderst du das Aussehen der ganzen Website zentral.
   2. Grundlagen (Reset, Basis-Typografie)
   3. Wiederverwendbare Bausteine (Buttons, Karten, Rahmen …)
   4. Kopfzeile & Navigation
   5. Sektionen der Startseite
   6. Unterseiten (Rechtstexte usw.)
   7. Fußzeile
   8. Animationen & Bildschirmgrößen
   ============================================================ */


/* ============================================================
   1. DESIGN-EINSTELLUNGEN
   ------------------------------------------------------------
   Alle Markenfarben und Grundwerte an EINER Stelle.
   Eine Farbe hier ändern = sie ändert sich überall.
   ============================================================ */

:root {
  /* --- Markenfarben (aus dem Brand-Board) --- */
  --orange:        #E05E0A;   /* Marken-Orange — Akzent, Buttons, Hervorhebungen */
  --orange-hell:   #E76420;   /* Orange bei Hover (etwas heller) */
  --creme:         #EFE6DF;   /* Marken-Creme — Text auf dunklem Grund, helle Sektionen */
  --schwarz:       #212121;   /* Marken-Schwarz — Text auf hellem Grund */

  /* --- Abgeleitete Flächenfarben (dunkles Design) --- */
  --grund:         #171614;   /* Seitenhintergrund (noch etwas tiefer als Marken-Schwarz) */
  --flaeche:       #201F1C;   /* Karten und abgesetzte Flächen */
  --flaeche-2:     #29271F;   /* Flächen bei Hover / zweite Ebene */
  --linie:         #38352E;   /* Rahmen und Trennlinien auf dunklem Grund */
  --text:          var(--creme);
  --text-leise:    #A9A199;   /* Nebentexte, Bildunterschriften */

  /* --- Helle (creme) Sektionen --- */
  --hell-grund:    var(--creme);
  --hell-text:     #212121;
  --hell-leise:    #6B655D;
  --hell-linie:    #D8CCC0;

  /* --- Schriften ---
     Die eigene Markenschrift "Widetrack Sans" (Version 1.100, Mischsatz
     aus MuseoModerno + Montserrat Alternates, siehe README im Ordner
     WidetrackSans) liegt als WOFF2 in assets/fonts/ und wird unten
     per @font-face eingebunden. Fällt sie aus, greifen die
     Ersatzschriften dahinter. */
  --schrift-titel: "Widetrack Sans", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --schrift-text:  "Widetrack Sans", "Segoe UI", system-ui, sans-serif;
  --schrift-mono:  "Cascadia Mono", Consolas, ui-monospace, monospace; /* für Teilenummern & Messwerte */

  /* --- Layout-Grundwerte --- */
  /* Inhaltsbreite: rund 80 % der Bildschirmbreite, auf sehr breiten
     Monitoren bei 120rem (= 1920px) gedeckelt, auf Handys nie unter
     20rem. Der Rand (--rand) sitzt als Innenabstand zusätzlich. */
  --inhalt-breite: clamp(20rem, 80vw, 120rem);
  --rand:          clamp(1.25rem, 4vw, 3rem);  /* Seitenrand links/rechts (rein relativ) */
  --radius:        0.875rem;      /* Eckenrundung von Karten (passend zum runden Logo) */
  --radius-klein:  0.5rem;

  /* --- Abstände (4er-Raster) --- */
  --ab-1: 0.5rem;
  --ab-2: 1rem;
  --ab-3: 1.5rem;
  --ab-4: 2.5rem;
  --ab-5: 4rem;
  --ab-6: 6.5rem;   /* Abstand zwischen Sektionen */
}


/* ============================================================
   2. GRUNDLAGEN
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 var(--ab-3);
  letter-spacing: 0.01em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4.3rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); }

p { margin: 0 0 var(--ab-2); }

a { color: inherit; }

/* Sichtbarer Tastatur-Fokus (Barrierefreiheit — bitte nicht entfernen) */
:focus-visible {
  outline: 0.125rem solid var(--orange);
  outline-offset: 0.1875rem;
  border-radius: 0.25rem;
}

::selection { background: var(--orange); color: #fff; }

/* Zentrierter Seitenaufbau (z. B. Kontakt) — auf dem Handy wird der
   Fließtext in Abschnitt 11 wieder linksbündig */
.mittig { text-align: center; }

/* Startseite: Prinzip-Sektion und Kennzahlen mittig ausrichten */
.fig-prinzip-titel,
.fig-prinzip-text { text-align: center; margin-inline: auto; }
.fig-zahlen { justify-content: center; text-align: center; }
.fig-zahl { align-items: center; text-align: center; }

/* Inhalts-Container: zentriert, mit Seitenrand */
.inhalt {
  max-width: var(--inhalt-breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Eine Sektion = ein thematischer Block der Seite */
.sektion { padding-block: var(--ab-6); }

/* Engere Sektions-Abstände — für Blöcke, die als Einheit gelesen werden
   sollen (Bild → 3D-Modell → Animation auf der Startseite). */
.sektion--eng       { padding-block: var(--ab-5); }
.sektion--eng-unten { padding-bottom: var(--ab-5); }

/* Kleine Überzeile über Überschriften, im "Teilenummern-Stil" */
.oberzeile {
  font-family: var(--schrift-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 var(--ab-2);
}

.einleitung {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: var(--text-leise);
  max-width: 46rem;
}


/* ============================================================
   MARKENSCHRIFT "Widetrack Sans" — lokal gehostet (DSGVO-konform)
   ------------------------------------------------------------
   Fertige Schriftfamilie (Version 1.100) aus dem Ordner WidetrackSans:
   Grundlage MuseoModerno, die Buchstaben g j k m n p q r x y (und die
   Versalien dazu) stammen aus Montserrat Alternates, Laufweiten auf
   MuseoModerno angeglichen. Bei einer neuen Version einfach die zwei
   WOFF2-Dateien in assets/fonts/ ersetzen und hier die Versionsnummer
   (?v=…) hochzählen, damit Browser die alte Datei nicht weiterverwenden.
   ============================================================ */
@font-face {
  font-family: "Widetrack Sans";
  src: url("../assets/fonts/WidetrackSans-Regular.woff2?v=1") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Widetrack Sans";
  src: url("../assets/fonts/WidetrackSans-SemiBold.woff2?v=1") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   3. WIEDERVERWENDBARE BAUSTEINE
   ============================================================ */

/* --- Buttons --- */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.625rem;
  border-radius: 62.4375rem;                /* runde Form passend zur Marke */
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  border: 0.0625rem solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.knopf:active { transform: scale(0.97); }

.knopf--orange {
  background: var(--orange);
  color: #1A1000;                       /* dunkle Schrift auf Orange = gut lesbar */
}
.knopf--orange:hover { background: var(--orange-hell); }

.knopf--kontur {
  border-color: var(--linie);
  color: var(--text);
}
.knopf--kontur:hover { border-color: var(--creme); }

/* Auf hellem (creme) Grund */
.hell .knopf--kontur { border-color: var(--hell-linie); color: var(--hell-text); }
.hell .knopf--kontur:hover { border-color: var(--schwarz); }

/* --- Bild im "CAD-Rahmen" ---
   Die Renderings haben einen hellen Studiohintergrund.
   Der Rahmen inszeniert sie bewusst als technische Ansicht:
   Bild oben, darunter eine Beschriftungsleiste wie im CAD. */
.cad-rahmen {
  border: 0.0625rem solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--flaeche);
}
.cad-rahmen img { width: 100%; height: auto; }
.cad-leiste {
  display: flex;
  flex-wrap: wrap;               /* bricht auf sehr schmalen Bildschirmen sauber um */
  justify-content: space-between;
  gap: 0.375rem var(--ab-2);
  padding: 0.625rem 1rem;
  border-top: 0.0625rem solid var(--linie);
  font-family: var(--schrift-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.cad-leiste .orange { color: var(--orange); }

/* --- Maßlinie (Signatur-Element) ---
   Technische Bemaßung als grafisches Motiv: |––– +30 mm –––| */
.masslinie {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  color: var(--orange);
  font-family: var(--schrift-mono);
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  letter-spacing: 0.18em;
  white-space: nowrap;
}
.masslinie::before,
.masslinie::after {
  content: "";
  flex: 1;
  height: 0.6875rem;
  min-width: 2.5rem;
  /* Linie mit Endstrichen — wie eine Bemaßung in der Zeichnung */
  background:
    linear-gradient(var(--orange), var(--orange)) left   center / 0.0938rem 100% no-repeat,
    linear-gradient(var(--orange), var(--orange)) right  center / 0.0938rem 100% no-repeat,
    linear-gradient(var(--orange), var(--orange)) center center / 100% 0.0938rem no-repeat;
}

/* --- Schraffur-Streifen (Zitat der Schnittzeichnungen) --- */

/* --- Karten (Vorteile usw.) --- */
.karte {
  background: var(--flaeche);
  border: 0.0625rem solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2.6vw, 1.875rem);
  transition: border-color 0.25s ease, background 0.25s ease;
}
.karte:hover { border-color: rgba(224, 94, 10, 0.5); background: var(--flaeche-2); }
.karte h3 { margin-bottom: 0.625rem; }
.karte p { margin: 0; color: var(--text-leise); font-size: 0.97rem; }

.karte .kennwert {
  font-family: var(--schrift-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  display: block;
  margin-bottom: 0.875rem;
}

/* --- Häkchen-Liste --- */
.haken-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}
.haken-liste li {
  padding-left: 1.875rem;
  position: relative;
}
.haken-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.9375rem;
  height: 0.5rem;
  border-left: 0.1562rem solid var(--orange);
  border-bottom: 0.1562rem solid var(--orange);
  transform: rotate(-48deg);
}


/* ============================================================
   4. KOPFZEILE & NAVIGATION
   ============================================================ */

.kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  border-bottom: 0.0625rem solid transparent;
}
/* Sobald gescrollt wird, bekommt die Leiste einen Hintergrund (per JS) */
/* Beim Runterscrollen ausgeblendet (nur auf niedrigen Bildschirmen, s. main.js) */
.kopf.ist-weg { transform: translateY(-100%); }
.kopf.ist-gescrollt {
  background: rgba(23, 22, 20, 0.82);
  backdrop-filter: blur(0.875rem);
  border-color: var(--linie);
}

.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ab-3);
  padding-block: 0.875rem;
}

.logo { display: flex; align-items: center; }
.logo img { height: 2.25rem; width: auto; }

.hauptnav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.125rem); }
.hauptnav a {
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  opacity: 0.85;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.hauptnav a:hover { opacity: 1; color: var(--orange-hell); }
.hauptnav a.aktiv { color: var(--orange); opacity: 1; }
.hauptnav .knopf { padding: 0.625rem 1.25rem; font-size: 0.92rem; }
/* Sprachumschalter (DE/EN) rechts in der Navigation: kleines Globus-
   Symbol + Kuerzel der ANDEREN Sprache. Auf den deutschen Seiten zeigt
   er "EN" und verweist auf widetrack4x4.com/en/, auf den englischen "DE". */
.hauptnav .sprache {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border: 0.0625rem solid var(--linie); border-radius: 62.4375rem;
  font-family: var(--schrift-mono); font-size: 0.78rem; letter-spacing: 0.08em;
  color: var(--text-leise); opacity: 1;
}
.hauptnav .sprache svg { width: 1rem; height: 1rem; }
.hauptnav .sprache:hover { color: var(--creme); border-color: var(--creme); }
@media (max-width: 52.5rem) {
  .hauptnav .sprache { align-self: flex-start; margin-top: 0.5rem; }
}

/* Warenkorb-Symbol rechts in der Kopfleiste. Es steht AUSSERHALB der
   Navigation, damit es auf dem Handy neben dem Menü-Knopf sichtbar
   bleibt. Die orange Zahl erscheint nur, wenn etwas im Warenkorb liegt
   (gesetzt von js/main.js). */
.kopf-innen > .hauptnav { margin-left: auto; }
/* Menüpunkte nie umbrechen ("Über uns", "Jetzt kaufen" standen auf
   schmalen Laptops sonst zweizeilig); dafür dort etwas enger setzen */
.hauptnav a { white-space: nowrap; }
@media (max-width: 64rem) {
  .hauptnav { gap: 0.9rem; }
  .kopf-innen { gap: 1rem; }
}
.warenkorb-link {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; flex: none;
  border: 0.0625rem solid var(--linie); border-radius: 62.4375rem;
  color: var(--text); text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.warenkorb-link svg { width: 1.25rem; height: 1.25rem; }
.warenkorb-link:hover { color: var(--orange-hell); border-color: var(--orange-hell); }
.warenkorb-link.hat-inhalt { color: var(--creme); border-color: var(--orange); }
.warenkorb-zahl {
  position: absolute; top: -0.35rem; right: -0.35rem;
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem;
  border-radius: 62.4375rem;
  background: var(--orange); color: var(--schwarz, #171614);
  font-size: 0.72rem; font-weight: 700; line-height: 1.25rem; text-align: center;
}

/* Mobiles Menü */
.nav-schalter {
  display: none;
  background: none;
  border: 0.0625rem solid var(--linie);
  border-radius: 0.625rem;
  padding: 0.5625rem 0.6875rem;
  cursor: pointer;
}
.nav-schalter span {
  display: block;
  width: 1.25rem;
  height: 0.125rem;
  background: var(--creme);
  margin: 0.25rem 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

@media (max-width: 52.5rem) {
  .nav-schalter { display: block; order: 2; }
  /* Handy: Warenkorb rechts, direkt links neben dem Menü-Knopf */
  .warenkorb-link { order: 1; margin-left: auto; }
  .kopf-innen { gap: 0.75rem; }
  .hauptnav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: var(--ab-3) var(--rand) var(--ab-4);
    background: rgba(23, 22, 20, 0.97);
    border-bottom: 0.0625rem solid var(--linie);
    display: none;
  }
  .hauptnav.offen { display: flex; }
  .hauptnav a { padding: 0.625rem 0; font-size: 1.1rem; }
  .nav-schalter[aria-expanded="true"] span:nth-child(1) { transform: translateY(0.375rem) rotate(45deg); }
  .nav-schalter[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-schalter[aria-expanded="true"] span:nth-child(3) { transform: translateY(-0.375rem) rotate(-45deg); }
}


/* ============================================================
   5. SEKTIONEN DER STARTSEITE
   ============================================================ */

/* --- Held (Einstieg) --- */
.held {
  padding-top: clamp(7.5rem, 18vh, 11.25rem);
  padding-bottom: var(--ab-5);
  display: flex;
  flex-direction: column;
  gap: var(--ab-5);
}

.held-text { max-width: 48.75rem; }
.held .oberzeile { margin-bottom: var(--ab-3); }
.held h1 { margin-bottom: var(--ab-3); }
.held h1 .orange { color: var(--orange); }
.held .einleitung { margin-bottom: var(--ab-4); }

.held-knoepfe { display: flex; flex-wrap: wrap; gap: var(--ab-2); }

.held .masslinie { max-width: 26.25rem; margin-top: var(--ab-4); }

.held-bild { position: relative; }


/* --- Vergleich: Spurplatten vs. widetrack --- */
.vergleich-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ab-3);
  margin-top: var(--ab-4);
}
.vergleich-karte { padding: clamp(1.375rem, 3vw, 2.125rem); }
.vergleich-karte .etikett {
  font-family: var(--schrift-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.875rem;
  color: var(--text-leise);
}
.vergleich-karte--wt { border-color: rgba(224, 94, 10, 0.55); }
.vergleich-karte--wt .etikett { color: var(--orange); }
.vergleich-karte ul {
  list-style: none;
  margin: var(--ab-2) 0 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
  color: var(--text-leise);
  font-size: 0.97rem;
}
.vergleich-karte li { padding-left: 1.625rem; position: relative; }
/* Minus-Strich für Nachteile */
.vergleich-karte--platten li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.8125rem;
  height: 0.1562rem;
  background: #8A8378;
}
/* Häkchen für Vorteile */
.vergleich-karte--wt li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.875rem;
  height: 0.4375rem;
  border-left: 0.1562rem solid var(--orange);
  border-bottom: 0.1562rem solid var(--orange);
  transform: rotate(-48deg);
}

@media (max-width: 47.5rem) {
  .vergleich-raster { grid-template-columns: 1fr; }
}

/* --- Video-Bühne (scrollgesteuerte Animation) ---
   Die äußere Sektion ist bewusst hoch (320vh): während man
   durch sie hindurchscrollt, bleibt die innere Bühne am
   Bildschirm "kleben" und das Video läuft dem Scrollen folgend ab. */
.scrub {  position: relative; height: 320vh; }
.scrub--lang { height: 460vh; }  /* für die längere Nachlauf-Animation (55 s) */
.scrub-buehne {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--ab-3);
  overflow: hidden;
}
/* Fallback-Video (Handy / reduzierte Bewegung): klassisch gerahmt */
.scrub-buehne .scrub-medium {
  display: block;
  width: min(100%, 78.75rem);
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius);
  border: 0.0625rem solid var(--linie);
}
.scrub-buehne .scrub-medium[hidden] { display: none; }
.scrub-titel { text-align: center; }
.scrub-hinweis {
  font-family: var(--schrift-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--text-leise);
  margin: var(--ab-2) 0 0;
}

/* Kino-Bühne: Animation randlos über die volle Breite; eine Vignette
   lässt die Bildränder weich in den Seitenhintergrund übergehen. */
.scrub-kino {
  position: relative;
  width: 100%;
}
.scrub-kino[hidden] { display: none; }
.scrub-kino canvas {
  display: block;
  width: 100%;
  height: auto;
}
.scrub-kino canvas {
  /* Leicht abgedunkelt, damit die helle Studio-Szene zum dunklen Seiten-Look passt */
  filter: brightness(0.94) contrast(1.03);
}
.scrub-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Nur ein schmaler, präziser Übergang oben und unten — die Bühne läuft
     als klares Querband über die volle Breite (wie die Creme-Sektion) */
  background:
    linear-gradient(to bottom, var(--grund) 0%, rgba(23,22,20,0) 8%, rgba(23,22,20,0) 92%, var(--grund) 100%);
}

/* Fortschritts-Maßlinie unter der Animation (füllt sich beim Scrollen orange) */
.scrub-fortschritt {
  position: relative;
  width: min(26.25rem, 60%);
  height: 0.125rem;
  margin-inline: auto;
  background: var(--linie);
}
.scrub-fortschritt[hidden] { display: none; }
.scrub-fortschritt::before,
.scrub-fortschritt::after {
  content: "";
  position: absolute;
  top: -0.3125rem;
  width: 0.0938rem;
  height: 0.75rem;
  background: var(--linie);
}
.scrub-fortschritt::before { left: 0; }
.scrub-fortschritt::after { right: 0; }
.scrub-fortschritt span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--orange);
}

/* Fallback ohne Scroll-Steuerung (Mobil / reduzierte Bewegung) */
.scrub.einfach { height: auto; padding-block: var(--ab-6); }
.scrub.einfach .scrub-buehne { position: static; height: auto; }

/* --- Vorteils-Raster --- */
.vorteile-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ab-3);
  margin-top: var(--ab-4);
}
@media (max-width: 61.25rem) { .vorteile-raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .vorteile-raster { grid-template-columns: 1fr; } }

/* --- Sicherheits-Block (großes Argument) --- */
.sicherheit {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--ab-4);
  align-items: center;
  margin-top: var(--ab-5);
}
.sicherheit .gross {
  font-family: var(--schrift-titel);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  line-height: 1.25;
  font-weight: 600;
}
.sicherheit .gross .orange { color: var(--orange); }
@media (max-width: 53.75rem) { .sicherheit { grid-template-columns: 1fr; } }

/* --- Helle (creme) Sektion: Kit & technische Daten --- */
.hell {
  background: var(--hell-grund);
  color: var(--hell-text);
}
.hell .oberzeile { color: #B44A06; } /* dunkleres Orange für Kontrast auf Creme */
.hell .einleitung { color: var(--hell-leise); }

.kit-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ab-5);
  align-items: start;
  margin-top: var(--ab-4);
}
@media (max-width: 53.75rem) { .kit-raster { grid-template-columns: 1fr; } }

/* Technische Daten als Zeichnungs-Tabelle */
.daten-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.daten-tabelle th,
.daten-tabelle td {
  text-align: left;
  padding: 0.6875rem 0.25rem;
  border-bottom: 0.0625rem solid var(--hell-linie);
  vertical-align: top;
}
.daten-tabelle th {
  font-family: var(--schrift-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--hell-leise);
  width: 42%;
}
.hell .haken-liste { color: var(--hell-text); }
.hell .haken-liste .leise { color: var(--hell-leise); font-size: 0.9rem; }

/* --- Nachweise --- */
.nachweise-lage {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: var(--ab-5);
  align-items: center;
  margin-top: var(--ab-4);
}
@media (max-width: 56.25rem) { .nachweise-lage { grid-template-columns: 1fr; } }
.nachweis-liste { display: grid; gap: var(--ab-3); }
.nachweis {
  display: grid;
  grid-template-columns: 2.875rem 1fr;
  gap: var(--ab-2);
  align-items: start;
}
.nachweis-zeichen {
  width: 2.875rem;
  height: 2.875rem;
  border: 0.0625rem solid var(--linie);
  border-radius: 0.75rem;
  display: grid;
  place-items: center;
  font-family: var(--schrift-mono);
  font-size: 0.8rem;
  color: var(--orange);
  background: var(--flaeche);
}
.nachweis h3 { font-size: 1.06rem; margin-bottom: 0.25rem; }
.nachweis p { margin: 0; color: var(--text-leise); font-size: 0.95rem; }

/* --- Abschluss-Aufruf (Preis + Kaufen) --- */
.abschluss { text-align: center; }
.abschluss .preis {
  font-family: var(--schrift-titel);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 600;
  margin: var(--ab-3) 0 0.375rem;
}
.abschluss .preis-zusatz {
  color: var(--text-leise);
  font-size: 0.95rem;
  margin-bottom: var(--ab-4);
}
.abschluss .held-knoepfe { justify-content: center; }


/* ============================================================
   6. UNTERSEITEN (Rechtstexte, Produkt usw.)
   ============================================================ */

.unterseite {
  padding-top: clamp(8.125rem, 16vh, 10.625rem);
  padding-bottom: var(--ab-6);
}
.unterseite .textbreite { max-width: 47.5rem; }
.unterseite h1 { font-size: clamp(2rem, 4vw, 3rem); }
.unterseite h2 { font-size: 1.35rem; margin-top: var(--ab-5); }
.unterseite h3 { font-size: 1.05rem; margin-top: var(--ab-4); }
.unterseite p, .unterseite li { color: #CFC7BE; }
.unterseite strong { color: var(--creme); }
/* Creme-Band auf einer Unterseite: die hellen Unterseiten-Textfarben oben
   würden auf Creme unlesbar — hier zurück auf die dunklen Farben. */
.unterseite .hell p,
.unterseite .hell li,
.unterseite .hell strong,
.unterseite .hell th,
.unterseite .hell td      { color: var(--hell-text); }
.unterseite .hell .leise,
.unterseite .hell .einleitung { color: var(--hell-leise); }
.unterseite .hell h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  margin-top: 0;
}
.unterseite address { font-style: normal; line-height: 1.8; }

/* Leise Nebenzeile (z. B. "Stand: …" in Rechtstexten) */
.leise { color: var(--text-leise); font-size: 0.95rem; }

/* Hinweis-Kasten (z. B. "Entwurf — noch prüfen") */
.hinweis-kasten {
  border: 0.0625rem dashed var(--orange);
  border-radius: var(--radius);
  padding: var(--ab-3);
  margin-block: var(--ab-4);
  color: var(--text-leise);
  font-size: 0.95rem;
}


/* ============================================================
   6b. PRODUKTSEITE: 3D-VIEWER & KONFIGURATOR
   ============================================================ */

/* --- 3D-Viewer --- */
.viewer3d {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--flaeche);
  overflow: hidden;
}
.viewer3d canvas { width: 100% !important; height: 100% !important; display: block; }
.viewer3d-status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--ab-4);
  text-align: center;
  color: var(--text-leise);
  font-size: 0.95rem;
  background: var(--flaeche);
}
/* WICHTIG: hebt das display:grid auf, sobald JS die Anzeige versteckt —
   ohne diese Zeile bleibt die Fläche für immer über dem 3D-Modell liegen */
.viewer3d-status[hidden] { display: none; }

/* --- Konfigurator --- */
.konfig {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--ab-4);
  align-items: start;
  background: var(--flaeche);
  border: 0.0625rem solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(1.375rem, 3.4vw, 2.5rem);
}
@media (max-width: 53.75rem) { .konfig { grid-template-columns: 1fr; } }

.konfig fieldset {
  border: none;
  margin: 0 0 var(--ab-3);
  padding: 0;
}
.konfig legend {
  font-family: var(--schrift-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: 0.75rem;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.625rem; }

/* Auswahl-Chips: das Eingabefeld ist unsichtbar, das Label ist der Knopf */
.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chip span {
  display: inline-block;
  padding: 0.6875rem 1.25rem;
  border: 0.0625rem solid var(--linie);
  border-radius: 62.4375rem;
  font-weight: 600;
  font-size: 0.97rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.chip:hover span { border-color: var(--creme); }
.chip input:checked + span {
  border-color: var(--orange);
  background: rgba(224, 94, 10, 0.14);
  color: var(--creme);
}
.chip input:focus-visible + span {
  outline: 0.125rem solid var(--orange);
  outline-offset: 0.1875rem;
}
/* Noch nicht bestellbare Auswahl (z. B. Discovery/Range Rover) */
.chip input:disabled + span {
  opacity: 0.45;
  cursor: not-allowed;
}
.chip:hover input:disabled + span { border-color: var(--linie); }
.chip small {
  display: block;
  font-weight: 400;
  color: var(--text-leise);
  font-size: 0.8rem;
}

/* Zusammenfassung rechts */
.konfig-summe {
  border: 0.0625rem solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2.6vw, 1.875rem);
  background: var(--grund);
  position: sticky;
  top: 6rem;
}
.konfig-summe .bestellcode {
  font-family: var(--schrift-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--orange);
  margin-bottom: 0.625rem;
  display: block;
}
.konfig-summe .k-preis {
  font-family: var(--schrift-titel);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 600;
  margin: 0.25rem 0 0.125rem;
}
.konfig-summe .k-zusatz { color: var(--text-leise); font-size: 0.9rem; margin-bottom: var(--ab-3); }
.konfig-summe ul {
  list-style: none;
  margin: 0 0 var(--ab-3);
  padding: 0;
  display: grid;
  gap: 0.5rem;
  color: var(--text-leise);
  font-size: 0.93rem;
}
/* Aufzaehlungspunkte in Orange + Artikelnummer je Position */
.konfig-summe ul li {
  position: relative;
  padding-left: 1.125rem;
}
.konfig-summe ul li::before {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 0.52em;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--orange);
}
.konfig-summe .pos-nr {
  display: block;
  font-family: var(--schrift-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--orange);
  margin-top: 0.125rem;
}
.konfig-summe .knopf { width: 100%; justify-content: center; }


/* ============================================================
   6b2. KOSTENVERGLEICH (Startseite)
   ============================================================ */

.kosten-liste {
  list-style: none;
  margin: var(--ab-2) 0 0;
  padding: 0;
}
.kosten-liste li {
  display: flex;
  justify-content: space-between;
  gap: 1.125rem;
  padding: 0.6875rem 0.125rem;
  border-top: 0.0625rem solid var(--linie);
  color: var(--text-leise);
  font-size: 0.97rem;
}
.kosten-liste .kosten-preis {
  font-family: var(--schrift-mono);
  white-space: nowrap;
  color: var(--text);
}
.kosten-liste .kosten-summe {
  color: var(--creme);
  font-weight: 600;
}
.kosten-liste .kosten-summe .kosten-preis { color: var(--orange); }
.kosten-punch {
  margin: 1.125rem 0 0;
  padding-top: 0.875rem;
  border-top: 0.0625rem solid var(--linie);
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--creme);
}


/* ============================================================
   6c. BAUTEILE (helle Sektion auf der Startseite)
   Jedes Bauteil: Rendering, Teilenummern-Zeile, Name, Fakten-Tabelle.
   ============================================================ */

.bauteil-raster {
  display: grid;
  grid-template-columns: 1fr;   /* ein Bauteil pro Reihe — groß und untereinander */
  gap: var(--ab-6);
  margin-top: var(--ab-5);
  max-width: 65rem;
}

.bauteil img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 0.0625rem solid var(--hell-linie);
}
.bauteil .bauteil-code {
  font-family: var(--schrift-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #B44A06;              /* dunkleres Orange für Kontrast auf Creme */
  margin: 1.375rem 0 0.125rem;
}
.bauteil h3 {
  margin: 0 0 0.875rem;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}

.bauteil-fakten {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bauteil-fakten li {
  display: flex;
  gap: 1.125rem;
  padding: 0.75rem 0.125rem;
  border-top: 0.0625rem solid var(--hell-linie);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--hell-text);
}
.bauteil-fakten li span:first-child {
  flex: 0 0 10.5rem;
  padding-top: 0.1875rem;
  font-family: var(--schrift-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hell-leise);
}
@media (max-width: 40rem) {
  .bauteil-fakten li { flex-direction: column; gap: 0.125rem; }
}


/* ============================================================
   7. FUSSZEILE
   ============================================================ */

.fuss {
  border-top: 0.0625rem solid var(--linie);
  margin-top: var(--ab-6);
  padding-block: var(--ab-5) var(--ab-4);
  font-size: 0.95rem;
}
.fuss-raster {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--ab-4);
}
@media (max-width: 47.5rem) { .fuss-raster { grid-template-columns: 1fr; } }
.fuss .logo img { height: 1.625rem; }
.fuss p, .fuss a { color: var(--text-leise); }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--creme); }
.fuss h4 {
  font-family: var(--schrift-mono);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--creme);
  margin-bottom: var(--ab-2);
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5625rem; }
/* Instagram-Link unter dem Kurztext in der Fusszeile */
.fuss .fuss-social {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 1rem;
  color: var(--text-leise);
  transition: color 0.2s ease;
}
.fuss .fuss-social svg { width: 1.35rem; height: 1.35rem; flex: none; }
.fuss .fuss-social:hover { color: var(--orange-hell); }
.fuss-unten {
  margin-top: var(--ab-5);
  padding-top: var(--ab-3);
  border-top: 0.0625rem solid var(--linie);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ab-2);
  color: var(--text-leise);
  font-size: 0.85rem;
}


/* ============================================================
   8. ANIMATIONEN & BILDSCHIRMGRÖSSEN
   ============================================================ */

/* Elemente mit .anim gleiten beim Hereinscrollen sanft nach oben.
   Das JavaScript setzt dafür die Klasse .sichtbar. */
.anim {
  opacity: 0;
  transform: translateY(1.625rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.anim.sichtbar { opacity: 1; transform: none; }

/* Gestaffelte Verzögerung für Karten im Raster */
.anim:nth-child(2) { transition-delay: 0.08s; }
.anim:nth-child(3) { transition-delay: 0.16s; }
.anim:nth-child(4) { transition-delay: 0.08s; }
.anim:nth-child(5) { transition-delay: 0.16s; }
.anim:nth-child(6) { transition-delay: 0.24s; }

/* Nutzer mit reduzierter Bewegung: keine Animationen */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}


/* ============================================================
   9. STARTSEITE — FIGMA-REDESIGN (August 2026)
   ------------------------------------------------------------
   Alle Klassen der neuen Startseite beginnen mit "fig-".
   ============================================================ */

/* --- Allgemeine Bausteine --- */
.orange { color: var(--orange); }

.etikett {
  font-family: var(--schrift-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}

.fig-h2 { font-size: clamp(1.9rem, 3.2vw, 2.875rem); margin-bottom: var(--ab-3); }
.fig-h2-mittig {
  font-size: clamp(1.9rem, 3.2vw, 2.875rem);
  text-align: center;
  margin: var(--ab-5) 0 0;
}

/* --- HELD-BEREICH --- */
.fig-hero {
  position: relative;
  overflow: hidden;
  /* Füllt den Bildschirm bis zur Unterkante — die nächste Sektion
     erscheint erst beim Scrollen. (svh = sichtbare Höhe auf Handys) */
  height: 100vh;
  height: 100svh;
  min-height: 35rem;
  background: var(--grund);
}
.fig-hero-medien { position: absolute; inset: 0; }
.fig-hero-foto {
  /* Das Foto beginnt etwas unterhalb der Oberkante — so bleibt oben
     ein schmales schwarzes Band, damit Logo und Navigation gut
     lesbar sind. Abstand hier anpassen: */
  position: absolute;
  inset: clamp(4rem, 6.5vw, 5.75rem) 0 0 0;
  width: 100%;
  height: calc(100% - clamp(4rem, 6.5vw, 5.75rem));
  object-fit: cover;
  object-position: 50% 62%;
}
.fig-hero-verlauf {
  /* Nur eine dezente Abdunklung nach unten, damit Titel und Knöpfe
     lesbar bleiben — das Foto selbst reicht bis zur Unterkante. */
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(23,22,20,0) 0%, rgba(23,22,20,0.55) 100%);
}
.fig-hero-inhalt {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin-left: auto; margin-right: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ab-4);
  padding-bottom: var(--ab-4);
}
/* --- Einheitliche Schriftgrößen im oberen Bereich der Startseite ---
   Bis zum Video gibt es nur ZWEI Größen (Handy-Werte in Abschnitt 11):
   --start-gross  alle Slogans: "Explore more with", "60 mm mehr Spur.",
                  "Keine Kompromisse."
   --start-text   Unterzeile und Erklärtext darunter
   Zum Anpassen genügt es, diese beiden Werte zu ändern. */
:root {
  --start-gross: clamp(2.2rem, 4.6vw, 4.25rem);
  --start-text:  clamp(1.15rem, 1.9vw, 1.75rem);
}
.fig-hero-titel {
  font-size: var(--start-gross);
  letter-spacing: 0.01em;
  margin-bottom: var(--ab-3);
}
.fig-hero-logo {
  display: block;
  width: clamp(17.5rem, 50vw, 43.75rem);
  height: auto;
  margin-top: 0.375rem;
}
/* Ringe rechts im Hero — bewusst groß (ca. 36 % der Fensterbreite,
   gedeckelt bei 32.5rem) */
.fig-hero-produkt { flex: 0 0 clamp(16.25rem, 36vw, 32.5rem); }
/* Produktfoto (freigestellte Ringe, quadratisch zugeschnittenes
   transparentes PNG aus "Spurverbreiterung v103") */
.fig-produkt-frei {
  position: relative;
  aspect-ratio: 1 / 1;
}
.fig-produkt-frei img {
  width: 100%; height: 100%;
  object-fit: contain;
}

/* --- DAS PRINZIP --- */
.fig-prinzip-titel {
  text-align: center;
  font-size: var(--start-gross);
  margin-bottom: var(--ab-4);
}
.fig-prinzip-titel .gross { font-size: inherit; }
/* Unterzeile direkt unter dem Slogan: gross und gut lesbar, aber
   kleiner als "Keine Kompromisse"; rueckt nah an den Slogan heran */
.fig-prinzip-unterzeile {
  text-align: center;
  max-width: 50rem;
  margin: calc(var(--ab-4) * -0.55) auto var(--ab-4);
  font-family: var(--schrift-titel);
  font-size: var(--start-text);
  font-weight: 600;
  line-height: 1.25;
  color: var(--creme);
  text-wrap: balance;
}
.fig-prinzip-medien {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: var(--ab-4);
  align-items: center;
}
.fig-prinzip-text {
  margin: var(--ab-4) auto 0;
  max-width: 66.375rem;
  font-size: var(--start-text);
  color: var(--text-leise);
}
.fig-prinzip-text strong { color: var(--text); }

/* --- ANIMATION MIT SCHIEBER --- */
.fig-anim { padding: var(--ab-6) 0; }
.fig-anim .fig-h2 { text-align: center; }
/* Scroll-Kino: Der Halter ist 300vh hoch und liefert den Scrollweg */
.fig-anim-halter {
  height: 300vh;
  position: relative;
}
/* Die Bühne klebt beim Scrollen oben im Sichtfeld — volle Breite
   (der umgebende .fig-anim ist auf 120rem gedeckelt) */
.fig-anim-buehne {
  position: sticky;
  /* Bühne exakt im Format der Bildfolge (1440x540 = 2,667:1) —
     so wird oben/unten nichts beschnitten. Beim Kleben wird sie
     senkrecht im Sichtfeld zentriert. */
  top: calc((100vh - min(100vh, 37.5vw)) / 2);
  height: min(100vh, 37.5vw);
  width: 100%;
  background: var(--flaeche);
  overflow: hidden;
}
.fig-anim-buehne canvas,
.fig-anim-buehne video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* WICHTIG: [hidden] muss auch gewinnen, wenn eine Regel display setzt
   (gleiche Lektion wie beim 3D-Viewer-Status) */
.fig-anim-buehne video[hidden],
.fig-anim-buehne canvas[hidden],
.fig-anim-steuerung[hidden] { display: none !important; }
/* Oranger Fortschrittsbalken am unteren Rand der Bühne */
.fig-anim-balken {
  position: absolute;
  left: 0; bottom: 0;
  height: 0.25rem;
  width: 0%;
  background: var(--orange);
  z-index: 2;
}
/* Kleine Bildschirme: kein Scroll-Kino, sondern normales Video */
.fig-anim.zeigt-video .fig-anim-halter { height: auto; }
.fig-anim.zeigt-video .fig-anim-buehne {
  position: static;
  height: auto;
  min-height: 0;
}
.fig-anim.zeigt-video video {
  position: static;
  width: 100%;
  height: auto;
}
.fig-anim-steuerung {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ab-2);
  margin-top: var(--ab-3);
}
#anim-schieber {
  -webkit-appearance: none;
  appearance: none;
  width: min(26.25rem, 70vw);
  height: 0.375rem;
  border-radius: 62.4375rem;
  background: linear-gradient(to right,
    var(--orange) var(--fortschritt, 0%),
    var(--linie)  var(--fortschritt, 0%));
  outline-offset: 0.375rem;
  cursor: ew-resize;
}
#anim-schieber::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  background: var(--orange);
  border: 0.125rem solid var(--creme);
  cursor: grab;
}
#anim-schieber::-moz-range-thumb {
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  background: var(--orange);
  border: 0.125rem solid var(--creme);
  cursor: grab;
}
.fig-anim-hinweis {
  margin: 0;
  font-family: var(--schrift-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-leise);
}

/* --- KENNZAHLEN (Mehr als nur eine Spurverbreiterung) --- */
.fig-zahlen-titel {
  text-align: center;
  font-size: clamp(1.7rem, 3.33vw, 3rem);
  margin-bottom: var(--ab-3);
}
.fig-zahlen-titel .gross { font-size: clamp(2.3rem, 6.65vw, 6rem); letter-spacing: 0.01em; }
.fig-zahlen-intro {
  max-width: 50rem;
  margin: 0 auto var(--ab-5);
  text-align: center;
  font-size: clamp(1.05rem, 1.65vw, 1.5rem);
  color: var(--text-leise);
}
.fig-zahlen-intro strong { color: var(--text); }
.fig-zahlen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ab-4);
}
.fig-zahl { display: flex; flex-direction: column; }
.fig-zahl-vor {
  font-family: var(--schrift-titel);
  font-size: clamp(1rem, 1.65vw, 1.5rem);
  color: var(--text-leise);
}
.fig-zahl-wert {
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: clamp(3.2rem, 8.9vw, 8rem);
  line-height: 1.05;
  color: var(--orange);
  letter-spacing: 0.01em;
}
.fig-zahl-nach {
  font-family: var(--schrift-titel);
  font-size: clamp(1rem, 1.65vw, 1.5rem);
  line-height: 1.25;
  color: var(--text-leise);
  max-width: 17.5rem;
}
.fig-zahlen-fussnote {
  margin: var(--ab-4) 0 0;
  font-size: 0.85rem;
  color: var(--text-leise);
}

/* --- KARTEN-KARUSSELL (Nachlauf + Lenkrollradius) --- */
.fig-karussell { overflow: hidden; }
.fig-karussell-spur {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  padding-left: max(calc((100vw - var(--inhalt-breite)) / 2), var(--rand));
  transition: transform 0.5s ease;
}
.fig-karte {
  /* Kartenbreite so, dass die nächste Karte etwa zur Hälfte sichtbar ist:
     (sichtbare Breite − Lücke) × 2/3 → aktive Karte + 2.5rem Lücke + halbe Karte */
  flex: 0 0 min(
    calc((100vw - max((100vw - var(--inhalt-breite)) / 2, var(--rand)) - 3.75rem) * 2 / 3),
    calc(100vw - var(--rand) * 2 - 3.5rem)
  );
  background: var(--flaeche);
  border: 0.0625rem solid var(--linie);
  border-radius: 1.75rem;
  padding: clamp(1.25rem, 2.4vw, 2.125rem);
  transition: border-color 0.3s ease;
}
.fig-karte:not(.ist-aktiv) { cursor: pointer; }
.fig-karte.ist-aktiv { border-color: var(--orange); }
.fig-karte .etikett { display: block; margin-bottom: 0.875rem; }
.fig-karte-medien {
  position: relative;
  border-radius: 0.875rem;
  overflow: hidden;
  /* Seitenverhältnis der Karten-Videos (1416×606) — nichts wird abgeschnitten */
  aspect-ratio: 1416 / 606;
  background: #4a4a4a;
}
/* Die Lenkrollradius-Diagramme sind höher — eigenes Seitenverhältnis,
   damit unten nichts abgeschnitten wird */
#lenkrollradius .fig-karte-medien { aspect-ratio: 2128 / 1132; }
/* Logo-Einblendung im Widetrack-Diagramm (oben links im Bild) */
.fig-karte-logo {
  position: absolute;
  top: 5%; left: 4%;
  width: 15% !important;   /* kleiner auf Wunsch (vorher 22 %) */
  height: auto !important;
  object-fit: contain;
}
.fig-karte-medien video,
.fig-karte-medien img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.fig-karte p {
  margin: 1.25rem 0 0;
  font-size: clamp(0.97rem, 1.32vw, 1.19rem);
  color: var(--text-leise);
}
.fig-karte--text { display: flex; flex-direction: column; justify-content: center; }
.fig-karte--text p { font-size: clamp(1rem, 1.4vw, 1.26rem); }
.fig-karussell-knoepfe {
  display: flex;
  gap: var(--ab-2);
  margin-top: var(--ab-3);
}
.fig-pfeil {
  font-family: var(--schrift-titel);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--creme);
  background: transparent;
  border: 0.0625rem solid var(--hell-leise);
  border-radius: 62.4375rem;
  padding: 0.75rem 1.625rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.fig-pfeil:hover:not(:disabled) { border-color: var(--orange); color: var(--orange); }
.fig-pfeil:disabled { opacity: 0.35; cursor: default; }

/* --- EMPFEHLUNGS-KARTEN (2° / 4°) --- */
.fig-empfehlungen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ab-3);
  max-width: 60rem;
  margin: var(--ab-4) auto 0;
}
.empfehlung .etikett { display: block; margin-bottom: 0.625rem; }
.empfehlung--betont { border-color: rgba(224, 94, 10, 0.55); }
/* Einsatz-Zeile (orange) über der großen Grad-Angabe */
.empfehlung-zweck {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--orange);
}
/* "NACHLAUFKORREKTUR 2°" — gesperrte Versalien mit großer Gradzahl */
.empfehlung-grad {
  font-family: var(--schrift-titel);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--creme);
  margin: 0.5rem 0 0.625rem;
}
.empfehlung-grad span {
  display: inline-block;
  font-size: 2.6rem;
  line-height: 1;
  vertical-align: -0.12em;
  margin-left: 0.375rem;
}

/* --- Sektionen mit Konturlinien im Hintergrund (allgemein) --- */
.fig-linien-sektion { position: relative; overflow: hidden; }
.fig-linien-sektion .inhalt { position: relative; }

/* --- WEITERE VORTEILE (Konturlinien im Hintergrund) --- */
.fig-vorteile { position: relative; overflow: hidden; }
.fig-linien-grund {
  position: absolute; inset: 0;
  opacity: 0.3;
  pointer-events: none;
}
.fig-linien-grund img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.fig-vorteile .inhalt { position: relative; }
.fig-vorteile-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ab-3);
  margin-top: var(--ab-4);
}

/* --- NACHWEISE --- */
.fig-nachweise {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--ab-5);
  align-items: center;
}
.fig-nachweis-liste {
  list-style: none;
  margin: var(--ab-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--ab-3);
}
.fig-nachweis-liste li {
  display: grid;
  grid-template-columns: 2.875rem 1fr;
  gap: var(--ab-2);
  align-items: start;
}
.fig-nachweis-zeichen {
  display: grid;
  place-items: center;
  width: 2.875rem; height: 2.875rem;
  background: var(--flaeche);
  border: 0.0625rem solid var(--linie);
  border-radius: 0.75rem;
  font-family: var(--schrift-mono);
  font-size: 0.8rem;
  color: var(--orange);
}
.fig-nachweis-liste h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.fig-nachweis-liste p { margin: 0; color: var(--text-leise); font-size: 0.97rem; }

/* --- ABSCHLUSS / KAUF --- */
.fig-kauf { text-align: center; }
.fig-kauf-preis {
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: clamp(2.3rem, 4vw, 3.6rem);
  line-height: 1.1;
  margin: 0 0 0.375rem;
}
.fig-kauf-zeile { color: var(--text-leise); margin-bottom: var(--ab-3); }
.fig-kauf-knoepfe { justify-content: center; }

/* --- Bildschirmgrößen (Startseiten-Redesign) --- */
@media (max-width: 56.25rem) {
  .fig-zahlen { grid-template-columns: 1fr; gap: var(--ab-4); }
  .fig-zahl-nach { max-width: none; }
  .fig-vorteile-raster { grid-template-columns: 1fr; }
  .fig-nachweise { grid-template-columns: 1fr; gap: var(--ab-4); }
  .fig-empfehlungen { grid-template-columns: 1fr; }
  .fig-prinzip-medien { grid-template-columns: 1fr; }
  .fig-prinzip-medien .fig-produkt-frei { max-width: 20rem; margin: 0 auto; }
}
@media (max-width: 53.75rem) and (orientation: portrait) {
  /* Handy/Tablet HOCHKANT: Das Foto wird ein eigener Block oben (nicht mehr
     Hintergrund hinter dem Text). Darunter folgen — auf dem dunklen
     Grund — die Ringe, der Slogan und die Knöpfe. So liegt nichts
     mehr über dem Defender und alles bleibt lesbar. */
  .fig-hero { height: auto; min-height: 0; padding-top: 4rem; }
  .fig-hero-medien { position: relative; height: 68vw; min-height: 14rem; max-height: 30rem; }
  .fig-hero-foto { inset: 0; height: 100%; object-position: 50% 55%; }
  .fig-hero-verlauf {
    height: 55%;
    background: linear-gradient(180deg, rgba(23,22,20,0) 0%, rgba(23,22,20,0.35) 55%, var(--grund) 100%);
  }
  .fig-hero-inhalt {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ab-3);
    padding-top: 0;
    padding-bottom: var(--ab-4);
  }
  /* Ringe zuerst (order), etwas in das Foto hineinragend */
  .fig-hero-produkt {
    order: -1; flex: none;
    width: min(50vw, 15rem);
    margin: -22vw auto 0;
    position: relative; z-index: 2;
  }
  .fig-hero-titel { margin-bottom: var(--ab-2); }
}

/* ============================================================
   10. PRODUKTSEITE — Baugruppe, Hotspots, Bauteil-Dialoge
   ============================================================ */

/* Baugruppen-Bild mit klickbaren Punkten */
.fig-hotspot-bild { position: relative; border-radius: 1.75rem; overflow: hidden; }
.fig-hotspot-bild > img { width: 100%; height: auto; display: block; }
.fig-hotspot {
  position: absolute;
  /* Lage in Prozent des Bildes — steht als --x/--y am Knopf im HTML;
     --xm ist die waagrechte Lage im Handy-Ausschnitt (s. Abschnitt 11) */
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  width: 2.875rem; height: 2.875rem;
  border-radius: 50%;
  background: var(--creme);
  color: #171614;
  border: none;
  cursor: pointer;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 0.125rem 0.875rem rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease, background 0.2s ease;
}
.fig-hotspot:hover { transform: translate(-50%, -50%) scale(1.12); background: #fff; }
@media (max-width: 47.5rem) { .fig-hotspot { width: 2.125rem; height: 2.125rem; font-size: 1.25rem; } }

/* Bauteil-Dialog: helle Karte über abgedunkelter Seite */
.fig-dialog {
  border: none;
  border-radius: 1.75rem;
  background: var(--creme);
  color: var(--schwarz);
  padding: clamp(1.25rem, 3.5vw, 2.75rem);
  width: min(62.5rem, calc(100vw - 2 * var(--rand)));
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}
.fig-dialog::backdrop { background: rgba(10, 9, 8, 0.65); }
.fig-dialog-zu {
  position: absolute;
  top: 1rem; right: 1.25rem;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--schwarz);
}
.fig-dialog-medien {
  border-radius: 0.875rem;
  overflow: hidden;
  aspect-ratio: 2.9;
  background: #a9a9a9;
}
.fig-dialog-medien img { width: 100%; height: 100%; object-fit: cover; }
.fig-dialog-medien img[hidden] { display: none !important; }
/* Produktfotos auf weißem Grund: komplett zeigen, nicht beschneiden */
.fig-dialog-medien img.weiss { object-fit: contain; background: #fff; }
/* Die Distanzscheiben-Bilder sind höher — eigenes Seitenverhältnis */
#dialog-ringe .fig-dialog-medien { aspect-ratio: 1.9; }
.fig-dialog h3 { margin: 1.375rem 0 0.25rem; font-size: 1.5rem; }
.fig-dialog-pfeile { display: flex; gap: 0.75rem; margin-top: 0.875rem; }
.fig-pfeil--hell { color: var(--schwarz); border-color: var(--hell-linie); }
.fig-pfeil--hell:hover:not(:disabled) { border-color: var(--orange); color: var(--orange); }

/* Fakten-Tabelle im Dialog */
.fig-fakten { margin: 0.75rem 0 0; }
.fig-fakten > div {
  display: grid;
  grid-template-columns: 9.375rem 1fr;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 0.0625rem solid var(--hell-linie);
}
.fig-fakten dt {
  font-family: var(--schrift-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hell-leise);
  padding-top: 0.1875rem;
}
.fig-fakten dd { margin: 0; font-size: 0.97rem; }
@media (max-width: 37.5rem) {
  .fig-fakten > div { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* Konfigurator-Sektion mit Konturlinien und dunklem Panel */
.fig-konfig {
  position: relative;
  overflow: hidden;
  padding: var(--ab-4) 0;
  margin-top: var(--ab-5);
  /* Beim Weiterklicken springt die Seite zu dieser Sektion: sie beginnt
     direkt unter der festen Kopfzeile (scroll-margin) und ist mindestens
     einen Bildschirm hoch, damit der helle Lieferumfang darunter nicht
     hereinschaut. Inhalt senkrecht mittig. */
  scroll-margin-top: 4.25rem;
  min-height: calc(100svh - 4.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fig-konfig > .inhalt { width: 100%; }
.fig-konfig .inhalt { position: relative; }
.fig-konfig-panel {
  background: var(--flaeche);
  border: 0.0625rem solid var(--linie);
  border-radius: 1.75rem;
  padding: clamp(1.5rem, 3.5vw, 3rem);
}
/* FIN-Eingabefeld im Konfigurator */
.fin-eingabe {
  display: block;
  width: 100%;
  max-width: 23.75rem;
  padding: 0.75rem 1rem;
  background: var(--grund);
  border: 0.0625rem solid var(--linie);
  border-radius: 0.75rem;
  color: var(--creme);
  font: inherit;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fin-eingabe::placeholder { color: var(--text-leise); text-transform: none; letter-spacing: normal; }
.fin-eingabe:focus { outline: none; border-color: var(--orange); }

/* Ecwid-Shop: Kundenkonto-Links ausblenden — bestellt wird als Gast,
   ohne Benutzerkonto (Bestellstatus kommt per E-Mail) */
#shop .footer__link--my-account,
#shop .footer__link--track-order { display: none !important; }
/* Ecwid-Warenkorb entruempeln: Brotkrumen-Zeile („Shop/Warenkorb"),
   Shop-Fusszeile und die „Als Nächstes"-Schrittliste ausblenden */
#shop .breadcrumbs,
#shop .ec-breadcrumbs,
#shop .ec-footer,
#shop .ec-cart-next__header,
#shop .ec-cart-step--empty { display: none !important; }
/* „Einkauf fortsetzen" und „Shop durchstöbern" ausblenden — die Kits
   sollen ausschließlich über den Konfigurator zusammengestellt werden */
#shop .ec-cart__shopping,
#shop .ec-cart-shopping,
#shop .ec-cart--empty .ec-cart__button { display: none !important; }
/* ACHTUNG: Nicht den ganzen .ec-cart__steps-Block ausblenden — darin
   steckt auch das E-Mail-Feld, mit dem die Kasse beginnt! */

/* ------------------------------------------------------------
   Kontaktformular (kontakt.html)
   ------------------------------------------------------------ */
.kontakt-formular label {
  display: block;
  margin: 0 0 1.125rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.kontakt-formular .formular-feld {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--flaeche);
  border: 0.0625rem solid var(--linie);
  border-radius: 0.75rem;
  color: var(--creme);
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}
.kontakt-formular .formular-feld:focus { outline: none; border-color: var(--orange); }
.kontakt-formular textarea.formular-feld { resize: vertical; min-height: 8.75rem; }
.formular-zeile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
}
@media (max-width: 40rem) {
  .formular-zeile { grid-template-columns: 1fr; }
}
/* Honigtopf: für Menschen unsichtbar, für Spam-Programme ein
   normales Eingabefeld (nicht display:none, das erkennen manche) */
.formular-honigtopf {
  position: absolute !important;
  left: -624.9375rem !important;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
}

/* Bestätigung nach dem Absenden: ersetzt das Formular, damit man
   die Meldung nicht übersieht */
.kontakt-danke {
  padding: 2rem 1.5rem;
  border: 0.0625rem solid var(--orange);
  border-radius: 1rem;
  background: var(--flaeche);
  text-align: center;
}
.kontakt-danke:focus { outline: none; }
.kontakt-danke-titel {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--orange);
}
.kontakt-danke p { margin-inline: auto; }
.kontakt-danke .knopf { margin-top: 1.25rem; }

/* ------------------------------------------------------------
   Schritt-Konfigurator (produkt.html, Sektion #kaufen)
   ------------------------------------------------------------ */

/* Der Konfigurator ist eine "Bühne" — er darf breiter sein
   als die normale Textspalte: */
.fig-konfig .inhalt { max-width: min(94vw, 120rem); }

/* Fortschrittsbalken */
.kf-schritte {
  display: flex; flex-wrap: wrap; gap: 0.375rem 1.75rem;
  margin: 1.25rem 0 1.625rem; padding: 0; list-style: none;
  font-family: var(--schrift-mono); font-size: 0.85rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.kf-schritte li { display: flex; align-items: center; gap: 0.625rem; color: var(--text-leise); }
.kf-schritte li::after { content: "\2192"; margin-left: 1.125rem; color: var(--linie); }
.kf-schritte li:last-child::after { content: ""; margin: 0; }
.kf-schritte .nr {
  width: 1.625rem; height: 1.625rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 0.0625rem solid var(--linie); font-size: 0.72rem;
}
.kf-schritte li.aktiv { color: var(--creme); }
.kf-schritte li.aktiv .nr { border-color: var(--orange); background: rgba(224,94,10,.16); color: var(--orange); }
.kf-schritte li.fertig { color: var(--text-leise); }
/* Anklickbar sind alle schon besuchten Schritte — auch die VOR dem
   aktuellen, wenn man zurückgesprungen ist */
.kf-schritte li.erreichbar { cursor: pointer; }
.kf-schritte li.erreichbar:not(.fertig) .nr { border-color: var(--orange); color: var(--orange); }
.kf-schritte li.erreichbar:hover { color: var(--creme); }
.kf-schritte li.fertig .nr { border-color: var(--orange); background: var(--orange); color: #1A1000; }

/* Hauptraster: grosses Bild links, Panel rechts */
/* Groesse in rem, damit der Konfigurator auf jedem Bildschirm gleich
   wirkt: Panel 28rem breit, Bild mindestens 42rem hoch */
.kf-raster { display: grid; grid-template-columns: 1fr 28rem; gap: 2rem; align-items: stretch; }
@media (max-width: 60rem) { .kf-raster { grid-template-columns: 1fr; } }

.kf-visual {
  position: relative; overflow: hidden;
  border: 0.0625rem solid var(--linie); border-radius: var(--radius);
  background: var(--flaeche); min-height: 42rem;
}
@media (max-width: 60rem) { .kf-visual { min-height: 17.5rem; } }
.kf-visual img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.kf-visual img.zeigen { opacity: 1; }
.kf-visual img.einpassen { object-fit: contain; padding: 8%; }
/* Produktfotos mit weißem Hintergrund: komplett zeigen, Fläche weiß */
.kf-visual img.weiss { object-fit: contain; background: #fff; padding: 3%; }
.kf-visual figcaption {
  position: absolute; left: 1.25rem; bottom: 1rem; z-index: 2;
  font-family: var(--schrift-mono); font-size: 0.75rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--creme);
  background: rgba(23,22,20,.72); padding: 0.4375rem 0.875rem; border-radius: 62.4375rem;
}

/* Frage-Panel rechts */
.kf-panel {
  border: 0.0625rem solid var(--linie); border-radius: var(--radius);
  background: var(--grund); padding: 2rem 2rem 1.75rem;
  display: flex; flex-direction: column;
}
.kf-panel h2 { font-size: 1.6rem; margin-bottom: 0.5rem; }
.kf-frage { color: var(--text-leise); font-size: 1rem; margin-bottom: 1.25rem; }
.kf-hinweis { color: var(--orange); font-size: 0.95rem; margin: 0.75rem 0 0; }

/* Antwort-Karten */
.kf-optionen { display: grid; gap: 0.75rem; margin-bottom: 0.5rem; }
.kf-option {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  border: 0.0625rem solid var(--linie); border-radius: 0.75rem;
  padding: 1rem 1.25rem; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  font-weight: 600; font-size: 1.05rem;
}
.kf-option small { display: block; font-weight: 400; color: var(--text-leise); font-size: 0.85rem; }
.kf-option .preis { font-family: var(--schrift-mono); font-size: 0.85rem; color: var(--text-leise); white-space: nowrap; }
.kf-option:hover { border-color: var(--creme); }
/* Tastaturbedienung: Fokusrahmen um die ganze Karte (das Radio-Feld selbst ist unsichtbar) */
.kf-option:has(input:focus-visible) { outline: 0.125rem solid var(--orange); outline-offset: 0.1875rem; }
.kf-option.gewaehlt { border-color: var(--orange); background: rgba(224,94,10,.13); }
.kf-option.gewaehlt .preis { color: var(--orange); }
.kf-option input { position: absolute; opacity: 0; pointer-events: none; }
.kf-untertitel {
  font-family: var(--schrift-mono); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--orange); margin: 0.875rem 0 0.5rem;
}

/* Aufklapp-Erklaerungen im Panel */
.kf-panel details { margin-top: 0.75rem; border-top: 0.0625rem solid var(--linie); padding-top: 0.75rem; }
.kf-panel summary { cursor: pointer; color: var(--orange); font-size: 0.95rem; font-weight: 600; }
.kf-panel details p { color: var(--text-leise); font-size: 0.92rem; margin: 0.625rem 0 0; }

/* Panel-Fuss: Preis + Navigation */
.kf-fuss { margin-top: auto; padding-top: 1.125rem; }
.kf-preiszeile { display: flex; align-items: baseline; justify-content: space-between; border-top: 0.0625rem solid var(--linie); padding-top: 0.875rem; margin-bottom: 0.875rem; }
.kf-preiszeile .wert { font-family: var(--schrift-titel); font-weight: 600; font-size: 2rem; }
.kf-preiszeile .label { color: var(--text-leise); font-size: 0.9rem; }
.kf-knoepfe { display: flex; gap: 0.625rem; }
.kf-knoepfe .knopf { flex: 1; justify-content: center; }
.knopf--leise { background: none; border: 0.0625rem solid var(--linie); color: var(--text-leise); }
.knopf--leise:hover { border-color: var(--creme); color: var(--creme); }

/* Build Card (Schritt 5) */
.kf-card {
  border: 0.0625rem solid var(--orange); border-radius: var(--radius);
  padding: 1.625rem; background: var(--flaeche);
  font-family: var(--schrift-mono); font-size: 0.92rem; line-height: 1.9;
}
.kf-card .kopfzeile { letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange); font-size: 0.78rem; margin-bottom: 0.875rem; }
.kf-card .fahrzeug { font-family: var(--schrift-titel); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 0.625rem; }
.kf-card .zeile { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 0.0625rem dashed var(--linie); }
/* WICHTIG: display:flex wuerde das hidden-Attribut ueberstimmen —
   nicht gewaehlte Zeilen muessen trotzdem verschwinden: */
.kf-card .zeile[hidden] { display: none !important; }
.kf-card .zeile span:first-child { color: var(--text-leise); }
.kf-card .summe { display: flex; justify-content: space-between; margin-top: 0.875rem; font-size: 1.15rem; font-weight: 600; }
.kf-card .lieferzeit { color: var(--text-leise); font-size: 0.8rem; margin-top: 0.25rem; }

/* Baugruppen-Bild: breiter als die normale Inhaltsbreite */
.fig-hotspot-breit {
  max-width: min(90vw, 120rem);
  margin: 2.5rem auto 0;
  padding-inline: var(--rand);
}
/* CAD-Rahmen-Variante für helle (creme) Sektionen */
.cad-rahmen--hell {
  border-color: var(--hell-linie);
  background: #fff;
}
/* Kleine Bildunterschrift unter dem Lieferumfangs-Foto */
.cad-rahmen figcaption {
  padding: 0.75rem 1.25rem 0.875rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--hell-leise);
  border-top: 0.0625rem solid var(--hell-linie);
}

/* ============================================================
   11. ÜBER-UNS-SEITE
   ============================================================ */

/* Über-uns: alle Textabschnitte mittig */
.ueber-abschnitt { text-align: center; }
.ueber-abschnitt .haken-liste {
  display: inline-block;
  text-align: left;   /* Liste selbst bleibt links bündig lesbar */
}

/* Slogan unter dem Titel im Über-uns-Kopfbild */
.ueber-slogan {
  font-family: var(--schrift-titel);   /* Markenschrift, nicht Mono */
  font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1A1000;
  margin: 1rem 0 0;
}
/* „In Germany" als eigene Zeile in Orange */
/* Dunkel auf hellem Himmel - hoehere Spezifitaet, damit die allgemeine
   Absatzfarbe der Unterseiten (.unterseite p) nicht gewinnt */
.ueber-hero .ueber-slogan { color: #1A1000; }
.ueber-hero .ueber-slogan .land { display: block; color: var(--orange); }

/* Großes Kopf-Bild mit dunklem Titel oben links im Bild */
.ueber-hero {
  position: relative;
  background: var(--grund);
  /* Schwarzes Band oben — wie im Hero-Bereich der Startseite */
  padding-top: clamp(4rem, 6.5vw, 5.75rem);
}
.ueber-hero > img {
  display: block;
  width: 100%;
  /* Genau ein Bildschirm hoch: sichtbare Hoehe minus schwarzes Band oben.
     Das Foto wird dafuer oben/unten passend beschnitten. */
  height: calc(100svh - clamp(4rem, 6.5vw, 5.75rem));
  object-fit: cover;
  object-position: 50% 60%;
}
.ueber-hero-text {
  position: absolute;
  top: clamp(8.5rem, 14vw, 13rem);
  left: 0; right: 0;
  margin-inline: auto;
  color: #211E1A;                       /* dunkler Text auf hellem Himmel */
}
.ueber-hero-text .etikett { color: #211E1A; opacity: 0.75; }
.ueber-hero-text h1 {
  color: #211E1A;
  font-size: clamp(2.4rem, 5vw, 4rem);
  margin: 0.375rem 0 0;
}

.ueber-abschnitt { margin-top: clamp(3rem, 6vw, 5.5rem); max-width: 56.25rem; margin-inline: auto; }

/* Video-Band direkt unter dem Kopfbild: das CNC-Video läuft stumm in
   Dauerschleife im Hintergrund, davor liegt der Einleitungstext.
   Schleier (dunkler Verlauf) sorgt für Lesbarkeit. Video tauschen:
   Dateiname in ueber-uns.html / en/about.html ändern. */
.ueber-video {
  position: relative;
  overflow: hidden;
  background: var(--grund);
}
.ueber-video-film {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ueber-video-schleier {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(23, 22, 20, 0.72) 0%,
    rgba(23, 22, 20, 0.46) 45%,
    rgba(23, 22, 20, 0.84) 100%);
}
.ueber-video-inhalt {
  position: relative;
  padding-top: clamp(4rem, 9vw, 8rem);
  padding-bottom: clamp(4rem, 9vw, 8rem);
}
.ueber-video .ueber-abschnitt { margin-top: 0; }
.ueber-video .ueber-abschnitt p { color: var(--creme); }
.ueber-video .ueber-gross { text-shadow: 0 0.0625rem 0.75rem rgba(0, 0, 0, 0.45); }
@media (prefers-reduced-motion: reduce) {
  .ueber-video-film { display: none; }   /* nur das Standbild (poster) bleibt */
}
.ueber-abschnitt p { color: var(--text-leise); }
.ueber-abschnitt h2 { margin-bottom: var(--ab-3); }
.ueber-gross {
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  color: var(--text) !important;
  line-height: 1.7;
}

.ueber-koepfe,
.ueber-merkmale {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ab-3);
}
.ueber-koepfe .karte p,
.ueber-merkmale .karte p { font-size: 0.97rem; }

/* Urlaubs-Galerie: 3 Spalten, einheitliches Format */
.ueber-galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
  max-width: none;
}
.ueber-galerie img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 0.0625rem solid var(--linie);
}
.ueber-abschnitt:has(.ueber-galerie) { max-width: none; }

@media (max-width: 50rem) {
  .ueber-koepfe, .ueber-merkmale { grid-template-columns: 1fr; }
  .ueber-galerie { grid-template-columns: 1fr 1fr; }
}
/* Häufige Fragen (Kontakt-Seite): Fragen in Orange */
#fragen h3 { color: var(--orange); margin-top: 1.75rem; }


/* ============================================================
   11. HANDY-ANSICHT (schmale Bildschirme)
   ------------------------------------------------------------
   Es gibt KEINE eigene Handy-Seite: dieselben HTML-Dateien werden
   mit den Regeln hier unten anders gesetzt, sobald der Bildschirm
   schmaler als die jeweilige Grenze ist. Ziel: Desktop-Optik
   beibehalten, aber lesbar — nichts ragt über den rechten Rand,
   Fließtext linksbündig, große Tippflächen.
   ============================================================ */

/* --- bis 47.5rem (760px): Tablets hochkant & Handys --- */
@media (max-width: 47.5rem) {
  /* Sektionsabstände enger — auf dem Handy wirken 6.5rem wie Löcher */
  :root { --ab-6: 4rem; --ab-5: 3rem; }

  /* Lange Wörter („Achsverbreiterungskit") dürfen nie über den Rand
     hinauslaufen — Silbentrennung (lang="de") und Notumbruch */
  h1, h2, h3, .fig-hero-titel, .fig-zahlen-titel, .fig-prinzip-titel {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: anywhere;
  }
  h1 { font-size: clamp(1.75rem, 7.5vw, 2.6rem); }
  h2 { font-size: clamp(1.5rem, 6.5vw, 2rem); }
  .fig-h2, .fig-h2-mittig, .fig-zahlen-titel { font-size: clamp(1.4rem, 5.5vw, 1.9rem); }
  /* Startseite oben: die zwei einheitlichen Stufen fuers Handy */
  /* 6.8vw: so bleibt "60 mm mehr Spur. / Keine Kompromisse." auch auf
     schmalen Handys zweizeilig */
  :root { --start-gross: clamp(1.45rem, 6.8vw, 2.4rem); --start-text: 1.15rem; }
  .fig-zahlen-titel .gross  { font-size: clamp(1.8rem, 8.5vw, 2.6rem); }
  .fig-zahl-wert { font-size: clamp(3rem, 14vw, 4.5rem); }
  .fig-zahlen-intro, .fig-karte p, .fig-karte--text p { font-size: 1rem; }

  /* Fließtext linksbündig (Überschriften bleiben mittig wie am Desktop) */
  .fig-prinzip-text, .fig-zahlen-intro, .fig-zahlen-fussnote,
  .ueber-abschnitt p, .ueber-abschnitt ul, .ueber-abschnitt .karte,
  .mittig p, .mittig .karte, .mittig .kontakt-formular, .mittig #fragen,
  .mittig h3 { text-align: left; }
  .mittig h1, .mittig h2, .ueber-abschnitt h2, .mittig .oberzeile { text-align: center; }
  .ueber-abschnitt .haken-liste { display: block; }

  /* Tippflächen: mindestens 2.75rem (44px) hoch */
  .knopf { min-height: 2.75rem; padding: 0.8rem 1.5rem; }
  .chip span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.6rem 1.1rem; }
  .hauptnav a { padding: 0.8rem 0; }
  .fig-hotspot { width: 2.25rem; height: 2.25rem; font-size: 1.35rem; }

  /* Karussell (Nachlauf / Lenkrollradius): eine Karte fast in voller
     Breite, die nächste lugt nur noch schmal hervor */
  .fig-karte { flex-basis: calc(100vw - var(--rand) * 2 - 2rem); }

  /* Baugruppen-Bild (Produktseite): auf dem Handy nur der mittlere
     Ausschnitt, dafür groß genug für die Plus-Punkte. Der Ausschnitt
     zeigt 42 % der Bildbreite — deshalb die eigenen --xm-Werte. */
  .fig-hotspot-bild { aspect-ratio: 4 / 3; }
  .fig-hotspot-bild > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .fig-hotspot { left: var(--xm, var(--x)); }

  /* Über-uns-Kopfbild: Slogan nicht mehr im Bild, sondern darunter */
  /* Handy: Foto in natuerlicher Hoehe (4:3), nicht auf Bildschirmhoehe gezogen */
  .ueber-hero > img { height: auto; aspect-ratio: 4 / 3; }
  .ueber-hero-text { position: static; margin-top: var(--ab-3); text-align: center; }
  .ueber-hero .ueber-slogan { color: var(--creme); font-size: 1.15rem; letter-spacing: 0.12em; }
}

/* --- bis 40rem (640px): reine Handy-Ansicht --- */
@media (max-width: 40rem) {
  /* Schrittleiste im Konfigurator: nur Kreise, Beschriftung nur beim
     aktiven Schritt — passt so in eine Zeile */
  .kf-schritte { flex-wrap: nowrap; gap: 0.4rem; margin: 1rem 0 1.25rem; overflow: hidden; letter-spacing: 0.08em; }
  .kf-schritte li::after { display: none; }
  .kf-schritte li:not(.aktiv) { font-size: 0; gap: 0; }
  .kf-schritte .nr { font-size: 0.68rem; flex: none; width: 1.4rem; height: 1.4rem; }
  .kf-schritte li.aktiv { white-space: nowrap; }
  .kf-visual { min-height: 0; aspect-ratio: 4 / 3; }
}

/* --- Laptop/Desktop mit NIEDRIGEM Bildschirm (unter 60rem = 960px Höhe,
       also praktisch jeder Laptop): Konfigurator so verdichten, dass ein
       Schritt samt Knöpfen ohne Scrollen sichtbar ist. Greift NICHT auf
       Handys (min-width) — dort gelten die Blöcke darunter. --- */
@media (min-width: 60.01rem) and (max-height: 60rem) {
  .fig-konfig { padding: 0.75rem 0 1rem; }
  .fig-konfig .oberzeile { display: none; }
  .kf-schritte { margin: 0.25rem 0 0.6rem; font-size: 0.75rem; }
  .kf-raster { gap: 1.25rem; }
  .kf-visual { min-height: 0; }
  .kf-panel { padding: 1.1rem 1.25rem 1rem; }
  .kf-panel h2 { font-size: 1.2rem; margin-bottom: 0.3rem; }
  .kf-frage { font-size: 0.88rem; line-height: 1.45; margin-bottom: 0.6rem; }
  .kf-hinweis { font-size: 0.85rem; line-height: 1.45; margin-top: 0.5rem; }
  .kf-optionen { gap: 0.45rem; margin-bottom: 0.3rem; }
  .kf-option { padding: 0.55rem 0.9rem; font-size: 0.93rem; }
  .kf-option small { font-size: 0.78rem; }
  .kf-untertitel { margin: 0.5rem 0 0.3rem; }
  .fin-eingabe { padding: 0.55rem 0.8rem; }
  #kf-fin-hinweis { font-size: 0.78rem; line-height: 1.4; }
  .kf-panel details { margin-top: 0.5rem; padding-top: 0.5rem; }
  .kf-panel summary { font-size: 0.85rem; }
  .kf-panel details p { font-size: 0.85rem; margin-top: 0.4rem; }
  /* Preis und Knöpfe in einer Zeile (spart eine Zeile Höhe) */
  .kf-fuss { padding-top: 0.6rem; margin-top: 0.6rem; border-top: 0.0625rem solid var(--linie); display: flex; align-items: center; gap: 0.75rem; }
  .kf-preiszeile { flex: 1 1 auto; min-width: 0; flex-direction: column; align-items: flex-start; border: 0; padding: 0; margin: 0; gap: 0; }
  .kf-preiszeile .wert { font-size: 1.35rem; line-height: 1.1; }
  .kf-preiszeile .label { font-size: 0.7rem; line-height: 1.2; }
  .kf-knoepfe { flex: 0 0 auto; gap: 0.5rem; }
  .kf-knoepfe .knopf { padding: 0.55rem 0.9rem; font-size: 0.92rem; }
  .kf-card { padding: 1rem; font-size: 0.85rem; line-height: 1.6; }
  .kf-card .fahrzeug { font-size: 1.2rem; margin-bottom: 0.4rem; }
  .kf-card .kopfzeile { margin-bottom: 0.5rem; }
}

/* --- Handy HOCHKANT: Animationen größer, Konfigurator auf einen Bildschirm --- */
@media (max-width: 47.5rem) and (orientation: portrait) {
  /* Scroll-Kino (läuft mobil als Video): statt schmalem Streifen ein
     16:10-Ausschnitt — die Ränder werden beschnitten, die Achse bleibt
     mittig groß */
  /* top:auto ist wichtig — die Sticky-Regel setzt ein top, das die Bühne
     bei position:relative sonst um einen halben Bildschirm nach unten schiebt */
  .fig-anim.zeigt-video .fig-anim-buehne { position: relative; top: auto; aspect-ratio: 16 / 10; height: auto; overflow: hidden; }
  .fig-anim.zeigt-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* Karten-Videos (Nachlauf) ebenso höher */
  #nachlauf .fig-karte-medien { aspect-ratio: 16 / 10; }

  /* Konfigurator kompakt, damit ein Schritt samt Bild auf einen
     Bildschirm passt */
  .fig-konfig { padding-top: 1rem; scroll-margin-top: 4.25rem; min-height: 0; display: block; }
  .fig-konfig .oberzeile { margin-bottom: 0.25rem; }
  .kf-schritte { margin: 0.5rem 0 0.75rem; }
  .kf-raster { gap: 0.75rem; }
  .kf-visual { aspect-ratio: 21 / 9; }
  /* Schritt 3 (Hinterachse) hat viel Text: Foto flacher.
     Schritt 4 (Zubehör + FIN) ist der längste: dort ganz ohne Foto. */
  .kf-raster[data-schritt="3"] .kf-visual { aspect-ratio: 3 / 1; }
  .kf-raster[data-schritt="4"] .kf-visual { display: none; }
  /* Schritt 5 zeigt das Set-Foto (Format ca. 2,4:1) — flach, aber sichtbar */
  .kf-raster[data-schritt="5"] .kf-visual { display: block; aspect-ratio: 21 / 9; }
}

/* --- Kompaktes Konfigurator-Panel: Handy HOCHKANT und Handy QUER ---
   (gilt fuer beide Lagen; die Lage-spezifischen Masse stehen in den
   Bloecken darueber/darunter) */
@media (max-width: 47.5rem) and (orientation: portrait), (max-height: 30rem) and (orientation: landscape) {
  .kf-panel { padding: 0.875rem 0.875rem 0.75rem; }
  .kf-panel h2 { font-size: 1.05rem; margin-bottom: 0.2rem; }
  .kf-frage { font-size: 0.8rem; line-height: 1.4; margin-bottom: 0.5rem; }
  .kf-hinweis { font-size: 0.8rem; line-height: 1.4; margin-top: 0.4rem; }
  .kf-optionen { gap: 0.35rem; margin-bottom: 0.25rem; }
  .kf-option { padding: 0.5rem 0.8rem; font-size: 0.9rem; }
  .kf-option small { font-size: 0.72rem; }
  .kf-untertitel { margin: 0.45rem 0 0.3rem; }
  .fin-eingabe { padding: 0.5rem 0.75rem; }
  .kf-panel details { margin-top: 0.4rem; padding-top: 0.4rem; }
  .kf-panel summary { font-size: 0.8rem; }
  .kf-panel details p { font-size: 0.8rem; }
  /* Preis und Knöpfe in EINER Zeile */
  /* WICHTIG: min-width:0, sonst dehnt langer Inhalt (Preiszeile,
     Optionstexte) die Rasterspalte über den Bildschirmrand hinaus */
  .kf-raster > * , .kf-panel, .kf-inhalt { min-width: 0; }
  .kf-option span { min-width: 0; }
  .kf-fuss { padding-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem; border-top: 0.0625rem solid var(--linie); margin-top: 0.5rem; }
  .kf-preiszeile { flex: 1 1 auto; min-width: 0; flex-direction: column; align-items: flex-start; border: 0; padding: 0; margin: 0; gap: 0; }
  .kf-preiszeile .wert { font-size: 1.2rem; line-height: 1.1; }
  .kf-preiszeile .label { font-size: 0.62rem; line-height: 1.15; white-space: normal; }
  .kf-knoepfe { flex: 0 0 auto; gap: 0.4rem; }
  .kf-knoepfe .knopf { min-height: 2.5rem; padding: 0.45rem 0.6rem; font-size: 0.9rem; }
  .kf-card { padding: 0.875rem; font-size: 0.8rem; line-height: 1.55; }
  .kf-card .fahrzeug { font-size: 1.15rem; margin-bottom: 0.4rem; }
  .kf-card .kopfzeile { margin-bottom: 0.5rem; }
}

/* --- Handy QUER (niedriger Bildschirm): Hero wie am Desktop, nur
       kleiner; Karten mit Animation und Text nebeneinander --- */
@media (max-height: 30rem) and (orientation: landscape) {
  :root { --ab-6: 2rem; --ab-5: 2rem; }
  .kopf-innen { padding-block: 0.5rem; }
  .logo img { height: 1.75rem; }

  /* Hero: Foto als Hintergrund, Text links, Ringe rechts — auf die
     Bildschirmhöhe gestaucht */
  .fig-hero { height: 100svh; min-height: 0; }
  .fig-hero-foto { inset: 3rem 0 0 0; height: calc(100% - 3rem); }
  .fig-hero-inhalt { padding-bottom: 1rem; gap: 1.5rem; }
  .fig-hero-titel { font-size: 1.2rem; margin-bottom: 0.75rem; }
  .fig-hero-logo { width: clamp(11rem, 30vw, 17rem); }
  .fig-hero-produkt { flex-basis: clamp(7rem, 22vw, 11rem); }
  .held-knoepfe .knopf { padding: 0.55rem 1.1rem; font-size: 0.9rem; min-height: 0; }

  /* Karussell-Karten: Animation links, Text rechts — so ist beides
     zusammen auf einem Bildschirm zu sehen */
  .fig-h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
  .fig-karte {
    flex-basis: calc(100vw - var(--rand) * 2 - 3rem);
    display: grid; grid-template-columns: 1.15fr 1fr; column-gap: 1rem; align-items: center;
    padding: 0.75rem 1rem;
  }
  .fig-karte .etikett { grid-column: 1 / -1; margin-bottom: 0.4rem; }
  .fig-karte p, .fig-karte--text p { margin: 0; font-size: 0.84rem; line-height: 1.4; }
  .fig-karte--text p { grid-column: 1 / -1; }
  .fig-karussell-knoepfe { margin-top: 0.75rem; }

  /* Konfigurator: Bild und Panel nebeneinander wie am Desktop, aber so
     klein, dass ein Schritt komplett auf den niedrigen Bildschirm passt.
     Die Kopfzeile blendet sich beim Runterscrollen aus (main.js), deshalb
     darf die Sektion ganz oben beginnen. */
  .fig-konfig { min-height: 100svh; scroll-margin-top: 0.5rem; padding: 0.75rem 0; margin-top: var(--ab-4); }
  .fig-konfig .oberzeile { margin-bottom: 0.2rem; }
  .kf-schritte { margin: 0.4rem 0 0.6rem; font-size: 0.72rem; }
  .kf-raster { grid-template-columns: 1fr 22rem; gap: 1rem; }
  .kf-visual { min-height: 0; }
  /* Schrittleiste wie hochkant: nur Kreise, Text nur beim aktiven Schritt */
  .kf-schritte { flex-wrap: nowrap; gap: 0.4rem; }
  .kf-schritte li::after { display: none; }
  .kf-schritte li:not(.aktiv) { font-size: 0; gap: 0; }
  .kf-schritte .nr { font-size: 0.68rem; width: 1.4rem; height: 1.4rem; flex: none; }
  .kf-option small { display: none; }
  /* Nur das Noetigste zeigen — Erklaertexte und Aufklapper fallen weg,
     sonst passt kein Schritt auf 375 px Hoehe */
  .fig-konfig .oberzeile { display: none; }
  .kf-schritte { margin: 0 0 0.5rem; }
  .kf-frage, .kf-hinweis, .kf-panel details { display: none; }
  #kf-fin-hinweis { display: block; font-size: 0.66rem; line-height: 1.3; margin-top: 0.3rem; }
  .kf-panel { padding: 0.6rem 0.75rem 0.5rem; }
  .kf-panel h2 { font-size: 0.95rem; margin-bottom: 0.3rem; }
  .kf-optionen { gap: 0.3rem; }
  .kf-option { padding: 0.4rem 0.7rem; font-size: 0.85rem; }
  .kf-option small { font-size: 0.68rem; }
  .kf-untertitel { margin: 0.35rem 0 0.25rem; font-size: 0.65rem; }
  .fin-eingabe { padding: 0.35rem 0.6rem; font-size: 0.85rem; }
  .kf-fuss { padding-top: 0.4rem; margin-top: 0.4rem; }
  .kf-preiszeile .label br, .kf-preiszeile .label > span { display: none; }
  .kf-preiszeile .wert { font-size: 1.05rem; }
  .kf-knoepfe .knopf { min-height: 2.2rem; padding: 0.35rem 0.6rem; font-size: 0.85rem; }
  .kf-card { padding: 0.6rem 0.75rem; font-size: 0.72rem; line-height: 1.45; }
  .kf-card .kopfzeile { font-size: 0.65rem; margin-bottom: 0.3rem; }
  .kf-card .fahrzeug { font-size: 1rem; margin-bottom: 0.25rem; }
  .kf-card .summe { margin-top: 0.4rem; font-size: 0.95rem; }
  .kf-card .lieferzeit { display: none; }
}