feat: Radio themes + globe rotation pause on interaction

- 5 themes: Sunset (default), Midnight, Forest, Ocean, Cherry
- Theme selector dots in top-right corner, persisted to localStorage
- Globe accent colors (points, atmosphere) update with theme
- Globe pauses auto-rotation for 5s on any interaction (click, drag, scroll)
- All radio CSS vars scoped to .radio-container[data-theme]

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/src/styles.css

@@ -359,6 +359,60 @@ html, body {
   height: 100%;
   overflow: hidden;
   background: var(--bg-deep);
+
+  /* Default-Theme Vars (scoped, damit data-theme sie überschreiben kann) */
+  --bg-deep: #1a1b1e;
+  --bg-primary: #1e1f22;
+  --bg-secondary: #2b2d31;
+  --bg-tertiary: #313338;
+  --text-normal: #dbdee1;
+  --text-muted: #949ba4;
+  --text-faint: #6d6f78;
+  --accent: #e67e22;
+  --accent-rgb: 230, 126, 34;
+  --accent-hover: #d35400;
+  --border: rgba(255, 255, 255, 0.06);
+}
+
+/* ── Radio Themes ── */
+.radio-container[data-theme="purple"] {
+  --bg-deep: #13111c;
+  --bg-primary: #1a1726;
+  --bg-secondary: #241f35;
+  --bg-tertiary: #2e2845;
+  --accent: #9b59b6;
+  --accent-rgb: 155, 89, 182;
+  --accent-hover: #8e44ad;
+}
+
+.radio-container[data-theme="forest"] {
+  --bg-deep: #0f1a14;
+  --bg-primary: #142119;
+  --bg-secondary: #1c2e22;
+  --bg-tertiary: #253a2c;
+  --accent: #2ecc71;
+  --accent-rgb: 46, 204, 113;
+  --accent-hover: #27ae60;
+}
+
+.radio-container[data-theme="ocean"] {
+  --bg-deep: #0a1628;
+  --bg-primary: #0f1e33;
+  --bg-secondary: #162a42;
+  --bg-tertiary: #1e3652;
+  --accent: #3498db;
+  --accent-rgb: 52, 152, 219;
+  --accent-hover: #2980b9;
+}
+
+.radio-container[data-theme="cherry"] {
+  --bg-deep: #1a0f14;
+  --bg-primary: #22141a;
+  --bg-secondary: #301c25;
+  --bg-tertiary: #3e2530;
+  --accent: #e74c6f;
+  --accent-rgb: 231, 76, 111;
+  --accent-hover: #c0392b;
 }
 
 /* ── Globe ── */
@@ -914,6 +968,40 @@ html, body {
   text-align: right;
 }
 
+/* ── Theme Selector ── */
+.radio-theme {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 25;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 10px;
+  border-radius: 20px;
+  background: rgba(30, 31, 34, 0.85);
+  backdrop-filter: blur(12px);
+  border: 1px solid var(--border);
+}
+
+.radio-theme-dot {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform 150ms ease, border-color 150ms ease;
+  border: 2px solid transparent;
+}
+
+.radio-theme-dot:hover {
+  transform: scale(1.25);
+}
+
+.radio-theme-dot.active {
+  border-color: #fff;
+  box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
+}
+
 /* ── Station count ── */
 .radio-counter {
   position: absolute;