/* ==========================================================================
   DMW-Performance — Homepage Sections
   Stats, Passion, Rennstrecke, Process, Testimonials, EVC, CTA + Animations
   ========================================================================== */

/* ==========================================================================
   Scroll reveal — GSAP handles opacity/transform via JS.
   CSS fallback (no-js): elements stay visible.
   The .reveal class is kept for backward-compatible selectors.
   ========================================================================== */
.reveal {
  /* GSAP sets opacity/y on these elements at runtime.
     Without JS they remain fully visible (no hidden content). */
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   3D card tilt
   ========================================================================== */
.tilt-card {
  will-change: transform;
  transition: transform 0.4s ease;
  position: relative;
}

.tilt-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  transition: background 0.2s ease;
}

/* ==========================================================================
   Stats section — helles Band mit 3D-Perspektivraster
   ==========================================================================
   Frueher war dieses Band fast schwarz (#08080f -> #1A1A2E -> #0c1525). Zusammen
   mit dem dunklen Hero darueber ergab das am Schreibtisch rund 1000 px und am
   Handy rund 1630 px durchgehende Dunkelheit, bevor der erste helle Abschnitt
   kam — zwei volle Bildschirme. Genau das machte den Seitenanfang erdrueckend.
   Jetzt traegt es den hellen Seitengrund und dreht im Dunkelmodus mit.
   --color-bg-subtle statt --color-bg, damit es sich vom direkt folgenden
   .passion-section (--color-bg) noch abhebt.
   ========================================================================== */
.stats-section {
  background-color: var(--color-bg-subtle);
  background-image: var(--grain);
  padding: var(--space-16) 0;
  position: relative;
  overflow: hidden;
}

/* Perspective grid floor */
.stats-section__bg-grid {
  position: absolute;
  bottom: -10%;
  left: -30%;
  right: -30%;
  height: 70%;
  /* Das Raster war auf Gold/7 % gedacht als eben noch erahnbarer Hallenboden.
     Auf hellem Grund verschwindet dieser Wert ganz, deshalb 18 %. Mehr sollte
     es nicht sein: Bei 38 % probiert, da endeten die Linien mitten in der Luft
     und sahen aus wie Kratzer — auf Schwarz verloren sie sich einfach im
     Dunkeln, auf Hell tun sie das nicht. */
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-primary) 18%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 18%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(380px) rotateX(72deg);
  transform-origin: bottom center;
  pointer-events: none;
}

.stats-section__grid {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  position: relative;
  z-index: 1;
}

/* WICHTIG: Alle folgenden Regeln sind auf .stats-section eingegrenzt.
   Grund: Es gibt zwei voellig verschiedene Bausteine, die beide .stat-item
   heissen — die Kennzahlen-Karten hier auf der Startseite und die schmale
   Kennzahlenleiste auf Prueftstand- und Weber-Seite (pages.css). Beide
   Selektoren hatten dieselbe Staerke, also entschied allein die Ladereihenfolge.
   Ergebnis: Die Leiste erbte Rahmen, Hintergrund und Weichzeichner der Karten,
   und die Beschriftungen hier bekamen die kleine Grossbuchstabenschrift der
   Leiste. Mit der Eingrenzung stoeren sich die beiden nicht mehr. */
/* backdrop-filter ist raus: Es kostet Grafikleistung und hat ueber einem
   flachen Hintergrund noch nie etwas bewirkt. */
.stats-section .stat-item {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  /* Rahmen ruhig, Gold erst beim Zeigen — dasselbe Verhalten wie .kess3-card
     und die uebrigen hellen Karten. Ein dauerhaft goldener Rahmen sah auf
     Weiss blass und beliebig aus. */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.stats-section .stat-item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-5px);
}

