/* ==========================================================================
   Lesum Logistik – Stylesheet
   Reines CSS, kein Framework. Aufgebaut mit CSS Custom Properties,
   Flexbox und Grid. Struktur:
   1. Reset & Grundlagen
   2. Design Tokens (Variablen)
   3. Typografie
   4. Layout-Hilfsklassen
   5. Navigation
   6. Buttons
   7. Hero (Startseite)
   8. Sektionen & Karten (wiederverwendbar über alle Seiten)
   9. Seiten-Header (Unterseiten)
   10. Fuhrpark-Galerie
   11. Formular (Kontakt)
   12. Footer
   13. Scroll-Animationen (Fade-in / Parallax)
   14. Responsive Anpassungen
   15. Landing-Page (Startseite unterhalb Hero)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset & Grundlagen
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* Respektiert Nutzer:innen, die reduzierte Bewegung bevorzugen */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input,
textarea {
  font: inherit;
}

/* --------------------------------------------------------------------------
   2. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Primärfarben */
  --color-black: #0a0a0b;
  --color-black-soft: #131315;
  --color-black-elevated: #1c1c1f;
  --color-yellow: #ffc400;
  --color-yellow-soft: #ffd84d;

  /* Sekundärfarben */
  --color-red: #d6202c;
  --color-gray-900: #1f2023;
  --color-gray-700: #46484d;
  --color-gray-500: #6f7178;
  --color-gray-300: #b7b9bf;
  --color-gray-100: #e9e9ec;
  --color-white: #ffffff;
  --color-off-white: #f7f7f8;
  /* Anthrazit-Zwischenton fuer "Surface"-Sektionen auf den Unterseiten –
     eine Stufe heller als --color-black, damit benachbarte dunkle
     Sektionen Ton-in-Ton ineinander uebergehen (siehe .section--surface
     weiter unten) statt hart zu brechen. */
  --color-anthracite: #17171a;

  /* Semantische Zuordnungen – bewusst komplett dunkel: die Unterseiten
     nutzen dieselben generischen Komponenten (.section-title, .card,
     .quote-block, .form-field, ...) wie frueher im hellen Modus, sollen
     aber jetzt genauso dunkel/hochwertig wirken wie Hero und Startseiten-
     Sektionen darunter. --bg-page/--bg-surface/--text-primary/-secondary
     sind NUR auf den Unterseiten in Gebrauch (Hero/Landing-Sektionen
     setzen ihre Farben direkt) – daher risikolos hier zentral umgestellt. */
  --bg-page: #101012;
  --bg-surface: var(--color-anthracite);
  --bg-dark: var(--color-black);
  --text-primary: var(--color-white);
  --text-secondary: var(--color-gray-300);
  --text-on-dark: var(--color-white);
  --text-on-dark-muted: var(--color-gray-300);
  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-subtle-dark: rgba(255, 255, 255, 0.12);

  /* Typografie */
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  --fs-hero: clamp(2.8rem, 7vw, 6.4rem);
  --fs-h1: clamp(2.2rem, 4.5vw, 3.6rem);
  --fs-h2: clamp(1.7rem, 3vw, 2.4rem);
  --fs-h3: clamp(1.2rem, 2vw, 1.5rem);
  --fs-body-lg: clamp(1.1rem, 1.4vw, 1.35rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Abstände */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Layout */
  --content-max: 1200px;
  --content-narrow: 760px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  /* Bewegung */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 220ms;
  --duration-mid: 480ms;
  --duration-slow: 900ms;

  /* Header-Höhe (für Scroll-Offsets etc.) */
  --header-height: 112px;
  --header-height-scrolled: 80px;

  /* (Die frueheren --light-*-Scheinwerfer-Tokens entfielen in Runde 67:
     der Hero nutzt jetzt zwei komplette Szenen-Bilder statt CSS-Lichter.) */
}

/* --------------------------------------------------------------------------
   3. Typografie
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

p {
  color: var(--text-secondary);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-yellow);
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--color-yellow);
  display: inline-block;
}

.section-title {
  font-size: var(--fs-h2);
  margin-block: var(--space-sm) var(--space-md);
  color: var(--text-primary);
}

.section-lead {
  font-size: var(--fs-body-lg);
  max-width: 640px;
  color: var(--text-secondary);
}

.text-on-dark {
  color: var(--text-on-dark);
}

/* --------------------------------------------------------------------------
   4. Layout-Hilfsklassen
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.section {
  padding-block: var(--space-2xl);
}

.section--tight {
  padding-block: var(--space-xl);
}

.section--dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
}

/* "Surface"-Sektionen sind ein Anthrazit-Ton (siehe --bg-surface), keine
   helle Flaeche. Trennung zu .section--dark/.page-header entsteht primaer
   ueber Abstand/Typografie/duenne Linien/gelbe Akzente – EIN grosser
   verwaschener Radial-/Nebel-Verlauf ueber die ganze Sektion wurde bewusst
   verworfen (wirkte schwammig). Wo direkt an der Sektionsgrenze Schwarz auf
   Anthrazit (oder umgekehrt) trifft, wird das aber gezielt mit einem
   praezisen, kurzen 2-Stop-Verlauf genau zwischen den beiden echten Toenen
   abgefedert (siehe .transition-fade-in/.transition-fade-out direkt unten)
   – das ist etwas anderes als der verworfene Nebel-Ansatz: kein Ueberlagern
   der ganzen Flaeche, nur ein kontrollierter Farbwechsel exakt am Uebergang,
   in Anlehnung an das bereits gelungene Vorbild .europe-map-section. */
.section--surface {
  background: var(--bg-surface);
}

/* Wiederverwendbare Uebergangs-Klassen fuer die beiden Grundtoene dieser
   Seite. Zusaetzlich zu section--surface/section--dark auf die jeweils
   betroffene Sektion setzen (ueberschreibt nur "background", Reihenfolge im
   Stylesheet sorgt fuer Vorrang). Einsatz:
   - .transition-fade-in: Sektion folgt direkt auf einen schwarzen Block
     (page-header o.ae.) und geht Richtung Anthrazit (typischerweise die
     erste .section--surface nach dem page-header).
   - .transition-fade-out: Sektion folgt auf einen anthrazitfarbenen Block
     und geht zurueck Richtung Schwarz (typischerweise vor dem naechsten
     .section--dark-Block oder dem Footer). */
.transition-fade-in {
  background: linear-gradient(180deg, var(--color-black) 0%, var(--color-anthracite) 100%);
}

.transition-fade-out {
  background: linear-gradient(180deg, var(--color-anthracite) 0%, var(--color-black) 100%);
}

.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.stack {
  display: flex;
  flex-direction: column;
}

.center {
  text-align: center;
  margin-inline: auto;
}

.divider {
  height: 1px;
  background: var(--border-subtle);
  border: none;
  margin-block: var(--space-xl);
}

/* Reusable soft section separator for two adjoining sections that already
   share the same flat background tone (no color gradient possible/needed) –
   a short yellow accent rule instead of a hard content-to-content cut,
   same visual language as .eyebrow's dash. Sits at the top of the section
   that follows, right before its eyebrow/title block. */
.section-divider {
  width: 48px;
  height: 2px;
  background: var(--color-yellow);
  margin-bottom: var(--space-lg);
}

/* --------------------------------------------------------------------------
   5. Navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  padding-block: var(--space-md);
  background: rgba(10, 10, 11, 0.4);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background var(--duration-mid) var(--ease-premium),
    padding-block var(--duration-mid) var(--ease-premium),
    border-color var(--duration-mid) var(--ease-premium);
}

/* Dunklerer, kompakterer Header sobald gescrollt wurde – ruhiger, kleiner
   Uebergang statt hartem Sprung (siehe auch .header-brand__text Groessenwechsel) */
.site-header.is-scrolled {
  background: rgba(10, 10, 11, 0.88);
  padding-block: var(--space-xs);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

/* Der Header teilt sich die generische ".container"-Klasse mit allen
   anderen Sektionen (--content-max: 1200px, bewusst schmal/editorial fuer
   Fliesstext) – auf sehr breiten Screens sass dadurch auch der Header
   eng in der Mitte zusammengedraengt, mit viel ungenutzter Luft links/
   rechts. Nur fuer den Header per hoeherer Selektor-Spezifitaet ueber-
   schrieben (".container" selbst bleibt fuer alle anderen Sektionen
   unangetastet): Branding (erstes Flex-Kind) und Navigation (zweites
   Flex-Kind, der Mobile-Toggle ist auf Desktop "display: none" und zaehlt
   nicht mit) ruecken durch "justify-content: space-between" im breiteren
   Container automatisch weiter auseinander zu den Raendern. Unterhalb von
   1760px Viewport-Breite hat das keinerlei Effekt – der Header verhaelt
   sich dort exakt wie zuvor. */
.site-header .container {
  max-width: 1760px;
}

/* Markenschriftzug im Header (ersetzt das fruehere Bildlogo): das Logo
   (assets/logo.png) ist dunkel/schwarz gezeichnet und funktioniert auf dem
   dunklen/transparenten Header nicht zuverlaessig lesbar – jeder Versuch,
   eine helle Flaeche/Kasten dahinter zu legen (Pille, Glas-Verlauf), wirkte
   als Fremdkoerper im sonst ganz flaechenlosen, transparenten Header. Die
   Datei bleibt im Projekt fuer eine spaetere Verwendung auf passendem
   Untergrund, wird hier aber nicht mehr eingebunden. Stattdessen ein
   heller, typografischer Schriftzug OHNE eigenen Hintergrund/Rahmen/
   Schatten – verschmilzt direkt mit dem Header. */
.header-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  /* Optischer Ausgleich: Grossbuchstaben mit weitem Letter-Spacing wirken an
     einer strikten Grid-Kante leicht nach rechts verschoben (der Zwischen-
     raum VOR dem "L" "fehlt" gefuehlt, waehrend er zwischen den Buchstaben
     ueberall sichtbar ist) – ein kleiner negativer Versatz gleicht das aus,
     ohne den Schriftzug zu nah an den Viewport-Rand zu ruecken (der
     Container-Innenabstand bleibt bei 24px, siehe .container). */
  margin-left: -0.5rem;
}

.header-brand__text {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  white-space: nowrap;
  transition: font-size var(--duration-mid) var(--ease-premium);
}

/* Feiner Mittelpunkt als dezente Trennung zwischen "Lesum" und "Logistik" –
   ersetzt einen zweiten Farbton/Gewichtswechsel, der neben der Navigation
   schnell unruhig wirken wuerde. */
.header-brand__accent {
  color: var(--color-yellow);
  margin-inline: 0.4em;
}

/* Etwas kompakterer Schriftzug im gescrollten Zustand, analog zur vorherigen
   Logo-Verkleinerung (56px -> 44px). */
.site-header.is-scrolled .header-brand__text {
  font-size: 0.92rem;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav__links a {
  position: relative;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-on-dark-muted);
  padding-block: var(--space-2xs);
  transition: color var(--duration-fast) ease;
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background: var(--color-yellow);
  transition: width var(--duration-mid) var(--ease-premium);
}

.nav__links a:hover,
.nav__links a.is-active {
  color: var(--text-on-dark);
}

.nav__links a:hover::after,
.nav__links a.is-active::after {
  width: 100%;
}

/* Hamburger-Menü (mobil) */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
}

.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-white);
  margin-inline: auto;
  transition: transform var(--duration-fast) var(--ease-premium),
    opacity var(--duration-fast) var(--ease-premium);
}

.nav__toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.nav__toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Backdrop hinter dem offenen Mobil-Menue (Runde 76): dunkelt den
   Seiteninhalt ab und schliesst das Menue beim Antippen (Element und
   Handler in script.js, initMobileNav). Liegt unter dem Header
   (z-index 100), damit Kopfleiste und Aufklapp-Liste selbst scharf und
   hell bleiben. Auf Desktop-Breiten existiert das Element zwar im DOM,
   bleibt aber wirkungslos, weil ".is-visible" nur im mobilen
   Menue-Zustand gesetzt wird. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(5, 5, 6, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  transition: opacity var(--duration-mid) var(--ease-premium);
}

.nav-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Scroll-Sperre bei offenem Mobil-Menue: bewusst auf <html> UND <body>,
   sonst laesst iOS-Safari die Seite unter dem Menue weiterscrollen. Die
   Scroll-Position bleibt unter overflow:hidden erhalten. Beide Regeln
   gelten NUR im mobilen Breitenbereich: bleibt die Zustandsklasse nach
   einem Fenster-Resize auf Desktop-Breite haengen (der JS-Aufraeumer in
   initMobileNav ist nur die weiche Schicht), sind Sperre und Backdrop
   dort strukturell wirkungslos. */
@media (max-width: 860px) {
  html.nav-locked,
  html.nav-locked body {
    overflow: hidden;
  }
}

@media (min-width: 861px) {
  .nav-backdrop {
    display: none;
  }
}

/* Sanftes Hereingleiten der Aufklapp-Liste beim Oeffnen (display kann
   nicht animiert werden, eine Animation beim Regelwechsel schon; die
   globale reduced-motion-Regel oben deckt auch diese Animation ab). */
@keyframes nav-drop-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.9rem 1.9rem;
  border-radius: 999px;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform var(--duration-fast) var(--ease-premium),
    background var(--duration-fast) ease, color var(--duration-fast) ease,
    border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  background: var(--color-yellow);
  color: var(--color-black);
  box-shadow: 0 8px 24px rgba(255, 196, 0, 0.18);
}

