/* ============================================================
   FiveStarCamper – Design-System
   Hell (Snow) + Campfire Gold · Premium-Outdoor
   Layout-Prinzip: großzügige Bühnen, zentrierte Kopfzeilen,
   schmale Textspalten, klares Raster (Apple-artig übersichtlich).

   Wird NACH den Seiten-Styles geladen und überschreibt sie.
   Variablennamen --dark/--white stammen aus dem alten Theme und
   bleiben aus Kompatibilitätsgründen erhalten:
     --dark  = Seitenhintergrund (hell)
     --dark2 = Kartenfläche (weiß)
     --white = Tinte (dunkel)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Hanken+Grotesk:wght@400..700&family=Roboto+Mono:wght@400..600&display=swap');

/* ============================================================
   1 · TOKENS
   ============================================================ */
:root {
  /* Markenpalette (Richtlinien Abschnitt 03) */
  --night:         #17191A;
  --surface:       #1E2122;
  --brand-gold:    #D6A23E;
  --pine:          #2E4034;
  --snow:          #FBFAF7;
  --bone:          #E7E3D8;
  --stone:         #9AA0A1;
  --ember:         #DB7439;
  --clay:          #B5623F;
  --dusk:          #6E8CA0;
  --sage:          #8C9C7A;
  --berry:         #7C4A52;
  --sand:          #EAD9B5;

  /* Flächen */
  --dark:          #FBFAF7;
  --dark2:         #FFFFFF;
  --dark3:         #F3F1EA;
  --dark4:         #E7E3D8;
  --dark5:         #D9D5C9;
  --bg:            #FBFAF7;
  --card:          #FFFFFF;
  --beige:         #F3F1EA;
  --beige2:        #E7E3D8;

  /* Tinte */
  --text:          #17191A;
  --text-muted:    #63625C;
  --text-dim:      #8A8C86;
  --white:         #17191A;
  --ink:           #17191A;

  /* Akzent: Campfire Gold */
  --gold:          #D6A23E;
  --gold-light:    #E3B95C;
  --gold-dim:      rgba(214,162,62,0.10);
  --gold-border:   rgba(214,162,62,0.32);
  --accent:        #D6A23E;
  --accent-dark:   #B0801F;
  --accent-light:  #E3B95C;
  --accent-dim:    rgba(214,162,62,0.10);
  --border-accent: rgba(214,162,62,0.34);

  /* Status */
  --green:         #5E9469;
  --green-dim:     rgba(94,148,105,0.12);
  --green-bg:      rgba(94,148,105,0.12);
  --green-border:  rgba(94,148,105,0.32);
  --red:           #C0503C;

  /* Linien & Glas */
  --border:        rgba(23,25,26,0.09);
  --border-light:  rgba(23,25,26,0.17);
  --glass-bg:      rgba(255,255,255,0.78);
  --glass-border:  rgba(23,25,26,0.08);
  --glass-blur:    blur(16px);

  /* Schriften (Richtlinien Abschnitt 04) */
  --font-head:     'Bricolage Grotesque', 'Hanken Grotesk', Arial, sans-serif;
  --font-sans:     'Hanken Grotesk', Arial, sans-serif;
  --font-mono:     'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Layout-Raster */
  --stage-y:       clamp(5.5rem, 9vw, 9rem);   /* vertikale Bühnenhöhe */
  --stage-x:       clamp(1.5rem, 6vw, 4rem);   /* seitlicher Rand      */
  --measure:       46rem;                       /* Lesebreite Fließtext */
  --content-max:   1240px;                      /* Inhaltsbreite        */
  --gap-grid:      clamp(1.2rem, 2.2vw, 2rem);  /* Rasterabstand        */

  /* Form & Bewegung */
  --r-card:        18px;
  --r-ctrl:        12px;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-soft:   0 10px 34px rgba(23,25,26,0.07);
  --shadow-hover:  0 24px 56px rgba(23,25,26,0.13);
}

/* ============================================================
   2 · BASIS
   ============================================================ */
body {
  background: var(--dark);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: rgba(214,162,62,0.28); color: var(--ink); }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--dark5); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ============================================================
   3 · TYPO-SKALA
   Klare Stufen statt Zufallsgrößen.
   ============================================================ */
