feat(ui): vierte Farbwelt "Cyberpunk" in hell und dunkel

Neon in der Nacht: fast schwarze Flaechen mit blauem Stich, violettes
Leuchten, Blaustahl statt Neutralgrau und Kanten von 2 px - scharf genug
fuer HUD-Elemente, aber nicht eckig, das ist schon Pixel Art. Schatten
sind hier kein Schatten, sondern ein Schein: farbige Kontur plus weicher
Halo in der Markenfarbe. Schrift ist Chakra Petch, die Feldbeschriftungen
laufen gesperrt.

Der Akzent ist bewusst Violett und nicht Neon-Cyan: auf brand-500 und
brand-600 steht 69 Mal weisse Schrift, und auf Cyan waere die nicht zu
lesen. Cyan sitzt deshalb nur in --color-brand-accent und in den
Statusfarben, wo dunkler Text darauf steht.

Der helle Modus ist der Konzern bei Tageslicht: kuehles Blaugrau, dasselbe
Violett nur dunkler, und aus dem Leuchten wird ein knapper kalter Schatten -
ein Halo auf hellem Grund sieht nach Fehler aus, nicht nach Neon.

Es waren vier Zeilen ausserhalb von index.css: die Whitelist in
userFields.js, die Liste in src/types.ts mit ihrer Beschriftung, die
Whitelist im Inline-Skript und die Schrift im Google-Fonts-Aufruf. Keine
Komponente wurde angefasst.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/index.css

@@ -10,9 +10,9 @@
  */
 
 /*
- * Drei Farbwelten, jede in hell und dunkel. Sie haengen an einer Klasse am
- * <html> (theme-pixel, theme-outdoor); ohne Klasse gilt perinco. Der Modus
- * bleibt die vorhandene Klasse "dark".
+ * Vier Farbwelten, jede in hell und dunkel. Sie haengen an einer Klasse am
+ * <html> (theme-pixel, theme-outdoor, theme-cyberpunk); ohne Klasse gilt
+ * perinco. Der Modus bleibt die vorhandene Klasse "dark".
  *
  * Warum das ohne Aenderung an den Komponenten geht: im Markup steht nirgends
  * eine feste Farbe, sondern durchgaengig ink-*, brand-*, canvas und surface -
@@ -36,10 +36,10 @@
   --font-sans: 'Avenir Next', 'Avenir', 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
 
   /*
-   * Zweite Schrift fuer Ueberschriften und Feldbeschriftungen. Bei perinco und
-   * Outdoor ist sie mit der Grundschrift identisch, nur "Pixel Art" setzt hier
-   * eine Pixelschrift ein - ohne dass ein Theme dafuer eigene Selektoren
-   * braucht.
+   * Zweite Schrift fuer Ueberschriften und Feldbeschriftungen. Meist ist sie mit
+   * der Grundschrift identisch; nur "Pixel Art" setzt hier eine andere ein - die
+   * Pixelschrift bleibt damit aus dem Fliesstext heraus, ohne dass es dafuer
+   * eigene Selektoren braucht.
    */
   --font-display: 'Avenir Next', 'Avenir', 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
 
@@ -358,6 +358,127 @@ html.theme-pixel.dark {
   --font-display: 'Silkscreen', 'Courier New', ui-monospace, monospace;
 }
 
