Refactor admin panel with icon-based actions, improved mobile layout, and enhanced text truncation

Replaced text action buttons with icon-based buttons (edit ✎, disable ⏻) with tooltips and aria-labels for accessibility. Adjusted admin user grid columns for better space distribution and added text truncation to name/email fields to prevent overflow. Enhanced mobile responsiveness with larger touch targets (36px), reduced editor card padding, and increased input/button heights (40px). Added box

.env

@@ -1,11 +0,0 @@
-POSTGRES_DB=cluedo
-POSTGRES_USER=cluedo
-POSTGRES_PASSWORD=supersecret
-
-# Backend
-BACKEND_SECRET_KEY=please_change_me_to_a_long_random_string
-BACKEND_BASE_URL=http://localhost:8080
-
-# Admin initial user (wird beim Start angelegt, falls nicht existiert)
-ADMIN_EMAIL=admin@local
-ADMIN_PASSWORD=ChangeMeNow123!

.env.example

@@ -0,0 +1,6 @@
+# Required backend secret. Use a long, random value in your local .env file.
+BACKEND_SECRET_KEY=please_change_me_to_a_long_random_string
+
+# Optional cookie settings for local/internal deployments.
+COOKIE_SECURE=false
+COOKIE_SAMESITE=Lax

.gitignore

@@ -0,0 +1,6 @@
+.env
+backend/data/
+frontend/node_modules/
+frontend/dist/
+__pycache__/
+*.py[cod]

README.md

@@ -1,2 +1,222 @@
-# cluedo-hp-webapp
+# Cluedo HP Webapp
 
+A small multiplayer web app that acts as a digital note sheet for a Harry Potter-inspired Cluedo game. Several logged-in players can join the same game and manage their personal clues independently.
+
+## Features
+
+- Login with user and admin roles
+- Admin-managed user creation and deactivation
+- Multiple games per user
+- Join games using a short join code
+- Host-controlled game start with automatic player chips
+- Pre-game lobby with live player list, host status, and start confirmation
+- Player chips are generated from the first name initial and first two surname letters, e.g. `SNE` for Sascha Nesterovic
+- Automatic player list with host indication
+- Personal note sheet for each player and game
+- Categories for suspects, items, and locations
+- Entry status tracking: empty, ruled out, present, or maybe
+- Additional notes using `i`, `m`, and `s.<chip>`
+- Winner selection by the game host
+- Winner badge and confetti animation for all players
+- Live updates for new players and winner changes
+- Personal game statistics
+- Password change functionality
+- Harry Potter house themes: Default, Gryffindor, Slytherin, Ravenclaw, and Hufflepuff
+- Installable as a Progressive Web App
+
+## Technology
+
+### Frontend
+
+- React 18
+- Vite
+- Nginx as the production web server
+- `canvas-confetti` for the winner animation
+- `vite-plugin-pwa` for PWA support
+
+### Backend
+
+- Python 3.12
+- FastAPI
+- SQLAlchemy 2
+- SQLite 3
+- Passlib and bcrypt for password hashing
+
+### Deployment
+
+- Docker Compose
+- Frontend on port `8081`
+- Backend on port `8080`
+- SQLite database stored in a persistent Docker volume
+
+## Quick start with Docker
+
+Requirements:
+
+- Docker
+- Docker Compose
+
+1. Copy `.env.example` to `.env` and set a strong secret:
+
+```env
+BACKEND_SECRET_KEY=use-a-long-random-secret-value
+```
+
+2. Build and start the containers:
+
+```bash
+docker compose up --build
+```
+
+3. Open the application:
+
+- Frontend: http://localhost:8081
+- Backend/API: http://localhost:8080
+
+On the first startup, the application opens a setup screen where you create the first administrator with an email address, display name, and password. The default suspects, items, and locations are seeded automatically as well.
+
+The SQLite database is stored in the Docker volume `cluedo-data` and survives normal container restarts.
+
+Start the containers in the background:
+
+```bash
+docker compose up -d --build
+```
+
+View logs:
+
+```bash
+docker compose logs -f backend
+```
+
+Stop the containers:
+
+```bash
+docker compose down
+```
+
+## Local development without Docker
+
+### Backend
+
+```bash
+cd backend
+python -m venv .venv
+source .venv/bin/activate
+pip install -r requirements.txt
+
+export DATABASE_URL=sqlite:///./data/cluedo.db
+export SECRET_KEY=use-a-long-random-secret-value
+
+uvicorn app.main:app --reload --port 8080
+```
+
+On Windows PowerShell, set the environment variables like this:
+
+```powershell
+$env:DATABASE_URL = "sqlite:///./data/cluedo.db"
+$env:SECRET_KEY = "use-a-long-random-secret-value"
+uvicorn app.main:app --reload --port 8080
+```
+
+### Frontend
+
+```bash
+cd frontend
+npm install
+npm run dev
+```
+
+The frontend is normally available at http://localhost:5173. During development, the API must be reachable under `/api`; the production Docker setup provides this through Nginx.
+
+Create a production build:
+
+```bash
+npm run build
+```
+
+## Project structure
+
+```text
+.
+├── backend/
+│   ├── app/
+│   │   ├── main.py              # FastAPI app, startup, seed data
+│   │   ├── models.py            # SQLAlchemy models
+│   │   ├── db.py                # SQLite engine and sessions
+│   │   ├── security.py          # Password and cookie logic
+│   │   └── routes/              # Auth, admin, and game APIs
+│   ├── Dockerfile
+│   └── requirements.txt
+├── frontend/
+│   ├── src/
+│   │   ├── App.jsx              # Main UI and game flow
+│   │   ├── api/client.js         # API client
+│   │   ├── components/           # Pages, cards, and modals
+│   │   ├── styles/               # Themes and inline styles
+│   │   └── utils/                # Small helpers and storage utilities
+│   ├── Dockerfile
+│   └── nginx.conf
+├── docker-compose.yml
+└── .env
+```
+
+## Data model
+
+- `users`: users, roles, status, display names, and themes
+- `games`: game name, join code, host, and winner
+- `game_members`: assignment of users to games
+- `entries`: seeded suspects, items, and locations
+- `sheet_state`: personal status and notes for an entry
+
+Each player has their own set of `sheet_state` records for every game. A player's notes are therefore not visible to other players.
+
+## API overview
+
+### Authentication
+
+- `POST /auth/login`
+- `POST /auth/logout`
+- `GET /auth/me`
+- `PATCH /auth/password`
+- `PATCH /auth/theme`
+- `GET /auth/me/stats`
+
+### First-run setup
+
+- `GET /setup/status`
+- `POST /setup/admin`
+
+The setup endpoint is available only while no administrator exists. After the first administrator has been created, the setup screen is disabled automatically.
+
+### Administration
+
+- `GET /admin/users`
+- `POST /admin/users`
+- `DELETE /admin/users/{user_id}` – deactivates a user
+
+### Games
+
+- `GET /games`
+- `POST /games`
+- `POST /games/join`
+- `GET /games/{game_id}`
+- `GET /games/{game_id}/members`
+- `PATCH /games/{game_id}/winner`
+- `POST /games/{game_id}/start`
+- `GET /games/{game_id}/chips`
+- `GET /games/{game_id}/sheet`
+- `PATCH /games/{game_id}/sheet/{entry_id}`
+
+## SQLite notes
+
+SQLite is a good fit for this application: the data volume is small, the app is intended for internal use, and write operations are short. The database file is stored inside the container at `/app/data/cluedo.db` and persisted through the `cluedo-data` volume.
+
+For larger deployments with many concurrent write operations, PostgreSQL would still be the more robust choice. For the intended private or small-group use case, SQLite is sufficient.
+
+## Security notes
+
+- The values in `.env` are examples and should be changed before production use.
+- When using HTTPS, set `COOKIE_SECURE` to `true`.
+- The application is intended for an internal or small user group.
+- The automatic database migration is intentionally pragmatic and does not replace a migration system such as Alembic.

backend/Dockerfile

@@ -1,6 +1,7 @@
 FROM python:3.12-slim
 
 WORKDIR /app
+RUN mkdir -p /app/data
 COPY requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
 

backend/app/db.py

@@ -1,10 +1,25 @@
 import os
+from pathlib import Path
+
 from sqlalchemy import create_engine
 from sqlalchemy.orm import sessionmaker, DeclarativeBase
 
-DATABASE_URL = os.environ["DATABASE_URL"]
+DATABASE_URL = os.getenv("DATABASE_URL", "sqlite:///./data/cluedo.db")
 
-engine = create_engine(DATABASE_URL, pool_pre_ping=True)
+engine_options = {"pool_pre_ping": True}
+
+if DATABASE_URL.startswith("sqlite"):
+    # SQLite does not allow connections to be used from another thread by
+    # default. FastAPI/SQLAlchemy may use a connection across request threads.
+    engine_options["connect_args"] = {"check_same_thread": False}
+
+    # Make the parent directory available for the default local database.
+    if DATABASE_URL.startswith("sqlite:///"):
+        sqlite_path = DATABASE_URL.removeprefix("sqlite:///")
+        if sqlite_path not in (":memory:", ""):
+            Path(sqlite_path).expanduser().parent.mkdir(parents=True, exist_ok=True)
+
+engine = create_engine(DATABASE_URL, **engine_options)
 SessionLocal = sessionmaker(bind=engine, autoflush=False, autocommit=False)
 
 class Base(DeclarativeBase):
@@ -16,4 +31,4 @@ def get_db():
         yield db
     finally:
         db.close()
-        
+        

backend/app/main.py

@@ -1,4 +1,3 @@
-import os
 import random
 import string
 
@@ -8,11 +7,11 @@ from sqlalchemy import text
 from sqlalchemy.orm import Session
 
 from .db import Base, engine, SessionLocal
-from .models import User, Entry, Category, Role, Game, GameMember
+from .models import User, Entry, Category, Game, GameMember
-from .security import hash_password
 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
 
 app = FastAPI(title="Cluedo Sheet")
 