.hero-title {
  font-family: var(--type-hero-font, var(--font-head)) !important;
  font-size: var(--type-hero-size, clamp(2.9rem, 6.4vw, 5.4rem)) !important;
  font-weight: var(--type-hero-weight, 800) !important;
  letter-spacing: var(--type-hero-letter-spacing, -0.035em) !important;
  line-height: var(--type-hero-line-height, 1.02) !important;
  text-wrap: balance;
}
.section-title, .page-title, .cta-title,
.form-title, .auth-panel h3, .modal-title {
  font-family: var(--type-h2-font, var(--font-head)) !important;
  font-size: var(--type-h2-size, clamp(2.1rem, 4.2vw, 3.2rem)) !important;
  font-weight: var(--type-h2-weight, 700) !important;
  letter-spacing: var(--type-h2-letter-spacing, -0.028em) !important;
  line-height: var(--type-h2-line-height, 1.06) !important;
  text-wrap: balance;
}
.section-title em, .hero-title em, .cta-title em {
  font-style: normal;
  font-weight: inherit;
  color: var(--accent);
}
#hero h1, .page-header h1, h1 {
  font-family: var(--font-head);
  font-weight: 800 !important;
  letter-spacing: -0.03em;
}
h2, h3 { font-family: var(--font-head); letter-spacing: -0.018em; }

/* Fließtext: begrenzte Lesebreite = bessere Lesbarkeit */
.section-subtitle {
  font-size: clamp(1rem, 1.15vw, 1.15rem) !important;
  line-height: 1.65 !important;
  color: var(--text-muted) !important;
  max-width: 34rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-wrap: pretty;
}
.hero-sub { text-wrap: pretty; }

/* ============================================================
   4 · EYEBROWS / MONO-LABELS
   ============================================================ */
.section-label, .cta-label {
  font-family: var(--font-mono) !important;
  font-size: 0.74rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--accent-dark) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.1rem !important;
}
.section-label::before {
  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--accent);
  display: inline-block;
  flex-shrink: 0;
}
.cta-label::before { content: none; }
.hero-tag {
  font-family: var(--font-mono) !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase;
}

/* ============================================================
   5 · LAYOUT-BÜHNEN (Apple-Prinzip: viel Luft, klare Mitte)
   ============================================================ */
section:not(#hero):not(#showcase3d) {
  padding-top: var(--stage-y) !important;
  padding-bottom: var(--stage-y) !important;
  padding-left: var(--stage-x) !important;
  padding-right: var(--stage-x) !important;
}
.section-header {
  text-align: center;
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(2.8rem, 5vw, 4.5rem) !important;
}
.section-header .section-label { justify-content: center; }

/* ============================================================
   5b · HERO – zentrierte Typo-Bühne über dem Foto
   ============================================================ */