.btn--primary:hover {
  background: var(--color-yellow-soft);
  box-shadow: 0 10px 30px rgba(255, 196, 0, 0.28);
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  color: var(--text-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn--ghost:hover {
  border-color: var(--color-yellow);
  color: var(--color-yellow);
  transform: translateY(-2px);
}

.btn--dark {
  background: var(--color-black);
  color: var(--color-white);
}

.btn--dark:hover {
  background: var(--color-black-elevated);
  transform: translateY(-2px);
}

.btn--block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

/* --------------------------------------------------------------------------
   7. Hero (Startseite)

   Aufbau: ".hero-pin" ist ein hoher Wrapper (mehrere vh), der die Scrollstrecke
   fuer die Animation bereitstellt. Darin liegt ".hero-stage" mit
   position: sticky – sie bleibt exakt eine Bildschirmhoehe lang stehen,
   waehrend script.js (initHeroScrollEffect) anhand des Scrollfortschritts
   (0 -> 1) den LKW naeherkommen laesst, die Scheinwerfer aufblendet und den
   Schriftzug einblendet. Reine Darstellung – kein Text/CTA im Hero selbst.
   -------------------------------------------------------------------------- */
.hero-pin {
  position: relative;
  height: 260vh;
  background: var(--color-black);
}

.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Bewusst ein FLACHER, einheitlicher Dunkelton – kein radial-gradient.
     Ein Gradient hier erzeugt einen ovalen helleren Fleck genau hinter dem
     LKW, der wie ein eigener Bildhintergrund wirkt. Die Buehne soll ruhig
     und gleichmaessig dunkel bleiben. */
  background: var(--color-black);
  color: var(--text-on-dark);
}

/* Szenen-Wrapper (Runde 67): fuellt die Buehne vollstaendig - die komplette
   Studio-Szene (LKW, Boden, Spotlight, Hintergrund) steckt IM Bild. Der
   gemeinsame Zoom-transform von script.js sitzt am Wrapper, damit beide
   Bildebenen garantiert synchron skalieren (gleiches transform-origin,
   gleiche Kurve - Deckungsgleichheit per Konstruktion).

   Performance: translateZ(0) + backface-visibility heben den Wrapper auf
   eine eigene Compositor-Ebene, damit das Scroll-Update (transform) nicht
   bei jedem Frame das gesamte Hero-Layout neu berechnen muss. */
.hero__truck-wrap {
  position: absolute;
  inset: 0;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Beide Bildebenen identisch: Vollbild-cover, mittig - Unterschied ist
   AUSSCHLIESSLICH die Opacity der Licht-Ebene (script.js). */
.hero__truck {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  backface-visibility: hidden;
}

.hero__truck--sharp {
  opacity: 0;
  will-change: opacity;
}

/* Dunkles Start-Overlay (Runde 68): liegt UEBER beiden Bildebenen und unter
   Claim/Scroll-Hinweis. Bei Scrollfortschritt 0 fast deckend (0.85 - die
   Szene ist dann fast schwarz, nur Umrisse/Boden/Spot scheinen schwach
   durch), wird von initHeroScrollEffect() scrollgebunden und reversibel
   abgebaut (voll transparent ab ~65% der Strecke). Der Basiswert hier
   entspricht dem Zustand bei Fortschritt 0, damit vor dem ersten
   JS-Frame nichts hell aufblitzt. Reines opacity-Element, kein Einfluss
   auf Layout oder Bildposition. */
.hero__shade {
  position: absolute;
  inset: 0;
  background: #000;
  /* = Zustand bei Fortschritt 0 (Runde 69: 0.74 nach Nutzer-Vorgabe
     0.68-0.78 - schwache Silhouette statt Fast-Schwarz) */
  opacity: 0.74;
  will-change: opacity;
  pointer-events: none;
  z-index: 1;
}

/* Claim (Runde 68): bei Scrollfortschritt 0 UNSICHTBAR, blendet erst im
   letzten Viertel der Strecke scrollgebunden ein (Opacity + minimale
   vertikale Bewegung - beides schreibt initHeroScrollEffect() pro Frame
   deterministisch aus dem Fortschritt, dadurch jederzeit exakt
   reversibel). Statisch unten mittig ueber dem Studioboden der Szene;
   der Mindestwert 104px haelt ihn sicher OBERHALB des Scroll-Hinweises
   (bottom: var(--space-lg)=40px + ~55px Hinweis-Hoehe). Die Basiswerte
   hier entsprechen dem Zustand bei Fortschritt 0. */
.hero__wordmark {
  position: absolute;
  left: 50%;
  bottom: clamp(104px, 14vh, 160px);
  transform: translate(-50%, 10px);
  opacity: 0;
  will-change: opacity, transform;
  z-index: 2;
  max-width: min(90vw, 44rem);
  text-align: center;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-dark);
}

.hero__wordmark span {
  color: var(--color-yellow);
}

.hero__scroll-hint {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-small);
  color: var(--text-on-dark-muted);
  z-index: 2;
  will-change: opacity;
}

.hero__scroll-hint .line {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--color-yellow), transparent);
  animation: scroll-hint-pulse 1.8s ease-in-out infinite;
}

@keyframes scroll-hint-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Neutrale Struktur-Ebene im Hero (fuellt die Buehne, zentriert Inhalte).
   Seit Runde 67 ohne eigene Animation. */
.hero__depth {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   8. Sektionen & Karten (wiederverwendbar über alle Seiten)
   -------------------------------------------------------------------------- */
.intro-section {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-2xl);
  align-items: start;
}

/* Karten sind bewusst "entkastet": keine Flaeche, kein Rahmen ringsum –
   nur eine duenne obere Linie als Trenner. In mehrspaltigen Grids (siehe
   Media-Query weiter unten) kommt zusaetzlich eine duenne vertikale Linie
   zwischen den Spalten hinzu, sodass Struktur ueber Linien statt Boxen
   entsteht. */
.card {
  display: block;
  background: none;
  border: none;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: var(--space-lg) 0 0;
  transition: transform var(--duration-mid) var(--ease-premium);
}

.card:hover {
  transform: translateY(-4px);
}

/* Textlink am Ende einer Teaser-Karte (z. B. Startseiten-Teaser) */
.card__link {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-yellow);
  transition: transform var(--duration-fast) var(--ease-premium);
}

.card:hover .card__link {
  transform: translateX(4px);
}

.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-md);
}

.card__icon svg {
  width: 30px;
  height: 30px;
  stroke: var(--color-yellow);
}

.card h3 {
  margin-bottom: var(--space-2xs);
  font-size: var(--fs-h3);
}

.card p {
  font-size: 0.98rem;
}

/* Karten auf dunklem Hintergrund (z. B. Startseite Leistungs-Kacheln) */
.card--dark {
  border-top-color: var(--border-subtle-dark);
  color: var(--text-on-dark);
}

.card--dark p {
  color: var(--text-on-dark-muted);
}

.card--dark:hover {
  border-top-color: rgba(255, 196, 0, 0.5);
}

/* Jede Karte bekommt dieselbe Akzentstruktur: duenne obere Linie (siehe
   .card) PLUS duennen gelben linken Streifen – bewusst OHNE
   ":not(:first-child)"-Ausnahme, die vorher die jeweils erste Karte eines
   Grids (z.B. "Zuverlaessigkeit"/"Berufskraftfahrer") optisch anders aussehen
   liess als alle anderen (kein Vertikal-Divider zwischen Spalten mehr,
   sondern ein konsistenter Akzent pro Karte). Bewusst OHNE Breiten-Gate: eine
   fruehere "@media (min-width: 861px)"-Bedingung liess den Streifen im
   einspaltigen Layout (Grid faellt darunter auf 1 Spalte) komplett
   verschwinden – bei einem Browserfenster knapp unter der Schwelle wirkte
   dadurch die jeweils erste sichtbare Karte "kaputt". Der Streifen gilt jetzt
   unabhaengig von der Fensterbreite immer. */
.grid--3 > .card,
.grid--2 > .card {
  border-left: 2px solid var(--color-yellow);
  padding-left: var(--space-lg);
}

/* Referenz-Zitat: grosses, ruhiges Pull-Quote ohne Kasten – nur eine
   duenne gelbe Linie links markiert den Zitatcharakter. */
.quote-block {
  border-left: 2px solid var(--color-yellow);
  padding-left: var(--space-lg);
}

.quote-block p {
  font-size: var(--fs-h2);
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.4;
}

.quote-block cite {
  display: block;
  margin-top: var(--space-md);
  font-style: normal;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

/* Statistik-Reihe */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  text-align: center;
}

.stat {
  padding: var(--space-md);
}

.stat__value {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-yellow);
  letter-spacing: -0.02em;
}

.stat__label {
  font-size: var(--fs-small);
  color: var(--text-on-dark-muted);
  margin-top: var(--space-3xs);
}

/* Kontakt-Teaser: offene Flaeche statt Farbkasten – nur eine duenne obere
   Linie trennt die Sektion, Text und Button stehen frei im Weissraum. */
.contact-teaser {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-2xl);
}

.contact-teaser h2 {
  font-size: var(--fs-h2);
  max-width: 20ch;
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   9. Seiten-Header (Unterseiten: Über uns, Leistungen, Fuhrpark, Karriere, Kontakt)
   -------------------------------------------------------------------------- */
.page-header {
  background: var(--color-black);
  color: var(--text-on-dark);
  padding-top: calc(var(--header-height) + clamp(3rem, 7vw, 5rem));
  padding-bottom: clamp(4.5rem, 10vw, 7.5rem);
  position: relative;
  overflow: hidden;
}

.page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 85% 20%, rgba(255, 196, 0, 0.12), transparent 70%);
  pointer-events: none;
}

.page-header__title {
  font-size: clamp(2.4rem, 5.2vw, 4.1rem);
  max-width: 18ch;
  margin-top: var(--space-md);
  position: relative;
  z-index: 1;
}

.page-header__lead {
  font-size: var(--fs-body-lg);
  color: var(--text-on-dark-muted);
  max-width: 60ch;
  margin-top: var(--space-lg);
  position: relative;
  z-index: 1;
}

/* Runde 47 (fleet.html): der Header laeuft nach unten in den Grundton der
   direkt folgenden FLACHEN Showcase-Sektion aus, damit kein harter
   Farbcut entsteht - ersetzt dort das fruehere ".transition-fade-in"
   auf der ersten Folgesektion (die muss selbst flach bleiben, weil die
   Fahrzeugbuehne keine Farbwechsel vertraegt). */
.page-header--to-surface {
  /* Runde 52 (Nutzer: Uebergang weiterhin als Band sichtbar): der Treff-
     punkt an der Sektionsgrenze liegt jetzt bei fast-Schwarz #0e0e10
     (Delta zu #0a0a0b nur 4 Punkte - unsichtbar); die eigentliche
     Aufhellung auf den Buehnen-Ton #121214 passiert erst sanft INNERHALB
     der Showcase-Sektion (siehe dort). So endet der Header-Verlauf ohne
     Steigungs-Sprung an der Grenze - genau der Steigungswechsel (Verlauf
     -> flaeche) war zuvor als Mach-Band-Kante wahrnehmbar, obwohl die
     Farbwerte beidseits exakt uebereinstimmten. */
  background: linear-gradient(180deg, var(--color-black) 0%, var(--color-black) 35%, #0e0e10 100%);
}

/* --------------------------------------------------------------------------
   10. Fuhrparkseite: Kategorie-Showcase + Quality-Check-Ablauf
   Der Showcase ist das zentrale, tab-gesteuerte Interaktions-Feature der
   Fuhrparkseite (siehe initFleetShowcase() in script.js): drei vollstaendige Panels liegen
   per CSS Grid in derselben Zelle uebereinander (grid-area 1/1) und blenden
   per Opacity zwischen sich um. Dadurch richtet sich die Container-Hoehe
   automatisch nach dem groessten Panel, ohne dass JS eine Hoehe berechnen
   oder synchron halten muss.
   -------------------------------------------------------------------------- */
/* Runde 42: durchgaengig FLACHER Grundton (keine Farbwechsel innerhalb
   des Showcase); Runde 51: von Anthrazit #17171a auf #121214 abgedunkelt
   (siehe ".page-header--to-surface" - der grosse Ton-Sprung nach Schwarz
   war als heller Querbalken lesbar). Die freigestellten PNGs samt
   Schatten/Spot sind tonwert-unabhaengig (reine Alpha-Effekte). Dazu ein
   sehr dezentes SVG-Turbulence-Korn als ::before ueber der ganzen Sektion
   (unter dem Inhalt, siehe z-index auf .container). Verlaufskette ab
   hier: #121214 -> Quality-Check #131316 -> Einleitung #101013 ->
   Abschluss nach Schwarz. */
.fleet-showcase-section {
  position: relative;
  /* Runde 52: startet auf dem fast-schwarzen Grenzton #0e0e10 und hellt
     ueber die ersten ~380px sanft auf den Buehnen-Ton #121214 auf (die
     Zone liegt hinter den Aushaengeschild-Karten, dort ist der 4-Punkte-
     Tonanstieg unsichtbar); ab 380px flaech bis zum Boden-Ramp - die
     Fahrzeugbuehne selbst liegt weit darunter und bleibt damit auf
     konstantem Ton. */
  background: linear-gradient(180deg, #0e0e10 0, #121214 380px);
}

.fleet-showcase-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.045;
  pointer-events: none;
  z-index: 0;
  /* Runde 52: das Korn blendet ueber die ersten ~380px weich ein (synchron
     zum Ton-Anstieg des Sektionshintergrunds) - vorher setzte es exakt an
     der Header-Grenze ein und war dort als feiner Helligkeits-/Textur-
     Sprung lesbar. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 380px);
  mask-image: linear-gradient(180deg, transparent 0, #000 380px);
}

/* Runde 50 - weiche Verlaufskette ueber die ganze Fuhrparkseite: die
   Sektionen behalten je einen eigenen (leicht unterschiedlichen) Grundton,
   aber jede Grenze wird von einem ca. 90-170px hohen Boden-Ramp der
   VORHERIGEN Sektion ueberblendet (::after, transparent -> Ton der
   Folgesektion, pointer-events: none, unter dem Inhalt). Kette:
   Header schwarz -> Showcase #17171a -> Quality-Check #131316 ->
   Einleitung #101013 -> Abschluss-Verlauf nach Schwarz. Keine Linien,
   keine hellen Toene, keine Layout-Auswirkungen. */
.fleet-showcase-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(90px, 12vw, 170px);
  background: linear-gradient(180deg, rgba(19, 19, 22, 0) 0%, #131316 100%);
  pointer-events: none;
  z-index: 0;
}

.fleet-showcase-section > .container {
  position: relative;
  z-index: 1;
}

/* Aushaengeschilder-Karten (Runde 49 wiederhergestellt, nachdem sie in
   Runde 47 entfernt worden waren - jetzt als eigener Bereich ZWISCHEN
   Einleitung und interaktivem Showcase, ohne eigene Ueberschrift). Zwei
   gleichgewichtige grosse Karten, desktop zweispaltig, mobil untereinander.
   Ruhige Hover-Effekte (nur auf echten Maus-Geraeten): Karte hebt sich
   leicht, Bild zoomt minimal, der gelbe Top-Akzent verstaerkt sich von
   gedimmt auf voll - keine Carousel-Mechanik. Die fruehere
   ".fleet-crane-tile" bleibt entfernt (Kran = vierte Sparte in den Tabs). */
.fleet-hero-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  /* Runde 58: reduziert (danach folgt jetzt der Ueberleitungstext mit
     eigenem Unterabstand - zusammen ergibt das den frueheren Gesamtabstand
     zu den Tabs, ohne dass eine grosse Leerflaeche entsteht). */
  margin-bottom: clamp(2.5rem, 4.5vw, 3.5rem);
}

/* Runde 61 - Licht/Schatten-Showcase der Highlight-Karten: der LKW steht
   im Ruhezustand leicht im Schatten (das BASISFOTO ist die dunkle
   Studioaufnahme) und "erwacht" im Zustand .is-lit - dann blendet die
   deckungsgleiche Licht-Aufnahme (Scheinwerfer an, hellerer Spot, beides
   im Foto, keine kuenstlichen CSS-Lichter) per reiner Opacity darueber
   ein. .is-lit setzt initFleetHeroCards() in script.js: Desktop = Maus
   rein/raus, Touch = Tap (andere Karte/Tap daneben setzt zurueck) - EINE
   gemeinsame Zustandslogik, deshalb gibt es hier bewusst KEINE :hover-
   Regeln mehr (ersetzt den frueheren hover-only-Block). Timing asymmetrisch
   nach Nutzer-Vorgabe: Einschalten 0.55s (450-600ms), Ausschalten 0.38s
   (300-450ms) - die Dauer steht jeweils an der ZIEL-Regel. */
/* Runde 62 - synchrone Licht-Animation: EINE Dauer-Variable (--card-anim)
   fuer Karte UND beide Bildebenen, die Transitions sind nur noch im
   GRUNDZUSTAND definiert; .is-lit aendert ausschliesslich Zielwerte und
   hebt die Variable an (an: 0.55s, aus: 0.38s). Da transition-duration
   immer aus dem ZIEL-Zustand gelesen wird, wechseln damit alle Elemente
   exakt gleichzeitig - keine Neudefinition der transition-Liste beim
   Aktivieren, keine delays, identische Easing-Kurve ueberall. Die
   Variable erbt vom card-Element in die Bilder. */
.fleet-hero-card {
  --card-anim: 0.38s;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-subtle-dark);
  border-top: 2px solid rgba(255, 196, 0, 0.55);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--card-anim) cubic-bezier(0.22, 1, 0.36, 1),
    border-top-color var(--card-anim) cubic-bezier(0.22, 1, 0.36, 1),
    border-color var(--card-anim) cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow var(--card-anim) cubic-bezier(0.22, 1, 0.36, 1);
}

