diff --git a/README.md b/README.md
index db50a84..4735205 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,11 @@
 # 1 bis 8 Party – Mobile Web-App
 
 Das ultimative Gesellschaftsspiel über Selbsteinschätzung, Vorurteile und echte
-Offenbarungen – als mobile Web-App umgesetzt: offizielle Spielregeln, 20
+Offenbarungen – als mobile Multiplayer-Web-App: offizielle Spielregeln, 20
 Statement-Karten in 5 Kategorien und ein interaktiver Spielleiter für 3–8
-Spieler mit automatischer Mehrheits-Punkteberechnung.
+Spieler. **Jeder spielt und stimmt auf seinem eigenen Handy ab:** Ein Host
+eröffnet einen Spielraum und gibt den 4-stelligen Code weiter; sobald alle
+Spieler „Ready“ melden, startet das Spiel automatisch.
 
 **Live:** https://1bis.hocks.eu/ (Alias: https://1bis8.hocks.eu/)
 
@@ -13,8 +15,9 @@ Spieler mit automatischer Mehrheits-Punkteberechnung.
 |---|---|
 | `app/` | React + TypeScript + Vite + Tailwind (Quelle der Web-App) |
 | `app/src/data/game.ts` | Kategorien, 20 Statement-Karten, Regelwerk-Texte |
-| `app/src/lib/scoring.ts` | Punkteberechnung nach offiziellen Regeln |
-| `server/` | Docker-Stack für den VPS (Web + Postfix-Relay + Mail-API) |
+| `app/src/lib/api.ts` | Client für die Game-API (Räume, Ready, Rankings) |
+| `server/game/api/server.js` | Game-API: Spielräume, Auto-Start, Punkteberechnung |
+| `server/web/`, `server/mail/` | nginx-Web-Stack und Postfix-Relay + Mail-API |
 | `docs/` | Original-Spielregeln (PDF) |
 
 ## Entwicklung
diff --git a/app/src/lib/api.ts b/app/src/lib/api.ts
new file mode 100644
index 0000000..6100b50
--- /dev/null
+++ b/app/src/lib/api.ts
@@ -0,0 +1,114 @@
+// ── Client für die Game-API (Multiplayer-Spielräume) ──────
+
+export type RaumStatus = 'lobby' | 'question' | 'ranking' | 'reveal' | 'scoreboard' | 'finished'
+
+export interface SpielerInfo {
+  name: string
+  ready: boolean
+  istHost: boolean
+  rankingAbgegeben: boolean
+}
+
+export interface PlatzDetail {
+  platz: number
+  person: string
+  stimmen: number
+  punkte: number
+}
+
+export interface Ergebnis {
+  mehrheit: string[]
+  punkte: Record<string, number>
+  platzDetails: PlatzDetail[]
+}
+
+export interface RaumZustand {
+  code: string
+  status: RaumStatus
+  runde: number
+  anzahlRunden: number
+  frage: string
+  fragesteller: string
+  spieler: SpielerInfo[]
+  minSpieler: number
+  maxSpieler: number
+  alleReady: boolean
+  rankingsFertig: number
+  punkte: Record<string, number>
+  ergebnis: Ergebnis | null
+  ich: string
+}
+
+export interface RaumSession {
+  code: string
+  token: string
+  name: string
+}
+
+const SESSION_KEY = 'einsbisacht-raum-v1'
+
+export function ladeSession(): RaumSession | null {
+  try {
+    const roh = localStorage.getItem(SESSION_KEY)
+    return roh ? (JSON.parse(roh) as RaumSession) : null
+  } catch {
+    return null
+  }
+}
+
+export function speichereSession(s: RaumSession | null) {
+  if (s) localStorage.setItem(SESSION_KEY, JSON.stringify(s))
+  else localStorage.removeItem(SESSION_KEY)
+}
+
+class ApiFehler extends Error {}
+
+async function anfrage(methode: 'GET' | 'POST', pfad: string, body?: object, token?: string): Promise<RaumZustand> {
+  const res = await fetch(`/api/game/room${pfad}`, {
+    method: methode,
+    headers: {
+      'Content-Type': 'application/json',
+      ...(token ? { 'X-Player-Token': token } : {}),
+    },
+    ...(body ? { body: JSON.stringify(body) } : {}),
+  })
+  const daten = await res.json().catch(() => ({}))
+  if (!res.ok) throw new ApiFehler(daten.fehler || `Fehler ${res.status}`)
+  if (daten.zustand) return daten.zustand as RaumZustand
+  throw new ApiFehler('Unerwartete Antwort der Spiel-API')
+}
+
+/** Raum eröffnen; liefert Session direkt mit */
+export async function raumErstellen(name: string): Promise<{ session: RaumSession; zustand: RaumZustand }> {
+  const res = await fetch('/api/game/room', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name }),
+  })
+  const daten = await res.json().catch(() => ({}))
+  if (!res.ok || !daten.token) throw new ApiFehler(daten.fehler || 'Raum konnte nicht erstellt werden')
+  const session: RaumSession = { code: daten.code, token: daten.token, name }
+  speichereSession(session)
+  return { session, zustand: daten.zustand }
+}
+
+/** Raum beitreten; liefert Session direkt mit */
+export async function raumBeitreten(code: string, name: string): Promise<{ session: RaumSession; zustand: RaumZustand }> {
+  const res = await fetch(`/api/game/room/${code.toUpperCase()}/join`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name }),
+  })
+  const daten = await res.json().catch(() => ({}))
+  if (!res.ok || !daten.token) throw new ApiFehler(daten.fehler || 'Beitritt fehlgeschlagen')
+  const session: RaumSession = { code: code.toUpperCase(), token: daten.token, name }
+  speichereSession(session)
+  return { session, zustand: daten.zustand }
+}
+
+export const zustandLaden = (s: RaumSession) => anfrage('GET', `/${s.code}`, undefined, s.token)
+export const readySetzen = (s: RaumSession, ready: boolean) => anfrage('POST', `/${s.code}/ready`, { ready }, s.token)
+export const frageStellen = (s: RaumSession, frage: string) => anfrage('POST', `/${s.code}/question`, { frage }, s.token)
+export const rankingAbgeben = (s: RaumSession, reihenfolge: string[]) =>
+  anfrage('POST', `/${s.code}/ranking`, { reihenfolge }, s.token)
+export const naechstePhase = (s: RaumSession) => anfrage('POST', `/${s.code}/next`, {}, s.token)
diff --git a/app/src/pages/Game.tsx b/app/src/pages/Game.tsx
index 4d518d2..06ca687 100644
--- a/app/src/pages/Game.tsx
+++ b/app/src/pages/Game.tsx
@@ -1,422 +1,495 @@
-import { useEffect, useMemo, useState, type Dispatch, type SetStateAction } from 'react'
-import { ArrowRight, Eraser, Plus, RotateCcw, Trophy, Users, Check, EyeOff } from 'lucide-react'
-import { KARTEN, MIN_SPIELER, MAX_SPIELER } from '@/data/game'
-import { berechneRunde, type RundenErgebnis } from '@/lib/scoring'
-
-type Phase = 'setup' | 'frage' | 'ranking' | 'aufloesung' | 'punktestand' | 'ende'
-
-interface SpielState {
-  phase: Phase
-  spieler: string[]
-  runde: number
-  frage: string
-  rankings: Record<string, string[]>
-  punkte: Record<string, number>
-  ergebnis: RundenErgebnis | null
-}
-
-const LEER: SpielState = {
-  phase: 'setup',
-  spieler: [],
-  runde: 0,
-  frage: '',
-  rankings: {},
-  punkte: {},
-  ergebnis: null,
-}
-
-const STORAGE_KEY = 'einsbisacht-spielstand-v1'
-
-function ladeStand(): SpielState {
-  try {
-    const roh = localStorage.getItem(STORAGE_KEY)
-    return roh ? { ...LEER, ...JSON.parse(roh) } : LEER
-  } catch {
-    return LEER
-  }
-}
+import { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react'
+import {
+  Check,
+  Copy,
+  Crown,
+  DoorOpen,
+  Eraser,
+  EyeOff,
+  Gamepad2,
+  Loader2,
+  LogOut,
+  PartyPopper,
+  Share2,
+  Trophy,
+  Users,
+} from 'lucide-react'
+import { KARTEN } from '@/data/game'
+import {
+  ladeSession,
+  speichereSession,
+  raumErstellen,
+  raumBeitreten,
+  zustandLaden,
+  readySetzen,
+  frageStellen,
+  rankingAbgeben,
+  naechstePhase,
+  type RaumSession,
+  type RaumZustand,
+} from '@/lib/api'
 
+/* ── Seite ──────────────────────────────────────────────── */
 export default function Game() {
-  const [state, setState] = useState<SpielState>(ladeStand)
+  const [session, setSession] = useState<RaumSession | null>(ladeSession)
+  const [zustand, setZustand] = useState<RaumZustand | null>(null)
+  const [fehler, setFehler] = useState('')
 
+  const refresh = useCallback(async () => {
+    if (!session) return
+    try {
+      setZustand(await zustandLaden(session))
+      setFehler('')
+    } catch (e) {
+      // Raum existiert nicht mehr (abgelaufen) -> Session verwerfen
+      if (e instanceof Error && /nicht gefunden/.test(e.message)) {
+        speichereSession(null)
+        setSession(null)
+      } else {
+        setFehler(e instanceof Error ? e.message : 'Verbindungsfehler')
+      }
+    }
+  }, [session])
+
+  // Polling: alle 1,5 s synchronisieren (nur wenn Tab sichtbar)
   useEffect(() => {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(state))
-  }, [state])
+    if (!session) return
+    refresh()
+    const timer = setInterval(() => {
+      if (!document.hidden) refresh()
+    }, 1500)
+    return () => clearInterval(timer)
+  }, [session, refresh])
 
