/* ============================================================
   LEITSTELLEN SIMULATOR 112
   Professionelles Leitstellen-Dashboard-Design
   Game-UI auf Niveau echter Einsatzleitsysteme
   Autor: Claude, September 2026
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   DESIGN-TOKENS & VARIABLEN
   ============================================================ */
:root {
  /* Hintergrund-Palette — Tiefes Dunkelblau wie echter Leitstellenmonitor */
  --bg:         #0a0e1a;
  --bg2:        #0d1426;
  --bg3:        #111827;
  --bg4:        #1a2235;
  --bg5:        #1e2a40;
  --bg-glass:   rgba(13, 20, 38, 0.85);

  /* Rahmen & Trennlinien */
  --border:     #1e3050;
  --border2:    #243860;
  --border-glow: rgba(59, 130, 246, 0.3);

  /* Textfarben */
  --text:       #e2e8f0;
  --text2:      #7a92b8;
  --text3:      #4a6080;
  --text-bright: #f0f6ff;

  /* BOS-Farbpalette */
  --accent:     #3b82f6;       /* BOS-Blau */
  --accent2:    #1a56db;       /* BOS-Blau dunkel */
  --accent-glow: rgba(59, 130, 246, 0.25);
  --danger:     #dc2626;       /* Alarm-Rot */
  --danger2:    #991b1b;
  --danger-glow: rgba(220, 38, 38, 0.25);
  --success:    #16a34a;       /* Erfolg-Grün */
  --success2:   #15803d;
  --warning:    #d97706;       /* Warnung-Amber */
  --warning2:   #92400e;

  /* Organisationsfarben BOS */
  --fw:         #dc2626;       /* Feuerwehr Rot */
  --rd:         #ea580c;       /* Rettungsdienst Orange */
  --thw:        #1a56db;       /* THW Blau */
  --pol:        #15803d;       /* Polizei Grün */
  --dlrg:       #ca8a04;       /* DLRG Gelb */
  --seg:        #7c3aed;       /* SEG Lila */

  /* UI-Dimensionen */
  --radius:     8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --topbar-h:   52px;
  --sidebar-w:  320px;

  /* Schatten */
  --shadow:     0 4px 24px rgba(0, 0, 0, 0.6);
  --shadow-lg:  0 8px 40px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.15);

  /* Übergänge */
  --transition: 0.18s ease;
}

/* ============================================================
   BASIS-RESET & TYPOGRAFIE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hidden { display: none !important; }

button {
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition);
}

/* Monospace für technische Daten (Funkrufzeichen, IDs etc.) */
.mono {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.9em;
  letter-spacing: 0.03em;
}

/* ============================================================
   AUTH SCREEN — Zentrierter Login mit animiertem Hintergrund
   ============================================================ */
#auth-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: var(--bg);
  /* Animierte Radar-/Sonar-Kreise im Hintergrund */
  overflow: hidden;
}

/* CSS-Only Hintergrundanimation: Pulsierende BOS-Ringe */
#auth-screen::before,
#auth-screen::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(59, 130, 246, 0.12);
  animation: auth-pulse 6s ease-in-out infinite;
}

#auth-screen::before {
  width: 800px;
  height: 800px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  animation-delay: 0s;
}

#auth-screen::after {
  width: 1200px;
  height: 1200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.4);
  animation-delay: 2s;
  border-color: rgba(26, 86, 219, 0.08);
}

@keyframes auth-pulse {
  0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.6); }
  50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.05); }
}

/* Zusätzlicher Kreisring für Tiefe */
.auth-container::before {
  content: '';
  position: fixed;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  border: 1px solid rgba(59, 130, 246, 0.06);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: auth-pulse 8s ease-in-out infinite;
  animation-delay: 1s;
  pointer-events: none;
}

/* Diagonale Scan-Linie — echter Terminal-Look */
#auth-screen .auth-scanline {
  display: none; /* via JS hinzufügbar */
}

.auth-container {
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, rgba(13,20,38,0.97) 0%, rgba(17,24,39,0.95) 100%);
  border: 1px solid var(--border2);
  border-radius: var(--radius-xl);
  padding: 44px 40px 36px;
  width: 420px;
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(59,130,246,0.06),
    inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(24px);
}

.auth-logo {
  text-align: center;
  margin-bottom: 32px;
}

.auth-logo-icon {
  font-size: 52px;
  display: block;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 16px rgba(220, 38, 38, 0.5));
  animation: icon-breathe 3s ease-in-out infinite;
}

@keyframes icon-breathe {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(220, 38, 38, 0.4)); }
  50%       { filter: drop-shadow(0 0 28px rgba(220, 38, 38, 0.7)); }
}

.auth-logo h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: -0.01em;
}

.auth-logo p {
  font-size: 12px;
  color: var(--text2);
  margin-top: 5px;
  letter-spacing: 0.03em;
}

.auth-form h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 14px;
}

