Streamplan-Seite: interaktives Live-Radar statt schlichter Textkarten

Nutzer-Wunsch 20.08.2026: "diese seite vom streamplan soll viel geiler
und spezieller sein, ueberrasch mich."

Neues Herzstueck: ein 24-Stunden-Ziffernblatt (reines SVG, keine
Bild-Assets), das den festen 20-Uhr-Termin als dauerhaft leuchtenden
Fixpunkt zeigt (goldener Puls) und einen "Jetzt"-Zeiger in Echtzeit mit
der tatsaechlichen Uhrzeit der besuchenden Person mitbewegt (Babyblau,
DogFather-Markenfarbe). Nutzt denselben /live-status-Endpunkt wie die
Startseite:
- Offline: echter Sekunden-Countdown zum naechsten lokalen 20-Uhr-Termin.
- Live: komplettes Radar schaltet auf Rot/Puls um, zeigt den Stream-Titel
  und einen "Jetzt anschauen"-Knopf direkt zu TikTok.
Sanft rotierender Lichtschein fuer Atmosphaere, komplett augenschonend
(gedeckte Farben, respektiert prefers-reduced-motion vollstaendig).

Bugfix unterwegs gefunden (Playwright-Screenshot, dritte Wiederholung
desselben Musters heute): der "Jetzt anschauen"-Knopf blieb trotz
[hidden]-Attribut sichtbar, weil .btn selbst "display" setzt und damit
gleiche Spezifitaet wie die eingebaute [hidden]-Regel hat -- explizite
Regel ergaenzt.

Co-Authored-By: Claude Opus 5 <[email protected]>

assets/css/main.css

@@ -3571,3 +3571,99 @@ body.start-seite .music-toggle:focus-visible {
   margin: 1.5rem 0;
 }
 .todo-note strong { color: var(--accent-2); }
+
+/* ===================================================================
+   Streamplan — "Live-Radar" (20.08.2026, Nutzer-Wunsch: "soll viel
+   geiler und spezieller sein, überrasch mich"). Ein 24-Stunden-Ziffernblatt
+   als SVG: der feste 20-Uhr-Termin leuchtet dauerhaft als Fixpunkt, ein
+   "Jetzt"-Zeiger bewegt sich in Echtzeit mit der tatsächlichen Uhrzeit,
+   ein sanft rotierender Lichtschein sorgt für Atmosphäre. Schaltet live
+   auf Rot/Puls um, sobald DogFather laut /live-status wirklich sendet —
+   sonst zählt ein echter Sekunden-Countdown zum nächsten 20-Uhr-Termin
+   runter. Bewusst augenschonend: gedeckte Farben, langsame, sanfte
+   Animation, kompletter Stillstand bei prefers-reduced-motion. ================================================================= */
+.stream-radar-wrap { display: flex; flex-direction: column; align-items: center; margin: 1.4rem auto 0; }
+.stream-radar {
+  position: relative;
+  width: min(300px, 70vw);
+  aspect-ratio: 1;
+  margin: 0 auto;
+}
+.stream-radar-sweep {
+  position: absolute;
+  inset: -6%;
+  border-radius: 50%;
+  background: conic-gradient(from 0deg,
+    transparent 0deg, rgba(143, 217, 234, .16) 40deg, transparent 90deg,
+    transparent 260deg, rgba(139, 92, 246, .14) 300deg, transparent 340deg, transparent 360deg);
+  animation: stream-radar-rotate 16s linear infinite;
+  pointer-events: none;
+}
+@keyframes stream-radar-rotate { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .stream-radar-sweep { animation: none; } }
+.stream-radar-dial { position: relative; width: 100%; height: 100%; display: block; }
+.radar-ring-outer { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1.5; }
+.radar-ring-inner { fill: rgba(255, 255, 255, .02); stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
+.radar-tick { stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; }
+.radar-tick-major { stroke: rgba(255, 255, 255, .5); stroke-width: 2.2; }
+.radar-tick-label { fill: var(--text-muted); font-size: 11px; font-family: var(--font-body, inherit); }
+.radar-fixmarker-dot {
+  fill: #e8c465;
+  filter: drop-shadow(0 0 6px rgba(232, 196, 101, .9)) drop-shadow(0 0 14px rgba(232, 196, 101, .5));
+  animation: stream-radar-fixpuls 3.2s ease-in-out infinite;
+}
+@keyframes stream-radar-fixpuls { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) { .radar-fixmarker-dot { animation: none; opacity: .9; } }
+.radar-now-hand {
+  stroke: var(--accent);
+  stroke-width: 2.5;
+  stroke-linecap: round;
+  filter: drop-shadow(0 0 4px var(--accent));
+  transition: x2 .6s ease, y2 .6s ease;
+}
+.radar-now-dot {
+  fill: var(--accent);
+  filter: drop-shadow(0 0 6px var(--accent));
+  transition: cx .6s ease, cy .6s ease;
+}
+.stream-radar.ist-live .radar-now-hand,
+.stream-radar.ist-live .radar-now-dot { stroke: #ff5c72; fill: #ff5c72; filter: drop-shadow(0 0 8px rgba(255, 92, 114, .8)); }
+.radar-center-dot { fill: var(--text); opacity: .8; }
+.stream-radar-center {
+  position: absolute;
+  inset: 24%;
+  border-radius: 50%;
+  background: rgba(8, 10, 14, .82);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: .5rem;
+  gap: .25rem;
+}
+.stream-radar-dot {
+  width: 10px; height: 10px;
+  border-radius: 50%;
+  background: var(--text-muted);
+  margin-bottom: .2rem;
+}
+.stream-radar.ist-live .stream-radar-dot { background: #ff5c72; box-shadow: 0 0 10px rgba(255, 92, 114, .8); animation: stream-radar-live-puls 1.4s ease-in-out infinite; }
+@keyframes stream-radar-live-puls { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .75; } }
+@media (prefers-reduced-motion: reduce) { .stream-radar.ist-live .stream-radar-dot { animation: none; } }
+.stream-radar-status { font-size: 1rem; font-weight: 800; color: var(--text); line-height: 1.25; }
+.stream-radar-countdown {
+  font-variant-numeric: tabular-nums;
+  font-size: 1.55rem;
+  font-weight: 900;
+  letter-spacing: .02em;
+  color: var(--accent);
+}
+.stream-radar.ist-live .stream-radar-countdown { color: #ff5c72; }
+.stream-radar-sub { font-size: .74rem; color: var(--text-muted); }
+/* .btn setzt selbst "display", das schlägt bei gleicher Spezifität die
+   eingebaute [hidden]-Regel des Browsers (identisches Muster wie bei
+   .jahres-event-card weiter oben) — deshalb hier explizit. */
+.stream-radar-watch-btn[hidden] { display: none; }
+.stream-radar-watch-btn { margin-top: 1.1rem; }
+.stream-radar-hinweis { margin-top: 1rem; opacity: .8; }