/* SchleppStop Night Drive — scroll journey (perf-first) */
:root {
  --nd-navy0: #070d18;
  --nd-navy1: #0d1626;
  --nd-navy2: #18283A;
  --nd-navy3: #22384F;
  --nd-mist: #D6E4F2;
  --nd-red: #E82020;
  --nd-amber: #F0A020;
}

/* ── Scroll track: tall; stage sticks ── */
.drive-track {
  position: relative;
  height: 260vh; /* scroll runway for sticky drive story */
  background: var(--nd-navy0);
}
.drive-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: #0d1626;
}

/* Layer stack */
.drive-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.drive-world img,
.drive-road-dashes {
  will-change: auto;
}
body.nd-scrolling .drive-world img,
body.nd-scrolling .drive-road-dashes {
  will-change: transform;
}

/* Sky */
.drive-sky {
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 70% 15%, rgba(60, 90, 140, 0.25), transparent 55%),
    linear-gradient(180deg, #070d18 0%, #0d1626 45%, #152740 100%);
}

/* Starfield — multi-layer (opacity twinkle only, no mix-blend filters) */
.drive-stars {
  z-index: 1;
  opacity: 0.75;
}
.drive-stars-a {
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 28% 32%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.6px 1.6px at 55% 12%, rgba(255,245,220,0.95), transparent),
    radial-gradient(1px 1px at 72% 28%, rgba(220,235,255,0.75), transparent),
    radial-gradient(1.3px 1.3px at 88% 16%, #fff, transparent),
    radial-gradient(1px 1px at 40% 8%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1px 1px at 18% 42%, rgba(200,220,255,0.55), transparent),
    radial-gradient(1.4px 1.4px at 63% 38%, rgba(255,255,255,0.6), transparent);
  animation: starTwinkle 3.8s ease-in-out infinite;
}
.drive-stars-b {
  display: block;
  opacity: 0.5;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 55%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.5px 1.5px at 33% 14%, #fff, transparent),
    radial-gradient(1px 1px at 48% 48%, rgba(200,230,255,0.7), transparent),
    radial-gradient(1.3px 1.3px at 66% 22%, rgba(255,250,230,0.9), transparent),
    radial-gradient(1px 1px at 81% 44%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.4px 1.4px at 94% 30%, #fff, transparent);
  animation: none; /* static layer — cheaper */
}
.drive-stars-c {
  display: none; /* v14: 2 layers enough for multi-layer look */
}
@keyframes starTwinkle {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.9; }
}

/* Glints: soft pulse */
.drive-glints {
  z-index: 2;
  inset: 0;
  opacity: 0.7;
}
.drive-glints span {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 5px 1px rgba(255,255,255,0.65);
  animation: none;
  opacity: 0.75;
}
.drive-glints span:nth-child(1) { left: 18%; top: 16%; }
.drive-glints span:nth-child(2) { left: 42%; top: 10%; width: 3px; height: 3px; }
.drive-glints span:nth-child(3) { left: 68%; top: 20%; }
.drive-glints span:nth-child(4),
.drive-glints span:nth-child(5) { display: none; }
@keyframes glintPulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

/* Orion belt — opacity twinkle only */
.drive-orion {
  z-index: 3;
  top: 12%;
  right: 10%;
  left: auto;
  bottom: auto;
  width: 130px;
  height: 50px;
}
.drive-orion i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(180, 210, 255, 0.7);
  animation: orionTwinkle 3s ease-in-out infinite;
}
.drive-orion i:nth-child(1) { left: 6px; top: 30px; animation-delay: 0s; }
.drive-orion i:nth-child(2) { left: 56px; top: 18px; width: 6px; height: 6px; animation-delay: 0.4s; }
.drive-orion i:nth-child(3) { left: 108px; top: 8px; animation-delay: 0.8s; }
@keyframes orionTwinkle {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .drive-stars-a,
  .drive-orion i {
    animation: none !important;
  }
}

/* Pyramids — far layer (CSS shapes) */
.drive-pyramids {
  z-index: 2;
  top: auto;
  height: 38%;
  bottom: 18%;
  opacity: 0.55;
  background:
    linear-gradient(to top, rgba(7,13,24,0.5), transparent);
}
.drive-pyramids svg {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Main world photo — classic hero.webp (pulled back — earlier builds were not this zoomed) */
.drive-world {
  z-index: 3;
  inset: 0;
  overflow: hidden;
}
.drive-world img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: transform;
}

/* Soft fog / ground */
.drive-fog {
  z-index: 4;
  top: auto;
  height: 35%;
  bottom: 0;
  background: linear-gradient(to top, rgba(7,13,24,0.75) 0%, rgba(13,22,38,0.25) 55%, transparent);
}

