/* ==========================================================================
   EWB Radar – style.css
   Art direction: Wetter-Monitoring-App → professionell, dunkel, präzise
   Palette: Deep Navy/Slate Surfaces + Cyan-Teal Akzent
   Typography: Inter (body)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design Tokens  –  Dark Mode (Standard)
   -------------------------------------------------------------------------- */
:root {
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.8125rem, 0.76rem + 0.25vw, 0.9375rem);
  --text-base: clamp(0.9375rem, 0.88rem + 0.25vw, 1rem);

  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;

  /* Surfaces – Dark */
  --color-bg:           #0d1117;
  --color-surface:      #161b22;
  --color-surface-2:    #1c2128;
  --color-surface-3:    #21262d;
  --color-border:       rgba(240, 246, 252, 0.10);
  --color-border-hover: rgba(240, 246, 252, 0.18);

  /* Text – Dark */
  --color-text:         #e6edf3;
  --color-text-muted:   #8b949e;
  --color-text-faint:   #484f58;

  /* Akzent – Cyan-Teal */
  --color-accent:       #39d0d8;
  --color-accent-dim:   rgba(57, 208, 216, 0.15);
  --color-accent-glow:  rgba(57, 208, 216, 0.35);

  /* Status */
  --color-ok:    #3fb950;
  --color-warn:  #d29922;
  --color-error: #f85149;

  /* Radius */
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   0.875rem;
  --radius-xl:   1.25rem;
  --radius-2xl:  1.75rem;
  --radius-full: 9999px;

  /* Schatten */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.50), 0 2px 6px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 36px rgba(0,0,0,0.60), 0 4px 12px rgba(0,0,0,0.40);

  /* Glasmorphism-Surfaces (Controls, Side-Panel, Status) */
  --glass-bg:     rgba(22, 27, 34, 0.82);
  --glass-bg-2:   rgba(33, 38, 45, 0.60);
  --glass-bg-2h:  rgba(33, 38, 45, 0.85);

  /* Übergänge */
  --transition-fast:   120ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Controls-Hoehe: wird in Breakpoints wiederverwendet.
     Alle abhaengigen Elemente (side-panel, legend, toggle) nutzen diese Tokens.
     --safe-bottom hebt alles bei Geraeten mit Browser-Navigationsleiste an. */
  --safe-bottom:      env(safe-area-inset-bottom, 0px);
  --controls-bottom:  calc(24px + var(--safe-bottom));
  --controls-height:  52px;
  --controls-gap:     24px;
}

/* --------------------------------------------------------------------------
   Design Tokens  –  Light Mode
   -------------------------------------------------------------------------- */
[data-theme="light"] {
  --color-bg:           #f0f4f8;
  --color-surface:      #ffffff;
  --color-surface-2:    #e8edf2;
  --color-surface-3:    #d9e0e8;
  --color-border:       rgba(0, 0, 0, 0.10);
  --color-border-hover: rgba(0, 0, 0, 0.18);

  --color-text:         #1c2128;
  --color-text-muted:   #57606a;
  --color-text-faint:   #8c959f;

  --color-accent:       #0969da;
  --color-accent-dim:   rgba(9, 105, 218, 0.12);
  --color-accent-glow:  rgba(9, 105, 218, 0.30);

  --color-ok:    #1a7f37;
  --color-warn:  #9a6700;
  --color-error: #cf222e;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 36px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.10);

  --glass-bg:     rgba(255, 255, 255, 0.88);
  --glass-bg-2:   rgba(240, 244, 248, 0.70);
  --glass-bg-2h:  rgba(240, 244, 248, 0.95);
}


/* --------------------------------------------------------------------------
   Base Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-bg);
  overflow: hidden;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
}

select {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* --------------------------------------------------------------------------
   Karten-Shell
   -------------------------------------------------------------------------- */
#map-shell {
  position: relative;
  width: 100%;
  /* dvh = dynamic viewport height: schrumpft wenn Browser-UI (Firefox-Leiste) sichtbar ist */
  height: 100dvh;
  overflow: hidden;
  background: var(--color-bg);
}

#map {
  width: 100%;
  height: 100%;
}


/* --------------------------------------------------------------------------
   Radar-Status – Pill oben-mitte
   -------------------------------------------------------------------------- */
.radar-status {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;

  display: inline-flex;
  align-items: center;
  gap: var(--space-2);

  height: 40px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-full);

  background: var(--glass-bg);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);

  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;

  box-shadow: var(--shadow-md);
  pointer-events: none;

  transition:
    color var(--transition-smooth),
    box-shadow var(--transition-smooth),
    border-color var(--transition-smooth);
}