.fleet-hero-card.is-lit {
  --card-anim: 0.55s;
  transform: translateY(-6px);
  /* Reihenfolge wichtig: border-color (Kurzform, alle vier Seiten) MUSS
     vor border-top-color stehen, sonst ueberschreibt sie das Gelb oben. */
  border-color: rgba(255, 255, 255, 0.14);
  border-top-color: var(--color-yellow);
  /* dunkler Abwurfschatten wie bisher + sehr dezenter warmer Rand-Schein
     (kein greller Glow) */
  box-shadow: 0 24px 44px -26px rgba(0, 0, 0, 0.65), 0 10px 42px -20px rgba(255, 196, 0, 0.28);
}

.fleet-hero-card__media {
  aspect-ratio: 16 / 10;
  background: var(--color-black-soft);
  overflow: hidden;
  /* Bezugsrahmen fuer das absolut positionierte Licht-Overlay */
  position: relative;
}

.fleet-hero-card__image,
.fleet-hero-card__image-lit {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  /* dieselbe geerbte Dauer-Variable wie die Karte selbst (s. o.) - Bild-
     wechsel, Zoom und Kartenbewegung starten damit im selben Moment und
     laufen gleich lang mit derselben Kurve */
  transition: opacity var(--card-anim) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--card-anim) cubic-bezier(0.22, 1, 0.36, 1);
}

/* Licht-Version: exakt deckungsgleich UEBER dem Basisbild; beide bekommen
   im .is-lit-Zustand denselben minimalen Zoom (identische Werte/Dauer =
   sie bleiben waehrend der gesamten Transition pixelgleich uebereinander). */
.fleet-hero-card__image-lit {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.fleet-hero-card.is-lit .fleet-hero-card__image,
.fleet-hero-card.is-lit .fleet-hero-card__image-lit {
  transform: scale(1.04);
  /* will-change nur im aktiven Zustand (nicht dauerhaft) - beim Zuruecklaufen
     entfaellt es, das Ausblenden ist kurz und unkritisch */
  will-change: opacity, transform;
}

.fleet-hero-card.is-lit .fleet-hero-card__image-lit {
  opacity: 1;
}

/* Reduzierte Bewegung: kein Anheben, kein Zoom - der Lichtwechsel selbst
   bleibt erhalten und ist durch die globale reduced-motion-Regel (Anfang
   der Datei, transition-duration 0.001ms) praktisch sofort. */
@media (prefers-reduced-motion: reduce) {
  .fleet-hero-card.is-lit,
  .fleet-hero-card.is-lit .fleet-hero-card__image,
  .fleet-hero-card.is-lit .fleet-hero-card__image-lit {
    transform: none;
  }
}

.fleet-hero-card__info {
  padding: clamp(1.5rem, 3vw, 2rem);
}

/* Runde 58: kleines Kategorie-Label oberhalb des Kartentitels - dezentes,
   leicht gedimmtes Gelb, Grossbuchstaben per text-transform (Screenreader
   lesen so das normale Wort, nicht Einzelbuchstaben), viel Letter-Spacing,
   bewusst klein/undominant. */
.fleet-hero-card__label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 196, 0, 0.78);
  margin-bottom: var(--space-xs);
}

.fleet-hero-card__title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-on-dark);
}

.fleet-hero-card__text {
  margin-top: var(--space-sm);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-on-dark-muted);
}

/* Runde 63: kompakter Eckdaten-Block (Beschreibung -> Eckdaten ->
   Aufzaehlung). Bewusst eine schlichte dl-Liste, KEINE Tabelle: kleine
   gelbe Bezeichnungen im selben Stil wie das Karten-Label, helle Werte,
   klare Abstaende; mobil identisch (stapelt ohnehin untereinander). */
.fleet-hero-card__specs {
  margin-top: var(--space-md);
  display: grid;
  gap: var(--space-sm);
}

.fleet-hero-card__specs dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 196, 0, 0.78);
}

.fleet-hero-card__specs dd {
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-on-dark);
}

.fleet-hero-card__features {
  margin-top: var(--space-md);
  display: grid;
  gap: 0.5em;
}

.fleet-hero-card__features li {
  position: relative;
  padding-left: 1.3em;
  font-size: 0.92rem;
  color: var(--text-on-dark-muted);
}

.fleet-hero-card__features li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--color-yellow);
}

@media (max-width: 860px) {
  .fleet-hero-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Runde 58: Rhythmus + Zwischen-Ueberschriften der Fuhrpark-Buehne
   Nutzer-Vorgabe: die grosse Leerflaeche zwischen Header-Einleitung und
   Aushaengeschild-Karten fuellen (Abstaende reduzieren + neue Abschnitts-
   Ueberschrift), Ueberleitungstext vor den Tabs, "Fahrzeuguebersicht"-
   Einleitung zwischen Tabs und Showcase samt sichtbarer Ruhezone.
   -------------------------------------------------------------------------- */
/* Leerraum oben: --to-surface wird nur vom Fuhrpark-Header genutzt, daher
   darf der Override hier seitenspezifisch wirken, ohne die .page-header der
   anderen Seiten anzufassen. Der 35%->100%-Verlauf skaliert einfach mit. */
.page-header--to-surface {
  padding-bottom: clamp(2.75rem, 6vw, 4.5rem);
}

/* Gegenstueck: die Showcase-Sektion startet frueher (statt --space-2xl).
   Die 380px-Ton-/Korn-Rampe (s. o.) bleibt unveraendert - sie liegt
   weiterhin hinter Abschnittskopf + Karten, wo der 4-Punkte-Anstieg
   unsichtbar ist. */
.fleet-showcase-section {
  padding-block-start: clamp(2.75rem, 5vw, 4.25rem);
}

/* Gemeinsamer Zwischen-Ueberschrift-Baustein der Fuhrparkseite: deutlich
   kleiner als die H1 (clamp 1.35-1.8rem vs. 2.4-4.1rem), gebrochenes Weiss,
   graue Unterzeile, linksbuendig am Inhaltsraster, keine Box.
   Runde 59: das Label ueber der Ueberschrift ist jetzt ein normales
   ".eyebrow" (Linie + Schriftzug nebeneinander, exakt wie "FUHRPARK" im
   Seiten-Header) - die fruehere alleinstehende "__line" ist entfernt. */
.fleet-section-head {
  max-width: 62ch;
  /* Runde 59: Unterzeile -> Karten auf ~35-50px Desktop (vorher bis 52px). */
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.fleet-section-head .eyebrow {
  margin-bottom: var(--space-sm);
}

.fleet-section-head__title {
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-on-dark);
}

.fleet-section-head__text {
  margin-top: var(--space-xs);
  font-size: 0.98rem;
  line-height: 1.65;
  max-width: 58ch;
  color: var(--text-on-dark-muted);
}

/* Runde 59: Variante fuer den "Glanzstuecke"-Kopf ueber den Aushaenge-
   schild-Karten - etwas schmalere Unterzeile als die Basis-58ch, aber
   breit genug, dass der Text auf Desktop zweizeilig bleibt (48ch ergab
   drei Zeilen - gemessen, nicht geschaetzt). */
.fleet-section-head--highlights .fleet-section-head__text {
  max-width: 55ch;
}

/* Variante zwischen Tab-Navigation und Showcase: unten deutlich mehr Luft
   (Ruhezone vor der Fahrzeugbuehne; Desktop ~88px, Tablet ~55-65px,
   Mobil ~44px - zusammen mit dem Abstand ueber der Einleitung entsteht
   die geforderte sichtbare Trennung von Navigation und Showcase). */
.fleet-section-head--overview {
  margin-bottom: clamp(2.75rem, 7vw, 5.5rem);
}

/* Ueberleitung Karten -> Kategorienavigation: bewusst nur ein Absatz am
   Inhaltsraster (keine eigene Section), max. ~2 Zeilen auf Desktop. */
.fleet-bridge-text {
  max-width: 72ch;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--text-on-dark-muted);
  margin-bottom: clamp(2.75rem, 5.5vw, 4.25rem);
}

/* --------------------------------------------------------------------------
   Fuhrparkseite: Zugmaschinen/Auflieger-Tabs (Runde 31)
   Ersetzt die vorherige 4er-"Weitere Fahrzeuge"-Uebersicht durch eine nach
   Fahrzeugart korrekt strukturierte Umschalter-Flaeche (siehe fleet.html-
   Kommentar). Panel-Wechsel per CSS-Grid-Stacking (beide Panels teilen sich
   dieselbe Grid-Zelle, siehe ".career-slider__stage" fuer dasselbe Prinzip)
   plus reinem Opacity-Fade – bewusst kein Slide/Scale, "ruhiger Hover-Effekt"
   bezieht sich nur auf die Bildkarten selbst (siehe unten). */
.fleet-tabs__switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle-dark);
  border-radius: 999px;
  /* Runde 58: Abstand zur direkt folgenden "Fahrzeuguebersicht"-Einleitung
     (deren eigener Unterabstand traegt den Rest der Ruhezone bis zum
     Showcase - siehe ".fleet-section-head--overview"). */
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.fleet-tabs__btn {
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-on-dark-muted);
  background: none;
  border: none;
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.35s var(--ease-premium), color 0.35s var(--ease-premium),
    box-shadow 0.35s var(--ease-premium);
}

.fleet-tabs__btn:hover,
.fleet-tabs__btn:focus-visible {
  color: var(--text-on-dark);
  outline: none;
}

.fleet-tabs__btn.is-active {
  background: var(--color-yellow);
  color: var(--color-black);
  /* Runde 58: sehr dezenter innerer Lichtschein oben + hauchfeiner warmer
     Aussenschein - hebt den aktiven Tab minimal staerker ab, ohne Groessen-
     aenderung oder grellen Glow (Transition laeuft ueber box-shadow mit,
     daher kein Springen beim Wechsel). */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 4px 14px -8px rgba(255, 196, 0, 0.5);
}

.fleet-tabs__panels {
  display: grid;
}

.fleet-tabs__panel {
  grid-area: 1 / 1;
  /* Ohne "min-width: 0" erzwingt ein Grid-Item standardmaessig mindestens
     die Content-Min-Breite seiner Kinder (min-width: auto) - die
     Detailflaeche des Showrooms (Texte/Buttons) wuerde sonst den gesamten
     Grid-Track und damit ".container"/die Seite in die Breite druecken
     (horizontales Overflow auf Mobile). */
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Kurzer Fade+Slide (Runde 36, Vorgabe 250-400ms) statt reinem Opacity-
     Fade - "visibility" bleibt bis zum Ende der Dauer verzoegert, damit das
     ausgeblendete Panel waehrenddessen nicht klickbar/fokussierbar ist,
     aber ohne zusaetzliche Verzoegerung VOR dem sichtbaren Start der
     Animation (kein "delay" auf opacity/transform selbst). */
  /* Runde 58: 6px -> 10px und 0.4s -> 0.45s (Nutzer-Zielwerte 8-12px /
     350-500ms) - loest NUR beim Tab-Wechsel aus (Klassenwechsel durch
     initFleetTabs()), nie bei blosser Mausbewegung. */
  transform: translateY(10px);
  transition: opacity 0.45s var(--ease-premium), transform 0.45s var(--ease-premium),
    visibility 0s 0.45s;
}