.form-group label {
  display: block;
  font-size: 10px;
  color: var(--text2);
  margin-bottom: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.form-group input {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-group input::placeholder {
  color: var(--text3);
}

.form-group input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  background: rgba(59,130,246,0.04);
}

.btn-primary {
  width: 100%;
  padding: 11px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 12px rgba(59,130,246,0.3);
  transition: all var(--transition);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #60a5fa 0%, var(--accent) 100%);
  box-shadow: 0 4px 20px rgba(59,130,246,0.45);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

.auth-switch {
  text-align: center;
  margin-top: 16px;
  color: var(--text2);
  font-size: 12px;
}

.auth-switch a {
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
}

.auth-switch a:hover {
  color: #93c5fd;
  text-decoration: underline;
}

.form-error {
  color: #f87171;
  font-size: 11px;
  margin-top: 8px;
  min-height: 16px;
  font-weight: 500;
}

/* ============================================================
   GAME SCREEN LAYOUT
   ============================================================ */
#game-screen {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* ============================================================
   TOP BAR — HUD-Streifen, Glaseffekt
   ============================================================ */
#top-bar {
  height: var(--topbar-h);
  background: rgba(10, 14, 26, 0.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  z-index: 200;
  box-shadow: 0 1px 0 rgba(59,130,246,0.08), 0 2px 12px rgba(0,0,0,0.5);
}

/* Leitstellen-Logo */
.tb-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--fw);
  white-space: nowrap;
  letter-spacing: -0.01em;
  text-shadow: 0 0 12px rgba(220,38,38,0.4);
}

.tb-logo span {
  font-size: 22px;
  filter: drop-shadow(0 0 6px rgba(220,38,38,0.5));
}

/* Vertikaler Trennstrich */
.tb-divider {
  width: 1px;
  height: 26px;
  background: linear-gradient(to bottom, transparent, var(--border2), transparent);
  flex-shrink: 0;
}

/* Statistik-Kacheln in der Topbar */
.tb-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
}

.tb-stat-label {
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.tb-stat-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.2;
}

#tb-credits {
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(251,191,36,0.3);
}

#tb-level {
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow);
}

/* XP-Fortschrittsblock */
.tb-xp-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 130px;
}

.tb-xp-text {
  font-size: 10px;
  color: var(--text2);
}

.xp-bar {
  height: 4px;
  background: var(--bg4);
  border-radius: 2px;
  overflow: hidden;
}

.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #818cf8);
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 6px rgba(59,130,246,0.5);
}

/* Rechte Seite Topbar */
.tb-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tb-user {
  color: var(--text2);
  font-size: 12px;
  font-weight: 500;
}

/* Heimatgebiet-Button */
#btn-home-region {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text2);
  padding: 5px 10px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

#btn-home-region:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}

/* Abmelden-Button */
#btn-logout {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text2);
  padding: 5px 12px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 500;
}

#btn-logout:hover {
  border-color: var(--danger);
  color: #f87171;
  background: rgba(220,38,38,0.08);
}

/* ============================================================
   HAUPTLAYOUT — Sidebar + Karte
   ============================================================ */
#main-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ============================================================
   SIDEBAR — Polizeifunk-Terminal-Optik
   ============================================================ */
#sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  /* Subtiler Leuchtstreifen an der rechten Kante */
  box-shadow: 1px 0 0 rgba(59,130,246,0.06), 2px 0 8px rgba(0,0,0,0.3);
}

/* Sidebar-Kopfbereich mit Aktions-Buttons */
.sidebar-header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 6px;
  align-items: center;
  background: rgba(0,0,0,0.2);
}

/* Wache-Bauen-Primärbutton */
#btn-build {
  flex: 1;
  padding: 8px 12px;
  background: linear-gradient(135deg, var(--fw) 0%, #b91c1c 100%);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(220,38,38,0.3);
  letter-spacing: 0.01em;
}

#btn-build:hover {
  background: linear-gradient(135deg, #ef4444 0%, var(--fw) 100%);
  box-shadow: 0 4px 16px rgba(220,38,38,0.45);
  transform: translateY(-1px);
}

/* Sonstige Sidebar-Header-Buttons (Icon-Buttons) */
.sidebar-header button:not(#btn-build) {
  padding: 8px 10px;
  font-size: 14px;
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text2);
  cursor: pointer;
  transition: all var(--transition);
}

.sidebar-header button:not(#btn-build):hover {
  background: var(--bg5);
  border-color: var(--accent);
  color: var(--text);
}

/* ============================================================
   SIDEBAR TABS
   ============================================================ */
.sidebar-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.15);
}

.tab-btn {
  flex: 1;
  padding: 9px 4px;
  background: transparent;
  border: none;
  color: var(--text3);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
  position: relative;
}

.tab-btn:hover {
  color: var(--text2);
  background: rgba(255,255,255,0.03);
}

.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: rgba(59,130,246,0.04);
}