.stats-section .stat-item__icon {
  font-size: 1.6rem;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.stats-section .stat-item__number {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 700;
  /* NICHT --color-primary: Das helle Markengold erreicht auf dem hellen Band
     nur 1,68:1 und waere kaum zu entziffern. --color-gold-ink ist genau dafuer
     da (siehe variables.css) — auf Hell 5,1:1, im Dunkelmodus wird daraus
     wieder das helle Gold. */
  color: var(--color-gold-ink);
  line-height: 1;
  margin-bottom: var(--space-2);
  /* Der dreifache Goldschimmer wurde auf hellem Grund zum Schmierfleck.
     Ein klarer Versatz in Markengold laesst der Zahl ihren Charakter. */
  text-shadow: 2px 2px 0 color-mix(in srgb, var(--color-primary) 45%, transparent);
}

.stats-section .stat-item__number--text span {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
}

.stats-section .stat-item__label {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.stats-section .stat-item__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

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

@media (max-width: 480px) {
  .stats-section__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Passion section — personal story, two-column
   ========================================================================== */
.passion-section {
  background-color: var(--color-bg);
  background-image: var(--grain);   /* subtle film grain over the flat bg */
  position: relative;
  overflow: hidden;
}

.passion-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary) 0%, transparent 70%);
}

.passion-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.passion-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.passion-heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.08;
  margin: 0 0 var(--space-6);
  text-shadow:
    1px 1px 0 rgba(26, 26, 46, 0.08),
    2px 2px 0 rgba(26, 26, 46, 0.05),
    3px 3px 12px rgba(26, 26, 46, 0.1);
}

[data-theme="dark"] .passion-heading,
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .passion-heading {
    text-shadow:
      1px 1px 0 rgba(232, 180, 0, 0.12),
      2px 2px 0 rgba(232, 180, 0, 0.07),
      3px 3px 18px rgba(232, 180, 0, 0.18);
  }
}

.passion-heading--gold {
  color: var(--color-primary);
}

.passion-text p {
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: var(--space-4);
  font-size: var(--text-base);
}

.passion-quote {
  border-left: 3px solid var(--color-primary);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-6) 0;
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--color-text);
  line-height: 1.7;
  font-size: var(--text-base);
}

.passion-cta {
  margin-top: var(--space-2);
}

/* Passion visual card */
.passion-visual {
  perspective: 1200px;
}

.passion-card {
  background: linear-gradient(145deg, #0d0d20 0%, #0f2040 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  color: white;
  position: relative;
  overflow: hidden;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgba(232, 180, 0, 0.12);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

/* Geometric circuit lines */
.passion-card::before {
  content: '';
  position: absolute;
  top: -25%;
  right: -15%;
  width: 65%;
  height: 130%;
  border: 1.5px solid rgba(232, 180, 0, 0.12);
  border-radius: 50%;
  transform: rotate(-25deg);
  pointer-events: none;
}

.passion-card::after {
  content: '';
  position: absolute;
  top: 10%;
  left: -20%;
  width: 55%;
  height: 55%;
  border: 1px solid rgba(232, 180, 0, 0.07);
  border-radius: 50%;
  pointer-events: none;
}

.passion-card-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(232, 180, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 180, 0, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.passion-card__header {
  margin-bottom: var(--space-6);
  position: relative;
  z-index: 2;
}

.passion-card__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(232, 180, 0, 0.12);
  border: 1px solid rgba(232, 180, 0, 0.28);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
}

.passion-card__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
  z-index: 2;
}

.passion-card__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
}

.passion-card__item .fa-solid {
  color: var(--color-primary);
  margin-top: 3px;
  flex-shrink: 0;
  font-size: 0.9rem;
}

.passion-card__item strong {
  display: block;
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 2px;
}

@media (max-width: 900px) {
  .passion-layout {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

/* ==========================================================================
   Dennis portrait card
   ========================================================================== */
.dennis-portrait {
  position: relative;
  max-width: 300px;
  margin-inline: auto;
}

.dennis-portrait__img-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.18),
    0 4px 16px rgba(0, 0, 0, 0.10);
  line-height: 0;
}

.dennis-portrait__img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center top;
  transition: transform 500ms ease;
  /* Download protection */
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.dennis-portrait:hover .dennis-portrait__img-wrap img {
  transform: scale(1.03);
}