/* Pulsierende Status-LED */
.radar-status::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: currentColor;
  animation: pulse-led 2.4s ease-in-out infinite;
}

@keyframes pulse-led {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%       { box-shadow: 0 0 8px 3px currentColor; opacity: 0.8; }
}

.radar-status--ok {
  color: var(--color-ok);
  border-color: rgba(63, 185, 80, 0.22);
}

.radar-status--warn {
  color: var(--color-warn);
  border-color: rgba(210, 153, 34, 0.22);
}

.radar-status--error {
  color: var(--color-error);
  border-color: rgba(248, 81, 73, 0.22);
}


/* --------------------------------------------------------------------------
   Side-Panel – rechts, vertikal zentriert (ab 1200px)
   Unterhalb 1200px: rechts-unten, oberhalb der Controls-Bar
   -------------------------------------------------------------------------- */
.side-panel {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  z-index: 10001;

  display: flex;
  flex-direction: column;
  gap: var(--space-2);

  min-width: 176px;
  padding: var(--space-4);
  border-radius: var(--radius-2xl);

  background: var(--glass-bg);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);

  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.side-panel__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0 var(--space-1);
}

.side-panel__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-3);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);

  background-color: var(--glass-bg-2);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% + 1px),
    calc(100% - 9px)  calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;

  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  outline: none;

  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.side-panel__select:hover {
  border-color: var(--color-border-hover);
  background-color: var(--glass-bg-2h);
}

.side-panel__select:focus {
  border-color: rgba(57, 208, 216, 0.60);
  box-shadow: 0 0 0 3px rgba(57, 208, 216, 0.12);
}

.side-panel__select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


/* --------------------------------------------------------------------------
   Controls-Leiste – unten-mitte
   -------------------------------------------------------------------------- */
#controls {
  position: absolute;
  left: 50%;
  bottom: var(--controls-bottom);
  transform: translateX(-50%);
  z-index: 10000;

  display: flex;
  align-items: center;
  gap: var(--space-2);

  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-2xl);

  background: var(--glass-bg);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);

  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  user-select: none;
}

#controls > * {
  position: relative;
  z-index: 1;
}

/* Trennlinie */
.controls-separator {
  width: 1px;
  height: 24px;
  background: var(--color-border);
  flex-shrink: 0;
  border-radius: var(--radius-full);
}

/* --------------------------------------------------------------------------
   Gemeinsame Control-Button-Basis
   Gilt für: prev, next, radar-stations, poi
   -------------------------------------------------------------------------- */
#prev-btn,
#next-btn,
#radar-stations-btn,
#poi-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);

  background: var(--glass-bg-2);
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1;

  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

#prev-btn:hover,
#next-btn:hover,
#radar-stations-btn:hover,
#poi-btn:hover {
  background: var(--color-accent-dim);
  border-color: rgba(57, 208, 216, 0.30);
  color: var(--color-accent);
  transform: scale(1.06);
}

#prev-btn:active,
#next-btn:active,
#radar-stations-btn:active,
#poi-btn:active {
  transform: scale(0.96);
  background: var(--color-accent-dim);
}

/* Gedrückt-Zustand: eingedrückt (inset shadow + keine Erhöhung) */
#radar-stations-btn.active,
#poi-btn.active {
  background: var(--color-accent-dim);
  border-color: rgba(57, 208, 216, 0.40);
  color: var(--color-accent);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
  transform: none;
}

#radar-stations-btn.active:hover,
#poi-btn.active:hover {
  background: rgba(57, 208, 216, 0.22);
  border-color: rgba(57, 208, 216, 0.55);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.35),
    0 0 10px rgba(57, 208, 216, 0.18);
  transform: none;
}

/* — Play/Pause-Button — */
#play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  line-height: 1 !important;
  padding: 0 !important;
  padding-bottom: 1px !important;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(57, 208, 216, 0.30);

  background: var(--color-accent-dim);
  color: var(--color-accent);
  font-size: 1rem;

  transition:
    background var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast),
    border-color var(--transition-fast);
}

#play-btn:hover {
  background: rgba(57, 208, 216, 0.22);
  border-color: rgba(57, 208, 216, 0.55);
  box-shadow: 0 0 14px rgba(57, 208, 216, 0.20);
  transform: scale(1.08);
}

#play-btn:active {
  transform: scale(0.96);
}

