Red Mode: Nacht-Navigator-Logo mit 'RED RALF MODE'-Bogen

- Logo generiert: unterer Textbogen ersetzt, Goldringe rekonstruiert
- Logo in Karten-Seite + Spielraum-Lobby eingebunden
- Favicon-Swap bei aktivem Red Mode
- ?tab= URL-Param fuer Tab-Auswahl (Screenshots/Deep-Links)

app/src/App.tsx

@@ -6,8 +6,13 @@ import Cards from './pages/Cards'
 import Game from './pages/Game'
 import Contact from './pages/Contact'
 
+const TABS: TabId[] = ['start', 'regeln', 'karten', 'spiel', 'kontakt']
+
 export default function App() {
-  const [tab, setTab] = useState<TabId>('start')
+  const [tab, setTab] = useState<TabId>(() => {
+    const p = new URLSearchParams(window.location.search).get('tab')
+    return TABS.includes(p as TabId) ? (p as TabId) : 'start'
+  })
 
   return (
     <div className="mx-auto min-h-dvh max-w-md pb-24">

app/src/hooks/useRedMode.ts

@@ -1,15 +1,21 @@
 import { useEffect } from 'react'
 
-/** Hängt die Design-Klasse red-mode an <body> und passt theme-color an. */
+/** Hängt die Design-Klasse red-mode an <body>, passt theme-color und Favicon an. */
 export function useRedMode(aktiv: boolean) {
   useEffect(() => {
     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')
+
+    const icon = document.querySelector<HTMLLinkElement>('link[rel="icon"]')
+    const iconOriginal = icon?.getAttribute('href') ?? ''
+    if (icon) icon.href = aktiv ? '/redmode-logo.png' : iconOriginal
+
     return () => {
       document.body.classList.remove('red-mode')
       if (meta && vorher) meta.setAttribute('content', vorher)
+      if (icon && iconOriginal) icon.href = iconOriginal
     }
   }, [aktiv])
 }

app/src/pages/Cards.tsx

@@ -50,7 +50,11 @@ export default function Cards() {
   const [filter, setFilter] = useState<Filter>('alle')
   const [gezogen, setGezogen] = useState<Spielkarte | null>(null)
   const [zaehler, setZaehler] = useState(0) // triggert Re-Flip-Animation
-  const [redMode, setRedMode] = useState(() => localStorage.getItem(REDMODE_KEY) === '1')
+  const [redMode, setRedMode] = useState(
+    () =>
+      localStorage.getItem(REDMODE_KEY) === '1' ||
+      new URLSearchParams(window.location.search).get('redmode') === '1'
+  )
   useRedMode(redMode)
 
   const toggleRedMode = () => {
@@ -79,6 +83,13 @@ export default function Cards() {
 
   return (
     <div className="px-5 pt-8">
+      {redMode && (
+        <img
+          src="/redmode-logo.png"
+          alt="Red Ralf Mode Logo"
+          className="mx-auto mb-4 w-32 rounded-full shadow-[0_0_36px_rgba(239,68,68,0.4)] ring-2 ring-red-500/40"
+        />
+      )}
       <p className="mb-1 text-xs font-extrabold uppercase tracking-[0.25em] text-violet-300">
         20 Statements · 5 Kategorien
       </p>

app/src/pages/Game.tsx

@@ -286,6 +286,13 @@ function Lobby({
 
   return (
     <div className="space-y-4">
+      {z.redMode && (
+        <img
+          src="/redmode-logo.png"
+          alt="Red Ralf Mode Logo"
+          className="mx-auto w-28 rounded-full shadow-[0_0_36px_rgba(239,68,68,0.4)] ring-2 ring-red-500/40"
+        />
+      )}
       <div className="glass-card p-5 text-center">
         <p className="text-xs font-extrabold uppercase tracking-[0.25em] text-violet-300">Spielraum-Code</p>
         <p className="mt-1 font-display text-5xl font-bold tracking-[0.25em] text-gradient">{z.code}</p>