Zweite Live-Uhr fuer "spezielles Live-Event" + mehr Farbe im Radar

Nutzer-Wunsch 20.08.2026: "wuensch mir nur noch bissl farbe und sehr
wichtig ist dass ich auch spezielle live events da auch eintragen kann
in der verwaltungsseite so dass da eine zweite uhr erscheint wo die zeit
dann fuer dieses spezielle event laeuft."

- Neue Verwaltungs-Sektion "Spezielles Live-Event": Titel (Deutsch, wird
  automatisch uebersetzt), echtes Datum+Uhrzeit, optionaler Link, Aktiv-
  Schalter -- nur mit Titel + Zukunftsdatum aktivierbar.
- Zweite Uhr auf streamplan.html (Magenta/Violett statt Cyan/Gold, direkt
  neben der bestehenden), nur sichtbar wenn ein Event aktiviert ist und
  das Zieldatum noch nicht vorbei ist. Echter Countdown inkl. Tage (z.B.
  "2T 03:14:59"), "Jetzt"-Zeiger zeigt wie bei Uhr 1 die tatsaechliche
  Uhrzeit, der magentafarbene Fixpunkt markiert die Tageszeit des Events.
  Zieldatum wird als UTC gespeichert -- jede besuchende Person sieht den
  exakt richtigen Countdown in ihrer eigenen Zeitzone.
- "Bissl Farbe": bunter Farbverlauf (Cyan/Violett/Gold) auf dem aeusseren
  Ring statt reinem Grauton, kraeftigerer Sweep-Farbschein.
- Backend: neue routes/special-event.js (getSpecialEventPublic nur bei
  aktiv+zukuenftig, getSpecialEventAdmin fuer Entwuerfe, saveSpecialEvent
  mit Validierung), 13 automatisierte Tests gegen eine Fake-DB bestanden.
- Bugfix unterwegs gefunden (Playwright-Screenshot, wiederholtes Muster
  auf dieser Seite): .stream-radar-wrap blieb trotz [hidden]-Attribut
  sichtbar (display:block ueberschreibt die eingebaute [hidden]-Regel bei
  gleicher Spezifitaet) -- explizite Regel ergaenzt, per Playwright erneut
  verifiziert (display:none bestaetigt).

Backend-Teil (server-internal/) noch ohne Deploy-Zugriff -- Dogi muss ihn
manuell auf dogiintern ausrollen, sonst bleibt die zweite Uhr unsichtbar.

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

assets/css/main.css

@@ -3591,7 +3591,23 @@ body.start-seite .music-toggle:focus-visible {
    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; }
+/* Reihe für 1-2 Uhren nebeneinander (20.08.2026: zweite Uhr für ein
+   "spezielles Live-Event", siehe assets/js/streamplan.js) — bricht auf
+   schmalen Bildschirmen automatisch untereinander um. */
+.stream-radar-reihe {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 2.4rem;
+  margin-top: 1.4rem;
+}
+/* .stream-radar-wrap setzt selbst "display", das schlägt bei gleicher
+   Spezifität die eingebaute [hidden]-Regel des Browsers (identisches,
+   inzwischen mehrfach gefundenes Muster auf dieser Seite) — deshalb hier
+   explizit VOR der Klassenregel. */
+.stream-radar-wrap[hidden] { display: none; }
+.stream-radar-wrap { display: flex; flex-direction: column; align-items: center; margin: 0 auto; }
 .stream-radar {
   position: relative;
   width: min(300px, 70vw);
@@ -3603,15 +3619,28 @@ body.start-seite .music-toggle:focus-visible {
   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);
+    transparent 0deg, rgba(143, 217, 234, .28) 40deg, transparent 90deg,
+    transparent 200deg, rgba(232, 196, 101, .22) 250deg, transparent 300deg,
+    transparent 320deg, rgba(139, 92, 246, .24) 350deg, transparent 360deg);
   animation: stream-radar-rotate 16s linear infinite;
   pointer-events: none;
 }
+/* Farbvariante fürs spezielle Live-Event (Nutzer-Wunsch "bissl Farbe") —
+   Magenta/Violett/Gold statt Cyan/Violett/Gold, damit die zweite Uhr auch
+   auf den ersten Blick als "etwas Besonderes" erkennbar ist. */
+.stream-radar.event-spezial .stream-radar-sweep {
+  background: conic-gradient(from 0deg,
+    transparent 0deg, rgba(255, 92, 180, .26) 40deg, transparent 90deg,
+    transparent 200deg, rgba(232, 196, 101, .22) 250deg, transparent 300deg,
+    transparent 320deg, rgba(139, 92, 246, .28) 350deg, transparent 360deg);
+}
 @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; }
+/* Bunter Verlauf statt reinem Grau-Ton auf dem äußeren Ring (Nutzer-Wunsch
+   "bissl Farbe") — Farbverlauf steckt als <linearGradient> direkt im SVG
+   jeder Uhr (siehe streamplan.html), hier nur die Basiswerte/Deckkraft. */
+.radar-ring-outer { fill: none; stroke-width: 2; opacity: .8; }
 .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; }
@@ -3670,6 +3699,17 @@ body.start-seite .music-toggle:focus-visible {
 }
 .stream-radar.ist-live .stream-radar-countdown { color: #ff5c72; }
 .stream-radar-sub { font-size: .74rem; color: var(--text-muted); }
+/* Farbvariante fürs spezielle Live-Event: der Fixpunkt ist hier nicht der
+   tägliche 20-Uhr-Termin, sondern der eigene Zieltermin -- Magenta statt
+   Gold, damit man beide Uhren auf einen Blick unterscheidet. */
+.stream-radar.event-spezial .radar-fixmarker-dot {
+  fill: #ff5cb8;
+  filter: drop-shadow(0 0 6px rgba(255, 92, 184, .9)) drop-shadow(0 0 14px rgba(255, 92, 184, .5));
+}
+.stream-radar.event-spezial:not(.ist-live) .radar-now-hand,
+.stream-radar.event-spezial:not(.ist-live) .radar-now-dot { stroke: #c9a6ff; fill: #c9a6ff; filter: drop-shadow(0 0 5px rgba(201, 166, 255, .8)); }
+.stream-radar.event-spezial:not(.ist-live) .stream-radar-countdown { color: #ff5cb8; }
+.stream-radar-titel { font-size: .95rem; font-weight: 800; color: #ff9ed4; margin-bottom: .3rem; }
 /* .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. */