@@ -31,6 +30,7 @@ app.add_middleware(
 app.include_router(auth_router)
 app.include_router(admin_router)
 app.include_router(games_router)
+app.include_router(setup_router)
 
 
 def _rand_join_code(n: int = 6) -> str:
@@ -136,6 +136,14 @@ Very small, pragmatic auto-migration (no alembic).
         except Exception:
             db.rollback()
 
+    # started_at: games are open for joining until the host starts them
+    if not _has_column(db, "games", "started_at"):
+        try:
+            db.execute(text("ALTER TABLE games ADD COLUMN started_at DATETIME"))
+            db.commit()
+        except Exception:
+            db.rollback()
+
     # host_user_id (nice to have for "only host can set winner")
     if not _has_column(db, "games", "host_user_id"):
         try:
@@ -276,23 +284,6 @@ def seed_entries(db: Session):
     db.commit()
 
 
-def ensure_admin(db: Session):
-    admin_email = os.environ.get("ADMIN_EMAIL", "admin@local").lower().strip()
-    admin_pw = os.environ.get("ADMIN_PASSWORD", "ChangeMeNow123!")
-    u = db.query(User).filter(User.email == admin_email).first()
-    if not u:
-        db.add(
-            User(
-                email=admin_email,
-                password_hash=hash_password(admin_pw),
-                role=Role.admin.value,
-                theme_key="default",
-                display_name="Admin",
-            )
-        )
-        db.commit()
-
-
 @app.on_event("startup")
 def on_startup():
     # create new tables
@@ -301,8 +292,7 @@ def on_startup():
     db = SessionLocal()
     try:
         _auto_migrate(db)
-        ensure_admin(db)
         seed_entries(db)
     finally:
         db.close()
-        
+        

backend/app/models.py

@@ -54,6 +54,17 @@ class Game(Base):
     code: Mapped[str] = mapped_column(String, unique=True, index=True)
 
     winner_user_id: Mapped[str | None] = mapped_column(String, ForeignKey("users.id"), nullable=True)
+    started_at: Mapped[str | None] = mapped_column(DateTime(timezone=True), nullable=True)
+
+
+class GameChip(Base):
+    __tablename__ = "game_chips"
+    __table_args__ = (UniqueConstraint("game_id", "user_id", name="uq_game_chip_user"),)
+
+    id: Mapped[str] = mapped_column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
+    game_id: Mapped[str] = mapped_column(String, ForeignKey("games.id"), index=True)
+    user_id: Mapped[str] = mapped_column(String, ForeignKey("users.id"), index=True)
+    chip: Mapped[str] = mapped_column(String)
 
 
 class GameMember(Base):
@@ -86,4 +97,4 @@ class SheetState(Base):
     note_tag: Mapped[str | None] = mapped_column(String, nullable=True)
 
     chip: Mapped[str | None] = mapped_column(String, nullable=True)
-    
+    

backend/app/routes/admin.py

@@ -61,11 +61,48 @@ def delete_user(req: Request, user_id: str, db: Session = Depends(get_db)):
     if not u:
         raise HTTPException(404, "not found")
 
-    if u.role == Role.admin.value:
-        raise HTTPException(400, "cannot delete admin user")
-
     # soft delete
     u.disabled = True
     db.add(u)
     db.commit()
-    return {"ok": True}
+    return {"ok": True}
+
+
+@router.patch("/users/{user_id}")
+def update_user(req: Request, user_id: str, data: dict, db: Session = Depends(get_db)):
+    admin = require_admin(req, db)
+    user = db.query(User).filter(User.id == user_id).first()
+    if not user:
+        raise HTTPException(404, "not found")
+
+    email = (data.get("email") or user.email).lower().strip()
+    display_name = (data.get("display_name") if "display_name" in data else user.display_name or "").strip()
+    role = data.get("role") or user.role
+    password = data.get("password") or ""
+
+    if not email or "@" not in email:
+        raise HTTPException(400, "valid email required")
+    if role not in (Role.admin.value, Role.user.value):
+        raise HTTPException(400, "invalid role")
+    if password and len(password) < 8:
+        raise HTTPException(400, "password too short (min 8)")
+    if admin.id == user_id and role != Role.admin.value:
+        raise HTTPException(400, "cannot demote yourself")
+    if admin.id == user_id and data.get("disabled") is True:
+        raise HTTPException(400, "cannot disable yourself")
+
+    duplicate = db.query(User).filter(User.email == email, User.id != user_id).first()
+    if duplicate:
+        raise HTTPException(409, "email exists")
+
+    user.email = email
+    user.display_name = display_name
+    user.role = role
+    if password:
+        user.password_hash = hash_password(password)
+    if "disabled" in data:
+        user.disabled = bool(data["disabled"])
+
+    db.add(user)
+    db.commit()
+    return {"ok": True}

backend/app/routes/games.py

@@ -1,8 +1,12 @@
-import hashlib, random
+import hashlib
+import random
+import re
+import unicodedata
+from datetime import datetime, timezone
 from fastapi import APIRouter, Depends, HTTPException, Request
 from sqlalchemy.orm import Session
 from ..db import get_db
-from ..models import Game, Entry, SheetState, Category, GameMember, User, Role
+from ..models import Game, GameChip, Entry, SheetState, Category, GameMember, User, Role
 from ..security import get_session_user_id
 
 router = APIRouter(prefix="/games", tags=["games"])
@@ -27,6 +31,25 @@ def gen_code(n=6) -> str:
     return "".join(random.choice(CODE_ALPHABET) for _ in range(n))
 
 
+def make_user_chip(user: User) -> str:
+    """Create first-name initial + first two surname letters, e.g. SNE."""
+    display_name = (user.display_name or "").strip()
+    if not display_name:
+        display_name = (user.email or "").split("@", 1)[0].replace(".", " ")
+
+    parts = re.split(r"\s+", display_name)
+    first = parts[0] if parts else "X"
+    last = parts[-1] if len(parts) > 1 else first
+
+    def letters(value: str) -> str:
+        normalized = unicodedata.normalize("NFKD", value)
+        return "".join(c for c in normalized if c.isalpha())
+
+    first_letters = letters(first).upper() or "X"
+    last_letters = letters(last).upper() or "X"
+    return (first_letters[0] + last_letters[:2]).ljust(3, "X")
+
+
 def ensure_member(db: Session, game_id: str, user_id: str):
     ex = db.query(GameMember).filter(GameMember.game_id == game_id, GameMember.user_id == user_id).first()
     if ex:
@@ -78,6 +101,8 @@ def join_game(req: Request, data: dict, db: Session = Depends(get_db)):
     g = db.query(Game).filter(Game.code == code).first()
     if not g:
         raise HTTPException(404, "game not found")
+    if g.started_at:
+        raise HTTPException(400, "game already started")
 
     ensure_member(db, g.id, uid)
     return {"ok": True, "id": g.id, "name": g.name, "code": g.code, "host_user_id": g.host_user_id}
@@ -112,6 +137,7 @@ def list_games(req: Request, db: Session = Depends(get_db)):
                 "host_user_id": g.host_user_id,
                 "winner_user_id": g.winner_user_id,
                 "winner_email": winner_email,
+                "started": bool(g.started_at),
             }
         )
     return out
@@ -139,9 +165,63 @@ def get_game_meta(req: Request, game_id: str, db: Session = Depends(get_db)):
         "winner_user_id": g.winner_user_id,
         "winner_email": winner_email,
         "winner_display_name": winner_display_name,
+        "started": bool(g.started_at),
+        "started_at": g.started_at,
     }
 
 
+@router.post("/{game_id}/start")
+def start_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 start the game")
+
+    if not g.started_at:
+        members = (
+            db.query(User)
+            .join(GameMember, GameMember.user_id == User.id)
+            .filter(GameMember.game_id == game_id, User.role == Role.user.value, User.disabled == False)
+            .order_by(User.email.asc())
+            .all()
+        )
+
+        used = set()
+        for member in members:
+            base = make_user_chip(member)
+            chip = base
+            suffix = 2
+            while chip in used:
+                chip = f"{base[:2]}{suffix}"
+                suffix += 1
+            used.add(chip)
+            db.add(GameChip(game_id=game_id, user_id=member.id, chip=chip))
+
+        g.started_at = datetime.now(timezone.utc)
+        db.add(g)
+        db.commit()
+
+    return {"ok": True, "started": 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)
+    g = require_game_member(db, game_id, uid)
+    if not g.started_at:
+        return []
+
+    chips = (
+        db.query(GameChip, User)
+        .join(User, User.id == GameChip.user_id)
+        .filter(GameChip.game_id == game_id)
+        .order_by(User.display_name.asc(), User.email.asc())
+        .all()
+    )
+    return [{"user_id": chip.user_id, "chip": chip.chip, "display_name": user.display_name, "email": user.email} for chip, user in chips]
+
+
 @router.get("/{game_id}/members")
 def list_members(req: Request, game_id: str, db: Session = Depends(get_db)):
     uid = require_user(req, db)
@@ -228,6 +308,9 @@ def patch_sheet(req: Request, game_id: str, entry_id: str, data: dict, db: Sessi
     uid = require_user(req, db)
     g = require_game_member(db, game_id, uid)
 
+    if g.winner_user_id:
+        raise HTTPException(403, "game finished; sheet is read-only")
+
     status = data.get("status")
     note_tag = data.get("note_tag")
     chip = data.get("chip")
@@ -277,4 +360,4 @@ def patch_sheet(req: Request, game_id: str, entry_id: str, data: dict, db: Sessi
 
     db.commit()
     return {"ok": True}
-    
+    

backend/app/routes/setup.py

@@ -0,0 +1,58 @@
+import re
+
+from fastapi import APIRouter, Depends, HTTPException, Response
+from sqlalchemy.orm import Session
+
+from ..db import get_db
+from ..models import Role, User
+from ..security import hash_password, make_session_value, set_session
+
+router = APIRouter(prefix="/setup", tags=["setup"])
+
+
+def _has_admin(db: Session) -> bool:
+    return db.query(User).filter(User.role == Role.admin.value).first() is not None
+
+
+@router.get("/status")
+def setup_status(db: Session = Depends(get_db)):
+    return {"setup_required": not _has_admin(db)}
+
+
+@router.post("/admin")
+def create_initial_admin(
+    data: dict,
+    resp: Response,
+    db: Session = Depends(get_db),
+):
+    # The setup endpoint is only open until the first admin exists.
+    if _has_admin(db):
+        raise HTTPException(status_code=409, detail="setup already completed")
+
+    email = (data.get("email") or "").lower().strip()
+    display_name = (data.get("display_name") or "").strip()
+    password = data.get("password") or ""
+
+    if not re.match(r"^[^@\s]+@[^@\s]+\.[^@\s]+$", email):
+        raise HTTPException(status_code=400, detail="valid email required")
+    if len(password) < 8:
+        raise HTTPException(status_code=400, detail="password too short (min 8)")
+    if not display_name:
+        display_name = email.split("@", 1)[0]
+
+    if db.query(User).filter(User.email == email).first():
+        raise HTTPException(status_code=409, detail="email exists")
+
+    user = User(
+        email=email,
+        password_hash=hash_password(password),
+        role=Role.admin.value,
+        display_name=display_name,
+    )
+    db.add(user)
+    db.commit()
+    db.refresh(user)
+
+    # Log the installer in immediately after successful setup.
+    set_session(resp, make_session_value(user.id))
+    return {"ok": True, "id": user.id, "email": user.email}

backend/requirements.txt

@@ -1,7 +1,6 @@
 fastapi==0.115.0
 uvicorn[standard]==0.30.6
 SQLAlchemy==2.0.34
-psycopg[binary]==3.2.2
 python-multipart==0.0.9
 
 passlib==1.7.4

docker-compose.yml

@@ -1,30 +1,13 @@
 services:
-  db:
-    image: postgres:16
-    environment:
-      POSTGRES_DB: ${POSTGRES_DB}
-      POSTGRES_USER: ${POSTGRES_USER}
-      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
-    volumes:
-      - pgdata:/var/lib/postgresql/data
-    healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER} -d ${POSTGRES_DB}"]
-      interval: 5s
-      timeout: 5s
-      retries: 20
-
   backend:
     build: ./backend
     environment:
-      DATABASE_URL: postgresql+psycopg://${POSTGRES_USER}:${POSTGRES_PASSWORD}@db:5432/${POSTGRES_DB}
+      DATABASE_URL: sqlite:////app/data/cluedo.db
       SECRET_KEY: ${BACKEND_SECRET_KEY}
-      ADMIN_EMAIL: ${ADMIN_EMAIL}
-      ADMIN_PASSWORD: ${ADMIN_PASSWORD}
       COOKIE_SECURE: "false"   # intern ohne https; wenn du später https machst -> true
       COOKIE_SAMESITE: "Lax"
-    depends_on:
+    volumes:
-      db:
+      - cluedo-data:/app/data
-        condition: service_healthy
     ports:
       - "8080:8080"
 
@@ -36,4 +19,4 @@ services:
       - "8081:80"
 
 volumes:
-  pgdata:
+  cluedo-data:

frontend/index.html

@@ -94,6 +94,36 @@
         overflow: hidden;
       }
 
+      .splash-card::after {
+        content: "";
+        position: absolute;
+        inset: 18% 28%;
+        border: 1px solid rgba(233, 216, 166, 0.24);
+        border-radius: 50%;
+        transform: rotate(-18deg);
+        animation: orbit 2.8s ease-in-out infinite;
+        pointer-events: none;
+      }
+
+      .magic-orbit {
+        position: relative;
+        width: 74px;
+        height: 42px;
+        margin: 0 auto 4px;
+      }
+
+      .magic-orbit::before,
+      .magic-orbit::after {
+        content: "✦";
+        position: absolute;
+        color: rgba(233, 216, 166, 0.92);
+        font-size: 16px;
+        animation: sparkle 1.4s ease-in-out infinite;
+      }
+
+      .magic-orbit::before { left: 8px; top: 14px; }
+      .magic-orbit::after { right: 8px; top: 3px; animation-delay: .55s; }
+
       .splash-card::before {
         content: "";
         position: absolute;
@@ -111,6 +141,7 @@
         color: rgba(245, 239, 220, 0.92);
         font-size: 18px;
         line-height: 1.25;
+        animation: titleRise 700ms ease-out both;
       }
 
       .splash-sub {
@@ -156,6 +187,21 @@
         0%, 100% { opacity: 0.35; transform: scaleX(0.92); }
         50% { opacity: 0.85; transform: scaleX(1.02); }
       }
