Red Mode: 10 FSK-18-Karten (Rotlicht), Host-Schalter im Raum, rotes Design

app/src/pages/Cards.tsx

@@ -1,6 +1,9 @@
 import { useMemo, useState } from 'react'
-import { RefreshCw, Shuffle } from 'lucide-react'
-import { KARTEN, KATEGORIEN, kategorieById, type KategorieId, type Spielkarte } from '@/data/game'
+import { Flame, RefreshCw, Shuffle } from 'lucide-react'
+import { KARTEN, KATEGORIEN, KARTEN_OHNE_ROT, kategorieById, type KategorieId, type Spielkarte } from '@/data/game'
+import { useRedMode } from '@/hooks/useRedMode'
+
+const REDMODE_KEY = 'einsbisacht-redmode'
 
 type Filter = 'alle' | KategorieId
 
@@ -47,10 +50,24 @@ 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')
+  useRedMode(redMode)
+
+  const toggleRedMode = () => {
+    setRedMode((alt) => {
+      localStorage.setItem(REDMODE_KEY, alt ? '0' : '1')
+      return !alt
+    })
+  }
 
   const stapel = useMemo(
-    () => (filter === 'alle' ? KARTEN : KARTEN.filter((k) => k.kategorie === filter)),
-    [filter]
+    () =>
+      filter === 'alle'
+        ? redMode
+          ? KARTEN
+          : KARTEN_OHNE_ROT
+        : KARTEN.filter((k) => k.kategorie === filter),
+    [filter, redMode]
   )
 
   const ziehen = () => {
@@ -71,15 +88,48 @@ export default function Cards() {
         Runde haben soll! 🎨
       </p>
 
+      {/* Red Mode Toggle */}
+      <button
+        onClick={toggleRedMode}
+        className={`mt-4 flex w-full items-center justify-between rounded-2xl border p-3.5 transition-all active:scale-[0.98] ${
+          redMode
+            ? 'border-red-400/50 bg-red-500/10 shadow-[0_0_20px_rgba(239,68,68,0.25)]'
+            : 'border-white/10 bg-white/[0.05]'
+        }`}
+      >
+        <span className="flex items-center gap-2.5">
+          <Flame size={19} className={redMode ? 'text-red-400' : 'text-white/40'} />
+          <span className="text-left">
+            <span className={`block text-sm font-bold ${redMode ? 'text-red-300' : 'text-white/75'}`}>
+              🔞 Red Mode <span className="font-extrabold">(FSK 18)</span>
+            </span>
+            <span className="block text-xs text-white/45">
+              {redMode ? 'Aktiviert – 10 extra freche Karten im Stapel' : 'Schaltet 10 freche Karten frei'}
+            </span>
+          </span>
+        </span>
+        <span
+          className={`relative h-7 w-12 shrink-0 rounded-full transition-colors ${
+            redMode ? 'bg-gradient-to-r from-red-500 to-rose-600' : 'bg-white/15'
+          }`}
+        >
+          <span
+            className={`absolute top-1 h-5 w-5 rounded-full bg-white shadow transition-all ${
+              redMode ? 'left-6' : 'left-1'
+            }`}
+          />
+        </span>
+      </button>
+
       {/* Kategorie-Filter */}
-      <div className="scrollbar-none -mx-5 mt-5 flex gap-2 overflow-x-auto px-5 pb-1">
+      <div className="scrollbar-none -mx-5 mt-4 flex gap-2 overflow-x-auto px-5 pb-1">
         <FilterChip aktiv={filter === 'alle'} onClick={() => setFilter('alle')} label="✨ Alle" />
-        {KATEGORIEN.map((k) => (
+        {KATEGORIEN.filter((k) => k.id !== 'rotlicht' || redMode).map((k) => (
           <FilterChip
             key={k.id}
             aktiv={filter === k.id}
             onClick={() => setFilter(k.id)}
-            label={`${k.emoji} ${k.titel.split(' ')[0]}`}
+            label={k.id === 'rotlicht' ? `🌶️ Rotlicht` : `${k.emoji} ${k.titel.split(' ')[0]}`}
             chipKlasse={k.chip}
           />
         ))}