.tab-panel {
  display: none;
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.tab-panel.active {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ============================================================
   EINSATZ-LISTE (Missions)
   ============================================================ */
.panel-header {
  padding: 6px 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-title {
  font-weight: 700;
  color: var(--text);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.panel-badge {
  background: var(--danger);
  color: white;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  box-shadow: 0 0 8px rgba(220,38,38,0.3);
}

/* Einsatz-Karte — Timeline-artig */
.mission-item {
  background: var(--bg3);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
  border-left: 3px solid var(--bg5);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

/* Subtiler Lichtreflex oben */
.mission-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
}

.mission-item:hover {
  background: var(--bg4);
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Prioritätsfarbkodierung nach BOS-Standard */
.mission-item.prio-high {
  border-left-color: var(--danger);
  background: linear-gradient(90deg, rgba(220,38,38,0.06) 0%, var(--bg3) 40%);
}

.mission-item.prio-high:hover {
  background: linear-gradient(90deg, rgba(220,38,38,0.1) 0%, var(--bg4) 40%);
}

.mission-item.prio-med {
  border-left-color: var(--warning);
  background: linear-gradient(90deg, rgba(217,119,6,0.06) 0%, var(--bg3) 40%);
}

.mission-item.prio-low {
  border-left-color: var(--text3);
}

.mission-item-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}

.mission-icon {
  font-size: 15px;
  flex-shrink: 0;
}

.mission-name {
  font-weight: 600;
  font-size: 12px;
  flex: 1;
  color: var(--text-bright);
  line-height: 1.3;
}

.mission-status {
  font-size: 10px;
  color: var(--text2);
  font-family: 'JetBrains Mono', monospace;
}

.mission-item-sub {
  font-size: 10px;
  color: var(--text2);
  display: flex;
  gap: 8px;
  align-items: center;
}

.mission-reward {
  margin-left: auto;
  color: #fbbf24;
  font-weight: 700;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
}

/* ============================================================
   WACHEN-LISTE (Stations)
   ============================================================ */
.station-item {
  background: var(--bg3);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all var(--transition);
  border: 1px solid transparent;
}

.station-item:hover {
  background: var(--bg4);
  border-color: var(--border2);
}

.station-item-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.station-item-info {
  flex: 1;
  min-width: 0;
}

.station-item-name {
  font-weight: 600;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.station-item-sub {
  font-size: 10px;
  color: var(--text2);
  margin-top: 2px;
}

/* ============================================================
   STATISTIK-PANEL
   ============================================================ */
#panel-stats .stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
}

.stat-card {
  background: var(--bg3);
  border-radius: var(--radius);
  padding: 14px 12px;
  text-align: center;
  border: 1px solid var(--border);
  transition: all var(--transition);
}

.stat-card:hover {
  border-color: var(--border2);
  background: var(--bg4);
}

.stat-card-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
  text-shadow: 0 0 12px var(--accent-glow);
}

.stat-card-label {
  font-size: 10px;
  color: var(--text2);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.empty-state {
  text-align: center;
  color: var(--text3);
  font-size: 12px;
  padding: 28px 16px;
  line-height: 1.7;
}

/* ============================================================
   KARTE — Nimmt gesamten verbleibenden Platz ein
   ============================================================ */
#map {
  flex: 1;
  z-index: 1;
  background: var(--bg);
}

/* ============================================================
   STATION-MARKER auf der Karte
   ============================================================ */
.station-marker {
  width: 44px;
  height: 44px;
  border-radius: 50% 50% 50% 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,0.2);
  box-shadow:
    0 3px 12px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.1);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  backdrop-filter: blur(4px);
}

.station-marker:hover {
  transform: scale(1.12);
  box-shadow:
    0 6px 20px rgba(0,0,0,0.8),
    0 0 0 3px rgba(255,255,255,0.1),
    inset 0 1px 0 rgba(255,255,255,0.15);
}

.station-marker-icon {
  font-size: 17px;
  line-height: 1;
}

.station-marker-label {
  font-size: 7px;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  letter-spacing: 0.03em;
  margin-top: 1px;
  font-family: 'JetBrains Mono', monospace;
}

/* ============================================================
   EINSATZ-MARKER auf der Karte
   ============================================================ */
.mission-marker {
  width: 38px;
  height: 38px;
  background: var(--bg2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #d97706;
  box-shadow:
    0 3px 14px rgba(0,0,0,0.8),
    0 0 0 4px rgba(217,119,6,0.18);
  cursor: pointer;
  animation: pulse-mission 2s ease-in-out infinite;
}

.mission-marker.active {
  border-color: var(--accent);
  box-shadow:
    0 3px 14px rgba(0,0,0,0.8),
    0 0 0 4px rgba(59,130,246,0.2);
  animation: pulse-active 1.5s ease-in-out infinite;
}

.mission-marker-icon {
  font-size: 17px;
}

@keyframes pulse-mission {
  0%, 100% {
    box-shadow: 0 3px 14px rgba(0,0,0,0.8), 0 0 0 4px rgba(217,119,6,0.18);
  }
  50% {
    box-shadow: 0 3px 14px rgba(0,0,0,0.8), 0 0 0 10px rgba(217,119,6,0.06);
  }
}

@keyframes pulse-active {
  0%, 100% {
    box-shadow: 0 3px 14px rgba(0,0,0,0.8), 0 0 0 4px rgba(59,130,246,0.2);
  }
  50% {
    box-shadow: 0 3px 14px rgba(0,0,0,0.8), 0 0 0 10px rgba(59,130,246,0.06);
  }
}

/* ============================================================
   FAHRZEUG-MARKER (vmm-* Klassen)
   SVG-Vogelperspektive — Top-Down Miniaturfahrzeug
   ============================================================ */
.vmm-container {
  background: transparent !important;
  border: none !important;
}

/* Äußere Hülle — Rotation & Positionierung */
.vmm-wrap {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s linear;
}

/* SVG-Fahrzeug — Vogelperspektive */
.vmm-svg {
  overflow: visible;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.65));
}

/* Blaulichter im Ruhezustand — dezent */
.vmm-svg .vmm-light-bl,
.vmm-svg .vmm-light-br {
  fill: rgba(59,130,246,0.2);
  opacity: 0.3;
}