/* Transparent overlay — sits on top of image, catches all mouse events */
.dennis-portrait__guard {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: default;
}

/* Gold accent line along bottom edge of image */
.dennis-portrait__accent {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), transparent 80%);
}

/* Name badge below photo */
.dennis-portrait__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary);
}

.dennis-portrait__name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
}

.dennis-portrait__role {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dennis-portrait__role .fa-gauge-high {
  color: var(--color-primary);
  font-size: 0.85em;
}

/* ==========================================================================
   Rennstrecke section — dark racing lifestyle + milestones
   ========================================================================== */
.rennstrecke-section {
  background: linear-gradient(160deg, #06060e 0%, #0c1828 50%, #06060e 100%);
  padding: var(--space-24) 0;
  position: relative;
  overflow: hidden;
  color: white;
}

.rennstrecke-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent 5%, var(--color-primary) 40%, var(--color-primary) 60%, transparent 95%);
}

.rennstrecke-bg-lines::before,
.rennstrecke-bg-lines::after {
  content: '';
  position: absolute;
  border: 1px solid rgba(232, 180, 0, 0.055);
  border-radius: 50%;
  pointer-events: none;
}

.rennstrecke-bg-lines::before {
  width: 900px;
  height: 900px;
  top: -450px;
  right: -200px;
}

.rennstrecke-bg-lines::after {
  width: 700px;
  height: 700px;
  bottom: -350px;
  left: -150px;
}

.rennstrecke-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
  position: relative;
  z-index: 1;
}

.rennstrecke-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.rennstrecke-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-5);
}

.rennstrecke-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 700;
  color: white;
  line-height: 1.05;
  margin-bottom: var(--space-5);
  text-shadow:
    2px 2px 0 rgba(232, 180, 0, 0.12),
    4px 4px 0 rgba(232, 180, 0, 0.06),
    0 0 40px rgba(232, 180, 0, 0.18);
}

.rennstrecke-subtitle {
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--text-lg);
  max-width: 600px;
  margin-inline: auto;
  line-height: 1.6;
}

/* Feature cards */
.rennstrecke-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-20);
}

.rennstrecke-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(232, 180, 0, 0.13);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.rennstrecke-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.rennstrecke-card:hover {
  border-color: rgba(232, 180, 0, 0.32);
  background: rgba(232, 180, 0, 0.04);
}

.rennstrecke-card:hover::before { opacity: 1; }

.rennstrecke-card__icon {
  width: 3.5rem;
  height: 3.5rem;
  background: rgba(232, 180, 0, 0.1);
  border: 1px solid rgba(232, 180, 0, 0.2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: var(--color-primary);
  margin-bottom: var(--space-5);
  transition: background 0.3s ease;
}

.rennstrecke-card:hover .rennstrecke-card__icon {
  background: rgba(232, 180, 0, 0.18);
}

.rennstrecke-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: white;
  margin-bottom: var(--space-3);
  line-height: 1.2;
}

.rennstrecke-card__text {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--text-sm);
  line-height: 1.7;
}

@media (max-width: 768px) {
  .rennstrecke-cards { grid-template-columns: 1fr; }
}

/* Milestone timeline */
.milestone-section {
  border-top: 1px solid rgba(232, 180, 0, 0.12);
  padding-top: var(--space-16);
}

.milestone-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: white;
  text-align: center;
  margin-bottom: var(--space-12);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.milestone-title .fa-timeline {
  color: var(--color-primary);
}

/* Scroll wrapper — enables horizontal swipe on mid-range screens */
.milestone-scroll-wrap {
  position: relative;
}

.milestone-timeline {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  position: relative;
  z-index: 2;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Dim track line — spans first dot center to last dot center */
.milestone-timeline::before {
  content: '';
  position: absolute;
  top: 1.6rem;
  left: calc(100% / 12);
  right: calc(100% / 12);
  height: 1px;
  background: rgba(232, 180, 0, 0.18);
  pointer-events: none;
}

/* Animated gold fill (GSAP drives scaleX 0 → 1) */
.milestone-line-fill {
  position: absolute;
  top: 1.6rem;
  left: calc(100% / 12);
  width: calc(100% * 5 / 6);
  height: 2px;
  background: linear-gradient(90deg, #c9a84c 0%, rgba(201, 168, 76, 0.55) 50%, #c9a84c 100%);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 1;
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.45);
  pointer-events: none;
}

.milestone-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--space-2);
  position: relative;
}