+
+      @keyframes orbit {
+        0%, 100% { transform: rotate(-18deg) scale(.94); opacity: .45; }
+        50% { transform: rotate(18deg) scale(1.06); opacity: .9; }
+      }
+
+      @keyframes sparkle {
+        0%, 100% { transform: translateY(3px) scale(.65); opacity: .25; }
+        50% { transform: translateY(-4px) scale(1.2); opacity: 1; }
+      }
+
+      @keyframes titleRise {
+        from { opacity: 0; transform: translateY(8px); letter-spacing: .18em; }
+        to { opacity: 1; transform: translateY(0); letter-spacing: .06em; }
+      }
     </style>
 
     <!-- Theme-Key sofort setzen -->
@@ -170,6 +216,7 @@
   <body>
     <div id="app-splash" aria-hidden="true">
       <div class="splash-card">
+        <div class="magic-orbit" aria-hidden="true"></div>
         <div class="splash-title">Zauber-Detektiv Notizbogen</div>
         <div class="splash-sub">Magie wird vorbereitet…</div>
         <div class="loader" aria-label="Laden"></div>

frontend/nginx.conf

@@ -7,7 +7,12 @@ server {
   }
 
   location /api/ {
-    proxy_pass http://backend:8080/;
+    # Resolve the Docker service at request time. This prevents Nginx from
+    # exiting when the Docker DNS entry is not ready during container startup.
+    resolver 127.0.0.11 ipv6=off valid=10s;
+    set $backend_upstream http://backend:8080;
+    rewrite ^/api/(.*)$ /$1 break;
+    proxy_pass $backend_upstream;
     proxy_http_version 1.1;
 
     proxy_set_header Host $host;

frontend/src/AppLayout.css

@@ -1,379 +0,0 @@
-/* frontend/src/AppLayout.css */
-html, body, #root {
-  height: 100%;
-}
-
-body {
-  overflow: hidden;
-}
-
-.appRoot {
-  height: 100vh;
-  display: grid;
-
-  /* Links: flexibel | Rechts: Notes clamp */
-  grid-template-columns: minmax(900px, 1fr) clamp(380px, 32vw, 520px);
-
-  gap: 14px;
-  padding: 14px;
-  box-sizing: border-box;
-  overflow: visible;
-}
-
-/* LEFT COLUMN */
-.leftPane {
-  overflow: visible;
-  min-width: 0;
-  display: grid;
-
-  /* Top | Main | HUD */
-  grid-template-rows: 68px minmax(360px, 1fr) minmax(160px, 190px);
-
-  gap: 14px;
-}
-
-.topBarRow {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 14px;
-  min-width: 0;
-}
-
-/* MAIN: Tools | Board | PlayerRail */
-.mainRow {
-  min-height: 0;
-  overflow: visible;
-  display: grid;
-
-  /* Tools bewusst schmaler, Board bekommt Bühne */
-  grid-template-columns: 260px minmax(560px, 1fr) 92px;
-
-  gap: 14px;
-  min-width: 0;
-}
-
-/* Tools left of board */
-.leftTools {
-  min-width: 0;
-  overflow: hidden;
-  display: grid;
-  align-content: start;
-}
-
-.leftToolsRow {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 14px;
-  min-width: 0;
-}
-
-/* Board */
-.boardWrap {
-  min-height: 0;
-  overflow: hidden;
-  border-radius: 22px;
-  min-width: 0;
-  position: relative;
-}
-
-/* Dice overlay: under board slightly right */
-.diceOverlay {
-  position: absolute;
-  overflow: visible;
-  bottom: 14px;
-  right: 18px;
-  width: 220px;
-  pointer-events: auto;
-  opacity: 0.98;
-}
-
-/* Player rail: right of board, before notes (tight) */
-.playerRail {
-  min-height: 0;
-  border-radius: 22px;
-  border: 1px solid rgba(255,255,255,0.08);
-  background: rgba(0,0,0,0.18);
-  backdrop-filter: blur(10px);
-  box-shadow: 0 16px 50px rgba(0,0,0,0.35);
-  padding: 10px 8px;
-
-  display: grid;
-  grid-template-rows: auto 1fr;
-  justify-items: center;
-  gap: 10px;
-
-  overflow: visible;
-}
-
-.playerRailInner {
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-  border-radius: 18px;
-  display: grid;
-  justify-items: center;
-}
-
-.playerRailTitle {
-  font-weight: 900;
-  font-size: 12px;
-  opacity: 0.9;
-}
-
-.playerRailList {
-  min-height: 0;
-  overflow: visible;
-  display: grid;
-  gap: 10px;
-  align-content: start;
-  justify-items: center;
-  padding-top: 4px;
-}
-
-/* HUD */
-.playerHud {
-  align-items: stretch;
-  overflow: visible;
-  display: grid;
-  grid-template-columns: 1.1fr 1.7fr 1.1fr;
-  gap: 14px;
-  min-width: 0;
-}
-
-.playerHudMiddle {
-  height: 100%;
-  min-width: 0;
-  min-height: 0;
-  overflow: visible;
-  display: grid;
-
-  /* Geheimkarten groß, Hilfkarte etwas kleiner */
-  grid-template-columns: 1fr 0.78fr;
-
-  gap: 14px;
-}
-
-/* RIGHT COLUMN */
-.notesPane {
-  overflow: hidden;
-  min-width: 0;
-  display: grid;
-  grid-template-rows: auto 1fr;
-}
-
-.notesScroll {
-  min-height: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding-right: 4px;
-}
-
-.diceOverlay {
-  position: absolute;
-  bottom: 14px;
-  right: 18px;
-  width: 220px;
-  pointer-events: auto; /* ✅ damit Hover/Clicks für Würfel gehen */
-  opacity: 0.98;
-}
-
-/* ===== True 3D Cube Dice (transition-based roll) ===== */
-.die3d {
-  transform-style: preserve-3d;
-  will-change: transform;
-}
-
-.die3d:hover:not(:disabled) {
-  transform: translateY(-3px) rotateX(8deg) rotateY(-10deg);
-}
-
-.dieCubeWrap {
-  width: 44px;
-  height: 44px;
-  position: relative;
-  transform-style: preserve-3d;
-}
-
-.dieCube {
-  width: 44px;
-  height: 44px;
-  position: absolute;
-  inset: 0;
-  transform-style: preserve-3d;
-
-  /* absolute angles (numbers are set in JS) */
-  transform: rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg));
-
-  /* default: snappy */
-  transition: transform 260ms cubic-bezier(0.22, 1.0, 0.25, 1);
-}
-
-.dieCube.rolling {
-  /* roll duration */
-  transition: transform 820ms cubic-bezier(0.18, 0.88, 0.22, 1);
-}
-
-/* Faces: remove hard borders / inner rings */
-.dieFace {
-  position: absolute;
-  inset: 0;
-  border-radius: 12px;
-  border: none; /* ✅ no face border */
-  background:
-    radial-gradient(120% 120% at 25% 18%, rgba(255,255,255,0.14), rgba(0,0,0,0.40) 60%, rgba(0,0,0,0.72));
-  box-shadow:
-    inset 0 0 0 1px rgba(255,255,255,0.05), /* very subtle */
-    inset 0 14px 24px rgba(255,255,255,0.04);
-  display: grid;
-  place-items: center;
-  backface-visibility: hidden;
-}
-
-/* face positions */
-.dieFace.front  { transform: rotateY(  0deg) translateZ(22px); }
-.dieFace.back   { transform: rotateY(180deg) translateZ(22px); }
-.dieFace.right  { transform: rotateY( 90deg) translateZ(22px); }
-.dieFace.left   { transform: rotateY(-90deg) translateZ(22px); }
-.dieFace.top    { transform: rotateX( 90deg) translateZ(22px); }
-.dieFace.bottom { transform: rotateX(-90deg) translateZ(22px); }
-
-/* pips */
-.pipGrid {
-  width: 70%;
-  height: 70%;
-  position: relative;
-}
-
-.pip {
-  position: absolute;
-  width: 7px;
-  height: 7px;
-  border-radius: 999px;
-  background: rgba(245,245,245,0.92);
-  box-shadow: 0 3px 10px rgba(0,0,0,0.35), inset 0 1px 2px rgba(0,0,0,0.20);
-}
-
-.specialIcon {
-  font-size: 20px;
-  line-height: 1;
-  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.55));
-}
-
-/* Prevent clipping */
-.diceRow3d { overflow: visible; }
-
-.dieCube.snap {
-  transition: none !important;
-}
-
-/* one face */
-.dieFace {
-  position: absolute;
-  inset: 0;
-  border-radius: 12px;
-  border: 1px solid rgba(255,255,255,0.10);
-  background:
-    radial-gradient(120% 120% at 25% 18%, rgba(255,255,255,0.14), rgba(0,0,0,0.40) 60%, rgba(0,0,0,0.72));
-  box-shadow:
-    inset 0 0 0 1px rgba(255,255,255,0.06),
-    inset 0 12px 20px rgba(255,255,255,0.05);
-  display: grid;
-  place-items: center;
-  backface-visibility: hidden;
-}
-
-/* face positions */
-.dieFace.front  { transform: rotateY(  0deg) translateZ(22px); }
-.dieFace.back   { transform: rotateY(180deg) translateZ(22px); }
-.dieFace.right  { transform: rotateY( 90deg) translateZ(22px); }
-.dieFace.left   { transform: rotateY(-90deg) translateZ(22px); }
-.dieFace.top    { transform: rotateX( 90deg) translateZ(22px); }
-.dieFace.bottom { transform: rotateX(-90deg) translateZ(22px); }
-
-/* pips */
-.pipGrid {
-  width: 70%;
-  height: 70%;
-  position: relative;
-}
-
-.pip {
-  position: absolute;
-  width: 7px;
-  height: 7px;
-  border-radius: 999px;
-  background: rgba(245,245,245,0.92);
-  box-shadow: 0 3px 10px rgba(0,0,0,0.35), inset 0 1px 2px rgba(0,0,0,0.20);
-}
-
-/* special icon */
-.specialIcon {
-  font-size: 20px;
-  line-height: 1;
-  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.55));
-}
-
-/* optional: subtle face ring tint via CSS var */
-.dieFace {
-  box-shadow:
-    inset 0 0 0 1px rgba(255,255,255,0.06),
-    inset 0 0 0 2px var(--ring, rgba(255,255,255,0.00)),
-    inset 0 12px 20px rgba(255,255,255,0.05);
-}
-
-/* Roll animation */
-@keyframes dieRoll {
-  0% {
-    transform: translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-  }
-  25% {
-    transform: translateY(-6px) rotateX(220deg) rotateY(160deg) rotateZ(90deg);
-  }
-  55% {
-    transform: translateY(0px) rotateX(520deg) rotateY(460deg) rotateZ(240deg);
-  }
-  100% {
-    transform: translateY(-2px) rotateX(720deg) rotateY(720deg) rotateZ(360deg);
-  }
-}
-
-.die3dRolling {
-  animation: dieRoll 820ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
-}
-
-/* --- Responsive: shrink gracefully (no scroll outside notes) --- */
-@media (max-height: 860px) {
-  .leftPane {
-    grid-template-rows: 64px minmax(300px, 1fr) 150px;
-  }
-  .diceOverlay {
-    bottom: 10px;
-    right: 12px;
-    width: 200px;
-  }
-}
-
-@media (max-width: 1440px) {
-  .appRoot {
-    grid-template-columns: minmax(820px, 1fr) clamp(360px, 34vw, 480px);
-  }
-  .mainRow {
-    grid-template-columns: 240px minmax(520px, 1fr) 88px;
-  }
-}
-
-@media (max-width: 1280px) {
-  .appRoot {
-    grid-template-columns: 1fr clamp(340px, 36vw, 460px);
-  }
-  .mainRow {
-    grid-template-columns: 220px minmax(480px, 1fr) 84px;
-  }
-}
-
-@media (max-width: 1180px) {
-  /* ab hier wird’s eng: tools noch schmäler */
-  .mainRow {
-    grid-template-columns: 200px minmax(440px, 1fr) 82px;
-  }
-}

