diff --git a/app/src/hooks/useRedMode.ts b/app/src/hooks/useRedMode.ts
index 9660bff..8193b3c 100644
--- a/app/src/hooks/useRedMode.ts
+++ b/app/src/hooks/useRedMode.ts
@@ -6,7 +6,7 @@ export function useRedMode(aktiv: boolean) {
     document.body.classList.toggle('red-mode', aktiv)
     const meta = document.querySelector('meta[name="theme-color"]')
     const vorher = meta?.getAttribute('content')
-    if (meta) meta.setAttribute('content', aktiv ? '#1f060b' : '#170a2e')
+    if (meta) meta.setAttribute('content', aktiv ? '#16040a' : '#170a2e')
 
     const icon = document.querySelector<HTMLLinkElement>('link[rel="icon"]')
     const iconOriginal = icon?.getAttribute('href') ?? ''
diff --git a/app/src/index.css b/app/src/index.css
index 8b66e30..432f5bf 100644
--- a/app/src/index.css
+++ b/app/src/index.css
@@ -136,28 +136,109 @@
   animation: glanzen 3.5s linear infinite;
 }
 
-/* ── Red Mode (FSK 18): rote Design-Welt ────────────────── */
+/* ── Red Ralf Mode (FSK 18): Kompass-Design – dunkles Rot + Gold ── */
 body.red-mode {
+  /* shadcn/CSS-Variablen auf die Rot-Gold-Welt umstellen */
+  --background: 345 65% 6%;
+  --foreground: 36 45% 94%;
+  --card: 346 50% 11%;
+  --card-foreground: 36 45% 94%;
+  --popover: 346 50% 10%;
+  --popover-foreground: 36 45% 94%;
+  --primary: 350 80% 42%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 346 35% 16%;
+  --secondary-foreground: 36 45% 92%;
+  --muted: 346 30% 15%;
+  --muted-foreground: 30 15% 68%;
+  --accent: 40 90% 50%;
+  --accent-foreground: 28 60% 10%;
+  --destructive: 0 84% 55%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 30 35% 24%;
+  --input: 30 35% 24%;
+  --ring: 40 90% 55%;
+
   background-image:
-    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(239, 68, 68, 0.32), transparent),
-    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(244, 63, 94, 0.22), transparent),
-    radial-gradient(ellipse 60% 40% at 0% 100%, rgba(190, 18, 60, 0.2), transparent),
-    linear-gradient(180deg, #1f060b 0%, #2a0710 55%, #1a0409 100%);
+    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(220, 38, 38, 0.28), transparent),
+    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(245, 158, 11, 0.10), transparent),
+    radial-gradient(ellipse 70% 50% at 0% 100%, rgba(136, 19, 55, 0.28), transparent),
+    linear-gradient(180deg, #16040a 0%, #220710 55%, #120308 100%);
 }