/* Blaulicht aktiv — alternierende Blau/Rot-LED-Balken */
.vmm-blaulicht-active .vmm-light-bl {
  animation: blaulicht-bl 0.5s steps(1) infinite;
}
.vmm-blaulicht-active .vmm-light-br {
  animation: blaulicht-br 0.5s steps(1) infinite;
}

/* Dramatischer Glow — pulsiert mit dem Blaulicht */
.vmm-svg.vmm-blaulicht-active {
  animation: vmm-glow 0.5s steps(1) infinite;
}

@keyframes vmm-glow {
  0%, 49% {
    filter:
      drop-shadow(0 2px 6px rgba(0,0,0,0.7))
      drop-shadow(0 0 10px rgba(29,78,216,0.9))
      drop-shadow(0 0 20px rgba(59,130,246,0.5));
  }
  50%, 100% {
    filter:
      drop-shadow(0 2px 6px rgba(0,0,0,0.7))
      drop-shadow(0 0 10px rgba(220,38,38,0.9))
      drop-shadow(0 0 20px rgba(239,68,68,0.5));
  }
}

@keyframes blaulicht-bl {
  0%, 49%  { fill: #1d4ed8; opacity: 1; filter: url(#fg); }
  50%, 100%{ fill: #1e293b; opacity: 0.2; }
}

@keyframes blaulicht-br {
  0%, 49%  { fill: #1e293b; opacity: 0.2; }
  50%, 100%{ fill: #dc2626; opacity: 1; }
}

/* ============================================================
   MODAL — Frosted Glass Optik
   ============================================================ */
#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}

#modal-overlay.show {
  opacity: 1;
  pointer-events: all;
}

#modal-content {
  background: linear-gradient(160deg, rgba(13,20,38,0.98) 0%, rgba(17,24,39,0.96) 100%);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 700px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(255,255,255,0.04),
    0 0 40px rgba(0,0,0,0.5);
  overflow: hidden;
  /* Modal erscheint leicht von unten */
  transform: translateY(8px);
  transition: transform 0.22s ease;
}

#modal-overlay.show #modal-content {
  transform: translateY(0);
}

.modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  position: relative;
  border-left: 3px solid var(--accent);
  background: rgba(59,130,246,0.04);
}

.modal-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text-bright);
  letter-spacing: -0.01em;
}

.modal-sub {
  font-size: 12px;
  color: var(--text2);
  font-family: 'JetBrains Mono', monospace;
}

.modal-desc {
  font-size: 12px;
  color: var(--text);
  margin-top: 8px;
  line-height: 1.5;
}

.modal-reward {
  font-size: 12px;
  color: #fbbf24;
  margin-top: 8px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--bg4);
  border: 1px solid var(--border2);
  color: var(--text2);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.modal-close:hover {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
  transform: rotate(90deg);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-section h3 {
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.modal-section h3::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.modal-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  background: rgba(0,0,0,0.2);
}

/* ============================================================
   BUTTONS — Konsistentes System
   ============================================================ */

/* Sekundärer Button */
.btn-secondary {
  padding: 8px 16px;
  background: var(--bg4);
  border: 1px solid var(--border2);
  color: var(--text);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  transition: all var(--transition);
}

.btn-secondary:hover {
  background: var(--bg5);
  border-color: var(--accent);
}

/* Gefahren-Button */
.btn-danger {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--danger);
  color: #f87171;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  transition: all var(--transition);
}

.btn-danger:hover {
  background: var(--danger);
  color: white;
}

/* Modal-Primärbutton */
.btn-modal-primary {
  padding: 8px 20px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(59,130,246,0.3);
  transition: all var(--transition);
}

.btn-modal-primary:hover {
  box-shadow: 0 4px 16px rgba(59,130,246,0.45);
  transform: translateY(-1px);
}

/* Kleiner Button (für Tabellen-Aktionen) */
.btn-small {
  padding: 3px 9px;
  font-size: 10px;
  border-radius: 4px;
  border: 1px solid var(--border2);
  background: var(--bg4);
  color: var(--text2);
  font-weight: 500;
  transition: all var(--transition);
}

.btn-small:hover {
  background: var(--bg5);
  color: var(--text);
}

.btn-recall {
  border-color: var(--warning);
  color: #fbbf24;
}

.btn-recall:hover {
  background: var(--warning);
  color: black;
}

.btn-sell {
  border-color: var(--danger);
  color: #f87171;
}

.btn-sell:hover {
  background: var(--danger);
  color: white;
}

.btn-sell:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn-icon {
  background: transparent;
  border: none;
  font-size: 15px;
  padding: 4px;
  color: var(--text2);
  transition: color var(--transition);
}

.btn-icon:hover {
  color: var(--text);
}

/* ============================================================
   ANFORDERUNGS-LISTE (Req-Items)
   ============================================================ */
.req-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.req-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--bg4);
  font-size: 12px;
  border: 1px solid var(--border);
  transition: all var(--transition);
}

.req-item.fulfilled {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.25);
}

.req-item.missing {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.25);
}

.req-item.optional {
  background: rgba(122,146,184,0.04);
  border-color: rgba(122,146,184,0.08);
}