/* Road dash strip (illusion of motion under truck) */
.drive-road {
  z-index: 5;
  top: auto;
  bottom: 0;
  height: 22%;
  background:
    linear-gradient(to top, #0a1018 0%, transparent 100%);
  overflow: hidden;
}
.drive-road-dashes {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: 28%;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    rgba(214, 228, 242, 0.55) 0 48px,
    transparent 48px 96px
  );
  transform: translate3d(0, 0, 0);
  will-change: transform;
  opacity: 0.55;
}

/* Amber beacon OFF by default — floating CSS dot didn't sit on truck art.
   Re-enable with body.nd-show-beacon .drive-beacon { display:block } if wanted. */
.drive-beacon {
  display: none;
  z-index: 6;
  left: auto;
  right: 22%;
  top: 48%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--nd-amber);
  box-shadow:
    0 0 16px 6px rgba(240, 160, 32, 0.55),
    0 0 60px 20px rgba(240, 160, 32, 0.15);
  opacity: 0.75;
  animation: ndBeacon 2.2s ease-in-out infinite;
}
body.nd-show-beacon .drive-beacon {
  display: block;
}
@keyframes ndBeacon {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.95; }
}

/* Left dark UI plate */
.drive-scrim {
  z-index: 7;
  background: linear-gradient(
    95deg,
    rgba(7, 13, 24, 0.92) 0%,
    rgba(13, 22, 38, 0.72) 34%,
    rgba(13, 22, 38, 0.15) 58%,
    transparent 72%
  );
}

.drive-ui {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(540px, 48vw);
  padding: 100px 5% 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
  color: var(--nd-mist);
}
.drive-ui a,
.drive-ui button {
  pointer-events: auto;
}

.drive-km {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--nd-amber);
  margin-bottom: 14px;
  opacity: 0.95;
}
.drive-progress {
  width: 120px;
  height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  margin-bottom: 22px;
  overflow: hidden;
}
.drive-progress > i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--nd-red), var(--nd-amber));
  border-radius: 2px;
}

.drive-beat {
  display: none;
  animation: none;
}
.drive-beat.is-on {
  display: block !important;
}
.drive-beat h1,
.drive-beat h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: 1px;
  color: #EEF4FA;
  margin: 0 0 16px;
}
.drive-beat h1 .accent { color: #EEF4FA; display: block; }
.drive-beat p {
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.55;
  color: rgba(210, 228, 248, 0.88);
  max-width: 28rem;
  margin: 0 0 24px;
}
.drive-beat .drive-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.drive-beat .btn-primary,
.drive-beat .btn-outline {
  padding: 14px 26px;
  font-size: 1.1rem;
}
.drive-beat .btn-outline {
  border-color: rgba(255,255,255,0.45);
  color: #EEF4FA;
}

.drive-hint {
  position: absolute;
  z-index: 11;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: rgba(214, 228, 242, 0.55);
  pointer-events: none;
}
.drive-hint span {
  display: inline-block;
  animation: ndHint 1.6s ease-in-out infinite;
}
@keyframes ndHint {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50% { transform: translateY(6px); opacity: 0.9; }
}

/* Red accent bar */
.drive-stage::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--nd-red), var(--nd-amber), var(--nd-red));
  z-index: 12;
}

/* Hide classic hero when night drive present */
body.has-night-drive .hero { display: none !important; }