.fleet-tabs__panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.45s var(--ease-premium), transform 0.45s var(--ease-premium);
}

/* Fahrzeug-Showroom (".showroom", Runde 41 - kompletter Neubau als echtes
   Premium-Coverflow mit festen Positionsklassen; ersetzt den Runde-40-
   Ansatz aus flex-grow, order, FLIP und separatem Fokus-Ring vollstaendig).

   Grundprinzip:
   - ".showroom" ist ein 2-Spalten-Grid: links die Buehne
     (".showroom__stage"), rechts die Infoflaeche (".showroom__detail") mit
     FESTER Position - sie bewegt sich beim Fahrzeugwechsel nie, nur ihr
     Inhalt blendet um (gestapelte ".showroom__detail-panel" in derselben
     Grid-Zelle, Hoehe = hoechstes Panel, kein Layout-Sprung).
   - Die Fahrzeuge sind absolut positionierte Buttons auf der Buehne. Lage
     und Groesse steuern ausschliesslich die Positionsklassen "is-active",
     "is-prev", "is-next", "is-far-prev", "is-far-next" und "is-hidden"
     (von initShowroom() bei jedem Wechsel komplett neu berechnet,
     offset = index - activeIndex). Animiert werden seit Runde 49 NUR
     "transform", "opacity" und "filter", alle 0.8s
     cubic-bezier(0.22, 1, 0.36, 1) wie vorgegeben. Kein transform-scale, kein FLIP, keine JS-Messungen -
     dadurch funktioniert die Komponente auch in zunaechst unsichtbaren
     Tab-Panels ohne Sonderbehandlung.
   - "is-hidden" (offset ausserhalb +-2) parkt unsichtbar HINTER dem
     jeweiligen Rand-Slot (left 3% bzw. 97%, z-index 1, opacity 0) statt
     ausserhalb der Buehne - bewusst, damit nichts ueber den Viewport-Rand
     hinausragt (es gibt kein globales overflow-x-hidden auf body) und
     neue Fahrzeuge beim Weiterblaettern optisch hinter dem aeusseren
     Nachbarn auftauchen. "visibility" haengt 0.6s nach, damit der
     Ausblend-Uebergang sichtbar bleibt, das Element danach aber weder
     fokussierbar noch anklickbar ist.
   - Runde 42: alle Fahrzeugbilder sind FREIGESTELLTE PNGs mit echtem
     Alphakanal (per macOS-Vision-Framework aus den Studiofotos erzeugt,
     siehe assets/fleet/*.png) - kein mask-Verlauf, keine Bildflaechen,
     keine Container mehr. Einheitliche 4:3-Boxen + object-fit: contain +
     object-position bottom - nichts wird beschnitten, alle Fahrzeuge
     teilen sich EINE Grundlinie (bottom-verankert wie auf einer realen
     Ausstellungsflaeche). Schatten ausschliesslich per CSS drop-shadow.
   - NUR das aktive Fahrzeug bekommt den neutralen weiss-grauen Spotlight
     HINTER dem PNG (::before-Radialverlauf, z-index unterhalb des Bilds -
     indirekte Beleuchtung, kein Rahmen/keine Flaeche) plus dezenten
     Kontur-Schein (zweite drop-shadow). Seit Runde 44 gibt es KEINE
     gelblichen Lichtreflexe mehr (goldene Outline entfernt) - die
     Infoflaeche rechts bleibt rahmenlos.
   - Die duenne gelbe Linie (".showroom__line") liegt mit z-index 0 HINTER
     allen Fahrzeugen, knapp unter deren gemeinsamer Grundlinie.
   - Keinerlei Scroll- oder Drag-Mechanik: kein overflow-x-auto mehr, kein
     scrollIntoView, kein Scroll-Listener; Bilder sind pointer-events:none
     und draggable="false" (Events landen auf dem Button). */
.showroom {
  display: grid;
  /* Runde 44: Infospalte und Zwischenraum etwas schmaler - die Buehne
     gewinnt dadurch spuerbar Breite, das aktive Fahrzeug mehr Praesenz. */
  grid-template-columns: minmax(0, 1fr) clamp(250px, 22vw, 305px);
  gap: clamp(1.75rem, 3vw, 2.75rem);
  align-items: center;
  /* Runde 54 ("Fahrzeuge groesser"): der Showroom bricht aus dem 1200px-
     Seitenraster aus - bis 1400px breit, mittig zur Spalte zentriert
     (negative margin-Haelfte), nie breiter als Viewport minus 4rem, nie
     schmaler als der Container (max(100%, ...) schuetzt Mobile). Header,
     Karten und Umschalter bleiben am bestehenden Raster; nur die Buehne
     samt Infospalte gewinnt Breite -> alle Fahrzeuge werden auf grossen
     Screens ~20% groesser, ohne dass sich an der Slot-Geometrie etwas
     aendert. */
  --showroom-w: max(100%, min(1400px, calc(100vw - 4rem)));
  width: var(--showroom-w);
  margin-left: calc((100% - var(--showroom-w)) / 2);
}

.showroom__stage {
  position: relative;
  /* Runde 54 erhoeht: die breitere Breakout-Buehne + groessere Scales
     brauchen mehr Hoehe, damit das aktive Fahrzeug (46%-Box x 1.12 auf
     bis zu ~1030px Buehnenbreite) nicht anstoesst oder beschnitten wird. */
  height: clamp(300px, 32vw, 470px);
  /* Runde 76 (Touch-Swipe): vertikales Wischen bleibt Seiten-Scroll beim
     Browser, horizontale Gesten kommen als Pointer-Events beim Swipe-
     Handler in script.js an; Pinch-Zoom bleibt erlaubt. */
  touch-action: pan-y pinch-zoom;
}

/* Glanz-Boden (Runde 53): eine dezente Bodenflaeche ab der gemeinsamen
   Grundlinie der Fahrzeuge (Items enden bei bottom 8% -> Horizont bei
   ~92% der Buehne). Zwei Schichten: ein flacher Licht-Pool mittig unter
   dem aktiven Fahrzeug (liest sich als Boden-Reflex des Spotlights
   dahinter - das Scheinlicht selbst bleibt unveraendert) plus ein sehr
   leiser vertikaler Sheen, der nach unten auslaeuft. Die horizontale
   Maske laesst die Flaeche seitlich weich enden - kein Rechteck, keine
   harte Kante; zusammen mit den kraeftigeren Fahrzeug-Spiegelungen
   (".showroom__reflection") entsteht der polierte Showroom-Boden.
   z-index 0 = hinter den Fahrzeugen; die gelbe Bodenlinie bleibt als
   Akzent auf dem Boden liegen. */
.showroom__stage::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: 91.5%;
  height: 58%;
  background:
    radial-gradient(ellipse 58% 42% at 50% 0%, rgba(226, 230, 238, 0.075), rgba(226, 230, 238, 0.022) 52%, transparent 78%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.006) 45%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Bodenlinie: sitzt seit Runde 42 knapp UNTER der gemeinsamen Grundlinie
   der Fahrzeuge (Items sind bottom-verankert, siehe unten) - die
   freigestellten Fahrzeuge "stehen" optisch auf ihr. */
.showroom__line {
  position: absolute;
  left: 1%;
  right: 1%;
  bottom: 6.5%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 196, 0, 0) 0%,
    rgba(255, 196, 0, 0.35) 12%,
    rgba(255, 196, 0, 0.35) 88%,
    rgba(255, 196, 0, 0) 100%
  );
  z-index: 0;
  pointer-events: none;
}

/* Runde 42: Items sind BOTTOM-verankert (gemeinsame Grundlinie fuer alle
   Fahrzeuge, wie auf einer realen Ausstellungsflaeche) statt vertikal
   zentriert. Die Bilder sind freigestellte PNGs mit echtem Alphakanal -
   kein mask-Verlauf, kein Buehnen-Spot, keine Bildflaechen mehr noetig.
   transform fuehrt permanent translateX(-50%); das aktive Fahrzeug ergaenzt
   scale(1.04) mit transform-origin an der Unterkante, damit es beim
   Wachsen auf der Grundlinie stehen bleibt (keine vertikale Bewegung). */
/* Runde 49: NUR noch transform/opacity/filter werden animiert (explizite
   Vorgabe - vorher liefen left/width/bottom mit, also Layout-Eigenschaften,
   die bei jedem Frame Reflow ausloesten und die Wechsel unruhig machten).
   Dafuer haben ALLE Items dieselbe feste Basis-Box (left 50%, width 46%,
   bottom 8%) - die Positionsklassen unterscheiden sich ausschliesslich in
   transform (translateX in Element-Breiten + translateY + scale um die
   Boden-Mitte), opacity und z-index. Die Box selbst aendert nie Groesse
   oder Lage -> kein Layout-Sprung, Buehne und Detailbereich bleiben
   stabil, die Fahrzeuge gleiten rein compositor-animiert. */
.showroom__item {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 46%;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Neutraler weiss-grauer Spotlight HINTER dem aktiven Fahrzeug-PNG
   (Runde 44: bewusst KEINERLEI gelbliche Lichtreflexe mehr - auch die
   fruehere hauchduenne goldene Outline ist ersatzlos entfernt; z-index 0,
   das Bild liegt auf z-index 1): sehr weicher radialer Schein mit geringer
   Deckkraft, wie indirekte Beleuchtung von hinten - kein Rahmen, keine
   Flaeche, kein Rechteck. Sitzt leicht unterhalb der Mitte, wo die
   Fahrzeugmasse der bottom-verankerten PNGs liegt. */
.showroom__item::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 58%;
  width: 130%;
  height: 120%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse 48% 40% at 50% 52%,
    rgba(226, 230, 238, 0.12),
    rgba(226, 230, 238, 0.04) 55%,
    transparent 78%
  );
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 0;
}

.showroom__item.is-active::before {
  opacity: 1;
}

/* Positionsklassen (Desktop, Runde 49 transform-only): Ziel-Geometrie
   unveraendert wie Runde 44 (aktiv gross mittig; Seiten kleiner, weiter
   aussen, minimal tiefer; keine Ueberschneidung - Slot-Mitten bei 50 /
   14.5|85.5 / 2.75|97.25 Prozent der Buehne), aber komplett ueber
   transform ausgedrueckt: translateX-Prozente beziehen sich auf die
   EIGENE (konstante) Boxbreite von 46% Buehne -> Verschiebung um X
   Buehnen-Prozent = X/46 Element-Prozent. scale ersetzt die frueheren
   Slot-Breiten (15/46 = 0.326, 8.5/46 = 0.185, 7/46 = 0.152); der
   transform-origin an der Boden-Mitte haelt die gemeinsame Grundlinie,
   translateY(9px) senkt die Seitenfahrzeuge wie bisher leicht ab. */
/* Runde 54: alle Scales angehoben ("Fahrzeuge groesser") - Slot-Mitten
   dafuer leicht nach aussen (prev 15.2|84.8, far 1.8|98.2 Prozent der
   Buehne), damit weiterhin nichts ueberlappt: aktiv 24.2-75.8, prev
   6.7-23.7, far -2.7-6.3 (die -2.7% bleiben dank 4rem-Breakout-Rand
   innerhalb des Viewports). Element-Shifts = Buehnen-Verschiebung/46:
   34.8->75.7%, 48.2->104.8%, 49->106.5%. */
.showroom__item.is-active {
  opacity: 1;
  z-index: 30;
  transform: translateX(-50%) scale(1.12);
}

.showroom__item.is-prev {
  opacity: 0.82;
  z-index: 20;
  transform: translateX(calc(-50% - 75.7%)) translateY(9px) scale(0.37);
}

.showroom__item.is-next {
  opacity: 0.82;
  z-index: 20;
  transform: translateX(calc(-50% + 75.7%)) translateY(9px) scale(0.37);
}

.showroom__item.is-far-prev {
  opacity: 0.58;
  z-index: 10;
  transform: translateX(calc(-50% - 104.8%)) translateY(9px) scale(0.195);
}

.showroom__item.is-far-next {
  opacity: 0.58;
  z-index: 10;
  transform: translateX(calc(-50% + 104.8%)) translateY(9px) scale(0.195);
}

.showroom__item.is-hidden {
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  visibility: hidden;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s 0.8s;
}

.showroom__item.is-hidden[data-side="left"] {
  transform: translateX(calc(-50% - 106.5%)) translateY(9px) scale(0.16);
}

.showroom__item.is-hidden[data-side="right"] {
  transform: translateX(calc(-50% + 106.5%)) translateY(9px) scale(0.16);
}

/* Seitenfahrzeuge als klar interaktive Elemente (Runde 44; Runde 49 auf
   transform-only umgestellt - jede Klasse braucht dadurch ihre eigene
   Hover-Regel, weil der X-Versatz Teil desselben transform ist): beim
   Ueberfahren heben sie sich minimal an (translateY 9px -> 4px), wachsen
   leicht (scale +4%) und werden hell - der Pointer-Cursor kommt vom
   Button selbst. Nur auf echten Maus-Geraeten; waehrend der Hover-Absicht
   dient das zugleich als sofortiges visuelles Feedback vor dem Wechsel. */