/* "Weltpremiere" badge floats above the dot */
.milestone-badge {
  position: absolute;
  top: -2.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: linear-gradient(135deg, #c9a84c 0%, #e8d080 50%, #c9a84c 100%);
  color: #0a1628;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.26rem 0.6rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(201, 168, 76, 0.5);
}

.milestone-badge .fa-trophy {
  font-size: 0.58rem;
}

/* Highlighted dot — stronger gold glow */
.milestone-item--highlight .milestone-dot {
  background: linear-gradient(135deg, #0a1628 0%, #152240 100%);
  border-color: #c9a84c;
  border-width: 3px;
  box-shadow:
    0 0 0 4px rgba(201, 168, 76, 0.12),
    0 0 24px rgba(201, 168, 76, 0.45),
    0 0 60px rgba(201, 168, 76, 0.2);
}

.milestone-item--highlight .milestone-year {
  color: #e8d080;
  text-shadow: 0 0 18px rgba(201, 168, 76, 0.6);
}

.milestone-dot {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: var(--radius-full);
  background: #0c1828;
  border: 2px solid var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 2;
  box-shadow: 0 0 20px rgba(232, 180, 0, 0.18), 0 0 0 3px rgba(232, 180, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.milestone-item:hover .milestone-dot {
  transform: scale(1.15) translateY(-3px);
  box-shadow: 0 0 34px rgba(232, 180, 0, 0.55), 0 0 0 5px rgba(232, 180, 0, 0.12);
}

.milestone-year {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  line-height: 1;
}

.milestone-text {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

.milestone-text strong {
  display: block;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  margin-bottom: var(--space-1);
  font-size: var(--text-base);
}

/* Mid screens — horizontal scroll */
@media (max-width: 1060px) and (min-width: 769px) {
  .milestone-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-4);
    scroll-snap-type: x proximity;
  }

  .milestone-timeline {
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    min-width: 900px;
  }
}

/* Mobile — vertical stack */
@media (max-width: 768px) {
  .milestone-timeline {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .milestone-timeline::before,
  .milestone-line-fill { display: none; }

  .milestone-item {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: var(--space-4);
    padding: 0;
  }

  .milestone-item--highlight { padding-top: 0; }

  .milestone-badge { display: none; }

  .milestone-dot {
    flex-shrink: 0;
    margin-bottom: 0;
    width: 3rem;
    height: 3rem;
  }

  .milestone-year { font-size: var(--text-xl); }

  .milestone-text,
  .milestone-text strong { font-size: var(--text-sm); }
}

/* ==========================================================================
   Partners Section
   ========================================================================== */
.partners-section {
  background-color: var(--color-bg-subtle);
}

.partners-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8) var(--space-12);
  list-style: none;
  padding: 0;
  margin: 0;
}

.partners-grid__item {
  flex: 0 0 auto;
}

.partners-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.partners-logo img {
  height: 52px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  /* Greyscale by default, colour on hover */
  filter: grayscale(100%) opacity(0.6);
  transition: filter var(--transition-base);
}

.partners-logo:hover img,
.partners-logo:focus-visible img {
  filter: grayscale(0%) opacity(1);
}

.partners-logo:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* Dark mode: logos already dark, so invert filter slightly */
[data-theme="dark"] .partners-logo img,
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .partners-logo img {
    filter: grayscale(100%) invert(1) opacity(0.6);
  }
}

[data-theme="dark"] .partners-logo:hover img,
[data-theme="dark"] .partners-logo:focus-visible img {
  filter: grayscale(0%) invert(0) opacity(1) brightness(1.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .partners-logo:hover img,
  :root:not([data-theme="light"]) .partners-logo:focus-visible img {
    filter: grayscale(0%) invert(0) opacity(1) brightness(1.3);
  }
}

/* ==========================================================================
   Leistungsdaten Section — Glassmorphism Apple Window
   ========================================================================== */
.leistungsdaten-section {
  background: #2a2a2e;
  position: relative;
  overflow: hidden;
  color: white;
}

/* Decorative background circles (same pattern as rennstrecke) */
.leistungsdaten-section::before {
  content: '';
  position: absolute;
  width: 800px;
  height: 800px;
  top: -400px;
  right: -180px;
  border: 1px solid rgba(232, 180, 0, 0.05);
  border-radius: 50%;
  pointer-events: none;
}

.leistungsdaten-section::after {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  bottom: -300px;
  left: -120px;
  border: 1px solid rgba(232, 180, 0, 0.04);
  border-radius: 50%;
  pointer-events: none;
}

.leistungsdaten-section .section-title {
  color: #ffffff;
}

.leistungsdaten-section .section-subtitle {
  color: rgba(255, 255, 255, 0.55);
}

/* Glass window container */
.leistungsdaten-window {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-xl);
  background: rgba(10, 22, 40, 0.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(201, 168, 76, 0.22);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

/* Apple-style titlebar */
.window-titlebar {
  height: 38px;
  background: rgba(0, 0, 0, 0.38);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  position: relative;
  flex-shrink: 0;
}

/* Traffic-light dots */
.window-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.window-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}

.window-dot--red    { background: #FF5F57; box-shadow: 0 0 6px rgba(255, 95, 87, 0.5); }
.window-dot--yellow { background: #FEBC2E; box-shadow: 0 0 6px rgba(254, 188, 46, 0.4); }
.window-dot--green  { background: #28C840; box-shadow: 0 0 6px rgba(40, 200, 64, 0.4); }

/* Centred window title */
.window-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  font-family: var(--font-body);
  font-weight: 500;
  /* 0.38 ergab 3,6:1 auf dem dunklen Titelbalken. 0.62 bringt 6,3:1 und
     bleibt trotzdem deutlich zurueckgenommen. */
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
}

/* Iframe wrapper — no scrollbar leakage */
.leistungsdaten-embed {
  overflow: hidden;
  border-radius: 0 0 calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px);
}

.leistungsdaten-embed iframe {
  display: block;
  width: 100%;
  border: none;
}

/* Placeholder — adapted for dark background */
.leistungsdaten-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-16);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

.leistungsdaten-placeholder .fa-chart-line {
  font-size: 3rem;
  color: var(--color-primary);
  opacity: 0.6;
}

.leistungsdaten-placeholder p {
  font-size: var(--text-lg);
  margin: 0;
}

/* Mobile — hide label, keep dots */
@media (max-width: 600px) {
  .window-title { display: none; }
  .window-dot { width: 10px; height: 10px; }
}

/* ==========================================================================
   Shop CTA Section
   ========================================================================== */
.shop-cta-section {
  background: linear-gradient(135deg, var(--color-accent) 0%, #0d1626 100%);
  color: var(--color-text-inverse);
}

.shop-cta-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
  padding: var(--space-8) 0;
}

.shop-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid rgba(232, 180, 0, 0.4);
}

.shop-cta-banner h2 {
  color: #ffffff;
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  margin: 0;
}

.shop-cta-banner p {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--text-lg);
  max-width: 520px;
  margin: 0;
}