#hero {
  height: 88vh !important;
  min-height: 580px !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
}
/* Ruhiger, gleichmäßiger Verlauf: Typo trägt unabhängig vom Bildinhalt */
.hero-overlay {
  background:
    linear-gradient(to bottom, rgba(18,20,21,0.42) 0%, rgba(18,20,21,0.30) 40%, rgba(18,20,21,0.58) 100%),
    radial-gradient(ellipse at 50% 46%, rgba(18,20,21,0.34) 0%, rgba(18,20,21,0) 62%) !important;
}
.hero-content {
  max-width: 54rem !important;
  margin: 0 auto !important;
  padding: 0 var(--stage-x) 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-tag { color: rgba(251,250,247,0.82) !important; font-weight: 500 !important; }
.hero-tag::before { background: var(--accent) !important; opacity: 1 !important; }
.hero-title { color: #fff !important; text-shadow: 0 2px 30px rgba(0,0,0,0.28) !important; }
.hero-title em { color: var(--accent-light) !important; }
.hero-sub {
  color: rgba(255,255,255,0.9) !important;
  font-size: 1.12rem !important;
  line-height: 1.6 !important;
  max-width: 34rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.hero-buttons { justify-content: center; margin-top: 2.4rem !important; }
.hero-pills { justify-content: center; }
.hero-pill { font-family: var(--font-mono); font-size: 0.68rem !important; text-transform: uppercase; letter-spacing: 0.06em; }
.hero-pill svg { stroke: var(--accent-light) !important; }

/* ============================================================
   5c · USP-LEISTE – überlappende Karte, klar getrennte Spalten
   ============================================================ */
.usp-inner {
  border-radius: var(--r-card) !important;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-hover) !important;
  padding: 2.2rem 1.4rem !important;
}
.usp-item { justify-content: center; }
.usp-item + .usp-item { border-left: 1px solid var(--border); }
@media (max-width: 780px) {
  .usp-inner { grid-template-columns: 1fr !important; }
  .usp-item + .usp-item { border-left: none; border-top: 1px solid var(--border); padding-top: 1.2rem; margin-top: 0.4rem; }
}

/* ============================================================
   6 · BUTTONS – Gold führt die Aktion, Mono stempelt das Label
   ============================================================ */
.btn-gold, .btn-book, .btn-submit, .auth-submit {
  font-family: var(--font-mono) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: var(--r-ctrl) !important;
  padding: 1.05rem 2.4rem !important;
  background: var(--accent);
  color: #17191A !important;
  border: none;
  transition: transform 0.3s var(--ease-out), background 0.25s, box-shadow 0.3s;
}
.btn-gold:hover, .btn-book:hover,
.btn-submit:hover:not(:disabled), .auth-submit:hover {
  background: var(--accent-light);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(214,162,62,0.30);
}
.btn-outline {
  font-family: var(--font-mono) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: var(--r-ctrl) !important;
  padding: 1.05rem 2.4rem !important;
  border: 1.5px solid var(--border-light);
  color: var(--ink);
  transition: transform 0.3s var(--ease-out), border-color 0.3s, background 0.3s, color 0.3s;
}
.btn-outline:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent-dark);
  transform: translateY(-2px);
}
.btn-pine, .btn-secondary {
  font-family: var(--font-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: var(--pine);
  color: #FBFAF7 !important;
  border: none;
  border-radius: var(--r-ctrl);
  transition: background 0.25s, transform 0.3s var(--ease-out);
}
.btn-pine:hover, .btn-secondary:hover { background: #24332A; transform: translateY(-2px); }

/* ============================================================
   7 · KARTEN
   ============================================================ */
.vehicle-card {
  background: var(--card);
  border: 1px solid var(--border) !important;
  border-radius: var(--r-card) !important;
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.3s !important;
}
.vehicle-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: var(--gold-border) !important;
}
.vehicle-img-wrap { overflow: hidden; }
.vehicle-img-wrap img { transition: transform 0.8s var(--ease-out); will-change: transform; }
.vehicle-card:hover .vehicle-img-wrap img { transform: scale(1.06); }
.vehicle-name {
  font-family: var(--font-head) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em;
}
.fleet-grid { gap: var(--gap-grid) !important; }

/* Kategorie über dem Fahrzeugnamen */
.vehicle-category {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 0.55rem;
}
.vehicle-price .from { font-family: var(--font-sans); font-size: 0.9rem; font-weight: 400; color: var(--text-muted); }

/* ============================================================
   7a · KATEGORIE-DETAIL (Fahrzeugseite) – Bild links, Fakten rechts
   ============================================================ */
.fleet-wrap { max-width: var(--content-max); margin: 0 auto; padding: var(--stage-y) var(--stage-x); }
.cat-detail {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 3.2rem) 0;
  border-top: 1px solid var(--border);
}
.cat-detail:first-of-type { border-top: none; padding-top: 0; }
.cat-detail:nth-child(even) .cat-media { order: 2; }
.cat-media { border-radius: var(--r-card); overflow: hidden; background: var(--dark3); }
.cat-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform 0.8s var(--ease-out); }
.cat-detail:hover .cat-media img { transform: scale(1.04); }
.cat-name {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.06;
  color: var(--ink);
  margin: 0 0 0.6rem;
}
.cat-desc { color: var(--text-muted); font-size: 1.02rem; line-height: 1.6; max-width: 32rem; margin-bottom: 1.2rem; }
.cat-prices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
  margin: 1.5rem 0 1.8rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cat-prices b { display: block; font-family: var(--font-head); font-size: 1.14rem; font-weight: 700; color: var(--ink); }