@media (hover: hover) and (pointer: fine) {
  .showroom__item.is-prev:hover {
    transform: translateX(calc(-50% - 75.7%)) translateY(4px) scale(0.385);
    opacity: 1;
  }

  .showroom__item.is-next:hover {
    transform: translateX(calc(-50% + 75.7%)) translateY(4px) scale(0.385);
    opacity: 1;
  }

  .showroom__item.is-far-prev:hover {
    transform: translateX(calc(-50% - 104.8%)) translateY(4px) scale(0.203);
    opacity: 1;
  }

  .showroom__item.is-far-next:hover {
    transform: translateX(calc(-50% + 104.8%)) translateY(4px) scale(0.203);
    opacity: 1;
  }

  .showroom__item.is-prev:hover .showroom__image,
  .showroom__item.is-next:hover .showroom__image,
  .showroom__item.is-far-prev:hover .showroom__image,
  .showroom__item.is-far-next:hover .showroom__image {
    filter: brightness(1) drop-shadow(0 14px 16px rgba(0, 0, 0, 0.36)) drop-shadow(0 0 30px rgba(255, 255, 255, 0));
  }
}

.showroom__item:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 2px;
}

/* Freigestelltes PNG auf der Buehne: bottom-verankert (object-position),
   nie beschnitten. Schatten kommen AUSSCHLIESSLICH per CSS drop-shadow
   (folgt der Alpha-Kontur, nicht der Box): Ruhezustand nur ein weicher
   dunkler Bodenschatten; aktiv zusaetzlich ein warmer Kontur-Schein -
   die zweite drop-shadow-Funktion steht im Ruhezustand mit Alpha 0 in
   der Liste, damit die filter-Listen interpolierbar bleiben (ungleich
   lange Listen wuerden hart springen statt weich ueberblenden). */
.showroom__image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  /* Runde 43: kleinerer Versatz (12px statt 22px) - der grosse Abwurf-
     schatten liess die Fahrzeuge schweben; die Bodenhaftung kommt jetzt
     aus ".showroom__ground" + ".showroom__reflection" (von initShowroom()
     eingefuegt). Runde 44: fuehrende brightness()-Funktion in JEDER
     filter-Liste (auch dort, wo sie 1 ist) - ungleich aufgebaute Listen
     wuerden hart springen statt weich ueberblenden; die Seiten-Klassen
     dunkeln darueber ab ("nach hinten versetzt"). */
  filter: brightness(1) drop-shadow(0 12px 14px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 30px rgba(255, 255, 255, 0));
  transition: filter 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.showroom__item.is-prev .showroom__image,
.showroom__item.is-next .showroom__image {
  filter: brightness(0.88) drop-shadow(0 12px 14px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 30px rgba(255, 255, 255, 0));
}

.showroom__item.is-far-prev .showroom__image,
.showroom__item.is-far-next .showroom__image {
  filter: brightness(0.78) drop-shadow(0 10px 12px rgba(0, 0, 0, 0.28)) drop-shadow(0 0 30px rgba(255, 255, 255, 0));
}

.showroom__item.is-active .showroom__image {
  filter: brightness(1) drop-shadow(0 16px 18px rgba(0, 0, 0, 0.38)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.16));
}

/* Runde 60: Licht-System - das aktive Fahrzeug bekommt eingeschaltete
   Scheinwerfer ueber eine ZWEITE, deckungsgleiche Bildvariante (echtes
   Foto mit Licht an, KEINE kuenstlichen CSS-Lichtpunkte/Glows). Das
   Overlay liegt exakt auf dem Basisbild (identische Box, identisches
   object-fit/object-position, skaliert als Kind des Buttons mit jedem
   Carousel-Transform automatisch mit) und wird ausschliesslich per
   Opacity ein-/ausgeblendet: 0.3s weich (Vorgabe 250-350ms), gekoppelt
   allein an ".is-active" - dieselbe Klasse, die render() fuer Klick,
   Hover, Fokus und getaktetes Blaettern setzt; es gibt bewusst KEINE
   zweite Auswahl-Logik. Keine eigenen Schatten/Filter auf dem Overlay -
   drop-shadows liefert weiterhin das Basisbild darunter. Eingefuegt wird
   das Overlay von initShowroom() NUR fuer Fahrzeuge mit data-lit-Attribut
   (siehe TODO in fleet.html - noch existieren keine Licht-Fotos). */
.showroom__image-lit {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.showroom__item.is-active .showroom__image-lit {
  opacity: 1;
}

/* Bodenschatten (Runde 43): weiche Kontakt-Ellipse direkt unter dem
   Fahrzeug - zusammen mit dem reduzierten drop-shadow-Versatz steht das
   Fahrzeug glaubwuerdig AUF der Flaeche statt zu schweben. Wird von
   initShowroom() als <span> vor dem Bild eingefuegt (kein HTML-Boilerplate
   in 15 Buttons), liegt wie Glow/Reflexion unter dem Bild (z-index 0). */
.showroom__ground {
  position: absolute;
  left: 50%;
  bottom: -3.5%;
  width: 94%;
  height: 11%;
  transform: translateX(-50%);
  /* Runde 44: zweischichtig fuer mehr Realismus - dichter Kernschatten
     direkt unter dem Fahrzeug plus breiter, weicher Halbschatten. */
  background:
    radial-gradient(ellipse 36% 40% at 50% 48%, rgba(0, 0, 0, 0.62), transparent 74%),
    radial-gradient(ellipse 52% 52% at 50% 50%, rgba(0, 0, 0, 0.3), transparent 78%);
  pointer-events: none;
  z-index: 0;
}

/* Bodenreflexion (Runde 43): gespiegelte Kopie des Fahrzeug-PNGs (von
   initShowroom() als zweites <img> geklont), per scaleY(-1) gestuerzt und
   ueber einen mask-Verlauf nur in den obersten ~14% sichtbar. Der Verlauf
   ist im LOKALEN (ungespiegelten) Koordinatensystem "to top" definiert -
   die Maske wird mitgespiegelt, sichtbar bleibt dadurch das Band direkt
   unter der Fahrzeug-Grundlinie. */
/* Runde 53 ("spiegelnder Glanz-Boden"): Spiegelung deutlich praesenter -
   laengeres sichtbares Band (26% statt 14% der Fahrzeughoehe), hoehere
   Grunddeckkraft, leichter Blur + Abdunklung fuer den Poliert-statt-
   Spiegelglas-Look. Da die Spiegelung ein Kind des Fahrzeug-Buttons ist,
   faehrt und skaliert sie automatisch mit jeder Carousel-Bewegung mit.
   Beim aktiven Fahrzeug (Spotlight dahinter) ist sie am kraeftigsten -
   mehr Licht, mehr Reflexion. */
.showroom__reflection {
  position: absolute;
  left: 0;
  top: 99.5%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  transform: scaleY(-1);
  /* Runde 54 nochmals verstaerkt: hoehere Deckkraft, dichteres und
     tieferes Sichtband (34% statt 26%), weniger Abdunklung. */
  opacity: 0.55;
  filter: blur(1.2px) brightness(0.9);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.36) 10%, rgba(0, 0, 0, 0.12) 20%, transparent 34%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.36) 10%, rgba(0, 0, 0, 0.12) 20%, transparent 34%);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.showroom__item.is-active .showroom__reflection {
  opacity: 0.72;
}

/* Grosszuegige Hover-Zonen (Runde 43) links/rechts des aktiven Fahrzeugs:
   von initShowroom() eingefuegt, decken die gesamte Flanke der Buehne ab
   und liegen UNTER den Fahrzeug-Buttons (z-index 5 vs. 10+) - Hover/Klick
   direkt auf einem Fahrzeug behaelt sein bisheriges Verhalten, Hover/Klick
   auf die freie Flaeche daneben blaettert eine Position weiter (gleiche
   Intent-/Sperr-Logik wie Fahrzeug-Hover, siehe script.js). "is-disabled"
   setzt render(), wenn es in der Richtung nichts mehr zu blaettern gibt. */
.showroom__zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32%;
  z-index: 5;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.showroom__zone--prev {
  left: -2%;
}

.showroom__zone--next {
  right: -2%;
}

.showroom__zone.is-disabled {
  cursor: default;
  pointer-events: none;
}

/* Infoflaeche: feste rechte Grid-Spalte, bewegt sich nie - beim Wechsel
   blendet ausschliesslich der Inhalt um. */
.showroom__detail {
  display: grid;
  align-content: center;
}

.showroom__detail-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s 0.8s;
}

.showroom__detail-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.showroom__detail-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-on-dark);
}

/* Runde 44: etwas grosszuegigere vertikale Abstaende zwischen Titel,
   Beschreibung, Eigenschaften und Button - luftigere Gliederung. */
.showroom__detail-text {
  margin-top: 1.35rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-on-dark-muted);
  max-width: 36ch;
}

.showroom__detail-features {
  margin-top: 2rem;
  display: grid;
  gap: var(--space-sm);
}

.showroom__detail-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-on-dark-muted);
}

.showroom__detail-features strong {
  color: var(--text-on-dark);
  font-weight: 600;
}

.showroom__detail-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  stroke: var(--color-yellow);
}

.showroom__detail-cta {
  margin-top: 2rem;
  padding: 0.7rem 1.5rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

@media (max-width: 860px) {
  /* Mobile: exakt dieselbe Coverflow-Logik und dieselben Positionsklassen
     wie auf dem Desktop, nur kompaktere Slots. Aktivierung per Tap (siehe
     script.js - kein Hover auf Touch). Die Infoflaeche rueckt als eigene
     Grid-Zeile UNTER die Buehne - auch dort: feste Position, beim Wechsel
     blendet nur der Inhalt um. Kein horizontales Wischen/Scrollen mehr. */
  .showroom {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .showroom__stage {
    height: clamp(230px, 66vw, 320px);
  }

  /* Runde 43/49: auch mobil klare Abstaende, transform-only wie Desktop -
     Basis-Box hier 60% Buehne, daher eigene Umrechnung (Verschiebung um X
     Buehnen-Prozent = X/60 Element-Prozent; Slot-Mitten 50 / 8.5|91.5 /
     3|97 / 2|98 Prozent, Scales 15/60 = 0.25, 8/60 = 0.133, 0.12). Die
     far-Slots sind auf schmalen Screens unsichtbar geparkt (kein Platz
     fuer 5 Fahrzeuge ohne Ueberlappung); erreichbar bleiben sie durch
     Weiter-Tappen. Die Hover-Zonen sind mobil ausgeblendet. */
  .showroom__item {
    width: 60%;
  }

  .showroom__item.is-active {
    transform: translateX(-50%) scale(1.08);
  }

  .showroom__item.is-prev {
    transform: translateX(calc(-50% - 69.2%)) translateY(7px) scale(0.28);
  }

  .showroom__item.is-next {
    transform: translateX(calc(-50% + 69.2%)) translateY(7px) scale(0.28);
  }

  .showroom__item.is-far-prev {
    transform: translateX(calc(-50% - 78.3%)) translateY(7px) scale(0.133);
    opacity: 0;
    pointer-events: none;
  }

  .showroom__item.is-far-next {
    transform: translateX(calc(-50% + 78.3%)) translateY(7px) scale(0.133);
    opacity: 0;
    pointer-events: none;
  }

  .showroom__item.is-hidden[data-side="left"] {
    transform: translateX(calc(-50% - 80%)) translateY(7px) scale(0.12);
  }

  .showroom__item.is-hidden[data-side="right"] {
    transform: translateX(calc(-50% + 80%)) translateY(7px) scale(0.12);
  }

  .showroom__zone {
    display: none;
  }

  .showroom__detail-text {
    max-width: none;
  }

  .fleet-tabs__switch {
    flex-wrap: wrap;
    border-radius: var(--radius-md);
  }

  .fleet-tabs__btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .showroom__item,
  .showroom__item::before,
  .showroom__image,
  .showroom__image-lit,
  .showroom__reflection,
  .showroom__detail-panel {
    transition: none;
  }
}

/* Fuhrparkseite: animierter Quality-Check-Ablauf (siehe initFleetQuality() in
   script.js) – urspruenglich nach demselben Grundprinzip gebaut wie die
   damalige career.html-Linien-/Timeline-Animation (IntersectionObserver
   setzt einmalig "is-visible", Linienfuellung + gestaffelte Aktivierung
   laufen komplett ueber CSS-Transition-Delays), aber bewusst eigene Klassen.
   Diese Timeline auf career.html existiert seit Runde 30 nicht mehr (siehe
   ".career-slider" weiter unten, ersetzt genau weil sie dieser Sektion hier
   zu aehnlich sah) – das Grundprinzip lebt aber weiterhin hier auf fleet.html
   fort. Runde 2
   (nach Nutzer-Feedback "wirkt wie normaler Text"): jede Station ist jetzt
   eine eigene dunkle Karte (Hintergrund + Rahmen + Top-Akzent, angelehnt an
   ".service-card") statt blossem Text in einer Grid-Spalte, und Linie/Marker/
   Nodes sind deutlich groesser/kontrastreicher als im ersten Entwurf – das
   Ziel ist sofortige Erkennbarkeit als animierte Komponente, nicht nur
   technische Korrektheit. Runde 3 (nach Nutzer-Feedback "laeuft zu schnell,
   man verpasst es"): Linie/Marker von 2.6s auf 5.5s verlangsamt, Stationen-
   Staffelung von ~500ms auf 1000ms-Abstaende (0.3s/1.3s/2.3s) gestreckt –
   der Ablauf soll jetzt bewusst wahrgenommen werden koennen. */
/* Sektions-Toene + Uebergaenge der Fuhrparkseite (Runde 50, siehe
   Ketten-Kommentar bei ".fleet-showcase-section::after"). Der Quality-
   Check ist seit dem Sektionstausch die erste Sektion nach dem Showcase
   (Ton #131316), die Fahrzeuglogistik-Einleitung folgt darauf (#101013).
   Die reduzierten padding-Werte an der gemeinsamen Grenze ergeben
   zusammen ca. 136px Abstand auf Desktop bzw. ca. 72px mobil (Vorgabe
   110-150 / 70-100) - die Ramps liegen innerhalb dieser Polster. */
.fleet-features-section {
  position: relative;
  background: #131316;
  padding-bottom: clamp(2.25rem, 5vw, 4.25rem);
}

.fleet-features-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(90px, 12vw, 170px);
  background: linear-gradient(180deg, rgba(16, 16, 19, 0) 0%, #101013 100%);
  pointer-events: none;
  z-index: 0;
}

.fleet-features-section > .container {
  position: relative;
  z-index: 1;
}

.fleet-intro-section {
  position: relative;
  background: #101013;
  padding-top: clamp(2.25rem, 5vw, 4.25rem);
}

.fleet-quality {
  position: relative;
}

.fleet-quality__line {
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  margin-bottom: var(--space-xl);
}

.fleet-quality__line-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 2px;
  background: var(--color-yellow);
  box-shadow: 0 0 10px rgba(255, 196, 0, 0.45);
  /* Runde 3 (Nutzer-Feedback "laeuft zu schnell, man verpasst es"): auf 5.5s
     verlangsamt (vorher 2.6s) – der Ablauf soll bewusst wahrgenommen werden
     koennen, nicht nur registriert. */
  transition: width 5.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.fleet-quality.is-visible .fleet-quality__line-fill {
  width: 100%;
}

/* Marker "faehrt" mit der wachsenden Linie mit: identische Dauer/Kurve wie
   line-fill, nur auf "left" statt "width" angewendet – dadurch sitzt er
   optisch immer genau an der Spitze der gelben Fuellung, kein JS-Scroll-
   Handler noetig. Deutlich groesser + kraeftigerer Glow als im ersten
   Entwurf, damit die Bewegung wirklich auffaellt. */
.fleet-quality__marker {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-yellow);
  box-shadow: 0 0 0 4px rgba(255, 196, 0, 0.18), 0 0 16px rgba(255, 196, 0, 0.7);
  transform: translate(-50%, -50%);
  transition: left 5.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
  z-index: 2;
}

.fleet-quality.is-visible .fleet-quality__marker {
  left: 100%;
}

/* Feste Stations-Punkte auf der Linie (ueber den jeweiligen Grid-Spalten-
   Mitten bei 3 gleich breiten Spalten: 1/6, 1/2, 5/6) – wechseln von Grau auf
   Gelb genau dann, wenn ihre Station aktiv wird (siehe data-node/data-step
   unten, dieselben Verzoegerungen: 0.2s/0.7s/1.2s = 500ms-Abstand). */
.fleet-quality__node {
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid rgba(255, 255, 255, 0.28);
  transform: translate(-50%, -50%);
  transition: border-color 0.6s var(--ease-premium), background 0.6s var(--ease-premium),
    box-shadow 0.6s var(--ease-premium);
}

.fleet-quality__node[data-node="1"] { left: 16.667%; }
.fleet-quality__node[data-node="2"] { left: 50%; }
.fleet-quality__node[data-node="3"] { left: 83.333%; }

.fleet-quality.is-visible .fleet-quality__node[data-node="1"] { transition-delay: 0.3s; }
.fleet-quality.is-visible .fleet-quality__node[data-node="2"] { transition-delay: 1.3s; }
.fleet-quality.is-visible .fleet-quality__node[data-node="3"] { transition-delay: 2.3s; }

.fleet-quality.is-visible .fleet-quality__node[data-node="1"],
.fleet-quality.is-visible .fleet-quality__node[data-node="2"],
.fleet-quality.is-visible .fleet-quality__node[data-node="3"] {
  border-color: var(--color-yellow);
  background: var(--color-yellow);
  box-shadow: 0 0 10px rgba(255, 196, 0, 0.6);
}

.fleet-quality__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

/* Die eigentliche "Check-Karte" – dunkler Hintergrund + Rahmen + gelber Top-
   Akzent, der beim Aktivwerden aufleuchtet (gleiche Sprache wie
   ".service-card" auf services.html, aber eigene Klasse/eigenes Timing). */
.fleet-quality__step {
  position: relative;
  cursor: default;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-subtle-dark);
  border-top: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md);
  padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.5rem, 2.5vw, 1.75rem);
  transition: transform 0.6s var(--ease-premium), background 0.6s var(--ease-premium),
    border-color 0.6s var(--ease-premium), box-shadow 0.6s var(--ease-premium);
}

