:root {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --background: 218 33% 96%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;
  --primary: 221 83% 53%;
  --primary-foreground: 210 40% 98%;
  --secondary: 214 32% 91%;
  --secondary-foreground: 222 47% 11%;
  --muted: 215 20% 90%;
  --muted-foreground: 215 16% 35%;
  --accent: 173 80% 40%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 210 40% 98%;
  --success: 142 70% 36%;
  --success-foreground: 210 40% 98%;
  --warning: 38 92% 45%;
  --warning-foreground: 222 47% 11%;
  --info: 199 89% 48%;
  --info-foreground: 210 40% 98%;
  --border: 214 32% 84%;
  --input: 214 32% 84%;
  --ring: 221 83% 53%;
  --radius: 0.625rem;
  --shadow-sm: 0 1px 2px hsl(var(--foreground) / 0.05);
  --shadow-md: 0 4px 12px hsl(var(--foreground) / 0.08);
  --shadow-lg: 0 12px 32px hsl(var(--foreground) / 0.12);
  --shadow-elegant: 0 18px 48px hsl(var(--primary) / 0.22);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dark {
  --background: 222 47% 8%;
  --foreground: 210 40% 96%;
  --card: 222 38% 12%;
  --card-foreground: 210 40% 96%;
  --popover: 222 38% 12%;
  --popover-foreground: 210 40% 96%;
  --primary: 217 91% 60%;
  --primary-foreground: 222 47% 11%;
  --secondary: 217 25% 18%;
  --secondary-foreground: 210 40% 96%;
  --muted: 217 25% 18%;
  --muted-foreground: 215 20% 72%;
  --accent: 173 80% 44%;
  --accent-foreground: 222 47% 11%;
  --destructive: 0 72% 58%;
  --destructive-foreground: 210 40% 98%;
  --success: 142 62% 45%;
  --success-foreground: 222 47% 11%;
  --warning: 38 92% 56%;
  --warning-foreground: 222 47% 11%;
  --info: 199 89% 58%;
  --info-foreground: 222 47% 11%;
  --border: 217 25% 24%;
  --input: 217 25% 24%;
  --ring: 217 91% 60%;
}

* {
  box-sizing: border-box;
}

html {
  font-family: var(--font-sans);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

body {
  margin: 0;
  min-height: 100vh;
  background: hsl(var(--background));
}

button, input, select, textarea {
  font: inherit;
}

.safe-bottom {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

.safe-top {
  padding-top: env(safe-area-inset-top);
}

.rounded-token-sm { border-radius: calc(var(--radius) - 4px); }
.rounded-token-md { border-radius: calc(var(--radius) - 2px); }
.rounded-token-lg { border-radius: var(--radius); }
.rounded-token-xl { border-radius: calc(var(--radius) + 4px); }

/* Smooth animations and utilities */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 350ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom scrollbar styling for the top-down highway */
.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* Realistischere Verkehrsüberwachung: Asphalt, Fahrspuren und fließender Verkehr */
@keyframes streetVehicleDriveUp {
  0% {
    transform: translateX(-50%) translateY(130px);
  }
  100% {
    transform: translateX(-50%) translateY(-130px);
  }
}

@keyframes streetVehicleDriveDown {
  0% {
    transform: translateX(-50%) translateY(-130px);
  }
  100% {
    transform: translateX(-50%) translateY(130px);
  }
}

@keyframes ambientTrafficFlow {
  0% {
    background-position:
      12% 105%, 31% 92%, 50% 112%, 69% 88%, 86% 104%,
      18% -10%, 40% -22%, 61% -6%, 80% -18%,
      0 0;
  }
  100% {
    background-position:
      12% -22%, 31% -35%, 50% -18%, 69% -40%, 86% -24%,
      18% 115%, 40% 130%, 61% 110%, 80% 124%,
      0 36px;
  }
}

@keyframes asphaltPulse {
  0%, 100% {
    opacity: 0.72;
  }
  50% {
    opacity: 0.92;
  }
}

/* Der bestehende Straßen-Container besitzt scrollbar-width als Inline-Style. So bleibt die Änderung gezielt auf der Fahrzeugauswahl. */
div[style*="scrollbar-width"] {
  background-color: #1f2026 !important;
  background-image:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,0.08) 0 1px, transparent 1.6px),
    radial-gradient(circle at 71% 63%, rgba(255,255,255,0.06) 0 1px, transparent 1.8px),
    linear-gradient(90deg, rgba(28, 90, 54, 0.72) 0 10px, transparent 10px calc(100% - 10px), rgba(28, 90, 54, 0.72) calc(100% - 10px)),
    linear-gradient(90deg, rgba(255,255,255,0.10) 0 2px, transparent 2px calc(100% - 2px), rgba(255,255,255,0.10) calc(100% - 2px)),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 18px),
    linear-gradient(90deg, #24252b 0%, #17181d 48%, #26272d 100%);
  box-shadow:
    inset 0 0 0 10px rgba(22, 101, 52, 0.45),
    inset 22px 0 0 rgba(244, 244, 245, 0.08),
    inset -22px 0 0 rgba(244, 244, 245, 0.08),
    inset 0 0 55px rgba(0,0,0,0.8),
    var(--shadow-lg);
}

/* Zusätzliche, nicht anklickbare Autos im Hintergrund erhöhen die Verkehrsdichte. */
div[style*="scrollbar-width"]::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(#ef4444, #ef4444),
    linear-gradient(#f8fafc, #f8fafc),
    linear-gradient(#0ea5e9, #0ea5e9),
    linear-gradient(#a3e635, #a3e635),
    linear-gradient(#f97316, #f97316),
    linear-gradient(#64748b, #64748b),
    linear-gradient(#eab308, #eab308),
    linear-gradient(#14b8a6, #14b8a6),
    linear-gradient(#111827, #111827),
    repeating-linear-gradient(0deg, transparent 0 20px, rgba(255,255,255,0.10) 20px 22px, transparent 22px 46px);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-size:
    28px 48px,
    30px 50px,
    26px 44px,
    30px 48px,
    32px 54px,
    30px 50px,
    28px 46px,
    30px 48px,
    34px 58px,
    100% 140px;
  border-radius: 1rem;
  opacity: 0.58;
  animation: ambientTrafficFlow 9s linear infinite, asphaltPulse 4s ease-in-out infinite;
}

button[aria-label^="Fahrzeug"] {
  z-index: 2 !important;
  will-change: transform;
  animation: streetVehicleDriveUp 7.5s linear infinite;
}

button[aria-label^="Fahrzeug"]:nth-of-type(2n) {
  animation-name: streetVehicleDriveDown;
  animation-duration: 8.5s;
}

button[aria-label^="Fahrzeug"]:nth-of-type(3n) {
  animation-duration: 6.8s;
}

button[aria-label^="Fahrzeug"]:nth-of-type(4n) {
  animation-delay: -2.5s;
}

button[aria-label^="Fahrzeug"]:nth-of-type(5n) {
  animation-delay: -4s;
}

button[aria-label^="Fahrzeug"]:hover,
button[aria-label^="Fahrzeug"]:focus-visible {
  animation-play-state: paused;
  z-index: 20 !important;
}

@media (prefers-reduced-motion: reduce) {
  div[style*="scrollbar-width"]::before,
  button[aria-label^="Fahrzeug"] {
    animation: none !important;
  }
}