feat(v5): Kino-Mix-Design durchs ganze Fenster (Commander-Entscheid)

Der auf dem Design-Canvas gewählte Mix aus Kinosaal und Schaltpult,
durchgängig über Übersicht, Einstellungen, Bibliothek, Erst-Einrichtung
und Dialoge: warmes Bühnen-Schwarz mit Saallicht und Filmkorn, Gold als
Akzent, Poster mit Goldkante, Plakat-Titel (Bricolage Grotesque) — dazu
die Schaltpult-Präzision: REC-Glühen bei laufendem Rip, Info-Kacheln
(Medium/Größe/Erkennung/Preset inkl. der echten Preset-Kette),
20-Segment-Aussteuerungsanzeige mit großer Mono-Prozentzahl,
Mono-Protokoll, LED-Systemleiste statt Status-Kacheln (Systemfehler
werden zur roten Karte, R4). Schriften gebündelt via fontsource
(OFL, bau/lizenzen) — zur Laufzeit lädt Rippy nichts aus dem Netz.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

rippy-windows/src/fenster/haupt.tsx

@@ -1,6 +1,15 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App'
+// Die drei Schriften des Kino-Mixes reisen im Paket mit (OFL-lizenziert,
+// bau/lizenzen) — Rippy lädt zur Laufzeit NICHTS aus dem Netz.
+import '@fontsource-variable/bricolage-grotesque'
+import '@fontsource/instrument-sans/400.css'
+import '@fontsource/instrument-sans/500.css'
+import '@fontsource/instrument-sans/600.css'
+import '@fontsource/jetbrains-mono/400.css'
+import '@fontsource/jetbrains-mono/500.css'
+import '@fontsource/jetbrains-mono/700.css'
 import './stil.css'
 
 createRoot(document.getElementById('wurzel')!).render(

rippy-windows/src/fenster/stil.css

@@ -1,7 +1,66 @@
 @import 'tailwindcss';
 
-/* Grundstimmung wie das heutige Rippy: dunkel, ruhig. Mehr Gestaltung
-   kommt mit der echten Oberfläche in Etappe W-5. */
+/* Der Kinosaal+Schaltpult-Mix (Design-Entscheid des Commanders, 31.08.2026):
+   warmes Schwarz mit Saallicht und Korn, Gold als Akzent, dazu die
+   Geräte-Präzision — Segmente, Mono-Caps, LED-Punkte. Die Tokens hier sind
+   die EINE Quelle der Farbwelt; alles Weitere sind Tailwind-Klassen. */
+@theme {
+  --font-display: 'Bricolage Grotesque Variable', Georgia, serif;
+  --font-sans: 'Instrument Sans', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', Consolas, monospace;
+
+  /* Bühne und Panels — warm abgetönte Schwarztöne, nie kaltes Grau. */
+  --color-buehne: oklch(0.13 0.012 60);
+  --color-karte: oklch(0.17 0.015 60);
+  --color-samt: oklch(0.16 0.015 60);
+
+  /* Premierengold, in drei Stufen für Verläufe und Ränder. */
+  --color-gold-hell: oklch(0.88 0.09 80);
+  --color-gold: oklch(0.83 0.11 75);
+  --color-gold-tief: oklch(0.74 0.13 60);
+
+  /* Die Aufnahme-LED aus dem Schaltpult. */
+  --color-rec: oklch(0.72 0.17 45);
+
+  /* Schriftstufen — warmes Weiß bis Nebel. */
+  --color-schnee: oklch(0.93 0.01 80);
+  --color-dunst: oklch(0.68 0.015 80);
+  --color-nebel: oklch(0.55 0.015 80);
+
+  /* Zustandsfarben, alle in der warmen Familie. */
+  --color-gruen: oklch(0.78 0.13 150);
+  --color-warn: oklch(0.8 0.12 85);
+  --color-rot: oklch(0.68 0.19 25);
+}
+
 :root {
   color-scheme: dark;
 }
+
+/* Das Saallicht: zwei warme Glühherde und ein Grundschimmer — liegt als
+   festes Bühnenbild hinter allem. */
+.buehnenlicht {
+  background:
+    radial-gradient(900px 520px at 78% 0%, oklch(0.28 0.07 45 / 0.5), transparent 70%),
+    radial-gradient(1100px 700px at 0% 100%, oklch(0.24 0.09 25 / 0.55), transparent 65%),
+    radial-gradient(700px 400px at 45% 45%, oklch(0.2 0.04 60 / 0.45), transparent 70%);
+}
+
+/* Filmkorn — ein feines Turbulenz-Muster, hauchdünn über die Bühne gelegt. */
+.filmkorn {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
+  opacity: 0.05;
+  mix-blend-mode: overlay;
+}
+
+/* Volle Segmente der Aussteuerungsanzeige glühen golden. */
+.segment-gluehen {
+  background: linear-gradient(180deg, var(--color-gold-hell), var(--color-gold-tief));
+  box-shadow: 0 0 8px oklch(0.8 0.12 70 / 0.45);
+}
+
+/* Dezente Scrollbalken — helle Standardbalken zerschneiden die Bühne. */
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-thumb { background: oklch(1 0 0 / 0.12); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
+::-webkit-scrollbar-thumb:hover { background-color: oklch(1 0 0 / 0.2); }
+::-webkit-scrollbar-track { background: transparent; }

rippy-windows/src/haupt/fenster.ts

@@ -14,8 +14,9 @@ export function fensterErstellen(): BrowserWindow {
     show: true,
     autoHideMenuBar: true,
     // Dunkler Grund SOFORT — sonst blitzt beim Start ein weißes Rechteck,
-    // bevor React lädt.
-    backgroundColor: '#0b1220',
+    // bevor React lädt. Das warme Bühnen-Schwarz des Kino-Mixes
+    // (oklch(0.13 0.012 60), siehe fenster/stil.css).
+    backgroundColor: '#171412',
     title: 'Rippy',
     webPreferences: {
       preload: join(__dirname, '../bruecke/index.js'),