.fleet-quality__step:focus-visible {
  outline: none;
}

/* Nummer als kleines, technisch wirkendes Badge (Rahmen statt blossem Text) –
   bewusst anders gestaltet als die Karriereseite (damals ".career-process__number",
   heute ".career-slider__number"), damit die Seite nicht wie eine 1:1-Kopie
   der Karriere-Sektion wirkt. */
.fleet-quality__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--border-subtle-dark);
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--color-gray-500);
  margin-bottom: var(--space-sm);
  transition: border-color 0.6s var(--ease-premium), color 0.6s var(--ease-premium),
    background 0.6s var(--ease-premium);
}

.fleet-quality__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-on-dark);
  margin-bottom: var(--space-2xs);
}

.fleet-quality__text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-on-dark-muted);
}

.fleet-quality__step:hover,
.fleet-quality__step:focus-visible {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.06);
  border-top-color: var(--color-yellow);
}

.fleet-quality__step:hover .fleet-quality__number,
.fleet-quality__step:focus-visible .fleet-quality__number {
  border-color: var(--color-yellow);
  color: var(--color-yellow);
  background: rgba(255, 196, 0, 0.1);
}

.fleet-quality.is-visible .fleet-quality__step[data-step="1"] { transition-delay: 0.3s; }
.fleet-quality.is-visible .fleet-quality__step[data-step="2"] { transition-delay: 1.3s; }
.fleet-quality.is-visible .fleet-quality__step[data-step="3"] { transition-delay: 2.3s; }

/* Aktive Karte: gelber Rand/Top-Akzent, hellerer Hintergrund, dezentes
   Leuchten nach aussen und ein kleiner Lift nach oben – deutlich sichtbarer
   Unterschied zu inaktiven Karten, ohne grosse/haerte Schatten. */
.fleet-quality.is-visible .fleet-quality__step[data-step] {
  transform: translateY(-4px);
  background: rgba(255, 196, 0, 0.055);
  border-color: rgba(255, 196, 0, 0.35);
  border-top-color: var(--color-yellow);
  box-shadow: 0 12px 32px -18px rgba(255, 196, 0, 0.5);
}

.fleet-quality.is-visible .fleet-quality__step[data-step] .fleet-quality__number {
  border-color: var(--color-yellow);
  color: var(--color-yellow);
  background: rgba(255, 196, 0, 0.12);
}

/* Tablet/Mobile: horizontale Linie/Marker/Nodes weichen einer deutlich
   sichtbaren VERTIKALEN Spur links neben den Karten (::before/::after auf dem
   Steps-Container statt fixer Prozent-Positionen, die bei variabler
   Textlaenge nicht mehr traefen) – bewusst kraeftiger dimensioniert
   (4px Linie, 13px Punkte) als im ersten Entwurf, damit sie auf schmalen
   Screens nicht zu schwach wirkt. Karten bleiben identisch sichtbar. */
@media (max-width: 860px) {
  .fleet-quality__line {
    display: none;
  }

  .fleet-quality__steps {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    position: relative;
    padding-left: calc(var(--space-lg) + 6px);
  }

  .fleet-quality__steps::before,
  .fleet-quality__steps::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: 2px;
  }

  .fleet-quality__steps::before {
    background: rgba(255, 255, 255, 0.14);
  }

  .fleet-quality__steps::after {
    height: 0%;
    bottom: auto;
    background: var(--color-yellow);
    box-shadow: 0 0 10px rgba(255, 196, 0, 0.45);
    transition: height 5.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
  }

  .fleet-quality.is-visible .fleet-quality__steps::after {
    height: 100%;
  }

  .fleet-quality__step::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--space-lg) - 6px + 8px);
    top: 1.75rem;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 2px solid rgba(255, 255, 255, 0.28);
    transform: translateX(-50%);
    z-index: 2;
    transition: border-color 0.6s var(--ease-premium), background 0.6s var(--ease-premium),
      box-shadow 0.6s var(--ease-premium);
  }

  .fleet-quality.is-visible .fleet-quality__step[data-step="1"]::before { transition-delay: 0.3s; }
  .fleet-quality.is-visible .fleet-quality__step[data-step="2"]::before { transition-delay: 1.3s; }
  .fleet-quality.is-visible .fleet-quality__step[data-step="3"]::before { transition-delay: 2.3s; }

  .fleet-quality.is-visible .fleet-quality__step[data-step]::before {
    border-color: var(--color-yellow);
    background: var(--color-yellow);
    box-shadow: 0 0 10px rgba(255, 196, 0, 0.6);
  }

  .fleet-quality__step:hover,
  .fleet-quality__step:focus-visible {
    transform: none;
  }

  .fleet-quality.is-visible .fleet-quality__step[data-step] {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   11. Formular (Kontakt)
   -------------------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.form-field {
  margin-bottom: var(--space-md);
}

.form-field label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: var(--space-3xs);
  color: var(--text-primary);
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-yellow);
  box-shadow: 0 0 0 4px rgba(255, 196, 0, 0.15);
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.form-note {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  margin-top: var(--space-sm);
}

.form-status {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: rgba(255, 196, 0, 0.14);
  border: 1px solid rgba(255, 196, 0, 0.4);
  font-size: 0.95rem;
  display: none;
}

.form-status.is-visible {
  display: block;
  animation: fade-in-up var(--duration-mid) var(--ease-premium);
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact-info-item {
  display: flex;
  gap: var(--space-sm);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
}

.contact-info-item__icon {
  width: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.2rem;
}

.contact-info-item__icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--color-yellow);
}

.contact-info-item h3 {
  font-size: 1rem;
  margin-bottom: 2px;
}

.contact-info-item p {
  font-size: 0.95rem;
}

/* Google-Maps-Einbindung, zwei Varianten fuer zwei unterschiedliche Zwecke
   (bewusst kein gemeinsam abstrahierter Basis-Selektor – die beiden Module
   sind eigenstaendig genug, dass eine Abstraktion hier mehr verschleiern
   als vereinfachen wuerde):

   ".contact-map" (contact.html) – klein und funktional, sitzt neben
   Kontaktdaten/Formular und darf diese nicht optisch verdraengen.

   ".about-map" (about.html) – bewusst groesser und grosszuegiger,
   repraesentiert den Standort statt nur schneller Orientierung zu dienen
   (siehe .about-map weiter unten).

   Beide: dunkler, hochwertiger Rahmen statt einer hellen Standardbox –
   Hintergrundfarbe verhindert einen weissen Blitz, bevor der iframe-Inhalt
   geladen ist, der Filter auf dem iframe selbst daempft die von Haus aus
   helle Kartengrafik auf einen Ton, der ins dunkle Layout passt. */
.contact-map {
  margin-top: var(--space-sm);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-black-soft);
  border: 1px solid var(--border-subtle-dark);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 280px;
  filter: invert(90%) hue-rotate(180deg) brightness(0.95) contrast(0.9);
}

.contact-map__notice {
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--color-gray-500);
}

/* Wrapper fuer den kleinen Standort-Block in der rechten Kontaktspalte,
   direkt unter der Kontaktdaten-Liste – gleiche schlichte Typografie wie
   .contact-info-item (h3 1rem, p 0.95rem), damit es wie ein natuerlicher
   vierter Punkt der Liste wirkt statt wie ein eigenstaendiger Abschnitt. */
.contact-map-block {
  margin-top: var(--space-lg);
}

.contact-map-block h3 {
  font-size: 1rem;
  margin-bottom: 2px;
}

.contact-map-block > p {
  font-size: 0.95rem;
}

@media (max-width: 560px) {
  .contact-map iframe {
    height: 300px;
  }
}

/* Marken-Panel (about.html): das dunkel gezeichnete Original-Logo braucht
   einen hellen Untergrund, um lesbar zu bleiben (siehe Kommentar in
   about.html) – ein warmer, mattes Off-White-Ton statt reinem Weiss, damit
   es nicht wie eine harte Standard-Flaeche wirkt. Grosszuegiges Padding
   sorgt dafuer, dass Logo und Text auf der hellen Flaeche selbst genug Raum
   haben, statt sie auszufuellen. Weicher Schlagschatten + hauchduenne helle
   Kante lassen das Panel bewusst vom dunklen Hintergrund abheben, statt wie
   eine zufaellig platzierte flache Flaeche zu wirken – das eigentliche
   "Markenmoment" der Seite. */
.brand-panel {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  background: #f5f2eb;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) calc(var(--space-2xl) * 1.15);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.55);
}

.brand-panel__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-panel__logo img {
  display: block;
  height: 156px;
  width: auto;
}

.brand-panel__text h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-black);
  margin-bottom: var(--space-xs);
}

.brand-panel__text p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-gray-700);
  max-width: 46ch;
}

@media (max-width: 760px) {
  .brand-panel {
    flex-direction: column;
    text-align: center;
    padding: var(--space-xl) var(--space-lg);
    gap: var(--space-lg);
  }

  .brand-panel__logo img {
    height: 108px;
  }

  .brand-panel__text p {
    max-width: none;
  }
}

/* Repraesentative, grosse Standort-Karte (about.html) – groesserer Radius,
   praesenterer Schatten und mehr Abstand nach oben als .contact-map, damit
   sie wie ein eigenstaendiges, hochwertiges Element wirkt statt wie ein
   funktionales Beiwerk. */
.about-map {
  margin-top: var(--space-lg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-black-soft);
  border: 1px solid var(--border-subtle-dark);
  box-shadow: 0 32px 72px rgba(0, 0, 0, 0.42);
}

.about-map iframe {
  display: block;
  width: 100%;
  height: 520px;
  filter: invert(90%) hue-rotate(180deg) brightness(0.95) contrast(0.9);
}

.about-map__notice {
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--color-gray-500);
}

@media (max-width: 560px) {
  .about-map iframe {
    height: 350px;
  }
}

