Startseite: Red-Ralf-Mode-Teaser + Hero-Chip-Farben im Red Mode nachgeruestet

- Teaser-Karte mit Logo, FSK-18-Hinweis und 'Jetzt eintauchen'-Button
- Klick aktiviert den Red Ralf Mode und oeffnet die Karten-Welt
- Fehlende Gradient-Umleitungen (orange/indigo/teal) ergaenzt

app/src/App.tsx

@@ -17,7 +17,7 @@ export default function App() {
   return (
     <div className="mx-auto min-h-dvh max-w-md pb-24">
       <main key={tab} className="rein">
-        {tab === 'start' && <Home onSpielStart={() => setTab('spiel')} onRegeln={() => setTab('regeln')} />}
+        {tab === 'start' && <Home onSpielStart={() => setTab('spiel')} onRegeln={() => setTab('regeln')} onRedRalf={() => setTab('karten')} />}
         {tab === 'regeln' && <Rules />}
         {tab === 'karten' && <Cards />}
         {tab === 'spiel' && <Game />}

app/src/index.css

@@ -227,6 +227,10 @@ 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; }
+body.red-mode .to-teal-500 { --tw-gradient-to: #854d0e; }
+body.red-mode .from-orange-400 { --tw-gradient-from: #b45309; }
+body.red-mode .to-amber-500 { --tw-gradient-to: #78350f; }
+body.red-mode .from-indigo-400 { --tw-gradient-from: #9f1239; }
 
 /* Kategorie-Chips und Ringe in die Gold-Welt ziehen */
 body.red-mode .text-sky-300 { color: #fde68a; }

app/src/pages/Home.tsx

@@ -42,9 +42,16 @@ const FEATURES = [
 interface Props {
   onSpielStart: () => void
   onRegeln: () => void
+  onRedRalf: () => void
+}
+
+export default function Home({ onSpielStart, onRegeln, onRedRalf }: Props) {
+  const redRalfAktivieren = () => {
+    // Schluessel muss zum REDMODE_KEY in Cards.tsx passen
+    localStorage.setItem('einsbisacht-redmode', '1')
+    onRedRalf()
   }
 
-export default function Home({ onSpielStart, onRegeln }: Props) {
   return (
     <div className="px-5 pt-10">
       {/* Hero */}
@@ -91,6 +98,32 @@ export default function Home({ onSpielStart, onRegeln }: Props) {
         </button>
       </div>
 
+      {/* Red Ralf Mode Teaser */}
+      <div className="mt-6 overflow-hidden rounded-3xl border border-red-500/30 bg-gradient-to-br from-[#2a0710] via-[#1c050c] to-[#12030a] p-5 shadow-[0_12px_40px_rgba(190,18,60,0.35)]">
+        <div className="flex items-center gap-4">
+          <img
+            src="/redmode-logo.png"
+            alt="Red Ralf Mode Logo"
+            className="w-20 shrink-0 rounded-full shadow-[0_0_24px_rgba(251,191,36,0.35)] ring-2 ring-amber-500/50"
+          />
+          <div className="flex-1">
+            <p className="text-[10px] font-extrabold uppercase tracking-[0.25em] text-amber-300/90">
+              FSK 18 · Zum Schmunzeln frech
+            </p>
+            <h3 className="font-display text-xl font-bold text-white">Red Ralf Mode</h3>
+            <p className="mt-1 text-[13px] leading-relaxed text-white/60">
+              10 extra freche Karten und das dunkelrote Kompass-Design – für mutige Runden.
+            </p>
+          </div>
+        </div>
+        <button
+          onClick={redRalfAktivieren}
+          className="mt-4 flex w-full items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-red-600 via-rose-700 to-red-900 py-3 font-display text-base font-semibold text-white shadow-[0_8px_24px_rgba(190,18,60,0.4)] transition-transform active:scale-[0.97]"
+        >
+          🔥 Jetzt eintauchen
+        </button>
+      </div>
+
       {/* Feature-Karten */}
       <div className="mt-10 space-y-3">
         {FEATURES.map(({ icon: Icon, titel, text, farbe }) => (