/* ── Rest of page: night-adjacent (immersion) ── */
body.has-night-drive {
  background: #c5d0de;
}
body.has-night-drive .emergency-strip {
  background: #c41c1c;
}
body.has-night-drive #leistungen,
body.has-night-drive #einsatzgebiet,
body.has-night-drive #vertrauen {
  background: linear-gradient(180deg, #1a2a3d 0%, #22384F 100%);
  color: var(--nd-mist);
}
body.has-night-drive #leistungen .section-title,
body.has-night-drive #einsatzgebiet .section-title,
body.has-night-drive #vertrauen .section-title,
body.has-night-drive #leistungen .service-card h3,
body.has-night-drive #vertrauen .trust-card h3 {
  color: #EEF4FA;
}
body.has-night-drive #leistungen .section-sub,
body.has-night-drive #leistungen .service-card p,
body.has-night-drive #einsatzgebiet .section-sub,
body.has-night-drive #vertrauen .section-sub,
body.has-night-drive #vertrauen .trust-card p {
  color: rgba(210, 228, 248, 0.75);
}
body.has-night-drive #leistungen .service-card,
body.has-night-drive #vertrauen .trust-card {
  background: rgba(13, 22, 38, 0.45);
  border: 1px solid rgba(138, 170, 190, 0.2);
}
body.has-night-drive #leistungen .service-card:hover,
body.has-night-drive #vertrauen .trust-card:hover {
  background: rgba(13, 22, 38, 0.65);
}
body.has-night-drive .area-tag {
  background: rgba(13, 22, 38, 0.5);
  border-color: rgba(138, 170, 190, 0.35);
  color: #EEF4FA;
}
body.has-night-drive .area-tag:hover {
  background: var(--nd-red);
  border-color: var(--nd-red);
}
/* continuum needs transparent sections — glass cards only (see night-drive-site.css) */
body.has-night-drive #warum,
body.has-night-drive #ablauf,
body.has-night-drive #kontakt {
  background: transparent;
}
body.has-night-drive nav {
  background: rgba(13, 22, 38, 0.92);
  border-bottom-color: var(--nd-red);
}
body.has-night-drive .nav-links a { color: #D6E4F2; }
body.has-night-drive .nav-links a:hover { color: #fff; }
body.has-night-drive .nav-logo text tspan:first-child { fill: #EEF4FA !important; }
body.has-night-drive .nav-logo text tspan:last-of-type { fill: #8aaabe !important; }
/* SVG text uses fill attributes — force via CSS filter on light logos ok */

/* ── Mobile ≤900px: full-image hero (desktop drive stack off) ──
   Diagnose (v24): desktop .drive-world img uses object-fit:cover + absolute
   inset:0 + stage overflow:hidden → cinema crop. Mobile tried contain but
   absolute .drive-layer, pulse scale, and incomplete overrides left a slice.
   Fix: flow layout, hide parallax layers, full plate contain, no scale.
*/
@media (max-width: 900px) {
  .drive-track {
    height: auto !important;
    min-height: 100vh;
    min-height: 100svh;
    background: var(--nd-navy0);
  }
  .drive-stage {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 100vh;
    min-height: 100svh;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    isolation: auto;
    background: #0d1626;
  }

  /* Desktop drive mechanics off */
  .drive-sky,
  .drive-stars,
  .drive-orion,
  .drive-glints,
  .drive-pyramids,
  .drive-fog,
  .drive-scrim,
  .drive-road,
  .drive-road-dashes,
  .drive-beacon,
  .drive-hint,
  .drive-progress,
  .drive-km {
    display: none !important;
  }

  /* Text stack first — night sky gradient (artwork sky blues) */
  .drive-ui {
    position: relative !important;
    order: 1 !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    z-index: 3 !important;
    padding: 88px 5% 22px !important;
    padding-top: max(88px, calc(env(safe-area-inset-top, 0px) + 72px)) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box;
    pointer-events: auto;
    color: var(--nd-mist);
    background:
      radial-gradient(ellipse 100% 70% at 75% 0%, rgba(80, 120, 175, 0.32), transparent 58%),
      linear-gradient(180deg, #070d18 0%, #0d1626 48%, #152740 100%);
  }

  /* Full artwork under text — entire plate visible */
  .drive-world,
  .drive-layer.drive-world {
    position: relative !important;
    order: 2 !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    z-index: 2 !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    border-top: 4px solid #E82020;
    background: #070d18;
    pointer-events: none;
  }
  .drive-world img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 2560 / 1152;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
    opacity: 1 !important;
  }

  /* Only first beat (H1 + CTAs) */
  .drive-beat {
    display: none !important;
  }
  .drive-beat.is-on,
  .drive-beat.is-mobile-show,
  body.nd-mobile .drive-beat.is-on,
  body.nd-mobile .drive-beat.is-mobile-show {
    display: block !important;
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    animation: mobileBeatIn 0.75s ease both;
  }
  @keyframes mobileBeatIn {
    from { opacity: 0; transform: translate3d(0, 12px, 0); }
    to { opacity: 1; transform: none; }
  }

  .drive-beat h1,
  .drive-beat h2 {
    font-size: clamp(2.4rem, 11vw, 3.4rem) !important;
    color: #EEF4FA !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
  }
  .drive-beat h1 .accent,
  .drive-beat .accent {
    color: var(--nd-red) !important;
  }
  .drive-beat p {
    font-size: 1.05rem !important;
    max-width: none !important;
    color: rgba(214, 228, 242, 0.9) !important;
  }
  .drive-ctas {
    flex-wrap: wrap;
    pointer-events: auto;
  }
  .drive-ctas .btn-primary,
  .drive-ctas .btn-outline {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .drive-ui {
    padding: 80px 4% 18px !important;
    padding-top: max(80px, calc(env(safe-area-inset-top, 0px) + 64px)) !important;
  }
  .drive-beat h1,
  .drive-beat h2 {
    font-size: clamp(2.1rem, 12vw, 2.9rem) !important;
  }
}

/* Reduced motion: still full banner, no drive parallax */
@media (prefers-reduced-motion: reduce) {
  .drive-track { height: auto; }
  .drive-stage { position: relative; height: auto; min-height: 0; }
  .drive-world img,
  .drive-layer,
  .drive-road-dashes {
    transform: none !important;
    animation: none !important;
  }
  .drive-beacon { animation: none; opacity: 0.7; }
  .drive-hint { display: none; }
  body.nd-mobile .drive-beat.is-mobile-show,
  body.nd-mobile .drive-beat.is-on {
    animation: none !important;
  }
  @media (max-width: 900px) {
    .drive-world img {
      object-fit: contain !important;
      height: auto !important;
      transform: none !important;
    }
  }
}