+
+/* Goldener Glanz für Überschriften und der Code */
 body.red-mode .text-gradient {
-  background-image: linear-gradient(to right, #f87171, #fb7185, #f472b6);
-}
-body.red-mode nav.fixed {
-  background-color: rgb(38 8 14 / 0.88);
-  border-color: rgba(248, 113, 113, 0.18);
-}
-body.red-mode .glanz {
-  background-image: linear-gradient(90deg, #ef4444, #e11d48, #be123c, #e11d48, #ef4444) !important;
+  background-image: linear-gradient(to right, #fde68a, #fbbf24, #d97706);
 }
+
+/* Glass-Karten: dunkles Rot mit Gold-Saum */
 body.red-mode .glass-card {
-  border-color: rgba(248, 113, 113, 0.14);
+  background: rgba(48, 10, 18, 0.55);
+  border-color: rgba(251, 191, 36, 0.16);
 }
 
+/* Bottom Navigation: Maroon mit Gold-Akzent */
+body.red-mode nav.fixed {
+  background-color: rgb(30 6 12 / 0.9);
+  border-color: rgba(251, 191, 36, 0.15);
+}
+body.red-mode .text-pink-400 { color: #fbbf24; }
+body.red-mode .bg-pink-400\/15 { background-color: rgba(251, 191, 36, 0.14); }
+body.red-mode [class*="244,114,182"] { box-shadow: 0 0 16px rgba(251, 191, 36, 0.3) !important; }
+
+/* Schimmernde CTA-Flächen: dunkelrot mit goldenem Streifen */
+body.red-mode .glanz {
+  background-image: linear-gradient(90deg, #7f1d1d, #b91c1c, #d97706, #b91c1c, #7f1d1d) !important;
+}
+
+/* Violette/fuchsia Texte -> Gold-Creme */
+body.red-mode .text-violet-300 { color: #fcd34d; }
+body.red-mode .text-violet-200 { color: #fde68a; }
+body.red-mode .text-fuchsia-400 { color: #fbbf24; }
+body.red-mode .bg-violet-400\/10 { background-color: rgba(251, 191, 36, 0.08); }
+body.red-mode .bg-violet-400\/15 { background-color: rgba(251, 191, 36, 0.12); }
+body.red-mode .border-violet-400\/25 { border-color: rgba(251, 191, 36, 0.2); }
+body.red-mode .border-violet-400\/30 { border-color: rgba(251, 191, 36, 0.25); }
+
+/* Glow-Schatten der CTA-Buttons -> warmes Rot */
+body.red-mode [class*="217,70,239"] { box-shadow: 0 10px 30px rgba(190, 18, 60, 0.45) !important; }
+body.red-mode [class*="139,92,246"] { box-shadow: 0 10px 30px rgba(136, 19, 55, 0.5) !important; }
+
+/* Gradient-Umleitung: Pink/Violett-Welt -> Rot, Blau -> Gold, Kartenrueckseite */
+body.red-mode .from-pink-500 { --tw-gradient-from: #dc2626; }
+body.red-mode .to-rose-500 { --tw-gradient-to: #991b1b; }
+body.red-mode .to-rose-600 { --tw-gradient-to: #7f1d1d; }
+body.red-mode .from-pink-400 { --tw-gradient-from: #fb7185; }
+body.red-mode .to-pink-600 { --tw-gradient-to: #881337; }
+body.red-mode .from-violet-500 { --tw-gradient-from: #be123c; }
+body.red-mode .from-violet-400 { --tw-gradient-from: #f43f5e; }
+body.red-mode .to-violet-500 { --tw-gradient-to: #881337; }
+body.red-mode .to-purple-600 { --tw-gradient-to: #4c0519; }
+body.red-mode .from-fuchsia-400 { --tw-gradient-from: #e11d48; }
+body.red-mode .to-fuchsia-500 { --tw-gradient-to: #9f1239; }
+body.red-mode .to-fuchsia-600 { --tw-gradient-to: #881337; }
+body.red-mode .from-sky-500 { --tw-gradient-from: #f59e0b; }
+body.red-mode .from-sky-400 { --tw-gradient-from: #fbbf24; }
+body.red-mode .to-blue-600 { --tw-gradient-to: #78350f; }
+body.red-mode .to-blue-500 { --tw-gradient-to: #92400e; }
+body.red-mode .from-yellow-300 { --tw-gradient-from: #fde68a; }
+body.red-mode .to-amber-400 { --tw-gradient-to: #f59e0b; }
+body.red-mode .from-\[\#2a1550\] { --tw-gradient-from: #3d0a16; }
+body.red-mode .to-\[\#1b0f38\] { --tw-gradient-to: #20050d; }
+body.red-mode .from-emerald-400 { --tw-gradient-from: #ca8a04; }
+body.red-mode .to-teal-600 { --tw-gradient-to: #713f12; }
+
+/* Kategorie-Chips und Ringe in die Gold-Welt ziehen */
+body.red-mode .text-sky-300 { color: #fde68a; }
+body.red-mode .text-emerald-300 { color: #fcd34d; }
+body.red-mode .bg-sky-400\/15 { background-color: rgba(251, 191, 36, 0.12); }
+body.red-mode .bg-emerald-400\/15 { background-color: rgba(202, 138, 4, 0.14); }
+body.red-mode .border-sky-400\/30 { border-color: rgba(251, 191, 36, 0.25); }
+body.red-mode .border-emerald-400\/30 { border-color: rgba(202, 138, 4, 0.28); }
+body.red-mode .ring-sky-400\/40 { --tw-ring-color: rgb(251 191 36 / 0.4); }
+body.red-mode .ring-violet-400\/40 { --tw-ring-color: rgb(245 158 11 / 0.4); }
+body.red-mode .ring-emerald-400\/40 { --tw-ring-color: rgb(217 119 6 / 0.4); }
+
 /* Zahlen-Chips der Hero-Sektion */
 .zahlen-chip {
   @apply flex h-9 w-9 items-center justify-center rounded-xl font-display text-lg font-semibold shadow-lg;