/* Gemeinsame Klasse fuer den jeweils letzten Content-/CTA-Block einer Seite
   direkt vor dem Footer – auf allen 8 Seiten zusaetzlich zu den bestehenden
   Klassen gesetzt (index.html: .landing-closing, fleet.html:
   .fleet-closing, about.html: .about-values-section, services.html:
   .service-closing, career.html: .career-closing-section, contact.html:
   die Formular-/Kontaktdaten-Sektion, plus impressum.html/datenschutz.html).
   Sorgt fuer einen einheitlichen, deutlich sichtbaren Abstand zum Footer
   statt vieler zufaelliger Einzelwerte pro Seite. Bewusst padding-bottom
   statt margin-bottom: die meisten dieser Sektionen enden in einem
   Farbverlauf (siehe .transition-fade-out/.fleet-closing/
   .career-closing-section) – ein Padding fuehrt die Sektion-eigene
   Hintergrundfarbe/den Verlauf durch den zusaetzlichen Abstand weiter,
   waehrend ein Margin stattdessen die Body-Hintergrundfarbe zeigen wuerde
   (funktioniert bei den meisten Endtoenen ebenfalls, aber Padding ist
   garantiert nahtlos). Skaliert mit der Viewport-Breite statt eines fixen
   Werts, damit der Abstand auch auf breiten Screens klar sichtbar bleibt. */
.section-before-footer {
  padding-bottom: clamp(5rem, 10vw, 11rem);
}

/* --------------------------------------------------------------------------
   12. Footer
   Bewusst minimalistisch: keine vollstaendige Zweit-Navigation mehr (die
   Hauptnavigation im Header reicht), kein wiederholter Standard-Absatz auf
   jeder Unterseite. Drei schlanke Spalten (Marke | Kontakt | Rechtliches);
   der kurze Marken-Satz (".footer-brand__tagline") steht ausschliesslich auf
   der Startseite im Markup, Unterseiten haben dort nur den kleinen
   Schriftzug – siehe index.html vs. restliche Seiten.

   Klare Abgrenzung zum Seiteninhalt: eine sichtbare obere Trennlinie plus
   ein Ton, der einen Schritt dunkler ist als "--color-black" (der Farbton,
   den fast jede Seite kurz vor dem Footer sowieso schon erreicht hat – ohne
   diesen zusaetzlichen Schritt wuerde der Footer sonst nahtlos im letzten
   Seitenabschnitt "verschwinden"). Grosszuegiges Padding oben (Abstand zum
   Inhalt), dafuer etwas knapperes Padding unten/zwischen den Elementen
   (kompaktere, aber klarer strukturierte Fusszeile). -------------------- */
.site-footer {
  background: #000000;
  color: var(--text-on-dark-muted);
  border-top: 1px solid var(--border-subtle-dark);
  padding-block: var(--space-2xl) var(--space-md);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-subtle-dark);
}

.footer-brand__mark {
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-on-dark);
  margin-bottom: var(--space-xs);
}

.footer-brand__mark span {
  color: var(--color-yellow);
}

.footer-brand__tagline {
  color: var(--text-on-dark-muted);
  max-width: 34ch;
  font-size: 0.92rem;
}

.footer-col h3 {
  color: var(--text-on-dark-muted);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.footer-col a,
.footer-col li {
  font-size: 0.92rem;
  color: var(--text-on-dark-muted);
}

.footer-col a {
  transition: color var(--duration-fast) ease;
}

.footer-col a:hover {
  color: var(--color-yellow);
}

/* Impressum/Datenschutz sollen deutlicher auffindbar sein als die reine
   Kontaktkurzinfo daneben – heller/kraeftiger statt derselben gedaempften
   Textfarbe wie die uebrigen Footer-Spalten. */
.footer-col--legal a {
  color: var(--text-on-dark);
  font-weight: 600;
}

.footer-bottom {
  padding-top: var(--space-md);
}

.footer-bottom p {
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--color-gray-500);
}

/* --------------------------------------------------------------------------
   13. Scroll-Animationen (Fade-in / Parallax)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration-slow) var(--ease-premium),
    transform var(--duration-slow) var(--ease-premium);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Gestaffelte Einblendung für Kachel-/Kartenraster */
.grid .reveal:nth-child(2) { transition-delay: 90ms; }
.grid .reveal:nth-child(3) { transition-delay: 180ms; }
.grid .reveal:nth-child(4) { transition-delay: 270ms; }

.parallax {
  will-change: transform;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   14. Responsive Anpassungen
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .intro-section {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .nav__links {
    display: none;
  }

  .nav__toggle {
    display: flex;
  }

  /* Aufklapp-Menü mobil */
  .nav.is-open .nav__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    background: rgba(10, 10, 11, 0.97);
    backdrop-filter: blur(14px);
    padding: var(--space-md);
    gap: var(--space-sm);
    border-bottom: 1px solid var(--border-subtle-dark);
    /* Runde 76: faellt die Liste hoeher aus als der Platz unterm Header
       (Quer-Handys), scrollt sie in sich selbst - die Seite dahinter ist
       waehrenddessen gesperrt (html.nav-locked). 88px = Header plus etwas
       Reserve; dvh beruecksichtigt die ein-/ausfahrende Browserleiste. */
    max-height: calc(100vh - 88px);
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: nav-drop-in 0.3s var(--ease-premium);
  }

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

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

  .stat-row {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .contact-teaser {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

@media (max-width: 560px) {
  /* (Die fruehere .hero__truck-wrap-Breitenregel entfiel in Runde 67 -
     der Szenen-Wrapper ist jetzt auf allen Groessen vollflaechig.) */
  .hero__wordmark {
    font-size: clamp(0.9rem, 4vw, 1.15rem);
    letter-spacing: 0.05em;
  }

  .btn-row {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   15. Landing-Page (Startseite unterhalb Hero)
   Alle Sektionen bleiben bewusst dunkel (kein Wechsel zu weissen/grauen
   Bloecken) und gehen per linear-gradient nahtlos ineinander ueber – jede
   Sektion startet mit der Endfarbe der vorherigen. Die Kette beginnt bei
   var(--color-black) (Hero-Endfarbe) und endet dort auch wieder (Footer-
   Farbe), sodass kein harter Bruch entsteht. Eigene landing-*-Klassen, damit
   die von Unterseiten mitgenutzten Klassen (.card, .quote-block, .grid--3,
   .contact-teaser, .intro-section) unangetastet bleiben.
   -------------------------------------------------------------------------- */

/* Intro: direkte Fortsetzung des Hero, kein Kasten, nur grosse Typografie */
.landing-intro {
  background: linear-gradient(180deg, #0a0a0b 0%, #131315 100%);
  padding-block: clamp(8rem, 18vw, 14rem);
}

.landing-intro__inner {
  max-width: 46rem;
  text-align: center;
}

.landing-intro__headline {
  font-size: clamp(2.2rem, 5.2vw, 4.2rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-on-dark);
}

.landing-intro__text {
  margin-top: var(--space-xl);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.65;
  color: var(--text-on-dark-muted);
  max-width: 52ch;
  margin-inline: auto;
}

/* Leistungs-Teaser: grosse, klickbare/hoverbare Begriffe statt Karten */
.landing-services {
  background: linear-gradient(180deg, #131315 0%, #17171b 100%);
  padding-block: clamp(7.5rem, 16vw, 13rem);
}

.landing-services__terms {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 4vw, 2.8rem);
}

.landing-services__term {
  font-family: inherit;
  font-size: clamp(2.1rem, 6.4vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-gray-500);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color var(--duration-mid) var(--ease-premium);
}

.landing-services__term:hover,
.landing-services__term:focus-visible,
.landing-services__term.is-active {
  color: var(--color-yellow);
}

.landing-services__desc {
  position: relative;
  min-height: 3.4em;
  max-width: 46ch;
  margin-top: var(--space-xl);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--text-on-dark-muted);
}

.landing-services__desc span {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--duration-mid) var(--ease-premium);
}

.landing-services__desc span.is-active {
  position: relative;
  opacity: 1;
}

.landing-services__link {
  display: inline-block;
  margin-top: var(--space-xl);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-yellow);
  transition: transform var(--duration-fast) var(--ease-premium);
}

.landing-services__link:hover {
  transform: translateX(4px);
}

/* Routenbereich: abstrakte SVG-Route statt echter Landkarte */
.landing-route {
  background: linear-gradient(180deg, #17171b 0%, #1c1c1f 100%);
  padding-block: clamp(7.5rem, 16vw, 13rem);
}

.landing-route__inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(3rem, 6vw, 5.5rem);
  align-items: center;
}

.landing-route__text h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-on-dark);
  max-width: 16ch;
}

.landing-route__text p {
  margin-top: var(--space-md);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.65;
  color: var(--text-on-dark-muted);
  max-width: 42ch;
}

.landing-route__visual svg {
  width: 100%;
  height: auto;
  max-width: 560px;
  display: block;
  margin-inline: auto;
}

.landing-route__main {
  fill: none;
  transition: stroke-dashoffset 1.8s var(--ease-premium);
}

.landing-route__branch {
  fill: none;
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 0.7s;
}

.landing-route__visual.is-visible .landing-route__branch {
  opacity: 0.55;
}

.landing-route__dot {
  fill: var(--color-yellow);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.landing-route__dot--start {
  transition-delay: 0.1s;
}

.landing-route__dot--branch {
  fill: var(--color-gray-300);
  transition-delay: 1s;
}

.landing-route__visual.is-visible .landing-route__dot {
  opacity: 1;
}

.landing-route__mover {
  fill: var(--color-yellow);
  opacity: 0;
  transition: opacity 0.4s ease 1.6s;
}

.landing-route__visual.is-visible .landing-route__mover {
  opacity: 0.9;
}

.landing-route__label {
  font-family: var(--font-base);
  font-size: 12px;
  letter-spacing: 0.04em;
  fill: var(--text-on-dark-muted);
  opacity: 0;
  transition: opacity 0.6s ease;
  transition-delay: 1s;
}

.landing-route__visual.is-visible .landing-route__label {
  opacity: 0.8;
}

.landing-route__label--muted {
  transition-delay: 1.3s;
}

/* Ablaufbereich: Woerter aktivieren sich nacheinander, Linie fuellt sich */
.landing-process {
  background: linear-gradient(180deg, #1c1c1f 0%, #101012 100%);
  padding-block: clamp(7.5rem, 16vw, 13rem);
  text-align: center;
}

.landing-process__words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.8rem, 3vw, 1.8rem);
}

.landing-process__word {
  font-size: clamp(1.9rem, 5.6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-gray-500);
  transition: color var(--duration-slow) var(--ease-premium);
}

.landing-process.is-visible .landing-process__word {
  color: var(--text-on-dark);
}

.landing-process.is-visible .landing-process__word[data-step="1"] {
  transition-delay: 0.1s;
}

.landing-process.is-visible .landing-process__word[data-step="2"] {
  transition-delay: 0.5s;
}

.landing-process.is-visible .landing-process__word[data-step="3"] {
  transition-delay: 0.9s;
  color: var(--color-yellow);
}

.landing-process__line {
  position: relative;
  width: min(100%, 420px);
  height: 2px;
  margin: var(--space-lg) auto 0;
  background: var(--border-subtle-dark);
  overflow: hidden;
}

.landing-process__line-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--color-yellow);
  transition: width 1.4s var(--ease-premium) 0.2s;
}

.landing-process.is-visible .landing-process__line-fill {
  width: 100%;
}

.landing-process__text {
  margin-top: var(--space-xl);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  color: var(--text-on-dark-muted);
  max-width: 46ch;
  margin-inline: auto;
}

/* Abschlussbereich: zurueckhaltende Textlinks statt auffaelliger Buttons */
.landing-closing {
  background: linear-gradient(180deg, #101012 0%, #0a0a0b 100%);
  padding-block: clamp(8.5rem, 18vw, 14rem);
}

.landing-closing__inner {
  max-width: 40rem;
  text-align: center;
}

.landing-closing__inner h2 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-on-dark);
}

.landing-closing__inner p {
  margin-top: var(--space-md);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--text-on-dark-muted);
  max-width: 46ch;
  margin-inline: auto;
}

.landing-closing__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.landing-closing__link {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-on-dark);
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.landing-closing__link:hover {
  color: var(--color-yellow);
  border-color: var(--color-yellow);
}

.landing-closing__link span {
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-premium);
}

.landing-closing__link:hover span {
  transform: translateX(3px);
}

@media (max-width: 860px) {
  .landing-route__inner {
    grid-template-columns: 1fr;
  }

  .landing-route__text h2,
  .landing-route__text p {
    max-width: none;
  }

  .landing-services__terms {
    gap: 1.1rem 1.8rem;
  }
}

/* Leistungsuebersicht (services.html): dunkle Premium-Karten statt frueherer
   Vollbild-Statements. Rein aesthetischer Hover (Anheben + Shine-Sweep +
   hellere Akzentlinie/Hintergrund) – keine Blur-/Box-Shadow-Effekte, nur
   transform/background/border (kompositor-guenstig).
   Sitzt jetzt direkt nach dem schwarzen Page-Header (statt nach der
   Europa-Karte) – flache Schwarz-Flaeche statt Verlauf, kein Farbwechsel
   an dieser Stelle noetig. */
.service-overview-section {
  background: var(--color-black);
  color: var(--text-on-dark);
}

.service-card-grid {
  margin-top: clamp(2rem, 5vw, 3rem);
}

.service-card {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 3vw, 2rem);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-top: 2px solid rgba(255, 196, 0, 0.35);
  border-radius: var(--radius-md);
  transition: transform var(--duration-mid) var(--ease-premium),
    background var(--duration-mid) ease, border-color var(--duration-mid) ease;
}

.service-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.055);
  border-top-color: var(--color-yellow);
}

/* Dezenter Glanz-Sweep beim Hover – reines transform, kein JS, kein Blur */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
  pointer-events: none;
}

.service-card:hover::before {
  transform: translateX(120%);
}

.service-card__eyebrow {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-yellow);
}

.service-card__title {
  margin-top: var(--space-sm);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-on-dark);
}

.service-card__text {
  margin-top: var(--space-sm);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-on-dark-muted);
}