.shop-cta-banner .btn-outline {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.6);
  cursor: not-allowed;
  pointer-events: none;
}

.shop-cta-banner .btn-outline:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   Process Steps — "Der Ablauf"
   ========================================================================== */
.process-section {
  background-color: var(--color-bg-subtle);
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

/* connecting line */
.process-steps::before {
  content: '';
  position: absolute;
  top: 2.5rem;
  left: calc(12.5% + var(--space-4));
  right: calc(12.5% + var(--space-4));
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
  z-index: 0;
}

.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.process-step__number {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-2);
  opacity: 0.25;
  position: absolute;
  top: -0.25rem;
  left: 50%;
  transform: translateX(-50%);
}

.process-step__icon {
  width: 5rem;
  height: 5rem;
  background-color: var(--color-accent);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
  border: 3px solid var(--color-primary);
  position: relative;
  z-index: 2;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.process-step:hover .process-step__icon {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.process-step__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.process-step__text {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .process-steps {
    grid-template-columns: 1fr;
  }
  .process-steps::before {
    display: none;
  }
  /* Vorher stand hier flex-direction: row. Der Schritt hat aber drei sichtbare
     Kinder — Symbol, Ueberschrift und Text — und ohne Huelle um die beiden
     letzten legte die Zeile alle drei NEBENEINANDER. Auf dem Telefon ergab das
     drei Spalten von je rund 80px, und bei 320px Geraetebreite lief der Text
     seitlich aus der Seite heraus.
     Als Raster geht es ohne Aenderung am Markup: Das Symbol steht links und
     ueberspannt beide Zeilen, Ueberschrift und Text stapeln sich rechts davon.
     minmax(0, 1fr) sorgt dafuer, dass die Textspalte auch wirklich schrumpfen
     darf und nicht an ihrem laengsten Wort haengen bleibt. */
  .process-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-4);
    row-gap: var(--space-1);
    align-items: start;
    text-align: left;
  }
  .process-step__icon {
    grid-row: 1 / span 2;
    flex-shrink: 0;
    margin-bottom: 0;
  }
  .process-step__number {
    display: none;
  }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials-section {
  background-color: var(--color-bg);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

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

.testimonial-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.testimonial-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.testimonial-card__stars {
  display: flex;
  gap: var(--space-1);
  color: var(--color-primary);
  font-size: 1rem;
}

.testimonial-card__text {
  color: var(--color-text);
  font-style: italic;
  line-height: 1.7;
  flex: 1;
  margin: 0;
  position: relative;
  padding-left: var(--space-4);
}

.testimonial-card__text::before {
  content: '"';
  font-family: Georgia, serif;
  font-size: 3rem;
  color: var(--color-primary);
  position: absolute;
  left: -0.5rem;
  top: -0.75rem;
  line-height: 1;
  opacity: 0.6;
}

.testimonial-card__author {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.testimonial-card__name {
  font-weight: 600;
  color: var(--color-text);
  font-family: var(--font-heading);
}

.testimonial-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.testimonials-cta {
  text-align: center;
  margin-top: var(--space-4);
}

/* ==========================================================================
   Brands Grid
   ========================================================================== */
.brands-section {
  background-color: var(--color-bg-subtle);
}

.brands-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8);
}

.brand-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  transition: all var(--transition-fast);
}