-  const fragesteller = state.spieler[state.runde % Math.max(1, state.spieler.length)]
-  const anzahlRunden = state.spieler.length
+  const beitreten = useCallback(async (code: string, name: string) => {
+    const { session: s } = await raumBeitreten(code, name)
+    setSession(s)
+  }, [])
 
-  const neuesSpiel = () => {
-    localStorage.removeItem(STORAGE_KEY)
-    setState(LEER)
-  }
+  const erstellen = useCallback(async (name: string) => {
+    const { session: s } = await raumErstellen(name)
+    setSession(s)
+  }, [])
+
+  const verlassen = useCallback(() => {
+    speichereSession(null)
+    setSession(null)
+    setZustand(null)
+  }, [])
+
+  const act = useCallback(
+    async (fn: (s: RaumSession) => Promise<RaumZustand>) => {
+      if (!session) return
+      try {
+        setZustand(await fn(session))
+        setFehler('')
+      } catch (e) {
+        setFehler(e instanceof Error ? e.message : 'Aktion fehlgeschlagen')
+      }
+    },
+    [session]
+  )
 
   return (
     <div className="px-5 pt-8">
       <div className="flex items-center justify-between">
         <div>
           <p className="mb-1 text-xs font-extrabold uppercase tracking-[0.25em] text-violet-300">
-            Interaktiver Spielleiter
+            Jeder auf seinem Handy
           </p>
           <h2 className="font-display text-3xl font-bold text-white">Das Spiel</h2>
         </div>
-        {state.phase !== 'setup' && (
+        {session && (
           <button
-            onClick={neuesSpiel}
+            onClick={verlassen}
             className="flex items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.06] px-3 py-1.5 text-xs font-bold text-white/60 transition-colors hover:text-white/90"
           >
-            <RotateCcw size={13} /> Neues Spiel
+            <LogOut size={13} /> Verlassen
           </button>
         )}
       </div>
 
-      {/* Runden-Fortschritt */}
-      {state.phase !== 'setup' && state.phase !== 'ende' && (
-        <div className="mt-4 flex items-center gap-2">
-          {state.spieler.map((_, i) => (
-            <div
-              key={i}
-              className={`h-1.5 flex-1 rounded-full ${
-                i < state.runde ? 'bg-emerald-400' : i === state.runde ? 'bg-pink-400' : 'bg-white/10'
-              }`}
-            />
-          ))}
-          <span className="text-[11px] font-bold text-white/50">
-            Runde {Math.min(state.runde + 1, anzahlRunden)}/{anzahlRunden}
-          </span>
+      {fehler && (
+        <div className="mt-4 rounded-2xl border border-rose-400/30 bg-rose-400/10 px-4 py-3 text-sm font-bold text-rose-300">
+          {fehler}
         </div>
       )}
 
       <div className="mt-5">
-        {state.phase === 'setup' && <SetupPhase state={state} setState={setState} />}
-        {state.phase === 'frage' && (
-          <FragePhase fragesteller={fragesteller} state={state} setState={setState} />
+        {!session && <Einstieg onErstellen={erstellen} onBeitreten={beitreten} />}
+        {session && !zustand && (
+          <div className="glass-card flex items-center justify-center gap-2 p-8 text-white/60">
+            <Loader2 className="animate-spin" size={18} /> Verbinde mit Spielraum …
+          </div>
         )}
-        {state.phase === 'ranking' && <RankingPhase state={state} setState={setState} />}
-        {state.phase === 'aufloesung' && <AufloesungPhase state={state} setState={setState} />}
-        {state.phase === 'punktestand' && (
-          <PunktestandPhase state={state} setState={setState} fragesteller={fragesteller} />
+        {session && zustand && (
+          <>
+            {zustand.status === 'lobby' && <Lobby z={zustand} onAct={act} />}
+            {zustand.status === 'question' && <FragePhase z={zustand} onAct={act} />}
+            {zustand.status === 'ranking' && <RankingPhase z={zustand} onAct={act} />}
+            {zustand.status === 'reveal' && <Reveal z={zustand} onAct={act} />}
+            {zustand.status === 'scoreboard' && <Scoreboard z={zustand} onAct={act} />}
+            {zustand.status === 'finished' && <Ende z={zustand} onVerlassen={verlassen} />}
+          </>
         )}
-        {state.phase === 'ende' && <EndePhase state={state} onNeuesSpiel={neuesSpiel} />}
       </div>
     </div>
   )
 }
 
-/* ── Phase 1: Setup ─────────────────────────────────────── */
-function SetupPhase({
-  state,
-  setState,
+/* ── Einstieg: Raum erstellen oder beitreten ────────────── */
+function Einstieg({
+  onErstellen,
+  onBeitreten,
 }: {
-  state: SpielState
-  setState: Dispatch<SetStateAction<SpielState>>
+  onErstellen: (name: string) => Promise<void>
+  onBeitreten: (code: string, name: string) => Promise<void>
 }) {
-  const [namen, setNamen] = useState<string[]>(state.spieler.length >= MIN_SPIELER ? state.spieler : ['', ''])
+  const [modus, setModus] = useState<'start' | 'beitreten'>('start')
+  const [name, setName] = useState('')
+  const [code, setCode] = useState(() => new URLSearchParams(window.location.search).get('raum') ?? '')
+  const [lade, setLade] = useState(false)
   const [fehler, setFehler] = useState('')
 
-  const gueltigeNamen = namen.map((n) => n.trim()).filter(Boolean)
-  const anzahlOk = gueltigeNamen.length >= MIN_SPIELER && gueltigeNamen.length <= MAX_SPIELER
-  const doppelt = new Set(gueltigeNamen).size !== gueltigeNamen.length
-
-  const starten = (startIndex: number) => {
-    if (!anzahlOk || doppelt) {
-      setFehler(
-        !anzahlOk
-          ? `Bitte ${MIN_SPIELER} bis ${MAX_SPIELER} Spielernamen eintragen.`
-          : 'Jeder Name darf nur einmal vorkommen.'
-      )
-      return
+  const los = async () => {
+    if (!name.trim()) return setFehler('Bitte einen Namen eintragen.')
+    if (modus === 'beitreten' && code.trim().length !== 4) return setFehler('Der Raumcode hat 4 Zeichen.')
+    setLade(true)
+    setFehler('')
+    try {
+      if (modus === 'start') await onErstellen(name.trim())
+      else await onBeitreten(code.trim(), name.trim())
+    } catch (e) {
+      setFehler(e instanceof Error ? e.message : 'Verbindung fehlgeschlagen')
+    } finally {
+      setLade(false)
     }
-    // Liste rotieren, damit der Startspieler (z. B. der Jüngste) anfängt
-    const spieler = [...gueltigeNamen.slice(startIndex), ...gueltigeNamen.slice(0, startIndex)]
-    setState({
-      ...LEER,
-      phase: 'frage',
-      spieler,
-      punkte: Object.fromEntries(spieler.map((s) => [s, 0])),
-    })
   }
 
   return (
     <div className="space-y-4">
-      <div className="glass-card p-4">
-        <h3 className="flex items-center gap-2 font-display text-lg font-semibold text-white">
-          <Users size={19} className="text-pink-300" /> Wer spielt mit?
-        </h3>
-        <p className="mt-1 text-sm text-white/55">
-          {MIN_SPIELER}–{MAX_SPIELER} Spieler. Der jüngste Spieler beginnt laut Regelwerk –
-          oder würfelt euch einen Startspieler aus. 🎲
-        </p>
-        <div className="mt-4 space-y-2.5">
-          {namen.map((name, i) => (
-            <div key={i} className="flex items-center gap-2.5">
-              <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-violet-500/30 to-fuchsia-500/30 font-display text-sm font-bold text-violet-200">
-                {i + 1}
-              </span>
-              <input
-                value={name}
-                onChange={(e) => setNamen(namen.map((n, j) => (j === i ? e.target.value : n)))}
-                placeholder={`Spieler ${i + 1}`}
-                maxLength={16}
-                className="w-full rounded-xl border border-white/10 bg-white/[0.06] px-3.5 py-2.5 text-[15px] font-bold text-white placeholder:font-normal placeholder:text-white/30 focus:border-pink-400/60 focus:outline-none focus:ring-2 focus:ring-pink-400/20"
-              />
-            </div>
-          ))}
-        </div>
-        {namen.length < MAX_SPIELER && (
-          <button
-            onClick={() => setNamen([...namen, ''])}
-            className="mt-3 flex w-full items-center justify-center gap-1.5 rounded-xl border border-dashed border-white/15 py-2.5 text-sm font-bold text-white/50 transition-colors hover:border-pink-400/40 hover:text-pink-300"
-          >
-            <Plus size={15} /> Weiteren Spieler hinzufügen
-          </button>
-        )}
-        {fehler && <p className="mt-3 text-sm font-bold text-rose-300">{fehler}</p>}
+      <div className="grid grid-cols-2 gap-3">
+        <ModusKarte
+          aktiv={modus === 'start'}
+          onClick={() => setModus('start')}
+          emoji="🏠"
+          titel="Spielraum eröffnen"
+          text="Du leitest die Runde und gibst den Code weiter"
+        />
+        <ModusKarte
+          aktiv={modus === 'beitreten'}
+          onClick={() => setModus('beitreten')}
+          emoji="🚪"
+          titel="Spielraum beitreten"
+          text="Du hast einen Code vom Spielleiter"
+        />
       </div>
 
-      <div className="grid grid-cols-2 gap-3">
+      <div className="glass-card space-y-3.5 p-5">
+        {modus === 'beitreten' && (
+          <Feld label="Raumcode">
+            <input
+              value={code}
+              onChange={(e) => setCode(e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 4))}
+              placeholder="ABCD"
+              maxLength={4}
+              className="w-full rounded-xl border border-white/10 bg-white/[0.06] px-3.5 py-3 text-center font-display text-2xl font-bold uppercase tracking-[0.4em] text-white placeholder:tracking-normal placeholder:text-white/25 focus:border-pink-400/60 focus:outline-none focus:ring-2 focus:ring-pink-400/20"
+            />
+          </Feld>
+        )}
+        <Feld label="Dein Name">
+          <input
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && los()}
+            placeholder="Wie sollen die anderen dich sehen?"
+            maxLength={16}
+            className="w-full rounded-xl border border-white/10 bg-white/[0.06] px-3.5 py-3 text-[15px] font-bold text-white placeholder:font-normal placeholder:text-white/30 focus:border-pink-400/60 focus:outline-none focus:ring-2 focus:ring-pink-400/20"
+          />
+        </Feld>
+        {fehler && <p className="text-sm font-bold text-rose-300">{fehler}</p>}
         <button
-          onClick={() => starten(0)}
-          className="glanz flex flex-col items-center gap-1 rounded-2xl bg-gradient-to-br from-pink-500 to-fuchsia-600 py-4 font-display text-white shadow-[0_10px_30px_rgba(217,70,239,0.4)] transition-transform active:scale-[0.97]"
+          onClick={los}
+          disabled={lade}
+          className="glanz flex w-full items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-pink-500 to-violet-500 py-4 font-display text-lg font-semibold text-white shadow-[0_10px_30px_rgba(217,70,239,0.4)] transition-transform active:scale-[0.97] disabled:opacity-50"
         >
-          <span className="text-xl">🧒</span>
-          <span className="text-sm font-semibold">Jüngster fängt an</span>
-          <span className="text-[11px] text-white/70">offizielle Regel</span>
-        </button>
-        <button
-          onClick={() => starten(Math.floor(Math.random() * gueltigeNamen.length))}
-          disabled={!anzahlOk || doppelt}
-          className="flex flex-col items-center gap-1 rounded-2xl border border-white/15 bg-white/[0.06] py-4 font-display text-white/85 backdrop-blur transition-all hover:bg-white/10 active:scale-[0.97] disabled:opacity-40"
-        >
-          <span className="text-xl">🎲</span>
-          <span className="text-sm font-semibold">Zufälliger Start</span>
-          <span className="text-[11px] text-white/50">Überrasch mich</span>
+          {lade ? <Loader2 className="animate-spin" size={19} /> : <Gamepad2 size={19} />}
+          {modus === 'start' ? 'Spielraum eröffnen' : 'Beitreten'}
         </button>
       </div>
     </div>
   )
 }
 
-/* ── Phase 2: Frage stellen ─────────────────────────────── */
-function FragePhase({
-  fragesteller,
-  state,
-  setState,
+/* ── Lobby: Code teilen, Ready melden ───────────────────── */
+function Lobby({
+  z,
+  onAct,
 }: {
-  fragesteller: string
-  state: SpielState
-  setState: Dispatch<SetStateAction<SpielState>>
+  z: RaumZustand
+  onAct: (fn: (s: RaumSession) => Promise<RaumZustand>) => Promise<void>
 }) {
-  const [frage, setFrage] = useState(state.frage)
-  const [eigene, setEigene] = useState(false)
+  const ich = z.spieler.find((s) => s.name === z.ich)
+  const beitrittsUrl = `${window.location.origin}/?raum=${z.code}`
+  const [kopiert, setKopiert] = useState(false)
+
+  const teilen = async () => {
+    if (navigator.share) {
+      try {
+        await navigator.share({ title: '1 bis 8 Party', text: `Tritt meinem Spielraum ${z.code} bei!`, url: beitrittsUrl })
+        return
+      } catch {
+        /* User abgebrochen -> Copy Fallback */
+      }
+    }
+    kopieren()
+  }
+
+  const kopieren = async () => {
+    try {
+      await navigator.clipboard.writeText(beitrittsUrl)
+    } catch {
+      await navigator.clipboard.writeText(z.code)
+    }
+    setKopiert(true)
+    setTimeout(() => setKopiert(false), 2000)
+  }
+
+  return (
+    <div className="space-y-4">
+      <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>
+        <p className="mt-2 text-sm text-white/55">
+          Alle öffnen <span className="font-bold text-white/80">1bis.hocks.eu</span> auf dem Handy und
+          treten mit dem Code bei.
+        </p>
+        <div className="mt-3 flex justify-center gap-2">
+          <button
+            onClick={teilen}
+            className="flex items-center gap-1.5 rounded-xl bg-gradient-to-r from-sky-500 to-blue-600 px-4 py-2.5 text-sm font-bold text-white shadow-lg transition-transform active:scale-95"
+          >
+            <Share2 size={15} /> Teilen
+          </button>
+          <button
+            onClick={kopieren}
+            className="flex items-center gap-1.5 rounded-xl border border-white/15 bg-white/[0.06] px-4 py-2.5 text-sm font-bold text-white/75 transition-all hover:bg-white/10 active:scale-95"
+          >
+            {kopiert ? <Check size={15} className="text-emerald-300" /> : <Copy size={15} />} {kopiert ? 'Kopiert!' : 'Link kopieren'}
+          </button>
+        </div>
+      </div>
+
+      <div className="glass-card p-4">
+        <div className="mb-3 flex items-center justify-between">
+          <h3 className="flex items-center gap-2 font-display text-lg font-semibold text-white">
+            <Users size={19} className="text-pink-300" /> Spieler
+            <span className="text-white/40">
+              ({z.spieler.length}/{z.maxSpieler})
+            </span>
+          </h3>
+          <span className="text-xs font-bold text-white/45">Mind. {z.minSpieler}</span>
+        </div>
+        <div className="space-y-2">
+          {z.spieler.map((s) => (
+            <div key={s.name} className="flex items-center justify-between rounded-xl bg-white/[0.05] px-3.5 py-2.5">
+              <span className="flex items-center gap-2 font-bold text-white/90">
+                {s.istHost && <Crown size={14} className="text-amber-300" />}
+                {s.name}
+                {s.name === z.ich && <span className="text-[11px] font-extrabold uppercase text-pink-300">(du)</span>}
+              </span>
+              <span
+                className={`rounded-full px-2.5 py-1 text-[11px] font-extrabold uppercase tracking-wide ${
+                  s.ready ? 'bg-emerald-400/15 text-emerald-300' : 'bg-white/[0.07] text-white/40'
+                }`}
+              >
+                {s.ready ? '✓ Ready' : 'Wartet …'}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <button
+        onClick={() => onAct((s) => readySetzen(s, !ich?.ready))}
+        className={`flex w-full items-center justify-center gap-2 rounded-2xl py-4 font-display text-lg font-semibold transition-transform active:scale-[0.97] ${
+          ich?.ready
+            ? 'border border-emerald-400/40 bg-emerald-400/10 text-emerald-300'
+            : 'glanz bg-gradient-to-r from-emerald-500 to-teal-500 text-white shadow-[0_10px_30px_rgba(16,185,129,0.4)]'
+        }`}
+      >
+        <Check size={20} /> {ich?.ready ? 'Bereit! (zurücknehmen)' : 'Ich bin ready!'}
+      </button>
+      <p className="pb-2 text-center text-xs text-white/45">
+        Sobald alle Spieler ready sind, startet das Spiel automatisch. 🎲
+      </p>
+    </div>
+  )
+}
+
+/* ── Fragephase ─────────────────────────────────────────── */
+function FragePhase({ z, onAct }: { z: RaumZustand; onAct: (fn: (s: RaumSession) => Promise<RaumZustand>) => Promise<void> }) {
+  const [frage, setFrage] = useState('')
+  const istFragesteller = z.ich === z.fragesteller
 
   const ziehen = () => {
     const karte = KARTEN[Math.floor(Math.random() * KARTEN.length)]
     setFrage(karte.text)
-    setEigene(false)
   }
 
-  const weiter = () => {
-    if (!frage.trim()) return
-    setState((s) => ({ ...s, phase: 'ranking', frage: frage.trim(), rankings: {}, ergebnis: null }))
+  if (!istFragesteller) {
+    return (
+      <div className="glass-card p-6 text-center">
+        <p className="text-4xl">🎤</p>
+        <p className="mt-2 font-display text-2xl font-bold text-white">{z.fragesteller}</p>
+        <p className="mt-1 text-sm text-white/55">ist als Fragesteller an der Reihe und wählt gerade eine Karte …</p>
+        <p className="mt-4 text-xs text-white/40">Auf deinem Handy geht es gleich weiter.</p>
+      </div>
+    )
   }
 
   return (
     <div className="space-y-4">
+      <RundenLeiste z={z} />
       <div className="glass-card p-5 text-center">
-        <p className="text-xs font-extrabold uppercase tracking-[0.25em] text-violet-300">Fragesteller</p>
-        <p className="mt-1 font-display text-3xl font-bold text-gradient">{fragesteller}</p>
-        <p className="mt-1 text-sm text-white/55">zieht eine Karte und liest laut vor 🎤</p>
+        <p className="text-xs font-extrabold uppercase tracking-[0.25em] text-violet-300">Du bist dran!</p>
+        <p className="mt-1 text-sm text-white/60">Ziehe eine Karte und lies sie laut vor – oder erfinde eigene Frage.</p>
       </div>
-
-      <div className="glass-card p-4">
-        <div className="flex gap-2">
-          <button
-            onClick={ziehen}
-            className="flex-1 rounded-xl bg-gradient-to-r from-sky-500 to-blue-600 py-3 font-display text-sm font-semibold text-white shadow-lg transition-transform active:scale-[0.97]"
-          >
-            🃏 Karte ziehen
-          </button>
-          <button
-            onClick={() => setEigene(!eigene)}
-            className={`flex-1 rounded-xl border py-3 font-display text-sm font-semibold transition-all ${
-              eigene
-                ? 'border-amber-400/50 bg-amber-400/15 text-amber-200'
-                : 'border-white/15 bg-white/[0.06] text-white/70'
-            }`}
-          >
-            ✍️ Eigene Frage
-          </button>
-        </div>
-
-        {(eigene || frage) && (
-          <textarea
-            value={frage}
-            onChange={(e) => setFrage(e.target.value)}
-            rows={3}
-            placeholder="Wer aus der Gruppe würde …?"
-            className="mt-3 w-full rounded-xl border border-white/10 bg-white/[0.06] px-3.5 py-3 text-[15px] font-bold leading-relaxed text-white placeholder:font-normal placeholder:text-white/30 focus:border-pink-400/60 focus:outline-none focus:ring-2 focus:ring-pink-400/20"
-          />
-        )}
-        {frage && !eigene && (
-          <p className="mt-2 text-center text-[11px] text-white/40">
-            Statement-Karte – vorgelesen wird sie vom Fragesteller
-          </p>
-        )}
+      <div className="glass-card space-y-3 p-4">
+        <button
+          onClick={ziehen}
+          className="w-full rounded-xl bg-gradient-to-r from-sky-500 to-blue-600 py-3 font-display text-sm font-semibold text-white shadow-lg transition-transform active:scale-[0.97]"
+        >
+          🃏 Karte ziehen
+        </button>
+        <textarea
+          value={frage}
+          onChange={(e) => setFrage(e.target.value)}
+          rows={3}
+          placeholder="Wer aus der Gruppe würde …?"
+          maxLength={300}
+          className="w-full resize-none rounded-xl border border-white/10 bg-white/[0.06] px-3.5 py-3 text-[15px] font-bold leading-relaxed text-white placeholder:font-normal placeholder:text-white/30 focus:border-pink-400/60 focus:outline-none focus:ring-2 focus:ring-pink-400/20"
+        />
+        <button
+          onClick={() => onAct((s) => frageStellen(s, frage))}
+          disabled={!frage.trim()}
+          className="flex w-full items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-pink-500 to-violet-500 py-3.5 font-display text-base font-semibold text-white shadow-[0_10px_30px_rgba(217,70,239,0.4)] transition-transform active:scale-[0.97] disabled:opacity-40"
+        >
+          <EyeOff size={17} /> Frage stellen – jetzt wird geheim gewählt
+        </button>
       </div>
-
-      <button
-        onClick={weiter}
-        disabled={!frage.trim()}
-        className="flex w-full items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-pink-500 to-violet-500 py-4 font-display text-lg font-semibold text-white shadow-[0_10px_30px_rgba(217,70,239,0.4)] transition-transform active:scale-[0.97] disabled:opacity-40"
-      >
-        Geheimes Ranking starten <ArrowRight size={19} />
-      </button>
     </div>
   )
 }
 
-/* ── Phase 3: Geheimes Ranking (Handy-Runde) ────────────── */
+/* ── Geheimes Ranking auf dem eigenen Handy ─────────────── */
 function RankingPhase({
-  state,
-  setState,
+  z,
+  onAct,
 }: {
-  state: SpielState
-  setState: Dispatch<SetStateAction<SpielState>>
+  z: RaumZustand
+  onAct: (fn: (s: RaumSession) => Promise<RaumZustand>) => Promise<void>
 }) {
-  const n = state.spieler.length
-  // Reihenfolge: Fragesteller zuerst, dann im Uhrzeigersinn
-  const reihenfolge = [...state.spieler.slice(state.runde % n), ...state.spieler.slice(0, state.runde % n)]
-  const eintraege = Object.keys(state.rankings).length
-  const aktueller = reihenfolge[eintraege]
-
   const [auswahl, setAuswahl] = useState<string[]>([])
+  const n = z.spieler.length
+  const ich = z.spieler.find((s) => s.name === z.ich)
+  const abgegeben = !!ich?.rankingAbgegeben
 
-  const bestaetigen = () => {
-    const rankings = { ...state.rankings, [aktueller]: auswahl }
-    if (eintraege + 1 >= n) {
-      const ergebnis = berechneRunde(state.spieler, rankings)
-      const punkte = Object.fromEntries(
-        state.spieler.map((s) => [s, (state.punkte[s] ?? 0) + (ergebnis.punkte[s] ?? 0)])
-      )
-      setState((s) => ({ ...s, rankings, ergebnis, punkte, phase: 'aufloesung' }))
-    } else {
-      setState((s) => ({ ...s, rankings }))
-      setAuswahl([])
-    }
-  }
+  const bestaetigen = () => onAct((s) => rankingAbgeben(s, auswahl))
 
   return (
     <div className="space-y-4">
+      <RundenLeiste z={z} />
       <div className="glass-card p-5 text-center">
         <p className="flex items-center justify-center gap-1.5 text-xs font-extrabold uppercase tracking-[0.25em] text-violet-300">
           <EyeOff size={13} /> Geheimes Ranking
         </p>
-        <p className="mt-2 text-sm leading-relaxed text-white/70">„{state.frage}“</p>
+        <p className="mt-2 text-[15px] font-bold leading-relaxed text-white/85">„{z.frage}“</p>
       </div>
 
-      <div className="glass-card p-5">
-        <div className="flex items-center justify-between">
-          <p className="text-sm text-white/55">
-            Ranking <span className="font-bold text-white">{eintraege + 1}</span>/{n}
+      {abgegeben ? (
+        <div className="glass-card p-6 text-center">
+          <p className="text-4xl">🤫</p>
+          <p className="mt-2 font-display text-xl font-bold text-white">Ranking abgegeben!</p>
+          <p className="mt-1 text-sm text-white/55">
+            {z.rankingsFertig}/{n} Spieler haben gewählt …
           </p>
-          <div className="flex gap-1">
-            {reihenfolge.map((s, i) => (
+          <div className="mt-3 flex justify-center gap-1.5">
+            {z.spieler.map((s) => (
               <span
-                key={s}
-                className={`h-2 w-2 rounded-full ${i < eintraege ? 'bg-emerald-400' : i === eintraege ? 'bg-pink-400 pulsierend' : 'bg-white/15'}`}
+                key={s.name}
+                title={s.name}
+                className={`h-2.5 w-2.5 rounded-full ${s.rankingAbgegeben ? 'bg-emerald-400' : 'bg-white/15'}`}
               />
             ))}
           </div>
         </div>
-
-        <div className="mt-4 rounded-2xl bg-gradient-to-br from-violet-500/20 to-fuchsia-500/20 p-4 text-center">
-          <p className="text-xs font-extrabold uppercase tracking-widest text-white/50">
-            📱 Gib das Handy an
-          </p>
-          <p className="mt-1 font-display text-2xl font-bold text-white">{aktueller}</p>
-          <p className="mt-1 text-sm text-white/60">
-            Tippe die Mitspieler in deiner Reihenfolge an – Platz 1 zuerst.
+      ) : (
+        <div className="glass-card p-4">
+          <p className="mb-3 text-center text-sm text-white/60">
+            Tippe alle Mitspieler in <span className="font-bold text-white">deiner Reihenfolge</span> an – Platz 1 zuerst.
           </p>
+          <div className="space-y-2">
+            {z.spieler.map((s) => {
+              const platz = auswahl.indexOf(s.name)
+              const gewaehlt = platz !== -1
+              return (
+                <button
+                  key={s.name}
+                  onClick={() => !gewaehlt && setAuswahl([...auswahl, s.name])}
+                  disabled={gewaehlt}
+                  className={`flex w-full items-center justify-between rounded-xl border px-4 py-3 transition-all active:scale-[0.98] ${
+                    gewaehlt
+                      ? 'border-transparent bg-gradient-to-r from-pink-500/80 to-fuchsia-500/80'
+                      : 'border-white/10 bg-white/[0.05] hover:border-pink-400/40'
+                  }`}
+                >
+                  <span className={`font-bold ${gewaehlt ? 'text-white' : 'text-white/75'}`}>{s.name}</span>
+                  {gewaehlt ? (
+                    <span className="flex items-center gap-1.5 font-display text-sm font-bold text-white">
+                      Platz {platz + 1} <Check size={15} />
+                    </span>
+                  ) : (
+                    <span className="text-xs font-bold text-white/30">antippen</span>
+                  )}
+                </button>
+              )
+            })}
+          </div>
+          <div className="mt-4 flex gap-2">
+            <button
+              onClick={() => setAuswahl(auswahl.slice(0, -1))}
+              disabled={auswahl.length === 0}
+              className="flex flex-1 items-center justify-center gap-1.5 rounded-xl border border-white/15 py-3 text-sm font-bold text-white/70 transition-all hover:bg-white/5 disabled:opacity-30"
+            >
+              <Eraser size={15} /> Zurück
+            </button>
+            <button
+              onClick={bestaetigen}
+              disabled={auswahl.length !== n}
+              className="glanz flex-[2] rounded-xl bg-gradient-to-r from-emerald-500 to-teal-500 py-3 font-display text-sm font-semibold text-white shadow-lg transition-transform active:scale-[0.97] disabled:opacity-40"
+            >
+              {auswahl.length === n ? 'Geheim abgeben 🔒' : `Noch ${n - auswahl.length} wählen`}
+            </button>
+          </div>
         </div>
-
-        <div className="mt-4 grid grid-cols-1 gap-2">
-          {state.spieler.map((spieler) => {
-            const platz = auswahl.indexOf(spieler)
-            const gewaehlt = platz !== -1
-            return (
-              <button
-                key={spieler}
-                onClick={() => !gewaehlt && setAuswahl([...auswahl, spieler])}
-                disabled={gewaehlt}
-                className={`flex items-center justify-between rounded-xl border px-4 py-3 transition-all active:scale-[0.98] ${
-                  gewaehlt
-                    ? 'border-transparent bg-gradient-to-r from-pink-500/80 to-fuchsia-500/80'
-                    : 'border-white/10 bg-white/[0.05] hover:border-pink-400/40'
-                }`}
-              >
-                <span className={`font-bold ${gewaehlt ? 'text-white' : 'text-white/75'}`}>{spieler}</span>
-                {gewaehlt ? (
-                  <span className="flex items-center gap-1.5 font-display text-sm font-bold text-white">
-                    Platz {platz + 1} <Check size={15} />
-                  </span>
-                ) : (
-                  <span className="text-xs font-bold text-white/30">antippen</span>
-                )}
-              </button>
-            )
-          })}
-        </div>
-
-        <div className="mt-4 flex gap-2">
-          <button
-            onClick={() => setAuswahl(auswahl.slice(0, -1))}
-            disabled={auswahl.length === 0}
-            className="flex flex-1 items-center justify-center gap-1.5 rounded-xl border border-white/15 py-3 text-sm font-bold text-white/70 transition-all hover:bg-white/5 disabled:opacity-30"
-          >
-            <Eraser size={15} /> Rückgängig
-          </button>
-          <button
-            onClick={bestaetigen}
-            disabled={auswahl.length !== n}
-            className="glanz flex-[2] rounded-xl bg-gradient-to-r from-emerald-500 to-teal-500 py-3 font-display text-sm font-semibold text-white shadow-lg transition-transform active:scale-[0.97] disabled:opacity-40"
-          >
-            {auswahl.length === n
-              ? eintraege + 1 >= n
-                ? '✨ Alle fertig – Auflösung!'
-                : 'Ranking speichern'
-              : `Noch ${n - auswahl.length} wählen`}
-          </button>
-        </div>
-      </div>
+      )}
     </div>
   )
 }
 
-/* ── Phase 4: Enthüllung & Punkte ───────────────────────── */
-function AufloesungPhase({
-  state,
-  setState,
-}: {
-  state: SpielState
-  setState: Dispatch<SetStateAction<SpielState>>
-}) {
-  const e = state.ergebnis!
-  const rundePunkte = e.punkte
-
+/* ── Enthüllung ─────────────────────────────────────────── */
+function Reveal({ z, onAct }: { z: RaumZustand; onAct: (fn: (s: RaumSession) => Promise<RaumZustand>) => Promise<void> }) {
+  const e = z.ergebnis!
   return (
     <div className="space-y-4">
+      <RundenLeiste z={z} />
       <div className="glass-card p-5 text-center">
-        <p className="text-xs font-extrabold uppercase tracking-[0.25em] text-violet-300">
-          👀 Die große Enthüllung
-        </p>
-        <p className="mt-2 text-sm leading-relaxed text-white/70">„{state.frage}“</p>
-        <p className="mt-2 text-xs text-white/45">
-          Reden ist Gold! Anekdoten & Rechtfertigungen sind ausdrücklich erwünscht.
-        </p>
+        <p className="text-xs font-extrabold uppercase tracking-[0.25em] text-violet-300">👀 Die große Enthüllung</p>
+        <p className="mt-2 text-sm leading-relaxed text-white/75">„{z.frage}“</p>
+        <p className="mt-2 text-xs text-white/45">Reden ist Gold – Anekdoten & Rechtfertigungen erwünscht!</p>
       </div>
 
-      {/* Mehrheits-Ranking */}
       <div className="glass-card p-4">
         <h3 className="mb-3 font-display text-lg font-semibold text-white">🗳️ Mehrheits-Meinung</h3>
         <div className="space-y-2">
@@ -433,27 +506,21 @@ function AufloesungPhase({
             </div>
           ))}
         </div>
-        <p className="mt-2.5 text-[11px] leading-relaxed text-white/40">
-          Punkte erhält, wer die Mehrheits-Person auf dem jeweiligen Platz selbst platziert hat
-          (Platz 1 = {state.spieler.length} Punkte … letzter Platz = 1 Punkt).
-        </p>
       </div>
 
-      {/* Punkte der Runde */}
       <div className="glass-card p-4">
-        <h3 className="mb-3 font-display text-lg font-semibold text-white">✨ Punkte dieser Runde</h3>
-        <div className="space-y-1.5">
-          {[...state.spieler]
-            .sort((a, b) => rundePunkte[b] - rundePunkte[a])
-            .map((s) => (
-              <div key={s} className="flex items-center justify-between rounded-lg px-2 py-1.5">
-                <span className="text-sm font-bold text-white/80">{s}</span>
-                <span
-                  className={`font-display text-base font-bold ${
-                    rundePunkte[s] > 0 ? 'text-emerald-300' : 'text-white/30'
-                  }`}
-                >
-                  {rundePunkte[s] > 0 ? `+${rundePunkte[s]}` : '0'}
+        <h3 className="mb-2 font-display text-lg font-semibold text-white">✨ Punkte der Runde</h3>
+        <div className="space-y-1">
+          {[...z.spieler.map((s) => s.name)]
+            .sort((a, b) => (e.punkte[b] ?? 0) - (e.punkte[a] ?? 0))
+            .map((name) => (
+              <div key={name} className="flex items-center justify-between rounded-lg px-2 py-1.5">
+                <span className="text-sm font-bold text-white/80">
+                  {name}
+                  {name === z.ich && <span className="ml-1.5 text-[11px] text-pink-300">(du)</span>}
+                </span>
+                <span className={`font-display text-base font-bold ${(e.punkte[name] ?? 0) > 0 ? 'text-emerald-300' : 'text-white/30'}`}>
+                  {(e.punkte[name] ?? 0) > 0 ? `+${e.punkte[name]}` : '0'}
                 </span>
               </div>
             ))}
@@ -461,82 +528,64 @@ function AufloesungPhase({
       </div>
 
       <button
-        onClick={() => setState((s) => ({ ...s, phase: 'punktestand' }))}
+        onClick={() => onAct(naechstePhase)}
         className="flex w-full items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-pink-500 to-violet-500 py-4 font-display text-lg font-semibold text-white shadow-[0_10px_30px_rgba(217,70,239,0.4)] transition-transform active:scale-[0.97]"
       >
-        Zum Punktestand <ArrowRight size={19} />
+        Zum Punktestand <DoorOpen size={18} />
       </button>
     </div>
   )
 }
 
-/* ── Phase 5: Punktestand ───────────────────────────────── */
-function PunktestandPhase({
-  state,
-  setState,
-  fragesteller,
-}: {
-  state: SpielState
-  setState: Dispatch<SetStateAction<SpielState>>
-  fragesteller: string
-}) {
-  const sortiert = [...state.spieler].sort((a, b) => state.punkte[b] - state.punkte[a])
-  const max = Math.max(...sortiert.map((s) => state.punkte[s]), 1)
-  const letzteRunde = state.runde + 1 >= state.spieler.length
-
+/* ── Punktestand ────────────────────────────────────────── */
+function Scoreboard({ z, onAct }: { z: RaumZustand; onAct: (fn: (s: RaumSession) => Promise<RaumZustand>) => Promise<void> }) {
+  const sortiert = [...z.spieler.map((s) => s.name)].sort((a, b) => (z.punkte[b] ?? 0) - (z.punkte[a] ?? 0))
+  const max = Math.max(...sortiert.map((s) => z.punkte[s] ?? 0), 1)
+  const letzteRunde = z.runde + 1 >= z.anzahlRunden
   return (
     <div className="space-y-4">
+      <RundenLeiste z={z} />
       <div className="glass-card p-4">
         <h3 className="mb-1 font-display text-lg font-semibold text-white">🏅 Punktestand</h3>
         <p className="mb-4 text-xs text-white/50">
-          Nach Runde {state.runde + 1} von {state.spieler.length}
+          Nach Runde {z.runde + 1} von {z.anzahlRunden}
         </p>
         <div className="space-y-3">
-          {sortiert.map((s, i) => (
-            <div key={s}>
+          {sortiert.map((name, i) => (
+            <div key={name}>
               <div className="mb-1 flex items-center justify-between text-sm">
                 <span className="font-bold text-white/85">
                   {i === 0 && '🥇 '}
                   {i === 1 && '🥈 '}
                   {i === 2 && '🥉 '}
-                  {s}
+                  {name}
+                  {name === z.ich && <span className="ml-1.5 text-[11px] text-pink-300">(du)</span>}
                 </span>
-                <span className="font-display font-bold text-pink-300">{state.punkte[s]} P.</span>
+                <span className="font-display font-bold text-pink-300">{z.punkte[name]} P.</span>
               </div>
               <div className="h-2.5 overflow-hidden rounded-full bg-white/[0.07]">
                 <div
                   className="h-full rounded-full bg-gradient-to-r from-violet-500 via-fuchsia-500 to-pink-500 transition-all duration-700"
-                  style={{ width: `${(state.punkte[s] / max) * 100}%` }}
+                  style={{ width: `${((z.punkte[name] ?? 0) / max) * 100}%` }}
                 />
               </div>
             </div>
           ))}
         </div>
       </div>
-
       <button
-        onClick={() =>
-          setState((s) => ({
-            ...s,
-            phase: letzteRunde ? 'ende' : 'frage',
-            runde: s.runde + 1,
-            frage: '',
-            rankings: {},
-            ergebnis: null,
-          }))
-        }
+        onClick={() => onAct(naechstePhase)}
         className="flex w-full items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-pink-500 to-violet-500 py-4 font-display text-lg font-semibold text-white shadow-[0_10px_30px_rgba(217,70,239,0.4)] transition-transform active:scale-[0.97]"
       >
-        {letzteRunde ? '🏆 Spiel auswerten' : `Weiter – ${fragesteller} ist dran`}
-        <ArrowRight size={19} />
+        {letzteRunde ? '🏆 Spiel auswerten' : `Weiter – ${z.spieler[(z.runde + 1) % z.spieler.length].name} ist dran`}
       </button>
     </div>
   )
 }
 
-/* ── Phase 6: Siegerehrung ──────────────────────────────── */
-function EndePhase({ state, onNeuesSpiel }: { state: SpielState; onNeuesSpiel: () => void }) {
-  const sortiert = [...state.spieler].sort((a, b) => state.punkte[b] - state.punkte[a])
+/* ── Siegerehrung ───────────────────────────────────────── */
+function Ende({ z, onVerlassen }: { z: RaumZustand; onVerlassen: () => void }) {
+  const sortiert = [...z.spieler.map((s) => s.name)].sort((a, b) => (z.punkte[b] ?? 0) - (z.punkte[a] ?? 0))
   const sieger = sortiert[0]
   const konfetti = useMemo(
     () =>
@@ -565,7 +614,6 @@ function EndePhase({ state, onNeuesSpiel }: { state: SpielState; onNeuesSpiel: (
           }}
         />
       ))}
-
       <div className="glass-card p-6 text-center">
         <Trophy size={52} className="mx-auto text-amber-300" />
         <p className="mt-3 text-xs font-extrabold uppercase tracking-[0.25em] text-violet-300">
@@ -573,35 +621,88 @@ function EndePhase({ state, onNeuesSpiel }: { state: SpielState; onNeuesSpiel: (
         </p>
         <h3 className="mt-2 font-display text-4xl font-bold text-gradient">{sieger}</h3>
         <p className="mt-1 text-white/70">
-          gewinnt die <span className="font-bold text-white">1 bis 8 Party</span> mit{' '}
-          <span className="font-display text-xl font-bold text-amber-300">{state.punkte[sieger]} Punkten</span>! 🎉
+          gewinnt mit <span className="font-display text-xl font-bold text-amber-300">{z.punkte[sieger]} Punkten</span>! 🎉
         </p>
         <p className="mt-3 text-xs leading-relaxed text-white/45">
-          Eigentliches Hauptziel laut Regelwerk: Spaß, gemeinsames Lachen und neue
-          Seiten an euren Mitspielern entdeckt. Das habt ihr sicher geschafft. 💜
+          Eigentliches Hauptziel laut Regelwerk: Spaß, gemeinsames Lachen und neue Seiten an
+          euren Mitspielern entdeckt. Das habt ihr sicher geschafft. 💜
         </p>
       </div>
-
       <div className="glass-card mt-4 p-4">
         <h4 className="mb-2 font-display text-base font-semibold text-white">Endstand</h4>
         <div className="space-y-1.5">
-          {sortiert.map((s, i) => (
-            <div key={s} className="flex items-center justify-between rounded-lg bg-white/[0.04] px-3 py-2">
+          {sortiert.map((name, i) => (
+            <div key={name} className="flex items-center justify-between rounded-lg bg-white/[0.04] px-3 py-2">
               <span className="text-sm font-bold text-white/85">
-                {['🥇', '🥈', '🥉'][i] ?? `${i + 1}.`} {s}
+                {['🥇', '🥈', '🥉'][i] ?? `${i + 1}.`} {name}
+                {name === z.ich && <span className="ml-1.5 text-[11px] text-pink-300">(du)</span>}
               </span>
-              <span className="font-display text-sm font-bold text-pink-300">{state.punkte[s]} P.</span>
+              <span className="font-display text-sm font-bold text-pink-300">{z.punkte[name]} P.</span>
             </div>
           ))}
         </div>
       </div>
-
       <button
-        onClick={onNeuesSpiel}
+        onClick={onVerlassen}
         className="glanz mt-4 flex w-full items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-emerald-500 to-teal-500 py-4 font-display text-lg font-semibold text-white shadow-[0_10px_30px_rgba(16,185,129,0.4)] transition-transform active:scale-[0.97]"
       >
-        <RotateCcw size={18} /> Noch eine Runde!
+        <PartyPopper size={18} /> Neue Runde – neuer Spielraum
       </button>
     </div>
   )
 }
+
+/* ── Bausteine ──────────────────────────────────────────── */
+function ModusKarte({
+  aktiv,
+  onClick,
+  emoji,
+  titel,
+  text,
+}: {
+  aktiv: boolean
+  onClick: () => void
+  emoji: string
+  titel: string
+  text: string
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={`glass-card p-4 text-left transition-all active:scale-[0.98] ${
+        aktiv ? 'ring-2 ring-pink-400/60 shadow-[0_0_24px_rgba(244,114,182,0.25)]' : 'opacity-70'
+      }`}
+    >
+      <span className="text-2xl">{emoji}</span>
+      <p className="mt-1.5 font-display text-base font-semibold text-white">{titel}</p>
+      <p className="mt-0.5 text-xs leading-relaxed text-white/55">{text}</p>
+    </button>
+  )
+}
+
+function Feld({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div>
+      <label className="mb-1.5 block text-xs font-extrabold uppercase tracking-widest text-white/50">{label}</label>
+      {children}
+    </div>
+  )
+}
+
+function RundenLeiste({ z }: { z: RaumZustand }) {
+  return (
+    <div className="flex items-center gap-2">
+      {Array.from({ length: z.anzahlRunden }, (_, i) => (
+        <div
+          key={i}
+          className={`h-1.5 flex-1 rounded-full ${
+            i < z.runde ? 'bg-emerald-400' : i === z.runde ? 'bg-pink-400' : 'bg-white/10'
+          }`}
+        />
+      ))}
+      <span className="text-[11px] font-bold text-white/50">
+        Runde {Math.min(z.runde + 1, z.anzahlRunden)}/{z.anzahlRunden}
+      </span>
+    </div>
+  )
+}
diff --git a/server/docker-compose.yml b/server/docker-compose.yml
index e0f0c21..70e87c3 100644
--- a/server/docker-compose.yml
+++ b/server/docker-compose.yml
@@ -5,6 +5,9 @@
 # Dienste:
 #   onebis8-web      nginx, statisches dist/ (Mobile-App), proxiet
 #                    POST /api/mail/send → onebis8-mail-api (Token aus app.env)
+#                    und /api/game/* → onebis8-api (Multiplayer-Spielräume)
+#   onebis8-api      Game-API: Spielräume, Ready-Start, geheime Rankings,
+#                    Punkteberechnung (reine Node-Standardbibliothek)
 #   onebis8-mail     Postfix-Relay (nur intern im Docker-Netz, kein -p)
 #   onebis8-mail-api schlanke Mail-HTTP-API mit Outbox/Retry (Muster: mp-mail-api)
 #
@@ -27,6 +30,22 @@ services:
       - app.env
     depends_on:
       - onebis8-mail-api
+      - onebis8-api
+    networks:
+      - npm_default
+
+  # Game-API fuer Multiplayer-Spielräume (jeder Spieler auf seinem Handy)
+  onebis8-api:
+    image: node:22-alpine
+    container_name: onebis8-api
+    restart: unless-stopped
+    environment:
+      PORT: "8080"
+      DATA_DIR: /data
+    command: ["node", "/app/server.js"]
+    volumes:
+      - ./game/api/server.js:/app/server.js:ro
+      - onebis8-game-data:/data
     networks:
       - npm_default
 
@@ -71,3 +90,4 @@ networks:
 
 volumes:
   onebis8-mail-data:
+  onebis8-game-data:
diff --git a/server/game/api/server.js b/server/game/api/server.js
new file mode 100644
index 0000000..02fadf1
--- /dev/null
+++ b/server/game/api/server.js
@@ -0,0 +1,334 @@
+#!/usr/bin/env node
+/* 1 bis 8 Party – Game-API (Multiplayer-Spielräume)
+ *
+ * Reine Node-Standardbibliothek (node:22-alpine, keine Abhängigkeiten) –
+ * Muster: onebis8-mail-api. Verwaltet Spielräume, über die jeder Spieler
+ * von seinem eigenen Handy aus abstimmt.
+ *
+ * Ablauf:
+ *   POST /api/game/room              -> Raum eröffnen (Host tritt gleich bei)
+ *   POST /api/game/room/:code/join   -> als Spieler beitreten
+ *   GET  /api/game/room/:code        -> Zustand (pollen; Rankings bleiben geheim)
+ *   POST /api/game/room/:code/ready  -> Ready-Status setzen
+ *   POST /api/game/room/:code/question  -> Fragesteller stellt die Frage
+ *   POST /api/game/room/:code/ranking   -> eigenes geheimes Ranking abgeben
+ *   POST /api/game/room/:code/next      -> Auflösung -> Punktestand -> neue Runde
+ *
+ * Auth: X-Player-Token-Header (oder Body-Feld "token"), pro Spieler ein Token.
+ * Start: Sobald ALLE Spieler ready sind (min. 3), wechselt der Raum automatisch
+ * in die Fragephase. Auflösung erfolgt automatisch, wenn alle Rankings da sind.
+ */
+
+const http = require('http');
+const crypto = require('crypto');
+const fs = require('fs');
+const path = require('path');
+
+const PORT = parseInt(process.env.PORT || '8080', 10);
+const DATA_DIR = process.env.DATA_DIR || '/data';
+const MIN_SPIELER = 3;
+const MAX_SPIELER = 8;
+const ROOM_TTL_MS = 6 * 3600 * 1000; // Räume verfallen nach 6 h
+
+fs.mkdirSync(DATA_DIR, { recursive: true });
+const STATE_FILE = path.join(DATA_DIR, 'rooms.json');
+
+let rooms = {};
+try {
+  rooms = JSON.parse(fs.readFileSync(STATE_FILE, 'utf8') || '{}');
+} catch {
+  rooms = {};
+}
+
+let speicherTimer = null;
+function speichern() {
+  if (speicherTimer) return;
+  speicherTimer = setTimeout(() => {
+    speicherTimer = null;
+    const tmp = STATE_FILE + '.tmp';
+    fs.writeFileSync(tmp, JSON.stringify(rooms));
+    fs.renameSync(tmp, STATE_FILE);
+  }, 400);
+}
+
+/* ── Punkteberechnung (identisch mit app/src/lib/scoring.ts) ── */
+function berechneRunde(spieler, rankings) {
+  const n = spieler.length;
+  const listen = spieler.map((s) => rankings[s]).filter(Boolean);
+  const mehrheit = [];
+  const stimmenProPlatz = [];
+
+  for (let p = 0; p < n; p++) {
+    const zaehler = {};
+    for (const liste of listen) {
+      const person = liste[p];
+      if (person && !mehrheit.includes(person)) {
+        zaehler[person] = (zaehler[person] ?? 0) + 1;
+      }
+    }
+    stimmenProPlatz.push(zaehler);
+    let beste = '';
+    let besteStimmen = -1;
+    let besterSchnitt = Infinity;
+    for (const k of Object.keys(zaehler)) {
+      const stimmen = zaehler[k];
+      const listenMitK = listen.filter((l) => l.includes(k)).length;
+      const schnitt = listen.reduce((acc, l) => acc + (l.indexOf(k) + 1 || 0), 0) / Math.max(1, listenMitK);
+      if (stimmen > besteStimmen || (stimmen === besteStimmen && schnitt < besterSchnitt)) {
+        beste = k;
+        besteStimmen = stimmen;
+        besterSchnitt = schnitt;
+      }
+    }
+    mehrheit.push(beste);
+  }
+
+  const punkte = {};
+  for (const s of spieler) punkte[s] = 0;
+  for (const s of spieler) {
+    const liste = rankings[s];
+    if (!liste) continue;
+    for (let p = 0; p < n; p++) {
+      if (liste[p] === mehrheit[p]) punkte[s] += n - p;
+    }
+  }
+
+  return {
+    mehrheit,
+    punkte,
+    platzDetails: mehrheit.map((person, p) => ({
+      platz: p + 1,
+      person,
+      stimmen: stimmenProPlatz[p][person] ?? 0,
+      punkte: n - p,
+    })),
+  };
+}
+
+/* ── Helfer ─────────────────────────────────────────────── */
+function neuerCode() {
+  const zeichen = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'; // ohne 0/O/1/I (Verwechslungen)
+  for (let versuch = 0; versuch < 50; versuch++) {
+    let code = '';
+    for (let i = 0; i < 4; i++) code += zeichen[crypto.randomInt(zeichen.length)];
+    if (!rooms[code]) return code;
+  }
+  return null;
+}
+
+function raumFinden(code) {
+  const raum = rooms[(code || '').toUpperCase()];
+  if (!raum) return null;
+  if (Date.now() - raum.aktivitaet > ROOM_TTL_MS) {
+    delete rooms[raum.code];
+    speichern();
+    return null;
+  }
+  return raum;
+}
+
+function spielerFinden(raum, token) {
+  return raum.spieler.find((s) => s.token === token) || null;
+}
+
+function fragesteller(raum) {
+  return raum.spieler[raum.runde % raum.spieler.length]?.name ?? '';
+}
+
+/* Öffentliche Sicht: Rankings bleiben bis zur Auflösung verborgen */
+function oeffentlicherZustand(raum, token) {
+  const ich = spielerFinden(raum, token);
+  const alleReady = raum.spieler.length >= MIN_SPIELER && raum.spieler.every((s) => s.ready);
+  return {
+    code: raum.code,
+    status: raum.status,
+    runde: raum.runde,
+    anzahlRunden: raum.spieler.length,
+    frage: raum.frage,
+    fragesteller: raum.status === 'lobby' ? '' : fragesteller(raum),
+    spieler: raum.spieler.map((s) => ({
+      name: s.name,
+      ready: s.ready,
+      istHost: !!s.istHost,
+      rankingAbgegeben: !!raum.rankings[s.name],
+    })),
+    minSpieler: MIN_SPIELER,
+    maxSpieler: MAX_SPIELER,
+    alleReady,
+    rankingsFertig: Object.keys(raum.rankings).length,
+    punkte: raum.punkte,
+    ergebnis: raum.status === 'reveal' || raum.status === 'scoreboard' || raum.status === 'finished' ? raum.ergebnis : null,
+    ich: ich ? ich.name : '',
+  };
+}
+
+function antwort(res, code, body) {
+  const daten = JSON.stringify(body);
+  res.writeHead(code, { 'Content-Type': 'application/json; charset=utf-8', 'Content-Length': Buffer.byteLength(daten) });
+  res.end(daten);
+}
+
+function fehler(res, code, msg) {
+  antwort(res, code, { fehler: msg });
+}
+
+/* ── HTTP ───────────────────────────────────────────────── */
+const server = http.createServer(async (req, res) => {
+  const u = new URL(req.url, 'http://x');
+  const pfad = u.pathname.replace(/\/+$/, '') || '/';
+  const teile = pfad.split('/').filter(Boolean); // z.B. ['api','game','room','ABCD','join']
+  if (teile[0] !== 'api' || teile[1] !== 'game') return fehler(res, 404, 'nicht gefunden');
+
+  let body = {};
+  try {
+    if (req.method === 'POST') {
+      let roh = '';
+      for await (const chunk of req) {
+        roh += chunk;
+        if (roh.length > 32_000) return fehler(res, 413, 'Body zu gross');
+      }
+      body = JSON.parse(roh || '{}');
+    }
+  } catch {
+    return fehler(res, 400, 'ungueltiges JSON');
+  }
+
+  const token = req.headers['x-player-token'] || body.token || '';
+  const code = (teile[3] || '').toUpperCase();
+  const aktion = teile[4] || '';
+
+  try {
+    /* Raum eröffnen */
+    if (req.method === 'POST' && teile[2] === 'room' && !aktion) {
+      const name = String(body.name || '').trim().slice(0, 16);
+      if (!name) return fehler(res, 400, 'Name fehlt');
+      const neuerRaumCode = neuerCode();
+      if (!neuerRaumCode) return fehler(res, 500, 'kein Raumcode frei');
+      const raum = {
+        code: neuerRaumCode,
+        erstelltAm: Date.now(),
+        aktivitaet: Date.now(),
+        status: 'lobby',
+        runde: 0,
+        frage: '',
+        spieler: [{ name, token: crypto.randomBytes(18).toString('hex'), ready: false, istHost: true }],
+        rankings: {},
+        punkte: { [name]: 0 },
+        ergebnis: null,
+      };
+      rooms[neuerRaumCode] = raum;
+      speichern();
+      return antwort(res, 201, { ok: true, code: raum.code, token: raum.spieler[0].token, zustand: oeffentlicherZustand(raum, raum.spieler[0].token) });
+    }
+
+    const raum = raumFinden(code);
+    if (!raum) return fehler(res, 404, 'Spielraum nicht gefunden');
+    raum.aktivitaet = Date.now();
+
+    /* Zustand lesen */
+    if (req.method === 'GET' && teile[2] === 'room' && !aktion) {
+      return antwort(res, 200, oeffentlicherZustand(raum, token));
+    }
+
+    /* Beitreten (braucht noch keinen Token – der wird erst ausgestellt) */
+    if (req.method === 'POST' && aktion === 'join') {
+      if (raum.status !== 'lobby') return fehler(res, 409, 'Spiel läuft bereits');
+      const name = String(body.name || '').trim().slice(0, 16);
+      if (!name) return fehler(res, 400, 'Name fehlt');
+      if (raum.spieler.some((s) => s.name.toLowerCase() === name.toLowerCase())) return fehler(res, 409, 'Name ist bereits vergeben');
+      if (raum.spieler.length >= MAX_SPIELER) return fehler(res, 409, `Maximal ${MAX_SPIELER} Spieler`);
+      const neuerSpieler = { name, token: crypto.randomBytes(18).toString('hex'), ready: false, istHost: false };
+      raum.spieler.push(neuerSpieler);
+      raum.punkte[name] = 0;
+      speichern();
+      return antwort(res, 201, { ok: true, token: neuerSpieler.token, zustand: oeffentlicherZustand(raum, neuerSpieler.token) });
+    }
+
+    const spieler = spielerFinden(raum, token);
+    if (!spieler) return fehler(res, 401, 'ungueltiger Spieler-Token');
+
+    /* Ready */
+    if (req.method === 'POST' && aktion === 'ready') {
+      if (raum.status !== 'lobby') return fehler(res, 409, 'Spiel läuft bereits');
+      spieler.ready = !!body.ready;
+      // Alle ready + mindestens 3 -> Spiel startet automatisch
+      if (raum.spieler.length >= MIN_SPIELER && raum.spieler.every((s) => s.ready)) {
+        raum.status = 'question';
+        raum.runde = 0;
+      }
+      speichern();
+      return antwort(res, 200, { ok: true, zustand: oeffentlicherZustand(raum, token) });
+    }
+
+    /* Frage stellen */
+    if (req.method === 'POST' && aktion === 'question') {
+      if (raum.status !== 'question') return fehler(res, 409, 'Keine Fragephase');
+      if (spieler.name !== fragesteller(raum)) return fehler(res, 403, 'Nur der Fragesteller stellt die Frage');
+      const frage = String(body.frage || '').trim().slice(0, 300);
+      if (!frage) return fehler(res, 400, 'Frage fehlt');
+      raum.frage = frage;
+      raum.rankings = {};
+      raum.status = 'ranking';
+      speichern();
+      return antwort(res, 200, { ok: true, zustand: oeffentlicherZustand(raum, token) });
+    }
+
+    /* Geheimes Ranking abgeben */
+    if (req.method === 'POST' && aktion === 'ranking') {
+      if (raum.status !== 'ranking') return fehler(res, 409, 'Keine Rankingphase');
+      const reihenfolge = Array.isArray(body.reihenfolge) ? body.reihenfolge.map(String) : [];
+      const namen = raum.spieler.map((s) => s.name).sort();
+      if (reihenfolge.length !== namen.length || [...reihenfolge].sort().join('|') !== namen.join('|')) {
+        return fehler(res, 400, 'Reihenfolge muss alle Spieler genau einmal enthalten');
+      }
+      raum.rankings[spieler.name] = reihenfolge;
+      // Alle abgegeben -> automatische Auflösung mit Punkteberechnung
+      if (raum.spieler.every((s) => raum.rankings[s.name])) {
+        const ergebnis = berechneRunde(raum.spieler.map((s) => s.name), raum.rankings);
+        for (const [name, pkt] of Object.entries(ergebnis.punkte)) {
+          raum.punkte[name] = (raum.punkte[name] ?? 0) + pkt;
+        }
+        raum.ergebnis = ergebnis;
+        raum.status = 'reveal';
+      }
+      speichern();
+      return antwort(res, 200, { ok: true, zustand: oeffentlicherZustand(raum, token) });
+    }
+
+    /* Weiter (Auflösung -> Punktestand -> naechste Runde / Ende) */
+    if (req.method === 'POST' && aktion === 'next') {
+      if (raum.status === 'reveal') {
+        raum.status = 'scoreboard';
+      } else if (raum.status === 'scoreboard') {
+        raum.runde += 1;
+        raum.frage = '';
+        raum.rankings = {};
+        raum.ergebnis = null;
+        raum.status = raum.runde >= raum.spieler.length ? 'finished' : 'question';
+      } else {
+        return fehler(res, 409, 'Hier geht es nicht weiter');
+      }
+      speichern();
+      return antwort(res, 200, { ok: true, zustand: oeffentlicherZustand(raum, token) });
+    }
+
+    return fehler(res, 404, 'nicht gefunden');
+  } catch (err) {
+    console.error(`[${new Date().toISOString()}] FEHLER ${req.method} ${pfad}:`, err);
+    return fehler(res, 500, 'interner Fehler');
+  }
+});
+
+// Aufraeumer: verfallene Raeume entfernen
+setInterval(() => {
+  const jetzt = Date.now();
+  for (const [code, raum] of Object.entries(rooms)) {
+    if (jetzt - raum.aktivitaet > ROOM_TTL_MS) {
+      delete rooms[code];
+      console.log(`Raum ${code} verfallen`);
+    }
+  }
+  speichern();
+}, 10 * 60 * 1000).unref();
+
+server.listen(PORT, () => console.log(`1bis8-game-api lauscht auf :${PORT} (Räume: ${Object.keys(rooms).length})`));
diff --git a/server/web/docker/templates/default.conf.template b/server/web/docker/templates/default.conf.template
index 081df48..08fca26 100644
--- a/server/web/docker/templates/default.conf.template
+++ b/server/web/docker/templates/default.conf.template
@@ -45,6 +45,16 @@ server {
         proxy_read_timeout 15s;
     }
 
+    # Game-API (Multiplayer-Spielräume, Container onebis8-api)
+    location /api/game/ {
+        set $game_api http://onebis8-api:8080;
+        proxy_pass $game_api;
+        proxy_set_header Host $host;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        client_max_body_size 64k;
+        proxy_read_timeout 30s;
+    }
+
     # SPA-Fallback
     location / {
         try_files $uri $uri/ /index.html;