.req-have {
  margin-left: auto;
  font-weight: 700;
  color: var(--text2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}

.req-ok {
  padding: 10px;
  text-align: center;
  color: var(--success);
  font-weight: 600;
  background: rgba(22, 163, 74, 0.08);
  border-radius: var(--radius);
  border: 1px solid rgba(22, 163, 74, 0.2);
  font-size: 12px;
}

/* ============================================================
   FAHRZEUG-LISTEN im Modal
   ============================================================ */
.vehicle-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.vehicle-list.scrollable {
  max-height: 260px;
  overflow-y: auto;
}

.vehicle-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--bg4);
  font-size: 12px;
  border: 1px solid transparent;
  transition: all var(--transition);
}

.vehicle-item.dispatched {
  border-left: 2px solid var(--accent);
  background: rgba(59,130,246,0.06);
}

.vehicle-item.neighbour {
  border-left: 2px solid #f59e0b;
  background: rgba(245,158,11,0.05);
  opacity: 0.88;
}

/* ── Sonderbeladungs-Checkbox ──────────────────────────── */
.sb-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 5px;
  background: var(--bg3);
  border: 1px solid var(--border);
  transition: background 0.15s, border-color 0.15s;
}
.sb-option:hover { background: var(--bg4); }
.sb-option.sb-active {
  background: rgba(59,130,246,0.12);
  border-color: rgba(59,130,246,0.4);
}
.sb-option input[type="checkbox"] { margin-top: 2px; accent-color: var(--accent); }
.sb-name { font-size: 13px; font-weight: 600; color: var(--text); }
.sb-caps { font-size: 11px; color: var(--text3); margin-top: 2px; }
.sb-caps code {
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #60a5fa;
}
.cap-badge {
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2px 9px;
  font-size: 11px;
  color: var(--text2);
  font-family: var(--font-mono);
}

.vehicle-item.selectable {
  cursor: pointer;
}

.vehicle-item.selectable:hover {
  background: var(--bg5);
  border-color: var(--border2);
}

.vehicle-item.selectable.selected {
  border-color: var(--accent);
  background: rgba(59,130,246,0.1);
  box-shadow: 0 0 0 1px rgba(59,130,246,0.2);
}

.vehicle-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.vehicle-item-info strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
}

.vehicle-item-info small {
  font-size: 10px;
  color: var(--text2);
  margin-top: 1px;
}

.vcap-list {
  font-size: 9px;
  color: var(--text2);
  flex: 1;
}

.cap-match {
  color: var(--success) !important;
  font-weight: 600;
}

/* ============================================================
   SHOP — Fahrzeugkauf
   ============================================================ */
.shop-categories {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.shop-cat-header {
  font-weight: 700;
  font-size: 11px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.shop-cat-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 6px;
}

.shop-item {
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 8px;
  cursor: pointer;
  text-align: center;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.shop-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}

.shop-item:hover {
  background: var(--bg5);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 1px rgba(59,130,246,0.15);
}

.shop-item-icon {
  font-size: 22px;
  margin-bottom: 5px;
  display: block;
}

.shop-item-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.01em;
}

.shop-item-full {
  font-size: 9px;
  color: var(--text2);
  margin-bottom: 5px;
  line-height: 1.3;
}

.shop-item-cost {
  font-size: 11px;
  color: #fbbf24;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

.shop-item-crew {
  font-size: 9px;
  color: var(--text3);
  margin-top: 2px;
}

/* ============================================================
   WACHEN-BAU-RASTER
   ============================================================ */
.build-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 8px;
  padding: 2px;
}

.build-item {
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 12px;
  cursor: pointer;
  text-align: center;
  position: relative;
  transition: all var(--transition);
  overflow: hidden;
}

.build-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}

.build-item:hover:not(.locked) {
  background: var(--bg5);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4), 0 0 0 1px rgba(59,130,246,0.12);
}

.build-item.locked {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

.build-icon {
  font-size: 30px;
  margin-bottom: 8px;
  display: block;
}

.build-name {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--text-bright);
}

.build-short {
  font-size: 10px;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 7px;
  font-family: 'JetBrains Mono', monospace;
}

.build-cost {
  font-size: 12px;
  color: #fbbf24;
  font-weight: 700;
  margin-bottom: 3px;
  font-family: 'JetBrains Mono', monospace;
}

.build-slots {
  font-size: 10px;
  color: var(--text2);
  margin-bottom: 7px;
}

.build-desc {
  font-size: 9px;
  color: var(--text3);
  line-height: 1.5;
}

.build-lock {
  font-size: 10px;
  color: var(--danger);
  margin-top: 7px;
  font-weight: 600;
}

/* ============================================================
   BENACHRICHTIGUNG (Toast)
   ============================================================ */
#notification {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(90px);
  background: rgba(13, 20, 38, 0.95);
  border: 1px solid var(--border2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text);
  padding: 11px 24px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 480px;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
}

#notification.show {
  transform: translateX(-50%) translateY(0);
}

#notification.success {
  border-color: rgba(22,163,74,0.5);
  color: #4ade80;
  box-shadow: var(--shadow-lg), 0 0 20px rgba(22,163,74,0.15);
}

#notification.error {
  border-color: rgba(220,38,38,0.5);
  color: #f87171;
  box-shadow: var(--shadow-lg), 0 0 20px rgba(220,38,38,0.15);
}

#notification.mission {
  border-color: rgba(217,119,6,0.5);
  color: #fbbf24;
  box-shadow: var(--shadow-lg), 0 0 20px rgba(217,119,6,0.15);
}