.cat-prices small { display: block; font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-top: 2px; line-height: 1.4; }
.cat-note {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
  max-width: 40rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--border);
}
@media (max-width: 860px) {
  .cat-detail { grid-template-columns: 1fr; }
  .cat-detail:nth-child(even) .cat-media { order: 0; }
  .cat-prices { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   7b · PREISTABELLE – ruhiges Raster, klare Spalten
   ============================================================ */
.price-table {
  max-width: var(--content-max);
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
}
.price-row {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 1.15rem clamp(1rem, 2.4vw, 1.9rem);
  border-top: 1px solid var(--border);
}
.price-row:first-child { border-top: none; }
.price-head {
  background: var(--dark3);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.price-row .price-cat strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.price-row .price-cat small { display: block; font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; }
.price-row b {
  display: block;
  font-family: var(--font-head);
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--ink);
}
.price-row small { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.price-row.price-km { background: var(--dark3); }
.price-row.price-km b { color: var(--accent-dark); }
@media (max-width: 820px) {
  .price-row { grid-template-columns: 1fr 1fr; row-gap: 0.9rem; }
  .price-row .price-cat { grid-column: 1 / -1; }
  .price-head { display: none; }
  .price-row span:not(.price-cat)::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
}

/* ============================================================
   7c · ARGUMENTE-LISTE „Wieso du bei uns mietest"
   ============================================================ */
.reason-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: var(--content-max);
  columns: 2;
  column-gap: clamp(2rem, 5vw, 4.5rem);
}
.reason-list li {
  break-inside: avoid;
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--border);
}
.reason-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent);
  padding-top: 0.28rem;
  flex-shrink: 0;
}
.reason-list strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: 0.18rem;
}
.reason-list li > div > span { display: block; font-size: 0.93rem; line-height: 1.55; color: var(--text-muted); }
@media (max-width: 820px) { .reason-list { columns: 1; } }

/* ============================================================
   7d · WARUM-WIR – Premium Scroll-Reveal (Trionn-Stil)
   Nur Bewegung/Timing, kein neues Layout, keine neuen Farben.
   ============================================================ */

/* Text: zeilen-/wortweise Mask-Reveal für Titel & Untertitel.
   Läuft über die bestehende .reveal/.visible-Observer-Logik in transitions.js. */
#warum-wir .section-header .mask-line,
#warum-wir .section-header .mask-word {
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
}
#warum-wir .section-header .mask-line > span,
#warum-wir .section-header .mask-word > span {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  transition: transform 0.9s var(--ease-out), opacity 0.7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 40ms);
}
#warum-wir .section-header.visible .mask-line > span,
#warum-wir .section-header.visible .mask-word > span {
  transform: translateY(0);
  opacity: 1;
}

/* Argumente-Liste: gestaffelter Reveal pro Zeile beim Scrollen.
   Der Container selbst bewegt sich nicht mehr – nur die einzelnen Punkte. */
#warum-wir .reason-list.reveal { opacity: 1; transform: none; transition: none; }
#warum-wir .reason-list li {
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out),
              border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
#warum-wir .reason-list.visible li { opacity: 1; transform: translateY(0) scale(1); }
#warum-wir .reason-list li:hover {
  transform: translateY(-4px) scale(1);
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
}
#warum-wir .reason-num { transition: transform 0.35s var(--ease-out), color 0.35s var(--ease-out); }
#warum-wir .reason-list li:hover .reason-num { transform: translateX(3px); color: var(--accent-dark); }