/* --------------------------------------------------------------------------
   16. Europa-Routenkarte (Leistungsseite)
   Echte Vektorkarte (Laenderpfade inline im HTML eingebettet, damit CSS/JS
   jeden Pfad einzeln ansteuern koennen – keine externe SVG-Datei). 38
   bediente Laender sind interaktiv, inklusive eines nachgezeichneten
   Marokko-Umrisses, eine feste Liste nicht bedienter Laender (plus
   Spitzbergen, getrennt vom Norwegen-Pfad) bleibt neutral/nicht interaktiv
   (.europe-map__country--excluded).
   Standardzustand: keine Route sichtbar, kein Land hervorgehoben – nur der
   Hauptsitz-Punkt ist fest sichtbar. Koordinatenraum 0-1000 x 0-684
   (Original-viewBox), Routen/Marker nutzen denselben Raum.
   -------------------------------------------------------------------------- */
/* Dreistufiger Verlauf statt zweistufig: die Sektion beginnt UND endet jetzt
   an einer flachen Schwarz-Sektion (Drei-Wege davor, Werte danach) – der
   mittlere #131315-Ton bleibt als dezente Tiefe hinter der Karte erhalten,
   ohne dass am unteren Rand ein Farbsprung zur naechsten Sektion entsteht. */
.europe-map-section {
  background: linear-gradient(180deg, var(--color-black) 0%, #131315 50%, var(--color-black) 100%);
}

.europe-map {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  margin-top: clamp(2rem, 5vw, 3rem);
}

.europe-map__stage {
  position: relative;
  /* Die skalierte SVG (siehe unten) darf sichtbar ueber die eigene Box
     hinausragen, ohne dass das Grid-Layout (Spaltenbreite/-hoehe, Panel-
     Position) sich dadurch veraendert – transform beeinflusst nur die
     Darstellung, nicht die Layout-Groesse, "overflow: visible" verhindert
     nur, dass der ueberstehende Teil abgeschnitten wird. */
  overflow: visible;
}

.europe-map__svg {
  width: 100%;
  height: auto;
  display: block;
  /* Karte wirkt groesser/praesenter, OHNE dass der Kartencontainer selbst
     (und damit das umliegende Grid/die Panel-Position) an Groesse gewinnt –
     reine Compositor-Transformation, kein Reflow. Nur auf breiten Screens
     (zweispaltiges Layout, siehe Media-Query unten): dort gibt es dank des
     Grid-"gap" seitlich Luft, in die die Karte hineinwachsen kann, ohne den
     Panel-Text zu beruehren. */
  transform: scale(1.16);
  transform-origin: center center;
}

@media (max-width: 860px) {
  .europe-map__svg {
    /* Unterhalb von 860px steht die Karte einspaltig ueber dem Panel (siehe
       .europe-map-Media-Query) und ihre Box ist bereits so breit wie die
       verfuegbare Content-Breite – keine seitliche Luft zum Hineinwachsen
       mehr, ein Scale-up wuerde die Seite horizontal scrollbar machen.
       Deshalb hier bewusst keine Vergroesserung. */
    transform: none;
  }
}

/* Nicht bediente Laender (GB/IE/IS/UA/BY/MD/RU/AM/GE): sichtbar, aber
   bewusst dunkler/unauffaelliger und komplett nicht interaktiv – kein
   Hover, keine Route, kein Textpanel. */
.europe-map__country--excluded {
  fill: rgba(255, 255, 255, 0.025);
  stroke: rgba(255, 255, 255, 0.055);
  stroke-width: 1;
  pointer-events: none;
}

/* Bediente Laender: echte Grenzverlaeufe. Im Ruhezustand dezent sichtbar
   (etwas praesenter als die ausgeschlossenen Laender, als leiser Hinweis
   "hier geht was"), Hover/Fokus/Tap hebt gelb hervor. */
.europe-map__country {
  fill: rgba(255, 255, 255, 0.065);
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1.2;
  cursor: pointer;
  transition: fill var(--duration-mid) ease, stroke var(--duration-mid) ease;
}

.europe-map__country:hover,
.europe-map__country:focus-visible,
.europe-map__country.is-active {
  fill: rgba(255, 196, 0, 0.2);
  stroke: var(--color-yellow);
}

.europe-map__country:focus-visible {
  outline: none;
}

/* Routen: im Ruhezustand komplett unsichtbar, erscheinen nur bei
   Hover/Fokus/Tap des jeweiligen Landes (siehe initEuropeMap()). */
.europe-map__route {
  fill: none;
  stroke: var(--color-yellow);
  stroke-width: 3;
  opacity: 0;
  transition: opacity var(--duration-mid) ease;
}

.europe-map__route.is-active {
  opacity: 0.85;
}

.europe-map__mover {
  fill: var(--color-yellow);
  opacity: 0;
  transition: opacity var(--duration-fast) ease;
}

.europe-map__mover.is-active {
  opacity: 0.95;
}

.europe-map__marker {
  fill: var(--color-gray-300);
  stroke: var(--color-black);
  stroke-width: 1.5;
  transition: fill var(--duration-mid) ease;
  pointer-events: none;
}

.europe-map__marker--hq {
  fill: var(--color-yellow);
}

.europe-map__label {
  font-family: var(--font-base);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  fill: var(--text-on-dark);
  pointer-events: none;
}

/* Textpanel: dynamisch per JS befuellt (kein hartcodierter Eintrag pro
   Land, siehe COUNTRY_INFO in script.js) – dezenter Opacity-Dip beim
   Textwechsel statt hartem Sprung. */
.europe-map__panel h3 {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-on-dark);
  margin-bottom: var(--space-2xs);
  transition: opacity var(--duration-fast) ease;
}

.europe-map__panel p {
  color: var(--text-on-dark-muted);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 40ch;
  transition: opacity var(--duration-fast) ease;
}

.europe-map__panel.is-updating h3,
.europe-map__panel.is-updating p {
  opacity: 0;
}

.europe-map__hint {
  margin-top: var(--space-lg);
  font-size: var(--fs-small);
  color: var(--color-gray-500);
}

/* Vertrauensbereich (about.html, jetzt Seitenabschluss): ruhig, dunkel,
   keine Logos/Kacheln – nur duenne gelbe Linie links. Hintergrund/Verlauf
   kommen ueber die kombinierten "section--surface transition-fade-out"-
   Klassen im Markup, hier nur noch die Textfarbe. */
.trust-section {
  color: var(--text-on-dark);
}

.trust-section__block {
  max-width: 52rem;
  margin-inline: auto;
  border-left: 2px solid var(--color-yellow);
  padding-left: var(--space-lg);
}

.trust-section__block h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-on-dark);
}

.trust-section__block p {
  margin-top: var(--space-sm);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.65;
  color: var(--text-on-dark-muted);
  max-width: 56ch;
}

@media (max-width: 860px) {
  .europe-map {
    grid-template-columns: 1fr;
  }
}

/* Fuhrpark-Abschluss: startet seit Runde 50 auf dem Ton der davorliegenden
   Fahrzeuglogistik-Einleitung (#101013, siehe Verlaufskette bei
   ".fleet-showcase-section::after") und laeuft weich nach Schwarz aus -
   kein Sprung an der Sektionsgrenze. */
.fleet-closing {
  background: linear-gradient(180deg, #101013 0%, var(--color-black) 100%);
}

/* Dezenter Abschluss (Leistungsseite): ruhige Headline + zurueckhaltender
   Textlink statt auffaelligem Button – .landing-closing__link (siehe
   Abschnitt 15) wird hier bewusst wiederverwendet fuer denselben
   zurueckhaltenden Look. */
.service-closing__inner {
  max-width: 34rem;
  text-align: center;
  margin-inline: auto;
}

.service-closing__inner h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-on-dark);
}

.service-closing__inner .landing-closing__link {
  display: inline-block;
  margin-top: var(--space-lg);
}

/* --------------------------------------------------------------------------
   18. Rechtliche Seiten (Impressum/Datenschutz)
   Reine Fliesstext-Breite statt Mehrspalten-Grid, damit lange Rechtstexte gut
   lesbar bleiben. ".legal-notice" markiert Platzhalterinhalte deutlich mit
   derselben dezenten Dashed-Border-Optik, die sitewide fuer "hier fehlt noch
   echtes Material" steht. -------------------------------------------------- */
.legal-content {
  max-width: 68ch;
}

.legal-notice {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  padding: var(--space-md) var(--space-lg);
  background: rgba(255, 196, 0, 0.06);
  border: 1px dashed rgba(255, 196, 0, 0.35);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xl);
  max-width: 68ch;
}

.legal-notice__mark {
  color: var(--color-yellow);
  font-size: 1.2rem;
  line-height: 1.4;
}

.legal-notice p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.legal-section {
  margin-bottom: var(--space-xl);
}

.legal-section:last-child {
  margin-bottom: 0;
}

.legal-section h2 {
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.legal-section p {
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.7;
}

.legal-section ul {
  margin-top: var(--space-xs);
  padding-left: 1.2em;
  display: grid;
  gap: 0.3em;
}

.legal-section li {
  list-style: disc;
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.7;
}

/* Bewerbungsaufruf (career.html): sitzt nach dem anthrazitfarbenen
   "Offene Stellen"-Bereich – kleiner Verlauf statt flacher Flaeche, damit an
   der Sektionsgrenze kein sichtbarer Cut zur normalen Seiten-Grundflaeche
   entsteht (gleiche Technik wie .service-overview-section auf services.html). */
.career-closing-section {
  background: linear-gradient(180deg, var(--color-anthracite) 0%, var(--bg-page) 100%);
}

/* --------------------------------------------------------------------------
   19. Ueber uns: interaktive Arbeitsweise-Punkte
   Vier unabhaengige, gleichberechtigte Karten (kein Tab/Panel-Wechsel) –
   Hover (Desktop) klappt den Text rein per CSS auf, Klick/Tap (Touch, siehe
   initAboutValues() in script.js) toggelt dieselbe "is-open"-Klasse, damit
   es auch ohne Hover funktioniert. Buttons statt divs fuer Tastatur-
   erreichbarkeit (:focus-visible zeigt denselben Zustand wie :hover).
   -------------------------------------------------------------------------- */
.about-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.about-values__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  cursor: pointer;
  transition: transform var(--duration-mid) var(--ease-premium),
    border-color var(--duration-mid) var(--ease-premium),
    background var(--duration-mid) var(--ease-premium);
}

.about-values__item:hover,
.about-values__item:focus-visible,
.about-values__item.is-open {
  transform: translateY(-4px);
  border-color: var(--color-yellow);
  background: rgba(255, 255, 255, 0.05);
}

.about-values__item:focus-visible {
  outline: none;
}

.about-values__mark {
  color: var(--color-yellow);
  font-size: 1.3rem;
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.about-values__term {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.about-values__text {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-secondary);
  transition: max-height var(--duration-mid) var(--ease-premium),
    opacity var(--duration-mid) var(--ease-premium),
    margin-top var(--duration-mid) var(--ease-premium);
}

.about-values__item:hover .about-values__text,
.about-values__item:focus-visible .about-values__text,
.about-values__item.is-open .about-values__text {
  max-height: 12em;
  opacity: 1;
  margin-top: var(--space-sm);
}

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

@media (max-width: 560px) {
  .about-values {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   20. Karriereseite: interaktiver Einstiegs-Slider (Runde 30, ersetzt die
   frueher Linien-/Timeline-Animation – die aehnelte optisch zu stark der
   Quality-Check-Sektion auf fleet.html, siehe initCareerSlider() in
   script.js). Bewusst KEINE Linie/Timeline-Optik: grosse aktive Karte links
   + kompakte Step-Buttons rechts, Kartenwechsel per Opacity+Transform-
   Crossfade (kein JS-Tween). Karten liegen wie ".fleet-showcase__panel"
   als CSS-Grid-Stack uebereinander, Container richtet sich automatisch nach
   der hoechsten Karte. -------------------------------------------------- */
.career-slider {
  display: grid;
  grid-template-columns: 1.5fr 0.85fr;
  gap: var(--space-lg);
  align-items: stretch;
}

.career-slider__stage {
  display: grid;
  position: relative;
}

.career-slider__card {
  grid-area: 1 / 1;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-subtle-dark);
  border-left: 2px solid var(--color-yellow);
  border-radius: var(--radius-md);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  /* 600ms liegt in der gewuenschten 500-700ms-Spanne; visibility schaltet
     erst nach der vollen Dauer um (kein "springendes" Zwischenbild), aber
     nur beim Ausblenden – siehe ".is-active" darunter fuer den Gegenfall. */
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.6s;
}

.career-slider__card.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.career-slider__number {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-yellow);
  font-variant-numeric: tabular-nums;
}

.career-slider__title {
  margin-top: var(--space-sm);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-on-dark);
}

.career-slider__text {
  margin-top: var(--space-sm);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-on-dark-muted);
  max-width: 46ch;
}

.career-slider__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.career-slider__button {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  text-align: left;
  font-family: inherit;
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle-dark);
  border-left: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.35s var(--ease-premium), background 0.35s var(--ease-premium);
}

.career-slider__button-num {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-gray-500);
  transition: color 0.35s var(--ease-premium);
}

.career-slider__button-label {
  font-size: 0.95rem;
  color: var(--text-on-dark-muted);
  transition: color 0.35s var(--ease-premium);
}

.career-slider__button:hover,
.career-slider__button:focus-visible {
  border-color: rgba(255, 196, 0, 0.3);
  outline: none;
}

.career-slider__button.is-active {
  background: rgba(255, 196, 0, 0.07);
  border-color: rgba(255, 196, 0, 0.35);
  border-left-color: var(--color-yellow);
}

.career-slider__button.is-active .career-slider__button-num,
.career-slider__button.is-active .career-slider__button-label {
  color: var(--color-yellow);
}

@media (max-width: 860px) {
  .career-slider {
    grid-template-columns: 1fr;
  }

  .career-slider__buttons {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .career-slider__button {
    flex: 1 1 calc(50% - var(--space-sm) / 2);
  }
}