#notification.levelup {
  border-color: rgba(168,85,247,0.5);
  color: #c084fc;
  background: rgba(13,20,38,0.95);
  box-shadow: var(--shadow-lg), 0 0 24px rgba(168,85,247,0.2);
}

#notification.info {
  border-color: rgba(59,130,246,0.4);
  color: var(--accent);
}

/* ============================================================
   FUNKPROTOKOLL (Radio Log)
   ============================================================ */
.radio-log {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  flex: 1;
  padding: 4px 6px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 10px;
}

.radio-entry {
  padding: 5px 9px;
  border-radius: 4px;
  background: var(--bg3);
  border-left: 2px solid var(--border2);
  line-height: 1.5;
  word-break: break-word;
  transition: background var(--transition);
}

.radio-entry:hover {
  background: var(--bg4);
}

/* Farbcodierung nach Kanal/Typ */
.radio-entry.radio-dispatch { border-left-color: #d97706; background: rgba(217,119,6,0.04); }
.radio-entry.radio-vehicle  { border-left-color: var(--accent); background: rgba(59,130,246,0.04); }
.radio-entry.radio-status   { border-left-color: var(--success); background: rgba(22,163,74,0.04); }
.radio-entry.radio-system   { border-left-color: #7c3aed; font-style: italic; background: rgba(124,58,237,0.04); }

.radio-time {
  color: var(--text3);
  margin-right: 5px;
  font-size: 9px;
}

.radio-from {
  color: #60a5fa;
  font-weight: 500;
  margin-right: 5px;
}

.radio-msg {
  color: var(--text2);
}

.radio-status-badge {
  display: inline-block;
  font-size: 8px;
  padding: 1px 5px;
  border-radius: 3px;
  color: #fff;
  font-weight: 700;
  margin-right: 4px;
  vertical-align: middle;
}

/* Radio-Tab Blitz-Animation bei neuer Nachricht */
@keyframes radioFlash {
  0%, 100% { color: var(--text3); }
  50% { color: #fbbf24; }
}

.tab-btn.radio-flash {
  animation: radioFlash 0.4s ease 2;
}

/* ============================================================
   SCROLLBARS — Schlankes dunkles Design
   ============================================================ */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: var(--bg2);
}

::-webkit-scrollbar-thumb {
  background: var(--bg5);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border2);
}

/* ============================================================
   LEAFLET OVERRIDES — Karte im Spieldesign
   ============================================================ */
.leaflet-container {
  background: #0d1a2b;
  font-family: 'Inter', system-ui, sans-serif;
}

/* Zoom-Steuerung */
.leaflet-control-zoom {
  border: 1px solid var(--border2) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  box-shadow: var(--shadow) !important;
}

.leaflet-control-zoom a {
  background: var(--bg2) !important;
  color: var(--text2) !important;
  border-color: var(--border) !important;
  font-size: 16px !important;
  line-height: 26px !important;
  width: 28px !important;
  height: 28px !important;
  transition: all var(--transition) !important;
}

.leaflet-control-zoom a:hover {
  background: var(--bg4) !important;
  color: var(--text) !important;
}

/* Attribution */
.leaflet-control-attribution {
  background: rgba(10,14,26,0.85) !important;
  color: var(--text3) !important;
  font-size: 8px !important;
  border-top-left-radius: 4px !important;
  backdrop-filter: blur(4px) !important;
}

.leaflet-control-attribution a {
  color: var(--text2) !important;
}

/* Popup */
.leaflet-popup-content-wrapper {
  background: var(--bg2) !important;
  border: 1px solid var(--border2) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}

.leaflet-popup-tip {
  background: var(--bg2) !important;
}

.leaflet-popup-content {
  margin: 10px 14px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* ============================================================
   RESPONSIVE ANPASSUNGEN
   ============================================================ */
@media (max-width: 900px) {
  :root {
    --sidebar-w: 280px;
  }
}

@media (max-width: 768px) {
  :root {
    --sidebar-w: 260px;
  }
  #top-bar .tb-stat:nth-child(n+6) {
    display: none;
  }
  .tb-xp-block {
    min-width: 90px;
  }
}

/* ============================================================
   UTILITY — Hilfeklassen
   ============================================================ */
.text-accent  { color: var(--accent); }
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-muted   { color: var(--text2); }

.fw-bg  { background-color: var(--fw); }
.rd-bg  { background-color: var(--rd); }
.thw-bg { background-color: var(--thw); }
.pol-bg { background-color: var(--pol); }
.dlrg-bg{ background-color: var(--dlrg); }

/* ============================================================
   MODERNES UI — Visual Upgrade 2.0
   ============================================================ */

/* ── Einsatz-Karten: Stärkere Präsenz ───────────────────── */
.mission-item {
  padding: 12px 14px;
  border-radius: 10px;
  border-left-width: 4px;
  background: linear-gradient(135deg, var(--bg3) 0%, rgba(17,24,39,0.9) 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.03);
}

.mission-item.prio-high {
  background: linear-gradient(135deg, rgba(220,38,38,0.1) 0%, var(--bg3) 60%);
  animation: mission-pulse-border 2.5s ease-in-out infinite;
}

@keyframes mission-pulse-border {
  0%, 100% { border-left-color: #dc2626; box-shadow: 0 0 0 0 rgba(220,38,38,0); }
  50%       { border-left-color: #f87171; box-shadow: -2px 0 12px rgba(220,38,38,0.3); }
}

.mission-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mission-item-sub {
  font-size: 11px;
  margin-top: 4px;
}

/* ── Wachen-Karten: Prominenter ─────────────────────────── */
.station-item {
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--bg3) 0%, rgba(17,24,39,0.9) 100%);
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.03);
  gap: 12px;
}