+/* ===========================================================================
+ * Cyberpunk
+ *
+ * Neon in der Nacht: fast schwarze Flaechen mit blauem Stich, violettes
+ * Leuchten, Kanten so scharf, dass die Karten wie HUD-Elemente wirken (2 px
+ * statt 12 px Radius - nicht ganz eckig, das ist schon Pixel Art).
+ *
+ * Der Akzent ist bewusst Violett und nicht Neon-Cyan: auf brand-500 und
+ * brand-600 steht 69 Mal weisse Schrift, und auf Cyan waere die nicht zu lesen.
+ * Cyan sitzt deshalb nur in --color-brand-accent und in den Statusfarben, wo
+ * dunkler Text drauf steht.
+ *
+ * Schatten sind hier kein Schatten, sondern ein Schein: eine farbige Kontur
+ * plus weicher Halo in der Markenfarbe.
+ * =========================================================================== */
+html.theme-cyberpunk.dark {
+  --color-canvas: #07080f;
+  --color-surface: #0f1120;
+
+  --color-brand-50: #1a0e2e;
+  --color-brand-100: #24123f;
+  --color-brand-200: #4a1f7a;
+  --color-brand-300: #5f27a0;
+  --color-brand-400: #7a30cc;
+  --color-brand-500: #8b31f0;
+  --color-brand-600: #a24cff;
+  --color-brand-700: #c79bff;
+  --color-brand-800: #ddc4ff;
+  --color-brand-900: #efe3ff;
+  --color-brand-accent: #00e5ff;
+
+  /* Blaustahl statt Neutralgrau - Grau waere hier zu brav. */
+  --color-ink-50: #141728;
+  --color-ink-100: #1c2135;
+  --color-ink-200: #2b4560;
+  --color-ink-300: #6b7899;
+  --color-ink-400: #8e9bbd;
+  --color-ink-500: #a9b5d4;
+  --color-ink-600: #c1cbe4;
+  --color-ink-700: #d6ddf0;
+  --color-ink-800: #e9eefa;
+  --color-ink-900: #f7f9ff;
+  --color-ink-950: #000000;
+
+  --radius-sm: 0.125rem;
+  --radius-md: 0.125rem;
+  --radius-lg: 0.1875rem;
+  --radius-xl: 0.25rem;
+  --radius-2xl: 0.375rem;
+
+  --shadow-card: 0 0 0 1px rgb(139 49 240 / 0.16), 0 0 22px rgb(139 49 240 / 0.2);
+  --shadow-lift: 0 0 0 1px rgb(139 49 240 / 0.3), 0 0 40px rgb(139 49 240 / 0.35);
+
+  --font-sans: 'Chakra Petch', 'Avenir Next', 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
+  --font-display: 'Chakra Petch', 'Avenir Next', 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
+
+  /* Die getoenten Pillen aus .dark ins Neon gezogen. */
+  --color-sky-50: #04202e;
+  --color-sky-200: #0b4a63;
+  --color-sky-700: #22d3ee;
+
+  --color-amber-50: #2b1f04;
+  --color-amber-200: #57400a;
+  --color-amber-700: #ffcc4d;
+
+  --color-violet-50: #1d1140;
+  --color-violet-200: #382068;
+  --color-violet-700: #d0a2ff;
+
+  --color-red-50: #2c0e1c;
+  --color-red-200: #5c1c34;
+  --color-red-700: #ff6b8a;
+}
+
+/*
+ * Cyberpunk, hell: Konzern bei Tageslicht. Kuehles Blaugrau statt warmem
+ * Weiss, dasselbe Violett - nur dunkler, damit weisse Schrift darauf haelt.
+ * Die scharfen Kanten bleiben, das Leuchten wird zu einem knappen kalten
+ * Schatten: ein Halo auf hellem Grund sieht nach Fehler aus, nicht nach Neon.
+ */
+html.theme-cyberpunk:not(.dark) {
+  --color-canvas: #eceff7;
+  --color-surface: #ffffff;
+
+  --color-brand-50: #f3ecff;
+  --color-brand-100: #e6d9ff;
+  --color-brand-200: #c9adff;
+  --color-brand-300: #a97bff;
+  --color-brand-400: #8d4df0;
+  --color-brand-500: #7326d6;
+  --color-brand-600: #5d1cb0;
+  --color-brand-700: #4a1590;
+  --color-brand-800: #380f6e;
+  --color-brand-900: #290a52;
+  --color-brand-accent: #7326d6;
+
+  --color-ink-50: #f2f4fb;
+  --color-ink-100: #e4e8f4;
+  --color-ink-200: #c3cbe0;
+  --color-ink-300: #98a2bd;
+  --color-ink-400: #5d6786;
+  --color-ink-500: #4a5473;
+  --color-ink-600: #3a4260;
+  --color-ink-700: #2c334d;
+  --color-ink-800: #1e2438;
+  --color-ink-900: #121728;
+  --color-ink-950: #0a0d18;
+
+  --radius-sm: 0.125rem;
+  --radius-md: 0.125rem;
+  --radius-lg: 0.1875rem;
+  --radius-xl: 0.25rem;
+  --radius-2xl: 0.375rem;
+
+  --shadow-card: 0 1px 2px rgb(18 23 40 / 0.06), 0 6px 18px rgb(115 38 214 / 0.1);
+  --shadow-lift: 0 12px 30px rgb(115 38 214 / 0.18);
+
+  --font-sans: 'Chakra Petch', 'Avenir Next', 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
+  --font-display: 'Chakra Petch', 'Avenir Next', 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
+}
+
 @layer base {
   html,
   body {
@@ -414,6 +535,23 @@ html.theme-pixel.dark {
     font-smooth: never;
   }
 
+  /*
+   * Cyberpunk laesst die Ueberschriften atmen: die negative Laufweite zieht
+   * Chakra Petch unangenehm zusammen, gesperrt liest es sich nach Anzeigetafel.
+   */
+  html.theme-cyberpunk h1,
+  html.theme-cyberpunk h2,
+  html.theme-cyberpunk h3,
+  html.theme-cyberpunk h4,
+  html.theme-cyberpunk h5,
+  html.theme-cyberpunk h6 {
+    letter-spacing: 0.015em;
+  }
+
+  html.theme-cyberpunk .field-label {
+    letter-spacing: 0.12em;
+  }
+
   /* Fokus-Ring durchgaengig in CI-Gruen */
   :focus-visible {
     outline: 2px solid var(--color-brand-500);