Regenradar: abspielbare Zeitleiste (RainViewer ~2h Verlauf + Nowcast)

Bisher nur der neueste Frame; jetzt alle ~13-16 RainViewer-Frames (past+nowcast,
10-Min-Schritte) mit Play/Pause + Slider + Zeitstempel (jetzt / +N / -N Min,
Vorhersage-Frames bläulich) — RainToday-artig. Frame-Wechsel smooth via
raster setTiles (kein Flackern), Loop, _radarNowIdx = letzter Vergangenheits-Frame.
Timeline unten-mittig, wird bei Radar-AUS entfernt. Pro-Feature wie das Radar.
Headless verifiziert: 13 Frames, Play scrubbt (12→0→1→2), keine Fehler.

backend/static/css/components.css

@@ -3052,6 +3052,44 @@ html.modal-open {
 }
 .map-legend::-webkit-scrollbar { display: none; }
 
+/* Regenradar-Zeitleiste (RainViewer: ~2h Vergangenheit + ~30min Nowcast, Play/Pause + Slider) */
+.map-radar-timeline {
+  position:   absolute;
+  left:       50%;
+  bottom:     calc(92px + env(safe-area-inset-bottom, 0px));
+  transform:  translateX(-50%);
+  z-index:    900;
+  display:    flex;
+  align-items:center;
+  gap:        10px;
+  width:      min(400px, calc(100% - 28px));
+  padding:    7px 12px;
+  border-radius: 999px;
+  background: rgba(15, 22, 35, 0.82);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
+  color:      #fff;
+  pointer-events: auto;
+}
+.rdr-play {
+  flex-shrink: 0;
+  width: 34px; height: 34px;
+  border: none; border-radius: 50%;
+  background: rgba(255, 255, 255, 0.16);
+  color: #fff; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+}
+.rdr-play:active { background: rgba(255, 255, 255, 0.3); }
+.rdr-slider { flex: 1; min-width: 0; height: 4px; accent-color: #60a5fa; cursor: pointer; }
+.rdr-time {
+  flex-shrink: 0;
+  font-size: 12px; font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  min-width: 82px; text-align: right; opacity: 0.92;
+}
+.rdr-time.is-forecast { color: #93c5fd; }   /* Nowcast/Vorhersage-Frames bläulich */
+
 .map-legend-btn {
   flex-shrink:   0;
   display:       inline-flex;