.station-item:hover {
  background: linear-gradient(135deg, var(--bg4) 0%, var(--bg3) 100%);
  border-color: rgba(59,130,246,0.25);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 1px rgba(59,130,246,0.1);
  transform: translateX(3px);
}

.station-item-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.station-item-name {
  font-size: 13px;
  font-weight: 700;
}

/* ── Fahrzeug-Items: Status-Leuchten ────────────────────── */
.vehicle-item {
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--bg4) 0%, rgba(17,24,39,0.95) 100%);
  border: 1px solid rgba(255,255,255,0.04);
  gap: 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.vehicle-item:not(.selectable):hover {
  background: var(--bg5);
  border-color: rgba(255,255,255,0.08);
  transform: translateX(2px);
}

.vehicle-item.dispatched {
  border-left: 3px solid var(--accent);
  background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, var(--bg4) 60%);
}

.vehicle-item-info strong {
  font-size: 13px;
  letter-spacing: -0.01em;
}

/* ── Status-Badges: Neon-Glow ────────────────────────────── */
.radio-status-badge {
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 0 8px currentColor;
}

/* ── Buttons: Premium-Stil ──────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  box-shadow: 0 2px 12px rgba(59,130,246,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
  box-shadow: 0 4px 20px rgba(59,130,246,0.55), inset 0 1px 0 rgba(255,255,255,0.2);
  transform: translateY(-1px);
}

.btn-secondary {
  background: linear-gradient(135deg, rgba(30,42,64,1) 0%, rgba(26,34,53,1) 100%);
  border-color: rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.btn-secondary:hover {
  background: linear-gradient(135deg, var(--bg5) 0%, var(--bg4) 100%);
  border-color: rgba(59,130,246,0.4);
  box-shadow: 0 0 12px rgba(59,130,246,0.15);
}

/* ── Statistik-Karten: Daten-Glow ───────────────────────── */
.stat-card {
  border-radius: 12px;
  background: linear-gradient(135deg, var(--bg3) 0%, var(--bg2) 100%);
  border-color: rgba(255,255,255,0.05);
  padding: 16px 12px;
}

.stat-card:hover {
  border-color: rgba(59,130,246,0.3);
  box-shadow: 0 0 20px rgba(59,130,246,0.08);
}

.stat-card-value {
  font-size: 30px;
  font-weight: 900;
}

/* ── Shop-Items: Hover-Glow ──────────────────────────────── */
.shop-item {
  border-radius: 10px;
  background: linear-gradient(160deg, var(--bg4) 0%, var(--bg3) 100%);
}

.shop-item:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(59,130,246,0.25), 0 0 20px rgba(59,130,246,0.08);
}

/* ── Wachen-Bau-Raster: Größer ────────────────────────────── */
.build-item {
  border-radius: 12px;
  padding: 18px 14px;
  background: linear-gradient(160deg, var(--bg4) 0%, var(--bg3) 100%);
}

.build-item:hover:not(.locked) {
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(59,130,246,0.2);
}

.build-icon {
  font-size: 36px;
}

/* ── Modal: Glassmorphismus ─────────────────────────────── */
#modal-content {
  background: linear-gradient(160deg, rgba(11,17,33,0.99) 0%, rgba(13,20,38,0.97) 100%);
  border-color: rgba(255,255,255,0.07);
  box-shadow:
    0 24px 80px rgba(0,0,0,0.8),
    0 0 0 1px rgba(59,130,246,0.08),
    inset 0 1px 0 rgba(255,255,255,0.05);
  border-radius: 16px;
  max-width: 750px;
}

#modal-overlay {
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(8px);
}

.modal-header {
  padding: 22px 28px 18px;
  border-left-width: 4px;
}

.modal-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.modal-body {
  padding: 20px 28px;
}

.modal-footer {
  padding: 16px 28px;
}

.modal-section h3 {
  font-size: 9px;
  letter-spacing: 0.12em;
}

/* ── Req-Items: Klarer Status ─────────────────────────────── */
.req-item.fulfilled {
  background: linear-gradient(135deg, rgba(22,163,74,0.12) 0%, rgba(22,163,74,0.04) 100%);
  border-color: rgba(22,163,74,0.35);
}

.req-item.missing {
  background: linear-gradient(135deg, rgba(220,38,38,0.12) 0%, rgba(220,38,38,0.04) 100%);
  border-color: rgba(220,38,38,0.35);
}

/* ── Topbar: Schlanker ───────────────────────────────────── */
#top-bar {
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 2px 16px rgba(0,0,0,0.5);
}

.tb-stat {
  padding: 0 14px;
  position: relative;
}

/* ── Scrollbar: Dünner ────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(59,130,246,0.25); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(59,130,246,0.45); }
.seg-bg { background-color: var(--seg); }

/* ============================================================
   MOBILE LAYOUT — Vollständige Smartphone-Unterstützung
   ============================================================ */

/* Bottom-Nav: Standard = verborgen (nur Mobile) */
#mobile-nav { display: none; }
#mobile-sidebar-backdrop { display: none; }
#tb-credits-mobile { display: none; }
#btn-mobile-menu { display: none; }