frontend/src/api/client.js

@@ -3,9 +3,10 @@ import { API_BASE } from "../constants";
 export async function api(path, opts = {}) {
   const res = await fetch(API_BASE + path, {
     credentials: "include",
+    cache: "no-store",
     headers: { "Content-Type": "application/json" },
     ...opts,
   });
   if (!res.ok) throw new Error(await res.text());
   return res.json();
-}
+}

frontend/src/components/AdminPanel.jsx

@@ -1,204 +1,166 @@
 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 { createPortal } from "react-dom";
 
-export default function AdminPanel() {
+const emptyForm = { displayName: "", email: "", password: "", role: "user", disabled: false };
+
+export default function AdminPanel({ open: dashboardOpen = false, onClose, currentUserId }) {
   const [users, setUsers] = useState([]);
-
+  const [editorOpen, setEditorOpen] = useState(false);
-  const [open, setOpen] = useState(false);
+  const [editingUser, setEditingUser] = useState(null);
-  const [displayName, setDisplayName] = useState("");
+  const [form, setForm] = useState(emptyForm);
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [role, setRole] = useState("user");
   const [msg, setMsg] = useState("");
+  const [saving, setSaving] = useState(false);
 
   useEffect(() => {
-    if (!open) return;
+    if (!dashboardOpen && !editorOpen) return;
-
+    const previous = document.body.style.overflow;
-    const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden";
-
+    return () => { document.body.style.overflow = previous; };
-    return () => {
+  }, [dashboardOpen, editorOpen]);
-      document.body.style.overflow = prev;
-    };
-  }, [open]);
-
-  const loadUsers = async () => {
-    const u = await api("/admin/users");
-    setUsers(u);
-  };
 
   useEffect(() => {
-    loadUsers().catch(() => {});
+    if (!dashboardOpen) {
-  }, []);
+      setEditorOpen(false);
+      setMsg("");
+    }
+  }, [dashboardOpen]);
 