/* — Zeitfenster-Select — */
#window-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  height: 40px;
  padding: 0 var(--space-5) 0 var(--space-3);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);

  background-color: var(--glass-bg-2);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 12px) calc(50% + 1px),
    calc(100% - 7px)  calc(50% + 1px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;

  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 500;
  outline: none;

  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

#window-select:hover {
  border-color: var(--color-border-hover);
  background-color: var(--glass-bg-2h);
}

#window-select:focus {
  border-color: rgba(57, 208, 216, 0.50);
  box-shadow: 0 0 0 3px rgba(57, 208, 216, 0.10);
}

/* — Fenster-Label — */
#controls label[for="window-select"] {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  white-space: nowrap;
}

/* — Zeit-Label — */
#time-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  min-width: 150px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* — Zeitstrahl-Slider —
   clamp() Herleitung:
     min  70px  @ 550px  Viewport
     max 240px  @ 1060px Viewport
     Steigung: (240-70)/(1060-550) = 170/510 ≈ 0.3333 → 33.3vw
     Offset:   70 - 0.3333×550 = -113px
   → width: clamp(70px, calc(33.3vw - 113px), 240px)
   Unterhalb 550px greift das min (70px), oberhalb 1060px das max (240px).
   Portrait-Sonderfall: width: 100% (Bar füllt die ganze Breite).
   ------------------------------------------------------------------ */
#time-slider {
  -webkit-appearance: none;
  appearance: none;
  width: clamp(70px, calc(33.3vw - 113px), 240px);
  height: 4px;
  border-radius: var(--radius-full);
  outline: none;
  background: rgba(57, 208, 216, 0.20);
  cursor: pointer;
  flex-shrink: 0;
}

#time-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius-full);
  background: rgba(57, 208, 216, 0.20);
}

#time-slider:hover::-webkit-slider-runnable-track {
  background: rgba(57, 208, 216, 0.30);
}

#time-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 8px rgba(57, 208, 216, 0.45);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

#time-slider::-webkit-slider-thumb:hover {
  transform: scale(1.25);
  box-shadow: 0 0 14px rgba(57, 208, 216, 0.65);
}

#time-slider::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-full);
  background: rgba(57, 208, 216, 0.20);
}

#time-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 8px rgba(57, 208, 216, 0.45);
  cursor: pointer;
}

#time-slider::-moz-range-thumb:hover {
  transform: scale(1.25);
}


/* --------------------------------------------------------------------------
   Theme-Toggle – unten rechts
   -------------------------------------------------------------------------- */
#theme-toggle {
  position: absolute;
  bottom: var(--controls-bottom);
  right: 16px;
  z-index: 10001;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);

  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow-md);

  font-size: 1.15rem;
  line-height: 1;
  color: var(--color-text-muted);

  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

#theme-toggle:hover {
  background: var(--color-accent-dim);
  border-color: rgba(57, 208, 216, 0.35);
  color: var(--color-accent);
  transform: scale(1.08);
  box-shadow: 0 0 14px var(--color-accent-glow);
}

#theme-toggle:active {
  transform: scale(0.95);
}


/* --------------------------------------------------------------------------
   Leaflet-Overrides
   -------------------------------------------------------------------------- */
.leaflet-control-zoom {
  border: none !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden;
}

.leaflet-control-zoom a {
  background: var(--glass-bg) !important;
  border: none !important;
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-text-muted) !important;
  font-size: 1.1rem !important;
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.leaflet-control-zoom a:last-child {
  border-bottom: none !important;
}

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

.leaflet-control-attribution {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md) 0 0 0 !important;
  color: var(--color-text-muted) !important;
  font-size: 10px !important;
}

.leaflet-control-attribution a,
.leaflet-control-attribution span {
  color: var(--color-text-muted) !important;
}

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

/* Radar-Overlay-Bilder scharf halten – Browser-Bilinear-Interpolation
   beim Zoom unterdrücken; pixelated = Chrome/Edge/Safari, crisp-edges = Firefox */
.leaflet-image-layer {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}