@media (max-width: 640px) {
  /* ── Top Bar: Kompakt ─────────────────────────────────── */
  #top-bar {
    height: 50px;
    padding: 0 10px;
    gap: 6px;
  }

  .tb-logo { font-size: 12px; }
  .tb-logo span { font-size: 18px; }

  /* Alles außer Logo + Credits + Buttons verstecken */
  .tb-divider,
  .tb-stat,
  .tb-xp-block,
  .tb-user,
  #btn-home-region {
    display: none !important;
  }

  /* Mobile Credits im Top Bar zeigen */
  #tb-credits-mobile {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: #fbbf24;
    font-family: 'JetBrains Mono', monospace;
    text-shadow: 0 0 8px rgba(251,191,36,0.3);
  }

  .tb-right {
    gap: 4px;
    margin-left: auto;
  }

  .tb-right button {
    padding: 6px 8px;
    font-size: 12px;
  }

  #btn-logout { display: none; }

  #btn-mobile-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg4);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    color: var(--text2);
    font-size: 18px;
    width: 34px;
    height: 34px;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }

  /* ── Haupt-Layout ─────────────────────────────────────── */
  #game-screen {
    height: 100dvh; /* Dynamic viewport height für iOS Safari */
  }

  #main-layout {
    height: calc(100dvh - 50px - 56px); /* Minus TopBar und BottomNav */
    position: relative;
  }

  /* Karte: Vollbild */
  #map {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
  }

  /* ── Sidebar als Bottom Sheet ─────────────────────────── */
  #sidebar {
    position: fixed;
    bottom: 56px;
    left: 0;
    right: 0;
    width: 100%;
    height: 72vh;
    z-index: 450;
    border-radius: 20px 20px 0 0;
    border-top: 1px solid var(--border2);
    border-right: none;
    transform: translateY(105%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.6);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  #sidebar.mobile-open {
    transform: translateY(0);
  }

  /* Drag-Handle oben im Bottom Sheet */
  #sidebar::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--border2);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }

  /* Sidebar-Tabs im Sheet anzeigen */
  .sidebar-tabs {
    flex-shrink: 0;
  }

  .sidebar-header {
    border-radius: 0;
    flex-shrink: 0;
  }

  .tab-panel {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Bottom Navigation ────────────────────────────────── */
  #mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: rgba(10, 14, 26, 0.97);
    border-top: 1px solid var(--border2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 500;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mobile-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: transparent;
    border: none;
    color: var(--text3);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 4px;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }

  .mobile-nav-btn .nav-icon {
    font-size: 22px;
    line-height: 1;
    transition: filter 0.15s;
  }

  .mobile-nav-btn.active {
    color: var(--accent);
  }

  .mobile-nav-btn.active .nav-icon {
    filter: drop-shadow(0 0 8px var(--accent));
  }

  /* Mission-Badge am Einsatz-Tab */
  .mobile-nav-btn .nav-badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 22px);
    background: var(--danger);
    color: white;
    font-size: 9px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg);
  }

  .mobile-nav-btn .nav-badge:empty { display: none; }

  /* ── Backdrop ─────────────────────────────────────────── */
  #mobile-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    bottom: 56px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 400;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }

  #mobile-sidebar-backdrop.active {
    opacity: 1;
    pointer-events: all;
  }

  /* ── Modal: Fullscreen ────────────────────────────────── */
  #modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  #modal-content {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
  }

  .modal-footer button {
    flex: 1;
    min-width: 80px;
    font-size: 12px;
    padding: 8px 6px;
  }

  .modal-header { padding: 18px 16px 12px; }
  .modal-body   { padding: 12px 16px; }

  /* ── Auth Screen: Full Width ──────────────────────────── */
  .auth-container {
    width: calc(100vw - 20px);
    padding: 28px 18px 24px;
  }

  .auth-logo h1 { font-size: 17px; }
  .auth-logo-icon { font-size: 44px; }

  /* ── Notification: Oben auf Mobile ───────────────────── */
  #notification {
    bottom: auto;
    top: 58px;
    left: 8px;
    right: 8px;
    transform: translateX(0) translateY(-80px);
    white-space: normal;
    text-align: center;
    font-size: 12px;
  }

  #notification.show {
    transform: translateX(0) translateY(0);
  }

  /* ── Einsatz-Detail: Kompakter ────────────────────────── */
  .vehicle-item {
    padding: 8px 10px;
  }

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

  .req-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Kleine Tablets (640-768px): Sidebar schmaler */
@media (min-width: 641px) and (max-width: 768px) {
  :root { --sidebar-w: 260px; }
  .tb-stat:nth-child(n+9) { display: none; }
}

/* ── LST-Monitor ─────────────────────────────────────── */
.lst-station-group {
  margin-bottom: 8px;
}
.lst-station-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text2);
  padding: 6px 10px 4px;
  border-bottom: 1px solid var(--border);
}
.lst-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  min-height: 40px;
}
.lst-row:hover { background: var(--bg3); }
.lst-status-badge {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.lst-vehicle-info {
  flex: 1;
  min-width: 0;
}
.lst-callsign {
  font-size: 12px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lst-typename {
  font-size: 10px;
  color: var(--text2);
}
.lst-mission-tag {
  flex-shrink: 0;
  font-size: 10px;
  background: rgba(239,68,68,0.15);
  color: #f87171;
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 4px;
  padding: 2px 6px;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}