.brand-badge:hover {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}

.brand-badge .fa-car {
  color: var(--color-primary);
  font-size: 0.8em;
}

.brand-badge:hover .fa-car {
  color: var(--color-primary);
}

.brands-note {
  text-align: center;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* ==========================================================================
   Pricing Table (Prüfstand)
   ========================================================================== */
.pricing-table {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.pricing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  gap: var(--space-4);
}

.pricing-row:last-child {
  border-bottom: none;
}

.pricing-row--header {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pricing-row--highlight {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  border-left: 3px solid var(--color-primary);
}

.pricing-row__name {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-text);
  flex: 1;
}

.pricing-row__name .fa-solid {
  color: var(--color-primary);
  margin-top: 2px;
  flex-shrink: 0;
}

.pricing-row__name small {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

.pricing-row__price {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  /* Gleicher Grund wie bei .pricing-card__price: Marken-Dunkelblau als
     Schrift auf wechselnder Flaeche verschwindet im Dunkelmodus. */
  color: var(--color-text);
  white-space: nowrap;
  text-align: right;
}

.pricing-row__note {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text-muted);
}

.pruefstand-notes {
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  border-left: 4px solid var(--color-primary);
}

.pruefstand-notes h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
  color: var(--color-text);
}

.pruefstand-notes ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pruefstand-notes li {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding-left: var(--space-4);
  position: relative;
}

