Reduce winner celebration confetti intensity and duration for subtler animation effect

Simplified confetti animation by removing continuous rain effect and reducing burst parameters. Changed color palette to warmer gold/green tones. Decreased particle count from 170 to 55 per burst, reduced spread from 95° to 72°, lowered velocity from 42 to 28, and adjusted positioning. Added gravity, ticks, and scalar parameters for more controlled particle behavior. Shortened total celebration duration from 5500ms to 4200ms.
Prevent winner selection from being overwritten by polling updates using dirty flag
2026-08-02 11:47:16 +02:00 · 2026-08-02 11:38:08 +02:00 · 2026-08-02 10:58:38 +02:00 · 2026-08-02 10:55:42 +02:00 · 2026-08-02 10:52:37 +02:00 · 2026-08-02 10:46:38 +02:00
31 changed files with 1180 additions and 224 deletions
@@ -0,0 +1,67 @@
+import html
+import smtplib
+import ssl
+from email.message import EmailMessage
+from email.utils import formataddr
+
+from .models import AppSettings, User
+
+
+def _settings_ready(settings: AppSettings | None) -> bool:
+    return bool(settings and settings.smtp_host and settings.smtp_from_email)
+
+
+def send_html_email(settings: AppSettings, recipient: str, subject: str, body_html: str, body_text: str):
+    if not _settings_ready(settings):
+        raise ValueError("SMTP settings are incomplete")
+
+    message = EmailMessage()
+    message["Subject"] = subject
+    message["From"] = formataddr((settings.smtp_from_name or "Cluedo HP", settings.smtp_from_email))
+    message["To"] = recipient
+    message.set_content(body_text)
+    message.add_alternative(body_html, subtype="html")
+
+    context = ssl.create_default_context()
+    security = getattr(settings, "smtp_security", "") or ("starttls" if settings.smtp_use_tls else "none")
+    port = settings.smtp_port or (465 if security == "ssl" else 587)
+    smtp_client = smtplib.SMTP_SSL if security == "ssl" else smtplib.SMTP
+    connection = smtp_client(settings.smtp_host, port, timeout=20, context=context) if security == "ssl" else smtp_client(settings.smtp_host, port, timeout=20)
+    with connection as server:
+        server.ehlo()
+        if security == "starttls":
+            server.starttls(context=context)
+            server.ehlo()
+        if settings.smtp_username:
+            server.login(settings.smtp_username, settings.smtp_password)
+        server.send_message(message)
+
+
+def send_user_invite(settings: AppSettings, user: User, invite_url: str):
+    name = html.escape(user.display_name or user.email)
+    safe_url = html.escape(invite_url, quote=True)
+    from_name = html.escape(settings.smtp_from_name or "Cluedo HP")
+    body_html = f"""
+    <!doctype html>
+    <html><body style="margin:0;background:#0b0b0f;color:#f5efdc;font-family:Georgia,serif;">
+      <div style="padding:36px 16px;background:radial-gradient(circle at top,#312b24 0,#0b0b0f 58%);">
+        <div style="max-width:580px;margin:0 auto;border:1px solid #6f603f;border-radius:22px;overflow:hidden;background:#17161b;box-shadow:0 18px 55px rgba(0,0,0,.55);">
+          <div style="padding:28px 30px;text-align:center;background:linear-gradient(135deg,#29231c,#141319);border-bottom:1px solid #6f603f;">
+            <div style="font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#cbb982;">{from_name}</div>
+            <div style="margin-top:10px;font-size:28px;font-weight:bold;color:#e9d8a6;">Eine Einladung wartet</div>
+          </div>
+          <div style="padding:30px;line-height:1.55;color:#f5efdc !important;background:#17161b;">
+            <div style="font-size:20px;color:#e9d8a6 !important;">Hallo {name},</div>
+            <p style="color:#f5efdc !important;margin:16px 0;">du wurdest eingeladen, dem digitalen Zauber-Detektiv-Notizbogen beizutreten.</p>
+            <p style="color:#f5efdc !important;margin:16px 0;">Richte über den folgenden Button dein persönliches Passwort ein:</p>
+            <p style="text-align:center;margin:28px 0;"><a href="{safe_url}" style="display:inline-block;padding:14px 24px;border-radius:12px;background:#b69a5c;color:#171319;text-decoration:none;font-weight:bold;">Einladung annehmen</a></p>
+            <p style="font-size:13px;color:#b8ae98;">Der Link ist 48 Stunden gültig und kann nur einmal verwendet werden.</p>
+            <p style="font-size:12px;color:#8e8777;word-break:break-all;">{safe_url}</p>
+          </div>
+          <div style="padding:16px 30px;color:#8e8777;font-size:12px;border-top:1px solid #302c2b;text-align:center;">Deine Notizen bleiben privat.</div>
+        </div>
+      </div>
+    </body></html>
+    """
+    body_text = f"Hallo {user.display_name or user.email},\n\nbitte richte dein Passwort ein: {invite_url}\n\nDer Link ist 48 Stunden gültig."
+    send_html_email(settings, user.email, "Deine Einladung zum Zauber-Detektiv-Notizbogen", body_html, body_text)
@@ -12,6 +12,7 @@ from .routes.auth import router as auth_router
 from .routes.admin import router as admin_router
 from .routes.games import router as games_router
 from .routes.setup import router as setup_router
+from .routes.invites import router as invites_router

 app = FastAPI(title="Cluedo Sheet")

@@ -31,6 +32,7 @@ app.include_router(auth_router)
 app.include_router(admin_router)
 app.include_router(games_router)
 app.include_router(setup_router)
+app.include_router(invites_router)


 def _rand_join_code(n: int = 6) -> str:
@@ -86,6 +88,14 @@ Very small, pragmatic auto-migration (no alembic).
 - supports old schema (join_code/chip_code) and new schema (code/chip)
 """

+    # --- app settings: explicit SMTP security mode (none/starttls/ssl) ---
+    if not _has_column(db, "app_settings", "smtp_security"):
+        try:
+            db.execute(text("ALTER TABLE app_settings ADD COLUMN smtp_security VARCHAR DEFAULT 'starttls'"))
+            db.commit()
+        except Exception:
+            db.rollback()
+
    # --- users.display_name ---
    if not _has_column(db, "users", "display_name"):
        try:
@@ -41,6 +41,32 @@ class User(Base):
    display_name: Mapped[str] = mapped_column(String, default="")


+class AppSettings(Base):
+    __tablename__ = "app_settings"
+
+    id: Mapped[str] = mapped_column(String, primary_key=True, default="default")
+    smtp_host: Mapped[str] = mapped_column(String, default="")
+    smtp_port: Mapped[int] = mapped_column(Integer, default=587)
+    smtp_username: Mapped[str] = mapped_column(String, default="")
+    smtp_password: Mapped[str] = mapped_column(String, default="")
+    smtp_from_email: Mapped[str] = mapped_column(String, default="")
+    smtp_from_name: Mapped[str] = mapped_column(String, default="Cluedo HP")
+    smtp_use_tls: Mapped[bool] = mapped_column(Boolean, default=True)
+    smtp_security: Mapped[str] = mapped_column(String, default="starttls")
+    app_base_url: Mapped[str] = mapped_column(String, default="http://localhost:8081")
+
+
+class InviteToken(Base):
+    __tablename__ = "invite_tokens"
+    __table_args__ = (UniqueConstraint("token_hash", name="uq_invite_token_hash"),)
+
+    id: Mapped[str] = mapped_column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
+    user_id: Mapped[str] = mapped_column(String, ForeignKey("users.id"), index=True)
+    token_hash: Mapped[str] = mapped_column(String, index=True)
+    expires_at: Mapped[str] = mapped_column(DateTime(timezone=True))
+    used_at: Mapped[str | None] = mapped_column(DateTime(timezone=True), nullable=True)
+
+
 class Game(Base):
    __tablename__ = "games"
    id: Mapped[str] = mapped_column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
@@ -1,7 +1,12 @@
+import hashlib
+import secrets
+from datetime import datetime, timedelta, timezone
+
 from fastapi import APIRouter, Depends, HTTPException, Request
 from sqlalchemy.orm import Session
 from ..db import get_db
-from ..models import User, Role
+from ..mailer import send_html_email, send_user_invite
+from ..models import AppSettings, Game, GameChip, GameMember, InviteToken, SheetState, User, Role
 from ..security import hash_password, get_session_user_id

 router = APIRouter(prefix="/admin", tags=["admin"])
@@ -37,18 +42,69 @@ def create_user(req: Request, data: dict, db: Session = Depends(get_db)):
    password = data.get("password") or ""
    display_name = (data.get("display_name") or "").strip()

-    if not email or not password:
-        raise HTTPException(400, "email/password required")
+    if not email or not display_name:
+        raise HTTPException(400, "name/email required")
    if db.query(User).filter(User.email == email).first():
        raise HTTPException(409, "email exists")

-    role = data.get("role") or Role.user.value
+    role = data.get("role")
+    if not role:
+        raise HTTPException(400, "role required")
    if role not in (Role.admin.value, Role.user.value):
        raise HTTPException(400, "invalid role")

+    settings = db.query(AppSettings).filter(AppSettings.id == "default").first() or AppSettings(id="default")
+    invite_sent = not password
+    raw_token = None
+
+    if invite_sent:
+        if not settings.smtp_host or not settings.smtp_from_email:
+            raise HTTPException(400, "configure SMTP settings before sending invites")
+        raw_token = secrets.token_urlsafe(32)
+        password = secrets.token_urlsafe(32)
+
    u = User(email=email, password_hash=hash_password(password), role=role, display_name=display_name)
-    db.add(u); db.commit()
-    return {"ok": True, "id": u.id}
+    db.add(u)
+    db.flush()
+
+    if invite_sent:
+        invite = InviteToken(
+            user_id=u.id,
+            token_hash=hashlib.sha256(raw_token.encode()).hexdigest(),
+            expires_at=datetime.now(timezone.utc) + timedelta(hours=48),
+        )
+        db.add(invite)
+        invite_url = f"{(settings.app_base_url or 'http://localhost:8081').rstrip('/')}/invite/{raw_token}"
+        try:
+            send_user_invite(settings, u, invite_url)
+        except Exception as exc:
+            db.rollback()
+            raise HTTPException(502, f"invite email could not be sent: {exc}")
+
+    db.commit()
+    return {"ok": True, "id": u.id, "invite_sent": invite_sent}
+    
+@router.delete("/users/{user_id}/permanent")
+def permanently_delete_user(req: Request, user_id: str, db: Session = Depends(get_db)):
+    admin = require_admin(req, db)
+    if admin.id == user_id:
+        raise HTTPException(400, "cannot delete yourself")
+
+    user = db.query(User).filter(User.id == user_id).first()
+    if not user:
+        raise HTTPException(404, "not found")
+    if db.query(Game).filter(Game.host_user_id == user_id).first():
+        raise HTTPException(409, "cannot delete a user who owns games")
+
+    db.query(Game).filter(Game.winner_user_id == user_id).update({Game.winner_user_id: None}, synchronize_session=False)
+    db.query(GameMember).filter(GameMember.user_id == user_id).delete(synchronize_session=False)
+    db.query(GameChip).filter(GameChip.user_id == user_id).delete(synchronize_session=False)
+    db.query(SheetState).filter(SheetState.owner_user_id == user_id).delete(synchronize_session=False)
+    db.query(InviteToken).filter(InviteToken.user_id == user_id).delete(synchronize_session=False)
+    db.delete(user)
+    db.commit()
+    return {"ok": True, "deleted": True}
+

@router.delete("/users/{user_id}")
 def delete_user(req: Request, user_id: str, db: Session = Depends(get_db)):
@@ -106,3 +162,79 @@ def update_user(req: Request, user_id: str, data: dict, db: Session = Depends(ge
    db.add(user)
    db.commit()
    return {"ok": True}
+
+
+def get_settings(db: Session) -> AppSettings:
+    settings = db.query(AppSettings).filter(AppSettings.id == "default").first()
+    if not settings:
+        settings = AppSettings(id="default")
+        db.add(settings)
+        db.commit()
+        db.refresh(settings)
+    return settings
+
+
+@router.get("/settings/smtp")
+def read_smtp_settings(req: Request, db: Session = Depends(get_db)):
+    require_admin(req, db)
+    settings = get_settings(db)
+    return {
+        "smtp_host": settings.smtp_host,
+        "smtp_port": settings.smtp_port,
+        "smtp_username": settings.smtp_username,
+        "smtp_password_configured": bool(settings.smtp_password),
+        "smtp_from_email": settings.smtp_from_email,
+        "smtp_from_name": settings.smtp_from_name,
+        "smtp_security": getattr(settings, "smtp_security", "starttls") or ("starttls" if settings.smtp_use_tls else "none"),
+        "smtp_use_tls": settings.smtp_use_tls,
+        "app_base_url": settings.app_base_url,
+    }
+
+
+@router.patch("/settings/smtp")
+def update_smtp_settings(req: Request, data: dict, db: Session = Depends(get_db)):
+    require_admin(req, db)
+    settings = get_settings(db)
+
+    settings.smtp_host = (data.get("smtp_host") or "").strip()
+    try:
+        settings.smtp_port = int(data.get("smtp_port") or 587)
+    except (TypeError, ValueError):
+        raise HTTPException(400, "SMTP port must be a number")
+    settings.smtp_username = (data.get("smtp_username") or "").strip()
+    settings.smtp_from_email = (data.get("smtp_from_email") or "").strip()
+    settings.smtp_from_name = (data.get("smtp_from_name") or "Cluedo HP").strip()
+    security = data.get("smtp_security") or ("starttls" if data.get("smtp_use_tls", True) else "none")
+    if security not in ("none", "starttls", "ssl"):
+        raise HTTPException(400, "invalid SMTP security mode")
+    settings.smtp_security = security
+    settings.smtp_use_tls = security == "starttls"
+    settings.app_base_url = (data.get("app_base_url") or "http://localhost:8081").strip().rstrip("/")
+    if "smtp_password" in data and data.get("smtp_password"):
+        settings.smtp_password = data["smtp_password"]
+
+    if settings.smtp_host and not settings.smtp_from_email:
+        raise HTTPException(400, "from email required when SMTP is configured")
+    db.add(settings)
+    db.commit()
+    return {"ok": True}
+
+
+@router.post("/settings/smtp/test")
+def test_smtp_settings(req: Request, data: dict, db: Session = Depends(get_db)):
+    require_admin(req, db)
+    settings = get_settings(db)
+    recipient = (data.get("recipient") or "").strip()
+    if not recipient:
+        raise HTTPException(400, "recipient required")
+    try:
+        send_html_email(
+            settings,
+            recipient,
+            "SMTP-Test – Cluedo HP",
+            "<div style='font-family:Georgia,serif;padding:24px;background:#17161b;color:#f5efdc'><h2 style='color:#e9d8a6'>SMTP funktioniert</h2><p>Der Einladungsversand ist bereit.</p></div>",
+            "SMTP funktioniert. Der Einladungsversand ist bereit.",
+        )
+    except Exception as exc:
+        raise HTTPException(502, f"SMTP test failed: {exc}")
+    return {"ok": True}
@@ -205,6 +205,22 @@ def start_game(req: Request, game_id: str, db: Session = Depends(get_db)):
    return {"ok": True, "started": True}


+@router.delete("/{game_id}")
+def cancel_game(req: Request, game_id: str, db: Session = Depends(get_db)):
+    uid = require_user(req, db)
+    g = require_game_member(db, game_id, uid)
+    if g.host_user_id != uid:
+        raise HTTPException(403, "only host can cancel the game")
+
+    # Remove dependent game state before deleting the game itself.
+    db.query(SheetState).filter(SheetState.game_id == game_id).delete(synchronize_session=False)
+    db.query(GameChip).filter(GameChip.game_id == game_id).delete(synchronize_session=False)
+    db.query(GameMember).filter(GameMember.game_id == game_id).delete(synchronize_session=False)
+    db.delete(g)
+    db.commit()
+    return {"ok": True, "cancelled": True}
+
+
@router.get("/{game_id}/chips")
 def list_game_chips(req: Request, game_id: str, db: Session = Depends(get_db)):
    uid = require_user(req, db)
@@ -0,0 +1,47 @@
+import hashlib
+from datetime import datetime, timezone
+
+from fastapi import APIRouter, Depends, HTTPException, Request, Response
+from sqlalchemy.orm import Session
+
+from ..db import get_db
+from ..models import InviteToken, User
+from ..security import hash_password, make_session_value, set_session
+
+router = APIRouter(prefix="/auth/invite", tags=["invites"])
+
+
+def get_invite(token: str, db: Session):
+    token_hash = hashlib.sha256(token.encode()).hexdigest()
+    invite = db.query(InviteToken).filter(InviteToken.token_hash == token_hash).first()
+    expires_at = invite.expires_at if invite else None
+    if expires_at and expires_at.tzinfo is None:
+        expires_at = expires_at.replace(tzinfo=timezone.utc)
+    if not invite or invite.used_at or expires_at <= datetime.now(timezone.utc):
+        raise HTTPException(410, "invite is invalid or expired")
+    user = db.query(User).filter(User.id == invite.user_id, User.disabled == False).first()
+    if not user:
+        raise HTTPException(410, "invite is invalid or expired")
+    return invite, user
+
+
+@router.get("/{token}")
+def invite_info(token: str, db: Session = Depends(get_db)):
+    _invite, user = get_invite(token, db)
+    return {"valid": True, "display_name": user.display_name, "email": user.email, "role": user.role}
+
+
+@router.post("/{token}")
+def accept_invite(token: str, data: dict, resp: Response, db: Session = Depends(get_db)):
+    invite, user = get_invite(token, db)
+    password = data.get("password") or ""
+    if len(password) < 8:
+        raise HTTPException(400, "password too short (min 8)")
+
+    user.password_hash = hash_password(password)
+    invite.used_at = datetime.now(timezone.utc)
+    db.add(user)
+    db.add(invite)
+    db.commit()
+    set_session(resp, make_session_value(user.id))
+    return {"ok": True}
@@ -10,7 +10,8 @@
    "dependencies": {
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
-        "canvas-confetti": "^1.9.3"
+        "canvas-confetti": "^1.9.3",
+        "qrcode": "^1.5.4"
    },
    "devDependencies": {
        "@vitejs/plugin-react": "^4.3.1",
@@ -25,9 +25,14 @@ import WinnerCard from "./components/WinnerCard";
 import WinnerBadge from "./components/WinnerBadge";
 import NewGameModal from "./components/NewGameModal";
 import StatsModal from "./components/StatsModal";
+import AdminSettingsModal from "./components/AdminSettingsModal";
+import InvitePage from "./components/InvitePage";
+import HomePage from "./components/HomePage";
+import { useLanguage } from "./i18n";

 export default function App() {
  useHpGlobalStyles();
+  const { language, t } = useLanguage();

  // Auth/Login UI state
  const [me, setMe] = useState(null);
@@ -55,6 +60,7 @@ export default function App() {

  // Winner selection (host only)
  const [winnerUserId, setWinnerUserId] = useState("");
+  const winnerSelectionDirtyRef = useRef(false);

  // Modals
  const [helpOpen, setHelpOpen] = useState(false);
@@ -62,6 +68,7 @@ export default function App() {
  const [chipEntry, setChipEntry] = useState(null);
  const [userMenuOpen, setUserMenuOpen] = useState(false);
  const [adminOpen, setAdminOpen] = useState(false);
+  const [adminSettingsOpen, setAdminSettingsOpen] = useState(false);

  const [pwOpen, setPwOpen] = useState(false);
  const [pw1, setPw1] = useState("");
@@ -94,6 +101,7 @@ export default function App() {
  const [celebrateOpen, setCelebrateOpen] = useState(false);
  const [celebrateName, setCelebrateName] = useState("");
  const [startCelebrateOpen, setStartCelebrateOpen] = useState(false);
+  const inviteToken = window.location.pathname.startsWith("/invite/") ? decodeURIComponent(window.location.pathname.slice("/invite/".length)) : "";

  // baseline per game: beim ersten Meta-Load NICHT feiern
  const winnerBaselineRef = useRef(false);
@@ -128,7 +136,7 @@ export default function App() {
    const gs = await api("/games");
    setGames(gs);

-    if (gs[0] && !gameId) setGameId(gs[0].id);
+    // Always open on the start page; the user explicitly chooses a game.
  };

  const reloadSheet = async () => {
@@ -142,7 +150,9 @@ export default function App() {

    const meta = await api(`/games/${gameId}`);
    setGameMeta(meta);
-    setWinnerUserId(meta?.winner_user_id || "");
+    if (!winnerSelectionDirtyRef.current) {
+      setWinnerUserId(meta?.winner_user_id || "");
+    }

    const chips = meta?.started ? await api(`/games/${gameId}/chips`) : [];
    setGameChips(chips || []);
@@ -219,6 +229,7 @@ export default function App() {
    lastWinnerIdRef.current = null;
    gameStartBaselineRef.current = false;
    lastGameStartedRef.current = false;
+    winnerSelectionDirtyRef.current = false;
    setCelebrateOpen(false);
    setCelebrateName("");
    setStartCelebrateOpen(false);
@@ -363,6 +374,7 @@ export default function App() {
    setMembers([]);
    setGameChips([]);
    setWinnerUserId("");
+    winnerSelectionDirtyRef.current = false;

    // reset winner celebration on logout
    winnerBaselineRef.current = false;
@@ -393,8 +405,8 @@ export default function App() {
  const savePassword = async () => {
    setPwMsg("");

-    if (!pw1 || pw1.length < 8) return setPwMsg("❌ Passwort muss mindestens 8 Zeichen haben.");
-    if (pw1 !== pw2) return setPwMsg("❌ Passwörter stimmen nicht überein.");
+    if (!pw1 || pw1.length < 8) return setPwMsg(`❌ ${language === "en" ? "Password must be at least 8 characters." : "Passwort muss mindestens 8 Zeichen haben."}`);
+    if (pw1 !== pw2) return setPwMsg(`❌ ${language === "en" ? "Passwords do not match." : "Passwörter stimmen nicht überein."}`);

    setPwSaving(true);
    try {
@@ -402,10 +414,10 @@ export default function App() {
        method: "PATCH",
        body: JSON.stringify({ password: pw1 }),
      });
-      setPwMsg("✅ Passwort gespeichert.");
+      setPwMsg(`✅ ${language === "en" ? "Password saved." : "Passwort gespeichert."}`);
      setTimeout(() => closePwModal(), 650);
    } catch (e) {
-      setPwMsg("❌ Fehler: " + (e?.message || "unknown"));
+      setPwMsg("❌ " + (language === "en" ? "Error: " : "Fehler: ") + (e?.message || "unknown"));
    } finally {
      setPwSaving(false);
    }
@@ -452,7 +464,7 @@ export default function App() {
      setStats(s);
    } catch (e) {
      setStats(null);
-      setStatsError("❌ Fehler: " + (e?.message || "unknown"));
+      setStatsError("❌ " + (language === "en" ? "Error: " : "Fehler: ") + (e?.message || "unknown"));
    } finally {
      setStatsLoading(false);
    }
@@ -471,6 +483,7 @@ export default function App() {
    setMembers([]);
    setGameChips([]);
    setWinnerUserId("");
+    winnerSelectionDirtyRef.current = false;
    setPulseId(null);

    // auch Chip-Modal-State resetten
@@ -488,7 +501,7 @@ export default function App() {

    const g = await api("/games", {
      method: "POST",
-      body: JSON.stringify({ name: "Spiel " + new Date().toLocaleString() }),
+      body: JSON.stringify({ name: (language === "en" ? "Game " : "Spiel ") + new Date().toLocaleString(language === "en" ? "en-US" : "de-DE") }),
    });

    const gs = await api("/games");
@@ -517,6 +530,38 @@ export default function App() {
    await loadGameMeta();
  };

+  const cancelGame = async () => {
+    if (!gameId || !isHost) return;
+    await api(`/games/${gameId}`, { method: "DELETE" });
+    const nextGames = await api("/games");
+    setGames(nextGames);
+    setGameId(null);
+    setSheet(null);
+    setGameMeta(null);
+    setMembers([]);
+    setGameChips([]);
+    setWinnerUserId("");
+    winnerSelectionDirtyRef.current = false;
+    setChipOpen(false);
+    setChipEntry(null);
+    showSnack(language === "en" ? "Game cancelled." : "Spiel abgebrochen.");
+  };
+
+  const goHome = () => {
+    setGameId(null);
+    setSheet(null);
+    setGameMeta(null);
+    setMembers([]);
+    setGameChips([]);
+    setWinnerUserId("");
+    winnerSelectionDirtyRef.current = false;
+    setChipOpen(false);
+    setChipEntry(null);
+    setCelebrateOpen(false);
+    setCelebrateName("");
+    setStartCelebrateOpen(false);
+  };
+
  // ===== Winner =====
  const saveWinner = async () => {
    if (!gameId) return;
@@ -524,9 +569,15 @@ export default function App() {
      method: "PATCH",
      body: JSON.stringify({ winner_user_id: winnerUserId || null }),
    });
+    winnerSelectionDirtyRef.current = false;
    await loadGameMeta();
  };

+  const selectWinner = (value) => {
+    winnerSelectionDirtyRef.current = true;
+    setWinnerUserId(value);
+  };
+
  // ===== Sheet actions =====
  const cycleStatus = async (entry) => {
    if (gameMeta?.winner_user_id) return;
@@ -553,7 +604,7 @@ export default function App() {

    if (next === "s") {
      if (!gameMeta?.started || gameChips.length === 0) {
-        showSnack("Das Spiel muss zuerst gestartet werden.");
+        showSnack(language === "en" ? "The game must be started first." : "Das Spiel muss zuerst gestartet werden.");
        return;
      }
      setChipEntry(entry);
@@ -628,6 +679,10 @@ export default function App() {
  };

  // ===== Login page =====
+  if (inviteToken) {
+    return <InvitePage token={inviteToken} />;
+  }
+
  if (!me) {
    return (
      <LoginPage
@@ -656,9 +711,9 @@ export default function App() {

  const sections = sheet
    ? [
-        { key: "suspect", title: "VERDÄCHTIGE PERSON", entries: sheet.suspect || [] },
-        { key: "item", title: "GEGENSTAND", entries: sheet.item || [] },
-        { key: "location", title: "ORT", entries: sheet.location || [] },
+        { key: "suspect", title: t("suspects").toUpperCase(), entries: sheet.suspect || [] },
+        { key: "item", title: t("items").toUpperCase(), entries: sheet.item || [] },
+        { key: "location", title: t("locations").toUpperCase(), entries: sheet.location || [] },
      ]
    : [];

@@ -694,6 +749,10 @@ export default function App() {
            setAdminOpen(true);
            setUserMenuOpen(false);
          }}
+          openAdminSettings={() => {
+            setAdminSettingsOpen(true);
+            setUserMenuOpen(false);
+          }}
          doLogout={doLogout}
          onOpenNewGame={() => setNewGameOpen(true)}
        />
@@ -701,7 +760,13 @@ export default function App() {
        {me.role === "admin" && (
          <AdminPanel open={adminOpen} onClose={() => setAdminOpen(false)} currentUserId={me.id} />
        )}
+        {me.role === "admin" && (
+          <AdminSettingsModal open={adminSettingsOpen} onClose={() => setAdminSettingsOpen(false)} />
+        )}

+        {!gameId ? (
+          <HomePage games={games} onOpenNewGame={() => setNewGameOpen(true)} onOpenGame={setGameId} />
+        ) : <>
        <GamePickerCard
          games={games}
          gameId={gameId}
@@ -716,6 +781,8 @@ export default function App() {
          winnerName={gameMeta?.winner_display_name || gameMeta?.winner_email || ""}
          chipCount={gameChips.length}
          onStartGame={startGame}
+          onCancelGame={cancelGame}
+          onGoHome={goHome}
        />

        {gameStarted && (
@@ -726,6 +793,7 @@ export default function App() {
            }}
          />
        )}
+        </>}

        <HelpModal open={helpOpen} onClose={() => setHelpOpen(false)} />

@@ -752,7 +820,7 @@ export default function App() {
            isHost={isHost}
            members={members}
            winnerUserId={winnerUserId}
-            setWinnerUserId={setWinnerUserId}
+            setWinnerUserId={selectWinner}
            onSave={saveWinner}
          />
        )}
@@ -3,15 +3,18 @@ import { createPortal } from "react-dom";
 import { api } from "../api/client";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
+import { useLanguage } from "../i18n";

 const emptyForm = { displayName: "", email: "", password: "", role: "user", disabled: false };

 export default function AdminPanel({ open: dashboardOpen = false, onClose, currentUserId }) {
+  const { language, t } = useLanguage();
  const [users, setUsers] = useState([]);
  const [editorOpen, setEditorOpen] = useState(false);
  const [editingUser, setEditingUser] = useState(null);
  const [form, setForm] = useState(emptyForm);
  const [msg, setMsg] = useState("");
+  const [notice, setNotice] = useState("");
  const [saving, setSaving] = useState(false);

  useEffect(() => {
@@ -38,6 +41,7 @@ export default function AdminPanel({ open: dashboardOpen = false, onClose, curre
    setEditingUser(null);
    setForm({ ...emptyForm });
    setMsg("");
+    setNotice("");
    setEditorOpen(true);
  };

@@ -51,6 +55,7 @@ export default function AdminPanel({ open: dashboardOpen = false, onClose, curre
      disabled: !!user.disabled,
    });
    setMsg("");
+    setNotice("");
    setEditorOpen(true);
  };

@@ -62,9 +67,9 @@ export default function AdminPanel({ open: dashboardOpen = false, onClose, curre

  const saveUser = async () => {
    setMsg("");
-    if (!form.email.trim()) return setMsg("❌ E-Mail ist erforderlich.");
-    if (!editingUser && form.password.length < 8) return setMsg("❌ Passwort muss mindestens 8 Zeichen haben.");
-    if (editingUser && form.password && form.password.length < 8) return setMsg("❌ Neues Passwort muss mindestens 8 Zeichen haben.");
+      if (!form.email.trim()) return setMsg(`❌ ${t("email")} ${language === "en" ? "is required." : "ist erforderlich."}`);
+    if (!editingUser && form.password && form.password.length < 8) return setMsg(`❌ ${t("password")} ${language === "en" ? "must be at least 8 characters." : "muss mindestens 8 Zeichen haben."}`);
+    if (editingUser && form.password && form.password.length < 8) return setMsg(`❌ ${language === "en" ? "New password must be at least 8 characters." : "Neues Passwort muss mindestens 8 Zeichen haben."}`);

    setSaving(true);
    try {
@@ -76,14 +81,15 @@ export default function AdminPanel({ open: dashboardOpen = false, onClose, curre
      };
      if (form.password) payload.password = form.password;

-      await api(editingUser ? `/admin/users/${editingUser.id}` : "/admin/users", {
+      const result = await api(editingUser ? `/admin/users/${editingUser.id}` : "/admin/users", {
        method: editingUser ? "PATCH" : "POST",
        body: JSON.stringify(payload),
      });
      await loadUsers();
+      setNotice(result.invite_sent ? (language === "en" ? "✅ Invitation sent by email." : "✅ Einladung wurde per E-Mail versendet.") : (language === "en" ? "✅ User saved." : "✅ User gespeichert."));
      closeEditor();
    } catch (e) {
-      setMsg("❌ " + (e?.message || "Speichern fehlgeschlagen."));
+      setMsg("❌ " + (e?.message || (language === "en" ? "Saving failed." : "Speichern fehlgeschlagen.")));
    } finally {
      setSaving(false);
    }
@@ -96,7 +102,20 @@ export default function AdminPanel({ open: dashboardOpen = false, onClose, curre
      await api(`/admin/users/${user.id}`, { method: "DELETE" });
      await loadUsers();
    } catch (e) {
-      alert("Fehler: " + (e?.message || "unknown"));
+      alert((language === "en" ? "Error: " : "Fehler: ") + (e?.message || "unknown"));
+    }
+  };
+
+  const permanentlyDeleteUser = async (user) => {
+    if (user.id === currentUserId) return;
+    const label = user.display_name || user.email;
+    if (!window.confirm(language === "en" ? `Delete ${label} permanently? This cannot be undone.` : `${label} wirklich dauerhaft löschen? Dieser Vorgang kann nicht rückgängig gemacht werden.`)) return;
+    try {
+      await api(`/admin/users/${user.id}/permanent`, { method: "DELETE" });
+      await loadUsers();
+      setNotice(language === "en" ? "✅ User permanently deleted." : "✅ User dauerhaft gelöscht.");
+    } catch (e) {
+      alert((language === "en" ? "Error: " : "Fehler: ") + (e?.message || "unknown"));
    }
  };

@@ -108,16 +127,17 @@ export default function AdminPanel({ open: dashboardOpen = false, onClose, curre
        <div style={{ padding: "18px 18px 16px" }}>
          <div style={styles.modalHeader}>
            <div>
-              <div style={{ fontWeight: 1000, color: stylesTokens.textGold, fontSize: 19 }}>Admin Dashboard</div>
-              <div style={{ marginTop: 3, color: stylesTokens.textDim, fontSize: 12 }}>Benutzer, Rollen und Zugangsdaten verwalten</div>
+              <div style={{ fontWeight: 1000, color: stylesTokens.textGold, fontSize: 19 }}>{t("adminDashboard")}</div>
+              <div style={{ marginTop: 3, color: stylesTokens.textDim, fontSize: 12 }}>{t("adminDashboardSubtitle")}</div>
            </div>
            <button onClick={onClose} style={styles.modalCloseBtn} aria-label="Dashboard schließen">✕</button>
          </div>

          <div style={{ marginTop: 18, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10 }}>
-            <div style={{ color: stylesTokens.textMain, fontWeight: 900 }}>Vorhandene User <span style={{ color: stylesTokens.textDim, fontWeight: 700 }}>({users.length})</span></div>
-            <button onClick={openCreate} style={styles.primaryBtn}>+ User anlegen</button>
+            <div style={{ color: stylesTokens.textMain, fontWeight: 900 }}>{t("existingUsers")} <span style={{ color: stylesTokens.textDim, fontWeight: 700 }}>({users.length})</span></div>
+            <button onClick={openCreate} style={styles.primaryBtn}>+ {t("createUser")}</button>
          </div>
+          {notice && <div style={{ marginTop: 10, color: "#baf3c9", fontSize: 13 }}>{notice}</div>}

          <div style={{ marginTop: 10, display: "grid", gap: 9 }}>
            {users.map((user) => (
@@ -127,8 +147,9 @@ export default function AdminPanel({ open: dashboardOpen = false, onClose, curre
                <div className="hp-admin-role" style={{ textAlign: "center", fontWeight: 900, color: stylesTokens.textGold }}>{user.role}</div>
                <div className={`hp-admin-status ${user.disabled ? "hp-admin-status--disabled" : ""}`} style={{ textAlign: "center", opacity: 0.85 }}>{user.disabled ? "disabled" : "active"}</div>
                <div className="hp-admin-actions">
-                  <button className="hp-admin-action hp-admin-icon-action" onClick={() => openEdit(user)} style={styles.secondaryBtn} title="User bearbeiten" aria-label={`${user.display_name || user.email} bearbeiten`}>✎</button>
-                  <button className="hp-admin-action hp-admin-icon-action" onClick={() => disableUser(user)} disabled={user.id === currentUserId || user.disabled} style={{ ...styles.secondaryBtn, color: "#ffb3b3" }} title={user.disabled ? "User ist deaktiviert" : "User deaktivieren"} aria-label={`${user.display_name || user.email} deaktivieren`}>⏻</button>
+                  <button className="hp-admin-action hp-admin-icon-action" onClick={() => openEdit(user)} style={styles.secondaryBtn} title={t("edit")} aria-label={`${user.display_name || user.email} ${t("edit")}`}>✎</button>
+                  <button className="hp-admin-action hp-admin-icon-action" onClick={() => disableUser(user)} disabled={user.id === currentUserId || user.disabled} style={{ ...styles.secondaryBtn, color: "#ffb3b3" }} title={user.disabled ? t("disabled") : t("disable")} aria-label={`${user.display_name || user.email} ${t("disable")}`}>⏻</button>
+                  <button className="hp-admin-action hp-admin-icon-action" onClick={() => permanentlyDeleteUser(user)} disabled={user.id === currentUserId} style={{ ...styles.secondaryBtn, color: "#ff8f9b" }} title={language === "en" ? "Delete permanently" : "Dauerhaft löschen"} aria-label={`${user.display_name || user.email} ${language === "en" ? "delete permanently" : "dauerhaft löschen"}`}>🗑</button>
                </div>
              </div>
            ))}
@@ -141,20 +162,21 @@ export default function AdminPanel({ open: dashboardOpen = false, onClose, curre
          <div className="hp-admin-editor-card" style={{ ...styles.modalCard, width: "min(470px, 100%)" }} onMouseDown={(e) => e.stopPropagation()}>
            <div style={styles.modalHeader}>
              <div>
-                <div style={{ fontWeight: 1000, color: stylesTokens.textGold, fontSize: 18 }}>{editingUser ? "User bearbeiten" : "Neuen User anlegen"}</div>
-                <div style={{ marginTop: 3, color: stylesTokens.textDim, fontSize: 12 }}>{editingUser ? "Profil und Zugangsdaten aktualisieren" : "Ein neues Benutzerkonto erstellen"}</div>
+                <div style={{ fontWeight: 1000, color: stylesTokens.textGold, fontSize: 18 }}>{editingUser ? t("editUser") : t("newUser")}</div>
+                <div style={{ marginTop: 3, color: stylesTokens.textDim, fontSize: 12 }}>{editingUser ? (language === "en" ? "Update profile and credentials" : "Profil und Zugangsdaten aktualisieren") : (language === "en" ? "Create a new user account" : "Ein neues Benutzerkonto erstellen")}</div>
              </div>
-              <button onClick={closeEditor} style={styles.modalCloseBtn} aria-label="Schließen">✕</button>
+              <button onClick={closeEditor} style={styles.modalCloseBtn} aria-label={t("close")}>✕</button>
            </div>

            <div style={{ marginTop: 18, display: "grid", gap: 10 }}>
-              <label style={styles.adminFieldLabel}>Anzeigename<input value={form.displayName} onChange={(e) => setField("displayName", e.target.value)} placeholder="z. B. Sascha Nesterovic" style={styles.input} autoFocus /></label>
-              <label style={styles.adminFieldLabel}>E-Mail<input value={form.email} onChange={(e) => setField("email", e.target.value)} placeholder="name@example.com" style={styles.input} inputMode="email" /></label>
-              <label style={styles.adminFieldLabel}>{editingUser ? "Neues Passwort (optional)" : "Passwort"}<input value={form.password} onChange={(e) => setField("password", e.target.value)} placeholder={editingUser ? "Leer lassen = unverändert" : "Mindestens 8 Zeichen"} type="password" style={styles.input} /></label>
-              <label style={styles.adminFieldLabel}>Rolle<select value={form.role} onChange={(e) => setField("role", e.target.value)} disabled={editingUser?.id === currentUserId} style={styles.input}><option value="user">User</option><option value="admin">Admin</option></select></label>
-              {editingUser && <label className="hp-admin-check"><input type="checkbox" checked={!form.disabled} onChange={(e) => setField("disabled", !e.target.checked)} /> Konto ist aktiv</label>}
+              <label style={styles.adminFieldLabel}>{t("displayName")}<input value={form.displayName} onChange={(e) => setField("displayName", e.target.value)} placeholder={language === "en" ? "e.g. Sascha Nesterovic" : "z. B. Sascha Nesterovic"} style={styles.input} autoFocus /></label>
+              <label style={styles.adminFieldLabel}>{t("email")}<input value={form.email} onChange={(e) => setField("email", e.target.value)} placeholder="name@example.com" style={styles.input} inputMode="email" /></label>
+              <label style={styles.adminFieldLabel}>{editingUser ? `${t("password")} (${t("optional")})` : `${t("password")} (${t("optional")})`}<input value={form.password} onChange={(e) => setField("password", e.target.value)} placeholder={editingUser ? (language === "en" ? "Leave blank = unchanged" : "Leer lassen = unverändert") : t("inviteHint")} type="password" style={styles.input} /></label>
+              <label style={styles.adminFieldLabel}>{t("role")}<select value={form.role} onChange={(e) => setField("role", e.target.value)} disabled={editingUser?.id === currentUserId} style={styles.input}><option value="user">{t("user")}</option><option value="admin">{t("admin")}</option></select></label>
+              {editingUser && <label className="hp-admin-check"><input type="checkbox" checked={!form.disabled} onChange={(e) => setField("disabled", !e.target.checked)} /> {t("accountActive")}</label>}
              {msg && <div style={{ color: "#ffb3b3", fontSize: 13 }}>{msg}</div>}
-              <button onClick={saveUser} style={{ ...styles.primaryBtn, width: "100%", marginTop: 4 }} disabled={saving}>{saving ? "Speichern …" : editingUser ? "Änderungen speichern" : "User erstellen"}</button>
+              {!editingUser && <div style={{ color: stylesTokens.textDim, fontSize: 12 }}>{t("inviteNotice")}</div>}
+              <button onClick={saveUser} style={{ ...styles.primaryBtn, width: "100%", marginTop: 4 }} disabled={saving}>{saving ? (language === "en" ? "Saving …" : "Speichern …") : editingUser ? (language === "en" ? "Save changes" : "Änderungen speichern") : t("createUser")}</button>
            </div>
          </div>
        </div>,
@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { api } from "../api/client";
+import { styles } from "../styles/styles";
+import { stylesTokens } from "../styles/theme";
+import { useLanguage } from "../i18n";
+
+const initial = {
+  smtp_host: "", smtp_port: 587, smtp_username: "", smtp_password: "",
+  smtp_from_email: "", smtp_from_name: "Cluedo HP", smtp_security: "starttls",
+  app_base_url: window.location.origin,
+};
+
+export default function AdminSettingsModal({ open, onClose }) {
+  const { language, t } = useLanguage();
+  const [form, setForm] = useState(initial);
+  const [configured, setConfigured] = useState(false);
+  const [recipient, setRecipient] = useState("");
+  const [message, setMessage] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [testing, setTesting] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setMessage("");
+    api("/admin/settings/smtp").then((data) => {
+      setForm({ ...initial, ...data, smtp_password: "" });
+      setConfigured(!!data.smtp_password_configured);
+    }).catch((error) => setMessage("❌ " + (error?.message || (language === "en" ? "Loading failed." : "Laden fehlgeschlagen."))));
+  }, [open]);
+
+  const setField = (key, value) => setForm((current) => ({ ...current, [key]: value }));
+  const save = async () => {
+    setSaving(true); setMessage("");
+    try {
+      await api("/admin/settings/smtp", { method: "PATCH", body: JSON.stringify(form) });
+      setConfigured(!!form.smtp_password || configured);
+      setMessage("✅ SMTP-Einstellungen gespeichert.");
+    } catch (error) { setMessage("❌ " + (error?.message || (language === "en" ? "Saving failed." : "Speichern fehlgeschlagen."))); }
+    finally { setSaving(false); }
+  };
+  const test = async () => {
+    if (!recipient.trim()) return setMessage(`❌ ${language === "en" ? "Please enter a test email." : "Bitte eine Test-E-Mail angeben."}`);
+    setTesting(true); setMessage("");
+    try {
+      await api("/admin/settings/smtp/test", { method: "POST", body: JSON.stringify({ recipient }) });
+      setMessage("✅ Test-E-Mail wurde versendet.");
+    } catch (error) { setMessage("❌ " + (error?.message || (language === "en" ? "Test failed." : "Test fehlgeschlagen."))); }
+    finally { setTesting(false); }
+  };
+
+  if (!open) return null;
+  return createPortal(
+    <div style={styles.modalOverlay} onMouseDown={onClose}>
+      <div className="hp-admin-settings-card" style={{ ...styles.modalCard, width: "min(620px, 100%)" }} onMouseDown={(e) => e.stopPropagation()}>
+        <div style={styles.modalHeader}>
+          <div><div style={{ fontWeight: 1000, color: stylesTokens.textGold, fontSize: 19 }}>{t("adminSettings")}</div><div style={{ color: stylesTokens.textDim, fontSize: 12, marginTop: 3 }}>{t("adminSettingsSubtitle")}</div></div>
+          <button onClick={onClose} style={styles.modalCloseBtn} aria-label={t("close")}>✕</button>
+        </div>
+
+        <div style={{ marginTop: 16, display: "grid", gap: 10 }}>
+          <div className="hp-settings-grid">
+            <label style={styles.adminFieldLabel}>{t("smtpServer")}<input value={form.smtp_host} onChange={(e) => setField("smtp_host", e.target.value)} placeholder="smtp.example.com" style={styles.input} /></label>
+            <label style={styles.adminFieldLabel}>{t("port")}<input type="number" value={form.smtp_port} onChange={(e) => setField("smtp_port", e.target.value)} style={styles.input} /></label>
+          </div>
+          <div className="hp-settings-grid">
+            <label style={styles.adminFieldLabel}>{t("smtpUsername")}<input value={form.smtp_username} onChange={(e) => setField("smtp_username", e.target.value)} placeholder={t("optional")} style={styles.input} /></label>
+            <label style={styles.adminFieldLabel}>{t("password")}<input type="password" value={form.smtp_password} onChange={(e) => setField("smtp_password", e.target.value)} placeholder={configured ? "••••••••" : t("optional")} style={styles.input} /></label>
+          </div>
+          <div className="hp-settings-grid">
+            <label style={styles.adminFieldLabel}>{t("senderEmail")}<input type="email" value={form.smtp_from_email} onChange={(e) => setField("smtp_from_email", e.target.value)} placeholder="noreply@example.com" style={styles.input} /></label>
+            <label style={styles.adminFieldLabel}>{t("senderName")}<input value={form.smtp_from_name} onChange={(e) => setField("smtp_from_name", e.target.value)} style={styles.input} /></label>
+          </div>
+          <label style={styles.adminFieldLabel}>{t("appUrl")}<input value={form.app_base_url} onChange={(e) => setField("app_base_url", e.target.value)} placeholder="https://notizbogen.example.com" style={styles.input} /></label>
+          <label style={styles.adminFieldLabel}>{language === "en" ? "SMTP encryption" : "SMTP-Verschlüsselung"}<select value={form.smtp_security || "starttls"} onChange={(e) => { const security = e.target.value; setField("smtp_security", security); if (security === "ssl" && String(form.smtp_port) === "587") setField("smtp_port", 465); if (security === "starttls" && String(form.smtp_port) === "465") setField("smtp_port", 587); }} style={styles.input}>
+            <option value="none">{language === "en" ? "None" : "Keine Verschlüsselung"}</option>
+            <option value="starttls">STARTTLS</option>
+            <option value="ssl">{language === "en" ? "TLS/SSL (direct, port 465)" : "TLS/SSL (direkt, Port 465)"}</option>
+          </select></label>
+          <div className="hp-settings-test">
+            <label style={{ ...styles.adminFieldLabel, flex: 1 }}>{t("testEmail")}<input type="email" value={recipient} onChange={(e) => setRecipient(e.target.value)} placeholder="you@example.com" style={styles.input} /></label>
+            <button onClick={test} style={styles.secondaryBtn} disabled={testing}>{testing ? (language === "en" ? "Sending …" : "Sende …") : t("sendTest")}</button>
+          </div>
+          {message && <div style={{ color: message.startsWith("✅") ? "#baf3c9" : "#ffb3b3", fontSize: 13 }}>{message}</div>}
+          <button onClick={save} style={{ ...styles.primaryBtn, width: "100%" }} disabled={saving}>{saving ? (language === "en" ? "Saving …" : "Speichern …") : t("saveSettings")}</button>
+        </div>
+      </div>
+    </div>, document.body
+  );
+}
@@ -1,21 +1,23 @@
 import React from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
+import { useLanguage } from "../i18n";

 export default function ChipModal({ chipOpen, closeChipModalToDash, chooseChip, chips = [] }) {
+  const { language, t } = useLanguage();
  if (!chipOpen) return null;

  return (
    <div style={styles.modalOverlay} onMouseDown={closeChipModalToDash}>
      <div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
        <div style={styles.modalHeader}>
-          <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>Wer hat die Karte?</div>
-          <button onClick={closeChipModalToDash} style={styles.modalCloseBtn} aria-label="Schließen">
+          <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>{t("whoHasCard")}</div>
+          <button onClick={closeChipModalToDash} style={styles.modalCloseBtn} aria-label={t("close")}>
            ✕
          </button>
        </div>

-        <div style={{ marginTop: 12, color: stylesTokens.textMain }}>Chip auswählen:</div>
+        <div style={{ marginTop: 12, color: stylesTokens.textMain }}>{t("selectChip")}:</div>

        <div style={styles.chipGrid}>
          {chips.map((item) => (
@@ -27,12 +29,12 @@ export default function ChipModal({ chipOpen, closeChipModalToDash, chooseChip,

        {!chips.length && (
          <div style={{ marginTop: 12, color: stylesTokens.textDim }}>
-            Das Spiel wurde noch nicht gestartet oder es sind keine Spieler-Chips vorhanden.
+            {language === "en" ? "The game has not started yet or no player chips exist." : "Das Spiel wurde noch nicht gestartet oder es sind keine Spieler-Chips vorhanden."}
          </div>
        )}

        <div style={{ marginTop: 12, fontSize: 12, color: stylesTokens.textDim }}>
-          Tipp: Wenn du wieder auf den Notiz-Button klickst, geht’s von <b>s</b> zurück auf —.
+          {language === "en" ? <>Tip: Tap the note button again to go from <b>s</b> back to —.</> : <>Tipp: Wenn du wieder auf den Notiz-Button klickst, geht’s von <b>s</b> zurück auf —.</>}
        </div>
      </div>
    </div>
@@ -2,8 +2,10 @@ import React from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
 import { THEMES } from "../styles/themes";
+import { useLanguage } from "../i18n";

 export default function DesignModal({ open, onClose, themeKey, onSelect }) {
+  const { language, t } = useLanguage();
  if (!open) return null;

  const themeEntries = Object.entries(THEMES);
@@ -12,14 +14,14 @@ export default function DesignModal({ open, onClose, themeKey, onSelect }) {
    <div style={styles.modalOverlay} onMouseDown={onClose}>
      <div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
        <div style={styles.modalHeader}>
-          <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>Design ändern</div>
-          <button onClick={onClose} style={styles.modalCloseBtn} aria-label="Schließen">
+          <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>{t("changeDesign")}</div>
+          <button onClick={onClose} style={styles.modalCloseBtn} aria-label={t("close")}>
            ✕
          </button>
        </div>

        <div style={{ marginTop: 12, color: stylesTokens.textMain, opacity: 0.92 }}>
-          Wähle dein Theme:
+          {language === "en" ? "Choose your theme:" : "Wähle dein Theme:"}
        </div>

        <div style={{ marginTop: 12, display: "grid", gap: 10 }}>
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
+import { useLanguage } from "../i18n";

 export default function GamePickerCard({
  games,
@@ -16,10 +17,14 @@ export default function GamePickerCard({
  winnerName = "",
  chipCount = 0,
  onStartGame,
+  onCancelGame,
+  onGoHome,
 }) {
+  const { language, t } = useLanguage();
  const cur = games.find((x) => x.id === gameId);
  const [starting, setStarting] = useState(false);
  const [startError, setStartError] = useState("");
+  const [cancelling, setCancelling] = useState(false);

  const renderMemberName = (m) => {
    const base = ((m.display_name || "").trim() || (m.email || "").trim() || "—");
@@ -52,23 +57,38 @@ export default function GamePickerCard({

  const handleStartGame = async () => {
    if (!onStartGame || starting || members.length < 2) return;
-    if (!window.confirm("Spiel jetzt starten? Danach können keine weiteren Spieler beitreten.")) return;
+    if (!window.confirm(language === "en" ? "Start the game now? No more players can join afterwards." : "Spiel jetzt starten? Danach können keine weiteren Spieler beitreten.")) return;

    setStarting(true);
    setStartError("");
    try {
      await onStartGame();
    } catch (e) {
-      setStartError(e?.message || "Das Spiel konnte nicht gestartet werden.");
+      setStartError(e?.message || (language === "en" ? "The game could not be started." : "Das Spiel konnte nicht gestartet werden."));
    } finally {
      setStarting(false);
    }
  };

+  const handleCancelGame = async () => {
+    if (!onCancelGame || cancelling) return;
+    const confirmed = window.confirm(language === "en" ? "Cancel and delete this game? All game data will be removed." : "Dieses Spiel wirklich abbrechen und löschen? Alle Spieldaten werden entfernt.");
+    if (!confirmed) return;
+    setCancelling(true);
+    setStartError("");
+    try {
+      await onCancelGame();
+    } catch (e) {
+      setStartError(e?.message || (language === "en" ? "The game could not be cancelled." : "Das Spiel konnte nicht abgebrochen werden."));
+    } finally {
+      setCancelling(false);
+    }
+  };
+
  return (
    <div style={{ marginTop: 14 }}>
      <div style={styles.card}>
-        <div style={styles.sectionHeader}>Spiel</div>
+        <div style={styles.sectionHeader}>{t("game")}</div>

        <div style={styles.cardBody}>
          <select
@@ -83,8 +103,11 @@ export default function GamePickerCard({
            ))}
          </select>

-          <button onClick={onOpenHelp} style={styles.helpBtn} title="Hilfe">
-            Hilfe
+          <button onClick={onGoHome} style={styles.helpBtn} title={language === "en" ? "Home" : "Startseite"} aria-label={language === "en" ? "Home" : "Startseite"}>
+            🏠
+          </button>
+          <button onClick={onOpenHelp} style={styles.helpBtn} title={t("help")} aria-label={t("help")}>
+            ❔
          </button>
        </div>

@@ -122,15 +145,15 @@ export default function GamePickerCard({
            <div className="hp-lobby-header" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12 }}>
              <div>
                <div style={{ color: stylesTokens.textGold, fontWeight: 1000, fontSize: 15 }}>
-                  Lobby
+                  {t("lobby")}
                </div>
                <div style={{ marginTop: 3, color: stylesTokens.textDim, fontSize: 12 }}>
-                  {isHost ? "Du bist der Host dieses Spiels." : "Du bist der Lobby beigetreten."}
+                  {isHost ? (language === "en" ? "You are the host of this game." : "Du bist der Host dieses Spiels.") : (language === "en" ? "You joined the lobby." : "Du bist der Lobby beigetreten.")}
                </div>
              </div>
              <div style={{ textAlign: "right", color: stylesTokens.textGold, fontWeight: 1000 }}>
                <div style={{ fontSize: 20, lineHeight: 1 }}>{members.length}</div>
-                <div style={{ fontSize: 11, color: stylesTokens.textDim, fontWeight: 700 }}>Spieler</div>
+                <div style={{ fontSize: 11, color: stylesTokens.textDim, fontWeight: 700 }}>{t("players")}</div>
              </div>
            </div>

@@ -138,7 +161,7 @@ export default function GamePickerCard({
              {members.length > 0 ? members.map((m, index) => {
                const isMe = String(me?.id) === String(m.id);
                const isMemberHost = String(hostUserId) === String(m.id);
-                const name = ((m.display_name || "").trim() || (m.email || "").trim() || "Spieler");
+                const name = ((m.display_name || "").trim() || (m.email || "").trim() || t("players"));
                return (
                  <div key={m.id} className="hp-lobby-player" style={{ display: "flex", alignItems: "center", gap: 9, padding: "8px 10px", borderRadius: 11, background: "rgba(255,255,255,0.055)", border: "1px solid rgba(233,216,166,0.10)" }}>
                    <span style={{ color: stylesTokens.textDim, fontSize: 12, minWidth: 16 }}>{index + 1}</span>
@@ -150,7 +173,7 @@ export default function GamePickerCard({
                );
              }) : (
                <div style={{ padding: "10px 4px", color: stylesTokens.textDim, fontSize: 13 }}>
-                  Warte auf Spieler …
+                  {language === "en" ? "Waiting for players …" : "Warte auf Spieler …"}
                </div>
              )}
            </div>
@@ -162,26 +185,32 @@ export default function GamePickerCard({
                  style={{ ...styles.primaryBtn, width: "100%", marginTop: 12 }}
                  disabled={starting || members.length < 2}
                >
-                  {starting ? "Spiel wird gestartet …" : "▶ Spiel starten"}
+                  {starting ? (language === "en" ? "Starting game …" : "Spiel wird gestartet …") : `▶ ${t("startGame")}`}
                </button>
                <div style={{ marginTop: 7, textAlign: "center", color: stylesTokens.textDim, fontSize: 11 }}>
-                  {members.length < 2 ? "Mindestens 2 Spieler werden benötigt." : "Beim Start werden die Spieler-Chips erstellt."}
+                  {members.length < 2 ? t("atLeastTwoPlayers") : t("chipsOnStart")}
                </div>
+                <button onClick={handleCancelGame} style={{ ...styles.secondaryBtn, width: "100%", marginTop: 9, color: "#ffb3b3" }} disabled={cancelling}>
+                  {cancelling ? (language === "en" ? "Cancelling …" : "Wird abgebrochen …") : (language === "en" ? "✕ Cancel game" : "✕ Spiel abbrechen")}
+                </button>
              </>
            ) : (
              <div style={{ marginTop: 11, padding: "9px 10px", borderRadius: 11, background: "rgba(233,216,166,0.07)", color: stylesTokens.textDim, fontSize: 12, textAlign: "center" }}>
-                Warte, bis der Host das Spiel startet.
+                {t("waitingForHost")}
              </div>
            )}

            {startError && <div style={{ marginTop: 8, color: "#ffb3b3", fontSize: 12 }}>{startError}</div>}
          </div>
        ) : (
-          <div style={{ margin: "0 12px 12px", padding: "10px 12px", borderRadius: 13, border: `1px solid ${stylesTokens.panelBorder}`, background: finished ? "rgba(233,216,166,0.09)" : "rgba(124,255,182,0.07)", color: stylesTokens.textDim, fontSize: 12 }}>
-            {finished
-              ? `🏆 Spiel beendet${winnerName ? ` · Sieger: ${winnerName}` : ""}`
-              : `✓ Spiel läuft · ${chipCount} Spieler-Chips erstellt`}
-          </div>
+          <>
+            <div style={{ margin: "0 12px 12px", padding: "10px 12px", borderRadius: 13, border: `1px solid ${stylesTokens.panelBorder}`, background: finished ? "rgba(233,216,166,0.09)" : "rgba(124,255,182,0.07)", color: stylesTokens.textDim, fontSize: 12 }}>
+              {finished
+                ? `🏆 ${t("finished")}${winnerName ? ` · ${t("winner")}: ${winnerName}` : ""}`
+                : `✓ ${t("started")} · ${chipCount} ${t("chipsCreated")}`}
+            </div>
+            {isHost && !finished && <button onClick={handleCancelGame} style={{ ...styles.secondaryBtn, margin: "0 12px 12px", width: "calc(100% - 24px)", color: "#ffb3b3" }} disabled={cancelling}>{cancelling ? (language === "en" ? "Cancelling …" : "Wird abgebrochen …") : (language === "en" ? "✕ Cancel game" : "✕ Spiel abbrechen")}</button>}
+          </>
        )}

        {/* Spieler */}
@@ -198,7 +227,7 @@ export default function GamePickerCard({
                gap: 10,
              }}
            >
-              <div>Spieler</div>
+              <div>{t("players")}</div>
              <div style={{ fontWeight: 900, color: stylesTokens.textGold }}>
                {members.length}
              </div>
@@ -2,8 +2,10 @@ import React, { useEffect } from "react";
 import { createPortal } from "react-dom";
 import confetti from "canvas-confetti";
 import { stylesTokens } from "../styles/theme";
+import { useLanguage } from "../i18n";

 export default function GameStartCelebration({ open, onClose }) {
+  const { t, language } = useLanguage();
  useEffect(() => {
    if (!open) return;

@@ -29,14 +31,14 @@ export default function GameStartCelebration({ open, onClose }) {
  if (!open) return null;

  return createPortal(
-    <div className="hp-start-overlay" onClick={onClose} role="dialog" aria-label="Spiel gestartet">
+    <div className="hp-start-overlay" onClick={onClose} role="dialog" aria-label={t("gameStarted")}>
      <div className="hp-start-card" onClick={(event) => event.stopPropagation()}>
        <div className="hp-start-rune">✦</div>
-        <div className="hp-start-kicker">Die Ermittlungen beginnen</div>
-        <div className="hp-start-title">Spiel gestartet</div>
-        <div className="hp-start-subtitle">Möge der beste Detektiv gewinnen.</div>
+        <div className="hp-start-kicker">{t("investigationsBegin")}</div>
+        <div className="hp-start-title">{t("gameStarted")}</div>
+        <div className="hp-start-subtitle">{t("bestDetective")}</div>
        <button onClick={onClose} style={{ marginTop: 18, color: stylesTokens.textGold }}>
-          Los geht&apos;s
+          {language === "en" ? "Let’s go" : "Los geht's"}
        </button>
      </div>
    </div>,
@@ -1,122 +1,121 @@
 import React from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
+import { useLanguage } from "../i18n";

 export default function HelpModal({ open, onClose }) {
+  const { language, t } = useLanguage();
  if (!open) return null;
+  const en = language === "en";

  return (
    <div style={styles.modalOverlay} onMouseDown={onClose}>
      <div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
        <div style={styles.modalHeader}>
-          <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>Hilfe & Spielablauf</div>
-          <button onClick={onClose} style={styles.modalCloseBtn} aria-label="Schließen">
+          <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>{t("helpTitle")}</div>
+          <button onClick={onClose} style={styles.modalCloseBtn} aria-label={t("close")}>
            ✕
          </button>
        </div>

        <div style={styles.helpBody}>
-          <div style={styles.helpSectionTitle}>1) Lobby & Spielstart</div>
+          <div style={styles.helpSectionTitle}>1) {en ? "Lobby & starting the game" : "Lobby & Spielstart"}</div>
          <div style={styles.helpText}>
-            Ein neues Spiel startet zunächst als Lobby. Teile den angezeigten <b>Spiel-Code</b> mit den
-            anderen Spielern. Sie können dem Spiel beitreten, solange es noch nicht gestartet wurde.
+            {en ? <>A new game starts as a lobby. Share the displayed <b>game code</b> with the other players. They can join until the host starts the game.</> : <>Ein neues Spiel startet zunächst als Lobby. Teile den angezeigten <b>Spiel-Code</b> mit den anderen Spielern. Sie können dem Spiel beitreten, solange es noch nicht gestartet wurde.</>}
          </div>

          <div style={styles.helpList}>
            <div style={styles.helpListRow}>
              <span style={styles.helpMiniTag}>👑</span>
              <div>
-                Der <b>Host</b> sieht alle beigetretenen Spieler und startet das Spiel.
+                {en ? <>The <b>host</b> sees all joined players and starts the game.</> : <>Der <b>Host</b> sieht alle beigetretenen Spieler und startet das Spiel.</>}
              </div>
            </div>
            <div style={styles.helpListRow}>
              <span style={styles.helpMiniTag}>▶</span>
              <div>
-                Der Start ist ab <b>zwei Spielern</b> möglich. Danach können keine weiteren Spieler
-                beitreten.
+                {en ? <>The game can start with <b>two players</b>. No additional players can join afterwards.</> : <>Der Start ist ab <b>zwei Spielern</b> möglich. Danach können keine weiteren Spieler beitreten.</>}
              </div>
            </div>
            <div style={styles.helpListRow}>
              <span style={styles.helpMiniTag}>SNE</span>
              <div>
-                Beim Start werden die Spieler-Chips automatisch erstellt. Beispiel: Sascha Nesterovic
-                wird zu <b>SNE</b>.
+                {en ? <>Player chips are created automatically when the game starts. Example: Sascha Nesterovic becomes <b>SNE</b>.</> : <>Beim Start werden die Spieler-Chips automatisch erstellt. Beispiel: Sascha Nesterovic wird zu <b>SNE</b>.</>}
              </div>
            </div>
          </div>

          <div style={styles.helpDivider} />

-          <div style={styles.helpSectionTitle}>2) Spiel auswählen</div>
+          <div style={styles.helpSectionTitle}>2) {en ? "Selecting a game" : "Spiel auswählen"}</div>
          <div style={styles.helpText}>
-            Mit dem Dropdown im Bereich <b>Spiel</b> wechselst du zwischen deinen Spielen. Über
-            <b> New Game</b> kannst du ein neues Spiel erstellen oder einem bestehenden Spiel beitreten.
+            {en ? <>Use the <b>Game</b> dropdown to switch between your games. With <b>New Game</b> you can create or join a game.</> : <>Mit dem Dropdown im Bereich <b>Spiel</b> wechselst du zwischen deinen Spielen. Über <b>New Game</b> kannst du ein neues Spiel erstellen oder einem bestehenden Spiel beitreten.</>}
          </div>

          <div style={styles.helpList}>
            <div style={styles.helpListRow}>
              <span style={styles.helpMiniTag}>▼</span>
              <div>
-                <b>Spiel-Auswahl</b> = vorhandene Spiele öffnen
+                <b>{en ? "Game selection" : "Spiel-Auswahl"}</b> = {en ? "open existing games" : "vorhandene Spiele öffnen"}
              </div>
            </div>
            <div style={styles.helpListRow}>
              <span style={styles.helpMiniTag}>✦</span>
              <div>
-                <b>New Game</b> = neues Spiel erstellen oder per Code beitreten
+                <b>New Game</b> = {en ? "create a game or join with a code" : "neues Spiel erstellen oder per Code beitreten"}
              </div>
            </div>
          </div>

          <div style={styles.helpDivider} />

-          <div style={styles.helpSectionTitle}>3) Namen antippen – Status</div>
+          <div style={styles.helpSectionTitle}>3) {en ? "Tap a name – status" : "Namen antippen – Status"}</div>
          <div style={styles.helpText}>
-            Tippe während des laufenden Spiels auf den Namen eines Eintrags. Die Statusfolge ist:
+            {en ? "During the game, tap an entry name. The status cycle is:" : "Tippe während des laufenden Spiels auf den Namen eines Eintrags. Die Statusfolge ist:"}
          </div>

          <div style={styles.helpList}>
            <div style={styles.helpListRow}>
              <span style={{ ...styles.helpBadge, background: "rgba(0,190,80,0.18)", color: "#baf3c9" }}>✓</span>
-              <div><b>Grün</b> = bestätigt / vorhanden</div>
+              <div><b>{en ? "Green" : "Grün"}</b> = {en ? "confirmed / present" : "bestätigt / vorhanden"}</div>
            </div>
            <div style={styles.helpListRow}>
              <span style={{ ...styles.helpBadge, background: "rgba(255,35,35,0.18)", color: "#ffb3b3" }}>✕</span>
-              <div><b>Rot</b> = ausgeschlossen / nicht vorhanden</div>
+              <div><b>{en ? "Red" : "Rot"}</b> = {en ? "excluded / not present" : "ausgeschlossen / nicht vorhanden"}</div>
            </div>
            <div style={styles.helpListRow}>
              <span style={{ ...styles.helpBadge, background: "rgba(140,140,140,0.14)", color: "rgba(233,216,166,0.85)" }}>?</span>
-              <div><b>Grau</b> = unsicher / vielleicht</div>
+              <div><b>{en ? "Grey" : "Grau"}</b> = {en ? "uncertain / maybe" : "unsicher / vielleicht"}</div>
            </div>
            <div style={styles.helpListRow}>
              <span style={{ ...styles.helpBadge, background: "rgba(255,255,255,0.08)", color: "rgba(233,216,166,0.75)" }}>–</span>
-              <div><b>Leer</b> = noch nicht bewertet</div>
+              <div><b>{en ? "Empty" : "Leer"}</b> = {en ? "not evaluated yet" : "noch nicht bewertet"}</div>
            </div>
          </div>

          <div style={styles.helpDivider} />

-          <div style={styles.helpSectionTitle}>4) Notizen & Spieler-Chips</div>
+          <div style={styles.helpSectionTitle}>4) {en ? "Notes & player chips" : "Notizen & Spieler-Chips"}</div>
          <div style={styles.helpText}>
-            Der Button rechts in jeder Zeile rotiert durch deine persönlichen Notizen:
+            {en ? "The button on the right of each row cycles through your personal notes:" : "Der Button rechts in jeder Zeile rotiert durch deine persönlichen Notizen:"}
          </div>

          <div style={styles.helpList}>
            <div style={styles.helpListRow}>
              <span style={styles.helpMiniTag}>i</span>
-              <div><b>i</b> = Ich habe diese Karte</div>
+              <div><b>i</b> = {en ? "I have this card" : "Ich habe diese Karte"}</div>
            </div>
            <div style={styles.helpListRow}>
              <span style={styles.helpMiniTag}>m</span>
-              <div><b>m</b> = Karte aus dem mittleren Deck</div>
+              <div><b>m</b> = {en ? "card from the middle deck" : "Karte aus dem mittleren Deck"}</div>
            </div>
            <div style={styles.helpListRow}>
              <span style={styles.helpMiniTag}>s</span>
-              <div><b>s</b> = Ein anderer Spieler hat die Karte; danach wählst du den passenden Chip</div>
+              <div><b>s</b> = {en ? "another player has the card; then choose the matching chip" : "Ein anderer Spieler hat die Karte; danach wählst du den passenden Chip"}</div>
            </div>
            <div style={styles.helpListRow}>
              <span style={styles.helpMiniTag}>SNE</span>
-              <div><b>s.SNE</b> = Sascha Nesterovic besitzt die Karte</div>
+              <div><b>s.SNE</b> = {en ? "Sascha Nesterovic has the card" : "Sascha Nesterovic besitzt die Karte"}</div>
            </div>
            <div style={styles.helpListRow}>
              <span style={styles.helpMiniTag}>—</span>
@@ -126,53 +125,56 @@ export default function HelpModal({ open, onClose }) {

          <div style={styles.helpDivider} />

-          <div style={styles.helpSectionTitle}>5) Spielende</div>
+          <div style={styles.helpSectionTitle}>5) {en ? "Game end" : "Spielende"}</div>
          <div style={styles.helpText}>
-            Nur der Host kann den Sieger festlegen. Sobald ein Sieger gespeichert wurde, gilt das Spiel
-            als beendet:
+            {en ? "Only the host can select the winner. Once a winner is saved, the game is finished:" : "Nur der Host kann den Sieger festlegen. Sobald ein Sieger gespeichert wurde, gilt das Spiel als beendet:"}
          </div>
          <div style={styles.helpList}>
            <div style={styles.helpListRow}>
              <span style={styles.helpMiniTag}>🔒</span>
-              <div>Alle Notizzettel werden <b>schreibgeschützt</b>.</div>
+              <div>{en ? <>All note sheets become <b>read-only</b>.</> : <>Alle Notizzettel werden <b>schreibgeschützt</b>.</>}</div>
            </div>
            <div style={styles.helpListRow}>
              <span style={styles.helpMiniTag}>🏆</span>
-              <div>Der Sieger wird für alle Spieler angezeigt.</div>
+              <div>{en ? "The winner is shown to all players." : "Der Sieger wird für alle Spieler angezeigt."}</div>
            </div>
          </div>

          <div style={styles.helpDivider} />

-          <div style={styles.helpSectionTitle}>6) User-Menü</div>
+          <div style={styles.helpSectionTitle}>6) {en ? "User menu" : "User-Menü"}</div>
          <div style={styles.helpText}>
-            Oben rechts findest du abhängig von deiner Rolle das <b>User</b>- oder <b>Admin</b>-Menü.
+            {en ? <>At the top right, you will find the <b>User</b> or <b>Admin</b> menu depending on your role.</> : <>Oben rechts findest du abhängig von deiner Rolle das <b>User</b>- oder <b>Admin</b>-Menü.</>}
          </div>
          <div style={styles.helpList}>
            <div style={styles.helpListRow}>
              <span style={styles.helpMiniTag}>📊</span>
-              <div><b>Statistik</b> = persönliche Spiele- und Siegstatistik</div>
+              <div><b>{t("statistics")}</b> = {en ? "personal game and win statistics" : "persönliche Spiele- und Siegstatistik"}</div>
            </div>
            <div style={styles.helpListRow}>
              <span style={styles.helpMiniTag}>🎨</span>
-              <div><b>Design ändern</b> = Theme auswählen</div>
+              <div><b>{t("changeDesign")}</b> = {en ? "choose a theme" : "Theme auswählen"}</div>
            </div>
            <div style={styles.helpListRow}>
              <span style={styles.helpMiniTag}>🔒</span>
-              <div><b>Passwort setzen</b> = eigenes Passwort ändern</div>
+              <div><b>{t("setPassword")}</b> = {en ? "change your password" : "eigenes Passwort ändern"}</div>
            </div>
            <div style={styles.helpListRow}>
              <span style={styles.helpMiniTag}>⎋</span>
-              <div><b>Logout</b> = abmelden</div>
+              <div><b>{t("logout")}</b> = {en ? "sign out" : "abmelden"}</div>
            </div>
            <div style={styles.helpListRow}>
              <span style={styles.helpMiniTag}>🛡️</span>
-              <div><b>Admin Dashboard</b> = User anlegen, bearbeiten, Rollen ändern, Passwörter setzen und Konten deaktivieren</div>
+              <div><b>{t("adminDashboard")}</b> = {en ? "create and edit users, change roles, set passwords and disable accounts" : "User anlegen, bearbeiten, Rollen ändern, Passwörter setzen und Konten deaktivieren"}</div>
+            </div>
+            <div style={styles.helpListRow}>
+              <span style={styles.helpMiniTag}>✉</span>
+              <div><b>{t("adminSettings")}</b> = {en ? "configure SMTP and send invitations without a preset password" : "SMTP konfigurieren und Einladungen ohne vorgegebenes Passwort versenden"}</div>
            </div>
          </div>

          <div style={{ ...styles.helpText, marginTop: 16 }}>
-            Deine Notizen bleiben privat. Jeder Spieler sieht nur seinen eigenen Notizzettel.
+            {en ? "Your notes remain private. Each player sees only their own note sheet." : "Deine Notizen bleiben privat. Jeder Spieler sieht nur seinen eigenen Notizzettel."}
          </div>
        </div>
      </div>
@@ -0,0 +1,29 @@
+import React from "react";
+import { styles } from "../styles/styles";
+import { stylesTokens } from "../styles/theme";
+import { useLanguage } from "../i18n";
+
+export default function HomePage({ games = [], onOpenNewGame, onOpenGame }) {
+  const { language, t } = useLanguage();
+  return (
+    <main className="hp-home-page" style={{ marginTop: 14, display: "grid", gap: 14 }}>
+      <div style={styles.card}>
+        <div style={{ padding: "26px 20px 22px", textAlign: "center" }}>
+          <div style={{ fontSize: 34, color: stylesTokens.textGold }}>✦</div>
+          <h1 style={{ margin: "8px 0 0", color: stylesTokens.textGold, fontSize: 24 }}>{language === "en" ? "Welcome to Notizbogen" : "Willkommen beim Notizbogen"}</h1>
+          <p style={{ margin: "9px auto 0", maxWidth: 430, color: stylesTokens.textDim, lineHeight: 1.5 }}>{language === "en" ? "Create a new investigation or join an existing game to get started." : "Erstelle eine neue Ermittlung oder tritt einem bestehenden Spiel bei, um zu beginnen."}</p>
+          <button onClick={onOpenNewGame} style={{ ...styles.primaryBtn, marginTop: 18 }}>{language === "en" ? "✦ Create or join game" : "✦ Spiel erstellen oder beitreten"}</button>
+        </div>
+      </div>
+
+      {games.length > 0 && <div style={styles.card}>
+        <div style={styles.sectionHeader}>{language === "en" ? "Your games" : "Deine Spiele"}</div>
+        <div style={{ display: "grid", gap: 8, padding: 12 }}>
+          {games.map((game) => <button key={game.id} onClick={() => onOpenGame(game.id)} style={{ ...styles.secondaryBtn, display: "flex", justifyContent: "space-between", alignItems: "center", textAlign: "left" }}>
+            <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{game.name}</span><span style={{ color: stylesTokens.textGold, marginLeft: 10 }}>{game.code}</span>
+          </button>)}
+        </div>
+      </div>}
+    </main>
+  );
+}
@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from "react";
+import { api } from "../api/client";
+import { styles } from "../styles/styles";
+import { stylesTokens } from "../styles/theme";
+import { useLanguage } from "../i18n";
+
+export default function InvitePage({ token }) {
+  const { language, t } = useLanguage();
+  const [info, setInfo] = useState(null);
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [message, setMessage] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => { api(`/auth/invite/${encodeURIComponent(token)}`).then(setInfo).catch((e) => setMessage("❌ " + (e?.message || "Diese Einladung ist nicht mehr gültig."))); }, [token]);
+  const submit = async (event) => {
+    event.preventDefault(); setMessage("");
+    if (password.length < 8) return setMessage(`❌ ${language === "en" ? "Password must be at least 8 characters." : "Das Passwort muss mindestens 8 Zeichen haben."}`);
+    if (password !== confirm) return setMessage(`❌ ${language === "en" ? "Passwords do not match." : "Die Passwörter stimmen nicht überein."}`);
+    setSaving(true);
+    try { await api(`/auth/invite/${encodeURIComponent(token)}`, { method: "POST", body: JSON.stringify({ password }) }); setMessage("✅ Passwort gesetzt. Du wirst weitergeleitet …"); setTimeout(() => { window.location.href = "/"; }, 700); }
+    catch (e) { setMessage("❌ " + (e?.message || "Einladung konnte nicht aktiviert werden.")); setSaving(false); }
+  };
+
+  return <div style={styles.loginPage}>
+    <div style={styles.bgFixed} aria-hidden="true"><div style={styles.bgMap} /></div>
+    <main className="hp-invite-card" style={{ ...styles.loginCard, position: "relative", zIndex: 1 }}>
+      <div className="hp-invite-seal">✦</div>
+      <div style={{ color: stylesTokens.textGold, fontWeight: 1000, fontSize: 24 }}>Notizbogen</div>
+      <div style={{ color: stylesTokens.textDim, marginTop: 5 }}>{t("invite")}</div>
+      {info ? <>
+        <div style={{ marginTop: 22, padding: "14px 16px", borderRadius: 14, background: "rgba(233,216,166,.08)", border: "1px solid rgba(233,216,166,.18)", textAlign: "left" }}><div style={{ color: stylesTokens.textMain, fontWeight: 900, fontSize: 18 }}>{info.display_name}</div><div style={{ color: stylesTokens.textDim, fontSize: 13, marginTop: 4 }}>{info.email} · {info.role}</div></div>
+        <form onSubmit={submit} style={{ marginTop: 18, display: "grid", gap: 10, textAlign: "left" }}>
+          <label style={styles.adminFieldLabel}>{t("password")}<input autoFocus type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder={t("passwordMin")} style={styles.input} /></label>
+          <label style={styles.adminFieldLabel}>{t("confirmPassword")}<input type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} placeholder={t("passwordAgain")} style={styles.input} /></label>
+          {message && <div style={{ color: message.startsWith("✅") ? "#baf3c9" : "#ffb3b3", fontSize: 13 }}>{message}</div>}
+          <button type="submit" style={{ ...styles.primaryBtn, width: "100%", marginTop: 5 }} disabled={saving}>{saving ? (language === "en" ? "Activating …" : "Wird aktiviert …") : t("acceptInvite")}</button>
+        </form>
+      </> : <div style={{ marginTop: 24, color: message ? "#ffb3b3" : stylesTokens.textDim }}>{message || "Einladung wird geprüft …"}</div>}
+    </main>
+  </div>;
+}
@@ -2,8 +2,10 @@
 import React, { useEffect, useState } from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
+import { useLanguage } from "../i18n";

 export default function JoinGameModal({ open, onClose, onJoin }) {
+  const { language, t } = useLanguage();
  const [code, setCode] = useState("");
  const [msg, setMsg] = useState("");
  const [busy, setBusy] = useState(false);
@@ -19,13 +21,13 @@ export default function JoinGameModal({ open, onClose, onJoin }) {

  const doJoin = async () => {
    const c = (code || "").trim();
-    if (!c) return setMsg("❌ Bitte Code eingeben.");
+    if (!c) return setMsg(`❌ ${language === "en" ? "Please enter a code." : "Bitte Code eingeben."}`);
    setBusy(true);
    setMsg("");
    try {
      await onJoin(c);
    } catch (e) {
-      setMsg("❌ Fehler: " + (e?.message || "unknown"));
+      setMsg("❌ " + (language === "en" ? "Error: " : "Fehler: ") + (e?.message || "unknown"));
      setBusy(false);
    }
  };
@@ -34,8 +36,8 @@ export default function JoinGameModal({ open, onClose, onJoin }) {
    <div style={styles.modalOverlay} onMouseDown={onClose}>
      <div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
        <div style={styles.modalHeader}>
-          <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>Spiel beitreten</div>
-          <button onClick={onClose} style={styles.modalCloseBtn} aria-label="Schließen">
+          <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>{t("joinGame")}</div>
+          <button onClick={onClose} style={styles.modalCloseBtn} aria-label={t("close")}>
            ✕
          </button>
        </div>
@@ -1,5 +1,6 @@
 import React from "react";
 import { styles } from "../styles/styles";
+import { useLanguage } from "../i18n";

 export default function LoginPage({
  loginEmail,
@@ -22,6 +23,7 @@ export default function LoginPage({
  setupSaving,
  doSetup,
 }) {
+  const { language, t } = useLanguage();
  const isSetup = setupRequired === true;

  return (
@@ -37,10 +39,10 @@ export default function LoginPage({

        <div style={styles.loginSubtitle}>
          {setupRequired === null
-            ? "Initialisiere Anwendung …"
+            ? (language === "en" ? "Initializing application …" : "Initialisiere Anwendung …")
            : isSetup
-              ? "Richte den ersten Administrator ein"
-              : "Melde dich an, um dein Cluedo-Magie-Sheet zu öffnen"}
+              ? (language === "en" ? "Set up the first administrator" : "Richte den ersten Administrator ein")
+              : (language === "en" ? "Log in to open your Cluedo sheet" : "Melde dich an, um dein Cluedo-Magie-Sheet zu öffnen")}
        </div>

        {isSetup ? (
@@ -49,7 +51,7 @@ export default function LoginPage({
              <input
                value={setupDisplayName}
                onChange={(e) => setSetupDisplayName(e.target.value)}
-                placeholder="Display name"
+                placeholder={t("displayName")}
                style={styles.loginInput}
                autoComplete="name"
              />
@@ -59,7 +61,7 @@ export default function LoginPage({
              <input
                value={setupEmail}
                onChange={(e) => setSetupEmail(e.target.value)}
-                placeholder="Admin email"
+                placeholder={language === "en" ? "Admin email" : "Admin-E-Mail"}
                style={styles.loginInput}
                inputMode="email"
                autoComplete="username"
@@ -70,7 +72,7 @@ export default function LoginPage({
              <input
                value={setupPassword}
                onChange={(e) => setSetupPassword(e.target.value)}
-                placeholder="Password (min. 8 characters)"
+                placeholder={t("passwordMin")}
                type="password"
                style={styles.loginInput}
                autoComplete="new-password"
@@ -81,7 +83,7 @@ export default function LoginPage({
              <input
                value={setupPasswordConfirm}
                onChange={(e) => setSetupPasswordConfirm(e.target.value)}
-                placeholder="Confirm password"
+                placeholder={t("confirmPassword")}
                type="password"
                style={styles.loginInput}
                autoComplete="new-password"
@@ -91,7 +93,7 @@ export default function LoginPage({
            {setupError && <div style={{ color: "#ffb3b3", fontSize: 13 }}>{setupError}</div>}

            <button onClick={doSetup} style={styles.loginBtn} disabled={setupSaving}>
-              {setupSaving ? "Setting up …" : "✦ Create administrator"}
+              {setupSaving ? (language === "en" ? "Setting up …" : "Einrichtung …") : (language === "en" ? "✦ Create administrator" : "✦ Administrator erstellen")}
            </button>
          </div>
        ) : (
@@ -100,7 +102,7 @@ export default function LoginPage({
            <input
              value={loginEmail}
              onChange={(e) => setLoginEmail(e.target.value)}
-              placeholder="Email"
+              placeholder={t("email")}
              style={styles.loginInput}
              inputMode="email"
              autoComplete="username"
@@ -112,7 +114,7 @@ export default function LoginPage({
              <input
                value={loginPassword}
                onChange={(e) => setLoginPassword(e.target.value)}
-                placeholder="Passwort"
+                placeholder={t("password")}
                type={showPw ? "text" : "password"}
                style={styles.inputInRow}
                autoComplete="current-password"
@@ -121,8 +123,8 @@ export default function LoginPage({
                type="button"
                onClick={() => setShowPw((v) => !v)}
                style={styles.pwToggleBtn}
-                aria-label={showPw ? "Passwort verstecken" : "Passwort anzeigen"}
-                title={showPw ? "Verstecken" : "Anzeigen"}
+                aria-label={showPw ? (language === "en" ? "Hide password" : "Passwort verstecken") : (language === "en" ? "Show password" : "Passwort anzeigen")}
+                title={showPw ? (language === "en" ? "Hide" : "Verstecken") : (language === "en" ? "Show" : "Anzeigen")}
              >
                {showPw ? "🙈" : "👁"}
              </button>
@@ -130,13 +132,13 @@ export default function LoginPage({
          </div>

          <button onClick={doLogin} style={styles.loginBtn}>
-            ✦ Anmelden
+            ✦ {t("login")}
          </button>
          </div>
        )}

        <div style={styles.loginHint}>
-          Your notes remain private – every player only sees their own sheet.
+          {language === "en" ? "Your notes remain private – every player only sees their own sheet." : "Deine Notizen bleiben privat – jeder Spieler sieht nur seinen eigenen Notizzettel."}
        </div>
      </div>
    </div>
@@ -1,6 +1,8 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import QRCode from "qrcode";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
+import { useLanguage } from "../i18n";

 export default function NewGameModal({
  open,
@@ -13,12 +15,18 @@ export default function NewGameModal({
  gameFinished = false,
  hasGame = false,
 }) {
+  const { language, t } = useLanguage();
  // modes: running | choice | create | join
  const [mode, setMode] = useState("choice");
  const [joinCode, setJoinCode] = useState("");
  const [err, setErr] = useState("");
  const [created, setCreated] = useState(null); // { code }
  const [toast, setToast] = useState("");
+  const [qrOpen, setQrOpen] = useState(false);
+  const [qrDataUrl, setQrDataUrl] = useState("");
+  const [scannerOpen, setScannerOpen] = useState(false);
+  const videoRef = useRef(null);
+  const streamRef = useRef(null);

  const canJoin = useMemo(() => joinCode.trim().length >= 4, [joinCode]);

@@ -30,6 +38,9 @@ export default function NewGameModal({
    setToast("");
    setJoinCode("");
    setCreated(null);
+    setQrOpen(false);
+    setQrDataUrl("");
+    setScannerOpen(false);

    // Wenn ein Spiel läuft (und nicht finished) -> nur Code anzeigen
    if (hasGame && !gameFinished) {
@@ -39,6 +50,57 @@ export default function NewGameModal({
    }
  }, [open, hasGame, gameFinished]);

+  useEffect(() => {
+    const qrValue = created?.code || currentCode;
+    if (!qrOpen || !qrValue) return;
+    QRCode.toDataURL(qrValue, { width: 280, margin: 2, errorCorrectionLevel: "M", color: { dark: "#17161b", light: "#f5efdc" } })
+      .then(setQrDataUrl).catch(() => setQrDataUrl(""));
+  }, [qrOpen, created?.code, currentCode]);
+
+  useEffect(() => {
+    if (!scannerOpen) return undefined;
+    let alive = true;
+    let intervalId;
+    const startScanner = async () => {
+      if (!("BarcodeDetector" in window) || !navigator.mediaDevices?.getUserMedia) {
+        setErr(language === "en" ? "QR scanning is not supported here. Enter the code manually." : "QR-Scannen wird hier nicht unterstützt. Bitte Code manuell eingeben.");
+        setScannerOpen(false);
+        return;
+      }
+      try {
+        const detector = new window.BarcodeDetector({ formats: ["qr_code"] });
+        const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal: "environment" } }, audio: false });
+        if (!alive) { stream.getTracks().forEach((track) => track.stop()); return; }
+        streamRef.current = stream;
+        videoRef.current.srcObject = stream;
+        await videoRef.current.play();
+        intervalId = window.setInterval(async () => {
+          if (!alive || !videoRef.current) return;
+          try {
+            const codes = await detector.detect(videoRef.current);
+            const raw = codes?.[0]?.rawValue?.trim() || "";
+            if (raw) {
+              setJoinCode((raw.match(/[23456789ABCDEFGHJKMNPQRSTUVWXYZ]{4,}/i)?.[0] || raw).toUpperCase());
+              setScannerOpen(false);
+              setToast(language === "en" ? "✅ QR code recognized" : "✅ QR-Code erkannt");
+            }
+          } catch { /* frame not ready */ }
+        }, 350);
+      } catch {
+        setErr(language === "en" ? "Camera access was denied. Enter the code manually." : "Kamerazugriff wurde verweigert. Bitte Code manuell eingeben.");
+        setScannerOpen(false);
+      }
+    };
+    startScanner();
+    return () => {
+      alive = false;
+      if (intervalId) window.clearInterval(intervalId);
+      if (streamRef.current) streamRef.current.getTracks().forEach((track) => track.stop());
+      streamRef.current = null;
+      if (videoRef.current) videoRef.current.srcObject = null;
+    };
+  }, [scannerOpen, language]);
+
  if (!open) return null;

  const showToast = (msg) => {
@@ -53,7 +115,7 @@ export default function NewGameModal({
      setCreated({ code: res.code });
      setMode("create");
    } catch (e) {
-      setErr("❌ Fehler: " + (e?.message || "unknown"));
+      setErr("❌ " + (language === "en" ? "Error: " : "Fehler: ") + (e?.message || "unknown"));
    }
  };

@@ -63,16 +125,16 @@ export default function NewGameModal({
      await onJoin(joinCode.trim().toUpperCase());
      onClose();
    } catch (e) {
-      setErr("❌ Fehler: " + (e?.message || "unknown"));
+      setErr("❌ " + (language === "en" ? "Error: " : "Fehler: ") + (e?.message || "unknown"));
    }
  };

-  const copyText = async (text, okMsg = "✅ Code kopiert") => {
+  const copyText = async (text, okMsg = language === "en" ? "✅ Code copied" : "✅ Code kopiert") => {
    try {
      await navigator.clipboard.writeText(text || "");
      showToast(okMsg);
    } catch {
-      showToast("❌ Copy nicht möglich");
+      showToast(language === "en" ? "❌ Copy failed" : "❌ Copy nicht möglich");
    }
  };

@@ -85,9 +147,9 @@ export default function NewGameModal({
      <div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
        <div style={styles.modalHeader}>
          <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>
-            Spiel
+            {t("game")}
          </div>
-          <button onClick={onClose} style={styles.modalCloseBtn} aria-label="Schließen">
+          <button onClick={onClose} style={styles.modalCloseBtn} aria-label={t("close")}>
            ✕
          </button>
        </div>
@@ -116,7 +178,7 @@ export default function NewGameModal({
          {mode === "running" && (
            <>
              <div style={{ color: stylesTokens.textMain, opacity: 0.92 }}>
-                Das Spiel läuft noch. Hier ist der <b>Join-Code</b>:
+                {language === "en" ? <>The game is in progress. Here is the <b>join code</b>:</> : <>Das Spiel läuft noch. Hier ist der <b>Join-Code</b>:</>}
              </div>

              <div
@@ -131,7 +193,7 @@ export default function NewGameModal({
                }}
              >
                <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
-                  Spiel-Code
+                  {t("gameCode")}
                </div>

                <div
@@ -150,19 +212,26 @@ export default function NewGameModal({
                  onClick={() => copyText(codeToShow)}
                  style={styles.primaryBtn}
                  disabled={!codeToShow}
-                  title={!codeToShow ? "Kein Code verfügbar" : "Code kopieren"}
+                  title={!codeToShow ? (language === "en" ? "No code available" : "Kein Code verfügbar") : (language === "en" ? "Copy code" : "Code kopieren")}
                >
-                  ⧉ Code kopieren
+                  ⧉ {t("copy")} {language === "en" ? "code" : "Code"}
                </button>
+                <button onClick={() => setQrOpen((value) => !value)} style={styles.secondaryBtn} disabled={!codeToShow}>
+                  ▣ {qrOpen ? (language === "en" ? "Hide QR code" : "QR-Code ausblenden") : (language === "en" ? "Create QR code" : "QR-Code erstellen")}
+                </button>
+                {qrOpen && qrDataUrl && <div style={{ marginTop: 4, display: "grid", justifyItems: "center", gap: 7 }}>
+                  <img src={qrDataUrl} alt={language === "en" ? "Game QR code" : "Spiel-QR-Code"} style={{ width: 220, height: 220, borderRadius: 10, padding: 8, background: "#f5efdc" }} />
+                  <div style={{ color: stylesTokens.textDim, fontSize: 12 }}>{language === "en" ? "Scan this code to join the game." : "Scanne diesen Code, um dem Spiel beizutreten."}</div>
+                </div>}
              </div>

              <div style={{ fontSize: 12, opacity: 0.75, color: stylesTokens.textDim }}>
-                Sobald ein Sieger gesetzt wurde, kannst du hier ein neues Spiel erstellen oder beitreten.
+                {language === "en" ? "Once a winner is selected, you can create or join a new game here." : "Sobald ein Sieger gesetzt wurde, kannst du hier ein neues Spiel erstellen oder beitreten."}
              </div>

              <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
                <button onClick={onClose} style={styles.primaryBtn}>
-                  Fertig
+                  {language === "en" ? "Done" : "Fertig"}
                </button>
              </div>
            </>
@@ -173,15 +242,15 @@ export default function NewGameModal({
          {mode === "choice" && (
            <>
              <div style={{ color: stylesTokens.textMain, opacity: 0.92 }}>
-                Willst du ein Spiel <b>erstellen</b> oder einem Spiel <b>beitreten</b>?
+                {language === "en" ? <>Would you like to <b>create</b> a game or <b>join</b> one?</> : <>Willst du ein Spiel <b>erstellen</b> oder einem Spiel <b>beitreten</b>?</>}
              </div>

              <button onClick={doCreate} style={styles.primaryBtn}>
-                ✦ Spiel erstellen
+                ✦ {t("createGame")}
              </button>

              <button onClick={() => setMode("join")} style={styles.secondaryBtn}>
-                ⎆ Spiel beitreten
+                ⎆ {t("joinGame")}
              </button>
            </>
          )}
@@ -189,7 +258,7 @@ export default function NewGameModal({
          {mode === "join" && (
            <>
              <div style={{ color: stylesTokens.textMain, opacity: 0.92 }}>
-                Gib den <b>Code</b> ein:
+                {language === "en" ? <>Enter the <b>code</b>:</> : <>Gib den <b>Code</b> ein:</>}
              </div>

              <input
@@ -200,12 +269,21 @@ export default function NewGameModal({
                autoFocus
              />

+              <button type="button" onClick={() => { setErr(""); setScannerOpen((value) => !value); }} style={styles.secondaryBtn}>
+                ▣ {scannerOpen ? (language === "en" ? "Close scanner" : "Scanner schließen") : (language === "en" ? "Scan QR code" : "QR-Code scannen")}
+              </button>
+
+              {scannerOpen && <div style={{ display: "grid", gap: 8 }}>
+                <video ref={videoRef} muted playsInline style={{ width: "100%", maxHeight: 240, objectFit: "cover", borderRadius: 14, background: "#050507", border: `1px solid ${stylesTokens.panelBorder}` }} />
+                <div style={{ color: stylesTokens.textDim, fontSize: 12, textAlign: "center" }}>{language === "en" ? "Point your camera at the game QR code." : "Richte die Kamera auf den QR-Code des Spiels."}</div>
+              </div>}
+
              <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
                <button onClick={() => setMode("choice")} style={styles.secondaryBtn}>
-                  Zurück
+                  {language === "en" ? "Back" : "Zurück"}
                </button>
                <button onClick={doJoin} style={styles.primaryBtn} disabled={!canJoin}>
-                  Beitreten
+                  {t("join")}
                </button>
              </div>
            </>
@@ -214,7 +292,7 @@ export default function NewGameModal({
          {mode === "create" && created && (
            <>
              <div style={{ color: stylesTokens.textMain, opacity: 0.92 }}>
-                Dein Spiel wurde erstellt. Dieser Code bleibt auch bei „Alte Spiele“ sichtbar:
+                {language === "en" ? "Your game was created. This code will remain visible in your old games:" : "Dein Spiel wurde erstellt. Dieser Code bleibt auch bei „Alte Spiele“ sichtbar:"}
              </div>

              <div
@@ -229,7 +307,7 @@ export default function NewGameModal({
                }}
              >
                <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
-                  Spiel-Code
+                  {t("gameCode")}
                </div>

                <div
@@ -245,13 +323,20 @@ export default function NewGameModal({
                </div>

                <button onClick={() => copyText(created?.code || "")} style={styles.primaryBtn}>
-                  ⧉ Code kopieren
+                  ⧉ {t("copy")} {language === "en" ? "code" : "Code"}
                </button>
+                <button onClick={() => setQrOpen((value) => !value)} style={styles.secondaryBtn}>
+                  ▣ {qrOpen ? (language === "en" ? "Hide QR code" : "QR-Code ausblenden") : (language === "en" ? "Create QR code" : "QR-Code erstellen")}
+                </button>
+                {qrOpen && qrDataUrl && <div style={{ marginTop: 4, display: "grid", justifyItems: "center", gap: 7 }}>
+                  <img src={qrDataUrl} alt={language === "en" ? "Game QR code" : "Spiel-QR-Code"} style={{ width: 220, height: 220, borderRadius: 10, padding: 8, background: "#f5efdc" }} />
+                  <div style={{ color: stylesTokens.textDim, fontSize: 12 }}>{language === "en" ? "Scan this code to join the game." : "Scanne diesen Code, um dem Spiel beizutreten."}</div>
+                </div>}
              </div>

              <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
                <button onClick={onClose} style={styles.primaryBtn}>
-                  Fertig
+                  {language === "en" ? "Done" : "Fertig"}
                </button>
              </div>
            </>
@@ -1,6 +1,7 @@
 import React from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
+import { useLanguage } from "../i18n";

 export default function PasswordModal({
  pwOpen,
@@ -13,14 +14,15 @@ export default function PasswordModal({
  pwSaving,
  savePassword,
 }) {
+  const { language, t } = useLanguage();
  if (!pwOpen) return null;

  return (
    <div style={styles.modalOverlay} onMouseDown={closePwModal}>
      <div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
        <div style={styles.modalHeader}>
-          <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>Passwort setzen</div>
-          <button onClick={closePwModal} style={styles.modalCloseBtn} aria-label="Schließen">
+          <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>{t("setPasswordTitle")}</div>
+          <button onClick={closePwModal} style={styles.modalCloseBtn} aria-label={t("close")}>
            ✕
          </button>
        </div>
@@ -29,7 +31,7 @@ export default function PasswordModal({
          <input
            value={pw1}
            onChange={(e) => setPw1(e.target.value)}
-            placeholder="Neues Passwort"
+            placeholder={language === "en" ? "New password" : "Neues Passwort"}
            type="password"
            style={styles.input}
            autoFocus
@@ -37,7 +39,7 @@ export default function PasswordModal({
          <input
            value={pw2}
            onChange={(e) => setPw2(e.target.value)}
-            placeholder="Neues Passwort wiederholen"
+            placeholder={t("passwordAgain")}
            type="password"
            style={styles.input}
            onKeyDown={(e) => {
@@ -49,15 +51,15 @@ export default function PasswordModal({

          <div style={{ display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 4 }}>
            <button onClick={closePwModal} style={styles.secondaryBtn} disabled={pwSaving}>
-              Abbrechen
+              {t("cancel")}
            </button>
            <button onClick={savePassword} style={styles.primaryBtn} disabled={pwSaving}>
-              {pwSaving ? "Speichern..." : "Speichern"}
+              {pwSaving ? (language === "en" ? "Saving…" : "Speichern…") : t("save")}
            </button>
          </div>

          <div style={{ fontSize: 12, opacity: 0.75, color: stylesTokens.textDim }}>
-            Hinweis: Mindestens 8 Zeichen empfohlen.
+            {language === "en" ? "Note: At least 8 characters are recommended." : "Hinweis: Mindestens 8 Zeichen empfohlen."}
          </div>
        </div>
      </div>
@@ -2,6 +2,7 @@
 import React from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
+import { translateEntryLabel, useLanguage } from "../i18n";

 export default function SheetSection({
  title,
@@ -12,6 +13,7 @@ export default function SheetSection({
  displayTag,
  readOnly = false,
 }) {
+  const { language, t } = useLanguage();
  const getRowBg = (status) => {
    if (status === 1) return stylesTokens.rowNoBg;
    if (status === 2) return stylesTokens.rowOkBg;
@@ -79,9 +81,9 @@ export default function SheetSection({
                  opacity: effectiveStatus === 1 ? 0.8 : 1,
                  cursor: readOnly ? "default" : "pointer",
                }}
-                title={readOnly ? "Spiel beendet – Notizzettel ist schreibgeschützt" : "Klick: Grün → Rot → Grau → Leer"}
+                title={readOnly ? t("readOnly") : t("cycleStatus")}
              >
-                {e.label}
+                {translateEntryLabel(e.label, language)}
              </div>

              <div style={styles.statusCell}>
@@ -100,7 +102,7 @@ export default function SheetSection({
                onClick={() => !readOnly && onToggleTag(e)}
                style={styles.tagBtn}
                disabled={readOnly}
-                title={readOnly ? "Spiel beendet – Notizzettel ist schreibgeschützt" : "— → i → m → s.(Chip) → —"}
+                title={readOnly ? t("readOnly") : t("cycleNote")}
              >
                {displayTag(e)}
              </button>
@@ -2,6 +2,7 @@ import React from "react";
 import { createPortal } from "react-dom";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
+import { useLanguage } from "../i18n";

 function Tile({ label, value, sub }) {
  return (
@@ -48,6 +49,7 @@ function Tile({ label, value, sub }) {
 }

 export default function StatsModal({ open, onClose, me, stats, loading, error }) {
+  const { language, t } = useLanguage();
  if (!open) return null;

  const displayName = me ? ((me.display_name || "").trim() || me.email) : "";
@@ -57,13 +59,13 @@ export default function StatsModal({ open, onClose, me, stats, loading, error })
      <div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
        <div style={styles.modalHeader}>
          <div>
-            <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>Statistik</div>
+            <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>{t("statistics")}</div>
            <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
              {displayName}
            </div>
          </div>

-          <button onClick={onClose} style={styles.modalCloseBtn} aria-label="Schließen">
+          <button onClick={onClose} style={styles.modalCloseBtn} aria-label={t("close")}>
            ✕
          </button>
        </div>
@@ -71,7 +73,7 @@ export default function StatsModal({ open, onClose, me, stats, loading, error })
        <div style={{ marginTop: 12 }}>
          {loading ? (
            <div style={{ padding: 10, color: stylesTokens.textDim, opacity: 0.9 }}>
-              Lade Statistik…
+              {language === "en" ? "Loading statistics…" : "Lade Statistik…"}
            </div>
          ) : error ? (
            <div style={{ padding: 10, color: "#ffb3b3" }}>{error}</div>
@@ -83,10 +85,10 @@ export default function StatsModal({ open, onClose, me, stats, loading, error })
                gap: 10,
              }}
            >
-              <Tile label="Gespielte Spiele" value={stats?.played ?? 0} />
-              <Tile label="Siege" value={stats?.wins ?? 0} />
-              <Tile label="Verluste" value={stats?.losses ?? 0} />
-              <Tile label="Siegerate" value={`${stats?.winrate ?? 0}%`} sub="nur beendete Spiele" />
+              <Tile label={language === "en" ? "Games played" : "Gespielte Spiele"} value={stats?.played ?? 0} />
+              <Tile label={language === "en" ? "Wins" : "Siege"} value={stats?.wins ?? 0} />
+              <Tile label={language === "en" ? "Losses" : "Verluste"} value={stats?.losses ?? 0} />
+              <Tile label={language === "en" ? "Win rate" : "Siegerate"} value={`${stats?.winrate ?? 0}%`} sub={language === "en" ? "finished games only" : "nur beendete Spiele"} />
            </div>
          )}
        </div>
@@ -1,6 +1,7 @@
 import React from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
+import { useLanguage } from "../i18n";

 export default function TopBar({
  me,
@@ -10,12 +11,14 @@ export default function TopBar({
  openDesignModal,
  openStatsModal,
  openAdminPanel,
+  openAdminSettings,
  doLogout,
  onOpenNewGame,
 }) {
+  const { toggleLanguage, t } = useLanguage();
  const displayName = me ? ((me.display_name || "").trim() || me.email) : "";
  const isAdmin = me?.role === "admin";
-  const roleLabel = isAdmin ? "Admin" : "User";
+  const roleLabel = isAdmin ? t("admin") : t("user");

  return (
    <div className="hp-topbar" style={styles.topBar}>
@@ -32,7 +35,7 @@ export default function TopBar({
            className="hp-topbar-user"
            onClick={() => setUserMenuOpen((v) => !v)}
            style={styles.userBtn}
-            title="User Menü"
+            title={t("user") + " menu"}
          >
            <span style={{ fontSize: 16 }}>{isAdmin ? "🛡️" : "👤"}</span>
            <span>{roleLabel}</span>
@@ -60,7 +63,7 @@ export default function TopBar({
                }}
                style={styles.userDropdownItem}
              >
-                Statistik
+                {t("statistics")}
              </button>

              {isAdmin && (
@@ -73,7 +76,16 @@ export default function TopBar({
                    }}
                    style={styles.userDropdownItem}
                  >
-                    Admin Dashboard
+                    {t("adminDashboard")}
+                  </button>
+                  <button
+                    onClick={() => {
+                      setUserMenuOpen(false);
+                      openAdminSettings?.();
+                    }}
+                    style={styles.userDropdownItem}
+                  >
+                    {t("adminSettings")}
                  </button>
                </>
              )}
@@ -81,15 +93,26 @@ export default function TopBar({
              <div style={styles.userDropdownDivider} />

              <button onClick={openPwModal} style={styles.userDropdownItem}>
-                Passwort setzen
+                {t("setPassword")}
              </button>

              <button onClick={openDesignModal} style={styles.userDropdownItem}>
-                Design ändern
+                {t("changeDesign")}
              </button>

              <div style={styles.userDropdownDivider} />

+              <button
+                onClick={() => {
+                  toggleLanguage();
+                  setUserMenuOpen(false);
+                }}
+                style={styles.userDropdownItem}
+                title={`${t("changeLanguage")}: ${t("switchTo")}`}
+              >
+                🌐 {t("changeLanguage")}
+              </button>
+
              <button
                onClick={() => {
                  setUserMenuOpen(false);
@@ -97,14 +120,14 @@ export default function TopBar({
                }}
                style={{ ...styles.userDropdownItem, color: "#ffb3b3" }}
              >
-                Logout
+                {t("logout")}
              </button>
            </div>
          )}
        </div>

        <button className="hp-topbar-new" onClick={onOpenNewGame} style={styles.primaryBtn}>
-          ✦ New Game
+          ✦ {t("newGame")}
        </button>
      </div>
    </div>
@@ -1,5 +1,6 @@
 import React from "react";
 import { stylesTokens } from "../styles/theme";
+import { useLanguage } from "../i18n";

 /**
 * Props:
@@ -7,6 +8,7 @@ import { stylesTokens } from "../styles/theme";
 * - winnerEmail: string | null (legacy fallback)
 */
 export default function WinnerBadge({ winner, winnerEmail }) {
+  const { language } = useLanguage();
  const name =
    (winner?.display_name || "").trim() ||
    (winner?.email || "").trim() ||
@@ -34,13 +36,13 @@ export default function WinnerBadge({ winner, winnerEmail }) {
        <div style={{ fontSize: 18 }}>🏆</div>

        <div style={{ color: stylesTokens.textMain, fontWeight: 900 }}>
-          Sieger:
+          {language === "en" ? "Winner:" : "Sieger:"}
          <span style={{ color: stylesTokens.textGold }}>{" "}{name}</span>
        </div>
      </div>

      <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
-        festgelegt
+        {language === "en" ? "selected" : "festgelegt"}
      </div>
    </div>
  );
@@ -1,6 +1,7 @@
 import React from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
+import { useLanguage } from "../i18n";

 export default function WinnerCard({
  isHost,
@@ -9,12 +10,13 @@ export default function WinnerCard({
  setWinnerUserId,
  onSave,
 }) {
+  const { language, t } = useLanguage();
  if (!isHost) return null;

  return (
    <div style={{ marginTop: 14 }}>
      <div style={styles.card}>
-        <div style={styles.sectionHeader}>Sieger</div>
+        <div style={styles.sectionHeader}>{t("winner")}</div>

        <div style={styles.cardBody}>
          <select
@@ -22,7 +24,7 @@ export default function WinnerCard({
            onChange={(e) => setWinnerUserId(e.target.value || "")}
            style={{ ...styles.input, flex: 1 }}
          >
-            <option value="">— kein Sieger —</option>
+            <option value="">— {language === "en" ? "no winner" : "kein Sieger"} —</option>
            {members.map((m) => {
              const dn = ((m.display_name || "").trim() || (m.email || "").trim());
              return (
@@ -34,12 +36,12 @@ export default function WinnerCard({
          </select>

          <button onClick={onSave} style={styles.primaryBtn}>
-            Speichern
+            {t("save")}
          </button>
        </div>

        <div style={{ padding: "0 12px 12px", fontSize: 12, color: stylesTokens.textDim, opacity: 0.9 }}>
-          Nur der Host (Spiel-Ersteller) kann den Sieger setzen.
+          {language === "en" ? "Only the host (game creator) can select the winner." : "Nur der Host (Spiel-Ersteller) kann den Sieger setzen."}
        </div>
      </div>
    </div>
@@ -2,8 +2,10 @@ import React, { useEffect } from "react";
 import { createPortal } from "react-dom";
 import confetti from "canvas-confetti";
 import { stylesTokens } from "../styles/theme";
+import { useLanguage } from "../i18n";

 export default function WinnerCelebration({ open, winnerName, onClose }) {
+  const { language } = useLanguage();
  useEffect(() => {
    if (!open) return;

@@ -16,48 +18,39 @@ export default function WinnerCelebration({ open, winnerName, onClose }) {
      window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    if (!reduceMotion) {
-      const end = Date.now() + 4500;
-
      // WICHTIG: über dem Overlay rendern
      const TOP_Z = 2147483647;

      // hellere Farben damit’s auch auf dark overlay knallt
-      const bright = ["#ffffff", "#ffd166", "#06d6a0", "#4cc9f0", "#f72585"];
+      const bright = ["#ffffff", "#e9d8a6", "#c9aa62", "#7cffa8"];

      // 2 große Bursts
      confetti({
-        particleCount: 170,
-        spread: 95,
-        startVelocity: 42,
-        origin: { x: 0.12, y: 0.62 },
+        particleCount: 55,
+        spread: 72,
+        startVelocity: 28,
+        gravity: 0.85,
+        ticks: 150,
+        scalar: 0.82,
+        origin: { x: 0.22, y: 0.62 },
        zIndex: TOP_Z,
        colors: bright,
      });
      confetti({
-        particleCount: 170,
-        spread: 95,
-        startVelocity: 42,
-        origin: { x: 0.88, y: 0.62 },
+        particleCount: 55,
+        spread: 72,
+        startVelocity: 28,
+        gravity: 0.85,
+        ticks: 150,
+        scalar: 0.82,
+        origin: { x: 0.78, y: 0.62 },
        zIndex: TOP_Z,
        colors: bright,
      });

-      // “Rain” über die Zeit
-      (function frame() {
-        confetti({
-          particleCount: 8,
-          spread: 75,
-          startVelocity: 34,
-          origin: { x: Math.random(), y: Math.random() * 0.18 },
-          scalar: 1.05,
-          zIndex: TOP_Z,
-          colors: bright,
-        });
-        if (Date.now() < end) requestAnimationFrame(frame);
-      })();
    }

-    const t = setTimeout(() => onClose?.(), 5500);
+    const t = setTimeout(() => onClose?.(), 4200);

    return () => {
      clearTimeout(t);
@@ -146,15 +139,15 @@ export default function WinnerCelebration({ open, winnerName, onClose }) {
              lineHeight: 1.25,
            }}
          >
-            Spieler{" "}
+            {language === "en" ? "Player " : "Spieler "}
            <span style={{ color: stylesTokens.textGold }}>
              {winnerName || "Unbekannt"}
            </span>{" "}
-            hat die richtige Lösung!
+            {language === "en" ? "has the correct solution!" : "hat die richtige Lösung!"}
          </div>

          <div style={{ color: stylesTokens.textDim, opacity: 0.95, fontSize: 13 }}>
-            Fall gelöst. Respekt. ✨
+            {language === "en" ? "Case solved. Respect. ✨" : "Fall gelöst. Respekt. ✨"}
          </div>

          <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 6 }}>
@@ -0,0 +1,246 @@
+import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
+
+const STORAGE_KEY = "hpLanguage";
+const LanguageContext = createContext(null);
+
+const entryLabels = {
+  "Schlaftrunk": "Sleeping Potion",
+  "Verschwindekabinett": "Vanishing Cabinet",
+  "Portschlüssel": "Portkey",
+  "Impedimenta": "Impedimenta",
+  "Petrificus Totalus": "Petrificus Totalus",
+  "Alraune": "Mandrake",
+  "Große Halle": "Great Hall",
+  "Krankenflügel": "Hospital Wing",
+  "Raum der Wünsche": "Room of Requirement",
+  "Klassenzimmer für Zaubertränke": "Potions Classroom",
+  "Pokalszimmer": "Trophy Room",
+  "Klassenzimmer für Wahrsagen": "Divination Classroom",
+  "Eulerei": "Owlery",
+  "Bibliothek": "Library",
+  "Verteidigung gegen die dunklen Künste": "Defence Against the Dark Arts",
+};
+
+export function translateEntryLabel(label, language) {
+  return language === "en" ? (entryLabels[label] || label) : label;
+}
+
+export const translations = {
+  de: {
+    language: "Deutsch",
+    changeLanguage: "Sprache ändern",
+    switchTo: "English",
+    statistics: "Statistik",
+    adminDashboard: "Admin Dashboard",
+    adminSettings: "Admin Settings",
+    setPassword: "Passwort setzen",
+    changeDesign: "Design ändern",
+    logout: "Logout",
+    newGame: "New Game",
+    user: "User",
+    admin: "Admin",
+    help: "Hilfe",
+    game: "Spiel",
+    players: "Spieler",
+    suspects: "Verdächtige Personen",
+    items: "Gegenstände",
+    locations: "Orte",
+    winner: "Sieger",
+    started: "Spiel läuft",
+    finished: "Spiel beendet",
+    lobby: "Lobby",
+    startGame: "Spiel starten",
+    waitingForHost: "Warte, bis der Host das Spiel startet.",
+    chipsCreated: "Spieler-Chips erstellt",
+    atLeastTwoPlayers: "Mindestens 2 Spieler werden benötigt.",
+    chipsOnStart: "Beim Start werden die Spieler-Chips erstellt.",
+    noPlayersYet: "Noch keine Spieler beigetreten.",
+    close: "Schließen",
+    cancel: "Abbrechen",
+    save: "Speichern",
+    create: "Erstellen",
+    edit: "Bearbeiten",
+    delete: "Löschen",
+    disable: "Deaktivieren",
+    active: "aktiv",
+    disabled: "deaktiviert",
+    loading: "Laden …",
+    email: "E-Mail",
+    password: "Passwort",
+    confirmPassword: "Passwort bestätigen",
+    role: "Rolle",
+    displayName: "Anzeigename",
+    name: "Name",
+    createUser: "User anlegen",
+    editUser: "User bearbeiten",
+    newUser: "Neuen User anlegen",
+    existingUsers: "Vorhandene User",
+    accountActive: "Konto ist aktiv",
+    optional: "optional",
+    inviteHint: "Leer lassen = Einladung senden",
+    inviteNotice: "Ohne Passwort wird automatisch eine einmalige Einladung per SMTP verschickt.",
+    adminDashboardSubtitle: "Benutzer, Rollen und Zugangsdaten verwalten",
+    adminSettingsSubtitle: "SMTP und Einladungen konfigurieren",
+    smtpServer: "SMTP-Server",
+    port: "Port",
+    smtpUsername: "SMTP-Benutzername",
+    senderEmail: "Absender-E-Mail",
+    senderName: "Absendername",
+    appUrl: "App-URL für Einladungslinks",
+    useTls: "STARTTLS verwenden (empfohlen)",
+    testEmail: "Test-E-Mail",
+    sendTest: "Test senden",
+    saveSettings: "Einstellungen speichern",
+    setupAdmin: "Admin einrichten",
+    login: "Anmelden",
+    logout: "Logout",
+    enterEmail: "E-Mail eingeben",
+    passwordMin: "Mindestens 8 Zeichen",
+    passwordAgain: "Passwort wiederholen",
+    acceptInvite: "Einladung annehmen",
+    invite: "Deine Einladung",
+    setPasswordTitle: "Passwort setzen",
+    design: "Design ändern",
+    joinGame: "Spiel beitreten",
+    newGameTitle: "Neues Spiel",
+    gameCode: "Spiel-Code",
+    copy: "Kopieren",
+    copied: "Kopiert",
+    createGame: "Spiel erstellen",
+    join: "Beitreten",
+    chooseAction: "Was möchtest du tun?",
+    helpTitle: "Hilfe & Spielablauf",
+    notes: "Notizen",
+    playerChips: "Spieler-Chips",
+    whoHasCard: "Wer hat die Karte?",
+    selectChip: "Chip auswählen",
+    readOnly: "Spiel beendet – Notizzettel ist schreibgeschützt",
+    cycleStatus: "Klick: Grün → Rot → Grau → Leer",
+    cycleNote: "— → i → m → s.(Chip) → —",
+    gameStarted: "Spiel gestartet",
+    investigationsBegin: "Die Ermittlungen beginnen",
+    bestDetective: "Möge der beste Detektiv gewinnen.",
+  },
+  en: {
+    language: "English",
+    changeLanguage: "Change language",
+    switchTo: "Deutsch",
+    statistics: "Statistics",
+    adminDashboard: "Admin Dashboard",
+    adminSettings: "Admin Settings",
+    setPassword: "Set password",
+    changeDesign: "Change design",
+    logout: "Logout",
+    newGame: "New Game",
+    user: "User",
+    admin: "Admin",
+    help: "Help",
+    game: "Game",
+    players: "Players",
+    suspects: "Suspects",
+    items: "Items",
+    locations: "Locations",
+    winner: "Winner",
+    started: "Game in progress",
+    finished: "Game finished",
+    lobby: "Lobby",
+    startGame: "Start game",
+    waitingForHost: "Wait for the host to start the game.",
+    chipsCreated: "player chips created",
+    atLeastTwoPlayers: "At least 2 players are required.",
+    chipsOnStart: "Player chips will be created when the game starts.",
+    noPlayersYet: "No players have joined yet.",
+    close: "Close",
+    cancel: "Cancel",
+    save: "Save",
+    create: "Create",
+    edit: "Edit",
+    delete: "Delete",
+    disable: "Disable",
+    active: "active",
+    disabled: "disabled",
+    loading: "Loading …",
+    email: "Email",
+    password: "Password",
+    confirmPassword: "Confirm password",
+    role: "Role",
+    displayName: "Display name",
+    name: "Name",
+    createUser: "Create user",
+    editUser: "Edit user",
+    newUser: "Create new user",
+    existingUsers: "Existing users",
+    accountActive: "Account is active",
+    optional: "optional",
+    inviteHint: "Leave blank = send invitation",
+    inviteNotice: "Without a password, a one-time invitation is sent via SMTP.",
+    adminDashboardSubtitle: "Manage users, roles and credentials",
+    adminSettingsSubtitle: "Configure SMTP and invitations",
+    smtpServer: "SMTP server",
+    port: "Port",
+    smtpUsername: "SMTP username",
+    senderEmail: "Sender email",
+    senderName: "Sender name",
+    appUrl: "App URL for invitation links",
+    useTls: "Use STARTTLS (recommended)",
+    testEmail: "Test email",
+    sendTest: "Send test",
+    saveSettings: "Save settings",
+    setupAdmin: "Set up admin",
+    login: "Log in",
+    enterEmail: "Enter email",
+    passwordMin: "At least 8 characters",
+    passwordAgain: "Repeat password",
+    acceptInvite: "Accept invitation",
+    invite: "Your invitation",
+    setPasswordTitle: "Set password",
+    design: "Change design",
+    joinGame: "Join game",
+    newGameTitle: "New game",
+    gameCode: "Game code",
+    copy: "Copy",
+    copied: "Copied",
+    createGame: "Create game",
+    join: "Join",
+    chooseAction: "What would you like to do?",
+    helpTitle: "Help & game guide",
+    notes: "Notes",
+    playerChips: "Player chips",
+    whoHasCard: "Who has the card?",
+    selectChip: "Select chip",
+    readOnly: "Game finished – note sheet is read-only",
+    cycleStatus: "Click: Green → Red → Grey → Empty",
+    cycleNote: "— → i → m → s.(chip) → —",
+    gameStarted: "Game started",
+    investigationsBegin: "The investigation begins",
+    bestDetective: "May the best detective win.",
+  },
+};
+
+export function LanguageProvider({ children }) {
+  const [language, setLanguage] = useState(() => {
+    try { return localStorage.getItem(STORAGE_KEY) === "en" ? "en" : "de"; } catch { return "de"; }
+  });
+
+  useEffect(() => {
+    try { localStorage.setItem(STORAGE_KEY, language); } catch {}
+    document.documentElement.lang = language;
+  }, [language]);
+
+  const value = useMemo(() => ({
+    language,
+    setLanguage,
+    toggleLanguage: () => setLanguage((current) => current === "de" ? "en" : "de"),
+    t: (key, values = {}) => {
+      let value = translations[language][key] || key;
+      Object.entries(values).forEach(([name, replacement]) => { value = value.replaceAll(`{${name}}`, replacement); });
+      return value;
+    },
+  }), [language]);
+
+  return <LanguageContext.Provider value={value}>{children}</LanguageContext.Provider>;
+}
+
+export function useLanguage() {
+  return useContext(LanguageContext) || { language: "de", toggleLanguage: () => {}, t: (key) => key };
+}
@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.jsx";
+import { LanguageProvider } from "./i18n.jsx";
 import { applyTheme, DEFAULT_THEME_KEY } from "./styles/themes";
 import { registerSW } from "virtual:pwa-register";

@@ -21,7 +22,9 @@ async function bootstrap() {
  } catch {}

  // App rendern
-  ReactDOM.createRoot(document.getElementById("root")).render(<App />);
+  ReactDOM.createRoot(document.getElementById("root")).render(
+    <LanguageProvider><App /></LanguageProvider>
+  );

  // Splash mind. 3 Sekunden anzeigen (3000ms)
  const MIN_SPLASH_MS = 3000;
@@ -105,18 +105,25 @@ export function useHpGlobalStyles() {
      @keyframes hpStartLine { 0%, 100% { opacity: .3; transform: scaleX(.7); } 50% { opacity: 1; transform: scaleX(1); } }
      .hp-topbar-actions { margin-left: auto; }
      .hp-user-menu-wrap { min-width: 0; }
-      .hp-admin-user-row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.45fr) 62px 62px 78px; white-space: nowrap; }
+      .hp-admin-user-row { grid-template-columns: minmax(90px, 1.2fr) minmax(90px, 1.5fr) 58px 58px 100px; white-space: nowrap; min-height: 42px; padding: 6px 8px !important; }
      .hp-admin-action { min-width: 0; }
      .hp-admin-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
-      .hp-admin-icon-action { width: 34px; height: 34px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
+      .hp-admin-icon-action { width: 30px; height: 30px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
      .hp-admin-name, .hp-admin-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .hp-admin-check { display: flex; align-items: center; gap: 8px; color: var(--hp-textDim); font-size: 13px; }
      .hp-admin-check input { width: 18px; height: 18px; accent-color: var(--hp-textGold); }
      .hp-admin-editor-card { overflow: hidden; }
+      .hp-settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 10px; }
+      .hp-settings-test { display: flex; align-items: end; gap: 10px; }
+      .hp-invite-card { animation: popIn 480ms cubic-bezier(.2,.8,.2,1); box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 40px rgba(233,216,166,.08); }
+      .hp-invite-seal { width: 52px; height: 52px; margin: 0 auto 14px; display: grid; place-items: center; border: 1px solid rgba(233,216,166,.42); border-radius: 50%; color: var(--hp-textGold); font-size: 24px; box-shadow: 0 0 24px rgba(233,216,166,.12); }
      .hp-admin-role { padding: 4px 8px; border-radius: 999px; background: rgba(233,216,166,0.10); border: 1px solid rgba(233,216,166,0.16); font-size: 12px; }
      .hp-admin-status { color: #baf3c9 !important; font-size: 13px; }
      .hp-admin-status--disabled { color: #ffb3b3 !important; }
      @media (max-width: 600px) {
+        .hp-settings-grid { grid-template-columns: 1fr; }
+        .hp-settings-test { align-items: stretch; flex-direction: column; }
+        .hp-settings-test button { width: 100%; }
        .hp-shell { padding: calc(12px + env(safe-area-inset-top)) 10px calc(28px + env(safe-area-inset-bottom)) !important; }
        .hp-topbar { align-items: center !important; padding: 10px !important; gap: 6px !important; flex-wrap: nowrap !important; }
        .hp-topbar > div:first-child { min-width: 0; flex: 1; }
@@ -127,15 +134,14 @@ export function useHpGlobalStyles() {
        .hp-topbar-user { justify-content: center; }
        .hp-user-dropdown { left: 50% !important; right: auto !important; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 20px); min-width: min(220px, calc(100vw - 20px)) !important; }
        .hp-user-dropdown > div:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-        .hp-admin-user-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 11px !important; border-radius: 15px !important; }
-        .hp-admin-name { grid-column: 1; grid-row: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; }
-        .hp-admin-email { grid-column: 1; grid-row: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px !important; }
-        .hp-admin-role { grid-column: 2; grid-row: 1; }
-        .hp-admin-status { grid-column: 2; grid-row: 2; }
-        .hp-admin-actions { grid-column: 1 / -1; grid-row: 3; width: 100%; justify-content: flex-end; }
-        .hp-admin-actions .hp-admin-action { width: 36px; min-width: 36px; min-height: 36px; padding: 0 !important; }
+        .hp-admin-user-row { grid-template-columns: minmax(65px, 1.1fr) minmax(0, 1.3fr) 42px 42px 94px; gap: 3px; padding: 7px !important; border-radius: 12px !important; min-height: 42px; }
+        .hp-admin-name, .hp-admin-email { min-width: 0; font-size: 12px !important; }
+        .hp-admin-role, .hp-admin-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px !important; padding-left: 2px !important; padding-right: 2px !important; }
+        .hp-admin-actions { width: auto; justify-content: flex-end; gap: 3px; }
+        .hp-admin-actions .hp-admin-action { width: 29px; min-width: 29px; height: 29px; min-height: 29px; padding: 0 !important; font-size: 14px; }
        .hp-admin-editor-card { padding: 14px !important; max-height: calc(100dvh - 20px) !important; }
        .hp-admin-editor-card input, .hp-admin-editor-card select { min-height: 40px; padding: 8px 10px !important; }
+        .hp-admin-settings-card { padding: 14px !important; max-height: calc(100dvh - 20px) !important; overflow: auto; }
        .hp-admin-editor-card button { min-height: 40px; }
        .hp-row { grid-template-columns: minmax(0, 1fr) 42px 62px !important; gap: 7px !important; padding: 12px 11px !important; }
        .hp-row button { min-height: 40px; }
@@ -189,7 +189,6 @@ export const styles = {
  },
  userRow: {
    display: "grid",
-    gridTemplateColumns: "1fr 80px 90px",
    gap: 8,
    padding: 10,
    borderRadius: 12,
Author	SHA1	Message	Date
nessi	209f9c10dd	Reduce winner celebration confetti intensity and duration for subtler animation effect Simplified confetti animation by removing continuous rain effect and reducing burst parameters. Changed color palette to warmer gold/green tones. Decreased particle count from 170 to 55 per burst, reduced spread from 95° to 72°, lowered velocity from 42 to 28, and adjusted positioning. Added gravity, ticks, and scalar parameters for more controlled particle behavior. Shortened total celebration duration from 5500ms to 4200ms.	2026-08-02 11:47:16 +02:00
nessi	d672648a05	Prevent winner selection from being overwritten by polling updates using dirty flag Added `winnerSelectionDirtyRef` to track when user has manually changed winner selection. Modified `loadGameMeta` to skip updating `winnerUserId` state when dirty flag is set, preventing polling from overwriting user's unsaved selection. Introduced `selectWinner` helper that sets dirty flag on manual selection and clears flag after successful save. Reset dirty flag in all state cleanup handlers (goHome, logout, le	2026-08-02 11:38:08 +02:00
nessi	ea08016ea5	Add dedicated home page with game list and welcome screen, replacing auto-selection behavior Implemented HomePage component with centered welcome message, create/join button, and list of user's games with name/code display. Modified App.jsx to show HomePage when no game is selected instead of auto-selecting first game. Added `goHome` handler to reset all game state and return to home screen. Added home button (🏠) to GamePickerCard header next to help button with bilingual tooltip. Removed automatic	2026-08-02 10:58:38 +02:00
nessi	c9eae136fb	Allow QR code generation for both created games and joined games using current code Extended QR code functionality to work with `currentCode` (joined games) in addition to `created.code` (created games). Updated QR generation effect to use fallback value and added dependencies. Moved QR toggle button and display from created-game-only section to shared code display area, enabling QR codes for all game participants.	2026-08-02 10:55:42 +02:00
nessi	ee8ae8829e	Add QR code generation and scanning for game join codes with camera integration Implemented QR code generation for created games using qrcode library with custom dark/light color scheme. Added camera-based QR scanner using BarcodeDetector API with environment-facing camera preference, automatic code extraction, and 350ms polling interval. Added toggle buttons for QR display/scanner with bilingual labels, video preview with styled container, and fallback error handling for unsupported browsers or denied	2026-08-02 10:52:37 +02:00
nessi	b20056913b	Add game cancellation feature with cascade deletion and host-only access control Implemented DELETE `/games/{game_id}` endpoint allowing hosts to cancel games with cascade deletion of sheet states, chips, and memberships. Added `cancelGame` handler in App.jsx to delete game, refresh game list, reset state, and show confirmation snack. Added cancel button to GamePickerCard lobby section (pre-start) and started section (non-finished games) with bilingual confirmation dialog, loading state, and error handling.	2026-08-02 10:46:38 +02:00
nessi	565d538c35	Add permanent user deletion endpoint with cascade cleanup and trash icon button in admin panel Implemented DELETE `/admin/users/{user_id}/permanent` endpoint with safeguards preventing self-deletion and blocking deletion of game hosts. Added cascade deletion of user's game memberships, chips, sheet states, and invite tokens, with winner references nullified. Added trash icon button (🗑) to admin user rows with bilingual confirmation dialog and error handling for game ownership conflicts. Adjusted	2026-08-02 10:44:40 +02:00
nessi	45fc8e4c9e	Improve email template readability with explicit text colors and dark background for invite body content	2026-08-02 10:42:13 +02:00
nessi	e7d288ff12	Add SMTP security mode selector with SSL/STARTTLS/none options and automatic port switching Replaced boolean `smtp_use_tls` with explicit `smtp_security` enum field supporting "none", "starttls", and "ssl" modes. Added database migration to create `smtp_security` column with "starttls" default. Updated mailer to use SMTP_SSL client for direct SSL connections on port 465 and SMTP with STARTTLS for port 587. Modified admin settings UI to show dropdown selector with encryption options and auto-adjust	2026-08-02 10:38:50 +02:00
nessi	33caa8f792	Add entry label translation system for German-to-English game sheet items Implemented `translateEntryLabel` helper function with mapping dictionary for translating German game entry labels (spells, potions, locations) to English equivalents. Added language parameter extraction in SheetSection component and applied translation to entry labels based on current language setting. Maintains German as source labels with English translations provided via lookup table.	2026-08-02 10:36:44 +02:00
nessi	33a972e502	Add internationalization support with English/German language toggle across all components Integrated i18n system throughout the application with `useLanguage` hook providing translation function and language state. Added bilingual support to all user-facing strings in App.jsx (password validation, error messages, game creation, sheet sections), AdminPanel (user management, form validation, status messages), AdminSettingsModal (SMTP configuration), ChipModal, DesignModal, GamePickerCard (lobby interface,	2026-08-02 10:33:40 +02:00
nessi	d96b75ca82	Add email invitation system with SMTP configuration and invite token workflow Implemented comprehensive email invitation functionality for new users. Added SMTP settings management in admin panel with configuration UI for host, port, credentials, sender details, and TLS options. Created invite token system with 48-hour expiration and single-use enforcement. Added mailer module with HTML email templates in German theme styling (radial gradient backgrounds, gold accents, bordered cards). Implemented invite	2026-08-02 10:24:34 +02:00