@media (prefers-reduced-motion: reduce) {
  #warum-wir .section-header .mask-line > span,
  #warum-wir .section-header .mask-word > span,
  #warum-wir .reason-list li {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Mono-Badges */
.badge, .tag, .pill, .feature-chip {
  font-family: var(--font-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.feature-chip {
  padding: 5px 11px !important;
  border: 1px solid var(--gold-border) !important;
  background: var(--gold-dim) !important;
  color: var(--accent-dark) !important;
  border-radius: 9px !important;
  font-size: 0.64rem !important;
  font-weight: 500 !important;
}
.feature-chip::before { display: none !important; content: none !important; }

/* ============================================================
   8 · ICON-FAMILIE (Richtlinien Abschnitt 07)
   Strichzeichnung, 24er-Raster, runde Enden, eine Farbe.
   Gold nur für ein einzelnes Akzentdetail.
   ============================================================ */
.usp-icon svg, .ci-icon svg, .brand-icon {
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.usp-icon {
  width: 52px !important;
  height: 52px !important;
  border: 1.5px solid rgba(23,25,26,0.14) !important;
  border-radius: 50%;
}
.usp-icon svg { width: 22px !important; height: 22px !important; stroke: var(--ink) !important; }
/* Ein Akzentdetail in Gold: das Stern-Icon (die fünf Sterne) */
.usp-item:first-child .usp-icon { border-color: var(--gold-border) !important; }
.usp-item:first-child .usp-icon svg { stroke: var(--gold) !important; }
.ci-icon svg { stroke: var(--ink); }
.brand-icon { width: 24px; height: 24px; stroke: currentColor; display: block; }
.brand-icon .accent { stroke: var(--gold); }

/* Drei-Schritt-Reihe „Abholen · Einsteigen · Losfahren" (Marken-Icons) */
.ablauf-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-grid);
  max-width: var(--content-max);
  margin: 0 auto clamp(2.6rem, 4vw, 3.6rem);
  text-align: center;
}
.ablauf-step { padding: 0 1.2rem; }
.ablauf-step-icon {
  width: 56px; height: 56px;
  margin: 0 auto 1.1rem;
  border: 1.5px solid var(--border-light);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  transition: border-color 0.3s, transform 0.4s var(--ease-out);
}
.ablauf-step-icon .brand-icon { width: 25px; height: 25px; }
.ablauf-step:hover .ablauf-step-icon { border-color: var(--gold-border); transform: translateY(-3px); }
.ablauf-step strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.ablauf-step span { display: block; font-size: 0.95rem; line-height: 1.6; color: var(--text-muted); max-width: 20rem; margin: 0 auto; }
@media (max-width: 780px) {
  .ablauf-steps { grid-template-columns: 1fr; gap: 2.2rem; }
}

/* ============================================================
   9 · DUNKLE KONTRAST-BÜHNEN (3D-Erlebnis, CTA-Band, Footer)
   Rhythmus aus Hell und Dunkel.
   ============================================================ */
#showcase3d { background: var(--night) !important; }
.sc-header .section-label { color: var(--accent-light) !important; }
.sc-header .section-label::before { background: var(--accent-light); }
.sc-header .section-title { color: var(--snow) !important; }
.sc-header .section-title em { color: var(--accent-light) !important; }
.sc-header .section-subtitle { color: rgba(251,250,247,0.6) !important; }

#cta-band .cta-label { color: var(--accent-light) !important; }
#cta-band .cta-title { color: #fff !important; }
#cta-band .cta-title em { color: var(--accent-light) !important; }

footer { background: var(--night) !important; color: rgba(251,250,247,0.62) !important; }
footer h4, footer strong { color: var(--snow) !important; }
footer a:hover { color: var(--accent-light) !important; }

/* Umriss-Buttons auf dunklem Grund */
.btn-outline.on-photo { color: #fff; border-color: rgba(255,255,255,0.5); }
.btn-outline.on-photo:hover { border-color: #fff; background: rgba(255,255,255,0.12); color: #fff; }

/* Navigation: Logo sitzt markenkonform immer auf Night */
#navbar.scrolled { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur); }
#navbar.scrolled .nav-logo { background: var(--night); padding: 5px 12px; border-radius: var(--r-ctrl); }
.nav-links > li > a { font-size: 0.78rem !important; letter-spacing: 0.08em !important; }

/* ============================================================
   10 · INTERAKTION & ZUGÄNGLICHKEIT
   ============================================================ */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   11 · SEITEN-ÜBERGANG
   Nur opacity animieren: ein transform auf <body> erzeugt einen
   neuen containing block und bricht position:fixed-Elemente.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  body { animation: pageIn 0.6s var(--ease-out) both; }
  @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
  body.page-leaving { transition: opacity 0.28s ease; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vehicle-card, .vehicle-img-wrap img, .btn-gold, .btn-outline { transition: none !important; }
}