.pruefstand-notes li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-primary);
}

@media (max-width: 640px) {
  .pricing-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .pricing-row__price {
    align-self: flex-end;
  }
}

/* ==========================================================================
   Footer – Öffnungszeiten & Social Media
   ========================================================================== */
.footer-hours {
  margin-top: var(--space-6);
}

.footer-hours__heading {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer-hours__heading .fa-clock {
  color: var(--color-primary);
}

.footer-hours__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-hours__list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
}

.footer-hours__day {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.footer-hours__time {
  color: var(--color-primary);
  font-weight: 600;
}

.footer-hours__note {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

/* Social */
.footer-social {
  margin-top: var(--space-6);
}

.footer-social__heading {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-3);
}

.footer-social__links {
  display: flex;
  gap: var(--space-3);
}

.footer-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  text-decoration: none;
  transition: all var(--transition-fast);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-social__link:hover {
  color: #ffffff;
  transform: translateY(-2px);
}

.footer-social__link--facebook:hover { background: #1877F2; border-color: #1877F2; }
.footer-social__link--instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); border-color: transparent; }
.footer-social__link--youtube:hover { background: #FF0000; border-color: #FF0000; }

/* Booking hours */
.booking-hours {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  border-left: 4px solid var(--color-primary);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.booking-hours__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.booking-hours__title .fa-clock {
  color: var(--color-primary);
}

.booking-hours__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.booking-hours__list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base);
}

.booking-hours__list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.booking-hours__day {
  font-weight: 600;
  color: var(--color-text);
}

.booking-hours__time {
  color: var(--color-gold-ink);
  font-weight: 600;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
}

.booking-hours__closed .booking-hours__time {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  font-weight: 400;
}

/* ==========================================================================
   Alientech Dealer Section + Dealer Record
   The record is the signature element: a checkable directory entry rather than
   a badge. Deliberately centred — the theme already has three text-left /
   visual-right sections (passion, evc, kunde-werden).
   Always dark in both colour schemes, like .evc-section and .rennstrecke-section.
   ========================================================================== */

.alientech-section {
  position: relative;
  overflow: hidden;
  padding: var(--space-24) 0;
  background: #0e0e14;
  color: #fff;
}

/* Hazard-stripe texture — the vernacular of the physical tool, in pure CSS. */
.alientech-section__texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    -45deg,
    rgba(232, 180, 0, 0.05) 0 2px,
    transparent 2px 22px
  );
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 100%);
}

.alientech-section__inner {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.alientech-section__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: #fff;
  margin: 0 0 var(--space-4);
}

.alientech-section__intro {
  max-width: 62ch;
  margin: 0 0 var(--space-12);
  color: rgba(255, 255, 255, 0.68);
  line-height: var(--leading-relaxed);
}

/* --- The record --------------------------------------------------------- */

.dealer-record {
  width: 100%;
  max-width: 540px;
  text-align: left;
  border: 1px solid rgba(232, 180, 0, 0.28);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Opaque, not translucent: the record must stay legible on light sections
     (page-kunde-werden.php) as well as on the dark ones. */
  background: linear-gradient(180deg, #16161f 0%, #101018 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.dealer-record__header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(232, 180, 0, 0.07);
}

.dealer-record__source {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.dealer-record__body {
  padding: var(--space-6) var(--space-6) var(--space-5);
}

.dealer-record__name {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  line-height: var(--leading-tight);
  color: #fff;
  margin: 0 0 0.35rem;
}

.dealer-record__place {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 var(--space-5);
}

.dealer-record__rows {
  margin: 0;
}

.dealer-record__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: 0.7rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

/* Key + dotted leader, so the rows read as a register entry, not a feature list. */
.dealer-record__key {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.dealer-record__key::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.22) 0 3px,
    transparent 3px 7px
  );
}

.dealer-record__value {
  flex: 0 0 auto;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
}

.dealer-record__value--strong {
  color: var(--color-primary);
  font-weight: var(--weight-bold);
}