/* --------------------------------------------------------------------------
   Responsive
   -----------------------------------------------------------------------

   Breakpoint-Strategie:

   ≥ 1200px   Normalzustand: side-panel vertikal zentriert rechts
   < 1200px   side-panel nach unten-rechts
   < 1060px   Controls kompakter, Tokens wechseln
   < 750px    "FENSTER:"-Label weg
   < 500px    theme-toggle springt über renderer-panel

   Portrait-Sonderfall (max-width: 600px) AND (orientation: portrait):
     Controls-Bar füllt die ganze Breite, Buttons größer,
     Status-Pill größer, Zoom-Buttons größer.
     Schrauben:
       --portrait-btn-size   Button-Größe in der Controls-Bar
       --portrait-icon-size  Icon-/Emoji-GröÜe darin
       --portrait-status-h   Höhe der Status-Pill
       --portrait-zoom-size  Leaflet +/- Buttons
   -------------------------------------------------------------------------- */

/* ≤ 1200px: side-panel verlässt die Mitte-Achse */
@media (max-width: 1200px) {
  .side-panel {
    top: auto;
    right: 12px;
    bottom: calc(var(--controls-bottom) + var(--controls-height) + var(--controls-gap));
    transform: none;
    min-width: 152px;
  }
}

/* ≤ 1060px: Controls-Bar kompakter, alle Tokens passen sich an */
@media (max-width: 1060px) {
  :root {
    --controls-bottom: calc(8px + var(--safe-bottom));
    --controls-height: 48px;
    --controls-gap:    24px;
  }

  #controls {
    gap: var(--space-1);
    padding: var(--space-2);
    border-radius: var(--radius-xl);
  }

  #time-label {
    display: none;
  }

  .radar-status {
    top: 12px;
    height: 36px;
    padding: 0 var(--space-4);
    font-size: 11px;
  }

  #theme-toggle {
    right: 8px;
    width: 40px;
    height: 40px;
  }

  .side-panel {
    right: 8px;
    min-width: 144px;
  }
}

/* ≤ 750px: "FENSTER:"-Label fliegt raus */
@media (max-width: 750px) {
  #controls label[for="window-select"] {
    display: none;
  }
}

/* ≤ 600px: theme-toggle springt über den renderer-panel */
@media (max-width: 600px) {
  #theme-toggle {
    /* panel-bottom + panel-h(80) + gap(8) + extra(22) = +120px über panel-bottom */
    bottom: calc(var(--controls-bottom) + var(--controls-height) + var(--controls-gap) + 120px);
  }
}

/* --------------------------------------------------------------------------
   Portrait-Modus auf Smartphones
   Greift ab max-width 600px UND Hochformat.
   Querformat bleibt unverändert (sieht schon gut aus).

   Schrauben (alle hier oben im Block):
     --portrait-btn-size   GröÜe aller Buttons in der Bar       Standard: 48px
     --portrait-play-size  Play-Button (etwas gröÜer)             Standard: 52px
     --portrait-icon-size  Emoji/Icon-SchriftgröÜe               Standard: 1.35rem
     --portrait-status-h   Höhe der Status-Pill oben             Standard: 44px
     --portrait-zoom-size  Leaflet +/- Buttonfläche             Standard: 44px
   -------------------------------------------------------------------------- */
@media (max-width: 600px) and (orientation: portrait) {

  /* Tokens für diesen Breakpoint – hier drehen */
  :root {
    --portrait-btn-size:  32px;
    --portrait-play-size: 36px;
    --portrait-status-h:  44px;
    --controls-gap:       32px;
    --portrait-zoom-size: 32px;
  }

  /* Controls-Bar: volle Breite, kein transform-center mehr */
  #controls {
    left: 8px;
    right: 8px;
    bottom: var(--controls-bottom);
    transform: none;          /* zentrierendes translateX(-50%) deaktivieren */
    width: auto;
    justify-content: space-between;
    border-radius: var(--radius-xl);
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }

  /* Slider füllt den restlichen Platz zwischen den festen Elementen */
  #time-slider {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }

  /* Alle Control-Buttons größer */
  #prev-btn,
  #next-btn,
  #radar-stations-btn,
  #poi-btn {
    width: var(--portrait-btn-size);
    height: var(--portrait-btn-size);
    font-size: var(--portrait-icon-size);
  }

  #play-btn {
    width: var(--portrait-play-size);
    height: var(--portrait-play-size);
    font-size: var(--portrait-icon-size);
  }

  /* Status-Pill oben größer + besser lesbar */
  .radar-status {
    height: var(--portrait-status-h);
    font-size: var(--text-xs);
    padding: 0 var(--space-4);
  }

  /* Leaflet Zoom-Buttons größer */
  .leaflet-control-zoom a {
    width:       var(--portrait-zoom-size) !important;
    height:      var(--portrait-zoom-size) !important;
    line-height: var(--portrait-zoom-size) !important;
    font-size:   1.4rem                   !important;
  }
}