-  const resetForm = () => {
+  const loadUsers = async () => setUsers(await api("/admin/users"));
-    setDisplayName("");
+
-    setEmail("");
+  useEffect(() => { loadUsers().catch(() => {}); }, []);
-    setPassword("");
+
-    setRole("user");
+  const setField = (key, value) => setForm((current) => ({ ...current, [key]: value }));
+
+  const openCreate = () => {
+    setEditingUser(null);
+    setForm({ ...emptyForm });
+    setMsg("");
+    setEditorOpen(true);
   };
 
-  const createUser = async () => {
+  const openEdit = (user) => {
+    setEditingUser(user);
+    setForm({
+      displayName: user.display_name || "",
+      email: user.email || "",
+      password: "",
+      role: user.role || "user",
+      disabled: !!user.disabled,
+    });
     setMsg("");
+    setEditorOpen(true);
+  };
+
+  const closeEditor = () => {
+    setEditorOpen(false);
+    setEditingUser(null);
+    setMsg("");
+  };
+
+  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.");
+
+    setSaving(true);
     try {
-      await api("/admin/users", {
+      const payload = {
-        method: "POST",
+        display_name: form.displayName,
-        body: JSON.stringify({ display_name: displayName, email, password, role }),
+        email: form.email,
+        role: form.role,
+        disabled: form.disabled,
+      };
+      if (form.password) payload.password = form.password;
+
+      await api(editingUser ? `/admin/users/${editingUser.id}` : "/admin/users", {
+        method: editingUser ? "PATCH" : "POST",
+        body: JSON.stringify(payload),
       });
-      setMsg("✅ User erstellt.");
       await loadUsers();
-      resetForm();
+      closeEditor();
-      setOpen(false);
     } catch (e) {
-      setMsg("❌ Fehler: " + (e?.message || "unknown"));
+      setMsg("❌ " + (e?.message || "Speichern fehlgeschlagen."));
+    } finally {
+      setSaving(false);
     }
   };
 
-  const deleteUser = async (u) => {
+  const disableUser = async (user) => {
-    if (!window.confirm(`User wirklich löschen (deaktivieren)?\n\n${u.display_name || u.email}`)) return;
+    if (user.id === currentUserId) return;
+    if (!window.confirm(`User wirklich deaktivieren?\n\n${user.display_name || user.email}`)) return;
     try {
-      await api(`/admin/users/${u.id}`, { method: "DELETE" });
+      await api(`/admin/users/${user.id}`, { method: "DELETE" });
       await loadUsers();
     } catch (e) {
       alert("Fehler: " + (e?.message || "unknown"));
     }
   };
 
-  const closeModal = () => {
+  if (!dashboardOpen) return null;
-    setOpen(false);
-    setMsg("");
-  };
 
-  return (
+  return createPortal(
-    <div style={styles.adminWrap}>
+    <div style={styles.modalOverlay} onMouseDown={onClose}>
-      <div style={styles.adminTop}>
+      <div className="hp-admin-dashboard-card" style={{ ...styles.modalCard, width: "min(780px, 100%)", padding: 0 }} onMouseDown={(e) => e.stopPropagation()}>
-        <div style={styles.adminTitle}>Admin Dashboard</div>
+        <div style={{ padding: "18px 18px 16px" }}>
-        <button onClick={() => setOpen(true)} style={styles.primaryBtn}>
+          <div style={styles.modalHeader}>
-          + User anlegen
+            <div>
-        </button>
+              <div style={{ fontWeight: 1000, color: stylesTokens.textGold, fontSize: 19 }}>Admin Dashboard</div>
-      </div>
+              <div style={{ marginTop: 3, color: stylesTokens.textDim, fontSize: 12 }}>Benutzer, Rollen und Zugangsdaten verwalten</div>
-
-      <div style={{ marginTop: 12, fontWeight: 900, color: stylesTokens.textGold }}>
-        Vorhandene User
-      </div>
-
-      <div style={{ marginTop: 8, display: "grid", gap: 8 }}>
-        {users.map((u) => (
-          <div
-            key={u.id}
-            style={{
-              ...styles.userRow,
-              gridTemplateColumns: "1fr 1fr 80px 90px 92px",
-              alignItems: "center",
-            }}
-          >
-            <div style={{ color: stylesTokens.textMain, fontWeight: 900 }}>
-              {u.display_name || "—"}
             </div>
-            <div style={{ color: stylesTokens.textDim, fontSize: 13 }}>{u.email}</div>
+            <button onClick={onClose} style={styles.modalCloseBtn} aria-label="Dashboard schließen">✕</button>
-            <div style={{ textAlign: "center", fontWeight: 900, color: stylesTokens.textGold }}>
-              {u.role}
-            </div>
-            <div style={{ textAlign: "center", opacity: 0.85, color: stylesTokens.textMain }}>
-              {u.disabled ? "disabled" : "active"}
-            </div>
-
-            <button
-              onClick={() => deleteUser(u)}
-              style={{
-                ...styles.secondaryBtn,
-                padding: "8px 10px",
-                borderRadius: 12,
-                color: "#ffb3b3",
-                opacity: u.role === "admin" ? 0.4 : 1,
-                pointerEvents: u.role === "admin" ? "none" : "auto",
-              }}
-              title={u.role === "admin" ? "Admin kann nicht gelöscht werden" : "User löschen (deaktivieren)"}
-            >
-              Löschen
-            </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>
+
+          <div style={{ marginTop: 10, display: "grid", gap: 9 }}>
+            {users.map((user) => (
+              <div key={user.id} className="hp-admin-user-row" style={{ ...styles.userRow, alignItems: "center" }}>
+                <div className="hp-admin-name" style={{ color: stylesTokens.textMain, fontWeight: 900 }}>{user.display_name || "—"}</div>
+                <div className="hp-admin-email" style={{ color: stylesTokens.textDim, fontSize: 13 }}>{user.email}</div>
+                <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>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
       </div>
 
-      {open &&
+      {editorOpen && createPortal(
-        createPortal(
+        <div style={styles.modalOverlay} onMouseDown={closeEditor}>
-          <div style={styles.modalOverlay} onMouseDown={closeModal}>
+          <div className="hp-admin-editor-card" style={{ ...styles.modalCard, width: "min(470px, 100%)" }} onMouseDown={(e) => e.stopPropagation()}>
-            <div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
+            <div style={styles.modalHeader}>
-              <div style={styles.modalHeader}>
+              <div>
-                <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>
+                <div style={{ fontWeight: 1000, color: stylesTokens.textGold, fontSize: 18 }}>{editingUser ? "User bearbeiten" : "Neuen User anlegen"}</div>
-                  Neuen User anlegen
+                <div style={{ marginTop: 3, color: stylesTokens.textDim, fontSize: 12 }}>{editingUser ? "Profil und Zugangsdaten aktualisieren" : "Ein neues Benutzerkonto erstellen"}</div>
-                </div>
-                <button onClick={closeModal} style={styles.modalCloseBtn} aria-label="Schließen">
-                  ✕
-                </button>
-              </div>
-
-              <div
-                style={{
-                  marginTop: 12,
-                  display: "grid",
-                  gap: 8,
-                  justifyItems: "center",   // <<< zentriert alles
-                }}
-              >
-                <input
-                  value={displayName}
-                  onChange={(e) => setDisplayName(e.target.value)}
-                  placeholder="Name (z.B. Sascha)"
-                  style={styles.input}
-                  autoFocus
-                />
-
-                <input
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  placeholder="Email"
-                  style={styles.input}
-                />
-
-                <input
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  placeholder="Initial Passwort"
-                  type="password"
-                  style={styles.input}
-                />
-
-                <select value={role} onChange={(e) => setRole(e.target.value)} style={styles.input}>
-                  <option value="user">user</option>
-                  <option value="admin">admin</option>
-                </select>
-
-                {msg && <div style={{ opacity: 0.9, color: stylesTokens.textMain }}>{msg}</div>}
-
-                <div style={{ display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 4 }}>
-                  <button
-                    onClick={() => {
-                      resetForm();
-                      setMsg("");
-                    }}
-                    style={styles.secondaryBtn}
-                  >
-                    Leeren
-                  </button>
-                  <button onClick={createUser} style={styles.primaryBtn}>
-                    User erstellen
-                  </button>
-                </div>
-
-                <div style={{ fontSize: 12, opacity: 0.75, color: stylesTokens.textDim }}>
-                  Tipp: Name wird in TopBar & Siegeranzeige genutzt.
-                </div>
               </div>
+              <button onClick={closeEditor} style={styles.modalCloseBtn} aria-label="Schließen">✕</button>
             </div>
-          </div>,
+
-          document.body
+            <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>
-    </div>
+              <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>}
+              {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>
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+    </div>,
+    document.body
   );
 }

frontend/src/components/ChipModal.jsx

@@ -1,9 +1,8 @@
 import React from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
-import { CHIP_LIST } from "../constants";
 
-export default function ChipModal({ chipOpen, closeChipModalToDash, chooseChip }) {
+export default function ChipModal({ chipOpen, closeChipModalToDash, chooseChip, chips = [] }) {
   if (!chipOpen) return null;
 
   return (
@@ -19,13 +18,19 @@ export default function ChipModal({ chipOpen, closeChipModalToDash, chooseChip }
         <div style={{ marginTop: 12, color: stylesTokens.textMain }}>Chip auswählen:</div>
 
         <div style={styles.chipGrid}>
-          {CHIP_LIST.map((c) => (
+          {chips.map((item) => (
-            <button key={c} onClick={() => chooseChip(c)} style={styles.chipBtn}>
+            <button key={item.user_id || item.chip} onClick={() => chooseChip(item.chip)} style={styles.chipBtn} title={item.display_name || item.email}>
-              {c}
+              {item.chip}
             </button>
           ))}
         </div>
 
+        {!chips.length && (
+          <div style={{ marginTop: 12, color: stylesTokens.textDim }}>
+            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 —.
         </div>

frontend/src/components/Dice/Dice3D.jsx

@@ -1,147 +0,0 @@
-// frontend/src/components/Dice/Dice3D.jsx
-import React from "react";
-
-export const cubeRotationForD6 = (value) => {
-  switch (value) {
-    case 1: return { rx: 0,   ry: 0 };
-    case 2: return { rx: -90, ry: 0 };
-    case 3: return { rx: 0,   ry: -90 };
-    case 4: return { rx: 0,   ry: 90 };
-    case 5: return { rx: 90,  ry: 0 };
-    case 6: return { rx: 0,   ry: 180 };
-    default: return { rx: 0,  ry: 0 };
-  }
-};
-
-export const PipFace = ({ value }) => {
-  const pos = (gx, gy) => ({ left: `${gx * 50}%`, top: `${gy * 50}%` });
-
-  const faces = {
-    1: [[1, 1]],
-    2: [[0, 0], [2, 2]],
-    3: [[0, 0], [1, 1], [2, 2]],
-    4: [[0, 0], [2, 0], [0, 2], [2, 2]],
-    5: [[0, 0], [2, 0], [1, 1], [0, 2], [2, 2]],
-    6: [[0, 0], [0, 1], [0, 2], [2, 0], [2, 1], [2, 2]],
-  };
-
-  const arr = faces[value] || faces[1];
-
-  return (
-    <div className="pipGrid">
-      {arr.map(([x, y], idx) => (
-        <div
-          key={idx}
-          className="pip"
-          style={{ ...pos(x, y), transform: "translate(-50%, -50%)" }}
-        />
-      ))}
-    </div>
-  );
-};
-
-export const DieShell = ({ children, rolling = false, onClick }) => {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className="die3d"
-      style={{
-        width: 64,
-        height: 64,
-        borderRadius: 18,
-        border: "none",
-        background: "transparent",
-        boxShadow: "none",
-        position: "relative",
-        overflow: "visible",
-        display: "grid",
-        placeItems: "center",
-        cursor: rolling ? "default" : "pointer",
-        transition: "transform 160ms ease",
-        padding: 0,
-        outline: "none",
-      }}
-      disabled={rolling}
-    >
-      <div style={{ position: "relative", zIndex: 2 }}>{children}</div>
-    </button>
-  );
-};
-
-export const DieD6 = ({ rolling, onClick, ax, ay, onDone, snap = false }) => {
-  return (
-    <DieShell rolling={rolling} onClick={onClick}>
-      <div className="dieCubeWrap">
-        <div
-          className={`dieCube ${rolling ? "rolling" : ""}`}
-          style={{ "--rx": ax, "--ry": ay }}
-          onTransitionEnd={(e) => {
-            if (e.propertyName !== "transform") return;
-            if (rolling) onDone?.();
-          }}
-        >
-          <div className="dieFace front"><PipFace value={1} /></div>
-          <div className="dieFace back"><PipFace value={6} /></div>
-          <div className="dieFace top"><PipFace value={2} /></div>
-          <div className="dieFace bottom"><PipFace value={5} /></div>
-          <div className="dieFace right"><PipFace value={3} /></div>
-          <div className="dieFace left"><PipFace value={4} /></div>
-        </div>
-      </div>
-    </DieShell>
-  );
-};
-
-export const HouseDie = ({ face, rolling, onClick, ax, ay, onDone, snap = false }) => {
-  const faces = {
-    gryffindor: { icon: "🦁", color: "#ef4444" },
-    slytherin: { icon: "🐍", color: "#22c55e" },
-    ravenclaw: { icon: "🦅", color: "#3b82f6" },
-    hufflepuff: { icon: "🦡", color: "#facc15" },
-    help: { icon: "🃏", color: "#f2d27a" },
-    dark: { icon: "🌙", color: "rgba(255,255,255,0.85)" },
-  };
-
-  const order = ["gryffindor", "slytherin", "ravenclaw", "hufflepuff", "help", "dark"];
-
-  return (
-    <DieShell rolling={rolling} onClick={onClick}>
-      <div className="dieCubeWrap">
-        <div
-          className={`dieCube ${rolling ? "rolling" : ""}`}
-          style={{ "--rx": ax, "--ry": ay }}
-          onTransitionEnd={(e) => {
-            if (e.propertyName !== "transform") return;
-            if (rolling) onDone?.();
-          }}
-        >
-          {order.map((key, i) => {
-            const item = faces[key];
-            const faceClass =
-              i === 0 ? "front" :
-              i === 1 ? "top" :
-              i === 2 ? "right" :
-              i === 3 ? "left" :
-              i === 4 ? "bottom" :
-              "back";
-
-            return (
-              <div key={key} className={`dieFace ${faceClass}`}>
-                <div
-                  className="specialIcon"
-                  style={{
-                    color: item.color,
-                    textShadow: `0 0 18px ${item.color}55, 0 10px 22px rgba(0,0,0,0.55)`,
-                  }}
-                >
-                  {item.icon}
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </DieShell>
-  );
-};

frontend/src/components/Dice/DicePanel.jsx

@@ -1,188 +0,0 @@
-// frontend/src/components/Dice/DicePanel.jsx
-import React, { useEffect, useRef, useState } from "react";
-import { stylesTokens } from "../../styles/theme";
-import { cubeRotationForD6, DieD6, HouseDie } from "./Dice/Dice3D.jsx";
-
-export default function DicePanel({ onRoll }) {
-  const LS_KEY = "hp_cluedo_dice_v1";
-
-  const [d1, setD1] = useState(4);
-  const [d2, setD2] = useState(2);
-  const [special, setSpecial] = useState("gryffindor");
-
-  const [a1, setA1] = useState({ x: 0, y: 90 });
-  const [a2, setA2] = useState({ x: -90, y: 0 });
-  const [as, setAs] = useState({ x: 0, y: 0 });
-
-  const [rolling, setRolling] = useState(false);
-  const [snap, setSnap] = useState(false);
-
-  const specialFaces = ["gryffindor", "slytherin", "ravenclaw", "hufflepuff", "help", "dark"];
-  const order = ["gryffindor", "slytherin", "ravenclaw", "hufflepuff", "help", "dark"];
-  const randInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
-
-  // roll bookkeeping
-  const pendingRef = useRef(null);
-  const rollIdRef = useRef(0);
-  const doneForRollRef = useRef({ d1: false, d2: false, s: false });
-
-  // restore last
-  useEffect(() => {
-    try {
-      const raw = localStorage.getItem(LS_KEY);
-      if (!raw) return;
-      const parsed = JSON.parse(raw);
-
-      if (parsed?.d1) setD1(parsed.d1);
-      if (parsed?.d2) setD2(parsed.d2);
-      if (parsed?.special) setSpecial(parsed.special);
-
-      if (parsed?.d1) {
-        const r = cubeRotationForD6(parsed.d1);
-        setA1({ x: r.rx, y: r.ry });
-      }
-      if (parsed?.d2) {
-        const r = cubeRotationForD6(parsed.d2);
-        setA2({ x: r.rx, y: r.ry });
-      }
-      if (parsed?.special) {
-        const idx = Math.max(0, order.indexOf(parsed.special));
-        const r = cubeRotationForD6(idx + 1);
-        setAs({ x: r.rx, y: r.ry });
-      }
-    } catch {}
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    try {
-      localStorage.setItem(LS_KEY, JSON.stringify({ d1, d2, special }));
-    } catch {}
-  }, [d1, d2, special]);
-
-  const normalize360 = (n) => ((n % 360) + 360) % 360;
-
-  const rollTo = (currentAngles, targetBase) => {
-    const spinX = 720 + randInt(0, 2) * 360;
-    const spinY = 720 + randInt(0, 2) * 360;
-
-    const currX = normalize360(currentAngles.x);
-    const currY = normalize360(currentAngles.y);
-
-    const dx = targetBase.rx - currX;
-    const dy = targetBase.ry - currY;
-
-    return { x: currentAngles.x + spinX + dx, y: currentAngles.y + spinY + dy };
-  };
-
-  const rollAll = () => {
-    if (rolling) return;
-
-    const nd1 = randInt(1, 6);
-    const nd2 = randInt(1, 6);
-    const ns = specialFaces[randInt(0, specialFaces.length - 1)];
-
-    const r1 = cubeRotationForD6(nd1);
-    const r2 = cubeRotationForD6(nd2);
-    const rs = cubeRotationForD6(Math.max(0, order.indexOf(ns)) + 1);
-
-    pendingRef.current = { nd1, nd2, ns };
-
-    rollIdRef.current += 1;
-    doneForRollRef.current = { d1: false, d2: false, s: false };
-
-    setRolling(true);
-
-    setA1((cur) => rollTo(cur, r1));
-    setA2((cur) => rollTo(cur, r2));
-    setAs((cur) => rollTo(cur, rs));
-  };
-
-  const maybeCommit = () => {
-    const flags = doneForRollRef.current;
-    if (!flags.d1 || !flags.d2 || !flags.s) return;
-
-    const p = pendingRef.current;
-    if (!p) return;
-
-    // ✅ rolling beenden
-    setRolling(false);
-
-    // ✅ Ergebnis state setzen
-    setD1(p.nd1);
-    setD2(p.nd2);
-    setSpecial(p.ns);
-
-    // ✅ Winkel auf kleine Basis normalisieren (ohne Transition)
-    const r1 = cubeRotationForD6(p.nd1);
-    const r2 = cubeRotationForD6(p.nd2);
-    const rs = cubeRotationForD6(Math.max(0, order.indexOf(p.ns)) + 1);
-
-    setSnap(true);
-    setA1({ x: r1.rx, y: r1.ry });
-    setA2({ x: r2.rx, y: r2.ry });
-    setAs({ x: rs.rx, y: rs.ry });
-
-    // Snap nur 1 Frame aktiv lassen
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => setSnap(false));
-    });
-
-    pendingRef.current = null;
-
-    onRoll?.({ d1: p.nd1, d2: p.nd2, special: p.ns });
-  };
-  
-
-  const onDoneD1 = () => {
-    if (!rolling) return;
-    if (doneForRollRef.current.d1) return;
-    doneForRollRef.current.d1 = true;
-    maybeCommit();
-  };
-
-  const onDoneD2 = () => {
-    if (!rolling) return;
-    if (doneForRollRef.current.d2) return;
-    doneForRollRef.current.d2 = true;
-    maybeCommit();
-  };
-
-  const onDoneS = () => {
-    if (!rolling) return;
-    if (doneForRollRef.current.s) return;
-    doneForRollRef.current.s = true;
-    maybeCommit();
-  };
-
-  return (
-    <div style={{ pointerEvents: "auto" }}>
-      <div style={{ display: "grid", gap: 8 }}>
-        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
-          <div style={{ color: stylesTokens.textMain, fontWeight: 900, fontSize: 13 }}>Würfel</div>
-          <div style={{ color: stylesTokens.textDim, fontWeight: 900, fontSize: 11.5, letterSpacing: 0.7, opacity: 0.75 }}>
-            {rolling ? "ROLL…" : "READY"}
-          </div>
-        </div>
-
-        <div
-          className="diceRow3d"
-          style={{
-            display: "grid",
-            gridTemplateColumns: "repeat(3, 1fr)",
-            gap: 10,
-            alignItems: "center",
-            justifyItems: "center",
-            overflow: "visible",
-          }}
-        >
-          <DieD6 rolling={rolling} onClick={rollAll} ax={a1.x} ay={a1.y} onDone={onDoneD1} />
-          <DieD6 rolling={rolling} onClick={rollAll} ax={a2.x} ay={a2.y} onDone={onDoneD2} />
-          <HouseDie face={special} rolling={rolling} onClick={rollAll} ax={as.x} ay={as.y} onDone={onDoneS} />
-        </div>
-
-        <div style={{ color: stylesTokens.textDim, fontSize: 12, opacity: 0.95 }}>Klicken zum Rollen</div>
-      </div>
-    </div>
-  );
-}

frontend/src/components/GamePickerCard.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
 
@@ -10,8 +10,16 @@ export default function GamePickerCard({
   members = [],
   me,
   hostUserId,
+  isHost = false,
+  started = false,
+  finished = false,
+  winnerName = "",
+  chipCount = 0,
+  onStartGame,
 }) {
   const cur = games.find((x) => x.id === gameId);
+  const [starting, setStarting] = useState(false);
+  const [startError, setStartError] = useState("");
 
   const renderMemberName = (m) => {
     const base = ((m.display_name || "").trim() || (m.email || "").trim() || "—");
@@ -42,6 +50,21 @@ export default function GamePickerCard({
     whiteSpace: "nowrap",
   });
 
+  const handleStartGame = async () => {
+    if (!onStartGame || starting || members.length < 2) return;
+    if (!window.confirm("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.");
+    } finally {
+      setStarting(false);
+    }
+  };
+
   return (
     <div style={{ marginTop: 14 }}>
       <div style={styles.card}>
@@ -85,8 +108,84 @@ export default function GamePickerCard({
           </div>
         )}
 
+        {!started ? (
+          <div
+            className="hp-lobby"
+            style={{
+              margin: "0 12px 12px",
+              padding: 12,
+              borderRadius: 16,
+              border: `1px solid ${stylesTokens.panelBorder}`,
+              background: "rgba(8,8,11,0.28)",
+            }}
+          >
+            <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
+                </div>
+                <div style={{ marginTop: 3, color: stylesTokens.textDim, fontSize: 12 }}>
+                  {isHost ? "Du bist der Host dieses Spiels." : "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>
+            </div>
+
+            <div className="hp-lobby-slots" style={{ marginTop: 12, display: "grid", gap: 6 }}>
+              {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");
+                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>
+                    <span style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: stylesTokens.textMain, fontWeight: 900 }}>
+                      {name}{isMe ? " (du)" : ""}
+                    </span>
+                    {isMemberHost && <span title="Host" style={{ color: stylesTokens.textGold }}>👑</span>}
+                  </div>
+                );
+              }) : (
+                <div style={{ padding: "10px 4px", color: stylesTokens.textDim, fontSize: 13 }}>
+                  Warte auf Spieler …
+                </div>
+              )}
+            </div>
+
+            {isHost ? (
+              <>
+                <button
+                  onClick={handleStartGame}
+                  style={{ ...styles.primaryBtn, width: "100%", marginTop: 12 }}
+                  disabled={starting || members.length < 2}
+                >
+                  {starting ? "Spiel wird gestartet …" : "▶ Spiel starten"}
+                </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."}
+                </div>
+              </>
+            ) : (
+              <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.
+              </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>
+        )}
+
         {/* Spieler */}
-        {members?.length > 0 && (
+        {started && members?.length > 0 && (
           <div style={{ padding: "0 12px 12px" }}>
             <div
               style={{

frontend/src/components/GameStartCelebration.jsx

@@ -0,0 +1,45 @@
+import React, { useEffect } from "react";
+import { createPortal } from "react-dom";
+import confetti from "canvas-confetti";
+import { stylesTokens } from "../styles/theme";
+
+export default function GameStartCelebration({ open, onClose }) {
+  useEffect(() => {
+    if (!open) return;
+
+    const burst = () => {
+      confetti({
+        particleCount: 70,
+        spread: 78,
+        startVelocity: 32,
+        origin: { y: 0.62 },
+        colors: ["#e9d8a6", "#7cffa8", "#8fb6ff", "#ffffff"],
+      });
+    };
+
+    burst();
+    const second = setTimeout(burst, 480);
+    const close = setTimeout(onClose, 3000);
+    return () => {
+      clearTimeout(second);
+      clearTimeout(close);
+    };
+  }, [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-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>
+        <button onClick={onClose} style={{ marginTop: 18, color: stylesTokens.textGold }}>
+          Los geht&apos;s
+        </button>
+      </div>
+    </div>,
+    document.body
+  );
+}

frontend/src/components/HelpModal.jsx

@@ -1,4 +1,3 @@
-// src/components/HelpModal.jsx
 import React from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
@@ -10,177 +9,170 @@ export default function HelpModal({ open, onClose }) {
     <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</div>
+          <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>Hilfe & Spielablauf</div>
           <button onClick={onClose} style={styles.modalCloseBtn} aria-label="Schließen">
             ✕
           </button>
         </div>
 
         <div style={styles.helpBody}>
-          {/* ===== 0) Spiele & Navigation ===== */}
+          <div style={styles.helpSectionTitle}>1) Lobby & Spielstart</div>
-          <div style={styles.helpSectionTitle}>0) Spiele auswählen / Neues Spiel</div>
           <div style={styles.helpText}>
-            Oben im Bereich <b>Spiel</b> kannst du zwischen bestehenden Spielen wechseln oder ein neues
+            Ein neues Spiel startet zunächst als Lobby. Teile den angezeigten <b>Spiel-Code</b> mit den
-            Spiel erstellen:
+            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.
+              </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.
+              </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>.
+              </div>
+            </div>
+          </div>
+
+          <div style={styles.helpDivider} />
+
+          <div style={styles.helpSectionTitle}>2) 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.
           </div>
 
           <div style={styles.helpList}>
             <div style={styles.helpListRow}>
               <span style={styles.helpMiniTag}>▼</span>
               <div>
-                <b>Spiel-Auswahl</b> (Dropdown neben dem Hilfe-Button) = vorhandene / alte Spiele öffnen
+                <b>Spiel-Auswahl</b> = vorhandene Spiele öffnen
               </div>
             </div>
             <div style={styles.helpListRow}>
               <span style={styles.helpMiniTag}>✦</span>
               <div>
-                <b>„Neues Spiel“</b> = erstellt ein neues Spiel und öffnet es automatisch
+                <b>New Game</b> = neues Spiel erstellen oder per Code beitreten
               </div>
             </div>
           </div>
 
           <div style={styles.helpDivider} />
 
-          {/* ===== 1) Status per Tippen ===== */}
+          <div style={styles.helpSectionTitle}>3) Namen antippen – Status</div>
-          <div style={styles.helpSectionTitle}>1) Namen antippen (Status)</div>
           <div style={styles.helpText}>
-            Tippe auf einen Namen, um den Status zu ändern. Reihenfolge:
+            Tippe während des laufenden Spiels auf den Namen eines Eintrags. Die Statusfolge ist:
           </div>
 
           <div style={styles.helpList}>
             <div style={styles.helpListRow}>
-              <span
+              <span style={{ ...styles.helpBadge, background: "rgba(0,190,80,0.18)", color: "#baf3c9" }}>✓</span>
-                style={{
+              <div><b>Grün</b> = bestätigt / vorhanden</div>
-                  ...styles.helpBadge,
-                  background: "rgba(0,190,80,0.18)",
-                  color: "#baf3c9",
-                }}
-              >
-                ✓
-              </span>
-              <div>
-                <b>Grün</b> = bestätigt / fix richtig
-              </div>
             </div>
-
             <div style={styles.helpListRow}>
-              <span
+              <span style={{ ...styles.helpBadge, background: "rgba(255,35,35,0.18)", color: "#ffb3b3" }}>✕</span>
-                style={{
+              <div><b>Rot</b> = ausgeschlossen / nicht vorhanden</div>
-                  ...styles.helpBadge,
-                  background: "rgba(255,35,35,0.18)",
-                  color: "#ffb3b3",
-                }}
-              >
-                ✕
-              </span>
-              <div>
-                <b>Rot</b> = ausgeschlossen / fix falsch
-              </div>
             </div>
-
             <div style={styles.helpListRow}>
-              <span
+              <span style={{ ...styles.helpBadge, background: "rgba(140,140,140,0.14)", color: "rgba(233,216,166,0.85)" }}>?</span>
-                style={{
+              <div><b>Grau</b> = unsicher / vielleicht</div>
-                  ...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>
-
             <div style={styles.helpListRow}>
-              <span
+              <span style={{ ...styles.helpBadge, background: "rgba(255,255,255,0.08)", color: "rgba(233,216,166,0.75)" }}>–</span>
-                style={{
+              <div><b>Leer</b> = noch nicht bewertet</div>
-                  ...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>
           </div>
 
           <div style={styles.helpDivider} />
 
-          {/* ===== 2) i / m / s Notizen ===== */}
+          <div style={styles.helpSectionTitle}>4) Notizen & Spieler-Chips</div>
-          <div style={styles.helpSectionTitle}>2) i / m / s Button (Notizen)</div>
           <div style={styles.helpText}>
-            Rechts pro Zeile gibt es einen Button, der durch diese Werte rotiert:
+            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>
+              <div><b>i</b> = Ich habe diese Karte</div>
-                <b>i</b> = „Ich habe diese Karte“
-              </div>
             </div>
-
             <div style={styles.helpListRow}>
               <span style={styles.helpMiniTag}>m</span>
-              <div>
+              <div><b>m</b> = Karte aus dem mittleren Deck</div>
-                <b>m</b> = „Karte aus dem mittleren Deck“
-              </div>
             </div>
-
             <div style={styles.helpListRow}>
               <span style={styles.helpMiniTag}>s</span>
-              <div>
+              <div><b>s</b> = Ein anderer Spieler hat die Karte; danach wählst du den passenden Chip</div>
-                <b>s</b> = „Ein anderer Spieler hat die Karte“ → danach Chip auswählen (z.B. <b>s.AL</b>)
+            </div>
-              </div>
+            <div style={styles.helpListRow}>
+              <span style={styles.helpMiniTag}>SNE</span>
+              <div><b>s.SNE</b> = Sascha Nesterovic besitzt die Karte</div>
             </div>
-
             <div style={styles.helpListRow}>
               <span style={styles.helpMiniTag}>—</span>
-              <div>
+              <div><b>—</b> = keine Zusatznotiz</div>
-                <b>—</b> = keine Notiz
-              </div>
             </div>
           </div>
 
           <div style={styles.helpDivider} />
 
-          {/* ===== 3) User-Menü ===== */}
+          <div style={styles.helpSectionTitle}>5) Spielende</div>
-          <div style={styles.helpSectionTitle}>3) User-Menü (Passwort / Logout)</div>
           <div style={styles.helpText}>
-            Oben rechts im <b>User</b>-Menü findest du persönliche Einstellungen:
+            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>
+              <span style={styles.helpMiniTag}>🔒</span>
-              <div>
+              <div>Alle Notizzettel werden <b>schreibgeschützt</b>.</div>
-                <b>User</b> öffnen = zeigt die aktuell verwendete Email-Adresse
+            </div>
-              </div>
+            <div style={styles.helpListRow}>
+              <span style={styles.helpMiniTag}>🏆</span>
+              <div>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.helpText}>
+            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>
+            <div style={styles.helpListRow}>
+              <span style={styles.helpMiniTag}>🎨</span>
+              <div><b>Design ändern</b> = Theme auswählen</div>
             </div>
             <div style={styles.helpListRow}>
               <span style={styles.helpMiniTag}>🔒</span>
-              <div>
+              <div><b>Passwort setzen</b> = eigenes Passwort ändern</div>
-                <b>Passwort setzen</b> = eigenes Passwort ändern
-              </div>
             </div>
             <div style={styles.helpListRow}>
               <span style={styles.helpMiniTag}>⎋</span>
-              <div>
+              <div><b>Logout</b> = abmelden</div>
-                <b>Logout</b> = ausloggen
+            </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>
           </div>
 
-          <div style={styles.helpDivider} />
+          <div style={{ ...styles.helpText, marginTop: 16 }}>
-
+            Deine Notizen bleiben privat. Jeder Spieler sieht nur seinen eigenen Notizzettel.
-          <div style={styles.helpText}>
-            Tipp: Jeder Spieler sieht nur seine eigenen Notizen – andere Spieler können nicht in deinen
-            Zettel schauen.
           </div>
         </div>
       </div>

frontend/src/components/LoginPage.jsx

@@ -9,7 +9,21 @@ export default function LoginPage({
   showPw,
   setShowPw,
   doLogin,
+  setupRequired,
+  setupEmail,
+  setSetupEmail,
+  setupDisplayName,
+  setSetupDisplayName,
+  setupPassword,
+  setSetupPassword,
+  setupPasswordConfirm,
+  setSetupPasswordConfirm,
+  setupError,
+  setupSaving,
+  doSetup,
 }) {
+  const isSetup = setupRequired === true;
+
   return (
     <div style={styles.loginPage}>
       <div style={styles.bgFixed} aria-hidden="true">
@@ -21,9 +35,67 @@ export default function LoginPage({
       <div style={styles.loginCard}>
         <div style={styles.loginTitle}>Zauber-Detektiv Notizbogen</div>
 
-        <div style={styles.loginSubtitle}>Melde dich an, um dein Cluedo-Magie-Sheet zu öffnen</div>
+        <div style={styles.loginSubtitle}>
+          {setupRequired === null
+            ? "Initialisiere Anwendung …"
+            : isSetup
+              ? "Richte den ersten Administrator ein"
+              : "Melde dich an, um dein Cluedo-Magie-Sheet zu öffnen"}
+        </div>
 
-        <div style={{ marginTop: 18, display: "grid", gap: 12 }}>
+        {isSetup ? (
+          <div style={{ marginTop: 18, display: "grid", gap: 12 }}>
+            <div style={styles.loginFieldWrap}>
+              <input
+                value={setupDisplayName}
+                onChange={(e) => setSetupDisplayName(e.target.value)}
+                placeholder="Display name"
+                style={styles.loginInput}
+                autoComplete="name"
+              />
+            </div>
+
+            <div style={styles.loginFieldWrap}>
+              <input
+                value={setupEmail}
+                onChange={(e) => setSetupEmail(e.target.value)}
+                placeholder="Admin email"
+                style={styles.loginInput}
+                inputMode="email"
+                autoComplete="username"
+              />
+            </div>
+
+            <div style={styles.loginFieldWrap}>
+              <input
+                value={setupPassword}
+                onChange={(e) => setSetupPassword(e.target.value)}
+                placeholder="Password (min. 8 characters)"
+                type="password"
+                style={styles.loginInput}
+                autoComplete="new-password"
+              />
+            </div>
+
+            <div style={styles.loginFieldWrap}>
+              <input
+                value={setupPasswordConfirm}
+                onChange={(e) => setSetupPasswordConfirm(e.target.value)}
+                placeholder="Confirm password"
+                type="password"
+                style={styles.loginInput}
+                autoComplete="new-password"
+              />
+            </div>
+
+            {setupError && <div style={{ color: "#ffb3b3", fontSize: 13 }}>{setupError}</div>}
+
+            <button onClick={doSetup} style={styles.loginBtn} disabled={setupSaving}>
+              {setupSaving ? "Setting up …" : "✦ Create administrator"}
+            </button>
+          </div>
+        ) : (
+          <div style={{ marginTop: 18, display: "grid", gap: 12 }}>
           <div style={styles.loginFieldWrap}>
             <input
               value={loginEmail}
@@ -60,10 +132,11 @@ export default function LoginPage({
           <button onClick={doLogin} style={styles.loginBtn}>
             ✦ Anmelden
           </button>
-        </div>
+          </div>
+        )}
 
         <div style={styles.loginHint}>
-          Deine Notizen bleiben privat – jeder Spieler sieht nur seinen eigenen Zettel.
+          Your notes remain private – every player only sees their own sheet.
         </div>
       </div>
     </div>

frontend/src/components/SheetSection.jsx

@@ -10,6 +10,7 @@ export default function SheetSection({
   onCycleStatus,
   onToggleTag,
   displayTag,
+  readOnly = false,
 }) {
   const getRowBg = (status) => {
     if (status === 1) return stylesTokens.rowNoBg;
@@ -70,14 +71,15 @@ export default function SheetSection({
               }}
             >
               <div
-                onClick={() => onCycleStatus(e)}
+                onClick={() => !readOnly && onCycleStatus(e)}
                 style={{
                   ...styles.name,
                   textDecoration: effectiveStatus === 1 ? "line-through" : "none",
                   color: getNameColor(effectiveStatus),
                   opacity: effectiveStatus === 1 ? 0.8 : 1,
+                  cursor: readOnly ? "default" : "pointer",
                 }}
-                title="Klick: Grün → Rot → Grau → Leer"
+                title={readOnly ? "Spiel beendet – Notizzettel ist schreibgeschützt" : "Klick: Grün → Rot → Grau → Leer"}
               >
                 {e.label}
               </div>
@@ -95,9 +97,10 @@ export default function SheetSection({
               </div>
 
               <button
-                onClick={() => onToggleTag(e)}
+                onClick={() => !readOnly && onToggleTag(e)}
                 style={styles.tagBtn}
-                title="— → i → m → s.(Chip) → —"
+                disabled={readOnly}
+                title={readOnly ? "Spiel beendet – Notizzettel ist schreibgeschützt" : "— → i → m → s.(Chip) → —"}
               >
                 {displayTag(e)}
               </button>

frontend/src/components/TopBar.jsx

@@ -9,13 +9,16 @@ export default function TopBar({
   openPwModal,
   openDesignModal,
   openStatsModal,
+  openAdminPanel,
   doLogout,
   onOpenNewGame,
 }) {
   const displayName = me ? ((me.display_name || "").trim() || me.email) : "";
+  const isAdmin = me?.role === "admin";
+  const roleLabel = isAdmin ? "Admin" : "User";
 
   return (
-    <div style={styles.topBar}>
+    <div className="hp-topbar" style={styles.topBar}>
       <div>
         <div style={{ fontWeight: 900, color: stylesTokens.textGold }}>Notizbogen</div>
         <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
@@ -23,20 +26,21 @@ export default function TopBar({
         </div>
       </div>
 
-      <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "nowrap" }} data-user-menu>
+      <div className="hp-topbar-actions" style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "nowrap" }} data-user-menu>
-        <div style={{ position: "relative" }}>
+        <div className="hp-user-menu-wrap" style={{ position: "relative" }}>
           <button
+            className="hp-topbar-user"
             onClick={() => setUserMenuOpen((v) => !v)}
             style={styles.userBtn}
             title="User Menü"
           >
-            <span style={{ fontSize: 16 }}>👤</span>
+            <span style={{ fontSize: 16 }}>{isAdmin ? "🛡️" : "👤"}</span>
-            <span>User</span>
+            <span>{roleLabel}</span>
             <span style={{ opacity: 0.7 }}>▾</span>
           </button>
 
           {userMenuOpen && (
-            <div style={styles.userDropdown}>
+            <div className="hp-user-dropdown" style={styles.userDropdown}>
               <div
                 style={{
                   padding: "10px 12px",
@@ -59,6 +63,21 @@ export default function TopBar({
                 Statistik
               </button>
 
+              {isAdmin && (
+                <>
+                  <div style={styles.userDropdownDivider} />
+                  <button
+                    onClick={() => {
+                      setUserMenuOpen(false);
+                      openAdminPanel?.();
+                    }}
+                    style={styles.userDropdownItem}
+                  >
+                    Admin Dashboard
+                  </button>
+                </>
+              )}
+
               <div style={styles.userDropdownDivider} />
 
               <button onClick={openPwModal} style={styles.userDropdownItem}>
@@ -84,7 +103,7 @@ export default function TopBar({
           )}
         </div>
 
-        <button onClick={onOpenNewGame} style={styles.primaryBtn}>
+        <button className="hp-topbar-new" onClick={onOpenNewGame} style={styles.primaryBtn}>
           ✦ New Game
         </button>
       </div>

frontend/src/constants.js

@@ -1,2 +1 @@
 export const API_BASE = "/api";
-export const CHIP_LIST = ["AL", "JG", "JN", "SN", "TL"];

frontend/src/styles/hooks/useHpGlobalStyles.js

@@ -2,6 +2,8 @@ import { useEffect } from "react";
 import { stylesTokens } from "../theme";
 import { applyTheme } from "../themes";
 
+
+
 export function useHpGlobalStyles() {
   // Google Fonts
   useEffect(() => {
@@ -74,10 +76,78 @@ export function useHpGlobalStyles() {
         color: ${stylesTokens.textMain};
       }
       body {
-        overflow: hidden;
+        overflow-x: hidden;
+        -webkit-overflow-scrolling: touch;
       }
       #root { background: transparent; }
-      * { -webkit-tap-highlight-color: transparent; }
+      *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
+      button, input, select { font-family: inherit; }
+      button { transition: transform 140ms ease, filter 140ms ease, border-color 140ms ease, background 140ms ease; }
+      button:not(:disabled):hover { filter: brightness(1.12); transform: translateY(-1px); }
+      button:not(:disabled):active { transform: translateY(0); filter: brightness(0.98); }
+      button:disabled { cursor: not-allowed; opacity: 0.55; }
+      input:focus, select:focus { border-color: var(--hp-textGold) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hp-textGold) 16%, transparent); }
+      .hp-row { transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease; }
+      .hp-row:hover { box-shadow: inset 0 0 0 1px rgba(233,216,166,0.12); }
+      .hp-start-overlay { position: fixed; inset: 0; z-index: 2147483646; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at center, rgba(233,216,166,0.12), rgba(4,4,7,0.88) 48%, rgba(0,0,0,0.96)); animation: hpStartFade 260ms ease-out; }
+      .hp-start-card { position: relative; width: min(420px, 100%); padding: 30px 22px 24px; border: 1px solid rgba(233,216,166,0.34); border-radius: 24px; text-align: center; background: linear-gradient(145deg, rgba(34,31,38,0.96), rgba(10,10,14,0.96)); box-shadow: 0 24px 90px rgba(0,0,0,0.72), 0 0 60px rgba(233,216,166,0.12); animation: hpStartCard 520ms cubic-bezier(.2,.8,.2,1); overflow: hidden; }
+      .hp-start-card::before, .hp-start-card::after { content: ""; position: absolute; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(233,216,166,0.72), transparent); animation: hpStartLine 1.8s ease-in-out infinite; }
+      .hp-start-card::before { top: 12px; }
+      .hp-start-card::after { bottom: 12px; animation-delay: .45s; }
+      .hp-start-rune { color: var(--hp-textGold); font-size: 32px; line-height: 1; animation: hpStartRune 1.4s ease-in-out infinite; }
+      .hp-start-kicker { margin-top: 14px; color: var(--hp-textDim); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
+      .hp-start-title { margin-top: 8px; color: var(--hp-textGold); font-family: "Cinzel Decorative", "IM Fell English", system-ui; font-size: 25px; font-weight: 900; }
+      .hp-start-subtitle { margin-top: 8px; color: var(--hp-textMain); font-size: 15px; }
+      .hp-start-card button { border: 1px solid rgba(233,216,166,0.26); border-radius: 12px; background: rgba(233,216,166,0.10); padding: 10px 16px; font-weight: 900; cursor: pointer; }
+      @keyframes hpStartFade { from { opacity: 0; } to { opacity: 1; } }
+      @keyframes hpStartCard { from { opacity: 0; transform: translateY(18px) scale(.92) rotateX(8deg); } to { opacity: 1; transform: translateY(0) scale(1) rotateX(0); } }
+      @keyframes hpStartRune { 0%, 100% { transform: rotate(0) scale(1); opacity: .7; } 50% { transform: rotate(180deg) scale(1.22); opacity: 1; } }
+      @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-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-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-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-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; }
+        .hp-topbar > div:first-child > div:last-child { max-width: 105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px !important; }
+        .hp-topbar-actions { width: auto; flex: 0 0 auto; margin-left: 0; gap: 5px !important; }
+        .hp-user-menu-wrap { flex: 0 0 auto; min-width: 0; }
+        .hp-topbar-user, .hp-topbar-new { flex: 0 0 auto; min-height: 40px; width: auto; padding: 8px 9px !important; font-size: 13px; }
+        .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-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-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; }
+        button { min-height: 42px; }
+        input, select { min-height: 44px; box-sizing: border-box; }
+        .hp-topbar + * { margin-top: 12px !important; }
+      }
+      @media (max-width: 360px) {
+        .hp-row { grid-template-columns: minmax(0, 1fr) 38px 56px !important; font-size: 14px; }
+        .hp-topbar { gap: 5px !important; }
+        .hp-topbar-user, .hp-topbar-new { padding-left: 7px !important; padding-right: 7px !important; font-size: 12px; }
+      }
     `;
     document.head.appendChild(style);
   }, []);

frontend/src/styles/styles.js

@@ -10,8 +10,8 @@ export const styles = {
 
   shell: {
     fontFamily: '"IM Fell English", system-ui',
-    padding: 16,
+    padding: "22px 16px 42px",
-    maxWidth: 680,
+    maxWidth: 760,
     margin: "0 auto",
   },
 
@@ -22,34 +22,38 @@ export const styles = {
     justifyContent: "space-between",
     alignItems: "center",
     gap: 10,
-    padding: 12,
+    padding: "14px 16px",
-    borderRadius: 16,
+    borderRadius: 18,
-    background: stylesTokens.panelBg,
+    background: `linear-gradient(135deg, rgba(31, 28, 32, 0.90), ${stylesTokens.panelBg})`,
-    border: `1px solid ${stylesTokens.panelBorder}`,
+    border: `1px solid ${stylesTokens.headerBorder}`,
-    boxShadow: "0 12px 30px rgba(0,0,0,0.45)",
+    boxShadow: "0 18px 42px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.08)",
-    backdropFilter: "blur(6px)",
+    backdropFilter: "blur(14px) saturate(1.12)",
+    WebkitBackdropFilter: "blur(14px) saturate(1.12)",
   },
 
   card: {
-    borderRadius: 18,
+    borderRadius: 20,
     overflow: "hidden",
     border: `1px solid ${stylesTokens.panelBorder}`,
-    background: "rgba(18, 18, 20, 0.50)",
+    background: `linear-gradient(145deg, rgba(25, 24, 28, 0.88), ${stylesTokens.panelBg})`,
-    boxShadow: "0 18px 40px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.06)",
+    boxShadow: "0 20px 48px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.07)",
+    backdropFilter: "blur(14px) saturate(1.08)",
+    WebkitBackdropFilter: "blur(14px) saturate(1.08)",
   },
 
   cardBody: {
-    padding: 12,
+    padding: "14px 16px",
     display: "flex",
     gap: 10,
     alignItems: "center",
   },
 
   sectionHeader: {
-    padding: "11px 14px",
+    padding: "13px 16px",
     fontWeight: 1000,
     fontFamily: '"Cinzel Decorative", "IM Fell English", system-ui',
-    letterSpacing: 1.0,
+    letterSpacing: 1.5,
+    fontSize: 14,
     color: stylesTokens.textGold,
 
     // WICHTIG: Header-Farben aus Theme-Tokens, nicht hart codiert
@@ -57,16 +61,16 @@ export const styles = {
     borderBottom: `1px solid ${stylesTokens.headerBorder}`,
 
     textTransform: "uppercase",
-    textShadow: "0 1px 0 rgba(0,0,0,0.6)",
+    textShadow: "0 1px 0 rgba(0,0,0,0.72)",
   },
 
   row: {
     display: "grid",
     gridTemplateColumns: "1fr 54px 68px",
     gap: 10,
-    padding: "12px 14px",
+    padding: "13px 16px",
     alignItems: "center",
-    borderBottom: "1px solid rgba(233,216,166,0.08)",
+    borderBottom: "1px solid rgba(233,216,166,0.10)",
     borderLeft: "4px solid rgba(0,0,0,0)",
   },
 
@@ -100,9 +104,9 @@ export const styles = {
   tagBtn: {
     padding: "8px 0",
     fontWeight: 1000,
-    borderRadius: 12,
+    borderRadius: 13,
-    border: `1px solid rgba(233,216,166,0.18)`,
+    border: `1px solid rgba(233,216,166,0.22)`,
-    background: "rgba(255,255,255,0.06)",
+    background: "rgba(255,255,255,0.055)",
     color: stylesTokens.textGold,
     cursor: "pointer",
     boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06)",
@@ -110,9 +114,9 @@ export const styles = {
 
   helpBtn: {
     padding: "10px 12px",
-    borderRadius: 12,
+    borderRadius: 13,
-    border: `1px solid rgba(233,216,166,0.18)`,
+    border: `1px solid rgba(233,216,166,0.22)`,
-    background: "rgba(255,255,255,0.06)",
+    background: "rgba(255,255,255,0.055)",
     color: stylesTokens.textGold,
     fontWeight: 1000,
     cursor: "pointer",
@@ -122,31 +126,31 @@ export const styles = {
 
   input: {
     width: "100%",
-    padding: "10px 12px",
+    padding: "11px 12px",
-    borderRadius: 14,
+    borderRadius: 13,
-    border: `1px solid rgba(233,216,166,0.18)`,
+    border: `1px solid rgba(233,216,166,0.22)`,
-    background: "rgba(10,10,12,0.55)",
+    background: "rgba(7,7,10,0.64)",
     color: stylesTokens.textMain,
     outline: "none",
     fontSize: 15,
   },
 
   primaryBtn: {
-    padding: "10px 12px",
+    padding: "11px 15px",
-    borderRadius: 12,
+    borderRadius: 13,
-    border: `1px solid rgba(233,216,166,0.28)`,
+    border: `1px solid rgba(233,216,166,0.34)`,
-    background: "linear-gradient(180deg, rgba(233,216,166,0.24), rgba(233,216,166,0.10))",
+    background: "linear-gradient(135deg, rgba(233,216,166,0.28), rgba(120,88,35,0.20))",
     color: stylesTokens.textGold,
     fontWeight: 1000,
     cursor: "pointer",
-    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.08)",
+    boxShadow: "0 8px 20px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.11)",
   },
 
   secondaryBtn: {
     padding: "10px 12px",
-    borderRadius: 12,
+    borderRadius: 13,
     border: `1px solid rgba(233,216,166,0.18)`,
-    background: "rgba(255,255,255,0.05)",
+    background: "rgba(255,255,255,0.055)",
     color: stylesTokens.textMain,
     fontWeight: 900,
     cursor: "pointer",
@@ -158,12 +162,13 @@ export const styles = {
     position: "relative",
     zIndex: 1,
     marginTop: 14,
-    padding: 12,
+    padding: 14,
-    borderRadius: 16,
+    borderRadius: 20,
-    border: `1px solid rgba(233,216,166,0.14)`,
+    border: `1px solid ${stylesTokens.panelBorder}`,
-    background: "rgba(18, 18, 20, 0.40)",
+    background: `linear-gradient(145deg, rgba(25, 24, 28, 0.86), ${stylesTokens.panelBg})`,
-    boxShadow: "0 12px 30px rgba(0,0,0,0.45)",
+    boxShadow: "0 18px 42px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06)",
-    backdropFilter: "blur(6px)",
+    backdropFilter: "blur(14px) saturate(1.08)",
+    WebkitBackdropFilter: "blur(14px) saturate(1.08)",
   },
   adminTop: {
     display: "flex",
@@ -175,13 +180,20 @@ export const styles = {
     fontWeight: 1000,
     color: stylesTokens.textGold,
   },
+  adminFieldLabel: {
+    display: "grid",
+    gap: 5,
+    color: stylesTokens.textDim,
+    fontSize: 12,
+    fontWeight: 800,
+  },
   userRow: {
     display: "grid",
     gridTemplateColumns: "1fr 80px 90px",
     gap: 8,
     padding: 10,
     borderRadius: 12,
-    background: "rgba(255,255,255,0.06)",
+    background: "rgba(255,255,255,0.055)",
     border: `1px solid rgba(233,216,166,0.10)`,
   },
 
@@ -203,12 +215,12 @@ export const styles = {
 
   modalCard: {
     width: "min(560px, 100%)",
-    borderRadius: 18,
+    borderRadius: 20,
     border: `1px solid rgba(233,216,166,0.18)`,
-    background: "rgba(12,12,14,0.96)",
+    background: "linear-gradient(145deg, rgba(27,25,30,0.98), rgba(11,11,14,0.98))",
-    boxShadow: "0 18px 55px rgba(0,0,0,0.70)",
+    boxShadow: "0 24px 70px rgba(0,0,0,0.78), inset 0 1px 0 rgba(255,255,255,0.07)",
-    padding: 14,
+    padding: 16,
-    maxHeight: "calc(100vh - 32px)",
+    maxHeight: "calc(100dvh - 32px)",
     overflow: "auto",
   },
   modalHeader: {
@@ -305,13 +317,14 @@ export const styles = {
     width: "100%",
     maxWidth: 420,
     padding: 26,
-    borderRadius: 22,
+    borderRadius: 24,
     position: "relative",
     zIndex: 2,
-    border: `1px solid rgba(233,216,166,0.18)`,
+    border: `1px solid ${stylesTokens.headerBorder}`,
-    background: "rgba(18, 18, 20, 0.55)",
+    background: `linear-gradient(145deg, rgba(29, 27, 31, 0.92), ${stylesTokens.panelBg})`,
-    boxShadow: "0 18px 60px rgba(0,0,0,0.70)",
+    boxShadow: "0 24px 80px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.08)",
-    backdropFilter: "blur(8px)",
+    backdropFilter: "blur(16px) saturate(1.12)",
+    WebkitBackdropFilter: "blur(16px) saturate(1.12)",
     animation: "popIn 240ms ease-out",
     color: stylesTokens.textMain,
   },
@@ -338,24 +351,24 @@ export const styles = {
   },
   loginInput: {
     width: "100%",
-    padding: 10,
+    padding: "11px 12px",
-    borderRadius: 12,
+    borderRadius: 13,
-    border: `1px solid rgba(233,216,166,0.18)`,
+    border: `1px solid rgba(233,216,166,0.22)`,
-    background: "rgba(10,10,12,0.60)",
+    background: "rgba(7,7,10,0.64)",
     color: stylesTokens.textMain,
     outline: "none",
     fontSize: 16,
   },
   loginBtn: {
-    padding: "12px 14px",
+    padding: "12px 15px",
     borderRadius: 14,
-    border: `1px solid rgba(233,216,166,0.28)`,
+    border: `1px solid rgba(233,216,166,0.34)`,
-    background: "linear-gradient(180deg, rgba(233,216,166,0.24), rgba(233,216,166,0.10))",
+    background: "linear-gradient(135deg, rgba(233,216,166,0.28), rgba(120,88,35,0.20))",
     color: stylesTokens.textGold,
     fontWeight: 1000,
     fontSize: 16,
     cursor: "pointer",
-    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.08)",
+    boxShadow: "0 8px 20px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.11)",
   },
   loginHint: {
     marginTop: 18,
@@ -431,7 +444,10 @@ export const styles = {
     backgroundSize: "cover",
     backgroundPosition: "center",
     backgroundRepeat: "no-repeat",
-    filter: "saturate(0.9) contrast(1.05) brightness(0.55)",
+    filter: "saturate(0.72) contrast(1.12) brightness(0.42) blur(1.2px)",
+    transform: "scale(1.015)",
+    backgroundColor: "rgba(8, 7, 12, 0.34)",
+    backgroundBlendMode: "multiply",
   },
 
   chipGrid: {
@@ -443,9 +459,9 @@ export const styles = {
 
   chipBtn: {
     padding: "10px 14px",
-    borderRadius: 12,
+    borderRadius: 13,
     border: "1px solid rgba(233,216,166,0.18)",
-    background: "rgba(255,255,255,0.06)",
+    background: "rgba(255,255,255,0.055)",
     color: stylesTokens.textGold,
     fontWeight: 1000,
     cursor: "pointer",
@@ -457,7 +473,7 @@ export const styles = {
     alignItems: "center",
     gap: 8,
     padding: "10px 12px",
-    borderRadius: 12,
+    borderRadius: 14,
     border: `1px solid rgba(233,216,166,0.18)`,
     background: "rgba(255,255,255,0.05)",
     color: stylesTokens.textMain,
@@ -474,11 +490,11 @@ export const styles = {
     minWidth: 220,
     borderRadius: 14,
     border: `1px solid rgba(233,216,166,0.18)`,
-    background: "linear-gradient(180deg, rgba(20,20,24,0.96), rgba(12,12,14,0.92))",
+    background: "linear-gradient(145deg, rgba(29,27,33,0.98), rgba(10,10,13,0.96))",
     boxShadow: "0 18px 55px rgba(0,0,0,0.70)",
     overflow: "hidden",
     zIndex: 99999,
-    backdropFilter: "blur(8px)",
+    backdropFilter: "blur(14px)",
   },
 
   userDropdownItem: {
@@ -496,4 +512,4 @@ export const styles = {
     height: 1,
     background: "rgba(233,216,166,0.12)",
   },
-};
+};