.dealer-record__verify {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: var(--space-4);
  border-top: 1px solid rgba(232, 180, 0, 0.28);
  background: rgba(232, 180, 0, 0.1);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base);
}

.dealer-record__verify:hover,
.dealer-record__verify:focus-visible {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.dealer-record__verify:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* --- Proof points + link ------------------------------------------------ */

/* Specificity note: reset.css carries `ul[class] { margin: 0 }` (0,1,1), so a
   plain `.alientech-proof` class would lose. Scope it to the section wrapper. */
.alientech-section__inner .alientech-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-8);
  list-style: none;
  margin: var(--space-10) 0 0;
  padding: 0;
}

.alientech-proof__item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.72);
}

.alientech-proof__item i {
  color: var(--color-primary);
  font-size: 0.9em;
}

.alientech-section__more {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--space-10);
  /* min-height statt mehr Innenabstand: Der Unterstrich soll dicht am Text
     bleiben, das Tippziel trotzdem die geforderten 24px erreichen. */
  min-height: 24px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(232, 180, 0, 0.4);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: gap var(--transition-base), border-color var(--transition-base);
}

.alientech-section__more:hover,
.alientech-section__more:focus-visible {
  gap: 1rem;
  border-bottom-color: var(--color-primary);
}

@media (max-width: 640px) {
  .alientech-section {
    padding: var(--space-16) 0;
  }

  .alientech-section__title {
    font-size: var(--text-2xl);
  }

  .alientech-section__inner .alientech-proof {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: var(--space-3);
  }

  /* The directory label is long; let it wrap instead of forcing overflow. */
  .dealer-record__source {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    line-height: 1.5;
  }

  .dealer-record__header,
  .dealer-record__body {
    padding-inline: var(--space-5);
  }

  .dealer-record__row {
    flex-wrap: wrap;
  }

  .dealer-record__key {
    flex: 1 1 100%;
  }

  .dealer-record__value {
    padding-left: var(--space-4);
  }
}

/* ==========================================================================
   FAQ — native <details>/<summary>
   No JavaScript: the answer text stays in the DOM whether open or closed,
   which is what crawlers and AI answer engines read.
   ========================================================================== */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-10);
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-base);
}

.faq-item[open] {
  border-color: var(--color-primary);
}

.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

/* Hide the default disclosure triangle in both engine families. */
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::marker { content: ''; }

.faq-item__q:hover {
  color: var(--color-primary-dark);
}

.faq-item__q:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
}

.faq-item__icon {
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: var(--color-primary);
  transition: transform var(--transition-base);
}

.faq-item[open] .faq-item__icon {
  transform: rotate(180deg);
}

.faq-item__a {
  padding: 0 var(--space-6) var(--space-5);
}

.faq-item__a p {
  margin: 0;
  max-width: 68ch;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

[data-theme="dark"] .faq-item__q:hover {
  color: var(--color-primary);
}

@media (max-width: 640px) {
  .faq-item__q {
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-base);
  }

  .faq-item__a {
    padding: 0 var(--space-5) var(--space-4);
  }
}

/* ==========================================================================
   Booking hours — Saturday by arrangement + standing appointment note
   ========================================================================== */

.booking-hours__by-arrangement {
  align-items: flex-start;
  gap: var(--space-4);
}

.booking-hours__by-arrangement .booking-hours__time {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.5;
  text-align: right;
  color: var(--color-text-muted);
}

.booking-hours__appointment {
  display: flex;
  align-items: flex-start;
  /* reset.css caps every <p> at 75ch for readable body copy. This is a bordered
     callout, not running text, so it should match the card width instead. */
  max-width: none;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid rgba(232, 180, 0, 0.35);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.booking-hours__appointment i {
  color: var(--color-primary);
  margin-top: 3px;
  flex: 0 0 auto;
}

@media (max-width: 520px) {
  .booking-hours__by-arrangement {
    flex-direction: column;
    gap: var(--space-1);
  }

  .booking-hours__by-arrangement .booking-hours__time {
    text-align: left;
  }
}